:root { --font-heading: "Lexend", "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif; --font-body: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif; --bg: #fffdf8; --bg-tint: #faf6ef; --surface: #fffdfa; --surface-soft: #f7f4ee; --surface-lavender: #f1effd; --text: #111821; --muted: #596172; --line: #dedbd5; --line-strong: #cfcac2; --green: #2f5b35; --sage: #dfe8d8; --sage-strong: #8baa82; --lavender: #dcd7f7; --lavender-strong: #9488d5; --cream: #ffe5b8; --rose: #f7d5cc; --theme-top: #ece8fb; --theme-bottom: #fffdf8; --theme-soft: #f1effd; --theme-panel: #fffdfa; --theme-accent: #2f5b35; --theme-line: rgba(148, 136, 213, 0.16); --theme-line-strong: rgba(148, 136, 213, 0.28); --theme-blob-a: #dfe8d8; --theme-blob-b: #fff1d8; --theme-blob-c: #f6d3c4; --wallpaper-line: rgba(47, 91, 53, 0.11); --wallpaper-art: none; --shadow: 0 14px 32px rgba(23, 25, 35, 0.08); --soft-shadow: 0 4px 16px rgba(23, 25, 35, 0.06); --radius: 18px; --reading-radius: 22px; --control-radius: 12px; } /* Colour themes define only the NON-accent tokens here: page background, the neutral reading surface, text, lines and the brand green. The accent tokens (--theme-top/bottom/soft/panel/accent/line/line-strong/blob-a/b/c) are owned solely by themeConfig in app.js, which applies all 11 inline on at runtime. They used to be duplicated here too, but the inline styles always won, so these copies were dead — and they had already drifted (Sage). Single source now, so they can't drift again. The :root block above keeps a calm default for the pre-script first paint. Accent-only colour-styles: the five light themes (light/calm/sage/lavender/ cream/classic) keep --surface neutral (constant #fffdfa), so picking a colour-style changes only the wallpaper + accents, never the reading surfaces. Sage shares Calm's neutral surfaces and takes its distinct sage- green wallpaper/accent from themeConfig.sage. Dark mode is the one theme that redefines the surfaces (to dark) — unchanged. */ body.theme-light { --bg: #fffdf8; --bg-tint: #faf6ef; --surface: #fffdfa; --surface-soft: #f7f4ee; --surface-lavender: #f1effd; --green: #2f5b35; --sage: #dfe8d8; } body.theme-calm, body.theme-sage { --bg: #fffdf8; --bg-tint: #f5f5ec; --surface: #fffdfa; --surface-soft: #eef4ea; --surface-lavender: #f1effd; --green: #2f5b35; --sage: #dfe8d8; } body.theme-lavender { --bg: #fffaff; --bg-tint: #f6f1fb; --surface-soft: #f6f1fb; --surface-lavender: #ebe6fb; --green: #4c5271; --sage: #e6e1f5; } body.theme-cream { --bg: #fffaf0; --bg-tint: #fbf0df; --surface-soft: #fff3df; --surface-lavender: #f4eee8; --green: #5a5136; --sage: #eee4c8; } body.theme-classic { --bg: #f8f9fb; --bg-tint: #eef1f5; --surface-soft: #f2f4f8; --surface-lavender: #e9edf4; --green: #1f2d45; --sage: #d8dde8; } body.theme-dark { --bg: #121719; --bg-tint: #172024; --surface: #1c2529; --surface-soft: #253136; --surface-lavender: #2d3042; --text: #fbf7ef; --muted: #d5d9dc; --line: #435057; --line-strong: #68767f; --green: #b6d2ad; --sage: #2d3b31; --sage-strong: #a9c49b; --lavender: #3b3855; --lavender-strong: #cfc7ff; --cream: #5c4c31; --rose: #5b3834; --shadow: 0 12px 28px rgba(0, 0, 0, 0.32); --soft-shadow: 0 4px 16px rgba(0, 0, 0, 0.24); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; font-family: var(--font-body); font-size: 18px; line-height: 1.45; color: var(--text); background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--theme-top) 30%, transparent), transparent 28%), radial-gradient(circle at 84% 10%, color-mix(in srgb, var(--theme-bottom) 42%, transparent), transparent 24%), radial-gradient(circle at 84% 88%, color-mix(in srgb, var(--theme-blob-a) 24%, transparent), transparent 30%), linear-gradient( 180deg, color-mix(in srgb, var(--theme-top) 12%, var(--bg) 88%) 0%, color-mix(in srgb, var(--surface) 82%, var(--theme-panel) 18%) 48%, color-mix(in srgb, var(--theme-bottom) 16%, var(--bg-tint) 84%) 100% ); } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: var(--wallpaper-art); background-size: 720px 520px; background-position: 36px 136px; background-repeat: repeat; opacity: 0.62; } body[data-page="home"]::before { opacity: 0.68; } body[data-page="landing"] { --text: #111827; --muted: #4b5563; --landing-sage: #55734d; --landing-sage-soft: #e8efe1; --landing-paper: #fffdf7; --landing-line: rgba(85, 115, 77, 0.58); background: radial-gradient(circle at 18% 88%, rgba(243, 232, 211, 0.52), transparent 30%), radial-gradient(circle at 84% 82%, rgba(221, 231, 216, 0.46), transparent 28%), linear-gradient(180deg, #f3f0e8 0%, #fbfaf4 50%, #f3e7d6 100%); } body[data-page="landing"]::before { display: none; } body[data-page="journey"]::before { opacity: 0.52; } body[data-page="journey"][data-journey-step="understand"]::before, body[data-page="journey"][data-journey-step="act"]::before, body[data-page="journey"][data-journey-step="check"]::before { opacity: 0.32; } body[data-page="comfort"]::before, body[data-page="help"]::before { opacity: 0.48; } body.bg-dots::before { background-image: radial-gradient(circle, rgba(90, 114, 83, 0.75) 1.6px, transparent 1.7px); background-size: 30px 30px; background-position: 0 0; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 26%, black 82%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 26%, black 82%); } body.theme-dark.bg-dots::before { background-image: radial-gradient(circle, rgba(159, 196, 148, 0.65) 1.6px, transparent 1.7px); } body.bg-shapes::before { background-position: 0 0; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 26%, black 82%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 26%, black 82%); } body.bg-notebook::before { background-image: var(--wallpaper-art), linear-gradient(to right, transparent 79px, rgba(200, 100, 80, 0.24) 79px, rgba(200, 100, 80, 0.24) 80px, transparent 80px), repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(47, 91, 53, 0.22) 31px, rgba(47, 91, 53, 0.22) 32px); background-size: 84px 104px, auto, auto; background-position: right 16px top 56px, 0 0, 0 0; background-repeat: no-repeat, no-repeat, no-repeat; } body.theme-dark.bg-notebook::before { background-image: var(--wallpaper-art), linear-gradient(to right, transparent 79px, rgba(159, 196, 148, 0.22) 79px, rgba(159, 196, 148, 0.22) 80px, transparent 80px), repeating-linear-gradient(to bottom, transparent 0px, transparent 31px, rgba(159, 196, 148, 0.22) 31px, rgba(159, 196, 148, 0.22) 32px); background-size: 84px 104px, auto, auto; background-position: right 16px top 56px, 0 0, 0 0; background-repeat: no-repeat, no-repeat, no-repeat; } body.bg-animals::before { background-repeat: no-repeat; background-size: cover; background-position: center bottom; -webkit-mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 26%, black 82%); mask-image: radial-gradient(ellipse 60% 58% at 50% 50%, transparent 26%, black 82%); } .topbar, .app-main, .modal { position: relative; z-index: 1; } body[data-page="landing"] .topbar { display: none; } body.bg-plain::before { display: none; } /* Mobile: the desktop centre-fade ellipse is tuned for wide screens. On a tall narrow phone, with full width content and no side gutters, that vignette leaves almost no visible area and the motifs all but disappear. For portrait we drop the centre hole and let each theme read as an even, faint allover texture instead: motifs show in every gap (margins, above and below the cards) while the opaque cards keep all card text unaffected. Animals tile as a gentle repeating row down the page rather than a single cover slice that crops to just the centre cat. Opacity stays low so text over the bare body background stays clearly readable. Desktop values above are left untouched. */ @media (max-width: 760px) { body.bg-dots::before, body.bg-shapes::before, body.bg-animals::before { -webkit-mask-image: none; mask-image: none; } body.bg-animals::before { background-size: 100% auto; background-position: center top; background-repeat: repeat-y; } body.bg-dots::before { background-size: 26px 26px; } body.bg-shapes::before { background-size: 360px 260px; } } /* Text-size control. The body font-size scales text that inherits it, but most Northcue text uses explicit px, so it also drives --text-scale: reading-text selectors multiply their px by calc(... * var(--text-scale, 1)) so the control reliably scales text on every page. Medium (no class) falls back to 1. */ body.dyslexia-mode, body.text-large { font-size: 20px; letter-spacing: 0.02em; line-height: 1.65; --text-scale: 1.1; } body.text-small { font-size: 16px; --text-scale: 0.9; } /* ── Text-size scaling — Home (representative page) ────────────────────────── Each reading-text size is multiplied by --text-scale (small 0.9 / medium 1 / large 1.1). The #page-home prefix wins over the existing class rules by specificity (so placement/duplicate blocks don't matter). Desktop dashboard text and the mobile welcome text are separate sets (mutually exclusive by width). Page title/hero text scales gently with the same variable. */ #page-home .home-dashboard-head p:not(.focus-helper) { font-size: calc(16px * var(--text-scale, 1)); } #page-home .home-card-copy h2 { font-size: calc(24px * var(--text-scale, 1)); } #page-home .home-upload-btn { font-size: calc(17px * var(--text-scale, 1)); } #page-home .home-card-copy strong { font-size: calc(17px * var(--text-scale, 1)); } #page-home .home-card-copy small { font-size: calc(14px * var(--text-scale, 1)); } #page-home .home-process-panel h2 { font-size: calc(25px * var(--text-scale, 1)); } #page-home .home-process-panel header p { font-size: calc(16px * var(--text-scale, 1)); } #page-home .process-step strong { font-size: calc(17px * var(--text-scale, 1)); } #page-home .process-step small { font-size: calc(13px * var(--text-scale, 1)); } @media (max-width: 760px) { #page-home .home-welcome-title { font-size: calc(30px * var(--text-scale, 1)); } #page-home .home-welcome-sub { font-size: calc(15px * var(--text-scale, 1)); } #page-home .home-welcome-start { font-size: calc(18px * var(--text-scale, 1)); } #page-home .home-welcome-heading { font-size: calc(19px * var(--text-scale, 1)); } #page-home .hiw-copy strong { font-size: calc(17px * var(--text-scale, 1)); } #page-home .hiw-copy small { font-size: calc(14px * var(--text-scale, 1)); } #page-home .home-welcome-subline { font-size: calc(13px * var(--text-scale, 1)); } #page-home .cue-sample-top strong { font-size: calc(17px * var(--text-scale, 1)); } #page-home .cue-sample-copy small { font-size: calc(14px * var(--text-scale, 1)); } #page-home .home-help-line-text { font-size: calc(14px * var(--text-scale, 1)); } } /* ── Text-size scaling — Journey (upload + cue cards) ──────────────────────── */ #page-journey .results-head h1 { font-size: calc(15px * var(--text-scale, 1)); } #page-journey .card-progress { font-size: calc(17px * var(--text-scale, 1)); } #page-journey #card-title { font-size: calc(15px * var(--text-scale, 1)); } #page-journey .card-explanation { font-size: calc(15.5px * var(--text-scale, 1)); } #page-journey .micro-feedback { font-size: calc(14px * var(--text-scale, 1)); } #page-journey .action-panel h2 { font-size: calc(14px * var(--text-scale, 1)); } #page-journey .action-btn { font-size: calc(14px * var(--text-scale, 1)); } #page-journey .journey-upload-subtitle { font-size: calc(24px * var(--text-scale, 1)); } #page-journey .privacy-note strong { font-size: calc(17px * var(--text-scale, 1)); } #page-journey .privacy-note small { font-size: calc(14px * var(--text-scale, 1)); } /* ── Text-size scaling — Help ──────────────────────────────────────────────── */ #page-help .help-head h1 { font-size: calc(clamp(26px, 2.4vw, 32px) * var(--text-scale, 1)); } #page-help .help-tier-label { font-size: calc(11px * var(--text-scale, 1)); } #page-help .help-card strong { font-size: calc(17px * var(--text-scale, 1)); } #page-help .help-contact-card-body h3 { font-size: calc(18px * var(--text-scale, 1)); } #page-help .help-contact-card-body p { font-size: calc(15px * var(--text-scale, 1)); } /* ── Text-size scaling — Comfort ───────────────────────────────────────────── */ #page-comfort .comfort-head h1 { font-size: calc(clamp(26px, 2.4vw, 32px) * var(--text-scale, 1)); } #page-comfort .comfort-head p { font-size: calc(16px * var(--text-scale, 1)); } #page-comfort .saved-on-device { font-size: calc(15px * var(--text-scale, 1)); } /* ── Text-size scaling — Privacy ───────────────────────────────────────────── */ #page-privacy .privacy-head h1 { font-size: calc(clamp(26px, 2.4vw, 32px) * var(--text-scale, 1)); } #page-privacy .privacy-intro { font-size: calc(16px * var(--text-scale, 1)); } #page-privacy .privacy-journey-caption { font-size: calc(14.5px * var(--text-scale, 1)); } #page-privacy .privacy-panel h2 { font-size: calc(20px * var(--text-scale, 1)); } #page-privacy .privacy-panel p { font-size: calc(15.5px * var(--text-scale, 1)); } #page-privacy .privacy-card h3 { font-size: calc(17px * var(--text-scale, 1)); } #page-privacy .privacy-card p { font-size: calc(15.5px * var(--text-scale, 1)); } #page-privacy .privacy-full-text strong { font-size: calc(16px * var(--text-scale, 1)); } #page-privacy .privacy-full-text small { font-size: calc(13px * var(--text-scale, 1)); } #page-privacy .privacy-closing { font-size: calc(13.5px * var(--text-scale, 1)); } /* ── Text-size scaling — Privacy (full details) ────────────────────────────── */ #page-privacy-full .privacy-full-stub h1 { font-size: calc(clamp(24px, 2.2vw, 30px) * var(--text-scale, 1)); } #page-privacy-full .privacy-full-stub p { font-size: calc(16px * var(--text-scale, 1)); } /* ── Text-size scaling — modals (Help details + other nested flows) ────────── */ #modal .modal-box h2 { font-size: calc(28px * var(--text-scale, 1)); } #modal .help-modal-text { font-size: calc(17px * var(--text-scale, 1)); } #modal .help-modal-section-title { font-size: calc(17px * var(--text-scale, 1)); } #modal .help-step-copy strong { font-size: calc(17px * var(--text-scale, 1)); } #modal .help-step-copy small { font-size: calc(15px * var(--text-scale, 1)); } #modal .feedback-intro { font-size: calc(15px * var(--text-scale, 1)); } #modal .feedback-question h3 { font-size: calc(22px * var(--text-scale, 1)); } #modal .feedback-question p { font-size: calc(15px * var(--text-scale, 1)); } #modal .feedback-choice-card strong { font-size: calc(20px * var(--text-scale, 1)); } #modal .feedback-choice-card small { font-size: calc(14px * var(--text-scale, 1)); } #modal .feedback-private-note { font-size: calc(14px * var(--text-scale, 1)); } #modal .feedback-or-text { font-size: calc(14px * var(--text-scale, 1)); } /* Desktop-only: the colour-style labels are hidden (font-size 0) on phones. */ @media (min-width: 761px) { #page-comfort .colour-style { font-size: calc(15px * var(--text-scale, 1)); } } /* Mobile overrides where the base size differs at ≤760px. */ @media (max-width: 760px) { #page-journey .card-progress { font-size: calc(13px * var(--text-scale, 1)); } #page-journey #card-title { font-size: calc(16px * var(--text-scale, 1)); } #page-journey .card-explanation { font-size: calc(15px * var(--text-scale, 1)); } #page-journey .card-nav .outline-btn { font-size: calc(15px * var(--text-scale, 1)); } #page-journey .journey-upload-subtitle-mobile { font-size: calc(15px * var(--text-scale, 1)); } #page-journey .privacy-line-mobile { font-size: calc(13px * var(--text-scale, 1)); } #page-help .help-head h1 { font-size: calc(clamp(26px, 2.4vw, 32px) * var(--text-scale, 1)); } #page-help .help-card strong { font-size: calc(16px * var(--text-scale, 1)); } #page-comfort .text-size-btn { font-size: calc(12px * var(--text-scale, 1)); } #page-comfort .text-size-btn strong { font-size: calc(16px * var(--text-scale, 1)); } } body.card-standard { --radius: 6px; --reading-radius: 6px; --control-radius: 5px; --shadow: 0 10px 24px rgba(23, 25, 35, 0.08); } .focus-helper { display: none; width: fit-content; margin: 10px 0 0; padding: 8px 12px; border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%); border-radius: 999px; background: color-mix(in srgb, var(--theme-blob-a) 34%, var(--surface) 66%); color: var(--theme-accent); font-size: 14px; font-weight: 800; } .home-dashboard-head .focus-helper, .journey-shell > .focus-helper, .results-head .focus-helper, .help-head .focus-helper { color: var(--theme-accent); font-size: 14px; font-weight: 800; } body.focus-mode .focus-helper { display: inline-flex; } body.focus-mode .support-strip, body.focus-mode .help-with-row, body.focus-mode .action-panel, body.focus-mode .home-process-panel, body.focus-mode .home-card-grid, body.focus-mode .help-simple-sections { display: none; } body.focus-mode .home-dashboard { grid-template-columns: minmax(0, 760px); justify-content: center; } body.focus-mode .home-action-panel, body.focus-mode .upload-panel, body.focus-mode .journey-main, body.focus-mode .help-cards, body.focus-mode .help-safety-note { margin-right: auto; margin-left: auto; } body.focus-mode .home-action-panel, body.focus-mode .help-cards, body.focus-mode .help-safety-note { width: min(760px, 100%); } body.focus-mode .document-type-row { display: none; } body.focus-mode .upload-panel { width: min(920px, 100%); } body.focus-mode .privacy-note { max-width: 560px; } body.focus-mode .journey-main { grid-template-columns: minmax(0, 1fr); width: min(980px, 100%); } body.focus-mode .cue-card-panel { box-shadow: 0 16px 36px rgba(35, 54, 38, 0.12); } body.focus-mode .help-layout { width: min(940px, 100%); } body.focus-mode .help-cards { grid-template-columns: minmax(0, 1fr); } .journey-page:not(.upload-active) .focus-upload-helper { display: none !important; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } h1, h2, h3, button { font-family: var(--font-heading); } h1, h2, h3, p { margin-top: 0; } button, input, textarea { font: inherit; } button { border: 0; cursor: pointer; } button:focus-visible, input:focus-visible, textarea:focus-visible, .dropzone:focus-within { outline: 4px solid #254f9a; outline-offset: 4px; } .topbar { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; min-height: 94px; padding: 14px 34px; border-bottom: 1px solid var(--line); background: var(--surface); } .brand-button { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 4px 0; color: var(--text); background: transparent; text-decoration: none; } .brand-link { cursor: pointer; } .brand-icon { display: block; width: 48px; height: 48px; object-fit: contain; flex: 0 0 auto; } .brand-name { color: var(--text); font-family: var(--font-heading); font-size: 33px; font-weight: 800; line-height: 1; letter-spacing: 0; } .top-links { display: flex; align-items: center; justify-content: center; gap: 18px; } .top-link { min-height: 48px; padding: 0 22px; border-radius: 10px; color: #252b35; background: transparent; font-size: 18px; font-weight: 700; } .top-link.active { background: var(--sage); } .mode-row { display: flex; align-items: center; gap: 10px; } .mode-btn { display: grid; place-items: center; width: 63px; height: 70px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 700; box-shadow: var(--soft-shadow); } .mode-btn.active, .mode-btn[aria-pressed="true"] { border-color: var(--green); background: var(--surface-soft); } .theme-switch { display: flex; align-items: center; height: 70px; padding: 3px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: var(--soft-shadow); } .theme-seg { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; background: var(--surface-soft); color: var(--text); } .theme-seg.active { background: var(--green); } .theme-seg.active .northcue-theme-seg-icon { opacity: 1; filter: brightness(0) invert(1); } .northcue-theme-seg-icon { --northcue-icon-canvas: 26px; opacity: 0.6; } .top-mode-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border: 1px solid var(--northcue-circle-border, rgba(47, 91, 53, 0.16)); border-radius: 999px; background: var(--northcue-circle-bg, #edf4e8); color: var(--green); box-shadow: var(--northcue-circle-shadow, 0 1px 4px rgba(23, 25, 35, 0.07)); } .top-mode-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .northcue-icon { display: block; width: var(--northcue-icon-canvas, 100%); height: var(--northcue-icon-canvas, 100%); box-sizing: border-box; max-width: none; max-height: none; flex: 0 0 auto; object-fit: contain; object-position: center center; pointer-events: none; } .northcue-circle-white, .northcue-circle-soft-green, .northcue-circle-soft-cream, .northcue-circle-soft-blue, .northcue-circle-soft-purple { --northcue-circle-border: rgba(37, 74, 47, 0.1); --northcue-circle-shadow: none; } .northcue-circle-white { --northcue-circle-bg: rgba(255, 255, 252, 0.96); --northcue-circle-border: rgba(37, 74, 47, 0.12); --northcue-circle-shadow: 0 8px 18px rgba(17, 24, 39, 0.04), inset 0 0 0 1px rgba(255, 255, 255, 0.74); } .northcue-circle-soft-green { --northcue-circle-bg: linear-gradient(180deg, #f5f8f1 0%, #eaf2e5 100%); } .mode-btn .top-mode-icon.northcue-circle-soft-green { --northcue-circle-bg: linear-gradient(180deg, #ddefd3 0%, #cde3c1 100%); --northcue-circle-border: rgba(37, 74, 47, 0.22); } .northcue-circle-soft-cream { --northcue-circle-bg: linear-gradient(180deg, #faf3e6 0%, #f3e8d4 100%); } .northcue-circle-soft-blue { --northcue-circle-bg: linear-gradient(180deg, #edf4fb 0%, #e3edf8 100%); } .northcue-circle-soft-purple { --northcue-circle-bg: linear-gradient(180deg, #f6f3fb 0%, #ece8f6 100%); } .northcue-circle-fill { border: 1px solid var(--northcue-circle-border, transparent); border-radius: 999px; background: var(--northcue-circle-bg, transparent); box-shadow: var(--northcue-circle-shadow, none); } .top-mode-icon:has(.northcue-icon), .home-icon-bubble:has(.northcue-main-icon), .process-icon-circle:has(.northcue-main-icon), .upload-hero-icon:has(.northcue-main-icon), .ready-check:has(.northcue-status-icon), .privacy-note-icon:has(.northcue-status-icon), .action-icon:has(.northcue-action-icon), .help-icon-bubble:has(.northcue-help-icon), .cue-logo:has(.northcue-cue-icon), .help-step-icon:has(.northcue-step-icon), .emoji-icon:has(.northcue-rail-icon) { display: flex; align-items: center; justify-content: center; overflow: hidden; border-color: var(--northcue-circle-border, transparent); background: var(--northcue-circle-bg, transparent); box-shadow: var(--northcue-circle-shadow, none); } .northcue-top-utility-icon { --northcue-icon-canvas: 60px; } .northcue-top-main-icon { --northcue-icon-canvas: 74px; } .northcue-main-icon { --northcue-icon-canvas: 136px; } .home-icon-primary .northcue-main-icon, .upload-hero-icon .northcue-main-icon { --northcue-icon-canvas: 160px; } .northcue-rail-icon { --northcue-icon-canvas: 88px; } .northcue-chip-icon { --northcue-icon-canvas: 72px; } .northcue-chip-icon.northcue-circle-fill { padding: 8px; } .upload-category-icon-badge { display: inline-grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; overflow: hidden; border: 1px solid rgba(37, 74, 47, 0.1); border-radius: 999px; background: var(--northcue-circle-bg, linear-gradient(180deg, #f5f8f1 0%, #eaf2e5 100%)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38); } .upload-category-icon-badge .northcue-chip-icon { --northcue-icon-canvas: 148px; } .northcue-upload-chip-icon { display: block; width: var(--northcue-icon-canvas); height: var(--northcue-icon-canvas); --northcue-icon-canvas: 54px; flex: 0 0 auto; object-fit: contain; } .northcue-status-icon, .northcue-step-icon { --northcue-icon-canvas: 92px; } .northcue-action-icon { --northcue-icon-canvas: 100px; } .northcue-help-icon { --northcue-icon-canvas: 144px; } .northcue-cue-icon { --northcue-icon-canvas: 126px; } .northcue-feedback-icon { --northcue-icon-canvas: 42px; } .northcue-feedback-icon.northcue-circle-fill { padding: 7px; } .northcue-progress-icon { --northcue-icon-canvas: 38px; } .northcue-private-icon { --northcue-icon-canvas: 44px; } .northcue-private-icon.northcue-circle-fill { padding: 8px; } .journey-icon-slot { --northcue-circle-bg: transparent; --northcue-circle-border: transparent; --northcue-circle-shadow: none; } .journey-icon-slot .northcue-main-icon { --northcue-icon-canvas: 108px; } .upload-hero-icon .northcue-main-icon { --northcue-icon-canvas: 132px; } .journey-icon-slot .northcue-rail-icon { --northcue-icon-canvas: 88px; } .journey-icon-slot .northcue-status-icon, .journey-icon-slot .northcue-step-icon, .journey-icon-slot .northcue-private-icon { --northcue-icon-canvas: 96px; } .journey-icon-slot.privacy-note-icon .northcue-private-icon { --northcue-icon-canvas: 86px; } .journey-icon-slot .northcue-action-icon, .journey-icon-slot .northcue-cue-icon { --northcue-icon-canvas: 104px; } .help-modal-icon .northcue-help-icon { --northcue-icon-canvas: 112px; } .journey-icon-slot.help-icon-bubble { width: 32px; height: 32px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .journey-icon-slot .northcue-help-icon { --northcue-icon-canvas: 104px; } .home-tile-card .northcue-main-icon { --northcue-icon-canvas: 132px; } .help-card .northcue-help-icon { --northcue-icon-canvas: 100px; } .text-mode-icon { color: var(--text); font-family: var(--font-heading); font-size: 16px; font-weight: 800; letter-spacing: 0; } .mode-glyph, .text-glyph, .heart-glyph { position: relative; display: grid; place-items: center; width: 24px; height: 24px; margin-bottom: 4px; color: var(--text); font-weight: 800; } .emoji-icon { display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid rgba(47, 91, 53, 0.16); border-radius: 999px; background: #edf4e8; box-shadow: 0 1px 4px rgba(23, 25, 35, 0.07); color: var(--text); font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Lexend", sans-serif; font-size: 24px; line-height: 1; } .journey-icon-slot.emoji-icon { width: 24px; height: 24px; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .emoji-icon::before, .emoji-icon::after { content: none !important; } .top-emoji { width: 34px; height: 34px; margin-bottom: 4px; font-size: 19px; } .text-emoji { font-family: var(--font-heading); font-size: 16px; font-weight: 800; } .button-emoji { width: 34px; height: 34px; font-size: 19px; } .light-emoji { background: #f2f0fb; } .map-emoji, .rail-emoji { width: 40px; height: 40px; font-size: 22px; } .circle-emoji { width: 58px; height: 58px; font-size: 28px; } .chip-emoji { width: 30px; height: 30px; font-size: 17px; } .drop-emoji { width: 94px; height: 94px; font-size: 46px; } .status-emoji { width: 36px; height: 36px; font-size: 20px; } .help-emoji { width: 86px; height: 86px; font-size: 42px; } .sun-glyph { border: 2px solid currentColor; border-radius: 50%; } .sun-glyph::before, .sun-glyph::after { content: ""; position: absolute; width: 2px; height: 30px; background: currentColor; border-radius: 2px; } .sun-glyph::after { transform: rotate(90deg); } .moon-glyph { border-radius: 50%; box-shadow: inset -7px 0 0 currentColor; } .star-glyph::before { content: ""; width: 16px; height: 16px; background: currentColor; clip-path: polygon(50% 0, 62% 36%, 100% 50%, 62% 64%, 50% 100%, 38% 64%, 0 50%, 38% 36%); } .sound-glyph::before { content: ""; width: 16px; height: 16px; border-left: 5px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .colour-swatch { display: block; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 999px; overflow: hidden; background: conic-gradient( var(--lavender) 0deg 90deg, var(--rose) 90deg 180deg, var(--sage) 180deg 270deg, var(--cream) 270deg 360deg ); box-shadow: var(--soft-shadow); } .app-main { width: min(1380px, calc(100% - 48px)); margin: 0 auto; padding: 36px 0 48px; } body[data-page="landing"] .app-main { width: 100%; padding: 0; } .page { display: none; } .page.active { display: block; } #page-landing.active { display: grid; min-height: 100vh; place-items: center; padding: 40px clamp(24px, 5vw, 72px) 82px; overflow: hidden; } .landing-story { position: relative; display: grid; grid-template-columns: minmax(318px, 0.28fr) minmax(452px, 0.44fr) minmax(318px, 0.28fr); align-items: center; gap: clamp(30px, 3.2vw, 48px); width: min(1460px, 100%); min-height: min(680px, 82vh); transform: translateY(-1.5vh); } .landing-connectors { display: none; } .landing-connectors path { fill: none; stroke: var(--landing-line); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0.6; } .landing-doc-visual, .landing-shell, .landing-cue-previews { position: relative; z-index: 1; } .landing-doc-visual { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 500px; align-self: center; justify-self: center; padding: 16px 0 18px clamp(18px, 2.4vw, 36px); overflow: visible; } .DocumentStackIllustration, .landing-document-stack-illustration { display: block; width: clamp(388px, 30vw, 448px); max-width: 448px; height: auto; overflow: visible; } .document-stack-scribble { fill: none; stroke: rgba(17, 24, 39, 0.27); stroke-width: 2.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.5; } .document-stack-scribble ellipse:nth-child(2) { opacity: 0.58; } .document-stack-scribble ellipse:nth-child(3) { opacity: 0.5; } .document-stack-scribble ellipse:nth-child(4), .document-stack-scribble ellipse:nth-child(5) { opacity: 0.42; } .document-stack-soft-shadow { fill: rgba(17, 24, 39, 0.065); } .document-stack-underlay { opacity: 0.86; } .document-stack-base { opacity: 0.58; } .document-stack-papers { transform-origin: center; } .document-stack-sheet { fill: url(#document-stack-paper-face); stroke: rgba(126, 143, 114, 0.2); stroke-width: 1.1; } .document-stack-sheet-faint { fill: rgba(255, 255, 251, 0.96); stroke: rgba(126, 143, 114, 0.12); stroke-width: 0.95; } .document-stack-sheet-mid { opacity: 0.96; } .document-stack-sheet-front, .document-stack-sheet-main { opacity: 0.98; } .document-stack-fold { fill: rgba(126, 143, 114, 0.1); stroke: rgba(126, 143, 114, 0.15); stroke-width: 0.9; } .document-stack-title { fill: rgba(17, 24, 39, 0.68); font-family: var(--font-heading); font-size: 18px; font-weight: 700; letter-spacing: 0; } .document-stack-title-green { fill: var(--theme-accent); } .document-stack-line { fill: none; stroke: rgba(126, 143, 114, 0.11); stroke-width: 5.4; stroke-linecap: round; } .landing-paper-stack { position: relative; width: min(390px, 100%); height: 420px; margin: 54px auto 0; filter: drop-shadow(0 24px 34px rgba(52, 65, 48, 0.08)); } .landing-paper-stack::before, .landing-paper-stack::after { content: ""; position: absolute; pointer-events: none; z-index: -2; border-radius: 50%; background: rgba(126, 143, 114, 0.08); filter: blur(2px); } .landing-paper-stack::before { left: 32px; bottom: 2px; width: 320px; height: 66px; transform: rotate(-5deg); } .landing-paper-stack::after { left: 82px; bottom: 28px; width: 230px; height: 38px; background: rgba(17, 24, 39, 0.045); transform: rotate(7deg); } .landing-paper { position: absolute; display: grid; align-content: start; gap: 14px; width: 258px; min-height: 174px; padding: 28px 26px; border: 1px solid rgba(126, 143, 114, 0.18); border-radius: 9px; background: linear-gradient(180deg, rgba(255, 255, 251, 0.96), rgba(248, 247, 240, 0.86)), radial-gradient(circle at 18% 20%, rgba(255, 255, 255, 0.7), transparent 42%); box-shadow: 0 18px 32px rgba(52, 65, 48, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.42); color: rgba(17, 24, 39, 0.72); font-size: 18px; font-weight: 800; transform-origin: center bottom; } .landing-paper::after { content: ""; position: absolute; top: 0; right: 0; width: 34px; height: 34px; border-radius: 0 8px 0 8px; background: linear-gradient(135deg, rgba(255,255,255,0) 48%, rgba(126, 143, 114, 0.12) 50%); } .landing-paper i { display: block; width: 76%; height: 7px; border-radius: 999px; background: rgba(126, 143, 114, 0.105); } .landing-paper i:nth-of-type(2) { width: 88%; } .landing-paper i:nth-of-type(3) { width: 60%; } .paper-back { left: 72px; top: 32px; opacity: 0.6; transform: rotate(-6deg); } .paper-mid { left: 110px; top: 92px; opacity: 0.76; transform: rotate(5deg); } .paper-front { left: 28px; top: 152px; opacity: 0.94; transform: rotate(-2deg); } .paper-top { left: 102px; top: 236px; opacity: 0.98; transform: rotate(8deg); } .landing-scribble { position: absolute; top: 28px; left: 50%; width: 124px; height: 86px; fill: none; stroke: rgba(17, 24, 39, 0.22); stroke-width: 2.65; stroke-linecap: round; stroke-linejoin: round; opacity: 0.68; filter: drop-shadow(0 4px 4px rgba(17, 24, 39, 0.04)); transform: translateX(-86%) rotate(-6deg); pointer-events: none; } .landing-scribble path:nth-child(2) { opacity: 0.58; } .landing-scribble path:nth-child(3) { opacity: 0.52; } .landing-scribble path:nth-child(4) { opacity: 0.42; } .landing-scribble path:nth-child(5) { opacity: 0.38; } .landing-scribble path:nth-child(6) { opacity: 0.32; } .landing-leaf { position: absolute; bottom: 48px; width: 90px; height: 150px; opacity: 0.28; overflow: visible; pointer-events: none; } .leaf-fill { fill: #c5d2bb; opacity: 0.64; } .leaf-line { fill: none; stroke: #8da07f; stroke-width: 1.7; stroke-linecap: round; opacity: 0.36; } .leaf-left { left: -18px; transform: rotate(-6deg); } .leaf-right { right: -18px; transform: scaleX(-1) rotate(-5deg); } .landing-document-art { display: block; width: min(370px, 100%); height: auto; margin: 62px auto 0; overflow: visible; } .landing-art-shadow { display: none; } .landing-art-bottom { fill: rgba(255, 255, 250, 0.76); stroke: rgba(126, 143, 114, 0.18); stroke-width: 1.25; } .landing-art-bottom-two { fill: rgba(255, 255, 250, 0.84); } .landing-art-platform { display: none; } .landing-art-platform-line { display: none; } .landing-art-sheet, .landing-art-main-sheet { fill: url(#landing-paper-face); stroke: rgba(126, 143, 114, 0.27); stroke-width: 1.45; } .landing-art-sheet-mid { opacity: 0.96; } .landing-art-sheet-front { opacity: 0.98; } .landing-art-main-sheet { stroke-width: 1.55; } .landing-art-fold { fill: rgba(126, 143, 114, 0.11); stroke: rgba(126, 143, 114, 0.16); stroke-width: 1.1; } .landing-art-title { fill: rgba(17, 24, 39, 0.76); font-family: var(--font-heading); font-size: 18px; font-weight: 800; } .landing-art-title-green { fill: var(--landing-sage); } .landing-art-line { fill: none; stroke: rgba(126, 143, 114, 0.17); stroke-width: 6.5; stroke-linecap: round; } .landing-art-line.short { stroke-width: 6; } .landing-art-line.main { stroke: rgba(126, 143, 114, 0.13); } .landing-art-leaf { display: none; } .landing-art-leaf-vein { display: none; } .landing-shell { display: grid; justify-items: center; gap: 20px; width: min(660px, 100%); text-align: center; } .landing-shell::before, .landing-shell::after { content: ""; position: absolute; top: 50%; width: clamp(94px, 7vw, 124px); height: 2px; border-radius: 999px; background: repeating-linear-gradient( to right, var(--landing-line) 0 5px, transparent 5px 14px ); opacity: 0.64; transform: translateY(-50%); pointer-events: none; } .landing-shell::before { right: calc(100% + clamp(24px, 2.8vw, 42px)); } .landing-shell::after { left: calc(100% + clamp(24px, 2.8vw, 42px)); } .landing-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); font-size: 22px; font-weight: 800; text-decoration: none; } .landing-brand-icon { display: block; width: 42px; height: 42px; object-fit: contain; flex: 0 0 auto; } .landing-brand-name { color: var(--text); font-family: var(--font-heading); font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: 0; } .landing-shell h1 { max-width: 620px; margin: 20px 0 0; color: var(--text); font-size: clamp(44px, 4vw, 60px); line-height: 1.08; font-weight: 700; letter-spacing: 0; } .landing-copy { max-width: 580px; margin: 0; color: var(--muted); font-size: clamp(22px, 1.8vw, 26px); line-height: 1.45; } .landing-start-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; margin-top: 8px; padding: 0 30px; border: 1.5px solid #2f5b35; border-radius: 999px; background: #2f5b35; color: #fff; box-shadow: 0 8px 18px rgba(47, 91, 53, 0.18); font-size: 20px; font-weight: 700; } .landing-arrow { position: relative; display: inline-block; width: 20px; height: 14px; flex: 0 0 auto; } .landing-arrow::before, .landing-arrow::after { content: ""; position: absolute; top: 50%; right: 0; background: currentColor; } .landing-arrow::before { width: 20px; height: 3px; border-radius: 999px; transform: translateY(-50%); } .landing-arrow::after { width: 10px; height: 10px; border-top: 3px solid currentColor; border-right: 3px solid currentColor; background: transparent; transform: translateY(-50%) rotate(45deg); } .landing-start-btn:hover { background: #244529; } .landing-cue-previews { display: grid; gap: 18px; width: min(386px, 100%); justify-self: center; } .landing-stars { display: none; } .landing-cue-leaf { display: none; } .landing-cue-preview { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 112px; padding: 22px 24px; border: 1px solid rgba(126, 143, 114, 0.16); border-radius: 20px; background: rgba(255, 255, 252, 0.96); box-shadow: 0 16px 30px rgba(48, 56, 45, 0.07), inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .landing-cue-icon { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 999px; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.74), transparent 36%), var(--landing-sage-soft); color: var(--landing-sage); box-shadow: inset 0 0 0 1px rgba(85, 115, 77, 0.08), 0 10px 18px rgba(48, 56, 45, 0.06); } .landing-cue-icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.55; stroke-linecap: round; stroke-linejoin: round; } .landing-cue-preview strong { display: block; margin-bottom: 10px; color: var(--text); font-size: 20px; font-weight: 800; } /* The Council Tax example card shares the .landing-cue-preview class but keeps its two short bars under the title. Scoped to .landing-example-card so it is not affected by the previews now using real text instead of bars. */ .landing-example-card i { display: block; width: 142px; max-width: 100%; height: 7px; margin-top: 8px; border-radius: 999px; background: rgba(119, 128, 111, 0.13); } .landing-example-card i:nth-of-type(2) { width: 102px; } .landing-cue-chevron { width: 14px; height: 14px; border-top: 2.5px solid rgba(17, 24, 39, 0.62); border-right: 2.5px solid rgba(17, 24, 39, 0.62); transform: rotate(45deg); } #page-landing.active { min-height: 100vh; align-items: start; padding: clamp(34px, 5.4vh, 54px) clamp(24px, 4.4vw, 64px) 52px; background: radial-gradient(circle at 78% 82%, rgba(218, 229, 210, 0.5), transparent 30%), radial-gradient(circle at 18% 90%, rgba(246, 230, 205, 0.42), transparent 34%), #f8f5ef; } .landing-story { grid-template-columns: minmax(260px, 300px) minmax(430px, 500px) minmax(320px, 340px); justify-content: center; gap: clamp(54px, 7vw, 100px); width: min(1320px, 100%); min-height: min(560px, 70vh); transform: translateY(1vh); } .landing-doc-visual { display: grid; place-items: center; min-height: 420px; padding: 0; overflow: visible; } .landing-document-stack-img { display: block; width: clamp(314px, 24.5vw, 360px); height: auto; margin-top: 40px; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(56, 61, 52, 0.12)) contrast(1.08) brightness(0.98); } .landing-scribble-img { position: absolute; top: -6px; left: 50%; /* Scribble removed on every screen size: it adds no meaning for users, so the hero reads calmer without it. The shared markup is kept (the same img is referenced across breakpoints); this just stops it rendering anywhere. The mobile position rules below are now inert but left in place for easy reversal. */ display: none; width: clamp(104px, 8.6vw, 124px); height: auto; opacity: 0.34; object-fit: contain; transform: translateX(-60%); filter: none; pointer-events: none; } .landing-shell { width: min(500px, 100%); gap: 18px; z-index: 2; } .landing-shell::before, .landing-shell::after { top: 56%; width: clamp(94px, 6.8vw, 110px); height: 16px; opacity: 0.9; background-repeat: no-repeat, repeat-x; pointer-events: none; } .landing-shell::before { right: calc(100% - 17px); /* Dot layers only: the left lead dot at the document end and the dotted run. The arrowhead chevron has been removed and a soft mask fades the line out toward the pointing (right) end, so it dissolves gently instead of ending in a point. */ background-image: radial-gradient(circle at left center, #2f5b35 0 6px, transparent 6.5px), radial-gradient(circle, #2f5b35 2px, transparent 2.4px); background-position: left center, 24px center; background-size: 16px 16px, 13px 16px; background-repeat: no-repeat, repeat-x; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 90%); mask-image: linear-gradient(to right, #000 35%, transparent 90%); } .landing-shell::after { left: calc(100% - 17px); /* The small dots run toward the cue cards. The arrowhead chevron has been removed and a soft mask fades the dotted run out as it approaches the cards, so the flow still reads but nothing points at them. */ background-image: radial-gradient(circle, #2f5b35 2px, transparent 2.4px); background-position: 24px center; background-size: 13px 16px; background-repeat: repeat-x; -webkit-mask-image: linear-gradient(to right, #000 35%, transparent 90%); mask-image: linear-gradient(to right, #000 35%, transparent 90%); } .landing-brand { min-height: 38px; margin-bottom: 10px; } .landing-logo-img { display: block; width: clamp(142px, 11vw, 164px); height: auto; object-fit: contain; } .landing-shell h1 { max-width: 560px; margin: 0; color: #111827; font-size: clamp(48px, 3.9vw, 58px); line-height: 0.98; font-weight: 800; letter-spacing: 0; } .landing-copy { max-width: 520px; color: #596270; font-size: clamp(21px, 1.6vw, 24px); line-height: 1.34; } .landing-start-btn { min-height: 52px; margin-top: 2px; padding: 0 28px; border: 1.5px solid #2f5b35; background: #2f5b35; box-shadow: 0 12px 24px rgba(47, 91, 53, 0.2); color: #fff; font-size: 18px; } .landing-start-btn:hover { background: #244529; } .landing-cue-previews { gap: 18px; width: min(340px, 100%); justify-self: start; } .landing-cue-preview { min-height: 102px; padding: 19px 21px; gap: 18px; border: 1px solid rgba(82, 96, 75, 0.12); border-radius: 14px; background: rgba(255, 255, 251, 0.94); box-shadow: 0 16px 30px rgba(48, 56, 45, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.74); } /* The three right-side cards are a preview, not interactive UI. A small muted label sets that expectation, and the cards are softened (gentler, lower shadow, softer border, no crisp inner highlight) so they read as a sample rather than buttons. Scoped to .landing-cue-previews so the mobile Council Tax example card is unaffected. */ .landing-cue-label { margin: 0; color: #7e8794; font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0.01em; } .landing-cue-previews .landing-cue-preview { /* Soft illustration, not a button: defined by a gentle warm paper tone against the page, with no border and no shadow or gloss. Colour from the existing landing palette (--landing-paper). */ background: var(--landing-paper); border: none; box-shadow: none; } .landing-cue-previews .landing-cue-icon { /* Keep the real icon, drop the glossy radial highlight and the raised inset ring + drop shadow, leaving a flat soft-sage disc. Scoped to the previews so the Council Tax example card and document stack are untouched. */ background: var(--landing-sage-soft); color: var(--landing-sage); box-shadow: none; } .landing-cue-icon { width: 62px; height: 62px; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.72), transparent 40%), #e8efe2; color: #55734d; box-shadow: inset 0 0 0 1px rgba(85, 115, 77, 0.1), 0 10px 18px rgba(48, 56, 45, 0.055); } .landing-cue-icon svg { width: 35px; height: 35px; stroke-width: 2.8; } .landing-cue-preview strong { margin-bottom: 9px; color: #111827; font-size: 18px; line-height: 1.1; } .landing-cue-previews .landing-cue-line { /* Quiet example text in place of the old loading-style bars. Calm secondary tone from the landing palette, clearly below the title. */ display: block; margin-top: 0; color: #596270; font-size: 14px; font-weight: 500; line-height: 1.3; } .landing-cue-chevron { width: 13px; height: 13px; border-color: rgba(17, 24, 39, 0.65); } /* ── Mobile hero example flow (mobile only) ──────────────── On phones the hero adds a short vertical flow under the document: a soft dashed down arrow, one real filled in Council Tax example card, and a quiet "Plus what to check next" line. The whole block is hidden on desktop so the three column hero stays exactly as it was. The card fades and rises in once when scrolled into view; reduced motion shows it immediately with no animation. */ .landing-mobile-flow { display: none; } .landing-example-card.reveal-init { opacity: 0; transform: translateY(12px); transition: opacity 850ms ease-out, transform 850ms ease-out; } .landing-example-card.reveal-init.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .landing-example-card.reveal-init { opacity: 1; transform: none; transition: none; } } @media (min-width: 981px) { .landing-document-stack-img, .landing-shell, .landing-cue-previews { transform: translateY(28px); } } #page-home.active { display: grid; align-items: center; min-height: calc(100vh - 168px); } .green-dot { color: var(--sage-strong); } .home-layout { display: grid; grid-template-columns: minmax(420px, 0.86fr) minmax(540px, 1fr); align-items: center; gap: 64px; width: 100%; padding: 8px 18px 18px; } .home-copy { display: grid; gap: 22px; } .home-kicker { width: fit-content; margin: 0 0 -6px; padding: 8px 14px; border: 1px solid var(--theme-line-strong); border-radius: 999px; background: color-mix(in srgb, var(--theme-panel) 90%, var(--theme-top) 10%); color: var(--theme-accent); font-weight: 800; } .home-copy h1, .journey-shell > h1, .help-head h1, .comfort-head h1 { margin: 0; color: var(--text); font-size: clamp(48px, 5.8vw, 82px); line-height: 1.08; font-weight: 800; letter-spacing: 0; } .lead { max-width: 600px; margin: 0; color: var(--muted); font-size: 22px; font-weight: 400; } .primary-btn, .outline-btn, .soft-purple-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 58px; padding: 0 32px; border-radius: 10px; font-weight: 700; } .primary-btn { background: linear-gradient( 180deg, color-mix(in srgb, var(--theme-accent) 90%, white 10%) 0%, color-mix(in srgb, var(--theme-accent) 78%, black 22%) 100% ); color: #fffdfa; box-shadow: 0 6px 16px color-mix(in srgb, var(--theme-accent) 22%, transparent); } /* Dark mode uses a light sage as its accent, so the shared light formula above leaves the button washed out with near white text. Give it a solid deep brand green instead, so white text stays high contrast on dark. Colour and shadow only, light mode is untouched, and one green covers every dark colour style. */ body.theme-dark .primary-btn { background: linear-gradient(180deg, #356b3d 0%, #2a5331 100%); color: #fffdfa; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35); } /* In dark mode the accent is a light green, so the accent-derived upload-button gradient would put white text on a light fill (≈1.6:1). Give it the same dark green treatment as the primary button so the label stays readable. */ body.theme-dark .home-upload-btn { background: linear-gradient(180deg, #356b3d 0%, #2a5331 100%); color: #fffdfa; } .outline-btn { border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--text); } .start-btn { width: fit-content; font-size: 19px; } .reassure { display: flex; align-items: center; gap: 12px; margin: 0; color: #596172; font-weight: 700; } .celebration-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%); border-radius: 999px; background: color-mix(in srgb, var(--theme-blob-a) 42%, var(--surface) 58%); color: var(--theme-accent); } .celebration-icon svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .home-map { position: relative; min-height: 430px; border: 1px solid var(--theme-line-strong); border-radius: 22px; background: radial-gradient(circle at 22% 80%, color-mix(in srgb, var(--theme-blob-a) 56%, transparent), transparent 18%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--theme-blob-b) 48%, transparent), transparent 16%), radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--theme-blob-c) 44%, transparent), transparent 14%), linear-gradient(135deg, var(--theme-top) 0%, var(--theme-bottom) 100%); box-shadow: var(--shadow); overflow: hidden; } .home-map::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--wallpaper-art); background-size: 520px 380px; background-position: center; background-repeat: repeat; opacity: 0.16; } body.bg-plain .home-map::before { display: none; } .map-track { position: absolute; inset: 56px 88px 52px 78px; border: 8px solid rgba(255, 253, 248, 0.9); border-radius: 52% 45% 46% 44%; transform: rotate(4deg); } .map-stop { position: absolute; display: inline-flex; align-items: center; gap: 12px; min-width: 148px; min-height: 60px; padding: 0 24px; border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 5px 14px rgba(23, 25, 35, 0.08); } .stop-upload { left: 10%; top: 14%; } .stop-understand { right: 21%; top: 27%; } .stop-act { left: 33%; top: 50%; } .stop-check { right: 18%; bottom: 14%; } .map-shape { position: absolute; border-radius: 46% 54% 45% 55%; filter: blur(0.1px); } .shape-a { width: 130px; height: 100px; left: 10%; bottom: 10%; background: var(--theme-blob-a); transform: rotate(-18deg); } .shape-b { width: 122px; height: 82px; right: 13%; top: 8%; background: var(--theme-blob-b); transform: rotate(12deg); } .shape-c { width: 96px; height: 96px; right: 7%; bottom: 12%; background: var(--theme-blob-c); } body[data-page="home"] { --home-bg: var(--bg); --home-card: var(--surface); --home-soft-card: var(--surface); --home-green: var(--theme-accent); --home-sage: var(--theme-blob-a); --home-border: color-mix(in srgb, var(--theme-accent) 16%, var(--line) 84%); --home-text: var(--text); --home-muted: var(--muted); background: radial-gradient(circle at 14% 16%, color-mix(in srgb, var(--theme-top) 28%, transparent), transparent 28%), radial-gradient(circle at 86% 16%, color-mix(in srgb, var(--theme-bottom) 36%, transparent), transparent 24%), linear-gradient( 180deg, color-mix(in srgb, var(--theme-top) 12%, var(--bg) 88%) 0%, color-mix(in srgb, var(--surface) 82%, var(--theme-panel) 18%) 52%, color-mix(in srgb, var(--theme-bottom) 16%, var(--bg-tint) 84%) 100% ); } body[data-page="home"]::before { opacity: 0.52; } body[data-page="home"] .app-main { width: min(1280px, calc(100% - 48px)); padding: 18px 0 20px; } #page-home.active { display: block; min-height: 0; } .home-dashboard { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(420px, 0.96fr); gap: 26px; width: 100%; margin: 0 auto; align-items: stretch; } .home-action-panel, .home-process-panel, .home-primary-card, .home-small-card, .home-info-card { border: 1px solid var(--home-border); background: var(--home-card); box-shadow: 0 10px 28px rgba(17, 24, 39, 0.04); } .home-action-panel, .home-process-panel { border-radius: 18px; padding: 28px; } .home-dashboard-head h1 { max-width: 455px; margin: 0 0 10px; color: var(--home-text); font-size: clamp(32px, 2.85vw, 42px); line-height: 1.16; font-weight: 800; letter-spacing: 0; } .home-dashboard-head p, .home-primary-card p, .home-small-card small, .home-info-card p, .home-process-panel > header p, .process-step small { margin: 0; color: var(--home-muted); font-size: 15px; line-height: 1.42; } .home-primary-card { display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center; margin-top: 20px; padding: 22px; border-radius: 18px; background: var(--home-soft-card); } .home-primary-card h2, .home-info-card h2, .home-process-panel h2 { margin: 0 0 12px; color: var(--home-text); font-size: 22px; line-height: 1.25; font-weight: 800; } .home-primary-card p { margin-bottom: 18px; } .home-upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 0 22px; border-radius: 10px; background: linear-gradient(180deg, #5d7a54 0%, var(--home-green) 100%); color: #ffffff; box-shadow: 0 10px 22px rgba(37, 74, 47, 0.18); font-weight: 800; } .home-support-grid, .home-info-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .home-small-card, .home-info-card { min-height: 108px; border-radius: 16px; color: var(--home-text); } .home-small-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; text-align: left; } .home-small-card strong, .home-info-card h2 { display: block; color: var(--home-text); font-size: 18px; line-height: 1.25; font-weight: 800; } .home-small-card small { display: block; margin-top: 6px; font-size: 14px; } .home-info-card { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 16px; background: var(--home-soft-card); } .home-info-card h2 { margin-bottom: 5px; font-size: 17px; } .home-info-card p { font-size: 14px; } .home-process-panel { min-height: 598px; overflow: hidden; } .home-process-panel > header { margin: 0 0 10px 10px; } .home-process-panel h2 { font-size: 25px; } .process-orbit { position: relative; width: min(500px, 100%); min-height: 452px; margin: 8px auto 0; } .process-path { position: absolute; inset: 56px 58px 62px; border: 2px dashed rgba(94, 128, 80, 0.52); border-radius: 50%; } .process-document { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 146px; height: 146px; border-radius: 50%; background: radial-gradient(circle, #ffffff 0 54%, rgba(217, 222, 210, 0.28) 55% 100%); transform: translate(-50%, -50%); } .process-step { position: absolute; display: grid; justify-items: center; gap: 6px; width: 132px; color: var(--home-text); text-align: center; } .process-step strong { margin-top: 5px; color: var(--home-text); font-size: 18px; font-weight: 800; } .process-step small { font-size: 13px; } .process-upload { left: 50%; top: 0; transform: translateX(-50%); } .process-understand { right: -2px; top: 46%; transform: translateY(-50%); } .process-check { left: 50%; bottom: 0; transform: translateX(-50%); } .process-act { left: -2px; top: 46%; transform: translateY(-50%); } .home-line-icon { position: relative; display: inline-grid; place-items: center; width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; background: rgba(167, 181, 154, 0.22); color: var(--home-green); } .home-upload-btn .home-line-icon { width: 28px; height: 28px; background: transparent; color: currentColor; } .home-primary-card > .home-line-icon { width: 76px; height: 76px; } .home-line-icon::before, .home-line-icon::after { content: ""; position: absolute; box-sizing: border-box; } .document-icon::before, .center-document-icon::before { width: 32px; height: 42px; border: 3px solid currentColor; border-radius: 3px; } .document-icon::after, .center-document-icon::after { width: 20px; height: 3px; background: currentColor; box-shadow: 0 9px 0 currentColor, 0 18px 0 currentColor; } .center-document-icon { width: 96px; height: 116px; border-radius: 16px; background: #ffffff; color: rgba(37, 74, 47, 0.18); } .center-document-icon::before { width: 72px; height: 94px; border-color: rgba(37, 74, 47, 0.12); border-width: 2px; } .center-document-icon::after { width: 42px; height: 3px; background: rgba(37, 74, 47, 0.13); box-shadow: 0 14px 0 rgba(37, 74, 47, 0.13), 0 28px 0 rgba(37, 74, 47, 0.13); } .upload-icon::before { width: 30px; height: 18px; border: 3px solid currentColor; border-top: 0; border-radius: 0 0 8px 8px; bottom: 18px; } .upload-icon::after { width: 14px; height: 14px; border-left: 3px solid currentColor; border-top: 3px solid currentColor; top: 18px; transform: rotate(45deg); box-shadow: -7px 7px 0 -4px currentColor; } .leaf-icon::before { width: 32px; height: 44px; border: 3px solid currentColor; border-radius: 42px 4px 42px 4px; transform: rotate(38deg); } .leaf-icon::after { width: 3px; height: 38px; background: currentColor; transform: rotate(36deg); } .chat-icon::before { width: 40px; height: 30px; border: 3px solid currentColor; border-radius: 14px; } .chat-icon::after { width: 8px; height: 8px; border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; left: 24px; bottom: 20px; transform: rotate(45deg); } .folder-icon::before { width: 42px; height: 30px; border: 3px solid currentColor; border-radius: 4px; } .folder-icon::after { width: 18px; height: 10px; left: 19px; top: 22px; border: 3px solid currentColor; border-bottom: 0; border-radius: 4px 4px 0 0; } .shield-lock-icon::before { width: 34px; height: 40px; border: 3px solid currentColor; clip-path: polygon(50% 0, 100% 18%, 88% 76%, 50% 100%, 12% 76%, 0 18%); } .shield-lock-icon::after { width: 12px; height: 10px; border: 2px solid currentColor; border-radius: 2px; box-shadow: 0 -7px 0 -4px currentColor; } .search-doc-icon::before { width: 34px; height: 42px; border: 3px solid currentColor; border-radius: 3px; } .search-doc-icon::after { width: 20px; height: 20px; right: 17px; bottom: 18px; border: 3px solid currentColor; border-radius: 50%; box-shadow: 12px 12px 0 -8px currentColor; } .checklist-icon::before { width: 34px; height: 42px; border: 3px solid currentColor; border-radius: 4px; } .checklist-icon::after { width: 18px; height: 3px; background: currentColor; box-shadow: 0 10px 0 currentColor, 0 20px 0 currentColor; } .flag-icon::before { width: 3px; height: 42px; background: currentColor; left: 29px; } .flag-icon::after { width: 28px; height: 20px; left: 32px; top: 18px; border: 3px solid currentColor; border-left: 0; border-radius: 0 8px 8px 0; } .home-card-arrow { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(167, 181, 154, 0.22); } .home-card-arrow::before, .home-card-arrow::after { content: ""; position: absolute; top: 50%; right: 11px; background: var(--home-green); } .home-card-arrow::before { width: 14px; height: 2px; transform: translateY(-50%); } .home-card-arrow::after { width: 7px; height: 7px; border-top: 2px solid var(--home-green); border-right: 2px solid var(--home-green); background: transparent; transform: translateY(-50%) rotate(45deg); } .home-small-card:hover, .home-upload-btn:hover { transform: translateY(-1px); } @media (max-width: 1180px) { .home-dashboard { grid-template-columns: 1fr; } .home-process-panel { min-height: auto; } .process-orbit { min-height: 460px; } } @media (max-width: 760px) { .home-dashboard { gap: 20px; } .home-action-panel, .home-process-panel { padding: 24px; border-radius: 18px; } .home-dashboard-head h1 { font-size: 32px; } .home-primary-card, .home-support-grid, .home-info-grid { grid-template-columns: 1fr; } .home-primary-card, .home-small-card, .home-info-card { min-height: auto; padding: 22px; } .home-primary-card { gap: 20px; } .home-upload-btn { width: 100%; } .home-process-panel { min-height: auto; } .process-orbit { min-height: 430px; } .process-path { inset: 78px 32px; } .process-document { width: 128px; height: 128px; } .process-step { width: 124px; } .process-step strong { font-size: 18px; } .process-step small { font-size: 14px; } } /* Home dashboard body. The app shell above it stays untouched. */ body[data-page="home"] .app-main { width: min(1288px, calc(100% - 52px)); padding: 20px 0; } #page-home.active { display: block; min-height: 0; } .home-dashboard { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(430px, 0.96fr); align-items: stretch; gap: 28px; width: 100%; margin: 0 auto; } .home-action-panel, .home-process-panel { min-height: 0; border: 1px solid #dfe3db; border-radius: 18px; background: #ffffff; box-shadow: 0 16px 34px rgba(17, 24, 39, 0.032); } .home-action-panel { padding: 24px; } .home-process-panel { display: flex; flex-direction: column; justify-content: center; padding: 28px 36px; overflow: visible; } .home-dashboard-head h1 { max-width: 395px; margin: 0 0 8px; color: var(--text); font-size: clamp(30px, 2.5vw, 36px); line-height: 1.17; font-weight: 780; letter-spacing: 0; } .home-dashboard-head p, .home-primary-card p, .home-tile-card small, .home-process-panel > header p, .process-step small { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.42; } .home-primary-card { display: grid; grid-template-columns: 98px 1fr; align-items: center; gap: 22px; min-height: 0; margin-top: 16px; padding: 20px; border: 1px solid #d9ded2; border-radius: 16px; background: #fbfcf8; box-shadow: 0 12px 28px rgba(17, 24, 39, 0.026); } .home-card-copy { min-width: 0; } .home-primary-card h2, .home-process-panel h2 { margin: 0 0 10px; color: var(--text); font-size: 24px; line-height: 1.24; font-weight: 780; letter-spacing: 0; } .home-primary-card p { margin-bottom: 18px; } .home-upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 0 24px; border-radius: 10px; background: linear-gradient(180deg, #6b845f 0%, #2f5634 100%); color: #ffffff; box-shadow: 0 12px 22px rgba(37, 74, 47, 0.18); font-size: 17px; font-weight: 780; } .home-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } .home-tile-card { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; min-height: 96px; padding: 14px 64px 14px 16px; border: 1px solid #dfe3db; border-radius: 16px; background: #ffffff; color: var(--text); text-align: left; box-shadow: 0 10px 22px rgba(17, 24, 39, 0.024); } .home-static-card { grid-template-columns: auto minmax(0, 1fr); padding-right: 18px; background: #fbfcf8; } /* The "Private and secure" static card is clickable and has an arrow, so it needs the same arrow-accommodating right padding as .home-tile-card. Scoped to is-privacy-link so the arrow-less "Your documents" static card is unaffected. */ .home-static-card.is-privacy-link { padding-right: 64px; } .home-tile-card strong { display: block; color: var(--text); font-size: 17px; line-height: 1.25; font-weight: 780; } .home-tile-card small { display: block; margin-top: 6px; font-size: 14px; } .home-icon-bubble, .process-icon-circle { display: inline-grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--northcue-circle-border, rgba(37, 74, 47, 0.12)); border-radius: 999px; background: var(--northcue-circle-bg, linear-gradient(180deg, #f5f8f1 0%, #eaf2e5 100%)); color: #536e48; } .home-icon-bubble { width: 62px; height: 62px; } .home-icon-primary { width: 74px; height: 74px; } .home-icon-lavender { --northcue-circle-bg: linear-gradient(180deg, #f6f3fb 0%, #ece8f6 100%); color: #4c5f49; } .home-icon-warm { --northcue-circle-bg: linear-gradient(180deg, #faf3e6 0%, #f3e8d4 100%); color: #4f5c4a; } .home-icon-solid { --northcue-circle-bg: linear-gradient(180deg, #edf4e7 0%, #dfead8 100%); color: #4c6541; } .home-svg-icon, .home-button-icon, .process-document-svg { display: block; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; } .home-svg-icon { width: 30px; height: 30px; stroke-width: 2.4; } .home-icon-primary .home-svg-icon { width: 38px; height: 38px; } .home-button-icon { width: 24px; height: 24px; stroke-width: 2.3; } .home-card-arrow { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 999px; background: #eef4e9; } .home-card-arrow::before, .home-card-arrow::after { content: ""; position: absolute; top: 50%; right: 12px; color: #254a2f; } .home-card-arrow::before { width: 15px; height: 2px; background: currentColor; transform: translateY(-50%); } .home-card-arrow::after { width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: translateY(-50%) rotate(45deg); } .home-process-panel > header { margin: 0 0 20px 0; } .home-process-panel h2 { font-size: 25px; } .process-orbit { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; width: 100%; height: auto; min-height: 0; margin: 0; gap: 0; } .process-loop-svg { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; overflow: visible; color: #7f946f; } .process-structure-line { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.8; opacity: 0.58; } .process-step { position: static; z-index: auto; display: flex; flex-direction: column; align-items: center; flex: 1; width: auto; color: var(--text); text-align: center; } .process-icon-circle { width: 74px; height: 74px; margin-bottom: 10px; background: var(--northcue-circle-bg, color-mix(in srgb, var(--surface) 94%, #eef4e9 6%)); box-shadow: var( --northcue-circle-shadow, 0 10px 20px rgba(17, 24, 39, 0.04), inset 0 0 0 7px rgba(238, 244, 233, 0.58) ); } .process-icon-circle .home-svg-icon { width: 35px; height: 35px; stroke-width: 2.25; } .process-step strong { position: static; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--text); font-size: 17px; line-height: 1.25; font-weight: 780; } .process-step small { margin-top: 5px; max-width: none; padding: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 13px; line-height: 1.35; } .process-upload, .process-understand, .process-check, .process-act { position: static; top: auto; right: auto; bottom: auto; left: auto; transform: none; } .process-chevron { flex: 0 0 auto; align-self: flex-start; margin-top: 37px; width: 9px; height: 9px; border-top: 2px solid var(--line); border-right: 2px solid var(--line); transform: rotate(45deg); opacity: 0.5; } .home-tile-card:hover, .home-upload-btn:hover { transform: translateY(-1px); } /* Shared comfort settings connection for the Home dashboard. */ .home-action-panel, .home-process-panel { /* Accent-only themes: reading surface stays neutral (--surface is constant across the five light themes, dark in dark mode). Only the accent border hints at the theme. */ border-color: color-mix(in srgb, var(--theme-accent) 14%, var(--line) 86%); background: var(--surface); box-shadow: var(--soft-shadow); } .home-primary-card, .home-tile-card { border-color: color-mix(in srgb, var(--theme-accent) 16%, var(--line) 84%); border-radius: var(--reading-radius); background: var(--surface); box-shadow: var(--soft-shadow); } .home-static-card { background: var(--surface); } .home-icon-bubble, .process-icon-circle { border-color: color-mix(in srgb, var(--theme-accent) 16%, var(--line) 84%); background: color-mix(in srgb, var(--theme-blob-a) 50%, var(--surface) 50%); color: var(--theme-accent); } .home-icon-lavender { background: color-mix(in srgb, var(--theme-top) 34%, var(--surface) 66%); color: var(--theme-accent); } .home-icon-warm { background: color-mix(in srgb, var(--theme-bottom) 34%, var(--surface) 66%); color: var(--theme-accent); } .home-icon-solid { background: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-blob-a) 82%); color: var(--theme-accent); } .home-card-arrow { background: color-mix(in srgb, var(--theme-blob-a) 52%, var(--surface) 48%); } .home-card-arrow::before, .home-card-arrow::after { color: var(--theme-accent); } .home-upload-btn { border-radius: var(--control-radius); background: linear-gradient( 180deg, color-mix(in srgb, var(--theme-accent) 84%, white 16%) 0%, color-mix(in srgb, var(--theme-accent) 82%, black 18%) 100% ); box-shadow: 0 12px 22px color-mix(in srgb, var(--theme-accent) 22%, transparent); } .process-loop-svg { color: color-mix(in srgb, var(--theme-accent) 46%, var(--theme-line-strong) 54%); } .process-icon-circle { background: color-mix(in srgb, var(--surface) 86%, var(--theme-blob-a) 14%); box-shadow: 0 10px 20px rgba(17, 24, 39, 0.04), inset 0 0 0 7px color-mix(in srgb, var(--theme-blob-a) 44%, transparent); } .process-step strong, .process-step small { background: transparent; box-shadow: none; } @media (max-width: 1180px) { body[data-page="home"] .app-main { width: min(100% - 32px, 1288px); } .home-dashboard { grid-template-columns: 1fr; } .home-action-panel, .home-process-panel { min-height: auto; } } @media (max-width: 760px) { body[data-page="home"] .app-main { width: min(100% - 24px, 1288px); padding: 22px 0 28px; } .home-action-panel, .home-process-panel { padding: 24px; } .home-dashboard-head h1 { font-size: 32px; } .home-primary-card, .home-card-grid { grid-template-columns: 1fr; } .home-primary-card { min-height: auto; gap: 18px; } .home-upload-btn { width: 100%; } .home-tile-card { min-height: 96px; } .process-orbit { min-height: 0; flex-wrap: wrap; gap: 16px; } .process-step { flex: 1 1 80px; width: auto; } .process-icon-circle { width: 60px; height: 60px; } .process-chevron { display: none; } } /* =================================================================== Desktop home board (>=761px) — the two-column dashboard mockup. Self-contained, new block. Shows only on desktop, where the legacy .home-dashboard is hidden. On mobile this block stays hidden and .home-welcome + .home-dashboard-head + .home-mobile-actions render exactly as before, so mobile home is untouched. Reuses .home-upload-btn, .home-tile-card, .home-process-panel, .cue-sample and the soft-circle icon classes. Every reading size multiplies by --text-scale so the text-size control works here too. */ .home-board { display: none; } @media (min-width: 761px) { /* Retire the old desktop layout; the board replaces it. The #page-home prefix beats any plain .home-dashboard rule by specificity. */ #page-home .home-dashboard { display: none; } #page-home .home-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; width: 100%; margin: 0 auto; } .home-board-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* Both columns stretch to the taller column's height; the shorter column's panels then share the extra height equally so the column bottoms line up. Gaps stay a constant 14px (the panels gain a little height rather than the gaps blowing out), which reads as a tidy, balanced dashboard instead of forced or gappy. Whichever column is naturally shorter at a given width fills to match the other. */ .home-board-col > * { flex: 1 0 auto; } /* Shared panel shell — same calm card look as the existing dashboard panels (theme-aware border, soft radial wash, soft shadow). */ .home-board-panel, .home-board .home-process-panel { border: 1px solid color-mix(in srgb, var(--theme-accent) 14%, var(--line) 86%); border-radius: 18px; padding: 20px; background: var(--surface); box-shadow: var(--soft-shadow); } /* 1. Hero — the main upload action, lightly tinted to read as primary. */ .home-board-hero { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--surface); border-color: color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%); } .home-board-title { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: calc(34px * var(--text-scale, 1)); line-height: 1.12; font-weight: 800; letter-spacing: -0.01em; } .home-board-sub { margin: 0; color: var(--muted); font-size: calc(16px * var(--text-scale, 1)); line-height: 1.45; } .home-board-start { width: 100%; min-height: 54px; margin-top: 6px; border-radius: 14px; } .home-board-hero .focus-helper { margin: 2px 0 0; } /* 2. Help panel. */ .home-board-help { display: flex; flex-direction: column; gap: 14px; } .home-board-heading { margin: 0; color: var(--text); font-family: var(--font-heading); font-size: calc(22px * var(--text-scale, 1)); line-height: 1.22; font-weight: 800; } .home-board-help .home-tile-card { width: 100%; } .home-board .home-help-line { display: flex; align-items: center; gap: 12px; width: 100%; padding: 2px; border: 0; background: none; box-shadow: none; text-align: left; cursor: pointer; } .home-board .home-mini-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 34px; height: 34px; border-radius: 999px; background: var(--northcue-circle-bg, #eef2e8); border: 1px solid var(--northcue-circle-border, rgba(37, 74, 47, 0.1)); } .home-board .home-mini-img { width: 60px; height: 60px; flex: 0 0 auto; object-fit: contain; } .home-board .home-help-line-text { font-size: calc(14px * var(--text-scale, 1)); line-height: 1.4; color: var(--muted); } .home-board .home-help-line-text strong { font-weight: 700; color: var(--theme-accent); } .home-board .home-help-line:hover .home-help-line-text strong { text-decoration: underline; } /* 3. Feedback + privacy, two items side by side. */ .home-board-connect { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .home-board-connect-item { min-height: 0; padding: 16px; } /* 4. Process panel — reused as-is; tighten the header gap to balance. */ /* In the full-height right column the panel content was vertically centred (justify-content: center on the base .home-process-panel), which floated the heading into the middle on top of the steps. Top-align it here so the heading and subtitle sit at the top like a normal panel heading, and let the four steps settle into the space below with room to breathe, so the tall tile stays balanced rather than empty. Scoped to the desktop board, so mobile and other panels keep the centred behaviour. */ .home-board .home-process-panel { justify-content: flex-start; } .home-board .process-orbit { margin-top: auto; margin-bottom: auto; } .home-board .home-process-panel > header { margin-bottom: 16px; } /* 5. Calm-cards preview. */ .home-board-cards { display: flex; flex-direction: column; gap: 14px; } .home-board-subline { margin: 4px 0 0; color: var(--muted); font-size: calc(14px * var(--text-scale, 1)); line-height: 1.4; } .home-board-cards-list { display: flex; flex-direction: column; gap: 10px; } /* Desktop cue-sample preview rows (the mobile rules are scoped to <=760px, so re-state the look here, scoped to the board). */ .home-board .cue-sample { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; padding: 14px 16px 14px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-shadow); overflow: hidden; } .home-board .cue-sample::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } .home-board .cue-sample-purple::before { background: #b9a8e0; } .home-board .cue-sample-cream::before { background: #e6c887; } .home-board .cue-sample-blue::before { background: #9cc0e6; } .home-board .home-welcome-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 48px; height: 48px; border-radius: 14px; background: var(--northcue-circle-bg, #eef2e8); border: 1px solid var(--northcue-circle-border, rgba(37, 74, 47, 0.1)); } .home-board .home-welcome-img { width: 104px; height: 104px; flex: 0 0 auto; object-fit: contain; } .home-board .cue-sample-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .home-board .cue-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .home-board .cue-sample-copy strong { font-family: var(--font-heading); font-size: calc(17px * var(--text-scale, 1)); font-weight: 700; color: var(--text); } .home-board .cue-sample-copy small { font-size: calc(14px * var(--text-scale, 1)); line-height: 1.4; color: var(--muted); } .home-board .cue-sample-dots { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .home-board .cue-sample-dots i { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--theme-accent) 24%, transparent); } .home-board .cue-sample-dots i.on { width: 16px; background: var(--theme-accent); } /* Focus mode on desktop home: collapse to the hero (the main upload action) centered, hide the secondary panels. Mirrors the old dashboard focus behaviour; #page-home keeps it above the generic focus-mode rules. */ body.focus-mode #page-home .home-board { grid-template-columns: minmax(0, 600px); justify-content: center; } body.focus-mode #page-home .home-board-col-right, body.focus-mode #page-home .home-board-help, body.focus-mode #page-home .home-board-connect { display: none; } } /* Mobile welcome intro, added at the top of the home page above the existing content. Hidden on desktop, shown only at 760px and below, so the desktop home page is unchanged. All styling here is namespaced and reuses the real primary button and the soft colour custom properties without modifying them. */ .home-welcome { display: none; } @media (max-width: 760px) { .home-welcome { display: flex; flex-direction: column; gap: 28px; margin-bottom: 30px; } /* 1. Welcome hero */ .home-welcome-hero { display: flex; flex-direction: column; text-align: center; gap: 12px; padding: 26px 22px 22px; border-radius: var(--radius); background: color-mix(in srgb, var(--theme-accent) 9%, var(--surface) 91%); border: 1px solid color-mix(in srgb, var(--theme-accent) 16%, transparent); } .home-welcome-title { margin: 0; font-family: var(--font-heading); font-size: 30px; line-height: 1.12; font-weight: 800; color: var(--text); } .home-welcome-sub { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); } .home-welcome-start { margin-top: 6px; width: 100%; } .home-welcome-privacy { margin: 4px 0 0; font-size: 13px; color: var(--muted); opacity: 0.85; } /* Shared section heading */ .home-welcome-heading { margin: 0 0 16px; font-family: var(--font-heading); font-size: 19px; font-weight: 800; color: var(--text); } /* Icon circle or tile, reusing the soft colour custom properties read only */ .home-welcome-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 48px; height: 48px; border-radius: 999px; background: var(--northcue-circle-bg, #eef2e8); border: 1px solid var(--northcue-circle-border, rgba(37, 74, 47, 0.1)); } /* The foreground PNGs carry a large baked transparent margin, so the glyph is only about half the canvas. Oversize the image well past the circle and let the circle crop the empty margin, exactly as the desktop icons do, so the glyph fills its circle and reads clearly. flex 0 0 auto stops the flex circle from shrinking the oversized image. */ .home-welcome-img { width: 104px; height: 104px; flex: 0 0 auto; object-fit: contain; } /* 2. How it works, four steps down a vertical dotted line */ .hiw-list { list-style: none; margin: 0; padding: 0; } .hiw-step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 14px; align-items: start; padding-bottom: 22px; } .hiw-step:last-child { padding-bottom: 0; } .hiw-step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px; border-left: 2px dotted color-mix(in srgb, var(--theme-accent) 42%, transparent); } .hiw-copy { display: flex; flex-direction: column; gap: 2px; padding-top: 3px; } .hiw-copy strong { font-family: var(--font-heading); font-size: 18px; font-weight: 700; color: var(--text); } .hiw-copy small { font-size: 14px; line-height: 1.45; color: var(--muted); } /* 3. The calm cards you get */ .home-welcome-cards { display: flex; flex-direction: column; gap: 14px; } /* A small quiet subline introducing the cue cards, sitting between the heading and the first card. The negative top margin nests it under the heading without changing the heading rule. */ .home-welcome-subline { margin: -20px 0 0; font-size: 13.5px; line-height: 1.4; font-weight: 400; color: var(--muted); } .cue-sample { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; gap: 14px; padding: 16px 16px 16px 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--soft-shadow); overflow: hidden; } .cue-sample::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; } .cue-sample-purple::before { background: #b9a8e0; } .cue-sample-cream::before { background: #e6c887; } .cue-sample-blue::before { background: #9cc0e6; } .home-welcome-tile { border-radius: 999px; } .cue-sample-copy { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .cue-sample-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .cue-sample-copy strong { font-family: var(--font-heading); font-size: 17px; font-weight: 700; color: var(--text); } .cue-sample-copy small { font-size: 14px; line-height: 1.4; color: var(--muted); } .cue-sample-dots { display: flex; align-items: center; gap: 5px; flex-shrink: 0; } .cue-sample-dots i { width: 6px; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--theme-accent) 24%, transparent); } .cue-sample-dots i.on { width: 16px; background: var(--theme-accent); } } /* Mobile only: the new welcome layout above now covers the intro and how it works, so hide the old Understand a document block and the duplicate How Northcue works section, and strip the panel box behind the remaining content so the heading and the four cards sit cleanly. Hidden, not deleted, so the desktop home above 760px still shows everything. */ @media (max-width: 760px) { .home-primary-card, .home-process-panel { display: none; } .home-action-panel { padding: 0; border: 0; background: none; box-shadow: none; } } /* Mobile only: the rebuilt lower home actions that replace the old four card grid. One clear overwhelmed card that opens the calm support directly, a quiet line to the full Help page, a separator, a quiet Give feedback row, and a light Private and secure link. Hidden on desktop, where the original card grid above is kept. Icons reuse existing PNGs in soft circles so they read in light and dark. */ .home-mobile-actions { display: none; } @media (max-width: 760px) { .home-card-grid { display: none; } .home-mobile-actions { display: flex; flex-direction: column; margin-top: 16px; } .home-mobile-actions .home-tile-card { width: 100%; } .home-mini-icon, .home-privacy-shield { flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; width: 34px; height: 34px; border-radius: 999px; background: var(--northcue-circle-bg, #eef2e8); border: 1px solid var(--northcue-circle-border, rgba(37, 74, 47, 0.1)); } .home-mini-img { width: 72px; height: 72px; flex: 0 0 auto; object-fit: contain; } .home-help-line { display: flex; align-items: center; gap: 12px; width: 100%; margin-top: 14px; padding: 4px 2px; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font-body); } .home-help-line-text { font-size: 14px; line-height: 1.4; color: var(--muted); } .home-help-line-text strong { font-weight: 700; color: var(--theme-accent); } .home-mobile-divider { width: 100%; height: 0; margin: 18px 0; border: 0; border-top: 1px solid var(--line); } .home-quiet-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 6px 2px; border: 0; background: none; text-align: left; cursor: pointer; font-family: var(--font-body); } .home-quiet-label { flex: 1 1 auto; font-size: 16px; font-weight: 700; color: var(--text); } .home-quiet-chevron { flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--muted); border-top: 2px solid var(--muted); transform: rotate(45deg); opacity: 0.65; } .home-privacy-link { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 18px; padding: 6px 2px; border: 0; background: none; cursor: pointer; font-family: var(--font-body); } .home-privacy-shield { width: 34px; height: 34px; } .home-privacy-shield .home-mini-img { width: 72px; height: 72px; } /* Bring the "I feel overwhelmed" bubble down from 62px to sit with the prominent icon tier (a touch bigger than the 48px illustration icons), and scale its image (~2.15x) so the glyph fills the smaller circle the same way. Desktop home board (>760px) keeps the 62px bubble. */ .home-icon-bubble { width: 52px; height: 52px; } .home-icon-bubble .northcue-main-icon { --northcue-icon-canvas: 112px; } .home-privacy-text { font-size: 13px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); } } /* Mobile only home text trims. Desktop keeps its current heading and copy. The heading swaps to a shorter line by hiding the full version and showing the compact one, so the desktop markup text is unchanged. */ .home-title-compact { display: none; } @media (max-width: 760px) { .home-welcome-privacy { display: none; } .home-dashboard-head p:not(.focus-helper) { display: none; } .home-title-full { display: none; } .home-title-compact { display: inline; } } /* Mobile only: harmonise the home typography onto one calm scale. Lexend for headings and titles, Atkinson for body and labels, two weights only. This sets font family, size, weight, and line height only. Colours, spacing, layout, and content are unchanged, and desktop above 760px is untouched. The overwhelmed card title and the feedback label are scoped so the shared tile class on the desktop grid is not affected. */ @media (max-width: 760px) { .home-welcome-title, .home-dashboard-head h1 { font-family: var(--font-heading); font-size: 30px; font-weight: 800; line-height: 1.15; } .home-welcome-heading { font-family: var(--font-heading); font-size: 19px; font-weight: 700; line-height: 1.3; } .hiw-copy strong, .cue-sample-copy strong, .home-mobile-actions .home-tile-card strong, .home-quiet-label { font-family: var(--font-heading); font-size: 17px; font-weight: 700; line-height: 1.3; } .hiw-copy small, .cue-sample-copy small, .home-mobile-actions .home-tile-card small, .home-help-line-text { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.45; } .home-help-line-text strong { font-weight: 700; } .home-welcome-subline, .home-privacy-text { font-family: var(--font-body); font-size: 13px; font-weight: 400; line-height: 1.45; } } .help-with-row, .support-strip, .upload-panel, .cue-card-panel, .completion-screen, .action-panel, .help-card, .help-simple-card, .help-support-strip { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--soft-shadow); } .help-with-row { display: grid; grid-template-columns: 1.25fr repeat(6, 1fr); align-items: center; min-height: 96px; margin: 0 18px 18px; overflow: hidden; } .help-with-row > * { display: flex; align-items: center; justify-content: center; gap: 14px; height: 100%; padding: 0 22px; border-left: 1px solid var(--line); font-size: 19px; font-weight: 700; } .help-with-row strong { justify-content: flex-start; border-left: 0; } .support-strip { display: grid; grid-template-columns: 1fr repeat(3, 1.15fr); gap: 0; align-items: center; min-height: 132px; margin: 0 18px; background: var(--surface); } .support-strip h2 { margin: 0; padding: 0 26px; border-right: 1px solid var(--theme-line-strong); font-size: 22px; line-height: 1.35; } .support-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 92px; padding: 0 18px; color: var(--text); background: transparent; text-align: left; } .support-item small { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; } .chevron { font-size: 30px; line-height: 1; } .journey-shell { width: min(1280px, 100%); margin: 0 auto; } .journey-shell > h1 { max-width: 760px; margin-bottom: 28px; font-size: clamp(44px, 5vw, 64px); } .journey-rail { display: grid; grid-template-columns: 170px 220px 150px 160px; align-items: center; gap: 78px; margin-bottom: 26px; } .rail-step { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-height: 58px; padding: 0 26px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; } .rail-step:not(:last-child)::after { content: ""; position: absolute; left: calc(100% + 10px); width: 58px; height: 2px; background: var(--theme-line-strong); } .rail-step.active { background: var(--theme-accent); color: var(--surface); } .rail-step[data-rail="understand"].active { background: var(--theme-accent); color: var(--surface); } .journey-page.upload-active .journey-shell { width: min(1120px, 100%); padding-top: 36px; text-align: center; } .journey-page.upload-active .journey-shell > h1 { max-width: none; margin: 0 0 10px; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.15; font-weight: 500; } .journey-upload-subtitle { margin: 0 auto 28px; color: var(--muted); font-size: clamp(19px, 2vw, 24px); font-weight: 600; } .journey-page.upload-active .journey-rail { display: none; } .upload-panel { max-width: 980px; margin: 0 auto; padding: 0; border: 0; background: transparent; box-shadow: none; } .dropzone { display: grid; place-items: center; gap: 10px; min-height: 230px; border: 1.5px dashed color-mix(in srgb, var(--theme-accent) 58%, var(--line) 42%); border-radius: 20px; background: color-mix(in srgb, var(--theme-blob-a) 36%, var(--surface) 64%); color: var(--text); text-align: center; cursor: pointer; transition: border-color 160ms ease, background 160ms ease, transform 160ms ease; } .dropzone:hover, .dropzone:focus-within { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-blob-a) 48%, var(--surface) 52%); } .upload-hero-icon { display: grid; place-items: center; width: 74px; height: 74px; --northcue-circle-border: rgba(37, 74, 47, 0.12); --northcue-circle-bg: color-mix(in srgb, var(--surface) 94%, #eef4e9 6%); --northcue-circle-shadow: 0 10px 20px rgba(17, 24, 39, 0.04), inset 0 0 0 7px rgba(238, 244, 233, 0.58); border: 1px solid var(--northcue-circle-border); border-radius: 999px; background: var(--northcue-circle-bg); box-shadow: var(--northcue-circle-shadow); } .upload-line-icon { width: 35px; height: 35px; fill: none; stroke: #536e48; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .dropzone:hover .upload-hero-icon, .dropzone:focus-within .upload-hero-icon { border-color: color-mix(in srgb, var(--theme-accent) 28%, var(--line) 72%); background: color-mix(in srgb, var(--surface) 90%, var(--theme-blob-a) 10%); box-shadow: 0 12px 24px rgba(17, 24, 39, 0.05), inset 0 0 0 7px color-mix(in srgb, var(--theme-blob-a) 44%, transparent); } .dropzone-title { font-size: clamp(24px, 2.7vw, 32px); font-weight: 800; line-height: 1.2; } .dropzone-title span { color: var(--theme-accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; } .dropzone-sub, .helper-line { display: block; color: var(--muted); font-size: 19px; font-weight: 600; } input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .document-type-row { margin-top: 22px; } .chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .chip, .more-type-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 126px; min-height: 56px; padding: 0 22px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 700; box-shadow: 0 10px 22px rgba(36, 48, 37, 0.04); } .chip.active, .more-type-button.active { border-color: var(--theme-accent); background: color-mix(in srgb, var(--theme-blob-a) 48%, var(--surface) 52%); } .chip-line-icon { width: 24px; height: 24px; fill: none; stroke: var(--theme-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .chip-line-icon circle { fill: var(--text); stroke: none; } .smart-icon { transform: translateY(1px); } .smart-icon path:nth-child(1) { stroke: #4f7f54; } .smart-icon path:nth-child(2), .smart-icon path:nth-child(3) { stroke: #7d7bd8; } .smart-icon path:nth-child(4), .smart-icon path:nth-child(5) { stroke: #d29b43; } .smart-icon path:nth-child(6), .smart-icon path:nth-child(7) { stroke: #d2766d; } .smart-icon path:nth-child(8), .smart-icon path:nth-child(9) { stroke: #6aaec4; } .bill-line-icon { stroke-width: 1.85; } .more-type-wrapper { position: relative; display: inline-flex; } .more-type-menu { position: absolute; z-index: 20; top: calc(100% + 10px); right: auto; left: calc(100% - 78px); bottom: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; width: 166px; min-width: 166px; max-width: calc(100vw - 32px); padding: 7px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 18px 42px rgba(17, 24, 39, 0.12); transform-origin: top left; } .more-type-menu.hidden { display: none; } .more-type-option { width: 100%; min-width: 0; min-height: 36px; justify-content: flex-start; padding: 0 8px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; font-size: 13.5px; font-weight: 700; } .more-type-option:hover, .more-type-option:focus-visible, .more-type-option.active { background: color-mix(in srgb, var(--theme-blob-a) 42%, var(--surface) 58%); outline: 0; } .ready-message { display: flex; align-items: center; gap: 14px; width: min(920px, 100%); min-height: 70px; margin: 20px auto 0; padding: 10px 18px; border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%); border-radius: 14px; background: color-mix(in srgb, var(--surface) 86%, var(--theme-blob-a) 14%); color: var(--text); text-align: left; } .ready-message.hidden { display: none; } .ready-message.error { background: #fff0e8; } .ready-check, .privacy-note-icon { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--northcue-circle-border, transparent); background: var(--northcue-circle-bg, var(--theme-accent)); color: #fffdfa; box-shadow: var(--northcue-circle-shadow, none); } .journey-icon-slot.ready-check, .journey-icon-slot.privacy-note-icon { width: 26px; height: 26px; border: 0; border-radius: 0; background: transparent; color: var(--theme-accent); overflow: visible; } .ready-check svg, .ready-remove svg, .privacy-note-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .ready-copy { display: grid; flex: 1; gap: 4px; } .ready-copy strong { font-size: 17px; } .ready-copy span { color: var(--muted); font-size: 16px; font-weight: 600; } .ready-remove { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--theme-accent); } .upload-actions { display: flex; justify-content: center; gap: 14px; margin-top: 16px; } .upload-actions .primary-btn { width: min(430px, 100%); min-height: 62px; justify-content: center; box-shadow: 0 14px 32px rgba(37, 74, 47, 0.18); } .upload-actions [hidden] { display: none !important; } .privacy-note { display: inline-grid; grid-template-columns: auto auto; align-items: center; gap: 14px; margin-top: 22px; text-align: left; } .privacy-note-icon { width: 54px; height: 54px; border: 1px solid var(--northcue-circle-border, color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%)); background: var(--northcue-circle-bg, color-mix(in srgb, var(--theme-blob-a) 52%, var(--surface) 48%)); color: var(--theme-accent); } .privacy-note strong, .privacy-note small { display: block; } .privacy-note strong { font-size: 17px; } .privacy-note small { margin-top: 4px; color: var(--muted); font-size: 14px; font-weight: 600; } /* Mobile only: simplified upload screen. A compact heading, a short warm line, a Choose a file button placed inside the existing label so the native file picker still fires, a small file types line, and a quiet privacy line that links to the privacy page. Desktop above 760px keeps the current screen, so the new elements are hidden here at the base. */ .journey-title-compact, .journey-upload-subtitle-mobile, .dropzone-choose, .privacy-line-mobile { display: none; } @media (max-width: 760px) { .journey-title-full { display: none; } .journey-title-compact { display: inline; } .journey-upload-subtitle { display: none; } .journey-upload-subtitle-mobile { display: block; margin: 0 0 22px; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--muted); } .dropzone-title { display: none; } .dropzone-choose { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 11px 24px; border: 1.5px solid var(--green); border-radius: 12px; background: var(--surface); color: var(--green); font-family: var(--font-heading); font-size: 16px; font-weight: 700; } .dropzone-sub { font-size: 13px; font-weight: 400; } .privacy-note { display: none; } .privacy-line-mobile { display: block; width: 100%; margin: 14px 0 0; padding: 0; border: 0; background: none; color: var(--muted); font-family: var(--font-body); font-size: 13px; line-height: 1.45; text-align: center; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); cursor: pointer; } } /* ── Two-state upload flow ────────────────────────────────── */ /* Dropzone wrapper: animates to zero height when a file is added */ .dropzone-wrapper { overflow: hidden; max-height: 400px; opacity: 1; transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease; } @media (prefers-reduced-motion: reduce) { .dropzone-wrapper { transition: none; } } /* State 1 (no file): hide type chips, understand button, type confirm */ #upload-form:not(.file-added) .document-type-row, #upload-form:not(.file-added) .upload-actions, #upload-form:not(.file-added) .type-confirm { display: none; } /* State 2 (file added): collapse dropzone, show type confirm */ #upload-form.file-added .dropzone-wrapper { max-height: 0; opacity: 0; pointer-events: none; } #upload-form.file-added .type-confirm { display: flex; } /* Type pills hidden by default in State 2; revealed on demand */ #upload-form.file-added .document-type-row { display: none; } #upload-form.file-added .document-type-row.type-pills-visible { display: block; margin-top: 14px; } /* Type confirm row */ .type-confirm { display: none; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; } .type-confirm-text { color: var(--text); font-size: 17px; font-weight: 700; } .change-type-btn { background: none; border: none; padding: 0; color: var(--muted); font-size: 13px; font-weight: 400; cursor: pointer; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .change-type-btn:hover { color: var(--text); } /* Replace button: text pill instead of icon button */ #upload-form.file-added .ready-remove { width: auto; height: auto; padding: 5px 14px; font-size: 14px; font-weight: 700; border: 1px solid color-mix(in srgb, var(--theme-accent) 30%, var(--line) 70%); border-radius: 999px; } /* Dark mode: type confirm muted text */ body.theme-dark .change-type-btn { color: var(--muted); } .reading-hint { margin: 6px auto 0; color: var(--muted); font-size: 15px; text-align: center; } /* ── end two-state ────────────────────────────────────────── */ .journey-page.upload-active .results-head, .journey-page.upload-active .journey-main, .journey-page.upload-active .progress-and-note, .journey-page.upload-active .achievement { display: none; } .journey-page:not(.upload-active) .upload-panel { display: none; } .journey-page:not(.upload-active) .journey-shell > h1 { display: none; } .journey-page:not(.upload-active) .journey-upload-subtitle, .journey-page:not(.upload-active) .journey-upload-subtitle-mobile { display: none; } .journey-page:not(.upload-active) .journey-rail { display: none; } .journey-page:not(.upload-active) .journey-shell { width: min(1180px, 100%); } .results-head { display: flex; align-items: center; gap: 16px; margin: 0 0 10px; } .results-head-icon { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--theme-accent) 16%, var(--line) 84%); border-radius: 999px; background: color-mix(in srgb, var(--theme-blob-a) 48%, var(--surface) 52%); color: var(--theme-accent); } .results-head-icon svg, .cue-logo svg, .style-pill svg, .action-icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.95; stroke-linecap: round; stroke-linejoin: round; } .results-head h1 { margin: 0; font-size: 15px; font-weight: 600; line-height: 1; color: var(--muted); } .results-head p:not(.focus-helper) { display: none; } .results-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; } .journey-main { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 20px; align-items: start; } .result-card-stack { min-width: 0; } .cue-card-panel { display: flex; flex-direction: column; min-height: 380px; padding: 20px 24px 18px; background: var(--surface); } .card-top, .card-top-left { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .card-progress { margin: 0; font-size: 17px; font-weight: 800; } .style-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; } .style-pill svg { width: 20px; height: 20px; color: var(--theme-accent); } .focus-card-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); font-size: 15px; font-weight: 800; } .focus-card-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; color: var(--theme-accent); } .focus-card-toggle.active { border-color: color-mix(in srgb, var(--theme-accent) 38%, var(--line) 62%); background: color-mix(in srgb, var(--theme-blob-a) 38%, var(--surface) 62%); color: var(--theme-accent); } .card-divider { height: 1px; margin: 10px 0 12px; background: var(--line); } .cue-card-content { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .cue-logo { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 8px; border: 1px solid var(--northcue-circle-border, transparent); border-radius: 999px; background: var(--northcue-circle-bg, transparent); color: var(--theme-accent); box-shadow: var(--northcue-circle-shadow, none); } .cue-logo .northcue-cue-icon { --northcue-icon-canvas: 80px; } .cue-card-panel h2 { margin: 0; text-align: center; color: var(--muted); font-family: var(--font-body); font-size: 16px; font-weight: 800; line-height: 1.1; } .answer-rule { width: min(620px, 80%); height: 1px; margin: 22px auto; background: var(--theme-line-strong); } .card-answer { max-width: 640px; min-height: 0; margin: 8px auto 0; text-align: center; color: var(--text); font-family: var(--font-heading); font-size: clamp(16px, 2vw, 24px); font-weight: 800; line-height: 1.2; } .card-explanation { max-width: 620px; margin: 6px auto 0; color: var(--muted); font-size: 15px; font-weight: 600; line-height: 1.38; } .micro-feedback { width: fit-content; max-width: 100%; min-height: 20px; margin: 2px auto 0; padding: 6px 16px; border: 1px solid color-mix(in srgb, var(--theme-accent) 16%, var(--line) 84%); border-radius: 999px; background: color-mix(in srgb, var(--theme-blob-a) 42%, var(--surface) 58%); color: var(--theme-accent); text-align: center; font-size: 14px; font-weight: 700; line-height: 1.35; } body.theme-dark .micro-feedback { border-color: color-mix(in srgb, var(--sage-strong) 28%, var(--line) 72%); background: color-mix(in srgb, var(--sage-strong) 14%, var(--surface) 86%); color: var(--sage-strong); } .card-steps { display: grid; gap: 6px; width: min(620px, 100%); margin: 8px auto 0; padding: 0; color: #3e4858; list-style-position: inside; font-weight: 700; text-align: left; } /* The Simple view / Show full details toggle. Hidden by default; revealed in BOTH the desktop (min-width: 761px) and mobile (max-width: 760px) blocks below — the base rule keeps it out only on any width neither block covers. */ .detail-toggle { display: none; } /* ── Desktop-only cue-card presentation (≥761px) ─────────────────────────── Everything here is scoped above the 760px mobile breakpoint so the phone layout stays byte-for-byte identical. Two jobs: 1. Stronger hierarchy in full view — the headline leads; subtitle and bullets stay present but calm and clearly secondary. 2. Simple view — hide the subtitle and bullets, leaving label + headline. */ @media (min-width: 761px) { .detail-toggle { display: inline-flex; } /* Headline becomes the clear hero a stressed eye lands on first. The medium default is unchanged; it scales with the same text-size control as mobile via the body text-small / text-large classes, so the control is consistent across desktop and mobile. Stays responsive (clamp) so it still grows on wide monitors. */ .card-answer { margin-top: 14px; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.25; letter-spacing: -0.01em; } body.text-small .card-answer { font-size: clamp(22px, 2vw, 29px); } /* Large, and dyslexia mode (maximum readability), take the larger headline. */ body.text-large .card-answer, body.dyslexia-mode .card-answer { font-size: clamp(30px, 2.8vw, 39px); } /* Label reads as a quiet kicker above the headline, clearly subordinate. */ .cue-card-panel h2 { font-size: 15px; letter-spacing: 0.04em; } /* Subtitle stays visible but calmer, with more breathing room. */ .card-explanation { margin-top: 14px; font-size: 15.5px; font-weight: 500; line-height: 1.5; } /* Detail bullets present but quiet: lighter weight, more spacing. */ .card-steps { margin-top: 16px; gap: 9px; font-weight: 600; line-height: 1.5; } /* Simple view: headline only. Detail remains in the DOM for full view. */ body.cards-simple .card-explanation, body.cards-simple .card-steps { display: none; } } .card-nav { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 12px; } .action-panel { padding: 16px; background: var(--surface); } .action-panel h2 { margin-bottom: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); } .action-grid { display: grid; gap: 8px; } .action-btn { display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 600; text-align: left; } .action-btn:hover { border-color: color-mix(in srgb, var(--theme-accent) 24%, var(--line) 76%); background: color-mix(in srgb, var(--theme-blob-a) 16%, var(--surface) 84%); } .action-icon { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: 0 0 auto; overflow: hidden; border: 1px solid var(--northcue-circle-border, transparent); border-radius: 999px; background: var(--northcue-circle-bg, transparent); box-shadow: var(--northcue-circle-shadow, none); } .action-icon .northcue-action-icon { --northcue-icon-canvas: 80px; } .action-copy { color: var(--theme-accent); } .action-icon svg { width: 32px; height: 32px; stroke-width: 2; } .action-message { min-height: 18px; margin-top: 10px; color: var(--green); font-weight: 700; } .action-message:empty { display: none; min-height: 0; margin-top: 0; } .progress-and-note { display: flex; align-items: center; justify-content: center; gap: 44px; margin: 24px 0; color: var(--muted); font-weight: 700; } .progress-dots { display: flex; align-items: center; gap: 12px; } .progress-dot { width: 13px; height: 13px; border-radius: 999px; background: #e4e2dc; } .progress-dot:has(.northcue-progress-icon) { display: grid; place-items: center; width: 13px; height: 13px; overflow: visible; background: transparent; } .progress-dot.active { background: var(--theme-accent); } .progress-dot.active:has(.northcue-progress-icon) { background: transparent; } .achievement { display: flex; align-items: center; gap: 20px; min-height: 70px; padding: 0 28px; border: 1px solid #cdddc4; border-radius: 14px; background: linear-gradient(90deg, color-mix(in srgb, var(--theme-blob-a) 34%, var(--surface) 66%), var(--surface)); } .short-feedback-panel { display: grid; gap: 14px; margin-top: 18px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--soft-shadow); } .short-feedback-panel h2, .short-feedback-panel h3 { margin: 0; font-size: 24px; } .feedback-rating-row { display: flex; flex-wrap: wrap; gap: 12px; } .feedback-rating-btn { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 800; } .background-style-choice { display: grid; place-items: center; justify-items: center; gap: 10px; min-height: 142px; padding: 0; border: 0; border-radius: 18px; background: transparent; color: var(--text); font-weight: 800; text-align: center; } .background-style-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: start; } .feedback-rating-btn.selected { border: 2px solid var(--green); background: #f1f8ed; } .feedback-rating-btn.selected::after { content: " \2713"; } .after-card-feedback { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 18px auto 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--soft-shadow); } .after-card-feedback.hidden { display: none; } .after-card-feedback h2, .after-card-feedback p { margin: 0; } .after-card-feedback h2 { font-size: 22px; line-height: 1.2; } .after-card-feedback p { margin-top: 4px; color: var(--muted); } .after-card-feedback .primary-btn { min-width: 160px; } @media (max-width: 700px) { .after-card-feedback { align-items: stretch; flex-direction: column; } .after-card-feedback .primary-btn { width: 100%; } } /* ── Completion screen ───────────────────────────────── */ .completion-screen { display: flex; flex-direction: column; align-items: center; padding: 40px 32px 36px; text-align: center; gap: 0; } .completion-circle { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 999px; margin-bottom: 24px; flex-shrink: 0; background: var(--northcue-circle-bg, #eaf2e5); border: 1px solid var(--northcue-circle-border, rgba(47, 91, 53, 0.16)); box-shadow: var(--northcue-circle-shadow, 0 1px 4px rgba(23, 25, 35, 0.07)); } .completion-circle svg { width: 28px; height: 28px; stroke: var(--brand-dark, #063415); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } .completion-headline { margin: 0 0 12px; font-size: 26px; font-weight: 700; line-height: 1.2; color: var(--text); } .completion-body { margin: 0 0 28px; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 360px; } .completion-calendar-btn { width: 100%; max-width: 340px; margin-bottom: 20px; } .completion-secondary { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; } .completion-text-link { background: none; border: none; padding: 0; font-size: 15px; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--font-body); } .completion-text-link:hover { color: var(--text); } .completion-divider { color: var(--muted); font-size: 13px; opacity: 0.5; user-select: none; } .completion-feedback-link { background: none; border: none; padding: 0; font-size: 13px; color: var(--muted); opacity: 0.65; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; font-family: var(--font-body); } .completion-feedback-link:hover { opacity: 1; } @media (max-width: 700px) { .completion-screen { padding: 32px 20px 28px; } .completion-headline { font-size: 22px; } .completion-body { font-size: 15px; } /* Give the quiet secondary links a comfortable touch area on mobile. They stay inline and centred because the secondary row centres on the cross axis, and the underline and copy are unchanged. */ .completion-text-link { padding: 12px 10px; } .completion-feedback-link { padding: 11px 10px; } } @media (prefers-reduced-motion: reduce) { .completion-screen * { animation: none !important; transition: none !important; } } .journey-main.is-complete .action-panel { opacity: 0.4; transition: opacity 0.2s ease; } .background-preview { position: relative; display: block; width: 82px; height: 106px; border: 1px solid var(--theme-line-strong); border-radius: 14px; color: var(--theme-accent); background: linear-gradient(180deg, color-mix(in srgb, var(--theme-top) 28%, var(--surface) 72%), color-mix(in srgb, var(--theme-bottom) 28%, var(--surface) 72%)); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: var(--soft-shadow); } /* Inline SVG preview motif. It uses currentColor, set above to the theme accent, so the strokes are dark green on light themes and soft green in dark, with no JavaScript. The motif stays central so the rounded corners and the selected tick are never covered. */ .background-preview-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .background-style-choice[data-background-style="plain"] .background-preview { background: radial-gradient(circle at 26% 26%, color-mix(in srgb, var(--theme-top) 34%, transparent), transparent 25%), radial-gradient(circle at 76% 76%, color-mix(in srgb, var(--theme-bottom) 42%, transparent), transparent 28%), linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--theme-bottom) 18%, var(--surface) 82%)); } .background-style-choice.selected { color: var(--theme-accent); } .background-style-choice.selected .background-preview { border: 2px solid var(--green); box-shadow: 0 0 0 5px color-mix(in srgb, var(--theme-blob-a) 45%, transparent), var(--soft-shadow); } .background-style-choice.selected .background-preview::after { content: "\2713"; position: absolute; right: 6px; top: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--surface); color: var(--theme-accent); border: 1px solid var(--theme-line-strong); font-size: 14px; font-weight: 900; } .optional-contact { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .optional-contact p, .optional-contact small, .feedback-saved-message { margin: 0; color: var(--muted); } .feedback-contact-input { min-height: 52px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); padding: 0 14px; } .short-feedback-comment { min-height: 76px; } .help-layout, .comfort-layout { width: min(1280px, 100%); margin: 0 auto; } .help-head { margin-left: 44px; } .eyebrow { margin-bottom: 12px; color: var(--sage-strong); font-weight: 800; } .help-head h1 { max-width: 680px; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; } .help-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; margin: 16px 44px 14px; } .help-card { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; min-height: 80px; padding: 0 20px 0 16px; color: var(--text); text-align: left; font-size: 17px; line-height: 1.25; } .help-card strong { max-width: 420px; } .help-card-arrow { color: var(--text); font-size: 24px; font-weight: 500; line-height: 1; } .help-icon-bubble { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--northcue-circle-border, var(--line)); border-radius: 999px; background: var(--northcue-circle-bg, #eef4ea); color: var(--sage-strong); box-shadow: var(--northcue-circle-shadow, none); } .help-card .help-icon-bubble { --northcue-circle-border: rgba(47, 91, 53, 0.12); --northcue-circle-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2); } .help-icon-bubble.lavender { --northcue-circle-bg: #f0ecfb; color: #56516f; } .help-icon-bubble.blue { --northcue-circle-bg: #edf4fb; color: #48617c; } .help-icon-bubble.cream { --northcue-circle-bg: #fbf1dc; color: #725d34; } .help-line-icon { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; } .help-support-strip { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; min-height: 92px; margin: 0 44px; padding: 0 42px; background: rgba(246, 244, 255, 0.85); color: #56516f; } .soft-purple-btn { min-height: 50px; border-radius: 999px; background: #ddd6f7; color: #5b548a; box-shadow: none; } .help-simple-sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin: 0 44px 18px; } .help-simple-card { padding: 24px 28px; } .help-simple-card h2 { margin-bottom: 8px; font-size: 24px; } .help-simple-card p { margin: 0 0 18px; color: var(--muted); font-size: 17px; font-weight: 650; line-height: 1.45; } .help-simple-card .soft-purple-btn { min-height: 46px; padding-inline: 18px; } .help-safety-note { display: flex; align-items: center; gap: 8px; margin: 0 44px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--muted); font-size: 16px; font-weight: 700; line-height: 1.45; } .help-safety-icon { flex-shrink: 0; } /* ── Help page tiers ─────────────────────────────────── */ .help-tier-label { margin: 24px 44px 12px; font-size: 11px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); } .help-support-tier { margin: 0 44px 22px; padding: 20px 20px 22px; border: 1px solid color-mix(in srgb, var(--lavender) 28%, transparent); border-radius: var(--radius); background: color-mix(in srgb, var(--lavender) 7%, var(--surface) 93%); } .help-support-tier .help-tier-label { margin: 0 0 12px; } .help-support-tier .help-cards { margin: 0 0 16px; } .help-contact-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 24px; } .help-contact-card-body h3 { margin: 0 0 4px; font-size: 18px; font-weight: 700; } .help-contact-card-body p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 650; line-height: 1.45; } .help-contact-card .soft-purple-btn { flex-shrink: 0; min-height: 46px; padding-inline: 18px; white-space: nowrap; } /* ── Feedback contact option (step 1 footer) ─────────── */ .feedback-contact-option { margin-top: 4px; } .feedback-or-text { margin: 0 0 10px; font-size: 14px; color: var(--muted); font-weight: 650; } .feedback-contact-btn { width: 100%; min-height: 46px; } .comfort-head { display: grid; gap: 8px; margin: 4px 8px 22px; } .comfort-eyebrow { width: fit-content; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%); border-radius: 999px; background: color-mix(in srgb, var(--theme-blob-a) 32%, var(--surface) 68%); color: var(--theme-accent); font-weight: 800; } .comfort-head h1 { max-width: 760px; font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; } .comfort-head p { max-width: 920px; color: var(--muted); font-size: 16px; } .comfort-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; } .comfort-grid.visual-only { grid-template-columns: minmax(0, 1fr); } .comfort-settings-stack { display: flex; flex-direction: column; margin: 4px 8px 24px; } .settings-panel { padding: 16px 26px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--soft-shadow); } .settings-panel .settings-section:first-of-type { padding-top: 4px; } .feedback-panel > p, .settings-section > p { margin-bottom: 14px; font-weight: 700; } .feeling-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 18px; } .feeling-btn { display: grid; place-items: center; gap: 8px; min-height: 98px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); font-weight: 700; } .feeling-btn span { font-size: 32px; line-height: 1; } .feeling-btn.selected { border: 2px solid var(--green); color: var(--green); } .feedback-label { display: block; margin: 12px 0 8px; font-weight: 700; } textarea { width: 100%; min-height: 94px; resize: vertical; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); padding: 16px; } .char-count { display: block; margin-top: -30px; margin-right: 18px; text-align: right; color: var(--muted); font-size: 14px; } .full-btn { width: 100%; margin-top: 20px; } .thanks-line, .saved-on-device { margin: 12px 0 0; text-align: center; color: var(--muted); font-size: 15px; } .settings-section { padding: 20px 0; border-bottom: 1px solid var(--line); } .comfort-settings-stack .settings-section:last-of-type { border-bottom: none; padding-bottom: 0; } .colour-style-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .colour-style { display: grid; place-items: center; gap: 10px; min-height: 148px; padding: 10px 8px; border: 1px solid transparent; border-radius: 18px; background: transparent; color: var(--text); font-size: 15px; font-weight: 800; } .swatch { --swatch-top: #ece8fb; --swatch-bottom: #fffdf8; width: 82px; height: 106px; overflow: hidden; border: 0; border-radius: 14px; background: linear-gradient( 180deg, var(--swatch-top) 0%, var(--swatch-top) 50%, var(--swatch-bottom) 50%, var(--swatch-bottom) 100% ); box-shadow: none; } .colour-style.selected .swatch { box-shadow: 0 0 0 2px var(--green); } .colour-style.selected { color: var(--theme-accent); background: color-mix(in srgb, var(--theme-blob-a) 28%, transparent); } .lavender-swatch { --swatch-top: #cbc3eb; --swatch-bottom: #f9dcd6; } .cream-swatch { --swatch-top: #ffe0a8; --swatch-bottom: #fff4df; } .sage-swatch { --swatch-top: #dce7d2; --swatch-bottom: #f4f4dd; } .classic-swatch { --swatch-top: #e7ebf2; --swatch-bottom: #566277; } .segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .text-size-btn { display: flex; align-items: center; justify-content: center; gap: 14px; min-height: 48px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font-weight: 800; } .text-size-btn.selected, .card-style-choice.selected { border: 2px solid var(--green); } .card-style-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .card-style-choice { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; min-height: 92px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-align: left; } .card-style-choice span { grid-row: span 2; width: 58px; height: 58px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--theme-blob-a) 46%, var(--surface) 54%), var(--surface)); } .card-style-choice[data-card-style-choice="standard"] span { border-radius: 4px; background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--theme-bottom) 16%, var(--surface) 84%)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--theme-accent) 18%, transparent), inset 0 -14px 0 color-mix(in srgb, var(--theme-line-strong) 26%, transparent); } .card-style-choice small { color: var(--muted); } /* Reading card style: Soft rounded is gentle; Standard is intentionally sharper. */ body.card-standard .home-action-panel, body.card-standard .home-process-panel, body.card-standard .home-primary-card, body.card-standard .home-tile-card, body.card-standard .upload-panel, body.card-standard .dropzone, body.card-standard .ready-message, body.card-standard .cue-card-panel, body.card-standard .completion-screen, body.card-standard .action-panel, body.card-standard .action-btn, body.card-standard .achievement, body.card-standard .short-feedback-panel, body.card-standard .optional-contact, body.card-standard .help-card, body.card-standard .help-simple-card, body.card-standard .help-support-strip, body.card-standard .help-support-tier, body.card-standard .help-safety-note, body.card-standard .settings-panel, body.card-standard .feedback-contact-input, body.card-standard textarea, body.card-standard .modal-box { border-radius: 6px; } body.card-standard .chip, body.card-standard .more-type-button, body.card-standard .more-type-menu, body.card-standard .more-type-option, body.card-standard .style-pill, body.card-standard .focus-card-toggle, body.card-standard .text-size-btn, body.card-standard .card-style-choice, body.card-standard .feedback-rating-btn, body.card-standard .back-home-btn, body.card-standard .comfort-eyebrow { border-radius: 5px; } body.card-standard .background-preview, body.card-standard .swatch, body.card-standard .colour-style, body.card-standard .background-style-choice, body.card-standard .feeling-btn { border-radius: 6px; } body.card-standard .home-primary-card, body.card-standard .home-tile-card, body.card-standard .cue-card-panel, body.card-standard .completion-screen, body.card-standard .action-panel, body.card-standard .help-card, body.card-standard .help-simple-card, body.card-standard .dropzone, body.card-standard .ready-message { border-color: color-mix(in srgb, var(--theme-accent) 26%, var(--line) 74%); box-shadow: 0 8px 18px rgba(17, 24, 39, 0.045); } .circle-icon, .small-icon, .help-icon, .button-icon { position: relative; display: inline-grid; place-items: center; flex: 0 0 auto; } .circle-icon, .help-icon { width: 56px; height: 56px; border-radius: 999px; background: var(--sage); } .support-strip .circle-icon { width: 50px; height: 50px; } .help-icon { width: 86px; height: 86px; } .small-icon, .button-icon { width: 26px; height: 26px; } .cloud-icon::before, .cloud-icon::after { content: ""; position: absolute; border: 2px solid currentColor; } .cloud-icon::before { left: 50%; top: 48%; width: 28px; height: 16px; border-top-left-radius: 16px; border-top-right-radius: 16px; border-bottom: 0; transform: translate(-50%, -50%); } .cloud-icon::after { left: 50%; top: 48%; width: 2px; height: 22px; border: 0; background: currentColor; box-shadow: 0 -8px 0 -1px currentColor; transform: translateX(-50%); } .brain-icon::before { content: ""; width: 26px; height: 26px; border: 2px solid currentColor; border-radius: 45% 55% 45% 55%; } .check-icon::before { content: ""; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 999px; } .check-icon::after { content: ""; position: absolute; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } .search-icon::before { content: ""; width: 22px; height: 22px; border: 2px solid currentColor; border-radius: 999px; } .search-icon::after { content: ""; position: absolute; width: 11px; height: 2px; right: 0; bottom: 2px; background: currentColor; transform: rotate(45deg); } .mail-icon::before, .receipt-icon::before, .work-icon::before, .article-icon::before, .note-icon::before, .copy-icon::before { content: ""; width: 24px; height: 18px; border: 2px solid currentColor; border-radius: 2px; } .medical-icon::before { content: "+"; font-size: 28px; font-weight: 800; } .school-icon::before { content: ""; width: 24px; height: 16px; border: 2px solid currentColor; transform: skewX(-12deg); } .home-icon::before { content: ""; width: 22px; height: 18px; border: 2px solid currentColor; border-top: 0; } .legal-icon::before { content: ""; width: 26px; height: 22px; border-left: 2px solid currentColor; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; } .email-icon::before { content: "@"; font-size: 28px; font-weight: 800; } .dots-icon::before { content: "..."; font-weight: 800; } .heart-icon::before { content: "\2661"; font-size: 36px; } .shield-icon::before { content: ""; width: 28px; height: 34px; border: 2px solid currentColor; clip-path: polygon(50% 0, 100% 18%, 88% 76%, 50% 100%, 12% 76%, 0 18%); } .bell-icon::before { content: ""; width: 24px; height: 26px; border: 2px solid currentColor; border-radius: 14px 14px 6px 6px; } .calendar-icon::before { content: ""; width: 26px; height: 28px; border: 2px solid currentColor; border-radius: 4px; } .clock-icon::before { content: ""; width: 32px; height: 32px; border: 2px solid currentColor; border-radius: 999px; } .people-icon::before { content: ""; width: 34px; height: 24px; border: 2px solid currentColor; border-radius: 16px 16px 4px 4px; } .overwhelmed-icon::before { content: ""; width: 42px; height: 42px; border: 2px solid currentColor; border-radius: 45% 55% 52% 48%; box-shadow: inset 8px 0 0 transparent; } .info-icon::before { content: "i"; font-weight: 800; } .sparkle-icon::before { content: ""; width: 18px; height: 18px; background: currentColor; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .card-icon-small::before, .custom-icon::before, .settings-icon::before, .feedback-icon::before, .sound-small::before { content: ""; width: 24px; height: 24px; border: 2px solid currentColor; border-radius: 4px; } body.theme-dark .topbar, body.theme-dark .help-with-row, body.theme-dark .support-strip, body.theme-dark .upload-panel, body.theme-dark .cue-card-panel, body.theme-dark .completion-screen, body.theme-dark .action-panel, body.theme-dark .help-card, body.theme-dark .help-simple-card, body.theme-dark .help-safety-note, body.theme-dark .help-support-strip, body.theme-dark .short-feedback-panel, body.theme-dark .settings-panel, body.theme-dark .modal-box { background: #1c2529; } body.theme-dark .mode-btn, body.theme-dark .top-link, body.theme-dark .outline-btn, body.theme-dark .style-pill, body.theme-dark .chip, body.theme-dark .more-type-button, body.theme-dark .more-type-menu, body.theme-dark .rail-step, body.theme-dark .action-btn, body.theme-dark .back-home-btn, body.theme-dark .text-size-btn, body.theme-dark .card-style-choice, body.theme-dark .background-style-choice, body.theme-dark .feedback-rating-btn, body.theme-dark .feedback-contact-input, body.theme-dark textarea, body.theme-dark .modal-close { background: #253136; color: var(--text); } body.theme-dark .top-link.active, body.theme-dark .mode-btn.active, body.theme-dark .mode-btn[aria-pressed="true"], body.theme-dark .chip.active, body.theme-dark .more-type-button.active, body.theme-dark .colour-style.selected .swatch, body.theme-dark .background-style-choice.selected, body.theme-dark .feedback-rating-btn.selected, body.theme-dark .text-size-btn.selected, body.theme-dark .card-style-choice.selected { border-color: var(--green); background: rgba(45, 59, 49, 0.92); } body.theme-dark .top-mode-icon { border-color: rgba(184, 198, 177, 0.24); background: #304037; color: var(--theme-accent); } body.theme-dark .text-mode-icon { color: var(--text); } body.theme-dark .theme-switch { background: #253136; border-color: rgba(184, 198, 177, 0.24); } body.theme-dark .theme-seg { background: #304037; color: var(--theme-accent); } body.theme-dark .theme-seg.active { background: var(--green); } body.theme-dark .background-style-choice, body.theme-dark .background-style-choice.selected { background: transparent; } body.theme-dark .home-map { background: radial-gradient(circle at 22% 80%, color-mix(in srgb, var(--theme-blob-a) 48%, transparent), transparent 18%), radial-gradient(circle at 84% 18%, color-mix(in srgb, var(--theme-blob-b) 40%, transparent), transparent 16%), radial-gradient(circle at 86% 78%, color-mix(in srgb, var(--theme-blob-c) 36%, transparent), transparent 14%), linear-gradient(135deg, #232b35 0%, #2a3144 100%); } body.theme-dark .map-stop, body.theme-dark .dropzone, body.theme-dark .ready-message, body.theme-dark .achievement, body.theme-dark .check-grid p { background: #253136; color: var(--text); } body.theme-dark .lead, body.theme-dark .landing-copy, body.theme-dark .landing-brand, body.theme-dark .reassure, body.theme-dark .dropzone-sub, body.theme-dark .helper-line, body.theme-dark .document-type-row p span, body.theme-dark .support-item small, body.theme-dark .card-steps, body.theme-dark .progress-and-note, body.theme-dark .modal-box p, body.theme-dark .thanks-line, body.theme-dark .saved-on-device, body.theme-dark .card-style-choice small { color: var(--muted); } body.theme-dark .emoji-icon { border-color: rgba(182, 210, 173, 0.24); background: #2f4035; } body.theme-dark .help-card .help-icon-bubble { --northcue-circle-border: rgba(214, 226, 202, 0.16); --northcue-circle-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), 0 8px 18px rgba(0, 0, 0, 0.12); } body.theme-dark .upload-hero-icon { --northcue-circle-border: rgba(214, 226, 202, 0.2); --northcue-circle-bg: rgba(248, 247, 241, 0.96); --northcue-circle-shadow: 0 12px 24px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(20, 28, 24, 0.06); } body.focus-mode .upload-hero-icon { --northcue-circle-border: rgba(47, 91, 53, 0.14); --northcue-circle-bg: rgba(255, 255, 255, 0.96); --northcue-circle-shadow: 0 10px 22px rgba(31, 41, 55, 0.06), inset 0 0 0 1px rgba(237, 244, 232, 0.82); } body.theme-dark .journey-icon-slot.emoji-icon { border-color: transparent; background: transparent; box-shadow: none; } body.theme-dark .landing-start-btn { color: #fff; } body.theme-dark .landing-paper, body.theme-dark .landing-cue-preview { background: rgba(253, 252, 246, 0.9); color: #111827; } .hidden { display: none !important; } .modal { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 24px; background: rgba(17, 24, 33, 0.35); } .modal-box { width: min(620px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow); padding: 26px; } .modal-close { float: right; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-soft); color: var(--text); font-weight: 700; } .modal-box h2 { margin-right: 80px; font-size: 30px; } .modal-box p { color: #3e4858; font-weight: 700; } .feedback-modal .modal-box { width: min(640px, 100%); max-height: min(720px, calc(100vh - 48px)); padding: 24px; border-radius: 18px; background: var(--surface); } .feedback-modal .modal-close { min-height: 42px; padding: 0 16px; border-radius: 10px; background: var(--surface-soft); font-weight: 800; } .feedback-modal .modal-box h2 { display: flex; align-items: center; gap: 16px; margin: 0 82px 8px 0; font-size: 28px; line-height: 1.15; } .feedback-modal .modal-box h2::before { content: ""; flex: 0 0 54px; width: 54px; height: 54px; border: 1px solid var(--line); border-radius: 50%; background-color: color-mix(in srgb, var(--theme-blob-a) 36%, var(--surface) 64%); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235a7253' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8.5h14v10H13l-4 4v-4H9z'/%3E%3Cpath d='M13 12h6'/%3E%3Cpath d='M13 15.5h4'/%3E%3C/svg%3E"); background-position: center; background-repeat: no-repeat; background-size: 34px; } body.theme-dark .feedback-modal .modal-box h2::before { background-color: color-mix(in srgb, var(--theme-accent) 16%, var(--surface) 84%); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23b6d2ad' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 8.5h14v10H13l-4 4v-4H9z'/%3E%3Cpath d='M13 12h6'/%3E%3Cpath d='M13 15.5h4'/%3E%3C/svg%3E"); } .feedback-flow { display: grid; gap: 16px; } .feedback-intro { margin: -10px 82px 18px 70px; color: var(--muted); font-size: 15px; font-weight: 700; } .feedback-rule { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--line); } .feedback-question { display: grid; gap: 4px; } .feedback-question h3 { margin: 0; font-size: 22px; line-height: 1.2; } .feedback-question p { margin: 0; color: var(--muted); font-size: 15px; font-weight: 600; } .feedback-choice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .feedback-choice-card { display: grid; justify-items: center; gap: 8px; min-height: 150px; padding: 18px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--text); text-align: center; transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } .feedback-choice-card:hover, .feedback-choice-card:focus-visible { border-color: var(--theme-line-strong); box-shadow: var(--soft-shadow); transform: translateY(-1px); } .feedback-choice-card strong { font-size: 20px; } .feedback-choice-card small { color: var(--muted); font-size: 14px; font-weight: 700; } .feedback-face { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; } .feedback-face svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .feedback-choice-card.positive .feedback-face { background: #d7e7cf; color: #44643e; } .feedback-choice-card.mixed .feedback-face { background: #f7df9f; color: #7a5a16; } .feedback-choice-card.needs-work .feedback-face { background: #f2b7b0; color: #7a332c; } .feedback-private-note { display: inline-flex; align-items: center; justify-self: center; gap: 10px; margin: 18px 0 0; color: var(--muted); font-size: 14px; font-weight: 600; } .feedback-private-note svg { width: 20px; height: 20px; flex: 0 0 20px; fill: none; stroke: var(--theme-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.95; } .feedback-selected-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--theme-blob-a) 28%, var(--surface) 72%); color: var(--text); font-size: 14px; font-weight: 700; } .feedback-selected-bar.mixed { background: #fff6df; border-color: #ead7a1; } .feedback-selected-bar.needs-work { background: #fff1ef; border-color: #ecc6c0; } .feedback-selected-bar button { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; } .feedback-chip-grid { display: flex; flex-wrap: wrap; gap: 10px; } .feedback-reason-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); font-weight: 700; } .feedback-reason-chip svg { width: 22px; height: 22px; fill: none; stroke: var(--theme-accent); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .feedback-reason-chip.selected { border-color: var(--green); background: color-mix(in srgb, var(--theme-blob-a) 35%, var(--surface) 65%); box-shadow: inset 0 0 0 1px var(--green); } .feedback-flow .feedback-label { display: grid; gap: 6px; color: var(--text); font-weight: 900; } .feedback-flow .feedback-label span { color: var(--muted); font-weight: 700; } .feedback-flow .short-feedback-comment { width: 100%; min-height: 68px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; resize: vertical; } .feedback-contact-toggle-row { display: flex; align-items: center; min-height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-soft); } .feedback-contact-toggle-row label { display: flex; align-items: center; gap: 10px; width: 100%; color: var(--text); font-weight: 700; } .feedback-contact-toggle-row input { width: 20px; height: 20px; accent-color: var(--green); } .feedback-contact-reveal { padding: 12px; border-radius: 10px; background: color-mix(in srgb, var(--theme-blob-a) 22%, var(--surface) 78%); } .feedback-flow .primary-btn { width: 100%; justify-content: center; } .button-line-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .feedback-success { justify-items: start; gap: 12px; padding: 8px 0 0; } .feedback-success-icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 16px; background: color-mix(in srgb, var(--theme-blob-a) 48%, var(--surface) 52%); color: var(--theme-accent); } .feedback-success-icon svg { width: 34px; height: 34px; fill: color-mix(in srgb, var(--theme-accent) 18%, transparent); stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .feedback-success h3 { margin: 0; font-size: 26px; } .feedback-success p { margin: 0 0 8px; color: var(--text); font-weight: 700; } .help-modal .modal-box { position: relative; width: min(690px, 100%); padding: 32px; border-radius: 24px; background: var(--surface); } .help-modal .modal-close { display: grid; place-items: center; width: 48px; min-height: 48px; padding: 0; border-radius: 14px; font-size: 30px; line-height: 1; } .help-modal .modal-box h2 { margin: 10px 72px 10px 110px; font-size: 32px; line-height: 1.12; } .help-modal-content { display: grid; gap: 18px; } .help-modal-icon { position: absolute; top: 42px; left: 32px; width: 66px; height: 66px; display: inline-grid; place-items: center; } .help-modal-icon .northcue-help-icon { --northcue-icon-canvas: 144px; } .help-modal .help-modal-text { margin: 0 60px 0 110px; color: var(--muted); font-size: 19px; font-weight: 700; line-height: 1.45; } .help-modal-rule { width: 100%; margin: 8px 0 4px; border: 0; border-top: 1px solid var(--line); } .help-modal-section-title { margin: 0; color: var(--text); font-size: 17px; font-weight: 800; } .help-modal-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .help-modal-steps li { display: grid; grid-template-columns: 32px 1fr; align-items: center; gap: 16px; min-height: 72px; padding: 10px 16px 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-soft); color: var(--text); font-weight: 800; } .help-step-icon { display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 0; background: transparent; color: var(--sage-strong); box-shadow: none; } .help-step-svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .help-step-copy { display: grid; gap: 3px; } .help-step-copy strong { color: var(--text); font-size: 17px; line-height: 1.2; } .help-step-copy small { color: var(--muted); font-size: 15px; font-weight: 700; line-height: 1.25; } .help-modal-footer { display: flex; justify-content: space-between; gap: 14px; margin-top: 8px; } .help-modal-action { justify-self: end; width: auto; min-height: 52px; padding-inline: 24px; } .help-modal-back { min-height: 52px; padding-inline: 24px; } .check-grid, .style-list, .help-answer-list { display: grid; gap: 12px; } .check-grid p { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft); } .badge-chip { display: inline-flex; margin-top: 6px; padding: 7px 12px; border-radius: 999px; font-weight: 700; } .badge-low { background: #e0edd9; } .badge-medium { background: #f6e4bb; } .badge-high { background: #f7d5cc; } /* Document check panel: headline-led trust + severity. Colour is driven by banner.type and kept soft/pastel for anxious readers; the headline word, icon and engine sentence carry the meaning without it. */ .check-panel { display: grid; gap: 14px; } .check-headline { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--tone-bg); border: 1px solid color-mix(in srgb, var(--tone-edge) 45%, var(--line) 55%); border-left: 5px solid var(--tone-edge); } .check-headline-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--tone-edge) 20%, var(--surface) 80%); color: var(--tone-ink); } .check-headline-icon svg { width: 22px; height: 22px; } .check-headline-text { display: grid; gap: 3px; } .check-headline-word { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.16rem; color: var(--tone-ink); } .check-headline-sentence { margin: 0; color: var(--text); line-height: 1.45; } .check-why { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .check-why-label { font-weight: 700; font-size: 0.9rem; color: var(--muted); margin-right: 2px; } .check-why-chip { display: inline-flex; padding: 6px 11px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); font-size: 0.9rem; color: var(--text); } .check-rows { display: grid; gap: 10px; padding: 2px; } .check-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .check-row-label { color: var(--muted); font-weight: 600; } .check-row-value { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text); text-align: right; } .check-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; } .check-dot.badge-low { background: var(--sage-strong); } .check-dot.badge-medium { background: #d8a85a; } .check-dot.badge-high { background: #cf8f82; } .check-nextstep { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--sage) 58%, var(--surface) 42%); border: 1px solid color-mix(in srgb, var(--sage-strong) 38%, var(--line) 62%); } .check-nextstep-label { display: block; font-weight: 700; color: var(--green); margin-bottom: 4px; } .check-nextstep p { margin: 0; color: var(--text); line-height: 1.45; } /* Soft, calm tone palettes. Each sets the headline's background, edge accent and ink. Built from the brand tints (--sage/--cream/--rose) so dark mode follows automatically; urgent is the same amber family, a touch stronger than caution; warning is a muted dusty rose, never a harsh emergency red. */ .check-tone-safe { --tone-bg: color-mix(in srgb, var(--sage) 72%, var(--surface) 28%); --tone-edge: var(--sage-strong); --tone-ink: var(--green); } .check-tone-caution { --tone-bg: color-mix(in srgb, var(--cream) 50%, var(--surface) 50%); --tone-edge: #cf9f50; --tone-ink: #7c5618; } .check-tone-urgent { --tone-bg: color-mix(in srgb, var(--cream) 68%, var(--surface) 32%); --tone-edge: #c68a2e; --tone-ink: #6f4612; } .check-tone-warning { --tone-bg: color-mix(in srgb, var(--rose) 58%, var(--surface) 42%); --tone-edge: #cf8f82; --tone-ink: #7d3f34; } body.theme-dark .check-tone-caution { --tone-edge: #d9a948; --tone-ink: #f0d9a8; } body.theme-dark .check-tone-urgent { --tone-edge: #e0b257; --tone-ink: #f6e2ad; } body.theme-dark .check-tone-warning { --tone-edge: #c98a7d; --tone-ink: #f1c3b8; } body.theme-dark .check-dot.badge-medium { background: #d9a948; } body.theme-dark .check-dot.badge-high { background: #c98a7d; } /* On narrow screens, stack each supporting row so label and value never wrap into a cramped two-column squeeze; the dot stays tight to the value text. */ @media (max-width: 600px) { .check-row { flex-direction: column; align-items: flex-start; gap: 3px; } .check-row-value { text-align: left; } } @media (max-width: 1180px) { .topbar { grid-template-columns: 1fr; } .top-links, .mode-row { justify-content: flex-start; flex-wrap: wrap; } .home-layout, .journey-main, .comfort-grid { grid-template-columns: 1fr; } .journey-rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .rail-step:not(:last-child)::after { display: none; } .help-with-row, .support-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-strip h2 { border-right: 0; } } @media (max-width: 1120px) { .landing-story { grid-template-columns: minmax(240px, 0.29fr) minmax(340px, 0.42fr) minmax(240px, 0.29fr); gap: 26px; } .landing-doc-visual { min-height: 410px; padding-left: 18px; } .landing-document-stack-img { width: min(310px, 100%); margin-top: 52px; } .landing-scribble-img { top: 20px; width: 100px; } .landing-cue-previews { gap: 14px; } .landing-cue-preview { min-height: 92px; padding: 16px; } .landing-cue-icon { width: 58px; height: 58px; } .landing-cue-icon svg { width: 32px; height: 32px; } } @media (max-width: 980px) { #page-landing.active { overflow: auto; } .landing-story { grid-template-columns: 1fr; gap: 26px; min-height: auto; transform: none; } .landing-connectors { display: none; } .landing-shell::before, .landing-shell::after { display: none; } .landing-shell { order: 1; } .landing-doc-visual { order: 2; min-height: 298px; padding: 8px 8px 6px; } .landing-paper-stack { height: 260px; margin-top: 8px; transform: scale(0.76); transform-origin: top center; } .landing-document-stack-img { width: min(300px, 100%); margin-top: 42px; } .landing-scribble, .landing-leaf, .landing-stars, .landing-cue-leaf { display: none; } .landing-scribble-img { top: 0; width: 88px; } .landing-cue-previews { order: 3; width: min(420px, 100%); } } @media (max-width: 760px) { .app-main { width: min(100% - 24px, 1380px); padding-top: 24px; } body[data-page="landing"] .app-main { width: 100%; padding-top: 0; } /* Mobile only: the brand rests on the app background, no header strip and no divider, and the wordmark sits to the left. Desktop keeps its header bar. */ .topbar { padding: 14px 18px; min-height: auto; background: transparent; border-bottom: 0; } body.theme-dark .topbar { background: transparent; } .brand-button { gap: 9px; min-height: 48px; } /* Mobile: show the brand mark before the wordmark, sized to sit naturally beside the 22px "Northcue" text. */ .brand-icon { display: block; width: 32px; height: 32px; } .brand-name { font-family: var(--font-heading); font-size: 22px; font-weight: 500; letter-spacing: -0.02em; color: var(--text); } .home-layout { grid-template-columns: 1fr; gap: 30px; padding-inline: 0; } .home-map { min-height: 330px; } #page-landing.active { min-height: 100vh; padding: 30px 22px 48px; } /* Tighten the empty band between the first screen and the document on mobile so the document, arrow and card sit closer below the button. Nothing is resized: this only removes empty vertical gap (the grid gap here and the image margin-top below), and the mobile flow's negative margin is nudged to keep the document, arrow and card spacing exactly as it was. */ .landing-story { gap: 12px; } .landing-doc-visual { min-height: 258px; } .landing-paper-stack { width: 270px; height: 244px; margin-top: 8px; transform: scale(0.72); transform-origin: top center; } .landing-document-stack-img { width: min(260px, calc(100% - 8px)); margin-top: 2px; } .landing-scribble-img { width: 58px; /* Shift the scribble off-centre to the right on mobile so it reads as a quiet accent beside the top right of the document stack, not as a mark centred on the pile. Horizontal only: size, opacity and the base transform are unchanged. */ left: 74%; /* Small downward nudge so it sits just above the top of the document pile and reads as connected to the stack, not floating in the gap above it. Vertical only; horizontal, size and opacity are unchanged. */ top: 22px; } /* The three skeleton previews are replaced on mobile by the single real example card in the flow below the document. */ .landing-cue-previews { display: none; } /* Pull the flow up under the visible document papers (the document PNG has tall transparent padding at its foot) so document, arrow and card read as one tight group rather than being split by a long gap. */ .landing-mobile-flow { display: grid; order: 3; justify-items: center; gap: 14px; width: min(360px, 100%); /* Was -70px with a 24px story gap; nudged to -58px now the gap is 12px so the document, arrow and card keep the exact same spacing as before. */ margin-top: -58px; } /* Soft dashed down arrow, matching the desktop hero connectors: same dot size and spacing, same #2f5b35, same rounded chevron weight. */ .landing-mobile-arrow { width: 16px; height: 34px; opacity: 0.9; /* Vertical dotted line only. The downward chevron has been removed and a soft mask fades the dots out toward the bottom, so the line dissolves gently as it reaches the card instead of pointing at it. */ background-image: radial-gradient(circle, #2f5b35 2px, transparent 2.4px); background-position: center top; background-size: 16px 13px; background-repeat: repeat-y; -webkit-mask-image: linear-gradient(to bottom, #000 35%, transparent 90%); mask-image: linear-gradient(to bottom, #000 35%, transparent 90%); } .landing-example-card { width: 100%; text-align: left; /* Flat paper-note look, matching the desktop previews: no raised shadow, no border, defined by the warm paper tone from the landing palette so the card stays clearly visible without looking clickable. */ background: var(--landing-paper); border: none; box-shadow: none; } /* The Council Tax example card carries more content (title, two lines, two tags) than a plain cue card, so the small check circle, even centred, left an empty pocket on the lower left. Give this card a fuller icon so it spans the content and reads as a balanced anchor. Scoped to the example card, so the desktop preview cards keep their existing icon size. */ .landing-example-card .landing-cue-icon { width: 72px; height: 72px; /* Keep the real icon but flatten it: drop the glossy highlight and the raised inset ring + drop shadow, leaving a flat soft-sage disc. */ background: var(--landing-sage-soft); color: var(--landing-sage); box-shadow: none; } .landing-example-card .landing-cue-icon svg { width: 40px; height: 40px; } .landing-example-tags { display: flex; gap: 8px; margin-top: 12px; } .landing-example-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: #e8efe2; color: #2f5b35; font-family: var(--font-body); font-size: 13px; font-weight: 700; } .landing-example-more { margin: 0; color: #596270; font-family: var(--font-body); font-size: 14px; font-weight: 600; text-align: center; } .landing-cue-preview { min-height: 86px; } .landing-shell { gap: 18px; } .landing-shell h1 { font-size: clamp(38px, 10vw, 44px); } .landing-copy { font-size: 18px; } .landing-start-btn { width: auto; min-height: 52px; padding-inline: 28px; font-size: 19px; } .home-copy h1, .journey-shell > h1 { font-size: 42px; } /* Match the Settings header's left placement on mobile (was a 44px indent that pushed the header past its own cards). Desktop above 760px keeps the 44px margin. */ .help-head { margin-left: 8px; } .help-head h1 { font-size: clamp(26px, 2.4vw, 32px); } .lead { font-size: 19px; } .help-with-row, .support-strip, .help-cards, .help-simple-sections, .help-support-strip, .feeling-row, .colour-style-row, .background-style-grid, .segmented, .card-style-row { grid-template-columns: 1fr; } .help-with-row, .support-strip, .help-cards, .help-simple-sections, .help-safety-note, .help-support-strip, .help-tier-label, .help-support-tier { margin-inline: 8px; } /* The first tier label sits directly under the Help heading, so style it like the Settings page's subtitle (calm muted sentence, not the small uppercase section label). The second tier label inside the support box keeps its section-divider style. Mobile only. */ #page-help .help-layout > .help-tier-label { margin-top: 8px; margin-bottom: 14px; font-size: calc(16px * var(--text-scale, 1)); font-weight: 400; letter-spacing: normal; text-transform: none; } .journey-rail { grid-template-columns: 1fr 1fr; } .upload-actions, .card-nav { flex-direction: column; } .primary-btn, .outline-btn { width: 100%; } /* Give the Change type link a comfortable touch area on mobile. The parent type confirm row is centred, so the taller hit box stays aligned and the underlined label is unchanged. */ .change-type-btn { min-height: 44px; padding: 11px 10px; display: inline-flex; align-items: center; } body.focus-mode .document-type-row { display: none; } body.focus-mode .help-cards { margin-inline: 0; } /* Mobile focus mode on Home = just the primary action. Hide the How it works explainer and the support panels (Here if you need us, plus the overwhelmed, feedback and privacy rows), leaving only the Start with a document hero. Reversible: turning focus off restores everything. Desktop home focus is handled separately and is untouched. */ body.focus-mode #page-home .home-welcome-steps, body.focus-mode #page-home .home-dashboard { display: none; } /* Mobile focus mode on the cue card = a distraction-free single card. The card already fills the phone, so focus hides the "Understand your document" heading block and the card's Simple-view toggle. The card itself, a slim progress indicator (Card X of 6 + dots), Back/Next, and the Exit-focus button all stay. The bottom navigation stays visible on every page in focus mode, including the journey page, so the user always has a calm way back. Desktop focus mode is unchanged: these rules are mobile-only. */ body.focus-mode .results-head { display: none; } body.focus-mode #card-detail-toggle { display: none; } /* With Simple-view hidden, the lone Exit-focus button spans the row. */ body.focus-mode #card-focus-toggle { flex-basis: 100%; } /* Tidy two-band top so content starts higher. Flattening .card-top-left with display:contents lets the position text, both toggles, and the dots regroup in one flex flow (no markup change). Row 1 = the two controls share a compact row; row 2 = progress dots + a de-emphasised "Card X of 6". */ .card-top { flex-wrap: wrap; row-gap: 12px; column-gap: 8px; justify-content: space-between; } .card-top-left { display: contents; } /* Row 1 — the two controls, side by side, filling the row. Slightly smaller text so the longest label ("Show full details") still fits beside "Focus on card" at phone width; touch height kept at 40px. */ #card-focus-toggle, #card-detail-toggle { order: 1; flex: 1 1 calc(50% - 4px); min-width: 0; min-height: 40px; padding: 0 9px; gap: 6px; font-size: 13px; justify-content: center; } #card-focus-toggle svg, #card-detail-toggle svg { width: 16px; height: 16px; } /* Row 2 — "Card X of 6" on the LEFT (under the Focus button) and the dots on the RIGHT (under the toggle), pushed to the edges by space-between so they line up with the two buttons above. "Card X of 6" kept but de-emphasised since the dots show the same thing; tighter dot gap for a compact cluster. */ #card-progress { order: 2; flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--muted); } #progress-dots { order: 3; flex: 0 0 auto; gap: 7px; } /* Render the dots as compact, perfectly-centred circles on phones. The dot icon image is sized for a 38px canvas and overflows downward toward the divider (making the row look low and uneven); hiding it and using the dot's own circle keeps the six dots level with the "Card X of 6" text with a clean gap above the line. Progress logic (which dot is .active) is unchanged. */ #progress-dots .progress-dot { width: 9px; height: 9px; overflow: hidden; background: var(--line); } #progress-dots .progress-dot.active { background: var(--theme-accent); } #progress-dots .northcue-progress-icon { display: none; } .style-pill { flex: 1 1 auto; justify-content: center; } .cue-card-panel { padding: 24px 18px; } /* ── Mobile cue-card presentation (≤760px) ──────────────────────────────── Brings the desktop (≥761px) simple/full toggle + headline-dominant hierarchy to phones. Scoped to this mobile media query so desktop is untouched. */ /* Show the simple/full-view toggle on phones (previously desktop-only). It sits with "Focus on card" in .card-top-left and wraps onto its own row. */ .detail-toggle { display: inline-flex; } /* Headline is the hero but sized comfortably so a normal one-sentence headline fits ~2-3 lines instead of filling the screen. It scales with the existing text-size control via the body text-small / text-large classes — three sizes, no parallel logic. Medium (default, no class) is generous and readable; it stays clearly larger than the bullets at every size. */ .card-answer { margin-top: 12px; font-size: 27px; line-height: 1.2; } body.text-small .card-answer { font-size: 22px; } /* Dyslexia mode (maximum readability) takes the large headline too, matching how it already shares the large body font. */ body.text-large .card-answer, body.dyslexia-mode .card-answer { font-size: 32px; } /* Subtitle and bullets stay visible but calmer and clearly secondary, with more breathing room beneath the hero headline. */ .card-explanation { margin-top: 14px; font-weight: 500; line-height: 1.5; } .card-steps { margin-top: 14px; gap: 9px; font-weight: 600; line-height: 1.5; } /* Simple view on mobile: headline + label only — a calm, mostly single-screen card. Detail stays in the DOM for full view. */ body.cards-simple .card-explanation, body.cards-simple .card-steps { display: none; } .help-card { grid-template-columns: 66px 1fr auto; min-height: 112px; padding: 0 20px; gap: 18px; font-size: 22px; } .help-icon-bubble { width: 58px; height: 58px; } .help-line-icon { width: 34px; height: 34px; } .feedback-modal .modal-box { padding: 20px; } .feedback-modal .modal-box h2 { margin-right: 60px; font-size: 26px; } .feedback-modal .modal-box h2::before { flex-basis: 48px; width: 48px; height: 48px; background-size: 30px; } .feedback-intro { margin: -38px 64px 14px 64px; } .feedback-choice-row { grid-template-columns: 1fr; } .feedback-choice-card { grid-template-columns: 52px 1fr; justify-items: start; align-items: center; min-height: 78px; text-align: left; } .feedback-choice-card small { grid-column: 2; } .feedback-face { grid-row: span 2; width: 48px; height: 48px; } .feedback-face svg { width: 38px; height: 38px; } .help-simple-card { padding: 22px; } .help-modal .modal-box { padding: 22px; } .help-modal .modal-box h2 { margin: 2px 60px 10px 86px; font-size: 28px; } .help-modal-icon { top: 22px; left: 22px; width: 58px; height: 58px; } .help-modal-icon .northcue-help-icon { --northcue-icon-canvas: 126px; } .help-modal .help-modal-text { margin-left: 86px; margin-right: 0; font-size: 17px; } .help-modal-steps li { grid-template-columns: 42px 1fr; gap: 12px; min-height: 68px; } .help-modal-footer { flex-direction: column-reverse; } .help-modal-back, .help-modal-action { width: 100%; } } .top-mode-icon:has(.northcue-icon), .home-icon-bubble:has(.northcue-main-icon), .process-icon-circle:has(.northcue-main-icon), .upload-hero-icon:has(.northcue-main-icon), .ready-check:has(.northcue-status-icon), .privacy-note-icon:has(.northcue-status-icon), .action-icon:has(.northcue-action-icon), .help-icon-bubble:has(.northcue-help-icon), .cue-logo:has(.northcue-cue-icon), .help-step-icon:has(.northcue-step-icon), .emoji-icon:has(.northcue-rail-icon) { display: flex; align-items: center; justify-content: center; overflow: hidden; border-color: var(--northcue-circle-border, transparent); background: var(--northcue-circle-bg, transparent); box-shadow: var(--northcue-circle-shadow, none); } /* ── Privacy page ──────────────────────────────────────── */ .privacy-layout { width: min(760px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 20px; padding: 8px 8px 28px; } .privacy-head { display: grid; justify-items: center; text-align: center; gap: 12px; margin-bottom: 2px; } .privacy-head h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(26px, 2.4vw, 32px); line-height: 1.1; } .privacy-intro { max-width: 540px; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; } .privacy-icon { display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: var(--theme-accent); background: color-mix(in srgb, var(--theme-blob-a) 50%, var(--surface) 50%); border: 1px solid color-mix(in srgb, var(--theme-accent) 18%, var(--line) 82%); } .privacy-icon svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .privacy-icon-lg { width: 64px; height: 64px; } .privacy-icon-md { width: 48px; height: 48px; } .privacy-journey { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 8px; margin: 2px 0 0; padding: 0; list-style: none; } .privacy-step { display: grid; justify-items: center; gap: 8px; width: 120px; text-align: center; } .privacy-step-label { color: var(--text); font-size: 13px; font-weight: 700; line-height: 1.25; } .privacy-step-arrow { display: grid; place-items: center; margin-top: 15px; color: var(--muted); } .privacy-step-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.55; } .privacy-journey-caption { max-width: 560px; margin: 8px auto 0; text-align: center; color: var(--muted); font-size: 14.5px; line-height: 1.5; } .privacy-panel { padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: var(--soft-shadow); } .privacy-panel h2 { margin: 0 0 8px; font-family: var(--font-heading); font-size: 20px; } .privacy-panel p, .privacy-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; } .privacy-panel .privacy-icon { margin-bottom: 12px; } .privacy-authenticity { background: var(--surface); border-color: color-mix(in srgb, var(--theme-accent) 22%, var(--line) 78%); } .privacy-card-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .privacy-card { display: grid; justify-items: start; gap: 6px; padding: 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--soft-shadow); } .privacy-card h3 { margin: 4px 0 0; font-family: var(--font-heading); font-size: 17px; } .privacy-full-link { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; padding: 18px 22px; border: 1.5px solid color-mix(in srgb, var(--theme-accent) 40%, var(--line) 60%); border-radius: 16px; background: color-mix(in srgb, var(--theme-blob-a) 22%, var(--surface) 78%); text-align: left; cursor: pointer; font: inherit; } .privacy-full-text { display: grid; gap: 3px; } .privacy-full-text strong { color: var(--theme-accent); font-size: 16px; font-weight: 800; } .privacy-full-text small { color: var(--muted); font-size: 13px; line-height: 1.4; } .privacy-full-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--theme-accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; } .privacy-full-link:hover, .privacy-full-link:focus-visible { background: color-mix(in srgb, var(--theme-blob-a) 38%, var(--surface) 62%); } .privacy-closing { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.5; opacity: 0.9; } .privacy-full-stub { width: min(620px, 100%); margin: 0 auto; display: grid; justify-items: center; text-align: center; gap: 14px; padding: 32px 8px; } .privacy-full-stub h1 { margin: 0; font-family: var(--font-heading); font-size: clamp(24px, 2.2vw, 30px); } .privacy-full-stub p { margin: 0; color: var(--muted); font-size: 16px; } /* Clickable "Private and secure" shields */ .is-privacy-link { cursor: pointer; } .is-privacy-link:hover { background-color: color-mix(in srgb, var(--theme-blob-a) 30%, var(--surface) 70%); } .is-privacy-link:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: 2px; } @media (max-width: 700px) { .privacy-card-row { grid-template-columns: 1fr; } } /* Lay the four-step privacy journey out as one compact horizontal row on mobile (was a tall vertical stack with down-arrows). Four steps across, each = its circular icon with a wrapping label beneath, and the desktop's right-facing chevrons kept (just smaller) between them. Steps flex to share the width and cap at the desktop 120px so wider phones match desktop. Desktop above 760px is unchanged. */ @media (max-width: 760px) { .privacy-journey { flex-wrap: nowrap; align-items: flex-start; gap: 2px; } .privacy-step { width: auto; flex: 1 1 0; min-width: 0; max-width: 120px; } .privacy-step-label { font-size: 11px; } .privacy-step-arrow { flex: 0 0 auto; margin-top: 17px; transform: none; } .privacy-step-arrow svg { width: 13px; height: 13px; } } /* ── Mobile bottom navigation ────────────────────────────── A calm floating tab bar shown only at 760px and below. It reuses the existing data-page-link wiring, so setPage drives the active state and aria-current. Nothing above 760px is touched, so desktop stays exactly as it was. */ .mobile-tabbar { display: none; } @media (max-width: 760px) { /* The topbar no longer needs to pin on mobile now that the bottom bar carries navigation. Letting it scroll away keeps it from ever overlapping a page heading, while content still starts cleanly below it with calm spacing. */ .topbar { position: static; } .mobile-tabbar { position: fixed; left: 12px; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 30; display: flex; align-items: stretch; gap: 0; padding: 0; border: 1px solid var(--line); border-radius: 22px; /* Solid fallback for any device that cannot blur. The frosted version is layered on in the @supports block below, so a phone with no backdrop blur still gets a clean, fully readable bar. */ background: var(--surface); box-shadow: var(--soft-shadow); } /* Frosted surface: a softly translucent panel that lets page content pass faintly underneath through a gentle blur. Only applied where the browser can actually blur, so the solid fallback above stays intact everywhere else. The slight saturate keeps the calm tint from going grey, and holding the tint near 82% keeps the line icons readable. */ @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .mobile-tabbar { background: color-mix(in srgb, var(--surface) 82%, transparent); border-color: color-mix(in srgb, var(--line) 70%, transparent); -webkit-backdrop-filter: blur(14px) saturate(1.08); backdrop-filter: blur(14px) saturate(1.08); } } /* A gentle dissolve at the very bottom edge only. Kept light and translucent so content still shows faintly through the frosted bar above it, rather than being masked by a solid fade. Sits behind the bar, above the page content, and never blocks taps. */ .mobile-tabbar::before { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: calc(env(safe-area-inset-bottom, 0px) + 92px); z-index: -1; pointer-events: none; background: linear-gradient( to top, color-mix(in srgb, var(--bg) 70%, transparent), transparent 70% ); } /* The gliding highlight sits behind the icon only, as a fixed size soft pill. The label sits below it, outside the pill, so every tab reads identically regardless of label length. The pill is centred in each quarter of the bar and glides by animating left between the four cell centres at 12.5%, 37.5%, 62.5%, and 87.5%. */ .mobile-tabbar__indicator { position: absolute; top: 6px; left: calc(12.5% - 23px); width: 46px; height: 31px; border-radius: 13px; background: var(--sage); border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); transition: left 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease; } .mobile-tabbar:has(.mobile-tab:nth-of-type(2).active) .mobile-tabbar__indicator { left: calc(37.5% - 23px); } .mobile-tabbar:has(.mobile-tab:nth-of-type(3).active) .mobile-tabbar__indicator { left: calc(62.5% - 23px); } .mobile-tabbar:has(.mobile-tab:nth-of-type(4).active) .mobile-tabbar__indicator { left: calc(87.5% - 23px); } /* On pages with no matching tab, such as privacy, show no highlight rather than a misleading one under Home. */ .mobile-tabbar:not(:has(.mobile-tab.active)) .mobile-tabbar__indicator { opacity: 0; } .mobile-tab { position: relative; z-index: 1; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 60px; padding: 8px 2px; border: 0; background: transparent; color: var(--muted); font-family: var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; /* Gentle press feedback, CSS only. The whole tab eases down slightly under the finger and springs back on release. */ transition: transform 0.13s ease; } .mobile-tab.active { color: var(--green); } .mobile-tab:active { transform: scale(0.92); } .mobile-tab__icon { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .mobile-tab__icon svg { /* Whole 24px so the 0 0 24 24 viewBox maps 1:1 for crisp strokes. All four icons share this one rule, so the line weight is identical across Home, Understand, Help, and Settings. */ width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; } .mobile-tab__label { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.005em; color: inherit; white-space: nowrap; } .mobile-tab:focus-visible { outline: 2px solid var(--theme-accent); outline-offset: -3px; border-radius: 16px; } /* Keep the hero clean: no bar on the landing page. */ body[data-page="landing"] .mobile-tabbar { display: none; } /* Move the page navigation to the bottom bar on mobile, and hide the comfort mode-row now that the Settings tab holds dark mode, focus mode, text size, colour style, card style, and background style. The top of every page is then just the brand, calm and uncluttered. Markup and wiring stay in place, so desktop above 760px is unaffected. */ .top-links, .mode-row { display: none; } /* Keep content clear of the floating bar on every page that shows it. main.app-main outranks the per page padding overrides, so no important is needed. */ body:not([data-page="landing"]) main.app-main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 104px); } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .mobile-tabbar__indicator { transition: none; } .mobile-tab { transition: none; } .mobile-tab:active { transform: none; } } /* ── Mobile cue card reading, Phase 3 ────────────────────── At 760px and below the cue card becomes swipeable. Only the inner content slides while the dots and counter stay put as the anchor. The nav becomes a quiet Back text button with a calm Next pill as the visible safety net. Swipe is the main way, the tap is the fallback. Desktop above 760px is untouched. */ @media (max-width: 760px) { .cue-card-panel { overflow: hidden; touch-action: pan-y; } .cue-card-content { transition: transform 0.26s ease, opacity 0.26s ease; will-change: transform; } .cue-card-panel.is-swiping { -webkit-user-select: none; user-select: none; } .cue-card-panel.is-swiping .cue-card-content { transition: none; } /* Quiet nav. Back is a soft text button, Next is a calm pill in the same green as the bottom bar highlight. Both override the global full width mobile button rule, scoped to the card nav so other pages keep their buttons. */ .card-nav { flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; padding-top: 14px; } .card-nav .outline-btn, .card-nav .primary-btn { width: auto; } .card-nav .outline-btn { min-height: 44px; padding: 0 12px; border-color: transparent; background: transparent; box-shadow: none; color: var(--muted); font-size: 15px; } /* Keep Back a quiet text button in dark mode too. The site wide dark outline button rule otherwise gives it a surface fill and the full text colour. */ body.theme-dark .card-nav .outline-btn { background: transparent; border-color: transparent; color: var(--muted); } .card-nav .primary-btn { min-height: 46px; padding: 0 24px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--green) 22%, transparent); background: var(--sage); box-shadow: none; color: var(--green); font-weight: 800; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .cue-card-content { transition: none; } } /* ── Mobile consolidated Settings, Phase 4 ───────────────── At 760px and below the comfort page gathers every appearance control. The Appearance card (dark and focus) shows on mobile only and reuses the existing data-theme and data-toggle wiring, so setTheme and setFocusMode drive it with no parallel logic. The existing sections are reordered for mobile with flex order, not by moving them in the markup. Desktop above 760px keeps the comfort page and the topbar controls exactly as they were. */ .settings-appearance { display: none; } .comfort-eyebrow-short { display: none; } @media (max-width: 760px) { /* Eyebrow echoes the Settings tab on mobile. Desktop keeps its own label. */ .comfort-eyebrow-full { display: none; } .comfort-eyebrow-short { display: inline; } /* Match the Help page's plain label: drop the pill background and border so the Settings label reads as plain text. Help's label is green; Settings' is black (--text). Desktop above 760px keeps its pill. */ .comfort-eyebrow { padding: 0; border: 0; background: none; color: var(--text); } /* Appearance card, its own calm group above the existing settings card. */ .settings-appearance { display: block; margin-bottom: 16px; padding: 16px 26px 22px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--soft-shadow); } .settings-appearance-label { margin: 0 0 14px; font-weight: 700; } .appearance-toggles { display: flex; flex-direction: column; gap: 8px; } .appearance-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 48px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; cursor: pointer; } .appearance-toggle-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .appearance-toggle-label { font-size: 17px; font-weight: 700; } .appearance-toggle-help { color: var(--muted); font-size: 13.5px; font-weight: 500; line-height: 1.4; } .appearance-switch { position: relative; flex: 0 0 auto; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--line-strong) 78%, var(--surface) 22%); transition: background 0.2s ease; } .appearance-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(23, 25, 35, 0.25); transition: transform 0.2s ease; } .appearance-toggle.active .appearance-switch { background: var(--green); } .appearance-toggle.active .appearance-switch::after { transform: translateX(20px); } /* Reorder the existing settings card for mobile only, Text size before Colour style, without changing the markup or the desktop order. The reduced top padding follows the visually first section. */ .settings-panel { display: flex; flex-direction: column; } .settings-panel .settings-section:nth-child(1) { order: 2; padding-top: 20px; } .settings-panel .settings-section:nth-child(2) { order: 1; padding-top: 4px; } .settings-panel .settings-section:nth-child(3) { order: 3; } .settings-panel .settings-section:nth-child(4) { order: 4; } } @media (max-width: 760px) and (prefers-reduced-motion: reduce) { .appearance-switch, .appearance-switch::after { transition: none; } } /* ── Mobile Settings, compact layout ─────────────────────── Tightens the mobile Settings screen to a compact phone layout so it scrolls far less. Mobile only, styling only. Every option and every helper line is kept. Desktop above 760px is untouched, and these controls are used only on the comfort page. */ @media (max-width: 760px) { /* Tighter outer rhythm and a little more width for the controls. */ .comfort-head { margin-bottom: 14px; } /* Drop the trailing coloured full stop on mobile so the heading ends cleanly, matching the Help heading. Desktop keeps it. */ .green-dot { display: none; } .settings-appearance { margin-bottom: 12px; padding: 14px 18px 16px; } .settings-panel { padding: 14px 18px 16px; } .settings-section { padding: 14px 0; } .settings-panel .settings-section:nth-child(1) { padding-top: 14px; } .settings-section > p { margin-bottom: 10px; } /* Text size: compact three across. */ .segmented { grid-template-columns: repeat(3, 1fr); gap: 8px; } .text-size-btn { flex-direction: column; gap: 2px; min-height: 56px; padding: 8px 4px; font-size: 12px; } .text-size-btn strong { font-size: 16px; } /* Colour style: a single row of small round swatches. Labels are kept in the markup for screen readers but hidden visually here. The selected swatch gets a clear green ring. All options kept. */ .colour-style-row { grid-template-columns: repeat(5, 1fr); gap: 10px; } .colour-style { min-height: auto; gap: 0; padding: 4px 0; background: transparent; font-size: 0; } .colour-style.selected { background: transparent; } .colour-style .swatch { width: 44px; height: 44px; border-radius: 50%; } .colour-style.selected .swatch { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--green); } /* Reading card style: two compact side by side options, helper text kept. */ .card-style-row { grid-template-columns: 1fr 1fr; gap: 10px; } .card-style-choice { grid-template-columns: 1fr; gap: 8px; min-height: auto; padding: 12px; } .card-style-choice span { grid-row: auto; width: 100%; height: 36px; } /* Background style: a neat row of small previews, options and labels kept. */ .background-style-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } .background-style-choice { min-height: auto; gap: 6px; font-size: 11px; } .background-preview { width: 100%; height: 56px; } .background-style-choice.selected .background-preview { box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-blob-a) 45%, transparent), var(--soft-shadow); } .background-style-choice.selected .background-preview::after { width: 18px; height: 18px; right: 4px; top: 4px; font-size: 11px; } } /* Mobile only: Help page options become compact grouped list rows, and help guides open as a calm bottom sheet that slides up. CSS only, the guide content and the modal JavaScript are reused unchanged. Desktop above 760px keeps the cards and the centred popup. */ @media (max-width: 760px) { /* a) Each section's options become rows in one rounded list container, divided by hairlines. */ .help-cards { grid-template-columns: 1fr; gap: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); overflow: hidden; } .help-cards .help-card { grid-template-columns: 38px 1fr auto; align-items: center; gap: 12px; min-height: 0; padding: 14px 16px; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: 16px; } .help-cards .help-card + .help-card { border-top: 1px solid var(--line); } .help-cards .help-card:hover { background: color-mix(in srgb, var(--theme-accent) 5%, transparent); } .help-cards .help-card .help-icon-bubble { width: 38px; height: 38px; } .help-cards .help-card strong { max-width: none; font-size: 16px; font-weight: 700; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .help-cards .help-card-arrow { font-size: 20px; color: var(--muted); } /* Flatten the section two wrapper on mobile so both sections read as clean lists with full width labels, and the feedback card sits on its own. */ .help-support-tier { padding: 0; border: 0; background: none; } /* b) Help guide opens as a bottom sheet with a grab handle. */ .modal.help-modal { place-items: end stretch; padding: 0; } .help-modal .modal-box { width: 100%; max-width: none; max-height: 88vh; padding: 28px 20px 24px; border-radius: 22px 22px 0 0; border-bottom: 0; animation: helpSheetUp 300ms cubic-bezier(0.22, 1, 0.36, 1); } .help-modal .modal-box::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 40px; height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 45%, transparent); } } @keyframes helpSheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }