/* ========================================================================== FILE: style.css — "The look" -------------------------------------------------------------------------- The new Faith For You design: eggshell white, white cards with hairline borders, deep navy accents, a brown cross. Generous whitespace, calm, reverent — premium, never a chatbot. Palette (locked): eggshell background #f8f7f3 white cards #ffffff hairline borders #e8e6df deep navy accent #1f2a3a brown cross #7a4a2e body text #4a4640 muted labels #a89f8d Type: headings & wordmark Cormorant Garamond (warm serif) Scripture text Georgia (serif, italic) UI text Source Sans 3 (clean sans) Motion (all GPU-friendly — transform + opacity only): 1. Splash: cross scales in (~1.1s, ease-out), title rises at ~0.9s, tagline ~0.3s later, whole splash fades at ~2.4s. 2. App cascades in with staggered rise+fade as the splash exits. 3. A watermark cross breathes behind the content at ~5% opacity. index.html tags with .splash-pending / .splash-skip before first paint; app.js advances the timeline by adding .app-enter / .is-fading / .is-gone. With JS off, no class is set and the page simply shows itself. ========================================================================== */ :root { /* Tells the browser which way round we are, so scrollbars, form controls and the space behind an overscroll follow the page instead of staying stubbornly light. */ color-scheme: light; --bg: #f8f7f3; --card: #ffffff; --hairline: #e8e6df; --hairline-deep: #d8d2c3; --navy: #1f2a3a; --navy-soft: #2c3a52; --cross-brown: #7a4a2e; --ink-heading: #1f2a3a; --ink-body: #4a4640; --muted: #a89f8d; /* The one affirmative color, used only by a settled quiz answer. Muted on purpose — it sits with the parchment rather than announcing itself, and it has no negative counterpart: nothing in this app is marked in red. */ --sage: #5c7355; --sage-tint: #f1f4ee; /* THE FIVE HIGHLIGHT WASHES. Sage was here first, for a settled quiz answer; the other four are built to its weight — same lightness, same low saturation, all of them things the parchment already contains (leaf, earth, dune, dusk, shade) rather than the yellow-pink-green of a highlighter pack. There is NO RED and there will not be one: nothing in this app is marked in red, and a colour someone might reach for to mean "wrong" does not belong on a verse. Each has a mid tone for the swatch and the border, and a tint for the wash behind the words. The tint is what a reader actually sees, so the five tints sit within a few points of each other in lightness — no colour shouts louder than another just because of which one it is. */ --clay: #85604e; --sand: #7f7150; --sky: #4f6b80; --lavender: #675d80; /* THE FIVE HIGHLIGHT WASHES, and they are their OWN tokens for a reason. They used to reuse --sage-tint and friends, but --sage-tint is also the settled quiz answer, the saved state of a verse card, and the "Save 17%" chip — and the quiz's is muted ON PURPOSE, so deepening it there would have changed three surfaces nobody asked about. The first set was too faint to read as a mark: every one measured 1.11 to 1.15 against the white card, and sage against sky was 1.02 — which is to say identical. A blue highlight looked like a sage one because both looked like nothing. These measure 1.43 to 1.56 against the card, the closest pair is 23 apart in RGB rather than 8, and body text still reads at 6:1 or better on every one of them. Still no red, still parchment: leaf, terracotta, dune, dusk, shade. */ --hl-sage: #c8dcbd; --hl-clay: #f0c9ae; --hl-sand: #e9d79a; --hl-sky: #bfd6e8; --hl-lavender: #d6c9ec; --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --scripture: Georgia, "Times New Roman", serif; --sans: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* CHANNELS, so a translucent tint can follow the theme. Every rgba() in this file is built from one of these rather than from a literal — otherwise a hover meant as "a little darker" stays dark on a dark surface and simply disappears. */ --ink-rgb: 31, 42, 58; --bg-rgb: 248, 247, 243; --brown-rgb: 122, 74, 46; /* Text that sits ON a --navy surface. --navy inverts to a light tone in dark mode, so this has to invert with it. */ --on-navy: #ffffff; --on-navy-rgb: 255, 255, 255; /* The one warm-red the app allows itself, and only for an error message — never for a mark on a verse. */ --error-bg: #fdf9f4; --error-line: #ecdfd2; --error-ink: #8a4b32; --shadow-card: 0 1px 2px rgba(var(--ink-rgb), 0.04), 0 10px 30px rgba(var(--ink-rgb), 0.05); --shadow-card-hover: 0 1px 2px rgba(var(--ink-rgb), 0.05), 0 14px 40px rgba(var(--ink-rgb), 0.07); } /* ========================================================================== DARK MODE — the same palette, inverted, and nothing else -------------------------------------------------------------------------- THE USE CASE IS A PHONE, ONE-HANDED, AT NIGHT. Parchment at full brightness in a dark room is a face full of light. This is NOT a second design language. Every value below is the same TOKEN the light theme uses, given its counterpart: the card still sits above the background, the hairline still separates them, the muted label is still the quietest thing on the page. Nothing was restyled — only re-coloured — which is why no rule outside this block mentions a theme. NO PURE BLACK AND NO PURE WHITE. The parchment palette is warm on both sides of the line: a warm near-black (#14120e) under a soft off-white (#f2efe6), the same way #f8f7f3 was never #ffffff. --navy INVERTS FROM DARK TO LIGHT. It is the emphasis surface — primary buttons, the active translation, the active collection chip — so in dark it becomes the light one, and --on-navy carries the text that sits on it. That is why those two are a pair and why every rgba() in this file is built from a channel token rather than a literal. THREE STATES, and the order matters. :root is light. The media block covers "follow the system", and is written :not([data-theme="light"]) so an explicit light choice still wins under a dark system. The last block covers an explicit dark choice under a light system. Between them every combination of system setting and stored preference lands somewhere. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #14120e; --card: #1e1b16; --hairline: #2f2b23; --hairline-deep: #423d33; /* The emphasis surface, now the light one. */ --navy: #e9e5da; --navy-soft: #d3cec1; --on-navy: #14120e; --on-navy-rgb: 20, 18, 14; --cross-brown: #c1906c; --ink-heading: #f2efe6; --ink-body: #ddd7c9; --muted: #948c7c; --ink-rgb: 242, 239, 230; --bg-rgb: 20, 18, 14; --brown-rgb: 193, 144, 108; /* The five washes, rebuilt as DARKER-than-card rather than lighter, so a highlight still reads as something laid over the words rather than as a hole cut in the page. Same five hues, same relative order. */ --sage: #9db394; --sage-tint: #242b20; --clay: #c09a84; --sand: #bdae86; --sky: #8fb0c6; --lavender: #a99cc4; /* Lighter than the card rather than darker, so a mark still reads as something laid OVER the words. 1.46 to 1.77 against the card, against 1.09 to 1.18 before; text on them 6.8:1 or better. */ --hl-sage: #38492f; --hl-clay: #573624; --hl-sand: #474319; --hl-sky: #264357; --hl-lavender: #3d3159; --error-bg: #2a1f18; --error-line: #45322a; --error-ink: #e2a58a; /* A shadow cannot be seen against a dark ground the way it is against a light one, so it does more of its work with depth and less with spread. */ --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.32); --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.42); } } /* Chosen dark, whatever the system says. Same values — kept as one list rather than two so the two states cannot drift apart. */ :root[data-theme="dark"] { color-scheme: dark; --bg: #14120e; --card: #1e1b16; --hairline: #2f2b23; --hairline-deep: #423d33; --navy: #e9e5da; --navy-soft: #d3cec1; --on-navy: #14120e; --on-navy-rgb: 20, 18, 14; --cross-brown: #c1906c; --ink-heading: #f2efe6; --ink-body: #ddd7c9; --muted: #948c7c; --ink-rgb: 242, 239, 230; --bg-rgb: 20, 18, 14; --brown-rgb: 193, 144, 108; --sage: #9db394; --sage-tint: #242b20; --clay: #c09a84; --sand: #bdae86; --sky: #8fb0c6; --lavender: #a99cc4; --hl-sage: #38492f; --hl-clay: #573624; --hl-sand: #474319; --hl-sky: #264357; --hl-lavender: #3d3159; --error-bg: #2a1f18; --error-line: #45322a; --error-ink: #e2a58a; --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.32); --shadow-card-hover: 0 1px 2px rgba(0, 0, 0, 0.4), 0 14px 40px rgba(0, 0, 0, 0.42); } /* ----- base --------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } /* No scrollbar flash while the splash holds the stage. */ html.splash-pending:not(.app-enter) { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--ink-body); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: rgba(var(--ink-rgb), 0.12); } .is-hidden { display: none !important; } /* Visually hidden, still read by screen readers (input label). */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } button { font-family: inherit; } a:focus-visible, button:focus-visible, textarea:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid rgba(var(--ink-rgb), 0.45); outline-offset: 2px; } /* ========================================================================== LAUNCH SPLASH ========================================================================== */ #splash { display: none; /* only shown when the head script says so */ position: fixed; inset: 0; z-index: 60; background: var(--bg); align-items: center; justify-content: center; transition: opacity 0.65s ease; } html.splash-pending #splash { display: flex; } html.splash-pending #splash.is-fading { opacity: 0; pointer-events: none; } html.splash-pending #splash.is-gone { display: none; } .splash-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; /* Optical centering: sit a touch above true center. */ transform: translateY(-4vh); } /* 1) The cross: small + faint -> full, smooth ease-out (~1.1s). */ .splash-cross { width: 84px; height: auto; color: var(--cross-brown); transform-origin: 50% 50%; animation: crossIn 1.1s var(--ease-out) both; } @keyframes crossIn { from { transform: scale(0.55); opacity: 0.12; } to { transform: scale(1); opacity: 1; } } /* 2) The name rises at ~0.9s, the tagline ~0.3s later. */ .splash-title { font-family: var(--serif); font-weight: 600; font-size: 2.15rem; letter-spacing: 0.01em; color: var(--ink-heading); margin: 28px 0 0; animation: riseIn 0.85s var(--ease-out) 0.9s both; } .splash-tagline { font-size: 0.95rem; color: var(--muted); margin: 10px 0 0; animation: riseIn 0.8s var(--ease-out) 1.2s both; } @keyframes riseIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== APP ENTRANCE — staggered cascade, triggered as the splash fades ========================================================================== */ /* While the splash is on stage, the app waits unseen… */ html.splash-pending .cascade { opacity: 0; } /* …then each piece rises into place, slightly after the one before. */ html.splash-pending.app-enter .cascade { animation: riseIn 0.75s var(--ease-out) both; } html.splash-pending.app-enter .cascade-1 { animation-delay: 0.02s; } html.splash-pending.app-enter .cascade-2 { animation-delay: 0.1s; } html.splash-pending.app-enter .cascade-3 { animation-delay: 0.18s; } html.splash-pending.app-enter .cascade-4 { animation-delay: 0.28s; } html.splash-pending.app-enter .cascade-5 { animation-delay: 0.4s; } /* Returning within the session: no splash, just a quick quiet fade. */ html.splash-skip .app-shell { animation: quickIn 0.35s ease both; } @keyframes quickIn { from { opacity: 0; } to { opacity: 1; } } /* ========================================================================== WATERMARK CROSS — behind everything, ~5% opacity, slow breathe ========================================================================== */ .watermark { position: fixed; inset: 0; z-index: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: var(--cross-brown); opacity: 0.05; } .watermark svg { width: min(440px, 70vw); height: auto; animation: breathe 9s ease-in-out infinite alternate; } @keyframes breathe { from { transform: scale(1); } to { transform: scale(1.035); } } /* ========================================================================== ASK-PAGE AMBIENT SCENE — one still photo, slow CSS-only zoom -------------------------------------------------------------------------- Proof of concept for a clock-aligned scene rotation, not built yet — ONE scene, Ask page only. A still photo with transform: scale over 90s, no video file. Same shape as .watermark above (fixed, pointer-events:none, very low opacity) but scoped one level deeper — inside #page-ask in the markup, not the whole shell — so #page-ask[hidden] removes it on every other page the same way it removes everything else there. z-index: -1, not 0. .watermark can use z-index:0 because .app-shell is ALSO explicitly positioned with z-index:1 above it — two positioned siblings, compared directly. .hero and #ask-slot are plain, unpositioned flow content; a positioned sibling at z-index:0 would paint OVER them, not under. Negative z-index paints behind normal flow content unconditionally, so nothing else on the page needs touching for this. */ .ask-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; opacity: 0.1; } /* The cross watermark and this photo are both full-bleed, centered, very low opacity — together they show as a pale cross-shaped smear over the water rather than reading as one clean scene. One ambient layer at a time: while Ask is the visible page, its own photo replaces the watermark rather than sitting on top of it. #page-ask carries no [hidden] attribute in the markup (it's the default page), so this also holds correctly before app.js's showPage() ever runs. */ body:has(#page-ask:not([hidden])) .watermark { display: none; } .ask-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; animation: askBgZoom 90s ease-in-out infinite alternate; } /* Scaling UP from 1 — the image already covers its box at scale(1) (object-fit: cover), so growing only ever shows MORE of the photo, never a gap at the edge. */ @keyframes askBgZoom { from { transform: scale(1); } to { transform: scale(1.06); } } /* Content always sits above the watermark. */ .app-shell { position: relative; z-index: 1; } /* ========================================================================== TOP BAR ========================================================================== */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1060px; margin: 0 auto; padding: 22px 28px 16px; } .wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--serif); font-weight: 600; font-size: 1.45rem; letter-spacing: 0.01em; color: var(--ink-heading); } .wordmark svg { width: 13px; height: auto; color: var(--cross-brown); } .topbar-actions { display: flex; align-items: center; gap: 12px; } /* ----- topbar page nav: Ask · Conversations · Learning -------------------- Same tokens as the sidebar's .p-mode items, laid out horizontally, so the two navs read as one system. Conversations carries [hidden] until the tier allows it — removed, not disabled. */ .topbar-nav { display: flex; align-items: center; gap: 4px; } .tb-nav { border: 0; background: transparent; border-radius: 11px; padding: 8px 14px; cursor: pointer; color: var(--ink-body); font-family: var(--sans); font-size: 0.95rem; font-weight: 600; transition: background 0.16s ease, color 0.16s ease; } .tb-nav:hover { background: rgba(var(--ink-rgb), 0.05); } .tb-nav.is-active { background: rgba(var(--ink-rgb), 0.07); color: var(--ink-heading); } .tb-nav[hidden] { display: none; } /* The two full-width pages inside the shell. Exactly one is ever shown. */ .page[hidden] { display: none; } @media (max-width: 620px) { .topbar { gap: 8px; padding-left: 16px; padding-right: 16px; } .tb-nav { padding: 8px 10px; font-size: 0.9rem; } } .account-dot { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--hairline); background: var(--card); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .account-dot:hover { border-color: var(--hairline-deep); box-shadow: var(--shadow-card); } .account-dot svg { width: 17px; height: 17px; } /* ========================================================================== MAIN LAYOUT ========================================================================== */ main { max-width: 720px; margin: 0 auto; padding: 0 20px; } /* ----- hero --------------------------------------------------------------- */ .hero { text-align: center; margin: 54px 0 30px; } .eyebrow { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .hero-title { font-family: var(--serif); font-weight: 600; font-size: clamp(2.1rem, 6vw, 3rem); line-height: 1.15; color: var(--ink-heading); margin: 0; } /* ----- cards -------------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-card); } /* ----- the ask card ------------------------------------------------------- */ .ask { max-width: 640px; margin: 0 auto; padding: 20px 22px 16px; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .ask:focus-within { border-color: var(--hairline-deep); box-shadow: var(--shadow-card-hover); } .ask textarea { display: block; width: 100%; min-height: 58px; border: 0; outline: none; resize: none; background: transparent; font-family: var(--sans); font-size: 1.06rem; line-height: 1.6; color: var(--ink-heading); padding: 4px 2px 2px; } .ask textarea::placeholder { color: var(--muted); } .ask-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; border-top: 1px solid var(--hairline); margin-top: 12px; padding-top: 14px; } /* Keep "Seek guidance" hard-right even if the row wraps on a tiny screen. */ .ask-meta .primary { margin-left: auto; } /* Translation picker — a native