/* Companion Bible — night-sky theme. * * The restraint is deliberate. A real deep-sky photograph is mostly darkness * with a little bloom; the colour lives in a few soft regions and the stars are * small. Anything louder reads as decoration rather than awe, and this is a * surface someone reads scripture on for minutes at a time. * * Legibility is the constraint everything else bends around: * - the page is deep indigo, never pure black (pure black + light text * produces halation, which is what makes long dark-mode reading tiring) * - body text is warm off-white, never #fff, at a slightly reduced weight * - nebulae and stars are painted on fixed pseudo-elements BEHIND content, * never as a parent background, so nothing tints the text * * Light mode is not a washed-out copy of this — it is daybreak. Same sky, * twelve hours later. */ :root { /* Night */ --bg: #070912; --bg-deep: #04050b; --surface: rgba(24, 28, 48, .58); --surface-solid: #141829; --ink: #e6e6f0; --ink-soft: #a8abc4; --ink-faint: #6f7392; --accent: #d9b06a; /* warm starlight against the cool field */ --accent-bright: #f0cd8f; --accent-soft: rgba(120, 108, 190, .16); --line: rgba(150, 160, 210, .16); --glow: rgba(217, 176, 106, .30); --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --star-opacity: 1; --nebula-opacity: 1; } @media (prefers-color-scheme: light) { :root { /* Daybreak */ --bg: #eef1f8; --bg-deep: #e2e7f4; --surface: rgba(255, 255, 255, .74); --surface-solid: #ffffff; --ink: #1c2033; --ink-soft: #55597a; --ink-faint: #8a8fa8; --accent: #9a6b2f; --accent-bright: #7d5522; --accent-soft: rgba(154, 107, 47, .10); --line: rgba(40, 50, 90, .13); --glow: rgba(154, 107, 47, .22); --star-opacity: 0; /* no stars at dawn */ --nebula-opacity: .5; } } * { box-sizing: border-box; } /* The base colour lives on , NOT . * * The sky layers below are body::before / body::after at negative z-index. * A negative-z-index child paints behind its parent's *content* but in front * of nothing if the parent has an opaque background — and `position: relative` * with `z-index: auto` does not create a stacking context to change that. An * opaque body background therefore hides the entire sky. Keep body * transparent. */ html { background: var(--bg); } body { margin: 0; min-height: 100vh; background: transparent; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; padding-bottom: env(safe-area-inset-bottom); position: relative; } /* ── The sky ───────────────────────────────────────────────── Two fixed layers behind everything. Fixed rather than scrolling so the sky stays put while text moves across it — parallax at zero cost, and it keeps the star pattern from visibly tiling during a long scroll. */ /* Nebula bloom. Overlapping wide ellipses at low alpha; where they cross, colour accumulates the way real emission regions do. */ body::before { content: ""; position: fixed; inset: -10%; z-index: -2; opacity: var(--nebula-opacity); background: radial-gradient(ellipse 70% 55% at 18% 12%, rgba(96, 68, 178, .34), transparent 62%), radial-gradient(ellipse 60% 45% at 82% 22%, rgba(38, 104, 156, .26), transparent 64%), radial-gradient(ellipse 85% 60% at 62% 78%, rgba(158, 62, 118, .20), transparent 66%), radial-gradient(ellipse 50% 40% at 38% 55%, rgba(196, 130, 78, .13), transparent 60%), radial-gradient(ellipse 90% 70% at 50% 100%, rgba(12, 16, 38, .85), transparent 70%); animation: drift 140s ease-in-out infinite alternate; } /* Starfield. Tiled radial-gradients at three different tile sizes — the sizes are mutually non-multiple, so the layers fall out of phase and the eye never catches the repeat. Pure CSS: no image request, no canvas, no JS. */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; opacity: var(--star-opacity); pointer-events: none; background-image: /* Layer A — small tile, many faint stars. Carries the density. */ radial-gradient(1px 1px at 12% 22%, rgba(255,255,255,.75), transparent), radial-gradient(1px 1px at 68% 8%, rgba(214,228,255,.65), transparent), radial-gradient(1px 1px at 34% 61%, rgba(255,255,255,.60), transparent), radial-gradient(1px 1px at 88% 47%, rgba(255,242,214,.70), transparent), radial-gradient(1px 1px at 52% 88%, rgba(255,255,255,.55), transparent), radial-gradient(1px 1px at 5% 74%, rgba(206,224,255,.62), transparent), radial-gradient(1px 1px at 77% 71%, rgba(255,255,255,.50), transparent), radial-gradient(1px 1px at 26% 36%, rgba(255,248,230,.66), transparent), radial-gradient(1px 1px at 45% 14%, rgba(255,255,255,.58), transparent), radial-gradient(1px 1px at 92% 82%, rgba(220,232,255,.54), transparent), radial-gradient(1px 1px at 18% 92%, rgba(255,255,255,.48), transparent), radial-gradient(1px 1px at 61% 43%, rgba(255,246,222,.60), transparent), /* Layer B — mid tile, slightly brighter. */ radial-gradient(1.3px 1.3px at 30% 12%, rgba(255,255,255,.88), transparent), radial-gradient(1.3px 1.3px at 82% 33%, rgba(224,236,255,.80), transparent), radial-gradient(1.3px 1.3px at 9% 55%, rgba(255,250,232,.84), transparent), radial-gradient(1.3px 1.3px at 57% 76%, rgba(255,255,255,.76), transparent), radial-gradient(1.3px 1.3px at 40% 95%, rgba(214,228,255,.72), transparent), /* Layer C — large tile, the few bright ones that carry a little colour. */ radial-gradient(2px 2px at 22% 44%, rgba(255,255,255,1), transparent), radial-gradient(1.8px 1.8px at 72% 18%, rgba(255,236,200,.95), transparent), radial-gradient(1.8px 1.8px at 48% 66%, rgba(206,226,255,.92), transparent); background-size: /* Layer A: one tile size, so these 12 stars repeat together as a field */ 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, 260px 260px, /* Layer B: 430 is not a multiple of 260, so the two fall out of phase */ 430px 430px, 430px 430px, 430px 430px, 430px 430px, 430px 430px, /* Layer C: 790 shares no factor with either — the repeat never lines up */ 790px 790px, 790px 790px, 790px 790px; } @keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-2.5%, 1.5%, 0) scale(1.06); } } /* Vestibular safety, and a real battery consideration: this page is open for the length of a chapter with the screen on. */ @media (prefers-reduced-motion: reduce) { body::before { animation: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ── Top bar ─────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 20; display: flex; gap: .25rem; padding: .5rem .75rem; padding-top: calc(.5rem + env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(130%) blur(14px); -webkit-backdrop-filter: saturate(130%) blur(14px); border-bottom: 1px solid var(--line); } .tab { flex: 0 0 auto; border: 0; background: none; color: var(--ink-faint); font: 600 .9rem/1 var(--sans); letter-spacing: .01em; padding: .55rem .85rem; border-radius: 99px; cursor: pointer; transition: color .18s ease, background .18s ease; } .tab:hover { color: var(--ink-soft); } .tab.is-active { background: var(--accent-soft); color: var(--accent-bright); } main { max-width: 42rem; margin: 0 auto; padding: 0 1.15rem 4rem; } .view { display: none; } .view.is-active { display: block; } /* ── Reading header ──────────────────────────────────────── */ .reading-head { padding: 1.9rem 0 1.3rem; } .eyebrow { margin: 0 0 .45rem; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .ref { margin: 0; font: 400 clamp(2rem, 6.5vw, 2.7rem)/1.12 var(--serif); letter-spacing: -.015em; /* The reference is the one place a little starlight is warranted. */ text-shadow: 0 0 28px var(--glow); } .plan-note { margin: .5rem 0 0; color: var(--ink-soft); font-size: .87rem; } /* ── Orienting brief ─────────────────────────────────────── */ .brief { margin-bottom: 1rem; padding: 1.05rem 1.15rem; background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 16px; } .brief-top { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; } .brief-label { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); } .kind { font-size: .66rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); padding: .18rem .5rem; border: 1px solid var(--line); border-radius: 99px; } .brief-text { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--ink); } .brief-names { margin: .65rem 0 0; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-soft); } .brief-names b { font-weight: 600; color: var(--accent); } /* ── Player ──────────────────────────────────────────────── */ .player { background: var(--surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: 18px; padding: 1.2rem 1.15rem 1rem; } .player-main { display: flex; align-items: center; justify-content: center; gap: 1.7rem; } .play { position: relative; width: 64px; height: 64px; border: 0; border-radius: 50%; background: radial-gradient(circle at 38% 32%, var(--accent-bright), var(--accent) 70%); color: #14131f; display: grid; place-items: center; cursor: pointer; /* A corona rather than a drop shadow — light coming off it, not under it. */ box-shadow: 0 0 0 1px rgba(255,255,255,.10) inset, 0 0 26px var(--glow), 0 0 60px color-mix(in srgb, var(--glow) 55%, transparent); transition: transform .14s ease, box-shadow .3s ease; } .play:active { transform: scale(.94); } body.is-playing .play { box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset, 0 0 34px var(--glow), 0 0 84px color-mix(in srgb, var(--glow) 70%, transparent); } .play svg { width: 27px; height: 27px; fill: currentColor; } .play .ico-pause { display: none; } body.is-playing .play .ico-play { display: none; } body.is-playing .play .ico-pause { display: block; } .skip { position: relative; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; transition: color .18s ease; } .skip:hover { color: var(--ink); } .skip svg { width: 26px; height: 26px; fill: currentColor; } .skip span { position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); font-size: .58rem; font-weight: 700; } .scrub { margin-top: 1.1rem; } #seek { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 99px; background: var(--line); cursor: pointer; } #seek::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 0 12px var(--glow); } #seek::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); border: 0; box-shadow: 0 0 12px var(--glow); } .times { display: flex; justify-content: space-between; margin-top: .45rem; font-size: .75rem; font-variant-numeric: tabular-nums; color: var(--ink-faint); } .player-opts { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .95rem; padding-top: .9rem; border-top: 1px solid var(--line); font-size: .82rem; color: var(--ink-soft); flex-wrap: wrap; } .player-opts select { font: inherit; color: var(--ink); background: var(--surface-solid); border: 1px solid var(--line); border-radius: 8px; padding: .25rem .45rem; margin-left: .35rem; } .autoadv { display: flex; align-items: center; gap: .45rem; cursor: pointer; } .autoadv input { accent-color: var(--accent); } .pending { margin: 1rem 0 0; padding: .85rem 1rem; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 12px; font-size: .85rem; color: var(--ink-soft); } /* ── Scripture ───────────────────────────────────────────── */ .scripture { margin-top: 2.2rem; font: 400 1.16rem/1.8 var(--serif); color: var(--ink); } .scripture p { margin: 0 0 1.1rem; text-wrap: pretty; } .scripture .vn { font-family: var(--sans); font-size: .64rem; font-weight: 700; color: var(--accent); vertical-align: .38em; margin-right: .32em; user-select: none; } /* ── Companion Bible appendixes ──────────────────────────── */ .companion { margin-top: 2.6rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .companion-head { margin: 0; font: 400 1.35rem/1.2 var(--serif); color: var(--ink); } .companion-sub { margin: .4rem 0 1.1rem; font-size: .84rem; color: var(--ink-faint); } .ap { border: 1px solid var(--line); border-radius: 13px; background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin-bottom: .55rem; overflow: hidden; } .ap-toggle { width: 100%; display: flex; align-items: baseline; gap: .7rem; border: 0; background: none; color: var(--ink); text-align: left; padding: .85rem .95rem; cursor: pointer; font: inherit; } .ap-num { flex: 0 0 auto; font: 700 .68rem/1.5 var(--sans); letter-spacing: .06em; color: var(--accent); padding: .05rem .45rem; border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: 99px; white-space: nowrap; } .ap-title { font: 400 .96rem/1.4 var(--serif); color: var(--ink); } /* The appendixes are long essays. Cap the open height and let them scroll inside their own card, so opening one doesn't bury the reading. */ .ap-body { display: none; max-height: 22rem; overflow-y: auto; padding: 0 .95rem 1rem; border-top: 1px solid var(--line); margin-top: -1px; font: 400 .88rem/1.65 var(--sans); color: var(--ink-soft); white-space: pre-wrap; overflow-wrap: break-word; } .ap.is-open .ap-body { display: block; padding-top: .85rem; } .ap-note { margin: .9rem 0 0; font-size: .78rem; color: var(--ink-faint); } /* ── Browse ──────────────────────────────────────────────── */ .browse-head { padding: 1.6rem 0 1rem; } .seg { display: inline-flex; background: var(--surface); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 12px; padding: 3px; gap: 2px; } .seg-btn { border: 0; background: none; color: var(--ink-soft); font: 600 .82rem/1 var(--sans); padding: .5rem .85rem; border-radius: 9px; cursor: pointer; transition: background .18s ease, color .18s ease; } .seg-btn.is-active { background: var(--accent); color: #14131f; box-shadow: 0 0 16px var(--glow); } .ready-note { margin: .8rem 0 0; font-size: .8rem; color: var(--ink-faint); } .book { border-bottom: 1px solid var(--line); } .book-name { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; border: 0; background: none; color: var(--ink); font: 400 1.1rem/1 var(--serif); text-align: left; padding: 1rem .15rem; cursor: pointer; } .book-count { font: 500 .72rem/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--ink-faint); } .chapters { display: none; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: .4rem; padding: .2rem .15rem 1rem; } .book.is-open .chapters { display: grid; } .ch { border: 1px solid var(--line); background: var(--surface); color: var(--ink-faint); border-radius: 10px; padding: .55rem 0; font: 600 .82rem/1 var(--sans); font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color .18s ease, color .18s ease; } /* A chapter with narration gets its own small star. */ .ch.has-audio { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 34%, var(--line)); } .ch.has-audio::after { content: ""; display: block; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--glow); margin: .32rem auto 0; } .ch:hover { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); } .ch:disabled { opacity: .4; cursor: default; } /* Keyboard focus must stay visible against the dark field. */ :focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; border-radius: 6px; }