:root { color-scheme: light; --paper: #f8f4ef; --ink: #0a0908; --muted: #5d5a56; --blue: #aee2f4; --blue-soft: #c3cffd; --green: #9adfb3; --yellow: #ffe89e; --peach: #ffd9cc; --mint: #d3f2df; --lavender: #ccd4f9; --white: #fffefa; --line: rgba(10, 9, 8, .12); --shadow: 0 26px 60px rgba(52, 37, 18, .14), 0 4px 10px rgba(52, 37, 18, .06); --soft-shadow: 0 14px 35px rgba(47, 34, 19, .12); --radius-xl: 38px; --radius-lg: 28px; --radius-md: 22px; --serif: "Instrument Serif", Georgia, serif; --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ease: cubic-bezier(.16,1,.3,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --ease-out: cubic-bezier(.22,.61,.36,1); --shadow-ambient: 0 1px 2px rgba(20,16,8,.04), 0 2px 6px rgba(20,16,8,.04); --shadow-deep: 0 12px 24px rgba(20,16,8,.08), 0 4px 10px rgba(20,16,8,.06); --shadow-atmosphere: 0 40px 80px -20px rgba(20,16,8,.22); --shadow-premium: var(--shadow-ambient), var(--shadow-deep), var(--shadow-atmosphere); --shadow-premium-hover: var(--shadow-ambient), 0 20px 34px rgba(20,16,8,.12), 0 55px 95px -20px rgba(20,16,8,.3); /* ---- Theme identity layer ---- Everything below is what a [data-theme="…"] block on overrides. Scoped deliberately to the site's STRUCTURAL chrome — page background, ink, the primary accent used for CTAs/active states, and card/surface tones — applied consistently across the marketing site, the sign-in modal, and both consoles, since all three already render through this one stylesheet. What does NOT change per theme: each chapter's own illustration colour (Recognize's blue, Product's green, Caregiver's yellow…) — that's a wayfinding system for which chapter you're in, not a brand color, and recoloring it per theme would make chapters harder to tell apart, not easier. */ --accent: #5d80e6; --accent-ink: #ffffff; --accent-soft: rgba(93,128,230,.13); --dark: #11100f; --dark-ink: #ffffff; --surface: #ffffff; --surface-2: #f7f4ef; --sidebar-bg: #ece8e1; --app-bg: #f4f0ea; /* A theme is more than a palette swap: corner shape, heading type and shadow weight all shift together per theme too, so switching one genuinely changes how the site feels, not just what colour it is. */ --radius-hero: 32px; --radius-card: 26px; --bg-texture: radial-gradient(rgba(10,9,8,.045) 1.2px, transparent 1.2px); --bg-texture-size: 26px 26px; /* ---- Glass system ---- One shared vocabulary for every "frosted glass" surface on the site — modals, dashboard cards, marketing cards, sidebar, header. Single-instance surfaces (modals, header) use --glass-blur-strong; repeated grid surfaces (card grids) use the lighter --glass-blur so many-at-once blur stays cheap. Values are theme-aware via color-mix() against --surface, so every theme (including dark ones) gets a correctly-tinted glass, not a hardcoded white. */ --glass-blur: 16px; --glass-blur-strong: 28px; --glass-saturate: 180%; --glass-bg: color-mix(in srgb, var(--surface) 62%, transparent); --glass-bg-strong: color-mix(in srgb, var(--surface) 46%, transparent); --glass-border: color-mix(in srgb, white 55%, var(--surface) 15%); --glass-shadow: 0 22px 54px rgba(24, 75, 92, .16), 0 4px 12px rgba(24, 75, 92, .08), inset 0 1px 0 color-mix(in srgb, white 65%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .05); --glass-shadow-strong: 0 30px 70px rgba(24, 75, 92, .2), 0 6px 16px rgba(24, 75, 92, .1), inset 0 1px 0 color-mix(in srgb, white 75%, transparent), inset 0 -1px 0 rgba(0, 0, 0, .06), inset 0 0 30px 12px color-mix(in srgb, white 30%, transparent); } /* Meco Classic — the default: warm paper, near-black ink, a soft periwinkle accent. Every other theme is a deliberate departure from this one. */ [data-theme="classic"] { } /* Midnight Calm — a real dark mode, not just an inverted default: deep charcoal-navy paper, warm cream ink (never stark white, easier on the eyes at night), a cooler blue accent. */ [data-theme="midnight"] { color-scheme: dark; --paper: #14161c; --ink: #ece9e2; --muted: #a8a49c; --white: #1c1f27; --accent: #7fa8ff; --accent-ink: #0d1220; --accent-soft: rgba(127,168,255,.16); --dark: #7fa8ff; --dark-ink: #0d1220; --surface: #1c1f27; --surface-2: #20242e; --sidebar-bg: #191c24; --app-bg: #14161c; --line: rgba(236,233,226,.14); --shadow: 0 26px 60px rgba(0,0,0,.5), 0 4px 10px rgba(0,0,0,.3); --soft-shadow: 0 14px 35px rgba(0,0,0,.4); --serif: Georgia, "Times New Roman", serif; --radius-hero: 25px; --radius-card: 19px; --bg-texture: radial-gradient(rgba(236,233,226,.05) 1.2px, transparent 1.2px); } /* Sage Garden — soft botanical greens, a warm coral accent for contrast. */ [data-theme="sage"] { --paper: #f2f5ee; --ink: #1e2a1c; --muted: #5c6b56; --white: #fdfef9; --accent: #e0794f; --accent-ink: #fff; --accent-soft: rgba(224,121,79,.14); --dark: #263820; --dark-ink: #fff; --surface: #ffffff; --surface-2: #eaf0e3; --sidebar-bg: #e3ead9; --app-bg: #eef2e7; --serif: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --radius-hero: 40px; --radius-card: 30px; --bg-texture: radial-gradient(rgba(38,56,32,.05) 1.4px, transparent 1.4px); } /* Golden Hour — warm apricot paper, deep umber ink, an amber accent. Named for the light, not a season — meant to feel unhurried. */ [data-theme="golden"] { --paper: #fbf2e4; --ink: #3a2812; --muted: #8a6f4c; --white: #fffaf0; --accent: #d98a2b; --accent-ink: #2a1c0a; --accent-soft: rgba(217,138,43,.16); --dark: #3a2812; --dark-ink: #fff2dc; --surface: #fffaf0; --surface-2: #f7e8cf; --sidebar-bg: #f3e2c3; --app-bg: #faeed9; --serif: "Big Caslon", Garamond, Georgia, serif; --radius-hero: 35px; --radius-card: 26px; --shadow: 0 26px 60px rgba(140,90,20,.18), 0 4px 10px rgba(140,90,20,.09); --bg-texture: radial-gradient(rgba(58,40,18,.05) 1.2px, transparent 1.2px); } /* Ocean Mist — pale blue-grey paper, ink-navy text, a clear teal accent. */ [data-theme="ocean"] { --paper: #eef3f4; --ink: #10222b; --muted: #4f6a73; --white: #fbfeff; --accent: #1f8f8a; --accent-ink: #fff; --accent-soft: rgba(31,143,138,.14); --dark: #10222b; --dark-ink: #eafaf8; --surface: #ffffff; --surface-2: #e2edee; --sidebar-bg: #dbe8ea; --app-bg: #e7f0f1; --serif: Baskerville, "Times New Roman", Georgia, serif; --radius-hero: 27px; --radius-card: 20px; --bg-texture: repeating-linear-gradient(135deg, rgba(16,34,43,.035) 0 1.5px, transparent 1.5px 14px); --bg-texture-size: 100% 100%; } /* Lavender Fields — a softer, quieter palette; deep plum ink, dusty rose accent. Was the most-requested "calming" option in early sketches. */ [data-theme="lavender-fields"] { --paper: #f5f0f7; --ink: #2c1f36; --muted: #705f7d; --white: #fdfbfe; --accent: #b6567f; --accent-ink: #fff; --accent-soft: rgba(182,86,127,.14); --dark: #2c1f36; --dark-ink: #f6ecf9; --surface: #ffffff; --surface-2: #ede4f1; --sidebar-bg: #e6daec; --app-bg: #f0e9f3; --serif: "Big Caslon", "Book Antiqua", Georgia, serif; --radius-hero: 44px; --radius-card: 32px; --shadow: 0 30px 64px rgba(90,50,90,.16), 0 4px 10px rgba(90,50,90,.08); --bg-texture: radial-gradient(rgba(44,31,54,.05) 1.6px, transparent 1.6px); --bg-texture-size: 30px 30px; } /* High Contrast — an accessibility theme first, an aesthetic choice second: pure white paper, true-black ink, a saturated blue accent, no soft greys anywhere text needs to be read. Built for low-vision users, not just offered to them. */ [data-theme="contrast"] { --paper: #ffffff; --ink: #000000; --muted: #202020; --white: #ffffff; --accent: #0b4fd6; --accent-ink: #fff; --accent-soft: rgba(11,79,214,.16); --dark: #000000; --dark-ink: #ffffff; --surface: #ffffff; --surface-2: #f0f0f0; --sidebar-bg: #ececec; --app-bg: #ffffff; --line: rgba(0,0,0,.35); /* Flat and sharp on purpose: no soft shadows or delicate serif to strain against, no background texture to fight with low vision — the accessibility premise carries all the way into the shape language. */ --serif: system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --radius-hero: 10px; --radius-card: 8px; --shadow: 0 0 0 2px #000; --soft-shadow: 0 0 0 1.5px #000; --bg-texture: none; /* Glass is a legibility risk for a theme built for low vision — every "frosted" surface site-wide falls back to flat, fully opaque, sharp-edged panels here instead, via the same --glass-* tokens every component reads. */ --glass-blur: 0px; --glass-blur-strong: 0px; --glass-saturate: 100%; --glass-bg: var(--surface); --glass-bg-strong: var(--surface); --glass-border: var(--line); --glass-shadow: var(--soft-shadow); --glass-shadow-strong: var(--shadow); } /* Warm Sepia — the other accessibility-minded theme: a soft cream-brown paper and dark-brown ink read as gentler than black-on-white for a lot of older or light-sensitive eyes, styled after the sepia photographs a memory app is already full of. */ [data-theme="sepia"] { --paper: #f2e8d5; --ink: #3f2f1c; --muted: #7a6547; --white: #faf3e5; --accent: #a15a2e; --accent-ink: #fff; --accent-soft: rgba(161,90,46,.15); --dark: #3f2f1c; --dark-ink: #f6ead3; --surface: #faf3e5; --surface-2: #ecdfc3; --sidebar-bg: #e6d7b8; --app-bg: #f0e4c9; --serif: Georgia, "Times New Roman", serif; --radius-hero: 31px; --radius-card: 23px; --shadow: 0 22px 50px rgba(80,55,20,.2), 0 4px 10px rgba(80,55,20,.1); --bg-texture: radial-gradient(rgba(63,47,28,.06) 1.3px, transparent 1.3px); --bg-texture-size: 24px 24px; } /* Rose Quartz — a blush, gentle palette; maroon ink, a dusty-rose accent. */ [data-theme="rose"] { --paper: #fbeef0; --ink: #3a1520; --muted: #8a5c66; --white: #fff8f9; --accent: #c3536f; --accent-ink: #fff; --accent-soft: rgba(195,83,111,.14); --dark: #3a1520; --dark-ink: #fce8ec; --surface: #ffffff; --surface-2: #f6e2e5; --sidebar-bg: #f0d5d9; --app-bg: #f8e7ea; --serif: "Big Caslon", Garamond, Georgia, serif; --radius-hero: 38px; --radius-card: 28px; --bg-texture: radial-gradient(rgba(58,21,32,.05) 1.4px, transparent 1.4px); --bg-texture-size: 27px 27px; } html, body { transition: background-color .4s var(--ease), color .4s var(--ease); } * { box-sizing: border-box; } /* Scroll-snap was tried here and pulled against normal scroll momentum enough to feel sticky rather than gentle, so plain native smooth scrolling is what's left — nothing hijacks the wheel or trackpad. */ html { scroll-behavior: smooth; background: var(--paper); overflow-x: hidden; } body { margin: 0; background: var(--paper) var(--bg-texture) 0 0/var(--bg-texture-size); color: var(--ink); font-family: var(--sans); overflow-x: hidden; } button, input, textarea, select { font: inherit; } button { color: inherit; } a { color: inherit; text-decoration: none; } .hidden { display: none !important; } .landing-view { padding: 100px 14px 60px; } /* --hero-gap reserves the vertical space the copy block (headline + button) actually needs above the illustration. The headline's font-size scales with vw via clamp(), so at wide viewports a fixed pixel offset here used to run out — the "Try Meco Free" button ended up sitting on top of the mock window below it. Deriving the gap from the same kind of vw formula keeps the two in sync at every width instead of just at the one width this was last tuned for. min-height then reserves --hero-gap plus the illustration's own fixed height (485px, i.e. today's default 860 - 375) so the mountains/clouds/window composition is pixel-identical to before, just shifted down as a block — see .hero-art below. */ .hero-shell { --hero-gap: clamp(320px, 250px + 6vw, 370px); position: relative; min-height: calc(var(--hero-gap) + 370px); max-width: 1580px; margin: 0 auto 56px; overflow: hidden; border-radius: var(--radius-hero); background: radial-gradient(circle at 48% 15%, rgba(255,255,255,.48), transparent 28%), linear-gradient(180deg, #91d9f2 0%, #aee3f3 calc(100% - 256px), #f7f2ec calc(100% - 252px)); box-shadow: var(--shadow); } .hero-shell::before { content: ""; position: absolute; inset: 0; opacity: .26; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.23'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } /* Header glassmorphism — a genuine frosted-glass pill: strong blur + saturation so whatever scrolls behind it (hero gradients, page content) bleeds through as soft colour, a bright top edge catching the light the way real glass does, a faint dark underside, and an inner glow that keeps the whole pill feeling lit from within rather than flat. Built on color-mix(...,var(--surface),...) throughout — never a hardcoded white — so it reads as true glass on every one of the 9 themes, dark ones included, instead of a translucent white smear over a dark page. */ /* The whole nav unit — pill plus its collapsible mobile sheet — stays pinned together as one block, floating over the page as it scrolls. Fixed rather than sticky: this site sets overflow-x:hidden on both and (to stop decorative blobs causing horizontal scroll), and having two independent overflow-bearing ancestors makes browsers disagree about which one position:sticky should stick relative to — in practice it never engages at all. position:fixed sticks to the viewport directly, sidestepping that ambiguity entirely. .landing-view carries a matching top padding below so fixed content never overlaps the page underneath it on load. */ /* A thin reading-progress bar pinned to the very top edge of the viewport — width tracks how far down the current page you are, updated in app.js's rAF-throttled scroll handler. Sits above the nav (z-index 60 > 50) so it reads as chrome, not page content; pointer-events:none keeps it out of the way of anything underneath. */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; z-index: 60; pointer-events: none; background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--ink) 45%)); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 55%, transparent); } .nav-sticky-wrap { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 50; width: min(980px, calc(100% - 52px)); } .floating-nav { /* Glass only earns its name while something is actually visible moving behind it — the fixed wrapper above is what keeps this pinned over the hero gradient and every section as the page scrolls beneath it. */ position: relative; width: 100%; margin: 0 auto; min-height: 58px; /* A 3-column grid, not flex+margin:auto — with a short logo and a much wider action cluster, margin:auto only equalizes the leftover space on each side of nav-links, which is NOT the same as putting it in the pill's true visual centre. Two equal 1fr edge columns guarantee nav-links sits dead-centre regardless of how the two ends compare. minmax(0,1fr) — not bare 1fr — matters here: a bare 1fr track still carries an automatic min-width equal to its content's min-content, so if one side (actions: toggle+login+burger) is intrinsically wider than the other (the logo), the tracks stop being equal width and nav-links drifts off-centre toward the narrower side. minmax(0,…) removes that content-based floor so both edge columns are always genuinely equal. */ display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; column-gap: 20px; padding: 8px 14px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--surface) 46%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 78%, transparent); box-shadow: 0 18px 44px rgba(24, 75, 92, .18), 0 3px 10px rgba(24, 75, 92, .09), inset 0 1px 0 color-mix(in srgb, white 75%, var(--surface)), inset 0 -1px 0 color-mix(in srgb, black 8%, transparent), inset 0 0 26px 11px color-mix(in srgb, white 45%, transparent); backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate)); color: var(--ink); } .floating-nav::before { content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, white 85%, var(--surface)), transparent); pointer-events: none; } .floating-nav::after { content: ""; position: absolute; top: 12%; bottom: 12%; left: 0; width: 1px; background: linear-gradient(180deg, color-mix(in srgb, white 80%, transparent), transparent 65%, color-mix(in srgb, white 25%, transparent)); pointer-events: none; } /* A real wordmark, not bold-and-skewed sans: the same Instrument Serif italic already carrying every headline on the site ("A familiar face...") set as the logotype instead of a separate display face — so the logo reads as the first line of the site's own voice, not a bolted-on badge. Just weight and one accent-colored letter pair do the "premium" work; no icon, no gradient text-clip. */ .wordmark { display: inline-flex; align-items: baseline; font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: .01em; font-size: 30px; line-height: 1; white-space: nowrap; color: var(--ink); } .wordmark span { display: inline-block; } .wordmark span:last-child { color: var(--accent); } .nav-links { display: flex; gap: 23px; align-items: center; font-size: 15px; } .nav-links a { opacity: .82; transition: .2s ease; white-space: nowrap; } .nav-links a:hover { opacity: 1; transform: translateY(-1px); } .nav-actions { display: flex; align-items: center; gap: 8px; } /* Grid-column placement for the pill's 3 direct children — scoped here (not on the shared .wordmark/.nav-actions classes) since .wordmark is also reused standalone in the footer, outside any grid. */ .floating-nav > .wordmark { justify-self: start; } .floating-nav > .nav-links { justify-self: center; } .floating-nav > .nav-actions { justify-self: end; } .link-button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 10px 12px; border-radius: 999px; font-weight: 600; transition: background .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); } .link-button:hover { background: rgba(0,0,0,.05); } /* "Log in" in the header reads stronger as a quiet outlined pill than as bare text sitting loose next to a glass nav bar — a soft border gives it its own shape without competing with the primary "Try Meco Free" CTA. */ .link-button.ghost-pill { padding: 10px 20px; border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent); color: var(--ink); } .link-button.ghost-pill:hover { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: color-mix(in srgb, var(--ink) 28%, transparent); box-shadow: 0 4px 12px color-mix(in srgb, var(--ink) 8%, transparent); } .pill-button, .soft-button, .mode-button, .mini-action { border: 0; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .pill-button { display: inline-flex; justify-content: center; align-items: center; min-height: 46px; padding: 0 24px; border-radius: 999px; font-weight: 650; } .pill-button:hover:not(:disabled), .soft-button:hover:not(:disabled), .mode-button:hover:not(:disabled) { transform: translateY(-2px); } /* .action-button:disabled already dims; pill/soft/mode buttons had no disabled treatment at all, so e.g. "Capture front" or "Save trusted person" looked fully clickable while actually inert — a real trap for anyone relying on visual affordance rather than trial and error. */ .pill-button:disabled, .soft-button:disabled, .mode-button:disabled, .mini-action:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; } .pill-button.dark { color: var(--dark-ink); background: var(--dark); box-shadow: 0 8px 16px rgba(0,0,0,.18); } /* A quiet light-sweep on the primary CTAs — plays once on hover, not on a loop, so it reads as a response to the cursor rather than decoration. */ .pill-button.dark, .pill-button.glass { position: relative; overflow: hidden; isolation: isolate; } .pill-button.dark::before, .pill-button.glass::before { content: ""; position: absolute; inset: 0 -20% 0 -60%; z-index: -1; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.4) 48%, rgba(255,255,255,.4) 52%, transparent 65%); transform: translateX(-100%); pointer-events: none; } .pill-button.dark:hover:not(:disabled)::before, .pill-button.glass:hover:not(:disabled)::before { animation: pill-shine .85s var(--ease); } @keyframes pill-shine { to { transform: translateX(100%); } } .pill-button.glass { background: rgba(255,255,255,.5); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 12px 24px rgba(26, 58, 75, .18), inset 0 1px 0 white; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .pill-button.large { min-height: 54px; padding: 0 34px; font-size: 17px; } .pill-button.wide { width: 100%; } .soft-button { min-height: 44px; padding: 0 22px; border-radius: 999px; background: white; box-shadow: 0 10px 24px rgba(0,0,0,.10); font-weight: 650; } .mode-button { min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--dark); color: var(--dark-ink); font-weight: 650; } /* Sized down from the original — the hero used to run ~1050px tall on a 900px-tall laptop viewport (a 96px display face plus 86px of top margin plus a 360px mock window), meaning the fold cut through the middle of the illustration on every ordinary screen. Every number below was picked to still read as a confident hero, just one that fits closer to an actual viewport instead of forcing an immediate scroll. */ .hero-copy { position: relative; z-index: 5; width: min(860px, 90%); margin: 48px auto 0; text-align: center; } .eyebrow, .section-kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; } .hero-copy h1 { margin: 0; font-family: var(--serif); font-size: clamp(36px, 4vw, 60px); line-height: .96; letter-spacing: -.04em; font-weight: 400; } .hero-sub { max-width: 560px; margin: 16px auto 18px; color: rgba(10,9,8,.68); font-size: 16px; line-height: 1.5; } .hero-art { position: absolute; inset: var(--hero-gap, 375px) 0 0; } .hero-window { position: absolute; z-index: 6; width: min(860px, 66vw); height: 270px; left: 50%; bottom: -18px; transform: translateX(-50%); } .mock-window { overflow: hidden; border-radius: 18px; background: rgba(255,255,255,.91); border: 1px solid rgba(0,0,0,.07); box-shadow: var(--shadow); } .window-bar { height: 48px; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: rgba(249,249,249,.86); border-bottom: 1px solid rgba(0,0,0,.06); } .window-bar > span { width: 10px; height: 10px; border-radius: 50%; background: #d6d6d6; } .window-pill { margin: 0 auto; transform: translateX(-28px); padding: 7px 20px; background: white; border: 1px solid rgba(0,0,0,.06); box-shadow: 0 4px 10px rgba(0,0,0,.04); border-radius: 999px; font-size: 12px; } .mock-app-grid { display: grid; grid-template-columns: 150px 1fr; height: calc(100% - 48px); } .mock-sidebar { padding: 14px 10px; background: #f3f2ef; border-right: 1px solid rgba(0,0,0,.06); } .mock-mini-logo { width: 28px; height: 28px; margin: 0 0 16px 6px; border-radius: 9px; display: grid; place-items: center; background: black; color: white; font-weight: 800; } .mock-side-label { padding: 8px 10px; border-radius: 8px; margin-bottom: 2px; font-size: 11px; color: #6a6864; } .mock-side-label.active { background: white; color: black; font-weight: 700; } .mock-content { padding: 18px 20px; } .mock-heading-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .mock-heading-row small { display: block; font-size: 9px; color: #8a8884; margin-bottom: 4px; letter-spacing: .08em; } .mock-heading-row strong { font-family: var(--serif); font-size: 23px; font-weight: 400; } .mock-status { font-size: 10px; color: #4f7a5f; background: #ebf7ef; padding: 6px 9px; border-radius: 999px; } .memory-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .memory-card { min-height: 128px; padding: 12px; border-radius: 20px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: 0 8px 18px rgba(0,0,0,.07); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .memory-card b, .memory-card small { display: block; } .memory-card b { margin-top: 9px; font-size: 14px; } .memory-card small { opacity: .55; margin-top: 2px; font-size: 12px; } .memory-card p { margin-top: 14px; font-family: var(--serif); font-size: 14px; line-height: 1.15; } .coral { background: #ffbcb0; } .cream { background: #fffaf0; } .yellow { background: #ffe77c; } .mint { background: #c9efda; } .avatar-initial { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.65); display: grid; place-items: center; font-weight: 700; } .paper-strip { position: absolute; z-index: 2; background: white; opacity: .96; clip-path: polygon(0 44%, 7% 34%, 14% 40%, 20% 24%, 28% 34%, 36% 18%, 43% 29%, 51% 15%, 58% 25%, 66% 13%, 75% 23%, 83% 10%, 93% 18%, 100% 5%, 100% 100%, 0 100%); } .strip-one { width: 58%; height: 180px; left: 3%; top: 20px; transform: rotate(-4deg); } .strip-two { width: 48%; height: 160px; right: -4%; top: 62px; background: #1f1f1f; transform: rotate(2deg); } .paper-mountain { position: absolute; z-index: 4; bottom: 44px; background: #efeff2; filter: drop-shadow(0 8px 10px rgba(0,0,0,.05)); } .mountain-one { width: 390px; height: 240px; left: 49%; clip-path: polygon(0 100%, 9% 59%, 20% 46%, 28% 11%, 41% 23%, 52% 38%, 65% 24%, 78% 55%, 89% 60%, 100% 100%); } .mountain-two { width: 330px; height: 180px; right: 10%; clip-path: polygon(0 100%, 10% 57%, 25% 48%, 38% 20%, 53% 37%, 68% 16%, 80% 55%, 100% 100%); background: #fff; } .mountain-three { width: 520px; height: 180px; left: 0; clip-path: polygon(0 100%, 0 53%, 13% 43%, 24% 51%, 36% 31%, 49% 42%, 61% 24%, 75% 46%, 86% 34%, 100% 64%, 100% 100%); background: #8ea7e5; } .yellow-slope { position: absolute; z-index: 3; right: -2%; bottom: 0; width: 30%; height: 245px; background: #ffe370; clip-path: polygon(22% 20%, 100% 0, 100% 100%, 0 100%); transform: rotate(-2deg); } .yellow-slope::before, .yellow-slope::after { content: ""; position: absolute; width: 120%; height: 1px; left: -10%; background: #638148; transform: rotate(-5deg); } .yellow-slope::before { top: 74px; } .yellow-slope::after { top: 126px; } .cloud { position: absolute; z-index: 1; width: 200px; height: 85px; background: rgba(255,255,255,.82); filter: blur(5px); border-radius: 50%; } .cloud::before, .cloud::after { content: ""; position: absolute; border-radius: 50%; background: inherit; } .cloud::before { width: 90px; height: 90px; left: 32px; top: -34px; } .cloud::after { width: 115px; height: 115px; right: 13px; top: -52px; } .cloud-one { left: -45px; top: 2px; } .cloud-two { right: 20px; top: -70px; } .feature-panel { max-width: 1320px; min-height: 740px; margin: 0 auto 72px; padding: 58px; border-radius: var(--radius-xl); display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 56px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .feature-panel::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } .feature-panel > * { position: relative; z-index: 1; } .blue-panel { background: linear-gradient(135deg, #b5c7fb, #aebefa); } .green-panel { background: linear-gradient(135deg, #76d598, #8bd69e); grid-template-columns: .7fr 1.3fr; } .yellow-panel { background: linear-gradient(135deg, #ffe67b, #ffdf65); grid-template-columns: .7fr 1.3fr; } .coral-panel { background: linear-gradient(135deg, #ffcbb8, #ffa88f); } .feature-copy h2 { margin: 0 0 24px; font-family: var(--serif); font-size: clamp(50px, 5vw, 72px); line-height: .98; font-weight: 400; letter-spacing: -.035em; } .feature-copy > p:not(.section-kicker) { max-width: 500px; margin: 0 0 28px; font-size: 18px; line-height: 1.55; color: rgba(10,9,8,.68); } .left-copy { padding-left: 20px; } .layered-visual { min-height: 550px; position: relative; } .back-window, .front-window { position: absolute; width: 78%; min-height: 410px; } .back-window { top: 5px; left: 0; } .front-window { left: 74px; top: 170px; } .peach-window { background: #fff6ee; } .people-list-mini { padding: 28px 22px; display: grid; gap: 12px; } .people-list-mini > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; padding: 14px; background: white; border-radius: 14px; box-shadow: 0 7px 16px rgba(0,0,0,.06); } .people-list-mini span { grid-column: 2; color: #8a8884; font-size: 12px; } .face-dot { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: block; } .face-a { background: #ffb4a8; } .face-b { background: #c7d2ff; } .face-c { background: #c7eed5; } .recognition-card { padding: 30px 34px; } .recognition-portrait { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; font-weight: 700; background: #ffc1ad; margin-bottom: 22px; } .recognition-card h3 { font-size: 26px; margin: 0 0 12px; } .recognition-card p { margin: 0; line-height: 1.6; color: #5b5752; } .confidence-row { display: flex; justify-content: space-between; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(0,0,0,.1); } .icon-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 34px; margin-top: 42px; } .icon-feature-grid > div { display: flex; align-items: center; gap: 14px; font-size: 17px; } .line-icon { font-size: 28px; width: 34px; text-align: center; } .integration-board { display: grid; gap: 18px; } .integration-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .integration-card { padding: 26px 28px; background: color-mix(in srgb, white 62%, transparent); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: 0 12px 26px rgba(25,68,37,.14); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .integration-card h3 { margin: 0 0 22px; display: flex; align-items: center; gap: 12px; font-size: 19px; } .integration-card small { display: block; margin-top: 16px; color: #72716d; } .logo-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 13px; } .tile { min-height: 68px; border-radius: 20px; display: grid; place-items: center; gap: 3px; padding: 10px; text-align: center; box-shadow: 0 8px 16px rgba(0,0,0,.1); transition: transform .2s var(--ease); } .tile:hover { transform: translateY(-2px); } .tile-brand { font-weight: 800; font-size: 15px; letter-spacing: -.01em; } .tile-icon { font-size: 17px; line-height: 1; } .tile-label { font-size: 11px; font-weight: 700; letter-spacing: .02em; opacity: .85; } /* Wordmark tiles name the real services Meco integrates with, in a colour evoking (not claiming to reproduce) each one's own brand identity. */ .tile.assemblyai { background: #5b4dff; color: #fff; } .tile.deepgram { background: #10d888; color: #06251a; } .tile.clerk { background: linear-gradient(135deg,#6957ff,#b195ff); color: #fff; } .tile.appwrite { background: #fd366e; color: #fff; } .tile.shield { background: #202936; color: #fff; } .tile.lock { background: #f8f8f8; color: #11100f; } .wide-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .wide-buttons span { padding: 14px; background: #a5dfb2; border-radius: 13px; text-align: center; font-weight: 650; } .community-stack { display: flex; align-items: center; justify-content: flex-end; gap: 25px; } .avatar-stack { display: flex; } .avatar-stack i { width: 43px; height: 43px; border-radius: 50%; border: 2px solid white; margin-left: -9px; } .avatar-stack i:nth-child(1){background:#8ed9f1}.avatar-stack i:nth-child(2){background:#95dca7}.avatar-stack i:nth-child(3){background:#aebbf3}.avatar-stack i:nth-child(4){background:#ffe08a}.avatar-stack i:nth-child(5){background:#161616} .community-stack small { display: block; color: #86837e; margin-top: 4px; } .care-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .care-tile { min-height: 270px; padding: 28px; background: color-mix(in srgb, white 62%, transparent); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: 0 13px 26px rgba(122,88,18,.13); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .care-tile h3 { margin: 0; display: flex; gap: 12px; align-items: center; font-size: 20px; } .date-block { margin-top: 118px; padding: 20px 24px; background: #d6e7ff; border-radius: 16px; } .date-block strong, .date-block b, .date-block small { display: block; } .date-block b { color: #1c87ee; font-size: 24px; margin: 3px 0; } .date-block small { color: #8796a5; } .check-list { list-style: none; padding: 0; margin: 100px 0 12px; } .check-list li { margin: 11px 0; } .check-list li::before { content: "□"; margin-right: 10px; color: #78a9ee; } .check-list .done { text-decoration: line-through; color: #a9a5a0; } .check-list .done::before { content: "☑"; } .mini-action { border-radius: 9px; padding: 7px 10px; background: #d8e9ff; color: #2587e7; font-weight: 650; } .note-preview { margin-top: 75px; padding: 22px; border-radius: 14px; background: white; box-shadow: 0 8px 18px rgba(0,0,0,.08); } .note-preview p { color: #706e69; line-height: 1.45; } /* Caregiver's signature moment — an actual week-view grid, not another card layout, so this page reads as "a planner" at a glance rather than a reskinned version of every other chapter. */ .week-planner { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; margin-top: 8px; } .week-planner-day { min-height: 190px; padding: 16px 12px; border-radius: 18px; background: #fffaf0; border: 1px solid rgba(201,143,18,.16); display: flex; flex-direction: column; gap: 8px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); } .week-planner-day:hover { transform: translateY(-4px); box-shadow: 0 14px 26px rgba(201,143,18,.16); } .week-planner-day b { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #a68a3a; } .week-planner-day.today { background: #fff4d9; border-color: #c98f12; box-shadow: 0 12px 26px rgba(201,143,18,.2); } .week-planner-day.today b { color: #8a5f10; } .week-planner-chip { padding: 9px 10px; border-radius: 11px; font-size: 12px; font-weight: 650; line-height: 1.3; background: #fff; box-shadow: 0 5px 12px rgba(0,0,0,.06); } .week-planner-chip.visit { background: #ffe67b; color: #5c4a06; } .week-planner-chip.reminder { background: #fff; border: 1px dashed #c98f12; color: #8a742f; } @media (max-width: 860px) { .week-planner { grid-template-columns: repeat(2, 1fr); } .week-planner-day { min-height: auto; } } .reminders { margin-top: 130px; padding-left: 25px; } .reminders p { font-size: 17px; line-height: 1.35; } .reminders b { color: #d1a51c; margin-right: 8px; } .organize-section { max-width: 1450px; margin: 105px auto 110px; text-align: center; position: relative; } .centered { text-align: center; } .display-heading { margin: 0; font-family: var(--serif); font-size: clamp(38px, 4.2vw, 62px); line-height: .96; font-weight: 400; letter-spacing: -.035em; } .centered-copy { max-width: 880px; margin: 26px auto 68px; color: #696662; font-size: 18px; line-height: 1.55; } .organize-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; text-align: center; } .organize-card { min-height: 560px; border-radius: 32px; padding: 34px 28px 0; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .organize-card h3 { margin: 0; font-family: var(--serif); font-size: 52px; font-weight: 400; } .organize-card > p { margin: 9px 0 48px; color: #6a6b70; font-size: 18px; } .organize-card.lavender { background: linear-gradient(180deg, color-mix(in srgb, #b9c4f5 72%, transparent), color-mix(in srgb, #98b9ef 72%, transparent)); } .organize-card.sky { background: linear-gradient(180deg, color-mix(in srgb, #91def2 72%, transparent), color-mix(in srgb, #4eb9e9 72%, transparent)); } .organize-card.mint { background: linear-gradient(180deg, color-mix(in srgb, #d7f4df 72%, transparent), color-mix(in srgb, #83d49a 72%, transparent)); } .organize-mock { width: 88%; min-height: 360px; margin: 0 auto; border-radius: 22px 22px 0 0; background: rgba(255,255,255,.92); box-shadow: 0 13px 30px rgba(0,0,0,.14); text-align: left; padding: 26px; } .people-mock div { position: relative; display: grid; grid-template-columns: 45px 1fr; padding: 16px; margin-bottom: 15px; border-radius: 14px; background: #f8f7f4; transition: background .2s var(--ease); } .people-mock div:hover { background: #f1efe9; } .people-mock i { grid-row: span 2; width: 36px; height: 36px; display: grid; place-items:center; border-radius: 50%; background:#ffd0c0; font-style:normal; } .people-mock small { color:#777; } .pm-memory { position: absolute; left: 61px; top: 100%; margin-top: 2px; font-style: normal; color: #a49f97; font-size: 11px; opacity: 0; transform: translateY(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none; white-space: nowrap; } .people-mock div:hover .pm-memory { opacity: 1; transform: translateY(0); } .folders-mock { transform: rotate(-3deg); display: grid; align-content: start; gap: 18px; font-size: 18px; } .table-mock { width: 112%; margin-left: 2%; padding: 18px; } .table-mock div { display: grid; grid-template-columns: 70px 1fr 80px; gap: 10px; padding: 16px 5px; border-bottom: 1px solid #eee; } .table-mock em { color: #55966c; font-style: normal; } .editorial-flow { max-width: 1320px; margin: 0 auto; } .editorial-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 70px; margin: 130px 0 55px; } .editorial-media { min-height: 480px; border-radius: 26px; padding: 34px; box-shadow: var(--soft-shadow); } .yellow-media { background: #ffe78c; } .blue-media { background: #b7c8f8; } .visit-sheet { height: 100%; background: #fffdf8; border-radius: 15px; padding: 36px; box-shadow: 0 8px 18px rgba(0,0,0,.08); } .visit-sheet small { letter-spacing: .1em; color: #858079; } .visit-sheet h3 { font-family: var(--serif); font-size: 42px; margin: 22px 0 14px; font-weight: 400; } .visit-sheet p, .visit-sheet li { color: #66625c; line-height: 1.55; } .editorial-copy h2 { font-family: var(--serif); font-size: 58px; line-height: .98; margin: 0 0 24px; font-weight: 400; } .editorial-copy > p { color: #696662; line-height: 1.6; font-size: 17px; } .clean-list { list-style: none; padding: 0; margin: 28px 0; } .clean-list li { margin: 13px 0; } .clean-list li::before { content: "◎"; margin-right: 12px; } .testimonial { max-width: 980px; margin: 65px auto 145px; display: grid; grid-template-columns: 50px 1fr; gap: 22px; align-items: start; } .testimonial p { margin: 0; font-family: var(--serif); font-size: 34px; line-height: 1.18; font-style: italic; } .testimonial cite { grid-column: 2; font-style: normal; color: #77736f; } .quote-avatar { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; } @keyframes spin { to { transform: rotate(360deg); } } .privacy-banner { min-height: 580px; border-radius: 28px; margin: 150px 0 80px; padding: 60px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; align-items: center; color: white; overflow: hidden; position: relative; background: radial-gradient(circle at 75% 30%, rgba(91,145,108,.34), transparent 33%), linear-gradient(135deg,#1a2c24,#0a1510 60%,#16291f); box-shadow: var(--shadow); } .privacy-banner h2 { margin: 0 0 20px; font-family: var(--serif); font-size: 58px; line-height: .98; font-weight: 400; } .privacy-banner p { max-width: 450px; color: rgba(255,255,255,.72); line-height: 1.6; margin-bottom: 28px; } .privacy-device { height: 430px; display: grid; place-items: center; } .privacy-screen { width: 80%; min-height: 340px; padding: 38px; border-radius: 22px; background: rgba(238,244,239,.9); color: #151815; transform: rotate(4deg); box-shadow: 0 25px 45px rgba(0,0,0,.35); } .privacy-screen h3 { font-family: var(--serif); font-size: 48px; margin: 25px 0; font-weight: 400; } .privacy-lines { display: grid; gap: 14px; } .privacy-lines span { height: 9px; background: #c6d0c8; border-radius: 99px; } .privacy-lines span:nth-child(2){width:85%}.privacy-lines span:nth-child(3){width:92%}.privacy-lines span:nth-child(4){width:68%} .privacy-badge { display: inline-block; margin-top: 34px; padding: 9px 13px; background: #d4ead9; color: #316340; border-radius: 999px; font-size: 12px; } .pricing-section { max-width: 1160px; margin: 150px auto 100px; padding: 70px; border-radius: 28px; background: #bdd0fb; display: grid; grid-template-columns: 1fr .82fr; gap: 60px; align-items: center; box-shadow: var(--shadow); } .pricing-copy > p:not(.section-kicker) { color:#696662; max-width:500px; line-height:1.55; } .price-card { padding: 38px; border-radius: 26px; background: color-mix(in srgb, white 62%, transparent); border: 1px solid var(--glass-border); box-shadow: var(--soft-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .price-label { font-size: 12px; letter-spacing: .1em; font-weight: 700; } .price-card h3 { font-family: var(--serif); font-size: 42px; margin: 15px 0 0; font-weight: 400; } .price { font-size: 42px; font-weight: 700; margin: 16px 0 22px; } .price small { font-size: 14px; font-weight: 500; color: #777; } .price-card ul { list-style: none; padding: 0; margin: 0 0 26px; } .price-card li { margin: 12px 0; } .price-card li::before { content: "✓"; margin-right: 10px; } .price-card > small { display: block; color:#777; margin-top:14px; text-align:center; } .site-footer { max-width: 1320px; margin: 70px auto 0; border-top: 1px solid var(--line); padding: 48px 0 0; } .footer-top { display: grid; grid-template-columns: 1.6fr .8fr .8fr .8fr .9fr; gap: 32px; padding-bottom: 40px; } .footer-brand p { margin: 14px 0 18px; color: var(--muted); max-width: 30ch; line-height: 1.5; font-size: 14px; } .footer-brand .theme-toggle { width: auto; padding: 0 14px; border-radius: 999px; font-size: 12.5px; gap: 6px; } .footer-col { display: flex; flex-direction: column; gap: 11px; } .footer-col-head { margin: 0 0 3px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .footer-col a, .footer-col button.link-button { color: var(--ink); opacity: .78; font-size: 14.5px; transition: opacity .2s var(--ease), transform .2s var(--ease); text-align: left; padding: 0; background: none; border: 0; cursor: pointer; width: fit-content; } .footer-col a:hover, .footer-col button.link-button:hover { opacity: 1; transform: translateX(2px); } .footer-cta-col .pill-button { margin-top: 4px; width: fit-content; } .footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0 30px; border-top: 1px solid var(--line); flex-wrap: wrap; } .footer-bottom p { margin: 0; color: var(--muted); font-size: 13px; } .footer-bottom p a { text-decoration: underline; text-underline-offset: 2px; opacity: .85; } .footer-bottom p a:hover { opacity: 1; } .footer-bottom-links { display: flex; gap: 18px; } .footer-bottom-links a { font-size: 13px; color: var(--muted); transition: color .2s var(--ease); } .footer-bottom-links a:hover { color: var(--ink); } /* A soft focus-pull on top of the existing translate/scale — elements arrive very slightly blurred and sharpen as they settle, the same "focus catching up" feel a camera has, not just a slide. filter transitions are cheap (no layout, no paint of neighbours) so this adds real polish for free. transition-delay is set per group below (.stagger-group) or left at 0 for standalone .reveal-* elements. */ .reveal { opacity: 0; transform: translateY(30px) scale(.98); filter: blur(7px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } .reveal-left { opacity: 0; transform: translateX(-46px); filter: blur(7px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } .reveal-left.visible { opacity: 1; transform: translateX(0); filter: blur(0); } .reveal-right { opacity: 0; transform: translateX(46px); filter: blur(7px); transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); } .reveal-right.visible { opacity: 1; transform: translateX(0); filter: blur(0); } .reveal-up { opacity: 0; transform: translateY(52px); filter: blur(8px); transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease); } .reveal-up.visible { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal-scale { opacity: 0; transform: scale(.82); filter: blur(6px); transition: opacity .6s var(--ease-spring), transform .6s var(--ease-spring), filter .6s var(--ease-spring); } .reveal-scale.visible { opacity: 1; transform: scale(1); filter: blur(0); } .organize-grid > *:nth-child(1) { transition-delay: 0s; } .organize-grid > *:nth-child(2) { transition-delay: .12s; } .organize-grid > *:nth-child(3) { transition-delay: .24s; } .deep-grid > .reveal:nth-child(1),.teaser-grid > .reveal:nth-child(1) { transition-delay: 0s; } .deep-grid > .reveal:nth-child(2),.teaser-grid > .reveal:nth-child(2) { transition-delay: .08s; } .deep-grid > .reveal:nth-child(3),.teaser-grid > .reveal:nth-child(3) { transition-delay: .16s; } .deep-grid > .reveal:nth-child(4),.teaser-grid > .reveal:nth-child(4) { transition-delay: .24s; } /* Global interaction polish */ button:focus-visible, a:focus-visible, .side-nav:focus-visible, .icon-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: inherit; } .pill-button, .soft-button, .mode-button, .action-button, .link-button, .icon-button, .mini-action { transition: transform .4s var(--ease-spring), box-shadow .25s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), opacity .2s var(--ease); } .pill-button:active:not(:disabled), .soft-button:active, .mode-button:active, .action-button:active:not(:disabled), .link-button:active, .icon-button:active { transform: scale(.94); transition-duration: .12s; } .pill-button.dark:hover { box-shadow: 0 14px 28px rgba(0,0,0,.32), 0 0 0 6px rgba(255,255,255,.08); } .action-button:hover:not(:disabled) { border-color: rgba(0,0,0,.24); transform: translateY(-1px); } .action-button.primary:hover:not(:disabled) { box-shadow: 0 10px 22px rgba(0,0,0,.24); } /* Floating / app nav gain a little weight — and shrink slightly — once the page scrolls */ .floating-nav { transition: box-shadow .3s var(--ease), background-color .3s var(--ease), min-height .3s var(--ease), padding .3s var(--ease); } .floating-nav.scrolled { min-height: 50px; padding-top: 6px; padding-bottom: 6px; background: color-mix(in srgb, var(--surface) 68%, transparent); box-shadow: 0 18px 40px rgba(24,75,92,.24), 0 3px 12px rgba(24,75,92,.1), inset 0 1px 0 color-mix(in srgb, white 80%, var(--surface)), inset 0 -1px 0 color-mix(in srgb, black 10%, transparent), inset 0 0 22px 9px color-mix(in srgb, white 40%, transparent); } .app-topbar { transition: box-shadow .25s var(--ease); } .app-topbar.scrolled { box-shadow: 0 8px 20px rgba(0,0,0,.07); } /* Underline slides in under the active nav tab instead of just appearing */ .nav-links a[data-landing-nav] { position: relative; } .nav-links a[data-landing-nav]::after { content: ""; position: absolute; left: 2px; right: 2px; bottom: -9px; height: 3px; border-radius: 99px; background: var(--tab-color, #11100f); transform: scaleX(0); transition: transform .4s var(--ease-spring); transform-origin: center; } .nav-links a.active::after { transform: scaleX(1); } /* The hamburger + sheet that stand in for .nav-links once it disappears below 1100px — before this, that width range had no way at all to reach Recognize/Product/etc. */ .nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; border: 0; background: transparent; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-burger span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .3s var(--ease-spring), opacity .2s var(--ease); } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-mobile-sheet { position: relative; z-index: 9; width: min(980px, calc(100% - 52px)); margin: 8px auto 0; padding: 6px 22px 20px; border-radius: 26px; background: color-mix(in srgb, var(--surface) 94%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 14px 32px rgba(24,75,92,.18); backdrop-filter: blur(16px); display: flex; flex-direction: column; } .nav-mobile-sheet.hidden { display: none; } .nav-mobile-sheet:not(.hidden) { animation: nav-sheet-in .3s var(--ease); } @keyframes nav-sheet-in { from { opacity: 0; transform: translateY(-10px); } } .nav-mobile-sheet a { padding: 14px 4px; border-bottom: 1px solid var(--line); font-weight: 650; color: var(--ink); transition: padding-left .2s var(--ease), color .2s var(--ease); } .nav-mobile-sheet a:hover { padding-left: 6px; color: var(--accent); } .nav-mobile-sheet a:last-of-type { border-bottom: 0; } .nav-mobile-actions { display: flex; gap: 10px; margin-top: 16px; } .nav-mobile-actions .pill-button.wide { flex: 1; } @media (min-width: 1101px) { .nav-mobile-sheet { display: none !important; } } @media (max-width: 1100px) { .nav-burger { display: flex; } } /* A soft light that follows the cursor across the landing page — barely there, just enough to make the surface feel responsive. Desktop only. */ .cursor-glow { position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; z-index: 3; opacity: 0; background: radial-gradient(circle, rgba(255,255,255,.65), transparent 70%); filter: blur(18px); mix-blend-mode: soft-light; transition: opacity .5s ease; will-change: transform; } .cursor-glow.active { opacity: .6; } /* Tilt-reactive cards — JS sets rotateX/rotateY/translateY inline on mousemove (max ~4deg); this just supplies the settle-back transition and richer shadow, and is the whole effect on touch/reduced-motion. */ .deep-card, .teaser-card, .integration-card, .price-card, .memory-card, .care-tile, .organize-card, .metric-card { transition: transform .5s var(--ease-out), box-shadow .35s var(--ease); transform-style: preserve-3d; } .deep-card:hover, .teaser-card:hover, .integration-card:hover, .price-card:hover, .care-tile:hover, .organize-card:hover, .metric-card:hover { box-shadow: var(--shadow-premium-hover); } /* Hero ambient motion — slow and layered, never distracting */ .cloud { animation: cloud-drift 24s ease-in-out infinite; } .cloud-two { animation-duration: 29s; animation-delay: -8s; } @keyframes cloud-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(22px, -10px); } } .hero-shell { background-size: 160% 160%; animation: hero-shimmer 20s ease-in-out infinite; } @keyframes hero-shimmer { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 60% 30%; } } .paper-mountain { animation: bob 10s ease-in-out infinite; } .mountain-one { animation-duration: 9s; } .mountain-two { animation-duration: 11s; animation-delay: -4s; } .mountain-three { animation-duration: 13s; animation-delay: -1.5s; } @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .yellow-slope { animation: bob-tilt 12s ease-in-out infinite; animation-delay: -6s; } @keyframes bob-tilt { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(-2deg) translateY(-9px); } } /* Whole scene drifts a few pixels toward the cursor for a light parallax feel */ .hero-art { transition: transform .35s var(--ease); will-change: transform; } .hero-art::before { content: ""; position: absolute; z-index: 0; inset: -80px 10% 40% 10%; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.6), transparent 62%); animation: sun-glow 9s ease-in-out infinite; } @keyframes sun-glow { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: .6; transform: scale(1.06); } } /* Landing card hover lift */ .memory-card, .integration-card, .care-tile, .tile, .price-card, .recognition-card { transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .memory-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 0 16px 30px rgba(0,0,0,.15); } .integration-card:hover { transform: translateY(-5px); box-shadow: 0 20px 36px rgba(25,68,37,.22); } .care-tile:hover { transform: translateY(-5px); box-shadow: 0 20px 34px rgba(122,88,18,.22); } .tile:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 12px 22px rgba(0,0,0,.18); } .price-card:hover { transform: translateY(-6px); box-shadow: 0 22px 42px rgba(0,0,0,.18); } .organize-card, .organize-mock { transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .organize-card:hover { transform: translateY(-7px); box-shadow: 0 32px 64px rgba(0,0,0,.2); } .organize-card:hover .organize-mock { transform: translateY(-4px) rotate(.4deg); } /* App dashboard: page transition, sidebar, cards, form controls */ @keyframes page-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* Every page render now cascades in — the top-level blocks under #app-content (page-head, then whichever card/grid wrapper follows) each get a touch of delay, and any card inside a 12-col .app-grid staggers again one level deeper — instead of the old behaviour where the whole page slid up as one flat rectangle. renderAppPage() already re-triggers this by toggling .page-enter off/on (with a forced reflow) on every navigation, so this applies automatically everywhere, no per-page code. */ .app-content.page-enter > * { opacity: 0; animation: page-in .5s var(--ease) both; } .app-content.page-enter > *:nth-child(1) { animation-delay: 0s; } .app-content.page-enter > *:nth-child(2) { animation-delay: .06s; } .app-content.page-enter > *:nth-child(3) { animation-delay: .12s; } .app-content.page-enter > *:nth-child(4) { animation-delay: .18s; } .app-content.page-enter .app-grid > * { opacity: 0; animation: page-in .5s var(--ease) both; } .app-content.page-enter .app-grid > *:nth-child(1) { animation-delay: .08s; } .app-content.page-enter .app-grid > *:nth-child(2) { animation-delay: .13s; } .app-content.page-enter .app-grid > *:nth-child(3) { animation-delay: .18s; } .app-content.page-enter .app-grid > *:nth-child(4) { animation-delay: .23s; } .app-content.page-enter .app-grid > *:nth-child(5) { animation-delay: .28s; } .app-content.page-enter .app-grid > *:nth-child(n+6) { animation-delay: .32s; } /* Patient mode's fixed-height, no-scroll layout is meant to feel calm and settled, not busy with cascading motion every tab switch — opt it out. */ .app-content-fixed.page-enter > * { animation: none; opacity: 1; } .side-nav { transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); } .side-nav:hover { transform: translateX(2px); } /* The sidebar nav cascades in once, the moment the console first mounts — handled in JS (initSidebarReveal) via a one-shot .sidebar-ready class on .sidebar-nav-scroll so it only ever plays on entry, never on every click. */ .sidebar-nav-scroll > * { opacity: 0; transform: translateX(-10px); } .sidebar-nav-scroll.sidebar-ready > * { animation: side-nav-in .45s var(--ease) both; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(1) { animation-delay: .02s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(2) { animation-delay: .05s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(3) { animation-delay: .08s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(4) { animation-delay: .11s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(5) { animation-delay: .14s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(6) { animation-delay: .17s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(7) { animation-delay: .2s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(8) { animation-delay: .23s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(9) { animation-delay: .26s; } .sidebar-nav-scroll.sidebar-ready > *:nth-child(n+10) { animation-delay: .29s; } @keyframes side-nav-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } .metric-card { transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .metric-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(0,0,0,.12); } .reminder-check input { transition: transform .15s var(--ease); } .reminder-check input:active { transform: scale(1.2); } /* Modals restart their entrance animation every time .hidden is removed */ .modal-backdrop:not(.hidden) { animation: modal-backdrop-in .22s var(--ease); } .modal-backdrop:not(.hidden) > * { animation: modal-card-in .3s var(--ease); } @keyframes modal-backdrop-in { from { opacity: 0; } } @keyframes modal-card-in { from { opacity: 0; transform: translateY(18px) scale(.97); } } .toast.leaving { animation: toast-out .25s var(--ease) forwards; } @keyframes toast-out { to { opacity: 0; transform: translateY(8px) scale(.95); } } /* App */ .app-view { min-height: 100vh; background: var(--app-bg); color: var(--ink); } .app-topbar { position: sticky; top: 0; z-index: 30; height: 74px; display: grid; grid-template-columns: 220px 1fr 220px; align-items: center; padding: 0 22px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); } .app-wordmark { border:0; background:transparent; cursor:pointer; width:max-content; } .app-top-center { display:flex; justify-content:center; gap:10px; } .status-chip { display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; background:white; border:1px solid rgba(0,0,0,.08); font-size:12px; color:#65615c; } .status-chip i { width:7px; height:7px; border-radius:50%; background:#d4a138; } .status-chip.ready i { background:#4ea768; } .status-chip.error i { background:#c85b4a; } .app-top-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; } .app-layout { display:grid; grid-template-columns:260px 1fr; min-height:calc(100vh - 74px); } .app-sidebar { position: sticky; top: 74px; height: calc(100vh - 74px); padding: 22px 16px; display: flex; flex-direction: column; overflow: hidden; background: var(--glass-bg-strong); border-right: 1px solid var(--glass-border); backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate)); box-shadow: 1px 0 0 color-mix(in srgb, white 40%, transparent), 8px 0 24px rgba(24,75,92,.05); } /* The nav list is the one part of the sidebar that grows with the feature set (9 destinations at launch, 11 now) — it needs its own scroll region so that growth never pushes "Open patient mode" below the fold. That button, and the caregiver note above it, stay outside this wrapper and are always on screen no matter how tall the list above them gets or how short the window is. */ .sidebar-nav-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; display:flex; flex-direction:column; } .side-nav { display:flex; align-items:center; gap:12px; width:100%; padding:12px 14px; border:0; border-radius:13px; background:transparent; cursor:pointer; text-align:left; color:var(--muted); font-weight:600; flex-shrink:0; } .side-nav:hover { background:color-mix(in srgb, var(--surface) 65%, transparent); } .side-nav.active { background:var(--surface); color:var(--ink); box-shadow:0 8px 18px rgba(0,0,0,.06); } .side-nav span:not(.patient-entry-label) { width:22px; text-align:center; font-size:18px; } /* Groups the growing nav list into scannable clusters instead of one long flat list — the sidebar started at 9 destinations and Insights/Care Notes push it to 11, past the point a flat list stays skimmable. */ .side-nav-group { margin:16px 0 4px; padding:0 14px; font-size:10px; font-weight:700; letter-spacing:.09em; color:#8c8780; flex-shrink:0; } .side-nav-group:first-of-type { margin-top:10px; } .side-nav-gap { height:14px; flex-shrink:0; } .care-note { flex-shrink:0; padding:17px; margin:12px 0 12px; border-radius:16px; background:#ffe37e; box-shadow:0 8px 16px rgba(105,77,13,.1); } .care-note small { font-size:10px; letter-spacing:.08em; font-weight:700; } .care-note p { margin:9px 0 0; font-family:var(--serif); font-size:18px; line-height:1.15; } /* This button also carries data-page="patient", so while patient mode is actually open it also matches .side-nav.active — which outranks the plain .patient-entry rule above (two classes beat one) and would swap its text back to dark. It stays visually a black CTA regardless of "active" state, so every combination is spelled out explicitly rather than relying on source-order alone to keep the (still-equal-specificity) hover rules winning. */ .patient-entry, .patient-entry.active { background:var(--dark); color:var(--dark-ink); gap:8px; } .patient-entry-label { white-space:nowrap; font-size:15px; } .patient-entry:hover, .patient-entry.active:hover { background:var(--dark); filter:brightness(1.25); color:var(--dark-ink); } .app-content { padding:34px; min-width:0; } /* Patient mode locks to exactly one screen — no page scroll. Height is the viewport minus the topbar; the quickbar and tab bar are fixed-height flex children and .patient-tabset-panels takes whatever's left. Only a transcript long enough to need it scrolls, and only inside its own panel — the frame around it never moves. */ #app-content.app-content-fixed { height: calc(100vh - 74px); height: calc(100dvh - 74px); overflow: hidden; padding: 16px 22px 18px; display: flex; flex-direction: column; } .page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:30px; } .page-head h1 { margin:0; font-family:var(--serif); font-size:58px; line-height:.95; font-weight:400; } .page-head p { margin:10px 0 0; color:#726e68; } .app-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; } /* A deliberately quiet utility strip, not a feature — small type, muted colour, no icon, tucked at the very bottom of the page under everything else so it reads as infrastructure rather than something to notice. */ .demo-code-strip { display:flex; align-items:center; justify-content:center; gap:9px; margin:46px 0 6px; padding:10px; opacity:.5; transition:opacity .2s var(--ease); } .demo-code-strip:focus-within, .demo-code-strip:hover { opacity:1; } .demo-code-strip label { font-size:11px; font-weight:600; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; } .demo-code-strip input { width:64px; padding:6px 9px; border-radius:8px; border:1px solid var(--line); background:var(--white); font-size:13px; text-align:center; } .demo-code-strip button { padding:6px 14px; font-size:12.5px; border-radius:8px; } .app-card { position: relative; background: var(--glass-bg); color: var(--ink); border: 1px solid var(--glass-border); border-radius: var(--radius-card); padding: 24px; box-shadow: var(--glass-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .app-card.blue { background: color-mix(in srgb, #d2dcfc 62%, transparent); } .app-card.green { background: color-mix(in srgb, #d3f0da 62%, transparent); } .app-card.yellow { background: color-mix(in srgb, #ffefb9 62%, transparent); } .app-card.peach { background: color-mix(in srgb, #ffe0d5 62%, transparent); } .app-card h2,.app-card h3 { margin-top:0; } .metric-card { grid-column:span 3; min-height:150px; display:flex; flex-direction:column; justify-content:space-between; } .metric-card strong { font-family:var(--serif); font-size:52px; font-weight:400; } .metric-card span { color:#625e58; } .activity-card { grid-column:span 8; min-height:360px; } .quick-card { grid-column:span 4; min-height:360px; } .memory-book-card { grid-column:span 6; min-height:250px; } .section-card { grid-column:span 12; } .card-head { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:18px; } .card-head h2 { margin:0; font-family:var(--serif); font-size:34px; font-weight:400; } .empty-state { min-height:210px; display:grid; place-items:center; text-align:center; color:#77726c; } .session-list,.people-list,.memory-list { display:grid; gap:12px; } .session-row,.person-row,.memory-row,.companion-row,.journal-row { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:14px; border-radius:15px; background:#f7f4ef; transition: background .2s var(--ease); } .session-row:hover { background: #f0ece3; } .session-row-preview { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .session-row:hover .session-row-preview { grid-template-rows: 1fr; } .session-row-preview > p { overflow: hidden; margin: 6px 0 0; color: #85807a; font-size: 12px; line-height: 1.45; } .person-avatar { width:46px; height:46px; border-radius:50%; overflow:hidden; background:#ffd0c1; display:grid; place-items:center; font-weight:700; } .person-avatar img { width:100%; height:100%; object-fit:cover; } .row-copy { min-width:0; } .row-copy b,.row-copy small { display:block; } .row-copy small { color:#7e7973; margin-top:4px; } .row-meta { font-size:12px; color:#777; text-align:right; } .badge { display:inline-flex; align-items:center; padding:6px 9px; border-radius:999px; font-size:11px; font-weight:700; background:#e9eee9; color:#526657; } .badge.success { background:#d7f0d9; color:#2f6b3a; } .badge.error { background:#fbdcd8; color:#a13a2c; } /* ---------- Overview teaser tiles (Insights / Care Notes) ---------- */ .teaser-tile { display:flex; align-items:center; gap:16px; cursor:pointer; transition:transform .2s var(--ease), box-shadow .2s var(--ease); } .teaser-tile:hover { transform:translateY(-3px); box-shadow:0 16px 30px rgba(44,34,23,.1); } .teaser-tile:focus-visible { outline:2px solid var(--accent); outline-offset:2px; } .teaser-tile-icon { flex-shrink:0; width:46px; height:46px; border-radius:14px; display:grid; place-items:center; font-size:20px; background:#f0ece3; transition:transform .3s var(--ease-spring); } .teaser-tile:hover .teaser-tile-icon { transform:rotate(-8deg) scale(1.08); } .teaser-tile h3 { margin:0 0 3px; font-family:var(--serif); font-size:20px; font-weight:400; } .teaser-tile p { margin:0; color:#726e68; font-size:13px; line-height:1.4; } .teaser-tile-go { margin-left:auto; flex-shrink:0; color:#a49f97; font-size:18px; transition:transform .2s var(--ease); } .teaser-tile:hover .teaser-tile-go { transform:translateX(4px); color:#11100f; } /* ---------- Insights ---------- */ .insight-bars { display:grid; gap:12px; } .insight-bar-row { display:grid; grid-template-columns:110px 1fr 34px; align-items:center; gap:12px; } .insight-bar-label { font-size:13px; font-weight:650; color:#4c4842; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .insight-bar-track { height:10px; border-radius:999px; background:#f0ece3; overflow:hidden; } .insight-bar-fill { height:100%; border-radius:999px; transition:width .6s var(--ease); } .insight-bar-value { font-size:12px; font-weight:700; color:#726e68; text-align:right; } .mood-trend-row { display:flex; flex-wrap:wrap; gap:10px; } .mood-trend-chip { display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 12px; border-radius:14px; background:var(--surface-2); font-size:22px; transition:transform .18s var(--ease-spring); } .mood-trend-chip:hover { transform:translateY(-2px); } .mood-trend-chip small { font-size:10.5px; font-weight:600; color:var(--muted); } /* ---------- Care Notes ---------- */ .care-notes-list { display:grid; gap:10px; } .care-note-row { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:14px 16px; border-radius:15px; background:#f7f4ef; transition:background .2s var(--ease); } .care-note-row:hover { background:#f0ece3; } .care-note-row.pinned { background:#fff4e0; border:1px solid rgba(201,143,18,.18); } .care-note-pin-flag { display:block; margin-bottom:4px; font-size:11px; font-weight:700; color:#a5720f; } .care-note-row-body p { margin:0; font-size:14px; line-height:1.5; color:#2c2a27; } .care-note-row-body small { display:block; margin-top:6px; color:#85807a; font-size:12px; } /* The "I need help" button gets a slow, quiet breathing glow — noticeable without being alarming — since it's the one control on this screen that matters most to never miss. */ .quickbar-icon-btn.danger { animation:sos-breathe 3.2s ease-in-out infinite; } .quickbar-icon-btn.danger:hover { animation-play-state:paused; } @keyframes sos-breathe { 0%,100% { box-shadow:0 0 0 0 rgba(166,62,52,0); } 50% { box-shadow:0 0 0 6px rgba(166,62,52,.14); } } .elder-mode .quickbar-icon-btn { width:48px; height:48px; font-size:22px; } .elder-mode .patient-tabset-btn { min-height:52px; font-size:1.05em; } /* A one-tap mood log — separate from the full Journal, which asks for writing. Sits right under the orientation strip so it's the first thing answered, not a feature buried behind a menu. */ .mood-checkin-strip { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:14px 22px; margin-bottom:14px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 8px 18px rgba(0,0,0,.05); animation:patient-card-in .5s var(--ease) both; animation-delay:.02s; } .mood-checkin-head { display:flex; flex-direction:column; gap:2px; font-weight:650; } .mood-checkin-head small { font-weight:500; color:var(--muted); } .mood-checkin-options { display:flex; gap:8px; } .mood-checkin-chip { width:44px; height:44px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); font-size:21px; line-height:1; cursor:pointer; display:grid; place-items:center; transition:transform .18s var(--ease-spring), box-shadow .18s var(--ease), background .2s var(--ease); } .mood-checkin-chip:hover { transform:translateY(-2px) scale(1.08); box-shadow:0 8px 16px rgba(0,0,0,.14); background:var(--accent-soft); } .mood-checkin-chip:active { transform:scale(.92); animation:calming-chip-pop .3s var(--ease-spring); } .elder-mode .mood-checkin-chip { width:54px; height:54px; font-size:26px; } @media (max-width:760px) { .mood-checkin-strip { padding:12px 16px; } .mood-checkin-chip { width:40px; height:40px; font-size:19px; } } /* SOS confirmation replaces the "Ready when you are" card's content in place — same box, calmer color, so nothing jumps around on screen right when the patient is looking for reassurance. */ .matched-card.sos-active { background:rgba(255,255,255,.95); border:2px solid #4ea768; } .matched-card.sos-active h3 { color:#2f6b3a; } .flagged-alert-banner.sos { background:#fff4e0; box-shadow:0 10px 24px rgba(201,143,18,.14); } .flagged-alert-banner.sos .flagged-alert-copy b, .flagged-alert-banner.sos .flagged-alert-copy p { color:#8a5f10; } .flagged-alert-banner.sos .action-button { background:#8a5f10; } .flagged-alert-banner.sos .action-button:hover { background:#6e4b0c; } /* ---------- Browse memories ---------- */ .memories-browse { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:18px; } .memory-browse-card { padding:28px 24px; border-radius:22px; background:#fff; box-shadow:var(--soft-shadow); text-align:center; } .memory-browse-portrait { width:84px; height:84px; margin:0 auto 16px; border-radius:50%; overflow:hidden; background:#ffd0c1; display:grid; place-items:center; font-size:32px; font-weight:700; font-family:var(--serif); } .memory-browse-portrait img { width:100%; height:100%; object-fit:cover; } .memory-browse-card h2 { margin:0; font-family:var(--serif); font-size:26px; font-weight:400; } .memory-browse-card small { display:block; margin:2px 0 14px; color:#85807a; } .memory-browse-card p { margin:0; font-family:var(--serif); font-size:17px; line-height:1.35; color:#2c2a27; } .memories-browse.elder-mode .memory-browse-card p { font-size:1.2em; } .memories-browse.elder-mode .memory-browse-portrait { width:104px; height:104px; font-size:40px; } /* ---------- Companion chat ---------- */ .companion-row { cursor:pointer; transition: background .2s var(--ease); } .companion-row:hover { background:#f0ece3; } .companion-row.flagged { background:#fbe9e6; } .companion-row .row-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .companion-row-meta { display:flex; flex-direction:column; align-items:flex-end; gap:6px; } .companion-overview-card { background:linear-gradient(135deg,#fdfaf3,#f7f0e0); } .trend-chart-wrap { position:relative; } .trend-chart { width:100%; height:auto; overflow:visible; display:block; } .trend-grid { stroke:rgba(0,0,0,.08); stroke-width:1; } .trend-axis-label { font-size:10px; fill:#948f88; font-family:var(--sans); } .trend-line { fill:none; stroke:#4f9d6e; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; } .trend-point { fill:#fff; stroke:#4f9d6e; stroke-width:2.5; cursor:pointer; transition:r .15s var(--ease); } .trend-point:hover, .trend-point:focus-visible { r:7; outline:none; } .trend-tooltip { position:absolute; transform:translate(-50%,-115%); background:#080706; color:#fff; padding:8px 12px; border-radius:10px; font-size:12px; line-height:1.5; max-width:220px; white-space:normal; pointer-events:none; box-shadow:var(--soft-shadow); z-index:5; } .trend-tooltip b { font-weight:650; } .trend-tooltip span { color:#c9c4bc; } /* ---------- Elder-friendly display mode ---------- */ /* Scoped to patient-facing containers only (Patient mode, companion chat, journal composer) — the caregiver's own dashboard keeps its normal density. Most of the app sizes type in px rather than rem, so a single root font-size bump wouldn't cascade; the elements that most need it are targeted directly instead. */ .elder-mode { font-size:19px; } .elder-mode p, .elder-mode label, .elder-mode small { font-size:1em; } .elder-mode .action-button { min-height:56px; padding:0 26px; font-size:1.05em; } .elder-mode .pill-button { min-height:58px; padding:0 30px; font-size:1.1em; } .elder-mode .patient-controls button { min-height:58px; font-size:1.05em; } .elder-mode .matched-card h3 { font-size:32px; } .elder-mode .matched-card p { font-size:1.15em; } .elder-mode .companion-chat-title strong { font-size:30px; } .elder-mode .companion-bubble { font-size:1.25em; padding:16px 20px; } .elder-mode .companion-chat-form input { font-size:1.2em; padding:18px 24px; } .elder-mode .companion-chat-form button { min-height:58px; padding:0 28px; font-size:1.1em; } .elder-mode .companion-mic-btn { width:60px; height:60px; font-size:24px; } .elder-mode .companion-voice-toggle { min-height:48px; font-size:15px; padding:0 20px; } .elder-mode .mood-chip { padding:20px 10px; } .elder-mode .mood-chip .mood-emoji { font-size:38px; } .elder-mode .mood-chip span:last-child { font-size:15px; } .elder-mode .journal-prompt { font-size:1.15em; } .elder-mode .journal-editor { font-size:1.15em; min-height:200px; padding:20px 22px; } .elder-mode .journal-toolbar button { min-width:44px; height:44px; } .elder-mode #save-journal-entry { min-height:58px; padding:0 30px; font-size:1.1em; } .elder-mode-toggle { display:flex; align-items:flex-start; gap:12px; cursor:pointer; padding:14px 16px; border-radius:14px; background:#f7f4ef; } .elder-mode-toggle input { margin-top:4px; width:18px; height:18px; accent-color:#080706; flex-shrink:0; } .elder-mode-toggle b { display:block; font-size:15px; } .elder-mode-toggle small { display:block; color:#7e7973; margin-top:2px; line-height:1.5; } .companion-overview-body { display:flex; align-items:center; gap:22px; } .companion-overview-body .score-ring { width:96px; height:96px; flex-shrink:0; } .companion-overview-body .score-ring strong { font-size:22px; } .companion-overview-copy b { display:block; font-family:var(--serif); font-size:20px; font-weight:400; margin-bottom:6px; } .companion-overview-copy p { margin:0 0 8px; color:#5b5752; line-height:1.5; } .companion-overview-copy small { color:#85807a; font-style:italic; } .companion-disclaimer { margin:0 0 20px; padding:16px 18px; border-radius:16px; background:#fff4e0; border:1px solid rgba(201,143,18,.25); color:#6b5416; font-size:13px; line-height:1.55; } .companion-analysis { padding:18px 20px; border-radius:16px; background:#f7f4ef; margin-bottom:6px; } .companion-flag-banner { padding:12px 14px; margin-bottom:14px; border-radius:12px; background:#fbdcd8; color:#8a2f22; font-weight:600; font-size:13px; } .flagged-alert-banner { display:flex; align-items:center; gap:16px; padding:18px 22px; margin-bottom:22px; border-radius:18px; background:#fbdcd8; box-shadow:0 10px 24px rgba(161,58,44,.12); } .flagged-alert-icon { font-size:26px; flex-shrink:0; } .flagged-alert-copy { flex:1; } .flagged-alert-copy b { display:block; color:#8a2f22; font-size:15px; } .flagged-alert-copy p { margin:4px 0 0; color:#8a2f22; opacity:.85; font-size:13px; } .flagged-alert-banner .action-button { flex-shrink:0; background:#8a2f22; color:#fff; border:0; } .flagged-alert-banner .action-button:hover { background:#6f2419; } .flagged-alert-banner.briefing { background:#dbe6fb; box-shadow:0 10px 24px rgba(44,79,158,.12); align-items:flex-start; } .flagged-alert-banner.briefing .flagged-alert-copy b, .flagged-alert-banner.briefing .flagged-alert-copy p { color:#2c4f9e; } .flagged-alert-banner.briefing .action-button { background:#2c4f9e; } .flagged-alert-banner.briefing .action-button:hover { background:#223e7d; } .briefing-full { display:grid; gap:12px; margin-top:14px; } .briefing-entry { padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.55); } .briefing-entry b { display:block; color:#2c4f9e; } .briefing-entry small { color:#4a63a0; font-weight:600; } .briefing-entry p { margin:4px 0 0; color:#2c4f9e; opacity:.85; font-size:13px; } .briefing-empty { font-style:italic; opacity:.7; } .companion-note { margin:0 0 12px; font-size:15px; line-height:1.5; } .companion-meta-row { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; } .companion-safety-note { margin:0; font-size:12px; color:#85807a; font-style:italic; } .companion-transcript { display:grid; gap:10px; } .companion-transcript .companion-bubble { max-width:65%; } .companion-bubble { max-width:75%; padding:12px 16px; border-radius:22px; line-height:1.5; } .companion-bubble p { margin:0; } .companion-bubble.ai { justify-self:start; background:#f0ece3; border-bottom-left-radius:6px; } .companion-bubble.patient { justify-self:end; background:#c2d0fb; border-bottom-right-radius:6px; margin-left:auto; } /* Companion's signature moment — a real, multi-turn message thread, the one page-level motif none of the other chapters use. Sized and framed like an actual phone conversation, not another card grid. */ .conversation-thread { max-width: 620px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding: 34px 30px; border-radius: 30px; background: linear-gradient(180deg,#fff8f5,#fff1ea); box-shadow: 0 22px 48px rgba(255,140,100,.16); } .conversation-thread .companion-bubble { display: block; width: fit-content; font-size: 15px; box-shadow: 0 6px 16px rgba(0,0,0,.05); } @media (max-width: 640px) { .conversation-thread { padding: 24px 18px; } .conversation-thread .companion-bubble { max-width: 88%; } } .companion-chat-page { display:flex; flex-direction:column; min-height:calc(100vh - 200px); max-width:760px; margin:0 auto; background:#fff; border-radius:28px; box-shadow:var(--shadow); overflow:hidden; } .companion-chat-head { display:flex; align-items:center; justify-content:space-between; padding:20px 26px; border-bottom:1px solid rgba(0,0,0,.06); } .companion-chat-title strong { display:block; font-family:var(--serif); font-size:24px; font-weight:400; } .companion-chat-title small { color:#85807a; } .companion-chat-scroll { flex:1; display:flex; flex-direction:column; gap:14px; padding:26px; overflow-y:auto; min-height:400px; } .companion-chat-scroll .companion-bubble { font-size:17px; align-self:flex-start; max-width:80%; } .companion-chat-scroll .companion-bubble.patient { align-self:flex-end; } .companion-typing { display:flex; gap:5px; align-items:center; padding:16px 18px; } .companion-typing span { width:7px; height:7px; border-radius:50%; background:#a49f97; animation: companion-bounce 1.2s infinite; } .companion-typing span:nth-child(2) { animation-delay:.15s; } .companion-typing span:nth-child(3) { animation-delay:.3s; } @keyframes companion-bounce { 0%,60%,100% { transform:translateY(0); opacity:.5; } 30% { transform:translateY(-5px); opacity:1; } } .companion-chat-form { display:flex; gap:10px; padding:20px 26px; border-top:1px solid rgba(0,0,0,.06); } .companion-chat-form input { flex:1; border:1px solid rgba(0,0,0,.13); border-radius:999px; padding:14px 20px; font-size:16px; background:#fffdf9; outline:none; } .companion-chat-form input:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .companion-chat-head-actions { display:flex; align-items:center; gap:10px; } .companion-voice-toggle { border:1px solid rgba(0,0,0,.12); background:#fffdf9; border-radius:999px; padding:0 16px; min-height:40px; font-weight:650; font-size:13px; cursor:pointer; transition:background .15s var(--ease), transform .15s var(--ease); } .companion-voice-toggle:hover { background:#f0ece3; transform:translateY(-1px); } .companion-voice-toggle[aria-pressed="true"] { background:#d7f0d9; border-color:transparent; color:#2f6b3a; } .companion-mic-btn { width:48px; height:48px; border-radius:50%; border:1px solid rgba(0,0,0,.13); background:#fffdf9; font-size:19px; cursor:pointer; display:grid; place-items:center; flex-shrink:0; transition:background .15s var(--ease), transform .15s var(--ease); } .companion-mic-btn:hover { background:#f0ece3; transform:translateY(-1px); } .companion-mic-btn.listening { background:#fbdcd8; border-color:transparent; color:#a13a2c; animation:companion-mic-pulse 1.2s ease-in-out infinite; } @keyframes companion-mic-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(161,58,44,.35); } 50% { box-shadow:0 0 0 10px rgba(161,58,44,0); } } /* ---------- Journal ---------- */ /* Mood colors read left-to-right on the picker as a gentle spectrum, easier to harder — the color itself carries meaning, not just decoration. */ .mood-happy { background:var(--yellow); } .mood-calm { background:var(--mint); } .mood-okay { background:var(--blue); } .mood-tired { background:var(--lavender); } .mood-anxious { background:var(--peach); } .mood-sad { background:var(--blue-soft); } .journal-row .row-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } .mood-avatar { font-size:20px; } .mood-trend-strip { display:flex; flex-wrap:wrap; gap:6px; } .mood-dot { width:16px; height:16px; border-radius:50%; display:inline-block; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); } .mood-trend-legend { display:flex; flex-wrap:wrap; gap:14px; margin-top:16px; padding-top:14px; border-top:1px solid rgba(0,0,0,.07); } .mood-trend-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#726e68; } .mood-trend-legend-item .mood-dot { width:10px; height:10px; } .journal-composer-page { display:flex; flex-direction:column; gap:22px; max-width:720px; margin:0 auto; background:#fff; border-radius:28px; box-shadow:var(--shadow); padding:36px 40px 40px; } .journal-composer-head { display:flex; align-items:center; justify-content:space-between; } .journal-composer-title strong { display:block; font-family:var(--serif); font-size:28px; font-weight:400; } .journal-composer-title small { color:#85807a; } .journal-prompt { margin:0; font-size:18px; color:#4c4842; } .mood-picker { display:grid; grid-template-columns:repeat(6,1fr); gap:10px; } .mood-chip { display:flex; flex-direction:column; align-items:center; gap:6px; padding:16px 8px; border:2px solid transparent; border-radius:20px; background:#f4f0e8; cursor:pointer; font-family:var(--sans); font-size:13px; transition:transform .18s var(--ease-spring), border-color .18s var(--ease), box-shadow .18s var(--ease); } .mood-chip .mood-emoji { font-size:30px; line-height:1; } .mood-chip:hover { transform:translateY(-3px); } .mood-chip.selected { border-color:var(--ink); transform:scale(1.05); box-shadow:var(--soft-shadow); } .journal-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:14px; row-gap:8px; } .toolbar-group { display:inline-flex; gap:6px; padding-right:14px; border-right:1px solid rgba(0,0,0,.12); } .toolbar-group:last-child { border-right:0; padding-right:0; } .journal-toolbar button { min-width:38px; height:38px; padding:0 8px; border-radius:10px; border:1px solid rgba(0,0,0,.13); background:#fffdf9; cursor:pointer; font-size:14px; font-weight:650; display:grid; place-items:center; transition:background .15s var(--ease), transform .15s var(--ease); } .journal-toolbar button code { background:none; padding:0; font-size:12px; } .journal-toolbar button svg { display:block; } .journal-toolbar button:hover { background:#f0ece3; transform:translateY(-1px); } .journal-toolbar button:active { transform:translateY(0); } .journal-editor { width:100%; min-height:180px; border:1px solid rgba(0,0,0,.13); border-radius:18px; padding:16px 18px; font-size:16px; font-family:var(--sans); background:#fffdf9; outline:none; line-height:1.6; } .journal-editor:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .journal-editor:empty::before { content:attr(data-placeholder); color:#a39d94; } .journal-composer-actions { display:flex; justify-content:flex-end; } .journal-detail-eyebrow { margin:0 0 8px; font-weight:650; color:#726e68; } .journal-detail-text { font-size:17px; line-height:1.75; margin-top:20px; color:#2c2a27; } /* Shared by the live editor and the read-only detail view, since both render the same sanitized tag set. */ .journal-editor strong,.journal-detail-text strong,.journal-editor b,.journal-detail-text b { font-weight:700; } .journal-editor em,.journal-detail-text em,.journal-editor i,.journal-detail-text i { font-style:italic; } .journal-editor u,.journal-detail-text u { text-decoration:underline; } .journal-editor h2,.journal-detail-text h2 { font-family:var(--serif); font-size:26px; font-weight:400; margin:.5em 0 .25em; } .journal-editor h3,.journal-detail-text h3 { font-family:var(--serif); font-size:21px; font-weight:400; margin:.5em 0 .25em; } .journal-editor ul,.journal-detail-text ul,.journal-editor ol,.journal-detail-text ol { margin:.4em 0; padding-left:1.4em; } .journal-editor li,.journal-detail-text li { margin:.2em 0; } .journal-editor blockquote,.journal-detail-text blockquote { margin:.5em 0; padding:6px 16px; border-left:3px solid rgba(0,0,0,.15); color:#5d5a56; font-style:italic; } .journal-editor code,.journal-detail-text code { background:#f0ece3; padding:1px 6px; border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em; } .action-row { display:flex; gap:10px; flex-wrap:wrap; } .visit-card { grid-column:span 4; min-height:212px; display:flex; flex-direction:column; gap:14px; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease; } .visit-card:hover,.visit-card:focus-visible { transform:translateY(-3px); box-shadow:0 18px 34px rgba(44,34,23,.13); outline:none; } .visit-card-top { display:flex; align-items:center; gap:12px; } .visit-card h3 { margin:0; font-family:var(--serif); font-size:29px; font-weight:400; line-height:1.05; } .visit-card-date { color:#7e7973; font-size:12px; margin-top:3px; } .visit-card p { margin:0; color:#5f5b56; font-size:14px; line-height:1.45; flex:1; } .visit-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; } .visit-card-foot small { color:#7e7973; } .visits-card,.reminders-card { grid-column:span 6; min-height:230px; } .visit-list,.reminder-list { display:grid; gap:10px; } .visit-date-row { display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center; padding:12px; border-radius:15px; background:rgba(255,255,255,.55); } .visit-date-row.today { background:#c2d0fb; } .visit-date-row.past { opacity:.6; } .visit-date-box { display:flex; flex-direction:column; align-items:flex-start; line-height:1.15; min-width:64px; } .visit-date-box .visit-day { font-size:11px; font-weight:700; letter-spacing:.03em; color:#5b5650; } .visit-date-box strong { font-family:var(--serif); font-size:20px; font-weight:400; } .visit-date-box small { color:#5b5650; } .reminder-row { display:grid; grid-template-columns:auto auto 1fr auto; gap:12px; align-items:center; padding:12px; border-radius:15px; background:rgba(255,255,255,.55); transition: background .2s var(--ease); } .reminder-row:hover { background: rgba(255,255,255,.85); } .reminder-row.done .reminder-text { text-decoration:line-through; color:#8c8780; } .reminder-linked-visit { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease); } .reminder-row:hover .reminder-linked-visit { grid-template-rows: 1fr; } .reminder-linked-visit > small { overflow: hidden; display: block; margin-top: 4px; padding-left: 41px; color: #5d80e6; font-weight: 700; font-size: 11px; } .reminder-check input { width:17px; height:17px; accent-color:#11100f; } .reminder-time { font-weight:700; color:#c07a2b; white-space:nowrap; } .section-card .visit-date-row,.section-card .reminder-row { background:#f7f4ef; } .section-card .visit-date-row.today { background:#c2d0fb; } .synced-badge { margin-left:6px; vertical-align:middle; } .row-icon-actions { display:flex; gap:4px; } .icon-button { border:0; background:transparent; color:#7e7973; cursor:pointer; font-size:14px; width:30px; height:30px; border-radius:9px; display:grid; place-items:center; } .icon-button:hover { background:rgba(0,0,0,.07); color:#11100f; } .icon-button.danger:hover { color:#a63e34; } .detail-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; flex-wrap:wrap; margin-bottom:20px; } .detail-head h2 { margin:0; font-family:var(--serif); font-size:42px; font-weight:400; line-height:1.02; } .detail-head small { display:block; color:#7e7973; margin-top:6px; } .formatting-state { min-height:210px; display:grid; align-content:center; gap:13px; padding:26px 22px; text-align:center; } .formatting-state strong { font-family:var(--serif); font-size:24px; font-weight:400; } .formatting-state small { color:#7e7973; } .progress-track { height:8px; border-radius:999px; background:#e6e1da; overflow:hidden; } .progress-fill { height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,#8bdaf2,#11100f); transition:width .55s cubic-bezier(.22,.61,.36,1); } .action-button { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:12px; padding:10px 13px; cursor:pointer; font-weight:650; } .action-button.primary { background:var(--dark); color:var(--dark-ink); border-color:var(--dark); } .action-button.danger { color:#a63e34; } .action-button:disabled { opacity:.45; cursor:not-allowed; } .form-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:18px; } .form-field { display:grid; gap:8px; } .form-field.full { grid-column:1/-1; } .form-field label { font-size:12px; font-weight:700; letter-spacing:.04em; } .form-field input,.form-field textarea,.form-field select,.face-form-side input,.face-form-side textarea { width:100%; border:1px solid var(--line); border-radius:13px; padding:12px 13px; background:var(--surface); color:var(--ink); outline:none; } .form-field input:focus,.form-field textarea:focus,.form-field select:focus,.face-form-side input:focus,.face-form-side textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .repeat-days-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:-8px; } .repeat-days-row[hidden] { display:none; } .repeat-day-chip { min-width:46px; height:38px; padding:0 10px; border-radius:999px; border:1px solid rgba(0,0,0,.13); background:#fffdf9; font-size:12px; font-weight:650; cursor:pointer; transition:background .15s var(--ease), transform .15s var(--ease), border-color .15s var(--ease); } .repeat-day-chip:hover { transform:translateY(-1px); } .repeat-day-chip.selected { background:#080706; color:#fff; border-color:transparent; } .repeat-badge { display:block; color:#726e68; font-weight:600; white-space:nowrap; } .range-row { display:grid; grid-template-columns:1fr auto; gap:15px; align-items:center; } .range-row input { width:100%; } .range-row span:last-child { font-size:12px; color:rgba(10,9,8,.5); white-space:nowrap; } .privacy-data-intro { margin:2px 0 18px; color:var(--muted); font-size:14px; line-height:1.55; max-width:60ch; } .privacy-data-list { display:grid; gap:1px; border-radius:14px; overflow:hidden; background:var(--line); } .privacy-data-row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:16px; padding:16px 18px; background:var(--surface); } .privacy-data-row-copy { display:flex; flex-direction:column; gap:3px; } .privacy-data-row-copy small { color:var(--muted); font-size:13px; line-height:1.45; max-width:52ch; } .privacy-data-row .action-button.danger:disabled { opacity:.35; } @media (max-width:760px) { .privacy-data-row { grid-template-columns:1fr; gap:10px; } .privacy-data-row .badge { justify-self:start; } } .settings-group { padding-top:26px; margin-top:26px; border-top:1px solid rgba(0,0,0,.08); } .settings-group:first-child { padding-top:0; margin-top:0; border-top:none; } .settings-group-title { margin:0 0 16px; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:rgba(10,9,8,.45); } .settings-actions { margin-top:28px; padding-top:24px; border-top:1px solid rgba(0,0,0,.08); } .range-label { display:flex; align-items:center; justify-content:space-between; gap:10px; } .range-value-badge { font-weight:700; font-variant-numeric:tabular-nums; color:var(--accent); background:var(--accent-soft); padding:2px 10px; border-radius:999px; letter-spacing:0; } .form-field input[type="range"] { -webkit-appearance:none; appearance:none; border:none; background:rgba(0,0,0,.1); padding:0; height:6px; border-radius:999px; } .form-field input[type="range"]::-webkit-slider-runnable-track { height:6px; border-radius:999px; background:rgba(0,0,0,.1); } .form-field input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; margin-top:-7px; border-radius:50%; background:#1c1a17; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.3); cursor:pointer; } .form-field input[type="range"]::-moz-range-track { height:6px; border-radius:999px; background:rgba(0,0,0,.1); border:none; } .form-field input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#1c1a17; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.3); cursor:pointer; } .form-field input[type="range"]:focus { box-shadow:none; } .form-field input[type="range"]:focus::-webkit-slider-thumb { box-shadow:0 0 0 4px rgba(110,142,232,.25); } .form-field input[type="range"]:focus::-moz-range-thumb { box-shadow:0 0 0 4px rgba(110,142,232,.25); } .custom-select { position:relative; } .custom-select select { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .custom-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; border:1px solid rgba(0,0,0,.13); border-radius:13px; padding:12px 13px; background:#fffdf9; cursor:pointer; font:inherit; text-align:left; color:#1c1a17; } .custom-select-trigger:hover { border-color:rgba(0,0,0,.26); } .custom-select.disabled .custom-select-trigger { opacity:.55; cursor:not-allowed; } .custom-select.disabled .custom-select-trigger:hover { border-color:rgba(0,0,0,.13); } .conversation-lang-row { margin:10px 0; gap:12px; } .conversation-lang-row .form-field label { font-size:11px; opacity:.75; } .custom-select.open .custom-select-trigger,.custom-select-trigger:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .custom-select-chevron { flex:none; width:8px; height:8px; margin-top:-4px; border-right:2px solid rgba(10,9,8,.4); border-bottom:2px solid rgba(10,9,8,.4); transform:rotate(45deg); transition:transform .15s ease; } .custom-select.open .custom-select-chevron { margin-top:2px; transform:rotate(-135deg); } .custom-select-panel { position:absolute; z-index:40; left:0; right:0; top:calc(100% + 6px); display:none; max-height:260px; overflow-y:auto; padding:6px; background:#fffdf9; border:1px solid rgba(0,0,0,.1); border-radius:14px; box-shadow:0 16px 34px rgba(44,34,23,.16); } .custom-select.open .custom-select-panel { display:block; } .custom-select-option { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:9px; font-size:14px; line-height:1.3; cursor:pointer; } .custom-select-option:hover,.custom-select-option.active { background:rgba(110,142,232,.1); } .custom-select-option.selected { background:var(--accent-soft); color:var(--accent); font-weight:700; } .custom-select-option.selected::after { content:'✓'; font-weight:700; } .patient-page { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; } /* ---- Quickbar: compact greeting + mood/calming popovers + memories/help ---- */ .patient-quickbar { position:relative; flex-shrink:0; display:flex; align-items:center; gap:12px; padding:10px 14px; margin-bottom:12px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 8px 18px rgba(0,0,0,.05); } .quickbar-back { flex-shrink:0; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); font-size:18px; cursor:pointer; display:grid; place-items:center; color:var(--ink); transition:transform .15s var(--ease-spring), background .2s var(--ease); } .quickbar-back:hover { transform:translateX(-2px); background:var(--accent-soft); } .quickbar-greeting { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; } .quickbar-greeting b { font-size:15.5px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .quickbar-greeting small { color:var(--muted); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .quickbar-orientation-extra { color:#8a742f !important; } .quickbar-actions { flex-shrink:0; display:flex; gap:7px; } .quickbar-icon-btn { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:var(--surface-2); font-size:18px; cursor:pointer; display:grid; place-items:center; transition:transform .18s var(--ease-spring), box-shadow .18s var(--ease), background .2s var(--ease); } .quickbar-icon-btn:hover { transform:translateY(-2px) scale(1.06); box-shadow:0 8px 16px rgba(0,0,0,.12); } .quickbar-icon-btn:active { transform:scale(.92); } .quickbar-icon-btn.active { background:var(--accent-soft); border-color:var(--accent); } .quickbar-icon-btn.danger { border-color:rgba(166,62,52,.3); } .quickbar-icon-btn.danger:hover { background:#fbdcd8; } .patient-popover { position:absolute; z-index:20; top:calc(100% + 8px); right:12px; width:min(360px, calc(100vw - 56px)); max-height:calc(100vh - 160px); overflow-y:auto; padding:16px 18px; border-radius:18px; background:var(--surface); border:1px solid var(--line); box-shadow:0 24px 50px rgba(0,0,0,.2); animation:nav-sheet-in .25s var(--ease); } .patient-popover.hidden { display:none; } .patient-popover .mood-checkin-strip { padding:0; margin:0; border:0; box-shadow:none; background:none; animation:none; flex-direction:column; align-items:stretch; gap:10px; } .patient-popover .mood-checkin-options { flex-wrap:wrap; } .patient-popover .calming-popover-body .card-head { margin-bottom:12px; } /* ---- Tabbed Camera / Conversation / Report — one screen, one panel visible ---- */ .patient-tabset { flex:1; min-height:0; display:flex; flex-direction:column; } .patient-tabset-bar { flex-shrink:0; display:flex; gap:8px; margin-bottom:10px; } .patient-tabset-btn { flex:1; padding:10px 10px; border-radius:12px; border:1px solid var(--line); background:var(--surface); font-weight:650; font-size:13.5px; cursor:pointer; transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease-spring); } .patient-tabset-btn:hover { transform:translateY(-1px); } .patient-tabset-btn.active { background:var(--dark); color:var(--dark-ink); border-color:var(--dark); } .patient-tabset-panels { flex:1; min-height:0; overflow:hidden; } .patient-tabset-panel { display:none; height:100%; } .patient-tabset-panel.active { display:flex; flex-direction:column; animation:patient-card-in .3s var(--ease) both; } .patient-tabset-panel .app-card { flex:1; min-height:0; display:flex; flex-direction:column; } .patient-camera-card { padding:0; overflow:hidden; position:relative; background:#10100f; border-radius:26px; border:1px solid rgba(255,255,255,.08); box-shadow:0 24px 60px rgba(10,9,8,.28), 0 2px 0 rgba(255,255,255,.06) inset; animation:patient-camera-in .6s var(--ease) both; transition:box-shadow .3s var(--ease); } .patient-camera-card:hover { box-shadow:0 28px 70px rgba(10,9,8,.34), 0 2px 0 rgba(255,255,255,.06) inset; } @keyframes patient-camera-in { from { opacity:0; transform:scale(.98); } to { opacity:1; transform:scale(1); } } .patient-video { width:100%; height:100%; object-fit:cover; display:block; } .patient-tabset-panel .transcript-card { min-height:0; } .patient-tabset-panel .transcript-scroll { flex:1; min-height:0; max-height:none; } .patient-tabset-panel[data-patient-panel="report"] #live-summary { flex:1; min-height:0; overflow-y:auto; } .patient-overlay { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:26px; background:linear-gradient(180deg,rgba(0,0,0,.4),transparent 30%,transparent 62%,rgba(0,0,0,.62)); color:white; } .patient-status-row { display:flex; justify-content:space-between; align-items:center; gap:15px; } .scan-status { display:inline-flex; align-items:center; gap:9px; padding:10px 14px; border-radius:999px; background:rgba(0,0,0,.5); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(10px); font-size:13.5px; font-weight:600; box-shadow:0 6px 16px rgba(0,0,0,.25); } .scan-status i { width:8px; height:8px; border-radius:50%; background:#ffe26c; animation:pulse 1.4s infinite, pulse-ring-yellow 1.4s infinite; } @keyframes pulse { 50% { opacity:.35; transform:scale(.75); } } @keyframes pulse-ring-yellow { 0% { box-shadow:0 0 0 0 rgba(255,226,108,.5); } 70% { box-shadow:0 0 0 9px rgba(255,226,108,0); } 100% { box-shadow:0 0 0 0 rgba(255,226,108,0); } } #record-status .recording-dot { animation:pulse 1s infinite, pulse-ring-red 1.6s infinite; } @keyframes pulse-ring-red { 0% { box-shadow:0 0 0 0 rgba(229,75,65,.55); } 70% { box-shadow:0 0 0 10px rgba(229,75,65,0); } 100% { box-shadow:0 0 0 0 rgba(229,75,65,0); } } .face-guide { position:absolute; width:260px; height:330px; left:50%; top:47%; transform:translate(-50%,-50%); border:2px solid rgba(255,255,255,.74); border-radius:48% 48% 44% 44%; box-shadow:0 0 0 999px rgba(0,0,0,.12), 0 0 40px rgba(255,255,255,.07); animation:face-guide-breathe 4s ease-in-out infinite; } @keyframes face-guide-breathe { 0%,100% { opacity:.74; } 50% { opacity:1; } } .face-guide::after { content:""; position:absolute; left:20%; right:20%; top:50%; height:2px; background:linear-gradient(90deg,transparent,#8bdaf2,transparent); box-shadow:0 0 14px #9ee8ff; animation:scan 2.4s ease-in-out infinite; } @keyframes scan { 0%,100%{transform:translateY(-105px)}50%{transform:translateY(105px)} } .patient-bottom { display:flex; justify-content:space-between; align-items:end; gap:15px; } .matched-card { max-width:420px; padding:20px 22px; border-radius:20px; background:rgba(255,255,255,.92); color:#111; backdrop-filter:blur(14px); box-shadow:0 14px 34px rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.6); transition:transform .3s var(--ease), box-shadow .3s var(--ease); animation:matched-card-in .4s var(--ease-spring) both; } .matched-card:hover { transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,0,0,.26); } .matched-card h3 { margin:0 0 5px; font-family:var(--serif); font-size:34px; font-weight:400; } .matched-card p { margin:0; color:#5f5b56; } @keyframes matched-card-in { from { opacity:0; transform:translateY(8px) scale(.97); } to { opacity:1; transform:translateY(0) scale(1); } } .patient-controls { display:flex; gap:9px; flex-wrap:wrap; justify-content:flex-end; } .patient-controls button { border-radius:14px; font-weight:650; transition:transform .18s var(--ease-spring), box-shadow .18s var(--ease); } .patient-controls button:not(:disabled):hover { transform:translateY(-2px) scale(1.03); box-shadow:0 10px 22px rgba(0,0,0,.18); } .patient-controls button:not(:disabled):active { transform:scale(.95); } .patient-tabset-panel .app-card { padding:18px 20px; } .patient-tabset-panel .card-head { margin-bottom:12px; flex-shrink:0; } .patient-tabset-panel .transcript-scroll .empty-state { min-height:110px; padding:0; } .patient-tabset-panel .transcript-scroll .empty-state p { font-size:13px; max-width:34ch; } .patient-tabset-panel #live-summary p { margin:0 0 4px; font-size:14px; } .patient-tabset-panel .action-row { gap:8px; flex-shrink:0; } .patient-tabset-panel .action-row button { padding:9px 12px; font-size:13px; } /* Same soft focus-pull as every .reveal-family transition sitewide, kept deliberately subtle here — Patient mode stays calm on purpose (excluded from the cascading page-enter stagger above), so this is a quality upgrade to the one transition it already had, not a new busier one. */ @keyframes patient-card-in { from { opacity:0; transform:translateY(10px); filter:blur(5px); } to { opacity:1; transform:translateY(0); filter:blur(0); } } .calming-card { padding:16px 20px; } .calming-card-toggle { display:flex; align-items:center; justify-content:space-between; gap:18px; width:100%; border:0; background:none; padding:0; margin-bottom:18px; font:inherit; color:inherit; text-align:left; cursor:pointer; } .calming-card-toggle h2 { margin:0; } .calming-toggle-right { display:flex; align-items:center; gap:10px; } .calming-chevron { font-size:11px; color:var(--muted); transition:transform .2s var(--ease); } .calming-card.collapsed .calming-card-toggle { margin-bottom:0; } .calming-card.collapsed .calming-body { display:none; } .calming-body { animation:patient-card-in .3s var(--ease) both; } .calming-hint { margin:2px 0 10px; font-size:13px; color:var(--muted); } .calming-options { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px; } .calming-chip { padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--white); font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease-spring); } .calming-chip:hover { transform:translateY(-1px) scale(1.04); } .calming-chip:active { transform:scale(.94); } .calming-chip.active { background:var(--dark); border-color:var(--dark); color:var(--dark-ink); animation:calming-chip-pop .3s var(--ease-spring); } @keyframes calming-chip-pop { 0% { transform:scale(1); } 45% { transform:scale(1.1); } 100% { transform:scale(1); } } .calming-volume-row { display:flex; align-items:center; gap:12px; } .calming-volume-row label { font-size:12.5px; font-weight:700; letter-spacing:.02em; color:var(--muted); text-transform:uppercase; } .calming-volume-row input[type="range"] { flex:1; accent-color:var(--accent); } .transcript-card { min-height:300px; } .transcript-scroll { max-height:430px; overflow:auto; display:grid; gap:11px; padding-right:5px; scroll-behavior:smooth; } .utterance { padding:13px; border-radius:14px; background:#f5f2ec; animation:utterance-in .4s var(--ease) both; transition:background .2s var(--ease); } .utterance:nth-child(even) { background:#e9efff; } @keyframes utterance-in { from { opacity:0; transform:translateY(8px) scale(.99); } to { opacity:1; transform:translateY(0) scale(1); } } .utterance-interim { background:#fff8e6; border:1px dashed rgba(200,160,40,.4); animation:utterance-in .3s var(--ease) both, interim-breathe 1.6s ease-in-out infinite .3s; } @keyframes interim-breathe { 0%,100% { opacity:1; } 50% { opacity:.72; } } .utterance-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:7px; } .utterance select { border:0; background:transparent; font-weight:700; } .utterance small { color:#817d77; } .utterance p { margin:0; line-height:1.48; } .recording-dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:#e54b41; margin-right:7px; animation:pulse 1s infinite; } .summary-panel { display:grid; gap:13px; } .summary-box { padding:17px; border-radius:15px; background:#f7f4ef; } .summary-box h4 { margin:0 0 8px; } .summary-box p { margin:0; color:#65615c; line-height:1.5; } .reminder-suggestions { margin-top:16px; padding:16px 18px; border-radius:16px; background:linear-gradient(160deg,#fff8e6,#fff3d6); border:1px solid rgba(201,143,18,.18); display:grid; gap:10px; animation:patient-card-in .4s var(--ease) both; } .reminder-suggestions-head { display:flex; flex-direction:column; gap:2px; } .reminder-suggestions-head small { color:#8a742f; font-size:12.5px; } .reminder-suggestion-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.65); flex-wrap:wrap; animation:utterance-in .3s var(--ease) both; } .reminder-suggestion-row p { margin:0; flex:1; min-width:200px; font-size:14px; line-height:1.45; } .reminder-suggestion-speaker { color:#8a742f; font-weight:600; } .reminder-suggestion-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; } .score-ring { width:80px; height:80px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#80c997 calc(var(--score)*1%),#ece8e1 0); position:relative; } .score-ring::before { content:""; position:absolute; inset:8px; border-radius:50%; background:white; } .score-ring strong { position:relative; font-size:18px; } .modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:22px; background:rgba(24,20,17,.45); backdrop-filter:blur(12px); } .auth-modal-card, .face-modal-card, .person-modal-card { position: relative; background: var(--glass-bg-strong); color: var(--ink); border: 1px solid var(--glass-border); border-radius: 32px; box-shadow: var(--glass-shadow-strong), 0 35px 90px rgba(0,0,0,.28); backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur-strong)) saturate(var(--glass-saturate)); overflow: hidden; isolation: isolate; } .auth-modal-card::before { content: ""; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; z-index: -1; background: linear-gradient(90deg, transparent, color-mix(in srgb, white 85%, var(--surface)), transparent); pointer-events: none; } /* Clerk's own sign-in widget is mounted with appearance.elements.card. background:'transparent' (see openAuthModal in app.js) — it was built assuming an opaque parent underneath it. Stacked on the glass treatment above, that transparency let the dark .modal-backdrop show straight through both layers, washing the whole card out to muddy gray instead of showing Clerk's form. This card needs to be solid, not glass. */ .auth-modal-card { width:min(520px,100%); min-height:590px; padding:30px; background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } .modal-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border:0; border-radius:50%; background:rgba(0,0,0,.06); cursor:pointer; font-size:22px; z-index: 2; } .auth-brand { text-align:center; margin:8px 0 18px; } .auth-brand .wordmark { font-size:31px; } .auth-brand p { color:#716d67; } .auth-loading { padding:80px 20px; text-align:center; color:#777; } .face-modal-card { width:min(980px,100%); max-height:94vh; overflow:auto; padding:32px; display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; } .person-modal-card { width:min(540px,100%); max-height:94vh; overflow:auto; padding:32px; } .person-modal-card .face-form-side h2 { font-size:42px; margin-bottom:22px; } .person-modal-card .privacy-hint { margin:4px 0 18px; } .face-form-side h2 { font-family:var(--serif); font-size:48px; line-height:.95; font-weight:400; margin:0 0 26px; } .face-form-side label { display:grid; gap:7px; margin-bottom:15px; font-size:12px; font-weight:700; } .privacy-hint { color:#77726c; font-size:12px; line-height:1.5; } .face-camera-side { display:grid; gap:15px; } /* Enrollment captures real biometric data (a face descriptor, optionally a voice embedding) for whoever's in front of the camera — not the caregiver filling in the form. The camera flow stays hidden behind an explicit consent step instead of a hint paragraph a caregiver could easily not read, so there's a real, required moment of "yes, this specific person" before anything is captured. JS toggles .consent-granted on the wrapper once the checkbox is checked (see wireEnrollConsent in app.js); the disabled attributes on the buttons below are the fallback if JS is slow to attach. */ .face-camera-side .camera-shell, .face-camera-side .pose-progress, .face-camera-side .camera-actions, .face-camera-side #save-visitor { display:none; } .face-camera-side.consent-granted .camera-shell, .face-camera-side.consent-granted .pose-progress, .face-camera-side.consent-granted .camera-actions, .face-camera-side.consent-granted #save-visitor { display:revert; } .face-camera-side.consent-granted .camera-actions { display:flex; } .consent-gate { padding:20px 22px; border-radius:22px; background:#fff4e0; border:1px solid rgba(201,143,18,.25); } .consent-gate-title { margin:0 0 8px; font-weight:700; font-size:14px; color:#6b5416; } .consent-gate-body { margin:0 0 16px; font-size:13px; line-height:1.55; color:#6b5416; } .consent-gate-check { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-size:13px; line-height:1.5; color:#6b5416; font-weight:600; } .consent-gate-check input { margin-top:3px; width:17px; height:17px; flex-shrink:0; accent-color:#8a5f10; } .face-camera-side.consent-granted .consent-gate { display:none; } .camera-shell { position:relative; min-height:390px; border-radius:26px; overflow:hidden; background:#171716; } .camera-shell video { width:100%; height:390px; object-fit:cover; } .camera-message { position:absolute; inset:0; display:grid; place-items:center; padding:0 24px; text-align:center; line-height:1.45; color:white; background:rgba(0,0,0,.26); } .pose-progress { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .pose-progress span { padding:9px; border-radius:14px; background:#e6e1da; text-align:center; font-size:12px; font-weight:700; } .pose-progress span.done { background:#bfe9ca; color:#315f3e; } .camera-actions { display:flex; gap:10px; } .camera-actions > * { flex:1; } .toast-region { position:fixed; z-index:200; right:18px; bottom:18px; display:grid; gap:9px; pointer-events:none; } .toast { min-width:280px; max-width:420px; padding:14px 16px; border-radius:18px; background:#0d0c0b; color:white; box-shadow:0 12px 30px rgba(0,0,0,.25); animation:toast-in .25s ease; } .toast.error { background:#922f2a; } .toast.success { background:#265f3a; } @keyframes toast-in { from{opacity:0;transform:translateY(8px)} } /* ---------- Multi-page landing: chapter tabs, headers, teasers ---------- */ .landing-page:not(.hidden) { animation: page-in .5s var(--ease); } .nav-links a.active { opacity: 1; font-weight: 700; } .nav-links a[data-landing-nav="recognize"] { --tab-color: #5d80e6; } .nav-links a[data-landing-nav="product"] { --tab-color: #3f9c5e; } .nav-links a[data-landing-nav="companion"] { --tab-color: #d9694f; } .nav-links a[data-landing-nav="caregiver"] { --tab-color: #c98f12; } .nav-links a[data-landing-nav="privacy"] { --tab-color: #3c6350; } .nav-links a[data-landing-nav="pricing"] { --tab-color: #3457d5; } .nav-links a[data-landing-nav="clinicians"] { --tab-color: #2f6f6a; } .chapter-header { position: relative; max-width: 1580px; margin: 20px auto 0; padding: 84px 56px 60px; border-radius: var(--radius-hero); overflow: hidden; box-shadow: var(--shadow); display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 40px; min-height: 420px; } .chapter-header::before { content: ""; position: absolute; inset: 0; opacity: .17; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode: multiply; } .chapter-header > * { position: relative; z-index: 1; } .chapter-eyebrow { margin: 0 0 18px; font-size: 14px; font-weight: 700; letter-spacing: .08em; } .chapter-header h1 { margin: 0; max-width: 780px; font-family: var(--serif); font-size: clamp(30px, 3.6vw, 50px); line-height: 1; font-weight: 400; letter-spacing: -.035em; } .chapter-standfirst { max-width: 560px; margin: 16px 0 0; font-size: 15px; line-height: 1.55; color: rgba(10,9,8,.72); } .chapter-header .pill-button { margin-top: 32px; } .chapter-header-copy { position: relative; z-index: 1; } .chapter-header-art { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; min-height: 240px; } /* Ambient texture that fills the empty space around the header copy — a faint technical dot-grid plus two soft drifting colour blobs, masked so it concentrates behind the motion-graphic card rather than the type. */ .chapter-header::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55; background-image: radial-gradient(rgba(10,9,8,.14) 1.4px, transparent 1.4px); background-size: 25px 25px; -webkit-mask-image: radial-gradient(circle at 82% 48%, black, transparent 66%); mask-image: radial-gradient(circle at 82% 48%, black, transparent 66%); } .chapter-header.privacy-chapter::after { background-image: radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px); } .header-blob { position: absolute; z-index: 0; border-radius: 50%; filter: blur(46px); pointer-events: none; animation: blob-float 16s ease-in-out infinite; } .header-blob.b1 { width: 260px; height: 260px; top: -60px; right: 8%; opacity: .55; } .header-blob.b2 { width: 200px; height: 200px; bottom: -50px; right: 28%; opacity: .45; animation-duration: 20s; animation-delay: -6s; } @keyframes blob-float { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-18px, 16px) scale(1.08); } } .recognize-chapter .header-blob { background: #fff; } .product-chapter .header-blob { background: #eafff0; } .companion-chapter .header-blob { background: #fff2ec; } .caregiver-chapter .header-blob { background: #fff6d8; } .privacy-chapter .header-blob { background: #8cdea8; } .pricing-chapter .header-blob { background: #fff; } .clinicians-chapter .header-blob { background: #e4f3f1; } /* Card + floating chip stack — the chip must live outside the card's own overflow:hidden (which exists only to clip the card's rounded corners), otherwise it gets cropped where it overhangs the bottom edge. */ .header-art-stack { position: relative; width: min(270px, 100%); } .header-art-card { position: relative; width: 100%; border-radius: 26px; background: rgba(255,255,255,.92); box-shadow: 0 25px 50px rgba(0,0,0,.18); overflow: hidden; } .header-art-topbar { display: flex; gap: 6px; padding: 14px 16px; border-bottom: 1px solid rgba(0,0,0,.06); } .header-art-topbar span { width: 8px; height: 8px; border-radius: 50%; background: #dcdcdc; } .header-art-ring { position: absolute; z-index: 0; inset: -22px; border-radius: 50%; border: 2px dashed rgba(255,255,255,.55); animation: spin 22s linear infinite; } .header-art-chip { position: absolute; z-index: 2; left: 50%; bottom: -18px; transform: translateX(-50%); padding: 9px 16px; border-radius: 999px; background: #11100f; color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 10px 22px rgba(0,0,0,.28); animation: chip-rise 3.6s var(--ease) infinite; } @keyframes chip-rise { 0%, 14% { opacity: 0; transform: translate(-50%, 10px); } 24%, 82% { opacity: 1; transform: translate(-50%, 0); } 94%, 100% { opacity: 0; transform: translate(-50%, 10px); } } /* Recognize — face scan */ .scan-art-body { position: relative; height: 220px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg,#f5f8ff,#eef2ff); } .scan-mesh { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(93,128,230,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(93,128,230,.16) 1px, transparent 1px); background-size: 16px 16px; -webkit-mask-image: radial-gradient(circle at 50% 45%, black, transparent 68%); mask-image: radial-gradient(circle at 50% 45%, black, transparent 68%); } .scan-viewport { position: relative; width: 178px; height: 208px; } .scan-corner { position: absolute; width: 26px; height: 26px; border: 3px solid #5d80e6; opacity: .55; transition: opacity .2s ease; } .scan-corner.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 8px 0 0 0; animation: corner-flash 2.6s ease-in-out infinite; } .scan-corner.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 8px 0 0; animation: corner-flash 2.6s ease-in-out infinite; animation-delay: .05s; } .scan-corner.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 8px; animation: corner-flash 2.6s ease-in-out infinite; animation-delay: 1.25s; } .scan-corner.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 8px 0; animation: corner-flash 2.6s ease-in-out infinite; animation-delay: 1.3s; } @keyframes corner-flash { 0%, 92%, 100% { opacity: .55; border-color: #5d80e6; } 96% { opacity: 1; border-color: #2f57c4; } } .scan-face { position: absolute; inset: 20px; border-radius: 46% 46% 42% 42%; background: #ffcbb8; box-shadow: 0 10px 20px rgba(93,128,230,.15); } .scan-face::before, .scan-face::after { content: ""; position: absolute; top: 42%; width: 9px; height: 9px; border-radius: 50%; background: #2a241c; opacity: .78; } .scan-face::before { left: 33%; } .scan-face::after { right: 33%; } .scan-mouth { position: absolute; left: 50%; bottom: 30%; width: 30px; height: 12px; border-bottom: 4px solid rgba(42,36,28,.6); border-radius: 0 0 20px 20px; transform: translateX(-50%); } .scan-sweep { position: absolute; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, transparent, #5d80e6, transparent); box-shadow: 0 0 16px rgba(93,128,230,.7); animation: sweep 2.6s ease-in-out infinite; } @keyframes sweep { 0%, 100% { top: 6%; opacity: 0; } 10% { opacity: 1; } 50% { top: 90%; opacity: 1; } 60% { opacity: 0; } } /* Hover the recognize card to see it "lock on" — the ambient loop keeps running for anyone just scrolling past, this is the reward for stopping. */ .recognize-chapter .header-art-stack:hover .scan-sweep { box-shadow: 0 0 28px rgba(93,128,230,1); } .recognize-chapter .header-art-stack:hover .scan-corner { opacity: 1; border-color: #2f57c4; } .recognize-chapter .header-art-stack:hover .header-art-ring { animation-duration: 6s; } .recognize-chapter .header-art-stack:hover .header-art-chip { animation-play-state: paused; opacity: 1; transform: translateX(-50%) scale(1.06); box-shadow: 0 14px 28px rgba(0,0,0,.35), 0 0 0 5px rgba(93,128,230,.35); } /* Product — voice detection */ .voice-art-body { position: relative; height: 220px; display: grid; place-items: center; gap: 18px; overflow: hidden; background: linear-gradient(180deg,#f2fbf4,#e9f8ec); } .voice-ripple { position: absolute; top: 50%; left: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 2px solid rgba(63,156,94,.3); animation: lock-ping 2.6s ease-out infinite; } .voice-ripple.two { animation-delay: 1.3s; } .voice-bars { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; height: 90px; } .voice-bars::before { content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 2px; background: rgba(63,156,94,.22); border-radius: 2px; } .voice-bars span { position: relative; z-index: 1; width: 9px; border-radius: 999px; background: #3f9c5e; transform-origin: center; animation: bar-bounce 1.1s ease-in-out infinite; } .voice-bars span:nth-child(1) { height: 30%; animation-duration: 1.3s; } .voice-bars span:nth-child(2) { height: 60%; animation-duration: .9s; animation-delay: -.4s; } .voice-bars span:nth-child(3) { height: 100%; animation-duration: 1.1s; animation-delay: -.1s; } .voice-bars span:nth-child(4) { height: 45%; animation-duration: 1s; animation-delay: -.7s; } .voice-bars span:nth-child(5) { height: 80%; animation-duration: 1.2s; animation-delay: -.3s; } .voice-bars span:nth-child(6) { height: 35%; animation-duration: .95s; animation-delay: -.6s; } .voice-bars span:nth-child(7) { height: 65%; animation-duration: 1.15s; animation-delay: -.2s; } @keyframes bar-bounce { 0%, 100% { transform: scaleY(.32); } 50% { transform: scaleY(1); } } .voice-art-label { position: absolute; z-index: 1; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.08); font-size: 12px; font-weight: 700; color: #2f6b45; white-space: nowrap; } .voice-art-label i { width: 7px; height: 7px; border-radius: 50%; background: #3f9c5e; animation: pulse 1.4s infinite; } /* Companion — a quiet chat */ .chat-art-body { position: relative; height: 220px; padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; overflow: hidden; background: linear-gradient(180deg,#fff4ef,#ffe8df); } .chat-art-body .companion-bubble { max-width: 78%; font-size: 13px; padding: 10px 14px; box-shadow: 0 6px 14px rgba(0,0,0,.05); } .chat-art-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 14px; } .chat-art-typing span { width: 6px; height: 6px; border-radius: 50%; background: #d99a86; animation: companion-bounce 1.2s infinite; } .chat-art-typing span:nth-child(2) { animation-delay: .15s; } .chat-art-typing span:nth-child(3) { animation-delay: .3s; } /* Caregiver — calendar */ .cal-art-body { position: relative; height: 220px; padding: 18px 24px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; background: linear-gradient(180deg,#fffaf0,#fff4d9); } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-grid span { aspect-ratio: 1; border-radius: 6px; background: #f1ede4; transition: background .2s ease; } .cal-grid span.cal-active { background: #c98f12; animation: cal-pulse 2.4s ease-in-out infinite; } @keyframes cal-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(201,143,18,.45); } 50% { box-shadow: 0 0 0 7px rgba(201,143,18,0); } } .cal-reminder { position: relative; margin-top: auto; padding: 12px 14px; border-radius: 14px; background: #fff; box-shadow: 0 8px 16px rgba(0,0,0,.07); font-size: 13px; animation: cal-slide 3.4s var(--ease) infinite; } .cal-reminder b { color: #c98f12; margin-right: 6px; } .cal-reminder::before { content: "✓"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(0); width: 18px; height: 18px; border-radius: 50%; background: #3f9c5e; color: #fff; font-size: 11px; display: grid; place-items: center; animation: cal-check 3.4s var(--ease) infinite; } @keyframes cal-slide { 0%, 10% { opacity: 0; transform: translateY(8px); } 22%, 80% { opacity: 1; transform: translateY(0); } 94%, 100% { opacity: 0; transform: translateY(-8px); } } @keyframes cal-check { 0%, 55% { transform: translateY(-50%) scale(0); } 68% { transform: translateY(-50%) scale(1.2); } 76%, 80% { transform: translateY(-50%) scale(1); } 94%, 100% { transform: translateY(-50%) scale(0); } } /* Clinicians — plain feature list, deliberately un-animated and static — the one header art on the site that isn't trying to be a demo, just a readable summary for someone scanning quickly. */ .clin-art-body { position: relative; height: 220px; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden; background: linear-gradient(180deg,#eef8f6,#e2f2ef); } .clin-art-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.05); font-size: 13px; font-weight: 650; color: #1c1a17; } .clin-art-dot { width: 8px; height: 8px; border-radius: 50%; background: #2f6f6a; flex-shrink: 0; } .chapter-header.clinicians-chapter::after { background-image: radial-gradient(rgba(255,255,255,.35) 1.4px, transparent 1.4px); } /* Privacy — secure lock */ .lock-art-body { position: relative; height: 220px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg,#16291f,#0e1c15); } .lock-ring { position: absolute; top: 50%; left: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; border: 2px solid rgba(140,222,168,.4); animation: lock-ping 2.8s ease-out infinite; } .lock-ring.ring-two { animation-delay: 1.4s; } @keyframes lock-ping { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.5); opacity: 0; } } .lock-icon { position: relative; z-index: 1; width: 68px; height: 58px; } .lock-shackle { position: absolute; top: 0; left: 14px; width: 40px; height: 34px; border: 7px solid #d8f2df; border-bottom: 0; border-radius: 20px 20px 0 0; } .lock-body { position: absolute; bottom: 0; left: 0; width: 68px; height: 40px; border-radius: 12px; background: #d8f2df; } .lock-body::after { content: ""; position: absolute; left: 50%; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: #16291f; transform: translateX(-50%); } /* Pricing — free-to-start seal */ .seal-art-body { position: relative; height: 220px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg,#eef3ff,#e2ebff); } .seal-spark { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #3457d5; opacity: .5; animation: spark-drift 5s ease-in-out infinite; } .seal-spark.s1 { top: 26%; left: 22%; animation-duration: 6s; } .seal-spark.s2 { top: 68%; left: 26%; animation-duration: 4.4s; animation-delay: -1.2s; } .seal-spark.s3 { top: 30%; right: 20%; animation-duration: 5.4s; animation-delay: -2.4s; } .seal-spark.s4 { top: 70%; right: 24%; animation-duration: 4.8s; animation-delay: -.6s; } @keyframes spark-drift { 0%, 100% { transform: translateY(0); opacity: .35; } 50% { transform: translateY(-14px); opacity: .9; } } .seal-wrap { position: relative; z-index: 1; width: 168px; height: 168px; display: grid; place-items: center; } .seal-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed #3457d5; opacity: .55; animation: spin 14s linear infinite; } .seal-badge { width: 132px; height: 132px; border-radius: 50%; background: #11100f; color: #fff; display: grid; place-items: center; text-align: center; box-shadow: 0 18px 32px rgba(0,0,0,.25); } .seal-badge strong { display: block; font-family: var(--serif); font-size: 34px; font-weight: 400; } .seal-badge small { display: block; font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.65); } .seal-check { position: absolute; top: -6px; right: -6px; width: 40px; height: 40px; border-radius: 50%; background: #3f9c5e; color: #fff; display: grid; place-items: center; font-weight: 800; box-shadow: 0 8px 18px rgba(0,0,0,.22); animation: pop-in 2.6s var(--ease) infinite; } @keyframes pop-in { 0%, 70% { transform: scale(1); } 78% { transform: scale(1.22); } 88%, 100% { transform: scale(1); } } /* Gentler pastels: lighter, less saturated than the original hero gradients — softer on the eye, still distinct enough per-chapter to keep the colour-as-wayfinding system working. */ .chapter-header.recognize-chapter { background: linear-gradient(135deg, #c7d4fc, #c2cffc); } .chapter-header.product-chapter { background: linear-gradient(135deg, #a3ddba, #b0e0c1); } .chapter-header.companion-chapter { background: linear-gradient(135deg, #ffdccf, #ffcabf); } .chapter-header.caregiver-chapter { background: linear-gradient(135deg, #ffedac, #ffe89c); } .chapter-header.privacy-chapter { background: radial-gradient(circle at 75% 24%, rgba(91,145,108,.34), transparent 33%), linear-gradient(135deg,#1a2c24,#0a1510 60%,#16291f); color: #fff; } .chapter-header.privacy-chapter .chapter-standfirst { color: rgba(255,255,255,.72); } .chapter-header.pricing-chapter { background: linear-gradient(135deg, #d3e0ff, #bdd0fb); } .chapter-header.clinicians-chapter { background: linear-gradient(135deg, #c0e2dd, #b0d9d3); } /* The container itself shouldn't always read as "the same rounded colour rectangle" either — rearranging what's inside one wasn't enough; some pages need to break that silhouette. Applies at every width, not just desktop, since shape and material aren't a small-screen-safety concern the way grid columns are. */ /* Product & Pricing — no colour block at all: plain paper with a hairline border, closer to a spec sheet or an editorial page than a hero card. */ .chapter-header.product-chapter, .chapter-header.pricing-chapter { background: var(--paper); box-shadow: none; border: 1px solid rgba(10,9,8,.12); } .chapter-header.product-chapter::before, .chapter-header.pricing-chapter::before { display: none; } .chapter-header.product-chapter::after { opacity: .3; } .chapter-header.product-chapter .header-blob, .chapter-header.pricing-chapter .header-blob { opacity: .5; } /* Companion — an uneven, organic silhouette instead of a clean rounded rectangle; still theme-responsive, just no longer uniform on all four corners. */ .chapter-header.companion-chapter { border-radius: calc(var(--radius-hero) * 2.2) calc(var(--radius-hero) * .35) calc(var(--radius-hero) * 2.2) calc(var(--radius-hero) * .35); } /* Caregiver — flat and sharp-cornered, a banner rather than a floating card: no shadow, barely any rounding. */ .chapter-header.caregiver-chapter { border-radius: calc(var(--radius-hero) * .2); box-shadow: none; } /* Privacy & Clinicians — sharp, document-like corners instead of the soft rounded card used everywhere else. */ .chapter-header.privacy-chapter, .chapter-header.clinicians-chapter { border-radius: calc(var(--radius-hero) * .25); } /* Seven pages, seven different shapes — not seven recolours of the same copy-left/art-right grid. Each rule only touches layout (columns, order, position, alignment); none of it changes copy, markup, or the mobile experience below, which already got its own dedicated pass and collapses every chapter header to the same safe single-column stack regardless of what happens here. Recognize keeps the original split as the baseline everything else departs from. */ @media (min-width: 1101px) { /* Product — mirrored: art on the left, copy on the right. */ .chapter-header.product-chapter { grid-template-columns: .85fr 1.15fr; } .chapter-header.product-chapter .chapter-header-copy { order: 2; } .chapter-header.product-chapter .chapter-header-art { order: 1; } /* Companion — centered and stacked: headline on top, a wide art banner underneath, like a persona introduction rather than a feature pitch. */ .chapter-header.companion-chapter { grid-template-columns: 1fr; text-align: center; padding: 76px 56px 48px; } .chapter-header.companion-chapter .chapter-header-copy { max-width: 620px; margin: 0 auto; } .chapter-header.companion-chapter .chapter-header-copy h1 { max-width: none; } .chapter-header.companion-chapter .chapter-standfirst { margin-left: auto; margin-right: auto; } .chapter-header.companion-chapter .pill-button { margin: 32px auto 0; } .chapter-header.companion-chapter .chapter-header-art { margin-top: 34px; min-height: 190px; width: 100%; } /* Caregiver — top-anchored and asymmetric: a wider, taller headline column with the art pinned high and slightly scaled down beside it, instead of both columns centered on the same axis. */ .chapter-header.caregiver-chapter { grid-template-columns: 1.35fr .65fr; align-items: start; padding-top: 96px; } .chapter-header.caregiver-chapter .chapter-header-copy h1 { max-width: 720px; font-size: clamp(32px, 4vw, 56px); } .chapter-header.caregiver-chapter .chapter-header-art { margin-top: 46px; transform: scale(.92); } /* Privacy — full-width copy with the art reduced to a faint watermark in the corner, so the page reads as a statement first, a product screenshot second. Fits the darker, more serious tone already used here. */ .chapter-header.privacy-chapter { grid-template-columns: 1fr; padding: 88px 64px 64px; } .chapter-header.privacy-chapter .chapter-header-copy { max-width: 680px; } .chapter-header.privacy-chapter .chapter-header-copy h1 { max-width: none; } .chapter-header.privacy-chapter .chapter-header-art { position: absolute; right: 40px; bottom: 16px; width: 300px; min-height: 0; opacity: .5; pointer-events: none; z-index: 0; } /* Pricing — centered editorial: no side-by-side art column at all, just a small floating badge in the corner, closer to a pull-quote page than a feature page. */ .chapter-header.pricing-chapter { grid-template-columns: 1fr; text-align: center; padding: 90px 64px 60px; } .chapter-header.pricing-chapter .chapter-header-copy { max-width: 640px; margin: 0 auto; } .chapter-header.pricing-chapter .chapter-header-copy h1 { max-width: none; } .chapter-header.pricing-chapter .chapter-standfirst { margin-left: auto; margin-right: auto; } .chapter-header.pricing-chapter .pill-button { margin: 32px auto 0; } .chapter-header.pricing-chapter .chapter-header-art { position: absolute; top: 36px; right: 44px; width: 190px; min-height: 0; transform: scale(.78); z-index: 2; } /* Clinicians — a letterhead split: a hairline rule between copy and art like a document column, denser type, both columns stretched to the same height instead of centered — reads like an abstract, not a landing-page hero. */ .chapter-header.clinicians-chapter { grid-template-columns: 1fr .55fr; align-items: stretch; gap: 0; padding: 80px 0 60px; } .chapter-header.clinicians-chapter .chapter-header-copy { padding: 0 48px; border-right: 1px solid rgba(10,40,35,.16); display: flex; flex-direction: column; justify-content: center; } .chapter-header.clinicians-chapter .chapter-header-art { padding: 0 40px; } .chapter-header.clinicians-chapter .chapter-header-copy h1 { font-size: clamp(26px, 3vw, 42px); } } .deckle-divider { max-width: 1580px; height: 32px; margin: -1px auto 0; background: var(--paper); clip-path: polygon(0 0,3% 100%,7% 22%,11% 100%,15% 16%,19% 100%,23% 26%,27% 100%,31% 12%,35% 100%,39% 22%,43% 100%,47% 14%,51% 100%,55% 18%,59% 100%,63% 10%,67% 100%,71% 20%,75% 100%,79% 15%,83% 100%,87% 24%,91% 100%,95% 16%,100% 100%,100% 0); } /* Ambient colour behind the plain paper background — fills the wide gutters either side of the centred content column with a slow, low-opacity drift. */ .chapter-body { position: relative; max-width: 1320px; margin: 0 auto; padding: 10px 20px 0; } .chapter-body::before, .chapter-body::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(85px); pointer-events: none; animation: blob-float 22s ease-in-out infinite; } .chapter-body::before { top: 6%; left: -170px; width: 340px; height: 340px; opacity: .3; background: var(--body-blob-1, #b5c7fb); } .chapter-body::after { top: 58%; right: -190px; width: 400px; height: 400px; opacity: .24; background: var(--body-blob-2, #ffdf65); animation-direction: reverse; animation-delay: -9s; } [data-landing-page="recognize"] .chapter-body { --body-blob-1: #aebefa; --body-blob-2: #d7e0ff; } [data-landing-page="product"] .chapter-body { --body-blob-1: #a8e6bb; --body-blob-2: #d7f4df; } [data-landing-page="companion"] .chapter-body { --body-blob-1: #ffb4a4; --body-blob-2: #ffe0d4; } [data-landing-page="caregiver"] .chapter-body { --body-blob-1: #ffe67b; --body-blob-2: #ffd6a3; } [data-landing-page="privacy"] .chapter-body { --body-blob-1: #8cdea8; --body-blob-2: #bec8f8; } [data-landing-page="pricing"] .chapter-body { --body-blob-1: #bdd0fb; --body-blob-2: #d7d0ff; } [data-landing-page="clinicians"] .chapter-body { --body-blob-1: #8fc4be; --body-blob-2: #cdeae6; } /* ---------- Product Playground — a real, clickable dashboard sandbox ---------- */ .playground-section { max-width: 1100px; margin: 90px auto; text-align: center; } .playground-window { width: 100%; max-width: 900px; margin: 46px auto 0; min-height: 560px; box-shadow: var(--shadow); transition: box-shadow .4s var(--ease), transform .4s var(--ease); } .playground-window:hover { box-shadow: var(--shadow-atmosphere), 0 30px 60px rgba(0,0,0,.18); } .playground-grid { display: grid; grid-template-columns: 190px 1fr; min-height: 500px; } .playground-sidebar { padding: 20px 12px; background: #f3f2ef; border-right: 1px solid rgba(0,0,0,.06); } .playground-nav { display: block; width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; padding: 11px 12px; border-radius: 10px; margin-bottom: 3px; font-size: 13px; color: #6a6864; transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease); } .playground-nav:hover { background: rgba(0,0,0,.04); transform: translateX(2px); } .playground-nav.active { background: white; color: black; font-weight: 700; box-shadow: 0 4px 10px rgba(0,0,0,.06); } .playground-content { padding: 26px 30px 30px; text-align: left; position: relative; } .playground-panel { display: none; } .playground-panel.active { display: block; animation: page-in .4s var(--ease); } .playground-people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .pg-person { border: 0; font: inherit; text-align: left; cursor: pointer; transition: transform .3s var(--ease-out), box-shadow .3s var(--ease), outline-color .2s ease; outline: 2px solid transparent; outline-offset: 2px; } .pg-person:hover { transform: translateY(-3px); } .pg-person.selected { outline-color: rgba(10,9,8,.55); } .pg-hint { margin: 16px 0 0; font-size: 12px; color: rgba(10,9,8,.4); text-align: center; } .pg-accordion { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); } .pg-accordion.open { grid-template-rows: 1fr; margin-top: 10px; } .pg-accordion-inner { overflow: hidden; } .pg-accordion-inner .pg-detail-card { padding: 18px 20px; border-radius: 16px; background: #f7f4ef; } .pg-accordion-inner .pg-detail-card b { display: block; font-family: var(--serif); font-size: 22px; font-weight: 400; margin-bottom: 4px; } .pg-accordion-inner .pg-detail-card small { display: block; color: #85807a; margin-bottom: 10px; } .pg-accordion-inner .pg-detail-card p { margin: 0; color: #5b5752; line-height: 1.5; } .pg-list { display: grid; gap: 8px; } .pg-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; border: 0; background: #f7f4ef; border-radius: 13px; padding: 12px 14px; cursor: pointer; font: inherit; text-align: left; transition: background .2s var(--ease), transform .2s var(--ease); } .pg-row:hover { background: #f0ece3; transform: translateX(2px); } .pg-row b, .pg-row small { display: block; } .pg-row small { color: #85807a; margin-top: 1px; } .pg-row em { font-style: normal; color: #a49f97; font-size: 16px; transition: transform .3s var(--ease-spring), color .2s ease; } .pg-row[aria-expanded="true"] em { transform: rotate(45deg); color: #11100f; } .pg-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 700; font-size: 13px; } .pg-folder-icon { font-size: 15px; color: #a49f97; } .pg-date { font-weight: 700; font-variant-numeric: tabular-nums; color: #5b5752; min-width: 46px; } .pg-accordion[data-reveal-panel] .pg-accordion-inner { padding: 0 14px; } .pg-accordion[data-reveal-panel].open .pg-accordion-inner { padding: 12px 14px; } .pg-accordion[data-reveal-panel] .pg-accordion-inner p { margin: 0; color: #5b5752; line-height: 1.5; } .pg-accordion[data-reveal-panel] .pg-accordion-inner ul { margin: 0; padding-left: 18px; color: #5b5752; line-height: 1.7; } .chapter-teasers { position: relative; } .chapter-teasers::before, .chapter-teasers::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(85px); pointer-events: none; animation: blob-float 24s ease-in-out infinite; } .chapter-teasers::before { top: -60px; left: -180px; width: 340px; height: 340px; opacity: .28; background: #c7d7ff; } .chapter-teasers::after { bottom: -80px; right: -190px; width: 380px; height: 380px; opacity: .22; background: #ffedad; animation-direction: reverse; animation-delay: -10s; } /* Legal documents (Privacy Policy, Terms, Cookies) — deliberately plain: no colour block, no illustration, no chapter-tabs. A serious document reads as a document, not another marketing chapter. */ .legal-page { max-width: 720px; margin: 40px auto 90px; padding: 0 20px; } .legal-head { margin-bottom: 40px; padding-bottom: 32px; border-bottom: 1px solid var(--line); } .legal-head h1 { margin: 6px 0 0; font-family: var(--serif); font-size: clamp(34px, 4.4vw, 52px); font-weight: 400; letter-spacing: -.02em; } .legal-updated { margin: 10px 0 0; font-size: 13px; color: var(--muted); font-weight: 600; } .legal-standfirst { margin: 18px 0 0; font-size: 15.5px; line-height: 1.6; color: var(--muted); } .legal-standfirst a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; } .legal-body section { margin-bottom: 30px; } .legal-body h2 { margin: 0 0 10px; font-family: var(--serif); font-size: 21px; font-weight: 400; } .legal-body p { margin: 0; font-size: 15px; line-height: 1.7; color: #4a463f; } .legal-body p a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } .legal-body code { padding: 2px 6px; border-radius: 6px; background: var(--surface-2); font-size: 13.5px; } .legal-footer-nav { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); } .legal-footer-nav a { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--ink); transition: gap .2s var(--ease); } .legal-footer-nav a:hover { gap: 10px; } .legal-footer-nav a span { transition: transform .2s var(--ease); } .legal-footer-nav a:hover span { transform: translateX(2px); } .chapter-section { margin: 56px 0; } .chapter-section:first-child { margin-top: 36px; } .chapter-intro { max-width: 680px; margin: 0 auto 32px; text-align: center; } .chapter-intro h2 { font-family: var(--serif); font-size: clamp(34px, 4vw, 50px); font-weight: 400; line-height: 1.05; margin: 0 0 16px; letter-spacing: -.02em; } .chapter-intro p { color: #696662; font-size: 17px; line-height: 1.6; margin: 0; } .deep-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .deep-grid.three-col { grid-template-columns: repeat(3, 1fr); } .deep-card { padding: 30px 32px; border-radius: 26px; background: color-mix(in srgb, white 65%, transparent); border: 1px solid var(--glass-border); box-shadow: var(--soft-shadow); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .deep-card:hover { transform: translateY(-4px); box-shadow: 0 20px 38px rgba(0,0,0,.12); } .deep-card .line-icon { display: block; margin-bottom: 16px; } .deep-card h3 { margin: 0 0 12px; font-family: var(--serif); font-size: 25px; font-weight: 400; } .deep-card p { margin: 0; color: #5b5752; line-height: 1.6; font-size: 15px; } /* Page-scoped card & list skins — same .deep-card markup everywhere, but each of these pages renders it differently enough that moving from one to the next doesn't read as the same template recoloured. */ /* Recognize — a rounded accent badge and a left rail, echoing the face-scan motif already used in its header. */ [data-landing-page="recognize"] .deep-card { border-left: 4px solid #5d80e6; border-radius: 4px 22px 22px 4px; } [data-landing-page="recognize"] .deep-card .line-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(93,128,230,.14); margin-bottom: 18px; } /* Product — an index-card feel: a faint oversized numeral, a hairline top border instead of a drop shadow, no icon glyph. */ [data-landing-page="product"] .deep-grid { counter-reset: product-card; } [data-landing-page="product"] .deep-card { counter-increment: product-card; position: relative; box-shadow: none; border-top: 3px solid #2f9d5e; border-radius: 6px; background: transparent; padding-top: 34px; } [data-landing-page="product"] .deep-card::before { content: counter(product-card, decimal-leading-zero); position: absolute; top: 12px; right: 18px; font-family: var(--serif); font-size: 40px; color: rgba(10,9,8,.08); line-height: 1; } [data-landing-page="product"] .deep-card .line-icon { display: none; } /* Companion — soft, rounded and warm: bigger radius, a peach wash, a round avatar-style badge instead of a flat glyph. */ [data-landing-page="companion"] .deep-card { border-radius: 30px; background: linear-gradient(165deg, #fff8f5, #fff1ea); box-shadow: 0 16px 34px rgba(255,140,100,.14); } [data-landing-page="companion"] .deep-card .line-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #ffe0d2; } /* Caregiver — a flatter utility-list feel: horizontal rows instead of stacked cards, a bottom rule instead of a shadow, like a settings page. */ [data-landing-page="caregiver"] .deep-grid { grid-template-columns: 1fr; gap: 0; } [data-landing-page="caregiver"] .deep-card { display: flex; align-items: flex-start; gap: 20px; border-radius: 0; box-shadow: none; border-bottom: 1px solid rgba(10,9,8,.1); padding: 22px 4px; background: transparent; } [data-landing-page="caregiver"] .deep-card:hover { transform: none; box-shadow: none; background: rgba(255,223,101,.12); } [data-landing-page="caregiver"] .deep-card .line-icon { margin-bottom: 0; flex-shrink: 0; } [data-landing-page="caregiver"] .deep-card h3 { margin-top: 2px; } /* Privacy — dark and secure, almost console-like: dark cards, a hairline green-tinted border, sharp corners. */ [data-landing-page="privacy"] .deep-card { background: #14201a; box-shadow: none; border: 1px solid rgba(140,222,168,.25); border-radius: 8px; } [data-landing-page="privacy"] .deep-card h3 { color: #eafaf0; } [data-landing-page="privacy"] .deep-card p { color: rgba(234,250,240,.68); } [data-landing-page="privacy"] .deep-card .line-icon { color: #8cdea8; } .chapter-cta { max-width: 1320px; margin: 64px auto 40px; padding: 48px; border-radius: 28px; text-align: center; background: var(--dark); color: var(--dark-ink); box-shadow: var(--shadow); } .chapter-cta h2 { margin: 0 0 14px; font-family: var(--serif); font-size: clamp(32px, 4vw, 50px); font-weight: 400; } .chapter-cta p { margin: 0 0 28px; color: rgba(255,255,255,.66); } .chapter-teasers { max-width: 1320px; margin: 96px auto; } .teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 46px; } .teaser-card { display: flex; flex-direction: column; padding: 30px 26px; border-radius: 26px; border: 1px solid var(--glass-border); box-shadow: var(--soft-shadow); color: #11100f; backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: transform .3s var(--ease), box-shadow .3s var(--ease); } .teaser-card:hover { transform: translateY(-6px); box-shadow: 0 26px 48px rgba(0,0,0,.18); } .teaser-icon { font-size: 28px; margin-bottom: 20px; } .teaser-card h3 { margin: 0 0 10px; font-family: var(--serif); font-size: 27px; font-weight: 400; } .teaser-card p { margin: 0; flex: 1; color: rgba(10,9,8,.64); line-height: 1.5; font-size: 15px; } .teaser-link { margin-top: 22px; font-weight: 700; font-size: 14px; } .teaser-card.blue-tab { background: linear-gradient(160deg, color-mix(in srgb, #c7d7ff 72%, transparent), color-mix(in srgb, #aebefa 72%, transparent)); } .teaser-card.green-tab { background: linear-gradient(160deg, color-mix(in srgb, #a8e6bb 72%, transparent), color-mix(in srgb, #8bd69e 72%, transparent)); } .teaser-card.coral-tab { background: linear-gradient(160deg, color-mix(in srgb, #ffcbb8 72%, transparent), color-mix(in srgb, #ffa88f 72%, transparent)); } .teaser-card.yellow-tab { background: linear-gradient(160deg, color-mix(in srgb, #ffedad 72%, transparent), color-mix(in srgb, #ffdf65 72%, transparent)); } .teaser-card.dark-tab { background: linear-gradient(160deg, color-mix(in srgb, #2a3d33 78%, transparent), color-mix(in srgb, #16291f 78%, transparent)); color: #fff; } .teaser-card.dark-tab p { color: rgba(255,255,255,.66); } /* 5 chapters now fit a wide row (was hardcoded to 4); auto-fit keeps every card a sane minimum width and wraps gracefully instead of squeezing. */ .teaser-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .pricing-teaser { max-width: 1320px; margin: 0 auto 96px; padding: 46px 56px; border-radius: 26px; background: linear-gradient(120deg,#d3e0ff,#bdd0fb); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; box-shadow: var(--soft-shadow); } .pricing-teaser h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 30px; font-weight: 400; } .pricing-teaser p { margin: 0; color: rgba(10,9,8,.65); } .chapter-section .privacy-banner { margin: 0; } /* ===================================================================== REBRAND KIT — a small set of reusable pieces every chapter page draws on: a pill tab-switcher under the header, a 4-up mockup card row, a compact quote row, and a full-bleed promo band. Original layouts, original Meco copy and artwork throughout. ===================================================================== */ /* Pill tab-switcher — sits right under a chapter header and jumps to the named section further down the same page (real anchor links, not decoration) so it also works as an at-a-glance contents list. A floating indicator pill slides between tabs (positioned by initChapterTabs() in app.js, which measures the active tab's own offsetLeft/width) instead of each tab just swapping its own background — the same "magic move" feel as a native segmented control. */ .chapter-tabs { position: relative; z-index: 2; display: inline-flex; gap: 4px; margin: 30px auto 0; padding: 6px; width: max-content; max-width: calc(100% - 24px); border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.8); box-shadow: 0 10px 26px rgba(20,16,8,.1), inset 0 1px 0 white; backdrop-filter: blur(10px); } .chapter-tabs-row { display: flex; justify-content: center; } .chapter-tab-indicator { position: absolute; z-index: 0; top: 6px; left: 6px; height: calc(100% - 12px); border-radius: 999px; background: #fff; box-shadow: 0 6px 14px rgba(0,0,0,.1); transition: transform .45s var(--ease-spring), width .45s var(--ease-spring); pointer-events: none; opacity: 0; } .chapter-tab-indicator.ready { opacity: 1; } .chapter-tab { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; border: 0; background: transparent; font: inherit; font-weight: 650; font-size: 14px; color: rgba(10,9,8,.7); cursor: pointer; white-space: nowrap; transition: color .2s var(--ease); } .chapter-tab:hover { color: #11100f; } .chapter-tab.active { color: #11100f; } .chapter-tab-icon { font-size: 15px; display: inline-block; transition: transform .3s var(--ease-spring); } .chapter-tab.active .chapter-tab-icon { transform: scale(1.15) rotate(-4deg); } /* 4-up mockup card row — Meco's own surfaces (People, Memory Book, Reminders, Visit Report) shown as small standalone preview cards, the way a features page shows off what's actually inside the product. */ .showcase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 46px; } .showcase-card { display: flex; flex-direction: column; min-height: 250px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: var(--soft-shadow); transition: transform .3s var(--ease), box-shadow .3s var(--ease); transform-style: preserve-3d; } .showcase-card:hover { transform: translateY(-6px); box-shadow: 0 24px 44px rgba(0,0,0,.16); } .showcase-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; font-weight: 700; font-size: 13px; } .showcase-card-head .swatch { position: relative; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; } .showcase-card-head .swatch::after { content: ""; position: absolute; inset: -5px; border-radius: 7px; background: inherit; opacity: .3; animation: swatch-pulse 2.4s ease-in-out infinite; } @keyframes swatch-pulse { 0%, 100% { transform: scale(.7); opacity: .3; } 50% { transform: scale(1.35); opacity: 0; } } .showcase-card-body { flex: 1; display: grid; gap: 8px; align-content: start; } .showcase-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 11px; background: #f7f4ef; font-size: 12.5px; color: #4c4842; transition: background .2s var(--ease), transform .2s var(--ease); } .showcase-card:hover .showcase-row { transform: translateX(2px); } .showcase-card:hover .showcase-row:nth-child(2) { transition-delay: .04s; } .showcase-card:hover .showcase-row:nth-child(3) { transition-delay: .08s; } .showcase-row b { font-weight: 650; } .showcase-row small { color: #8a8681; font-weight: 500; } .showcase-row.tinted { background: var(--tint, #f7f4ef); } .showcase-note { margin-top: auto; padding-top: 10px; font-family: var(--serif); font-size: 16px; line-height: 1.25; color: #2c2a27; border-top: 1px dashed rgba(0,0,0,.08); } .showcase-check { width: 15px; height: 15px; border-radius: 5px; border: 1.5px solid rgba(0,0,0,.22); flex-shrink: 0; } .showcase-check.done { background: #11100f; border-color: #11100f; position: relative; } .showcase-check.done::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 10px; } /* Staggered entrance — a parent carries .stagger-group (watched by the same observeReveals() IntersectionObserver as .reveal/.reveal-up); each direct child animates in on its own short delay once the parent gets .visible, instead of the whole row fading in as one flat block. */ .stagger-group > * { opacity: 0; transform: translateY(22px); filter: blur(5px); transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); } .stagger-group.visible > * { opacity: 1; transform: translateY(0); filter: blur(0); } .stagger-group > *:nth-child(1) { transition-delay: 0s; } .stagger-group > *:nth-child(2) { transition-delay: .08s; } .stagger-group > *:nth-child(3) { transition-delay: .16s; } .stagger-group > *:nth-child(4) { transition-delay: .24s; } .stagger-group > *:nth-child(5) { transition-delay: .32s; } /* Quote row — Craft-style compact testimonial (small round avatar + name on a dashed rule, italic line beside it). Names below are illustrative placeholders in the same style the rest of Meco's copy already uses ("A caregiver using Meco"), never presented as a real, verifiable endorsement. */ .quote-row { display: flex; align-items: center; gap: 28px; max-width: 900px; margin: 44px auto; flex-wrap: wrap; } .quote-row.reverse { flex-direction: row-reverse; } .quote-row-who { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .quote-row-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 15px; flex-shrink: 0; } .quote-row-avatar::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1.5px solid currentColor; opacity: 0; transition: opacity .3s ease, transform .3s ease; transform: scale(.85); } .quote-row:hover .quote-row-avatar::before { opacity: .35; transform: scale(1); } .quote-row-rule { width: 46px; height: 1px; background: rgba(10,9,8,.25); position: relative; overflow: hidden; } .quote-row-rule::after { content: ""; position: absolute; inset: 0; background: #11100f; transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); } .quote-row:hover .quote-row-rule::after { transform: scaleX(1); } .quote-row-who b { font-size: 14px; font-weight: 650; white-space: nowrap; } .quote-row p { flex: 1; min-width: 240px; margin: 0; font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.4; color: #2c2a27; } /* Full-bleed promo band — a single, focused claim with its own colour mood, used once per chapter for the one thing that page most wants remembered (calendar sync, voice tone, on-device privacy...). A slow shimmer drifts across the background and a ring of soft dots breathes behind the copy — same restrained motion budget as the hero's own ambient animation, never enough to distract from the claim itself. */ .promo-band { max-width: 1320px; margin: 56px auto; padding: 44px; border-radius: 28px; text-align: center; box-shadow: var(--shadow); position: relative; overflow: hidden; background-size: 160% 160%; animation: hero-shimmer 18s ease-in-out infinite; } .promo-band > * { position: relative; z-index: 1; } .promo-band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5; background-image: radial-gradient(rgba(10,9,8,.09) 1.3px, transparent 1.3px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); mask-image: radial-gradient(circle at 50% 0%, black, transparent 70%); } .promo-band.dark::before { background-image: radial-gradient(rgba(255,255,255,.12) 1.3px, transparent 1.3px); } .promo-kicker { margin: 0 0 16px; font-size: 13px; font-weight: 700; letter-spacing: .1em; opacity: .7; } /* A large faint numeral watermark, reusing the Product page's numbered-card language (counter(product-card,…)) so the "walk through one step at a time" sections on the home page read as part of the same visual system. */ .step-band { position: relative; } .step-band .step-number { position: absolute; top: 14px; right: 30px; z-index: 0; font-family: var(--serif); font-size: clamp(70px, 9vw, 128px); font-weight: 400; line-height: 1; color: rgba(10,9,8,.07); pointer-events: none; } .promo-band.dark .step-number { color: rgba(255,255,255,.08); } .promo-band h2 { margin: 0 0 16px; font-family: var(--serif); font-size: clamp(32px, 4vw, 48px); font-weight: 400; line-height: 1.05; } .promo-band p { max-width: 560px; margin: 0 auto 30px; font-size: 17px; line-height: 1.55; color: rgba(10,9,8,.68); } .promo-band.dark { background: linear-gradient(160deg,#1a2c24,#0a1510 65%,#16291f); color: #fff; } .promo-band.dark p { color: rgba(255,255,255,.68); } .promo-mock { display: inline-flex; align-items: center; gap: 14px; margin-top: 8px; padding: 14px 22px; border-radius: 18px; background: rgba(255,255,255,.9); box-shadow: 0 14px 30px rgba(0,0,0,.14); font-size: 14px; font-weight: 650; color: #11100f; transition: transform .35s var(--ease-spring), box-shadow .3s var(--ease), background .3s var(--ease); } .promo-band:hover .promo-mock { transform: translateY(-3px); box-shadow: 0 20px 38px rgba(0,0,0,.18); } .promo-band.dark .promo-mock { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.14); } .promo-mock i { width: 8px; height: 8px; border-radius: 50%; background: #4ea768; flex-shrink: 0; animation: pulse 1.6s infinite; } /* Style-picker teaser — a real Meco setting (how the voice greeting sounds, how large patient-facing text is) shown the way a "customize the look" section would, instead of inventing a feature Meco doesn't have. Chips are genuinely clickable (wired in wireGlobalEvents()) — the promo-mock line below updates to match whichever one is selected. */ .style-picker { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 26px 0; } .style-chip { position: relative; padding: 10px 18px; border-radius: 999px; border: 1.5px solid rgba(10,9,8,.14); background: #fff; font-weight: 650; font-size: 13px; cursor: pointer; overflow: hidden; transition: border-color .2s ease, transform .2s var(--ease-spring), background .2s ease, color .2s ease; } .style-chip:hover { transform: translateY(-2px); } .style-chip:active { transform: translateY(0) scale(.96); } .style-chip.selected { border-color: #11100f; background: #11100f; color: #fff; } /* A quick radial "pop" plays from the click point when a chip becomes selected — a CSS-only ripple triggered by toggling .just-selected in JS, cleaned up on animationend. */ .style-chip.just-selected::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(255,255,255,.5), transparent 60%); animation: chip-pop .5s var(--ease) forwards; } @keyframes chip-pop { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } } /* Small inline trend chart used to give the Companion page's "wellbeing signal" claim something concrete to look at — same visual language (.trend-line / .trend-point) as the real chart inside the signed-in app, so marketing and product don't disagree with each other. The line draws itself in once scrolled into view via stroke-dashoffset, the same .draw-in trick used nowhere else on the site (kept intentionally rare so it still reads as a highlight, not wallpaper). */ .mini-trend-wrap { max-width: 560px; margin: 34px auto 0; padding: 22px 26px; border-radius: 20px; background: #fff; box-shadow: var(--soft-shadow); } .mini-trend-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; font-size: 12px; color: #85807a; } .mini-trend-head b { font-family: var(--serif); font-size: 18px; font-weight: 400; color: #2c2a27; } .draw-in .trend-line { stroke-dasharray: 460; stroke-dashoffset: 460; transition: stroke-dashoffset 1.4s var(--ease); } .draw-in.visible .trend-line { stroke-dashoffset: 0; } .draw-in .trend-point { opacity: 0; transition: opacity .3s ease; } .draw-in.visible .trend-point { opacity: 1; transition-delay: 1.1s; } @media (max-width: 1100px) { .showcase-grid { grid-template-columns: 1fr 1fr; } .quote-row, .quote-row.reverse { flex-direction: column; text-align: center; } .quote-row-who { flex-direction: column; gap: 8px; } .quote-row-rule { display: none; } .nav-links { display:none; } .floating-nav { width:calc(100% - 30px); } /* Below 1100px nav-links is hidden, so there's nothing left to centre — the 3-column minmax(0,1fr) grid (needed on desktop so nav-links sits dead-centre between two unequal-content edges) starts fighting itself here instead: both edge tracks get squeezed toward 0 by the empty middle column, and the wordmark's own content (icon mark + "MECO") no longer fits its shrunken track, overflowing into — and visually colliding with — the theme toggle. A plain justify-content:space-between row has no such track to shrink, so logo and actions just sit at their natural width at each end, no matter how narrow the bar gets. */ .floating-nav { display: flex; justify-content: space-between; align-items: center; } /* The hero mock window shrinks continuously with viewport width (min(920px, 69vw)) all the way down to the 760px mobile breakpoint, but its 4-across memory-card row and 178px fixed sidebar previously had no adjustment until then — leaving a wide "tablet" zone (roughly 900–1200px) where each card was squeezed under ~140px and a phrase like "Sunday garden walks" wrapped into 3 cramped lines. Matching the mobile treatment earlier fixes it well before it gets that tight. */ .mock-app-grid { grid-template-columns:130px 1fr; } .mock-content { padding:22px 20px; } .memory-cards { grid-template-columns:1fr 1fr; } .memory-card { min-height:140px; } .feature-panel, .green-panel, .yellow-panel, .coral-panel { grid-template-columns:1fr; padding:44px 32px; } .feature-copy { order:-1; padding:0; } .organize-grid { grid-template-columns:1fr; } .organize-card { min-height:500px; } .editorial-row { grid-template-columns:1fr; } .pricing-section { grid-template-columns:1fr; } .app-layout { grid-template-columns:210px 1fr; } .metric-card { grid-column:span 6; } .activity-card,.quick-card,.visits-card,.reminders-card { grid-column:span 12; } .teaser-tile { grid-column:span 12 !important; } .visit-card { grid-column:span 6; } .teaser-grid { grid-template-columns:1fr 1fr; } .deep-grid,.deep-grid.three-col { grid-template-columns:1fr 1fr; } .playground-people-grid { grid-template-columns:1fr 1fr; } .chapter-header { padding:120px 40px 70px; grid-template-columns:1fr; text-align:center; justify-items:center; } .chapter-header-copy { max-width:640px; } .chapter-header-art { margin-top:36px; min-height:0; } .header-art-stack { width:280px; } } @media (max-width: 760px) { .landing-view { padding:90px 8px 40px; } .hero-shell { min-height:625px; border-radius:22px; } .floating-nav { margin-top:10px; padding-left:14px; gap:8px; } .nav-actions .link-button { display:none; } .footer-top { grid-template-columns:1fr; gap:26px; } .footer-bottom { flex-direction:column; align-items:flex-start; gap:10px; } .hero-copy { margin-top:50px; } .hero-copy h1 { font-size:38px; } .hero-sub { font-size:14px; } .hero-art { inset:345px 0 0; } .hero-window { width:92vw; height:250px; } .mock-app-grid { grid-template-columns:105px 1fr; } .mock-content { padding:18px 12px; } .memory-cards { grid-template-columns:1fr 1fr; } .memory-card { min-height:100px; padding:10px; } .memory-card p { margin-top:8px; font-size:14px; } .feature-panel { min-height:auto; margin-bottom:30px; padding:34px 20px; border-radius:24px; } .feature-copy h2 { font-size:48px; } .layered-visual { min-height:480px; } .front-window { left:35px; } .integration-row.two-col,.care-grid { grid-template-columns:1fr; } .wide-buttons { grid-template-columns:1fr; } .organize-section { margin:75px auto; } .display-heading { font-size:52px; } .organize-card h3 { font-size:44px; } .editorial-flow { padding:0 12px; } .editorial-copy h2,.privacy-banner h2 { font-size:48px; } .testimonial p { font-size:26px; } .privacy-banner { grid-template-columns:1fr; padding:34px 24px; } .privacy-device { height:330px; } .pricing-section { margin:80px 0; padding:40px 24px; } .footer-top { grid-template-columns:1fr 1fr; gap:28px 20px; } .footer-brand { grid-column:1/-1; } .app-topbar { grid-template-columns:1fr auto; } .app-top-center { display:none; } .app-layout { grid-template-columns:1fr; } /* Sidebar becomes a bottom tab bar. It used to hide every nav icon and keep only text labels — backwards for a compact strip, and it forced "Memory Book" / "Visit Reports" etc. into a long single-line scroll of bare words with no way to tell it was scrollable. Icon-over-label (like a normal mobile tab bar) reads faster and fits more before you have to scroll at all. */ .app-sidebar { position:fixed; z-index:40; bottom:0; top:auto; left:0; right:0; height:auto; width:100%; padding:4px 4px calc(4px + env(safe-area-inset-bottom, 0px)); flex-direction:row; align-items:stretch; overflow:visible; border-top:1px solid rgba(0,0,0,.1); border-right:0; } /* Same fix as desktop, on the other axis: the nav list scrolls horizontally on its own so "Open patient mode" — outside this wrapper — is always the last thing in the bar, never scrolled past. */ .sidebar-nav-scroll { flex-direction:row; overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; } .side-nav { flex-direction:column; justify-content:center; gap:2px; width:auto; min-width:62px; white-space:nowrap; padding:7px 8px 6px; font-size:10.5px; scroll-snap-align:start; } .side-nav span:not(.patient-entry-label) { display:block; font-size:18px; } .patient-entry-label { font-size:10.5px; } /* The desktop sidebar's group labels/spacer are a vertical-list device — in the horizontal tab-bar row they'd just show up as odd empty gaps. */ .side-nav-group, .side-nav-gap { display:none; } /* The caregiver reassurance note ("You are safe...") used to just vanish on mobile — the one device a patient is most likely to actually be holding. It's pinned above the tab bar instead of dropped, so the phone-facing view keeps that line without losing it or overlapping the nav. See --meco-bottom-bars below, used to size clearance for it. */ :root { --meco-tabbar-h: 60px; } .care-note { display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; position:fixed; left:0; right:0; z-index:39; bottom:calc(var(--meco-tabbar-h) + env(safe-area-inset-bottom, 0px)); margin:0; border-radius:0; padding:8px 16px; box-shadow:0 -6px 14px rgba(0,0,0,.05); } .care-note small { flex-shrink:0; } .care-note p { margin:0; font-size:12.5px; line-height:1.35; } /* 34px care-note + 60px tab bar + safe-area + a little breathing room — without this, short pages (nothing scheduled yet, empty states) leave their last card sitting right under the two fixed bars instead of clear of them. */ .app-content { padding:22px 14px calc(34px + var(--meco-tabbar-h) + env(safe-area-inset-bottom, 0px) + 24px); } /* Patient mode's own fixed-height rule (above) also has to clear the 34px care-note strip and the bottom tab bar, on top of the topbar — same three fixed bars every other page's padding accounts for. */ #app-content.app-content-fixed { height: calc(100vh - 74px - 34px - var(--meco-tabbar-h) - env(safe-area-inset-bottom, 0px)); height: calc(100dvh - 74px - 34px - var(--meco-tabbar-h) - env(safe-area-inset-bottom, 0px)); padding: 10px 12px; } .page-head { align-items:flex-start; flex-direction:column; } .page-head h1 { font-size:48px; } .metric-card { grid-column:span 6; min-height:120px; } .metric-card strong { font-size:38px; } .memory-book-card { grid-column:span 12; } .visit-card { grid-column:span 12; } .form-grid { grid-template-columns:1fr; } .face-modal-card { grid-template-columns:1fr; padding:24px; } /* Trusted-person row: avatar+copy | (multi-button) action row. The action row holds up to 3 buttons ("Add voice" / "Edit details" / "Delete"); under the old 3-column auto/1fr/auto grid its max-content width alone could exceed the screen, which forced the 1fr name/memory column to 0 and rendered the person's whole memory cue letter-by-letter, overlapped by the buttons sitting on top of it. Dropping it to its own full-width row below the name removes that collision entirely. */ .person-row { grid-template-columns:auto 1fr; row-gap:8px; } .person-row > .action-row { grid-column:1 / -1; } .matched-card h3 { font-size:22px; } .matched-card p { font-size:13px; } .patient-bottom { flex-direction:column; align-items:stretch; gap:10px; } /* The 4 controls (Start/Record/Stop/Save) used to be a flex row that wraps unpredictably — at phone widths "Stop recording" alone is wider than half the screen. A fixed 2-column grid keeps this to exactly two rows every time inside whatever height the camera panel actually has. */ .patient-controls { display:grid; grid-template-columns:1fr 1fr; gap:8px; justify-content:stretch; } .patient-controls button { width:100%; padding-left:6px; padding-right:6px; } .patient-quickbar { padding:8px 10px; gap:8px; } .quickbar-back, .quickbar-icon-btn { width:36px; height:36px; font-size:16px; } .patient-tabset-btn { font-size:12px; padding:9px 4px; } .insight-bar-row { grid-template-columns:78px 1fr 28px; gap:8px; } .insight-bar-label { font-size:12px; } .memories-browse { grid-template-columns:1fr; } .journal-composer-page { padding:24px 20px; border-radius:20px; } .mood-picker { grid-template-columns:repeat(3,1fr); } .chapter-header { padding:104px 22px 54px; border-radius:22px; } .chapter-header h1 { font-size:40px; } .chapter-standfirst { font-size:16px; } .header-art-stack { width:230px; } .scan-art-body,.voice-art-body,.chat-art-body,.cal-art-body,.lock-art-body,.seal-art-body,.clin-art-body { height:180px; } .scan-viewport { width:130px; height:150px; } .seal-wrap { width:130px; height:130px; } .seal-badge { width:104px; height:104px; } .header-blob { display:none; } .chapter-body { padding:0 12px; } .chapter-section { margin:56px 0; } .deep-grid,.deep-grid.three-col,.teaser-grid { grid-template-columns:1fr; } .chapter-cta { padding:40px 26px; margin:70px auto 30px; } .chapter-teasers { margin:70px auto; } .pricing-teaser { padding:32px 26px; flex-direction:column; align-items:flex-start; } .playground-grid { grid-template-columns:1fr; } .playground-sidebar { display:flex; gap:6px; overflow-x:auto; padding:12px; } .playground-sidebar .mock-mini-logo { display:none; } .playground-nav { white-space:nowrap; margin-bottom:0; } .playground-content { padding:20px 18px 26px; } .playground-people-grid { grid-template-columns:1fr 1fr; } .chapter-tabs { flex-wrap:wrap; width:calc(100% - 24px); justify-content:center; background:rgba(255,255,255,.75); } .chapter-tab { padding:9px 14px; font-size:13px; } .showcase-grid { grid-template-columns:1fr 1fr; gap:12px; margin-top:32px; } .showcase-card { min-height:190px; padding:16px; } .quote-row { margin:50px auto; gap:16px; } .quote-row p { font-size:18px; min-width:0; } .promo-band { padding:40px 24px; margin:60px auto; border-radius:22px; } .style-picker { gap:8px; } } /* Anyone who has asked their OS for reduced motion gets it — every animation and transition on the site collapses to effectively instant. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .cursor-glow { display: none !important; } /* An infinite CSS animation with duration forced to .01ms would flicker rather than stop, so the marquee gets an explicit override: freeze the track and fall back to the original manual horizontal scroll (the aria-hidden duplicate set is no longer needed once nothing loops). */ .theme-marquee-track { animation: none !important; width: auto; } .theme-marquee-set[aria-hidden="true"] { display: none; } .theme-grid-preview { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x proximity; } .theme-grid-preview .theme-swatch { scroll-snap-align: start; } } /* ===================================================================== THEME SYSTEM — the toggle in both navs, the shared popover, and the homepage showcase all reuse the same .theme-swatch markup/styling. Colors inside each swatch preview are literal (that theme's own paper/ accent/dark), not the currently-active theme's variables — the whole point is showing what you'd get, not what you already have. ===================================================================== */ .theme-toggle { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 17px; cursor: pointer; display: grid; place-items: center; flex-shrink: 0; transition: transform .3s var(--ease-spring), background .2s ease; } .theme-toggle:hover { transform: rotate(-25deg); } .app-top-actions .theme-toggle { margin-right: 2px; } .theme-popover { position: fixed; z-index: 210; top: 76px; right: 20px; width: min(420px, calc(100vw - 32px)); padding: 22px 22px 8px; border-radius: 24px; background: var(--surface); color: var(--ink); box-shadow: 0 30px 70px rgba(0,0,0,.28); border: 1px solid var(--line); } .theme-popover-title { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; font-weight: 400; } .theme-popover-sub { margin: 0 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--muted); } .theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 10px; padding-bottom: 18px; max-height: 60vh; overflow-y: auto; } .theme-swatch { border: 0; background: none; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font: inherit; color: var(--ink); } .theme-swatch-preview { position: relative; width: 100%; aspect-ratio: 4/3; border-radius: 14px; box-shadow: var(--soft-shadow); border: 2px solid transparent; display: flex; align-items: flex-end; gap: 5px; padding: 8px; transition: transform .25s var(--ease-spring), border-color .2s ease, box-shadow .2s ease; } .theme-swatch-preview i { display: block; width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.2); } .theme-swatch:hover .theme-swatch-preview { transform: translateY(-4px) scale(1.04); box-shadow: var(--shadow-premium-hover); } .theme-swatch.active .theme-swatch-preview { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--soft-shadow); } .theme-swatch-name { font-size: 12px; font-weight: 650; text-align: center; line-height: 1.3; } .theme-swatch-name small { display: block; font-weight: 500; color: var(--muted); font-size: 10px; } .theme-showcase { max-width: 1180px; margin: 90px auto; text-align: center; } /* Auto-scrolling marquee, not a manual-swipe strip — see the HTML comment above .theme-grid-preview's markup for the duplicated-track technique. The mask-image feathers both edges so swatches fade in/out at the frame edge instead of hard-clipping mid-card. */ .theme-grid-preview { overflow: hidden; padding: 44px 4px 14px; -webkit-mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, black 48px, black calc(100% - 48px), transparent); } .theme-marquee-track { display: flex; width: max-content; animation: theme-marquee 34s linear infinite; } .theme-grid-preview:hover .theme-marquee-track, .theme-grid-preview:focus-within .theme-marquee-track { animation-play-state: paused; } .theme-marquee-set { display: flex; gap: 18px; padding-right: 18px; } .theme-grid-preview .theme-swatch { flex-shrink: 0; width: 130px; } @keyframes theme-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 760px) { .theme-popover { top: auto; bottom: 76px; right: 10px; left: 10px; width: auto; } .theme-grid { grid-template-columns: repeat(3, 1fr); } .theme-grid-preview .theme-swatch { width: 108px; } } /* Printing the Clinicians chapter (the one page on the site built to be handed to someone, not just scrolled) — strips the floating nav, tab row and CTA buttons, and lets the rest read as a plain document instead of a colourful landing page. Gated on a JS-toggled body class (see wireClinicianPrint in app.js) rather than :has(), which not every browser a doctor's office computer runs will support — this works everywhere @media print itself does. */ @media print { body.printing-clinicians .no-print, body.printing-clinicians .landing-page.hidden, body.printing-clinicians .site-footer, body.printing-clinicians .header-blob, body.printing-clinicians .chapter-body::before, body.printing-clinicians .chapter-body::after, body.printing-clinicians .chapter-header::before, body.printing-clinicians .chapter-header::after { display: none !important; } body.printing-clinicians { background: #fff; } body.printing-clinicians .chapter-header, body.printing-clinicians .promo-band.dark { background: #fff !important; color: #111 !important; box-shadow: none !important; } body.printing-clinicians .promo-band.dark p, body.printing-clinicians .chapter-header.clinicians-chapter .chapter-standfirst { color: #333 !important; } body.printing-clinicians .deep-card, body.printing-clinicians .showcase-card { box-shadow: none !important; border: 1px solid #ddd; break-inside: avoid; } } /* --------------------------------------------------------------------- Memory Graph platform — Phase 1 (Timeline, Recall Engine, Memory Capsules, "Why do I know them?", confidence badges, Activities shell). Reuses existing tokens (--surface/--line/--radius-card/--ease/--accent) rather than introducing a new palette. See /Users/pranavramanathan/.claude/plans/linked-leaping-horizon.md --------------------------------------------------------------------- */ /* Generic tabbed-panel component (Memory, Activities) — modeled on Patient mode's Camera/Conversation/Report tabs, minus the fixed-height/no-scroll behaviour, since dashboard pages scroll normally. */ .content-tabs { display:flex; gap:8px; margin-bottom:18px; flex-wrap:wrap; } .content-tab-btn { appearance:none; cursor:pointer; padding:10px 18px; border-radius:999px; border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; transition:background .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); } .content-tab-btn:hover { background:#f0ece3; } .content-tab-btn:active { transform:scale(.96); } .content-tab-btn.active { background:var(--dark); color:var(--dark-ink); border-color:var(--dark); } /* Confidence / provenance badge — the one visual element required everywhere the Memory Graph shows an AI-touched or family-sourced field, per "never present uncertain AI inference as fact". */ .confidence-badge { font-size:10.5px; letter-spacing:.02em; } .confidence-badge.confidence-fact { background:#d7f0d9; color:#2f6b3a; } .confidence-badge.confidence-family { background:#dbe6fb; color:#2c4f9e; } .confidence-badge.confidence-ai { background:#ffe9c2; color:#8a5a10; } .confidence-badge.confidence-unknown { background:#efe9e2; color:#7e7973; } /* Timeline (Memory > Timeline tab) */ .timeline-list { display:grid; gap:10px; } .timeline-row { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:14px; border-radius:15px; background:#f7f4ef; cursor:pointer; transition:background .2s var(--ease), transform .15s var(--ease); text-align:left; border:0; width:100%; font:inherit; color:inherit; } .timeline-row:hover { background:#f0ece3; } .timeline-row:active { transform:scale(.99); } .timeline-row-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:17px; background:#e9eee9; flex-shrink:0; } .timeline-row-icon.kind-memory { background:#ffe9c2; } .timeline-row-icon.kind-session { background:#c2d0fb; } .timeline-row-icon.kind-journal { background:#bfe9ca; } .timeline-row-copy { min-width:0; } .timeline-row-copy b { display:block; } .timeline-row-copy small { display:block; color:#7e7973; margin-top:4px; } /* Memory Capsule detail / edit view */ .memory-detail-card { display:grid; gap:18px; } .memory-source-note { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:12px 14px; border-radius:12px; background:#f7f4ef; font-size:13px; color:#605b54; } .memory-people-chips { display:flex; flex-wrap:wrap; gap:8px; } .memory-people-chip { display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--line); background:var(--surface); font-size:12.5px; cursor:pointer; transition:background .2s var(--ease); } .memory-people-chip:hover { background:#f0ece3; } .memory-people-chip.selected { background:var(--dark); color:var(--dark-ink); border-color:var(--dark); } .memory-photo-row { display:flex; gap:10px; flex-wrap:wrap; } .memory-photo-row img { width:140px; height:140px; object-fit:cover; border-radius:14px; } .memory-voice-note { padding:14px 16px; border-radius:14px; background:#f7f4ef; display:grid; gap:8px; } .memory-voice-note b { font-size:13px; } .memory-voice-note audio { width:100%; } /* Recall Engine (Memory > Recall tab) */ .recall-search-row { display:flex; gap:10px; margin-bottom:20px; } .recall-search-row input { flex:1; } .recall-result { display:grid; gap:16px; animation:patient-card-in .4s var(--ease) both; } .recall-answer { margin:0; padding:18px 20px; border-radius:16px; background:#f7f4ef; font-size:16px; line-height:1.55; display:flex; flex-direction:column; gap:10px; align-items:flex-start; } .recall-matches { display:grid; gap:10px; } .recall-match-card { display:block; width:100%; text-align:left; border:1px solid var(--line); background:var(--surface); border-radius:14px; padding:14px 16px; cursor:pointer; transition:background .2s var(--ease), transform .15s var(--ease); font:inherit; color:inherit; } .recall-match-card:hover { background:#f0ece3; } .recall-match-card:active { transform:scale(.99); } .recall-match-card b { display:block; margin-bottom:4px; } .recall-match-card small { color:#7e7973; } .recall-provider { font-size:11px; color:#a39d94; text-align:right; } /* Save-as-memory candidate cards (Visit Reports detail) reuse .reminder-suggestions/.reminder-suggestion-row as-is — no new rules needed there. */ /* "Why do I know this person?" toggle on the People page */ .person-why-toggle { justify-self:flex-start; padding:4px 0; font-size:12.5px; color:#8a742f; text-decoration:underline; text-underline-offset:2px; } .person-why { margin-top:6px; padding:10px 12px; border-radius:10px; background:#fff8e6; border:1px solid rgba(201,143,18,.18); font-size:13px; line-height:1.5; color:#5c4d1f; animation:utterance-in .3s var(--ease) both; } /* Activities shell (Stimulation / Reminiscence / Practice) */ .activities-disclaimer { margin:0 0 20px; padding:16px 18px; border-radius:16px; background:#fff4e0; border:1px solid rgba(201,143,18,.25); color:#6b5416; font-size:13px; line-height:1.55; } /* --------------------------------------------------------------------- Phase 2 — assist layer (conversation continuity, object memory) --------------------------------------------------------------------- */ .related-memories { margin:16px 0; padding:16px 18px; border-radius:16px; background:#eef2ff; border:1px solid rgba(44,79,158,.15); display:grid; gap:10px; animation:patient-card-in .4s var(--ease) both; } .related-memories-head { display:flex; align-items:center; gap:10px; } .related-memories-head b { flex-shrink:0; } .related-memories-head small { color:#4a63a0; } .related-memories-head [data-dismiss-related] { margin-left:auto; } .related-memory-card { display:block; width:100%; text-align:left; border:1px solid rgba(44,79,158,.15); background:var(--surface); border-radius:12px; padding:11px 14px; cursor:pointer; font:inherit; color:inherit; transition:background .2s var(--ease); } .related-memory-card:hover { background:#f0ece3; } .related-memory-card b { display:block; margin-bottom:2px; } .related-memory-card small { color:#7e7973; } /* Object memory + Places (Settings sub-sections, share the same row look) */ .object-list { display:grid; gap:10px; } .object-row { display:grid; grid-template-columns:auto 1fr auto; gap:15px; align-items:center; padding:14px; border-radius:15px; background:#f7f4ef; } .object-row-icon { width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:18px; background:#e9eee9; flex-shrink:0; } .object-row-copy small { display:block; color:#7e7973; margin-top:4px; } .place-memories { display:grid; gap:8px; margin-top:10px; } .place-memories:empty { display:none; } /* Context-aware reminders — a caregiver-set note, not a location filter */ .context-badge { background:#dbe6fb; color:#2c4f9e; } /* --------------------------------------------------------------------- Phase 3 — family contributions (share-token inbox) --------------------------------------------------------------------- */ .family-link-row { display:flex; gap:10px; margin-bottom:18px; flex-wrap:wrap; } .family-link-row input { flex:1; min-width:200px; border:1px solid var(--line); border-radius:13px; padding:12px 13px; background:#f7f4ef; color:#605b54; font-size:13px; } .family-contrib-list { display:grid; gap:14px; } .family-contrib-row { padding:16px 18px; border-radius:16px; background:#f7f4ef; animation:patient-card-in .4s var(--ease) both; } .family-contrib-row p { margin:0 0 10px; font-size:14px; line-height:1.5; color:#4a453e; } .family-contrib-photo { max-width:100%; max-height:220px; border-radius:12px; display:block; margin-bottom:10px; object-fit:cover; } .family-contrib-row audio { width:100%; margin-bottom:10px; } /* --------------------------------------------------------------------- Phase 4 — Cognitive Stimulation Mode + Reminiscence Mode --------------------------------------------------------------------- */ .stim-prompt { font-family:var(--serif); font-size:26px; font-weight:400; margin:4px 0 20px; line-height:1.3; } .stim-options { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:10px; } .stim-option { padding:16px 14px; border-radius:14px; border:1px solid var(--line); background:var(--surface); font-size:15px; font-weight:600; cursor:pointer; transition:background .2s var(--ease), transform .15s var(--ease); } .stim-option:hover:not(:disabled) { background:#f0ece3; } .stim-option:active:not(:disabled) { transform:scale(.97); } .stim-freeform { display:flex; gap:10px; } .stim-freeform input { flex:1; border:1px solid var(--line); border-radius:13px; padding:14px 16px; font-size:16px; background:var(--surface); color:var(--ink); } #stim-feedback { min-height:8px; margin-top:14px; } .stim-feedback-ok { margin:0; padding:12px 16px; border-radius:12px; background:#d7f0d9; color:#2f6b3a; font-weight:600; } .stim-feedback-gentle { margin:0; padding:12px 16px; border-radius:12px; background:#f7f4ef; color:#605b54; } .stim-hint-text { margin:0; padding:12px 16px; border-radius:12px; background:#fff4e0; color:#6b5416; } .reminiscence-card { display:grid; gap:14px; justify-items:center; text-align:center; max-width:480px; margin:0 auto; } .reminiscence-photo { width:220px; height:220px; object-fit:cover; border-radius:20px; box-shadow:0 14px 30px rgba(0,0,0,.12); } .reminiscence-photo-empty { display:grid; place-items:center; background:#e9eee9; font-family:var(--serif); font-size:64px; color:#a39d94; } .reminiscence-card h3 { margin:0; font-size:24px; } .reminiscence-prompt { margin:0; color:#8a742f; font-weight:600; } .reminiscence-summary { margin:0; color:#605b54; line-height:1.5; } .reminiscence-card audio { width:100%; } .reminiscence-count { font-size:12px; color:#a39d94; align-self:center; } /* --------------------------------------------------------------------- Phase 5 — Adaptive Spaced Retrieval + Errorless Cueing --------------------------------------------------------------------- */ .cue-box { margin:0 0 18px; padding:14px 18px; border-radius:14px; font-size:15px; line-height:1.5; animation:patient-card-in .35s var(--ease) both; } .cue-full { background:#d7f0d9; color:#2f6b3a; font-size:18px; } .cue-context { background:#dbe6fb; color:#2c4f9e; } .cue-person { background:#f7f4ef; display:flex; align-items:center; gap:12px; font-weight:600; } .cue-category { background:#f7f4ef; color:#605b54; } .cue-partial { background:#fff4e0; color:#6b5416; font-size:22px; letter-spacing:.08em; font-weight:700; text-align:center; } .cue-soft { background:#fff4e0; color:#6b5416; } /* Activities reached from inside Patient mode (independent-use entry point) — .patient-page is already flex:1/min-height:0 from the Patient-mode layout rules above; this just makes the panel itself the one scrolling region, matching how .transcript-scroll works in the Camera/Conversation/Report tabs. */ .patient-activities-scroll { flex:1; min-height:0; overflow-y:auto; padding-right:2px; }