:root { color-scheme: light; --paper: #f8f4ef; --ink: #0a0908; --muted: #5d5a56; --blue: #9edcf2; --blue-soft: #b9c9ff; --green: #79d69b; --yellow: #ffe06e; --peach: #ffcbb8; --mint: #c8f0d6; --lavender: #bec8f8; --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: 34px; --radius-lg: 24px; --radius-md: 18px; --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; } /* 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); } /* 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; } /* 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; } /* 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; } /* 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; } /* 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); } /* 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; } /* 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; } html, body { transition: background-color .4s var(--ease), color .4s var(--ease); } * { box-sizing: border-box; } /* Gentle scroll-snap on the marketing pages — "proximity" rather than "mandatory" on purpose: it pulls a section into place once you're close to it instead of forcibly hijacking every scroll, so a long page (or one with a section taller than the viewport) never feels like it's fighting you. scroll-snap-align only does anything on elements that declare it (below), so this has no effect on the signed-in app dashboard. */ html { scroll-behavior: smooth; background: var(--paper); overflow-x: hidden; scroll-snap-type: y proximity; } .hero-shell, .chapter-header, .playground-section, .chapter-section, .promo-band, .feature-panel, .editorial-row, .chapter-teasers, .chapter-cta, .privacy-banner, .pricing-section, .organize-section { scroll-snap-align: start; scroll-snap-stop: normal; } body { margin: 0; background: var(--paper) radial-gradient(rgba(10,9,8,.045) 1.2px, transparent 1.2px) 0 0/26px 26px; 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: 22px 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(390px, 310px + 9vw, 460px); position: relative; min-height: calc(var(--hero-gap) + 370px); max-width: 1580px; margin: 0 auto 56px; overflow: hidden; border-radius: 28px; 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; } .floating-nav { position: relative; z-index: 10; width: min(980px, calc(100% - 52px)); margin: 20px auto 0; min-height: 58px; display: flex; align-items: center; gap: 28px; padding: 8px 9px 8px 20px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 78%, transparent); border: 1px solid color-mix(in srgb, var(--surface) 90%, transparent); box-shadow: 0 14px 32px rgba(24, 75, 92, .18), inset 0 1px 0 color-mix(in srgb, var(--surface), white); backdrop-filter: blur(16px); color: var(--ink); } .wordmark { display: inline-flex; gap: 1px; align-items: center; font-weight: 900; letter-spacing: -.16em; font-size: 25px; line-height: 1; white-space: nowrap; } .wordmark span { display: inline-block; transform: skew(-7deg); } .nav-links { display: flex; gap: 23px; align-items: center; margin: 0 auto; font-size: 15px; } .nav-links a { opacity: .82; transition: .2s ease; } .nav-links a:hover { opacity: 1; transform: translateY(-1px); } .nav-actions { display: flex; align-items: center; gap: 8px; } .link-button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 10px 12px; border-radius: 999px; } .link-button:hover { background: rgba(0,0,0,.05); } .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); } .pill-button.glass { background: rgba(255,255,255,.57); 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(12px); } .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: 14px; box-shadow: 0 8px 18px rgba(0,0,0,.07); } .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: rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 12px 26px rgba(25,68,37,.14); } .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: 17px; 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: rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 13px 26px rgba(122,88,18,.13); } .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; } .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: 27px; padding: 34px 28px 0; overflow: hidden; box-shadow: var(--shadow); } .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,#b9c4f5,#98b9ef); } .organize-card.sky { background: linear-gradient(180deg,#91def2,#4eb9e9); } .organize-card.mint { background: linear-gradient(180deg,#d7f4df,#83d49a); } .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: 22px; background: rgba(255,255,255,.9); box-shadow: var(--soft-shadow); } .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: 0 auto; border-top: 1px solid var(--line); padding: 38px 0 0; display: flex; align-items: center; gap: 30px; } .site-footer p { color:#777; margin-right:auto; } .site-footer > div:last-child { display:flex; align-items:center; gap:8px; } .reveal { opacity: 0; transform: translateY(30px) scale(.98); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0) scale(1); } .reveal-left { opacity: 0; transform: translateX(-46px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .reveal-right { opacity: 0; transform: translateX(46px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .reveal-up { opacity: 0; transform: translateY(52px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .reveal-up.visible { opacity: 1; transform: translateY(0); } .reveal-scale { opacity: 0; transform: scale(.82); transition: opacity .6s var(--ease-spring), transform .6s var(--ease-spring); } .reveal-scale.visible { opacity: 1; transform: scale(1); } .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; box-shadow: 0 18px 40px rgba(24,75,92,.26), inset 0 1px 0 white; background: rgba(250,253,252,.92); } .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); } /* 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); } } .app-content.page-enter { animation: page-in .35s var(--ease); } .side-nav { transition: background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease); } .side-nav:hover { transform: translateX(2px); } .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-y:auto; border-right:1px solid var(--line); background:var(--sidebar-bg); } .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; } .sidebar-spacer { flex:1; min-height:12px; } .care-note { padding:17px; margin:10px 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; } .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 { background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:22px; padding:24px; box-shadow:0 13px 30px rgba(44,34,23,.07); } .app-card.blue { background:#c2d0fb; } .app-card.green { background:#bfe9ca; } .app-card.yellow { background:#ffe78f; } .app-card.peach { background:#ffd2c2; } .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; } .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; } /* ---------- 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; } /* ---------- Patient orientation strip ---------- */ .patient-orientation { display:grid; grid-template-columns:1.3fr 1fr auto; gap:20px; align-items:center; padding:22px 26px; margin-bottom:18px; border-radius:22px; background:linear-gradient(135deg,#fff8e8,#fff1d6); box-shadow:0 10px 24px rgba(105,77,13,.08); } .patient-orientation-greeting small, .patient-orientation-next small { display:block; font-size:10px; font-weight:700; letter-spacing:.08em; color:#a5936a; margin-bottom:4px; } .patient-orientation-greeting h2 { margin:0; font-family:var(--serif); font-size:26px; font-weight:400; line-height:1.1; } .patient-orientation-greeting p, .patient-orientation-next p { margin:2px 0 0; color:#5d5750; font-size:14px; } .patient-orientation-next { padding-left:20px; border-left:1px solid rgba(105,77,13,.14); } .patient-orientation-actions { display:flex; flex-direction:column; gap:8px; } .patient-orientation-actions .action-button { white-space:nowrap; } .patient-orientation-actions .action-button.danger { background:#fff; border-color:rgba(166,62,52,.35); } .patient-orientation-actions .action-button.danger:hover { background:#fbdcd8; } .elder-mode .patient-orientation-greeting h2 { font-size:1.6em; } .elder-mode .patient-orientation-actions .action-button { min-height:52px; font-size:1.05em; } /* 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; } .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:18px; 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-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-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; } .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:14px 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 { min-height:calc(100vh - 142px); position:relative; } .patient-page::before { content:""; position:absolute; top:-36px; left:-36px; right:-36px; height:320px; background:radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 60%), radial-gradient(circle at 88% 6%, color-mix(in srgb, var(--dark) 14%, transparent), transparent 55%); filter:blur(4px); pointer-events:none; z-index:0; } .patient-page > * { position:relative; z-index:1; } .patient-stage { display:grid; grid-template-columns:1.15fr .85fr; gap:22px; } .patient-camera-card { min-height:640px; 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%; min-height:640px; object-fit:cover; display:block; } .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); } .matched-card h3 { margin:0 0 5px; font-family:var(--serif); font-size:34px; font-weight:400; } .matched-card p { margin:0; color:#5f5b56; } .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), box-shadow .18s var(--ease); } .patient-controls button:not(:disabled):hover { transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.18); } .patient-side { display:grid; gap:18px; align-content:start; } .patient-side > .app-card { animation:patient-card-in .5s var(--ease) both; } .patient-side > .app-card:nth-child(1) { animation-delay:.04s; } .patient-side > .app-card:nth-child(2) { animation-delay:.1s; } .patient-side > .app-card:nth-child(3) { animation-delay:.16s; } @keyframes patient-card-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } } .calming-card { padding:20px 22px; } .calming-hint { margin:2px 0 14px; font-size:13px; color:var(--muted); } .calming-options { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; } .calming-chip { padding:9px 15px; 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 .2s var(--ease); } .calming-chip:hover { transform:translateY(-1px); } .calming-chip.active { background:var(--dark); border-color:var(--dark); color:var(--dark-ink); } .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:420px; } .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; } .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 { position:relative; width:min(520px,100%); min-height:590px; border-radius:28px; background:var(--paper); color:var(--ink); padding:30px; box-shadow:0 35px 90px rgba(0,0,0,.28); } .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; } .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 { position:relative; width:min(980px,100%); max-height:94vh; overflow:auto; border-radius:28px; background:var(--paper); color:var(--ink); padding:32px; display:grid; grid-template-columns:.8fr 1.2fr; gap:28px; box-shadow:0 35px 90px rgba(0,0,0,.28); } .person-modal-card { position:relative; width:min(540px,100%); max-height:94vh; overflow:auto; border-radius:28px; background:var(--paper); color:var(--ink); padding:32px; box-shadow:0 35px 90px rgba(0,0,0,.28); } .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:18px; 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:22px; 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:10px; 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:14px; 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: 28px; 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); } } .chapter-header.recognize-chapter { background: linear-gradient(135deg, #b5c7fb, #aebefa); } .chapter-header.product-chapter { background: linear-gradient(135deg, #76d598, #8bd69e); } .chapter-header.companion-chapter { background: linear-gradient(135deg, #ffcbb8, #ffb4a4); } .chapter-header.caregiver-chapter { background: linear-gradient(135deg, #ffe67b, #ffdf65); } .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, #a9d4cf, #8fc4be); } /* 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; } .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: 22px; background: #fff; box-shadow: var(--soft-shadow); 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; } .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: 22px; box-shadow: var(--soft-shadow); color: #11100f; 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,#c7d7ff,#aebefa); } .teaser-card.green-tab { background: linear-gradient(160deg,#a8e6bb,#8bd69e); } .teaser-card.coral-tab { background: linear-gradient(160deg,#ffcbb8,#ffa88f); } .teaser-card.yellow-tab { background: linear-gradient(160deg,#ffedad,#ffdf65); } .teaser-card.dark-tab { background: linear-gradient(160deg,#2a3d33,#16291f); 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); transition: opacity .55s var(--ease), transform .55s var(--ease); } .stagger-group.visible > * { opacity: 1; transform: translateY(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; } .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); } /* 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; } .patient-orientation { grid-template-columns:1fr; text-align:left; } .patient-orientation-next { padding-left:0; border-left:0; padding-top:14px; border-top:1px solid rgba(105,77,13,.14); } .patient-orientation-actions { flex-direction:row; } .patient-orientation-actions .action-button { flex:1; } .patient-stage { grid-template-columns:1fr; } .patient-camera-card,.patient-video { min-height:560px; } .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:8px 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; } .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; } .site-footer { flex-direction:column; align-items:flex-start; } .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-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; border-top:1px solid rgba(0,0,0,.1); border-right:0; } .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; } .sidebar-spacer { display:none; } /* 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); } .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; } .patient-page .page-head p { max-width:34ch; } .matched-card h3 { font-size:26px; } .matched-card p { font-size:14px; } .patient-bottom { flex-direction:column; align-items:stretch; } /* The 4 controls (Start/Record/Stop/Save) used to be a flex row that wraps — at phone widths "Stop recording" alone is wider than half the screen, so the wrap point was unpredictable and, combined with elder mode's wider buttons, could run to 3–4 rows without warning. A fixed 2-column grid keeps this to exactly two rows every time, so its height can actually be budgeted for below instead of guessed at. */ .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-orientation { padding:18px 20px; border-radius:18px; } .patient-orientation-actions { flex-direction:column; } .insight-bar-row { grid-template-columns:78px 1fr 28px; gap:8px; } .insight-bar-label { font-size:12px; } .memories-browse { grid-template-columns:1fr; } /* .patient-camera-card clips its own overflow (for the video's rounded corners), so if the overlay's content — status row + face guide message + controls — needs more height than this card gets, the excess isn't just visually behind the tab bar, it's invisible, clipped away entirely. That's a worse failure than the overlap this replaces, so the budget below was measured against the two-row grid above, in both normal and elder mode, with ~30px of slack rather than assumed. */ .patient-camera-card,.patient-video { min-height:430px; } .patient-page.elder-mode .patient-camera-card,.patient-page.elder-mode .patient-video { min-height:520px; } .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; } html { scroll-snap-type: none !important; } } /* ===================================================================== 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; } .theme-grid-preview { display: flex; gap: 18px; overflow-x: auto; padding: 44px 4px 14px; scroll-snap-type: x proximity; } .theme-grid-preview .theme-swatch { flex-shrink: 0; width: 130px; scroll-snap-align: start; } @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; } }