/* ============================================================ BibleBridge Reader — reader.css Logos-inspired: clean typography, sidebar nav, warm white ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --sidebar-width: 220px; --header-height: 60px; --brand-dark: #1a1512; --brand-mid: #2a1f15; --accent: #8a6a1e; --accent-hover: #644d16; --text-primary: #1a1a1a; --text-secondary: #5c5248; --text-muted: #938a7e; --bg-page: #faf9f7; --bg-sidebar: #1a1512; --bg-sidebar-hover: rgba(255,255,255,0.06); --bg-sidebar-active: rgba(255,255,255,0.12); --border-light: #e8e4de; --border-divider: #ccc7bf; --verse-font-size: 1.15rem; --verse-line-height: 1.6; /* layered depth — tight contact shadow + soft ambient (warm-tinted) */ --shadow-card: 0 1px 2px rgba(40,32,24,0.05), 0 4px 16px rgba(60,50,40,0.06); --shadow-card-hover: 0 2px 4px rgba(40,32,24,0.06), 0 8px 28px rgba(60,50,40,0.10); /* surface vars — swap for dark mode */ --bg-card: #fffdfa; --bg-subtle: #f5f3ef; --bg-hover: rgba(158,118,64,0.07); --highlight-bg: #fef8e4; --highlight-border: #c49226; /* Matches .verse-selected:hover's background exactly (rgba(160,105,46,0.18) composited over --bg-page) rather than inventing a new highlight color — reuses an emphasis treatment already proven in both themes. No separate text color (see .search-result-text em) — background + bold carry the emphasis, same as light mode already did by coincidence (its old search-em-color happened to match --text-primary exactly; dark mode's didn't, which was the actual inconsistency). */ --search-em-bg: #eadfd2; --badge-bg: #ede9e3; --badge-color: #7a6e64; --rel-type-bg: #ede9e3; } /* ============================================================ DARK MODE — toggled via [data-theme="dark"] on Applied before first paint by inline script in ============================================================ */ [data-theme="dark"] { --text-primary: #ddd8ce; --text-secondary: #9a9285; --text-muted: #8f857a; --bg-page: #191815; --bg-sidebar: #0f0e0c; --bg-sidebar-hover: rgba(255,255,255,0.05); --bg-sidebar-active: rgba(255,255,255,0.10); --border-light: #2c2924; --border-divider: #3a3530; --accent: #c49840; --accent-hover: #a07828; --brand-dark: #0c0b09; --brand-mid: #181610; --bg-card: #222018; --bg-subtle: #1e1c16; --bg-hover: rgba(196,152,64,0.08); --highlight-bg: #28220e; --highlight-border: #c49226; --search-em-bg: #5d4a2e; --badge-bg: #292520; --badge-color: #66605a; --rel-type-bg: #252118; /* dark depth — shadows carry the whole lift on near-black surfaces */ --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 4px 18px rgba(0,0,0,0.35); --shadow-card-hover: 0 2px 4px rgba(0,0,0,0.45), 0 10px 30px rgba(0,0,0,0.5); } /* Smooth theme transitions */ body { transition: background-color 0.2s ease, color 0.2s ease; } /* Dark mode: recolor light-coded edge/relation badges */ [data-theme="dark"] .te-edge-leadsto, [data-theme="dark"] .rel-type[data-type="leads-to"] { background: #0e2232; color: #60b4e8; } [data-theme="dark"] .te-edge-resultsin, [data-theme="dark"] .rel-type[data-type="results-in"] { background: #0e2218; color: #4ecf84; } [data-theme="dark"] .te-edge-cause, [data-theme="dark"] .rel-type[data-type="cause"] { background: #2a1010; color: #d46060; } [data-theme="dark"] .te-edge-determines, [data-theme="dark"] .te-edge-dependson, [data-theme="dark"] .rel-type[data-type="depends-on"] { background: #261c0a; color: #c89050; } [data-theme="dark"] .te-edge-reverses, [data-theme="dark"] .rel-type[data-type="reverses"] { background: #280e1e; color: #d470a8; } [data-theme="dark"] .te-edge-transformsto, [data-theme="dark"] .te-edge-parentchild, [data-theme="dark"] .rel-type[data-type="parent_child"]{ background: #1c1030; color: #a060e0; } html { overflow-x: hidden; overflow-y: scroll; background: var(--bg-page) !important; } body { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; background: var(--bg-page) !important; color: var(--text-primary); overflow-x: hidden; } /* Applied by inline