/* ========================================================================== * COZY MODE — "Warm Letter" theme * -------------------------------------------------------------------------- * Activated only when is set (see core/ux-mode.js). * Commits hard to an analog / letter-writing aesthetic: cream paper, navy * ink, warm earth shadows, generous spacing, and subtle paper grain. The * Fraunces-serif / Lexend-sans voice pairing this file was built around was * RETIRED 2026-07-30 — cozy now uses standard's Inter/Poppins, one size up. * * Scope rule: every selector starts with `[data-ux-mode="cozy"]` so * Standard mode is completely untouched. * * Typography: Fraunces (display/serif) + Lexend (body/sans) are * research-backed for warmth and aging-eye readability respectively. * ========================================================================== */ /* The Google Fonts @import for Fraunces + Lexend that used to sit here is GONE (2026-07-30). It was always redundant — both families are self-hosted via tokens.css -> fonts/fonts.css -> fraunces.css / lexend.css — so this was a render-blocking request to a third party for fonts we already serve. It is doubly pointless now that cozy uses standard's Inter/Poppins: `document.fonts` reports Lexend as never loaded on any page, and the only surviving Fraunces consumer is STANDARD mode's empire-scene.css (.empire-scene-tagline / .empire-panel-quote via `var(--font-serif, …)`), which the self-hosted faces cover. ⚠️ Do not "clean up" the self-hosted fraunces.css alongside this: standard mode still needs it. And do NOT remove the Cormorant Garamond import in fonts/fonts.css either — that family is NOT self-hosted and is still used by literal name in inline-legal.css and hero-video.css. */ /* --- Design tokens ------------------------------------------------------- */ [data-ux-mode="cozy"] { --cozy-paper: #F7EFE0; /* aged cream background */ --cozy-paper-elevated: #FFFBF2; /* cards, lifted surfaces */ --cozy-ink: #1A2438; /* primary text, navy-ink */ --cozy-ink-muted: #5A5540; /* secondary text, warm graphite */ --cozy-ink-faded: rgba(26, 36, 56, 0.55); --cozy-rose: #A8475F; /* primary CTA — 5.63:1 w/ white (was #C66B6B, 3.67:1 → failed AA). 2026-05-17 token reconciliation. */ --cozy-rose-dark: #8F3A4F; /* hover — 7.28:1 */ --cozy-rose-soft: #C66B6B; /* old token retained as a non-CTA "blush" tint (chips/borders only — never CTA label bg) */ --cozy-gold: #B69763; /* accent, dividers, flourish */ --cozy-gold-soft: rgba(182, 151, 99, 0.35); --cozy-sage: #7E9777; /* success, done state */ --cozy-warm-shadow: rgba(90, 60, 30, 0.10); --cozy-warm-shadow-lg: rgba(90, 60, 30, 0.18); --cozy-border-hairline: 1px solid rgba(166, 130, 85, 0.20); --cozy-border-strong: 1px solid rgba(166, 130, 85, 0.45); --cozy-radius: 20px; --cozy-radius-lg: 28px; /* TYPEFACE: cozy uses the SAME families as standard mode, only larger (owner directive 2026-07-30: "should be the same font as standard but a bit larger"). Cozy used to introduce two extra families and mix them — 'Fraunces' (a SERIF) for every heading/display surface and 'Lexend' (a different sans) for body — against standard's Poppins/Inter pair. Four families across two modes, with a serif/sans switch inside one theme, is what read as inconsistent. These four tokens are the single lever for that: ~77 rules across cozy-theme.css, app-shell.css, marketing.css and timeline-design.css all resolve their font-family through one of them, so re-pointing them here converts every one of those surfaces at once. `--font-serif` and `--font-body-cozy` are redefined *inside the cozy scope only*. This selector is the element, so descendants inherit these values, while `:root` in tokens.css keeps the real serif for standard mode — nothing outside cozy changes. Do NOT "tidy" these into tokens.css `:root`; that would repaint standard mode too. Both standard stacks keep 'Noto Sans SC' ahead of the system font names, which is the QA R6 property (a system name earlier in the list short-circuits per-character CJK fallback and Chinese renders as tofu). Preserve that ordering in any future edit to --font-sans/--font-display. */ --cozy-font-display: var(--font-display); --cozy-font-body: var(--font-sans); /* "A bit larger", not much larger. This token declared 20px against standard's 16px, but it never took effect on any app page: app-shell.css and marketing.css both load AFTER this file and set `[data-ux-mode="cozy"] body { font-size: 16px }` at identical specificity, so the later sheet won and cozy body text rendered at exactly the standard 16px. Those two rules now read this token instead, making it the one source of truth — so 17px is a real +1px lift on what users actually see, where 20px would have been a sudden +25% jump on every cozy page and risks the same overflow class that the nav hit. */ --cozy-text-base: 17px; /* Kept at base+2, the relationship the original 20/22 pair encoded. While base was being overridden to 16px this sat 6px above body text rather than 2px, which is part of what looked uneven. */ --cozy-text-lift: 19px; --cozy-text-hero: 42px; --cozy-text-display: 56px; --cozy-line-height: 1.75; } /* `--font-serif` and `--font-body-cozy` are the two font tokens that live in tokens.css `:root`, and cozy has to re-point BOTH to the standard families (~14 rules in app-shell.css / marketing.css / timeline-design.css resolve their font-family through them). ⚠️ This needs `html[…]` (0,1,1), NOT the bare `[data-ux-mode="cozy"]` (0,1,0) used above, and NOT a placement inside that block. `:root` is also (0,1,0), so an equal-specificity override only wins on source order — and BOTH `app-shell.css` (line 16) and `marketing.css` (line 15) `@import` tokens.css from their own top, which the cascade treats as inserted at that point. Since both sheets load AFTER this file, that re-import re-applies the `:root` defaults last and silently reverted these two tokens to Fraunces/Lexend. The tell was that the swap appeared to work on exactly the two pages that load neither sheet (wizard-templates, pricing) and nowhere else. Element+attribute beats `:root` regardless of source order, so do NOT "simplify" this back into the token block above. */ html[data-ux-mode="cozy"] { --font-serif: var(--font-display); --font-body-cozy: var(--font-sans); } /* Per-page inline stylesheets (user_profile_inline.css, wisdom.html, habits.html, pricing.html, progress.css, profile.css, etc.) redefine `--text-muted` / `--text-primary` / `--color-text-muted` on :root to dark-mode values like `rgba(248, 250, 252, 0.7)` or `#f8fafc`. Those inline definitions match `:root` (specificity 0,0,1) and cascade AFTER the external `cozy-theme.css`, so cozy's default tokens lose. Re-bind every page-level text-color variable to cozy ink at `:root[data-ux-mode="cozy"]` (specificity 0,0,2) so cozy wins regardless of load order. This is the single biggest fix for "light text can't be seen" — it rescues anything using `color: var(--text-muted, ...)`, which is the dominant pattern. */ :root[data-ux-mode="cozy"] { --text-primary: #1A2438; --text-secondary: #3A3E4E; --text-muted: #5A5540; --text-main: #1A2438; /* used by user_profile_init.js inline styles */ --color-text-muted: #5A5540; --text-subtle: rgba(26, 36, 56, 0.55); /* Panels/cards using these var names become cream paper instead of dark glass — otherwise dark backgrounds leak through the cozy surface. */ --glass-bg: #FFFBF2; --glass-border: rgba(166, 130, 85, 0.22); --bg-card: #FFFBF2; --bg-elevated: #FFFBF2; --surface-card: #FFFBF2; --card-bg: #FFFBF2; --card-border: rgba(166, 130, 85, 0.22); --border-color: rgba(166, 130, 85, 0.22); } /* Loading skeletons use a dark-overlay bg built for the dark/standard theme; in cozy that rendered dark --text-muted text on a dark box (~1.3:1, round 44 a11y). Flip the surface to a cream tint so the muted text reads. Higher specificity than .loading, so it covers progress.css AND the habits.html inline rule. */ [data-ux-mode="cozy"] .loading { background: rgba(251, 245, 233, 0.88); border-color: rgba(166, 130, 85, 0.30); color: var(--text-muted); } /* --- Base surface -------------------------------------------------------- */ [data-ux-mode="cozy"] body, [data-ux-mode="cozy"] { background: var(--cozy-paper); color: var(--cozy-ink); font-family: var(--cozy-font-body); font-size: var(--cozy-text-base); line-height: var(--cozy-line-height); font-weight: 400; letter-spacing: 0.005em; } /* Subtle paper grain behind everything — an inline SVG data URI so no extra network request. Opacity ~5% so it reads as texture, not noise. */ [data-ux-mode="cozy"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.045; background-image: url("data:image/svg+xml;utf8,"); } /* Ensure body children stack above the ::before grain texture (z-index 0). Exclude elements that intentionally use position:fixed — overriding them to `position: relative` breaks the mobile bottom nav (pushed off-screen), the cookie banner, modals, and any toast/dialog layer. z-index alone is enough to raise the top-level sections above the texture; fixed elements already form their own stacking context. */ [data-ux-mode="cozy"] body > *:not(.mobile-bottom-nav):not(.cc-overlay):not([role="dialog"]):not(dialog):not(.modal):not(.toast):not(.top-nav):not(nav):not(.page-guide):not(#pageGuide) { position: relative; z-index: 1; } [data-ux-mode="cozy"] body > .mobile-bottom-nav, [data-ux-mode="cozy"] body > .cc-overlay { z-index: 900; } /* The top nav must stack ABOVE the main content so its user-avatar dropdown (children at z-index: 31000) actually paints on top. Without this, nav+main were siblings at the same z-index: 1 — DOM order won and main (later in document) covered the dropdown, making every dropdown-item click pass through to the page underneath. */ [data-ux-mode="cozy"] body > .top-nav, [data-ux-mode="cozy"] body > nav.top-nav { position: relative; z-index: 1000; } /* --- Typography ---------------------------------------------------------- */ [data-ux-mode="cozy"] h1, [data-ux-mode="cozy"] h2, [data-ux-mode="cozy"] h3, [data-ux-mode="cozy"] h4 { font-family: var(--cozy-font-display); font-weight: 600; color: var(--cozy-ink); letter-spacing: -0.015em; line-height: 1.2; } [data-ux-mode="cozy"] h1 { font-size: var(--cozy-text-display); } [data-ux-mode="cozy"] h2 { font-size: var(--cozy-text-hero); } [data-ux-mode="cozy"] h3 { font-size: 28px; } [data-ux-mode="cozy"] h4 { font-size: 22px; font-weight: 500; } [data-ux-mode="cozy"] p { font-size: var(--cozy-text-base); line-height: var(--cozy-line-height); } /* The mobile menu overlay keeps its DARK surface in cozy, so cozy rose ink on it is warm ink on dark paper (3.02:1, 2026-08-03). Excluded here as well as on the :not() variant lower down — BOTH rules paint links, and fixing only one leaves the barer selector still winning. */ [data-ux-mode="cozy"] a:not(.mobile-nav-link):not(.mobile-action-link) { color: var(--cozy-rose); text-underline-offset: 4px; text-decoration-thickness: 1px; } [data-ux-mode="cozy"] a:hover { color: var(--cozy-rose-dark); } /* --- Icons fix (root cause: stroke inherits background color) ------------ */ [data-ux-mode="cozy"] [data-icon] svg, [data-ux-mode="cozy"] .mbn-icon svg, [data-ux-mode="cozy"] .jac-icon svg, [data-ux-mode="cozy"] .lucide { stroke: var(--cozy-ink); color: var(--cozy-ink); fill: none; stroke-width: 2; width: 1em; height: 1em; vertical-align: -0.15em; } [data-ux-mode="cozy"] .btn-primary [data-icon] svg, [data-ux-mode="cozy"] button.primary [data-icon] svg, [data-ux-mode="cozy"] .cozy-cta [data-icon] svg { stroke: var(--cozy-paper); color: var(--cozy-paper); } /* Journal capture cards (Just talk / Write / Photo + words) — the .jac-title / .jac-desc spans keep their tiny standard sizes (14px / 12px) and .jac-desc inherits a light --fg-muted, so the card text reads small and washed-out on cozy's cream cards. Pin to cozy ink + scale up to suit the cozy 20px base. */ [data-ux-mode="cozy"] .journal-action-card .jac-title { font-size: 18px !important; color: var(--cozy-ink, #1A2438) !important; } [data-ux-mode="cozy"] .journal-action-card .jac-desc { font-size: 15px !important; color: var(--cozy-ink-muted, #5A5540) !important; } /* --- Navigation --------------------------------------------------------- */ [data-ux-mode="cozy"] nav, [data-ux-mode="cozy"] .main-navigation, [data-ux-mode="cozy"] .top-nav { background: var(--cozy-paper-elevated); border-bottom: var(--cozy-border-hairline); box-shadow: 0 1px 0 var(--cozy-gold-soft); } [data-ux-mode="cozy"] nav a, [data-ux-mode="cozy"] .nav-link { color: var(--cozy-ink); font-size: 18px; font-weight: 500; padding: 14px 18px; } /* QA R2: the broad `nav a` rule above (18px/14px) also matches the mobile .bottom-nav, blowing each tab label past its ~61px column so they overlapped ("Progres…ission…ForumJourna…"). Restore the compact bottom-nav sizing in cozy mode. Specificity (0,2,1) beats `[data-ux-mode] nav a` (0,1,2). */ [data-ux-mode="cozy"] .bottom-nav a, [data-ux-mode="cozy"] .bottom-nav button { font-size: 10px; padding: 6px 4px; } [data-ux-mode="cozy"] nav a:hover, [data-ux-mode="cozy"] .nav-link:hover { color: var(--cozy-rose); background: rgba(198, 107, 107, 0.08); border-radius: 12px; } [data-ux-mode="cozy"] nav a .label, [data-ux-mode="cozy"] .nav-link .label { margin-left: 8px; } /* Brand / logo name */ [data-ux-mode="cozy"] .brand, [data-ux-mode="cozy"] .logo-text { font-family: var(--cozy-font-display); color: var(--cozy-ink); font-size: 22px; font-weight: 600; letter-spacing: 0; } /* --- Cards / surfaces --------------------------------------------------- */ [data-ux-mode="cozy"] .card, [data-ux-mode="cozy"] .panel, [data-ux-mode="cozy"] .pricing-card, [data-ux-mode="cozy"] .tip-panel, [data-ux-mode="cozy"] .home-card, [data-ux-mode="cozy"] .spirit-card, [data-ux-mode="cozy"] .cozy-card { background: var(--cozy-paper-elevated); border: var(--cozy-border-hairline); border-radius: var(--cozy-radius); box-shadow: 0 6px 24px var(--cozy-warm-shadow), 0 1px 0 rgba(255,255,255,0.6) inset; padding: 32px; color: var(--cozy-ink); } [data-ux-mode="cozy"] .card h2, [data-ux-mode="cozy"] .card h3, [data-ux-mode="cozy"] .panel h2, [data-ux-mode="cozy"] .panel h3 { margin-top: 0; } /* --- Buttons ------------------------------------------------------------ */ /* ⚠️ Anything NOT in these :not() lists gets 56px min-height + 28px horizontal padding + an 18px label. That is right for a real text button and wrong for every compact or icon-sized control, and this rule has broken three separate batches of them now: .btn-icon/.menu-btn (SVG flex-crushed to width:0, see below), .theme-toggle button ("Cozy" overflowed the sidebar, 2026-05-24), and the five added 2026-07-30 below. Found by hit-testing scrollWidth vs clientWidth in cozy at 390px and 1440px — the geometry is inflated in BOTH, but the clipping only becomes visible where space is tight. .composer-send chat's Send pill (8px/14px, 12px label) — 23px clipped at 390px, i.e. the primary action on the main surface .cozy-read-aloud-btn 48px circle, injected by chat_init.js — 9px, both .journal-search-clear 26px circle — 9px, both .month-glance-navbtn 26px circle — 4px, both .mobile-menu-close 48px square — 6px at 390px .pp-btn / .pp-dismiss Progress payoff receipt (payoff-card.css, 2026-09-04 §356 #8) — 28px dismiss circle + compact next-move pill; the card also carries id-anchored overrides, this is the at-source guard so a future edit cannot re-inflate them Excluded rather than re-sized here on purpose: each already has correct geometry in its own sheet (app-shell.css / navigation.css / journal-cards.css / month-glance.css / chat_init.js), which standard mode renders correctly. Duplicating those numbers into this file would just rot. Colour still needs cozy handling for the two that inherit a light-on-dark token — see the companion rule below. When adding a new compact/icon button anywhere, add it here too. */ [data-ux-mode="cozy"] .btn:not(.btn-icon):not(.menu-btn):not(.composer-send), [data-ux-mode="cozy"] button:not(.pricing-toggle-switch):not(.close-btn):not(.icon-btn):not(.btn-icon):not(.menu-btn):not(.persona-btn):not(.tab-btn):not(.profile-nav-btn):not(.wiz-fav-star):not(.composer-send):not(.cozy-read-aloud-btn):not(.journal-search-clear):not(.month-glance-navbtn):not(.mobile-menu-close):not(.fb-cat):not(.pp-btn):not(.pp-dismiss), [data-ux-mode="cozy"] .cozy-cta { min-height: 56px; padding: 14px 28px; font-size: 18px; font-family: var(--cozy-font-body); font-weight: 500; border-radius: 16px; border: var(--cozy-border-strong); background: var(--cozy-paper-elevated); color: var(--cozy-ink); cursor: pointer; transition: transform 180ms ease, box-shadow 220ms ease, background 180ms ease; box-shadow: 0 4px 12px var(--cozy-warm-shadow); } /* Same exclusions as the geometry rule above — a 20px shadow bloom sized for a 56px text button looks wrong under a 26px circle. */ [data-ux-mode="cozy"] .btn:not(.btn-icon):not(.menu-btn):not(.composer-send):hover, [data-ux-mode="cozy"] button:not(.pricing-toggle-switch):not(.close-btn):not(.icon-btn):not(.btn-icon):not(.menu-btn):not(.persona-btn):not(.tab-btn):not(.profile-nav-btn):not(.wiz-fav-star):not(.composer-send):not(.cozy-read-aloud-btn):not(.journal-search-clear):not(.month-glance-navbtn):not(.mobile-menu-close):hover { transform: translateY(-1px); box-shadow: 0 8px 20px var(--cozy-warm-shadow-lg); } /* Companion to the exclusions above: two of those controls colour themselves from tokens that assume a DARK surface — .journal-search-clear and .month-glance-navbtn both use `var(--fg-muted, #94a3b8)`, and .mobile-menu-close uses `var(--nav-text)`. Excluding them from the cozy text-button rule restores their geometry but leaves that light-grey glyph on cream paper. Re-ink them (geometry deliberately untouched — it is correct in their own sheets). */ [data-ux-mode="cozy"] .journal-search-clear, [data-ux-mode="cozy"] .month-glance-navbtn, [data-ux-mode="cozy"] .mobile-menu-close { color: var(--cozy-ink) !important; } [data-ux-mode="cozy"] .month-glance-navbtn { border-color: var(--cozy-gold-soft) !important; } /* Icon-only buttons (.btn-icon, .menu-btn — e.g. the journal topbar menu / bell / settings) are excluded from the text-button rule above: its 14px/28px padding put 56px of horizontal padding on a ~44px button, which flex-crushed the SVG to width:0 and made the icon vanish in cozy. Give them compact icon-button geometry and a hard-sized, cozy-ink SVG. */ [data-ux-mode="cozy"] .btn-icon, [data-ux-mode="cozy"] .menu-btn { min-height: 44px !important; min-width: 44px !important; width: 44px !important; height: 44px !important; padding: 10px !important; border-radius: 12px !important; background: var(--cozy-paper-elevated) !important; border: var(--cozy-border-hairline) !important; color: var(--cozy-ink) !important; box-shadow: 0 2px 6px var(--cozy-warm-shadow) !important; } [data-ux-mode="cozy"] .btn-icon svg, [data-ux-mode="cozy"] .menu-btn svg { width: 22px !important; height: 22px !important; flex: 0 0 auto !important; stroke: var(--cozy-ink) !important; color: var(--cozy-ink) !important; } /* The sidebar Standard/Cozy mode toggle is a 2-up segmented control whose two