/* Cleave — Bible Reading Companion Restful, eye-friendly styling. No pure-white (#FFFFFF) background anywhere (spec req. 1, DoD 1). Textures, text sizes and dyslexia mode are driven by data-attributes set on by js/themes.js. */ /* ---- OpenDyslexic for dyslexia mode (spec req. 4). Loads from a CDN when online; falls back to a friendly stack offline. ---- */ @font-face { font-family: 'OpenDyslexic'; font-style: normal; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/woff/OpenDyslexic-Regular.woff') format('woff'); } /* ---- Texture palettes (spec req. 8,9; brand req. 97-99). Every --bg is a soft tone, never #fff. Ink is midnight navy, accents are sacred gold, the linen base is warm cream, and Night returns to TARRY's midnight navy so the two apps meet in the dark on purpose (spec req. 98,99). ---- */ :root { --reading-font: 'Newsreader', 'Iowan Old Style', Georgia, 'Palatino Linotype', 'Times New Roman', serif; --ui-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --base-size: 1.125rem; --line: 1.7; --letter: normal; --word: normal; --maxw: 42rem; /* Bible Verified brand constants (req. 97) */ --navy: #0A0B14; --gold: #C9A84C; --gold-light: #E2C478; --amber: #D4743A; --cream: #F0EAD6; /* default = Linen (warm cream base, midnight-navy ink, sacred-gold accent) */ --bg: #F0EAD6; --bg-panel: #f6f0e0; --bg-raised: #faf5e8; --ink: #0A0B14; --ink-soft: #5a5648; --accent: #9a7c2e; /* gold, darkened for text-contrast on cream */ --accent-soft: #C9A84C; /* sacred gold for rules, swatches, marks */ --line-color: #e0d4b6; --shadow: rgba(10, 11, 20, 0.12); --link: #8a6d22; --selection: #ecd79f; } :root[data-texture='linen'] { --bg:#F0EAD6; --bg-panel:#f6f0e0; --bg-raised:#faf5e8; --ink:#0A0B14; --ink-soft:#5a5648; --accent:#9a7c2e; --accent-soft:#C9A84C; --line-color:#e0d4b6; --link:#8a6d22; --selection:#ecd79f; } :root[data-texture='parchment'] { --bg:#efe6cf; --bg-panel:#f5eed9; --bg-raised:#f8f1e0; --ink:#14130c; --ink-soft:#5f5740; --accent:#967227; --accent-soft:#C9A84C; --line-color:#ddd0ac; --link:#7d5f1f; --selection:#e6d29a; } :root[data-texture='sepia'] { --bg:#e8dcc3; --bg-panel:#efe5cf; --bg-raised:#f2e9d8; --ink:#1a140d; --ink-soft:#6a5c44; --accent:#9a6a26; --accent-soft:#c9923f; --line-color:#d6c6a4; --link:#82591f; --selection:#e3cb98; } :root[data-texture='gray'] { --bg:#e4e5e1; --bg-panel:#ecedea; --bg-raised:#f0f1ee; --ink:#13151a; --ink-soft:#565b5d; --accent:#7a6a2f; --accent-soft:#b79a4a; --line-color:#d2d5cf; --link:#6c5e2a; --selection:#dcd6bd; } :root[data-texture='night'] { --bg:#0A0B14; --bg-panel:#14161f; --bg-raised:#1b1e29; --ink:#F0EAD6; --ink-soft:#9a958a; --accent:#C9A84C; --accent-soft:#E2C478; --line-color:#2a2d3a; --link:#E2C478; --shadow: rgba(0,0,0,0.5); --selection:#3a3320; } /* ---- Text size steps (spec req. 10): 7 steps, small to extra large ---- */ :root[data-textsize='1'] { --base-size: 0.92rem; --maxw: 36rem; } :root[data-textsize='2'] { --base-size: 1.02rem; --maxw: 39rem; } :root[data-textsize='3'] { --base-size: 1.12rem; } :root[data-textsize='4'] { --base-size: 1.25rem; } :root[data-textsize='5'] { --base-size: 1.42rem; --maxw: 45rem; } :root[data-textsize='6'] { --base-size: 1.62rem; --maxw: 48rem; } :root[data-textsize='7'] { --base-size: 1.85rem; --maxw: 52rem; } /* ---- Dyslexia mode (spec req. 4): OpenDyslexic + wider spacing ---- */ :root[data-dyslexia='on'] { --reading-font: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif; --ui-font: 'OpenDyslexic', 'Comic Sans MS', 'Trebuchet MS', sans-serif; --line: 2.1; --letter: 0.06em; --word: 0.18em; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; } body { background: var(--bg); color: var(--ink); font-family: var(--ui-font); font-size: var(--base-size); line-height: var(--line); letter-spacing: var(--letter); word-spacing: var(--word); -webkit-font-smoothing: antialiased; } ::selection { background: var(--selection); } a { color: var(--link); } /* ---- App shell layout ---- */ .app { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; grid-template-areas: 'header header' 'side main'; min-height: 100vh; } .topbar { grid-area: header; display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; background: var(--bg-panel); border-bottom: 1px solid var(--line-color); position: sticky; top: 0; z-index: 30; } .topbar .brand { font-family: var(--reading-font); font-weight: 600; font-size: 1.15rem; letter-spacing: 0.02em; } .topbar .brand small { display:block; font-size: 0.62rem; color: var(--ink-soft); letter-spacing: 0.18em; text-transform: uppercase; } .topbar .spacer { flex: 1; } .topbar .pill { font-size: 0.8rem; color: var(--ink-soft); background: var(--bg-raised); border:1px solid var(--line-color); border-radius: 999px; padding: 0.2rem 0.7rem; } .iconbtn { background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-color); border-radius: 10px; padding: 0.4rem 0.7rem; cursor: pointer; font-size: 1rem; line-height: 1; } .iconbtn:hover { border-color: var(--accent-soft); } /* ---- Side menu (spec req. 5): collapses into the side, can be pinned ---- */ .sidemenu { grid-area: side; background: var(--bg-panel); border-right: 1px solid var(--line-color); width: 230px; padding: 1rem 0.6rem; overflow-y: auto; } .sidemenu nav a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.7rem; border-radius: 10px; margin-bottom: 0.15rem; color: var(--ink); text-decoration: none; font-size: 0.98rem; } .sidemenu nav a:hover { background: var(--bg-raised); } .sidemenu nav a.active { background: var(--bg-raised); border:1px solid var(--line-color); color: var(--accent); font-weight: 600; } .sidemenu .menu-foot { margin-top: 1rem; padding: 0.6rem 0.7rem; font-size: 0.8rem; color: var(--ink-soft); border-top: 1px solid var(--line-color); } /* Pinned (wide screens) vs collapsed */ :root[data-menu='collapsed'] .sidemenu { display: none; } .main { grid-area: main; padding: 1.4rem clamp(1rem, 4vw, 2.5rem); } /* Overlay menu used on phones and when collapsed (spec req. 5, narrow phone) */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 40; display: none; } .scrim.show { display: block; } .sidemenu.overlay { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; display: block !important; box-shadow: 2px 0 16px var(--shadow); } /* ---- Reading column ---- */ .reading { max-width: var(--maxw); margin: 0 auto; font-family: var(--reading-font); } .passage-head { display:flex; align-items:baseline; gap:0.6rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .passage-head h1 { font-size: 1.5rem; margin: 0; } .verse { display: block; padding: 0.15rem 0.3rem; border-radius: 6px; cursor: pointer; position: relative; } .verse:hover { background: var(--bg-raised); } .verse .vnum { font-size: 0.7em; color: var(--accent); vertical-align: super; margin-right: 0.35em; font-family: var(--ui-font); } .verse.selected { outline: 2px solid var(--accent-soft); } .verse .flag-emoji { margin-left: 0.3em; } /* highlight colors (spec req. 29) */ .hl-yellow { background: #f3e2a0; } .hl-green { background: #cfe6bd; } .hl-blue { background: #c6dcee; } .hl-pink { background: #f1cdd9; } .hl-orange { background: #f3d4ad; } :root[data-texture='night'] .hl-yellow { background:#5c5126; } :root[data-texture='night'] .hl-green { background:#2f4a2c; } :root[data-texture='night'] .hl-blue { background:#274056; } :root[data-texture='night'] .hl-pink { background:#532a3a; } :root[data-texture='night'] .hl-orange { background:#5a4324; } /* ---- Controls / cards / buttons ---- */ .toolbar { display:flex; flex-wrap: wrap; gap: 0.5rem; align-items:center; margin: 0.8rem 0 1.2rem; } select, input, textarea, button { font-family: var(--ui-font); font-size: 0.95rem; color: var(--ink); } select, input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], textarea { background: var(--bg-raised); border: 1px solid var(--line-color); border-radius: 8px; padding: 0.45rem 0.6rem; } textarea { width: 100%; resize: vertical; min-height: 5rem; } .btn { background: var(--accent); color: #fbf7ee; border: none; border-radius: 9px; padding: 0.5rem 0.9rem; cursor: pointer; font-weight: 600; } .btn.secondary { background: var(--bg-raised); color: var(--ink); border: 1px solid var(--line-color); } .btn:hover { filter: brightness(1.05); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .card { background: var(--bg-panel); border: 1px solid var(--line-color); border-radius: 14px; padding: 1.1rem 1.2rem; margin-bottom: 1rem; box-shadow: 0 1px 3px var(--shadow); } .card h2, .card h3 { margin-top: 0; } .muted { color: var(--ink-soft); } .row { display:flex; gap:0.6rem; flex-wrap: wrap; align-items:center; } .tag { font-size:0.72rem; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:999px; padding:0.1rem 0.55rem; color:var(--ink-soft); } .tag.private { color:#8a5a2b; border-color:#d8b483; } /* verse chip / scripture voice (spec req. 48-51) */ .verse-chip { border-left: 3px solid var(--accent-soft); margin: 0.8rem 0; padding: 0.3rem 0 0.3rem 0.9rem; font-family: var(--reading-font); font-style: italic; color: var(--ink); } .verse-chip .verse-ref { display:block; font-style: normal; font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.3rem; } /* commentary layers (spec req. 17-20) */ .layer { border:1px solid var(--line-color); border-radius: 12px; margin-bottom: 0.7rem; overflow: hidden; background: var(--bg-raised); } .layer > summary { cursor: pointer; padding: 0.7rem 0.9rem; font-weight: 600; list-style: none; } .layer > summary::-webkit-details-marker { display:none; } .layer .layer-body { padding: 0 0.9rem 0.9rem; } .layer .sources { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.6rem; border-top: 1px dashed var(--line-color); padding-top: 0.5rem; } /* word-lookup / right panel */ .panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 92vw); z-index: 60; background: var(--bg-panel); border-left: 1px solid var(--line-color); box-shadow: -2px 0 16px var(--shadow); padding: 1.1rem; overflow-y: auto; transform: translateX(100%); transition: transform 0.18s ease; } .panel.open { transform: translateX(0); } .panel .closebtn { float: right; } .lemma { font-family: var(--reading-font); font-size: 1.8rem; } /* interlinear (spec req. 8) */ .interlinear { display:flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; font-family: var(--reading-font); } .ilword { text-align:center; cursor:pointer; padding:0.2rem 0.3rem; border-radius:6px; } .ilword:hover { background: var(--bg-raised); } .ilword .orig { font-size: 1.15rem; display:block; } .ilword .en { font-size: 0.8rem; color: var(--ink-soft); display:block; } .ilword .str { font-size: 0.66rem; color: var(--accent); display:block; } .manuscript { font-family: 'Times New Roman', serif; font-size: 1.5rem; line-height: 2; } .manuscript.rtl { direction: rtl; text-align: right; } /* progress bar (plans) */ .progress { background: var(--bg-raised); border:1px solid var(--line-color); border-radius:999px; height: 12px; overflow:hidden; } .progress > i { display:block; height:100%; background: var(--accent); } /* toast / offline banner */ .toast { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); background: var(--ink); color: var(--bg-panel); padding: 0.6rem 1rem; border-radius: 10px; z-index: 80; box-shadow: 0 2px 10px var(--shadow); max-width: 90vw; } .offline-banner { background:#8a5a2b; color:#fbf7ee; text-align:center; padding:0.4rem; font-size:0.85rem; } /* responsive: phones (spec req. 6, narrow-phone edge case) */ @media (max-width: 760px) { .app { grid-template-columns: 1fr; grid-template-areas: 'header' 'main'; } :root .sidemenu { display: none; } /* collapsed by default on phone */ .main { padding: 1rem; } } .flag-picker, .color-picker { display:flex; gap:0.4rem; flex-wrap:wrap; } .swatch { width: 26px; height: 26px; border-radius: 50%; border:1px solid var(--line-color); cursor:pointer; } .emoji-btn { font-size: 1.2rem; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:8px; cursor:pointer; padding:0.2rem 0.4rem; } .kv { display:flex; gap:0.5rem; margin:0.2rem 0; } .kv b { min-width: 7rem; color: var(--ink-soft); font-weight:600; } hr.soft { border:none; border-top:1px solid var(--line-color); margin:1rem 0; } .notice { background: var(--bg-raised); border:1px solid var(--line-color); border-left:3px solid var(--accent-soft); border-radius:8px; padding:0.7rem 0.9rem; } mark { background: color-mix(in srgb, var(--gold) 55%, transparent); color: inherit; padding: 0 0.1em; border-radius: 3px; } .icon { display:inline-block; vertical-align:middle; } /* ============================================================================ v2 — the Bible you can hold (spec Section A,B,O) ============================================================================ */ /* Brand wordmark + placeholder mark (spec req. 93, 101). The flame is a CLEARLY LABELED PLACEHOLDER until the real Cleave logo files exist; never a substitute for the final brand mark. */ .topbar .brand { display:flex; align-items:center; gap:0.55rem; text-decoration:none; color:var(--ink); } .brandmark { width:32px; height:32px; border-radius:8px; flex:0 0 auto; object-fit:cover; display:block; box-shadow: 0 1px 3px var(--shadow); } .brandtext { font-family: var(--reading-font); font-weight:600; font-size:1.15rem; letter-spacing:0.01em; line-height:1; } .brandtext small { display:block; font-size:0.6rem; color:var(--ink-soft); letter-spacing:0.16em; text-transform:uppercase; margin-top:2px; } .brandfoot { display:flex; align-items:center; gap:0.4rem; } .brandfoot .seal { width:18px; height:18px; border-radius:50%; background:var(--navy); position:relative; box-shadow: inset 0 0 0 1.5px var(--gold); flex:0 0 auto; } .brandfoot .seal::after { content:''; position:absolute; inset:4px; border-radius:50%; background: radial-gradient(ellipse at 50% 60%, var(--gold), var(--amber) 75%, transparent 78%); } .iconbtn .icon { pointer-events:none; } .iconbtn.on { border-color: var(--gold); color: var(--accent); background: color-mix(in srgb, var(--gold) 14%, var(--bg-raised)); } /* Reading shell + toolbars */ .reading-shell { max-width: 1100px; margin: 0 auto; } .reader-toolbar { display:flex; align-items:center; gap:0.35rem; flex-wrap:wrap; margin:0.2rem 0 0.4rem; } .reader-toolbar .r-where { font-family:var(--reading-font); font-weight:600; margin-right:0.3rem; } .r-trans-wrap { display:inline-flex; align-items:center; gap:0.3rem; } .r-trans-wrap select { max-width: 12rem; } .r-spring { flex:1; } .reader-substrip { display:flex; align-items:center; gap:0.8rem; flex-wrap:wrap; margin-bottom:0.5rem; font-size:0.85rem; color:var(--ink-soft); } .reader-substrip .mini input { transform: translateY(1px); } /* The book: desk (app bg) with a page (a lighter linen panel) and a center seam */ .book { background: transparent; } .page-viewport { position: relative; overflow: hidden; height: calc(100vh - 246px); min-height: 360px; background: var(--bg-panel); border:1px solid var(--line-color); border-radius: 10px; box-shadow: 0 6px 24px var(--shadow), inset 0 0 60px color-mix(in srgb, var(--ink) 4%, transparent); } .page-flow { font-family: var(--reading-font); color: var(--ink); will-change: transform; transition: transform 0.42s cubic-bezier(.22,.61,.36,1); } :root[data-anim='off'] .page-flow { transition: none; } .page-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line-color); padding-bottom:0.35rem; margin-bottom:0.7rem; break-inside:avoid; } .page-head .ph-ref { font-weight:600; font-size:1.15rem; } .page-head .ph-trans { font-size:0.72rem; color:var(--ink-soft); letter-spacing:0.08em; text-transform:uppercase; } .page-body { text-align: justify; hyphens: auto; } /* verses run together like a printed Bible page (spec req. 6) */ .page-body .verse, .scroll-page .verse { display: inline; padding:0 0.05em; border-radius:4px; cursor:pointer; } .page-body .verse:hover, .scroll-page .verse:hover { background: color-mix(in srgb, var(--gold) 12%, transparent); } .page-body .verse.selected, .scroll-page .verse.selected { outline:2px solid var(--gold); outline-offset:1px; } .verse .vnum { font-size:0.66em; color:var(--accent); vertical-align:super; margin:0 0.18em 0 0.1em; font-family:var(--ui-font); font-weight:600; } .verse .flag-emoji { margin-left:0.15em; } .verse .note-dot { color: var(--accent); } .verse.red-letter { color: #b3361f; } :root[data-texture='night'] .verse.red-letter { color:#e08a6a; } .verse.reading-now { background: color-mix(in srgb, var(--gold) 28%, transparent); border-radius:4px; } .seam { display:none; } .page-viewport[data-cols="2"] .seam { display:block; position:absolute; top:0; bottom:0; left:50%; width:40px; transform:translateX(-50%); pointer-events:none; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 12%, transparent) 48%, color-mix(in srgb, var(--ink) 12%, transparent) 52%, transparent); } /* single page on a phone suggests the bound edge at the side */ .page-viewport[data-cols="1"] { box-shadow: 0 6px 24px var(--shadow), inset 14px 0 22px -14px color-mix(in srgb, var(--ink) 22%, transparent); } .turn-zone { position:absolute; top:0; bottom:0; width:7%; min-width:26px; border:none; background:transparent; cursor:pointer; z-index:2; } .turn-zone.turn-prev { left:0; } .turn-zone.turn-next { right:0; } .turn-zone:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent); } .turn-zone.turn-next:hover { background: linear-gradient(270deg, color-mix(in srgb, var(--ink) 7%, transparent), transparent); } .page-foot { display:flex; align-items:center; justify-content:center; gap:0.8rem; padding:0.5rem 0; } .page-info { font-size:0.82rem; color:var(--ink-soft); font-family:var(--ui-font); } /* scroll mode */ .page-viewport.scroll { overflow-y:auto; height: calc(100vh - 246px); } .scroll-page { padding: clamp(1rem, 4vw, 2.4rem); max-width: 44rem; margin:0 auto; font-family:var(--reading-font); } .scroll-page .page-body { text-align:left; } .reading-scroll { max-width: 44rem; margin:0 auto; } /* zoom: a single, enlarged page for focused reading (spec req. 4) */ :root[data-zoom='on'] .page-body, :root[data-zoom='on'] .scroll-page { font-size: 1.08em; } /* focus / distraction-free mode (spec req. 12) */ .focus-exit { display:none; position:fixed; top:0.7rem; right:0.7rem; z-index:45; gap:0.3rem; } :root[data-focus='on'] .topbar, :root[data-focus='on'] .sidemenu, :root[data-focus='on'] .reader-toolbar, :root[data-focus='on'] .reader-substrip, :root[data-focus='on'] #r-today, :root[data-focus='on'] .studyoverlay .overlay-handle { display:none !important; } :root[data-focus='on'] .app { grid-template-areas: 'main' 'main'; grid-template-columns: 1fr; } :root[data-focus='on'] .focus-exit { display:inline-flex; } :root[data-focus='on'] .page-viewport { height: calc(100vh - 84px); } /* daily countdown (spec req. 68) */ .daily-countdown { display:flex; align-items:center; gap:0.5rem; font-size:0.85rem; color:var(--accent); font-family:var(--ui-font); } .daily-countdown.done { color: var(--accent); font-weight:600; } .dc-bar { display:inline-block; width:90px; height:7px; border-radius:999px; background:var(--bg-raised); border:1px solid var(--line-color); overflow:hidden; } .dc-bar > i { display:block; height:100%; background:var(--gold); } /* picker popover */ .picker-pop { position:fixed; top:96px; left:50%; transform:translateX(-50%); z-index:70; width:min(320px,92vw); box-shadow:0 8px 30px var(--shadow); } /* ============================================================================ The study overlay (spec req. 17-22) ============================================================================ */ .studyoverlay { position:fixed; left:0; right:0; bottom:0; z-index:48; pointer-events:none; } .overlay-handle { pointer-events:auto; position:absolute; bottom:0; right:1.2rem; display:flex; align-items:center; gap:0.45rem; padding:0.4rem 1.1rem 0.55rem; background:var(--bg-panel); border:1px solid var(--line-color); border-bottom:none; border-radius:12px 12px 0 0; color:var(--ink); cursor:pointer; font-family:var(--ui-font); font-size:0.82rem; box-shadow:0 -2px 12px var(--shadow); } .overlay-handle .oh-grip { width:34px; height:4px; border-radius:999px; background:var(--accent-soft); } .overlay-panel { pointer-events:auto; position:absolute; left:0; right:0; bottom:0; height:46vh; background:var(--bg-panel); border-top:2px solid var(--gold); box-shadow:0 -6px 26px var(--shadow); transform: translateY(100%); transition: transform .3s ease; display:flex; flex-direction:column; border-radius:14px 14px 0 0; } :root[data-overlay='up'] .overlay-panel { transform: translateY(0); } :root[data-anim='off'] .overlay-panel { transition: none; } :root[data-overlay='up'] .main { padding-bottom: 47vh; } :root[data-overlay='up'] .page-viewport { height: calc(54vh - 250px); min-height: 200px; } .overlay-top { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:0.6rem 0.9rem; border-bottom:1px solid var(--line-color); } .overlay-context { font-family:var(--reading-font); } .overlay-sections { overflow-y:auto; padding:0.4rem 0.9rem 1rem; } .ov-sec { border-bottom:1px solid var(--line-color); } .ov-sec-head { width:100%; display:flex; align-items:center; justify-content:space-between; gap:0.5rem; background:none; border:none; cursor:pointer; padding:0.6rem 0.1rem; color:var(--ink); font-weight:600; font-family:var(--ui-font); } .ov-sec-title { display:flex; align-items:center; gap:0.45rem; } .ov-sec-body { padding:0.2rem 0.1rem 0.9rem; } /* ============================================================================ Contextual verse action bar (spec req. 20) ============================================================================ */ .verse-actions { position:absolute; z-index:72; width:min(340px,94vw); background:var(--bg-panel); border:1px solid var(--line-color); border-radius:12px; box-shadow:0 8px 28px var(--shadow); padding:0.5rem 0.6rem; } .va-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:0.4rem; font-family:var(--reading-font); } .va-bar { display:flex; flex-wrap:wrap; gap:0.25rem; } .va-btn { display:flex; flex-direction:column; align-items:center; gap:2px; flex:1 0 19%; padding:0.4rem 0.2rem; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:9px; cursor:pointer; color:var(--ink); font-size:0.64rem; } .va-btn span { font-family:var(--ui-font); } .va-btn.on { border-color:var(--gold); color:var(--accent); } .va-btn:hover { border-color:var(--accent-soft); } .va-memorize { display:flex; align-items:center; gap:0.3rem; width:100%; margin-top:0.4rem; background:none; border:none; color:var(--accent); cursor:pointer; font-size:0.76rem; font-family:var(--ui-font); padding:0.25rem 0; } .va-memorize:hover { text-decoration:underline; } .va-body:not(:empty) { margin-top:0.5rem; border-top:1px solid var(--line-color); padding-top:0.5rem; } .hl-set { display:flex; flex-wrap:wrap; gap:0.35rem; } .hl-chip { display:inline-flex; align-items:center; gap:0.3rem; padding:0.3rem 0.6rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); cursor:pointer; font-size:0.8rem; color:var(--ink); } .hl-chip::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--c, var(--gold)); } .hl-chip.on { border-color:var(--c, var(--gold)); box-shadow:0 0 0 2px color-mix(in srgb, var(--c, var(--gold)) 30%, transparent); } /* ============================================================================ Study tool pieces: cross-ref chips, topics, search, compare, connections ============================================================================ */ .ref-chips { display:flex; flex-wrap:wrap; gap:0.35rem; margin-top:0.3rem; } .ref-chip { display:inline-block; padding:0.18rem 0.55rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); color:var(--link); text-decoration:none; font-size:0.8rem; font-family:var(--ui-font); } .ref-chip:hover { border-color:var(--gold); } .topic { margin-bottom:0.7rem; } .search-hit { padding:0.4rem 0; border-bottom:1px dashed var(--line-color); } .search-hit p { margin:0.25rem 0 0; } .sources { font-size:0.78rem; color:var(--ink-soft); margin-top:0.5rem; } .compare { display:grid; grid-template-columns: repeat(var(--cols,2), 1fr); gap:0.8rem; } .compare-col { border:1px solid var(--line-color); border-radius:10px; padding:0.5rem 0.7rem; background:var(--bg-raised); } .compare-head { font-weight:600; color:var(--accent); border-bottom:1px solid var(--line-color); margin-bottom:0.4rem; padding-bottom:0.2rem; } .compare-v { margin:0.2rem 0; font-family:var(--reading-font); } @media (max-width:640px){ .compare { grid-template-columns: 1fr; } } .conn-edit { padding-left:0.7rem; } .conn-edit .cn-name { font-family:var(--reading-font); font-size:1.05rem; font-weight:600; } .cn-verse { border:1px solid var(--line-color); border-radius:10px; padding:0.5rem 0.7rem; margin:0.4rem 0; background:var(--bg-raised); } .cn-text { font-family:var(--reading-font); margin:0.3rem 0; } .cn-vnote { width:100%; } .cn-verses .iconbtn { padding:0.2rem 0.45rem; font-size:0.85rem; } /* ============================================================================ Soaking music + read-along player (spec req. 76-79) ============================================================================ */ .audiobar { position:fixed; left:50%; bottom:0.8rem; transform:translateX(-50%); z-index:46; width:min(560px,94vw); background:var(--bg-panel); border:1px solid var(--line-color); border-radius:14px; box-shadow:0 6px 26px var(--shadow); padding:0.6rem 0.8rem; } .audiobar[hidden] { display:none; } .audiobar .ab-row { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; } .audiobar .ab-title { font-weight:600; font-size:0.85rem; } .audiobar .ab-sub { font-size:0.72rem; color:var(--ink-soft); } .audiobar input[type=range] { accent-color: var(--gold); } .audiobar .ab-spring { flex:1; } :root[data-focus='on'] .audiobar { bottom:auto; top:3.2rem; } /* ============================================================================ Memorization (spec Section J) ============================================================================ */ .mem-card { border:1px solid var(--line-color); border-radius:12px; padding:0.8rem 1rem; margin-bottom:0.7rem; background:var(--bg-panel); } .mem-status { font-size:0.72rem; padding:0.1rem 0.5rem; border-radius:999px; border:1px solid var(--line-color); } .mem-status.new { color:var(--accent); } .mem-status.learning { color:var(--amber); } .mem-status.mastered { color:#3f7d4f; } .mem-practice { font-family:var(--reading-font); font-size:1.2rem; line-height:1.9; background:var(--bg-raised); border:1px solid var(--line-color); border-radius:10px; padding:1rem; min-height:5rem; } .mem-methods { display:flex; flex-wrap:wrap; gap:0.35rem; margin:0.5rem 0; } .mem-method { padding:0.35rem 0.7rem; border-radius:999px; border:1px solid var(--line-color); background:var(--bg-raised); cursor:pointer; font-size:0.8rem; color:var(--ink); display:inline-flex; align-items:center; gap:0.3rem; } .mem-method.on { border-color:var(--gold); color:var(--accent); background: color-mix(in srgb, var(--gold) 12%, var(--bg-raised)); } .cloze-blank { display:inline-block; min-width:2.5em; border-bottom:2px solid var(--accent-soft); margin:0 0.1em; } /* ============================================================================ About page ============================================================================ */ .about-hero { text-align:center; padding:1.5rem 0; } .about-manifesto { font-family:var(--reading-font); font-size:1.5rem; line-height:1.5; } .about-seal { width:64px; height:64px; border-radius:50%; background:var(--navy); position:relative; margin:0 auto 0.8rem; box-shadow: inset 0 0 0 3px var(--gold); } .about-seal::after { content:''; position:absolute; inset:14px; border-radius:50%; background: radial-gradient(ellipse at 50% 60%, var(--gold), var(--amber) 75%, transparent 78%); } @media (max-width:760px){ .reader-toolbar .r-where { display:none; } .page-viewport, .page-viewport.scroll { height: calc(100vh - 280px); } :root[data-overlay='up'] .page-viewport { height: calc(52vh - 250px); } } /* ---- Full-Bible loading + offline (added with online pull / save-offline) ---- */ .mini-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--bg-raised); color: var(--ink-soft); border: 1px solid var(--line-color); border-radius: 999px; padding: 0.15rem 0.6rem; font: inherit; font-size: 0.82rem; cursor: pointer; transition: filter .15s ease, color .15s ease; } .mini-btn:hover { filter: brightness(1.04); color: var(--ink); } .mini-btn:disabled { opacity: 0.65; cursor: progress; } .mini-btn.done { color: var(--gold); border-color: var(--gold); } .mini-btn svg { width: 14px; height: 14px; } .loading-page { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.8rem; min-height: 50vh; color: var(--ink-soft); font-size: 0.95rem; } .loading-page .spinner { width: 26px; height: 26px; border-radius: 50%; border: 3px solid var(--line-color); border-top-color: var(--gold); animation: cleave-spin 0.8s linear infinite; } @keyframes cleave-spin { to { transform: rotate(360deg); } }