/** * New Life Daily — Home v2 (light glass) * * Loaded only when NLD_HOME_V2 is on. Every rule is scoped under * #screen-0.home-v2 so it cannot reach the Garden, Let's Talk or Leaders, * which are still the dark forest palette. When the whole shell is flipped * these tokens move into nld.css :root and the scoping comes off. */ #screen-0.home-v2 { /* Sampled from the direction study. Kept local on purpose — the app's --primary / --text-main still mean forest green everywhere else. */ --hv2-ground: #eff4f4; --hv2-mint: #cfe9df; --hv2-lavender: #e2e2f4; --hv2-sky: #d8e8f7; /* Not sampled from the direction study like the three above — added later, for Paul's "pastel peach and plum" pass. Derived from the shell's rgba(255, 176, 138) corner glow by blending it 50% toward white, which keeps the same ~20° hue but lifts it from 77% to 89% lightness so it sits in the same pale family as mint/lavender/sky instead of reading as the more saturated peach the shell can afford over its darker base. */ --hv2-peach: #ffd8c5; --hv2-ink: #16333b; --hv2-ink-2: #5d7b83; --hv2-ink-3: #93a9af; --hv2-teal: #1d9c84; --hv2-grad-a: #4c7be8; --hv2-grad-b: #35c79a; --hv2-glass: rgba(255, 255, 255, 0.74); --hv2-hairline: rgba(22, 51, 59, 0.07); --hv2-shadow: 0 8px 22px -14px rgba(16, 46, 54, 0.34); color: var(--hv2-ink); letter-spacing: normal; line-height: 1.6; text-align: left; } /* The light ground. A fixed layer behind the screen's own content rather than a background on , so switching to any other tab restores the forest without a repaint of the whole document. */ #screen-0.home-v2.active::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(520px 380px at 6% 0%, var(--hv2-mint) 0%, transparent 58%), radial-gradient(480px 420px at 100% 4%, var(--hv2-lavender) 0%, transparent 60%), radial-gradient(560px 460px at 50% 100%, var(--hv2-sky) 0%, transparent 64%), /* Peach, bottom-left — the corner the first three left bare. Mint has top-left, lavender has top-right, and sky is centered on the BOTTOM EDGE rather than a corner: its 460px vertical radius fades out well before it reaches either bottom corner even though its 560px horizontal radius runs wide across the bottom. Bottom-left was genuinely open, not just thin. Same 520x380 size and 58% fade as mint, position mirrored vertically (6% 0% -> 6% 100%), so the two read as a matched pair bookending the left edge top-to-bottom. Plum was left out. That would make five glows plus the ground on a screen whose cards already carry their own shadow and glass — one more corner risks the glow doing the work the cards should be doing. And lavender already covers the cool-purple family here, so plum would repeat a hue this screen has rather than fill one it's missing. Peach is the actual gap: nothing on this screen was warm-toned until now. */ radial-gradient(520px 380px at 6% 100%, var(--hv2-peach) 0%, transparent 58%), var(--hv2-ground); } #screen-0.home-v2 .hv2 { width: 100%; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--s-18); padding-top: calc(var(--s-72) + env(safe-area-inset-top)); } /* ── Greeting ─────────────────────────────────────────────────────────── */ #screen-0.home-v2 .hv2-greet { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-12); } #screen-0.home-v2 .hv2-hi { font-size: 15px; color: var(--hv2-ink-2); margin: 0 0 2px; } #screen-0.home-v2 .hv2-who { font-family: var(--font-family); font-style: normal; font-size: 27px; font-weight: 660; letter-spacing: -0.03em; color: var(--hv2-ink); margin: 0; display: flex; align-items: center; gap: var(--s-6); } #screen-0.home-v2 .hv2-leaf { width: 18px; height: 18px; flex: 0 0 auto; } #screen-0.home-v2 .hv2-sub { font-size: 14.5px; line-height: 1.6; color: var(--hv2-ink-2); margin: calc(var(--s-12) * -1) 0 0; } #screen-0.home-v2 .hv2-sub:empty { display: none; } /* ── Today's Focus hero ───────────────────────────────────────────────── */ #screen-0.home-v2 .hv2-hero { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; min-height: 176px; padding: var(--s-18); border: 0; border-radius: 22px; overflow: hidden; cursor: pointer; text-align: left; font-family: inherit; color: #0f3b33; background: linear-gradient(122deg, #86d9c4 0%, #a8dfe6 46%, #cfeaf3 100%); box-shadow: 0 16px 30px -18px rgba(23, 120, 110, 0.85); transition: transform 0.16s ease, box-shadow 0.16s ease; } #screen-0.home-v2 .hv2-hero:active { transform: scale(0.995); } #screen-0.home-v2 .hv2-hero:focus-visible { outline: 3px solid var(--hv2-ink); outline-offset: 3px; } #screen-0.home-v2 .hv2-hero.is-loading { cursor: default; } #screen-0.home-v2 .hv2-hero.is-loading .hv2-hero-title { opacity: 0.65; } #screen-0.home-v2 .hv2-hero.is-loading .hv2-hero-go { display: none; } /* Every word sits above the sprout. A three-line theme reaches into the art's corner on a narrow phone, and when it does the words have to win. */ #screen-0.home-v2 .hv2-hero > *:not(.hv2-hero-art) { position: relative; z-index: 1; } #screen-0.home-v2 .hv2-hero-lab { font-size: 12px; font-weight: 600; opacity: 0.82; } /* Sized for a sentence, not a label. The mockup's hero read "Trust in His Plan" — 17 characters — and this was built to match it at 23px inside 9.5ch. But `theme` is not a devotional title in this product; it is the one-line summary of what the passage does, and it runs 18 to 88 characters (median 42 across the six curated years, 62 across the narrative and topical lanes). At 9.5ch every one of them wrapped into a seven-line ribbon down the left of a half-empty card. No character cap here, and no ch unit — the day's words set the width. */ #screen-0.home-v2 .hv2-hero-title { font-size: 18px; font-weight: 640; letter-spacing: -0.018em; line-height: 1.34; text-wrap: pretty; } #screen-0.home-v2 .hv2-hero-ref { font-size: 13px; font-weight: 600; opacity: 0.8; margin-top: 2px; } #screen-0.home-v2 .hv2-hero-ref:empty { display: none; } #screen-0.home-v2 .hv2-hero-go { margin-top: auto; width: 36px; height: 36px; border-radius: 999px; background: rgba(255, 255, 255, 0.9); display: grid; place-items: center; color: #0f3b33; box-shadow: 0 6px 14px -6px rgba(15, 59, 51, 0.6); } #screen-0.home-v2 .hv2-hero-go svg { width: 17px; height: 17px; } /* Smaller than the mockup's, and pinned into the corner. The mockup could afford a big sprout because its title was three words; ours has to leave the sentence somewhere to go. */ #screen-0.home-v2 .hv2-hero-art { position: absolute; right: -4px; bottom: -10px; z-index: 0; width: 104px; opacity: 0.9; pointer-events: none; } /* ── Section heads ────────────────────────────────────────────────────── */ #screen-0.home-v2 .hv2-rowhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); } #screen-0.home-v2 .hv2-rowhead h3 { font-family: var(--font-family); font-style: normal; font-size: 16px; font-weight: 660; letter-spacing: -0.02em; color: var(--hv2-ink); margin: 0; } #screen-0.home-v2 .hv2-seeall { background: none; border: 0; padding: 0; font-family: inherit; font-size: 13px; font-weight: 560; color: var(--hv2-teal); cursor: pointer; } #screen-0.home-v2 .hv2-seeall[hidden] { display: none; } /* ── Today's Plan ─────────────────────────────────────────────────────── */ /* A rail that runs off the right edge rather than a column that runs down the page. Paul's call, and it earns itself twice: the day stops looking like a checklist you are behind on, and the card cut off at the edge says "there is more" without a control that has to say it — which is why View All is gone. The plan is wrapped so the fade can sit over the scroller without scrolling with it. home-v2.js does the wrapping, because #flow-steps is written by renderHome() and must keep its id and its rows exactly as they are. */ #screen-0.home-v2 .hv2-rail { /* Break the screen's side padding so the rail bleeds to both edges — a card that stops short of the edge reads as the end of the list. */ margin-left: calc(var(--s-18) * -1); margin-right: calc(var(--s-18) * -1); } #screen-0.home-v2 .hv2-plan { display: flex; flex-direction: row; gap: var(--s-12); margin-top: 0; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding: var(--s-6) var(--s-18) var(--s-15); /* A slim scrollbar, deliberately VISIBLE. This was hidden at first, on the reasoning that a scrollbar gives away that the row is a scroller rather than a designed edge. That reasoning was backwards: giving it away is the entire job. The fade alone says "this is cut off", not "you can move it" — and on a desktop or a trackpad there is no touch instinct to fall back on. A believer who does not know Prayer and Praise are over there simply never does them. It is sized to be an affordance rather than furniture: 5px, no track, and a thumb that only reaches full strength on hover. */ scrollbar-width: thin; scrollbar-color: rgba(31, 74, 84, 0.28) transparent; } #screen-0.home-v2 .hv2-plan::-webkit-scrollbar { height: 5px; } #screen-0.home-v2 .hv2-plan::-webkit-scrollbar-track { background: transparent; } #screen-0.home-v2 .hv2-plan::-webkit-scrollbar-thumb { background: rgba(31, 74, 84, 0.24); border-radius: 999px; } #screen-0.home-v2 .hv2-plan:hover::-webkit-scrollbar-thumb { background: rgba(31, 74, 84, 0.42); } /* The fade is a MASK on the scroller, not a gradient laid over it. An overlay has to know the colour behind it, and here there is none to know: the rail's parent and #screen-0 are both transparent, so the visible backdrop is the shell's cream several layers up. Fading to --hv2-ground painted a cool grey strip over a warm cream card — a smudge rather than a fade. A mask dissolves the content itself and cannot be wrong about the backdrop. RIGHT EDGE ONLY. A matching fade on the left looked right in principle and was wrong at rest: the rail opens at scroll 0 with nothing hidden to the left, so all it did was eat the first letters of the first card. CSS cannot see scroll position, and the state a believer sees most is the one they land on — so the left edge stays sharp. A short plan needs no special case: the mask fades the element's right edge, and when the cards do not reach it there is only empty space there to fade. It bites exactly when content runs under it, which is when it should. THE MASK STOPS ABOVE THE SCROLLBAR. A mask applies to everything the element paints, the scrollbar included — so a single full-height gradient dissolved the right end of the very bar that was added to advertise the scrolling. The vertical stop leaves the bottom 7px at full opacity, so the cards fade and the bar stays whole. */ #screen-0.home-v2 .hv2-plan { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%), linear-gradient(0deg, #000 7px, transparent 7px); -webkit-mask-composite: source-over; mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent 100%), linear-gradient(0deg, #000 7px, transparent 7px); mask-composite: add; } /* The rows themselves are still written by renderHome()/syncHome() — this only changes how they look, so there is one renderer, not two. */ #screen-0.home-v2 .hv2-plan .flow-step { /* Each row is now a card on the rail: fixed width so they all read as the same kind of thing, and column so the label and its subtitle stack under the icon rather than beside it. */ flex: 0 0 148px; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--s-9); margin: 0; min-height: 124px; padding: var(--s-15); background: var(--hv2-glass); border: 1px solid var(--hv2-hairline); border-radius: 16px; box-shadow: var(--hv2-shadow); text-align: left; transition: transform 0.16s ease, opacity 0.16s ease; } #screen-0.home-v2 .hv2-plan .flow-step:active { transform: scale(0.99); } #screen-0.home-v2 .hv2-plan .flow-step.done { opacity: 0.62; } #screen-0.home-v2 .hv2-plan .flow-step.active { border: 1.5px solid var(--hv2-teal); box-shadow: 0 10px 24px -14px rgba(29, 156, 132, 0.9); } #screen-0.home-v2 .hv2-plan .flow-step[hidden] { display: none; } #screen-0.home-v2 .hv2-plan .flow-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 12px; background: rgba(53, 199, 154, 0.14); box-shadow: none; font-size: 18px; display: flex; align-items: center; justify-content: center; } /* One tint per habit, so the column reads as four kinds of act rather than four of the same. Keys come from FLOW_STEPS in daily-loop.js. */ #screen-0.home-v2 .hv2-plan .flow-step[data-key="scripture"] .flow-icon, #screen-0.home-v2 .hv2-plan .flow-step[data-key="bread"] .flow-icon { background: rgba(120, 140, 235, 0.16); } #screen-0.home-v2 .hv2-plan .flow-step[data-key="prayer"] .flow-icon, #screen-0.home-v2 .hv2-plan .flow-step[data-key="praise"] .flow-icon { background: rgba(53, 199, 154, 0.16); } #screen-0.home-v2 .hv2-plan .flow-step[data-key="ask"] .flow-icon, #screen-0.home-v2 .hv2-plan .flow-step[data-key="evening"] .flow-icon { background: rgba(93, 160, 232, 0.16); } #screen-0.home-v2 .hv2-plan .flow-step[data-key="armor"] .flow-icon, #screen-0.home-v2 .hv2-plan .flow-step[data-key="mission"] .flow-icon, #screen-0.home-v2 .hv2-plan .flow-step[data-key="sabbath"] .flow-icon { background: rgba(226, 178, 86, 0.2); } #screen-0.home-v2 .hv2-plan .flow-label { flex: 1 1 auto; min-width: 0; font-size: 14.5px; font-weight: 620; letter-spacing: -0.018em; color: var(--hv2-ink); line-height: 1.35; } #screen-0.home-v2 .hv2-plan .hv2-sub { display: block; font-size: 12px; font-weight: 500; letter-spacing: normal; color: var(--hv2-ink-2); margin-top: 1px; } #screen-0.home-v2 .hv2-plan .flow-check { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; border: 1.6px solid rgba(22, 51, 59, 0.2); display: grid; place-items: center; font-size: 11px; line-height: 1; color: transparent; } #screen-0.home-v2 .hv2-plan .flow-step.done .flow-check { background: var(--hv2-teal); border-color: var(--hv2-teal); color: #fff; } /* ── Cards + buttons ──────────────────────────────────────────────────── */ #screen-0.home-v2 .hv2-card { background: var(--hv2-glass); border: 1px solid var(--hv2-hairline); border-radius: 20px; box-shadow: var(--hv2-shadow); padding: var(--s-18); text-align: left; } #screen-0.home-v2 .hv2-card-lab { font-size: 12px; font-weight: 640; color: var(--hv2-teal); margin-bottom: var(--s-9); } #screen-0.home-v2 .hv2-mission-text { font-size: 15px; line-height: 1.65; color: var(--hv2-ink); } #screen-0.home-v2 .hv2-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin-top: var(--s-15); padding: 15px 20px; border: 0; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 620; letter-spacing: -0.01em; color: #fff; cursor: pointer; background: linear-gradient(96deg, var(--hv2-grad-a) 0%, var(--hv2-grad-b) 100%); box-shadow: 0 12px 24px -12px rgba(60, 140, 190, 0.8); } #screen-0.home-v2 .hv2-btn-gold { background: linear-gradient(96deg, #e0a94a 0%, #c98b2e 100%); box-shadow: 0 12px 24px -12px rgba(190, 140, 50, 0.8); } #screen-0.home-v2 .hv2-slot:empty { display: none; } /* ── The classic path content, demoted below the fold ─────────────────── */ #screen-0.home-v2 .hv2-path { display: flex; flex-direction: column; gap: var(--s-15); margin-top: var(--s-18); padding-top: var(--s-24); border-top: 1px solid var(--hv2-hairline); } /* The path header is styled inline for the forest shell — "YOUR JOURNEY / My Path" in cream on green. On the light ground it needs the ink flipped and its own title dropped, since hv2-rowhead already names the section. */ #screen-0.home-v2 .hv2-path #word-section-header { text-align: left; margin: 0 !important; } #screen-0.home-v2 .hv2-path #word-section-header > .small, #screen-0.home-v2 .hv2-path #word-section-header > h2 { display: none; } #screen-0.home-v2 .hv2-path #word-section-header > div { align-items: flex-start !important; } #screen-0.home-v2 .hv2-path #word-section-header > div > div { justify-content: flex-start !important; } #screen-0.home-v2 .hv2-path .word-pill { background: var(--hv2-glass) !important; color: var(--hv2-ink) !important; border: 1px solid var(--hv2-hairline) !important; border-radius: 999px !important; box-shadow: var(--hv2-shadow); } #screen-0.home-v2 .hv2-path .word-pill:first-child { background: rgba(53, 199, 154, 0.14) !important; color: #14705f !important; border-color: rgba(29, 156, 132, 0.32) !important; } /* Day cards are built with inline styles keyed to the forest palette; the readable minimum here is dark ink on the light card. */ #screen-0.home-v2 .hv2-path #roadmap-list > div, #screen-0.home-v2 .hv2-path #path-empty { color: var(--hv2-ink); background: var(--hv2-glass); border-radius: 16px; } #screen-0.home-v2 .hv2-path #roadmap-list .small, #screen-0.home-v2 .hv2-path #path-empty .small { color: var(--hv2-ink-2); } @media (prefers-reduced-motion: reduce) { #screen-0.home-v2 .hv2-hero, #screen-0.home-v2 .hv2-plan .flow-step { transition: none; } } /* ── The soul check-in ─────────────────────────────────────────────────────── The full-screen overlay that greets a returning believer before My Path. It is not inside #screen-0, so the home-v2 scope above never reached it — which is why it stayed deep forest while everything behind it went light, and why it was the one screen that still looked like the old app. Every colour here is inline on the element (background:#0F1F0A, cream text, cream placeholders), so these rules carry !important. That is the whole reason this block is longer than it looks like it should be. */ body.light-home #soul-checkin-screen { background: linear-gradient(180deg, #f7fafb 0%, #eef4f6 100%) !important; } body.light-home #soul-checkin-screen h2 { color: #16333b !important; } body.light-home #soul-checkin-screen p { color: #4a6670 !important; } body.light-home #soul-checkin-screen #soul-checkin-text { background: #fff !important; border-color: rgba(47, 125, 140, 0.3) !important; color: #16333b !important; } body.light-home #soul-checkin-screen #soul-checkin-text::placeholder { color: rgba(22, 51, 59, 0.38) !important; } /* Disabled until something is said — it must read as waiting, not as broken. Enabled state is set by JS as an inline background, so it is left alone. */ body.light-home #soul-checkin-screen #soul-checkin-btn:disabled { background: rgba(22, 51, 59, 0.06) !important; color: rgba(22, 51, 59, 0.4) !important; } body.light-home #soul-checkin-screen #soul-checkin-response { background: #fff !important; border-color: rgba(47, 125, 140, 0.18) !important; } body.light-home #soul-checkin-screen #soul-checkin-response-text { color: #16333b !important; } /* "Not now" — findable, never competing with the answer above it. */ body.light-home #soul-checkin-screen [onclick="closeSoulCheckin()"] { color: rgba(22, 51, 59, 0.45) !important; } /* The pills keep their four families — the colours ARE the meaning here, and a believer picking "Grieving" should not find it dressed the same as "Grateful". Only the ink and the fill move: cream text on a white pill was the one thing that made them unreadable rather than merely dark. */ body.light-home #soul-checkin-screen .soul-pill { background: #fff; color: #16333b; } body.light-home #soul-checkin-screen .soul-pill[data-color="positive"].selected { background: rgba(47, 125, 140, 0.14); } body.light-home #soul-checkin-screen .soul-pill[data-color="stress"].selected { background: rgba(180, 140, 50, 0.16); } body.light-home #soul-checkin-screen .soul-pill[data-color="pain"].selected { background: rgba(60, 90, 160, 0.14); } body.light-home #soul-checkin-screen .soul-pill[data-color="heavy"].selected { background: rgba(160, 40, 40, 0.12); }