:root { --peach1: #FFE1B8; --peach2: #FFC8B0; --blue-bg: #DDEBF7; --blue-text: #2f6ca0; --green-bg: #E4F3E4; --green-text: #3f8a4f; --peach-bg: #FFE3D6; --peach-bg2: #FFF1EC; --peach-text: #C4623F; --purple-bg: #E2DAF3; --purple-bg2: #F3EDFB; --purple-text: #5b46a0; --rose-bg: #F0DDD8; --rose-bg2: #F9F1EF; /* Calendar "who's on duty" colors — deliberately a bolder, more hue-distant pair (blue vs. magenta, not blue vs. lavender) than the app's general pastel blue/purple tokens above. Those pastels read almost identically at a glance, especially in a small grid cell, so the day-cell fills use their own stronger, higher-contrast tokens instead. */ --duty-p0-bg: #4E97D9; --duty-p0-text: #ffffff; --duty-p1-bg: #D1559E; --duty-p1-text: #ffffff; --plum: #3A2E39; --brown1: #7A3B29; --brown2: #9C5540; --brown3: #6b5651; --muted: #A08D89; --muted2: #8a7772; --border-soft: #F0DDD8; --divider: #F6ECEA; --accent: #E07856; --accent-dark: #C4623F; --green-accent: #3f8a4f; --green-grad: linear-gradient(90deg,#7ecf8f,#3f8a4f); --card-shadow: 0 4px 16px rgba(180,92,75,.06); /* Surfaces — every "white card" and "off-white input" in the app reads off these instead of a literal #fff, so dark mode only has to override these few tokens to flip everything. */ --bg-gradient: linear-gradient(160deg,#FFF7ED,#FDF2F8); --surface: #fff; --surface2: #FFFDFB; --chip-bg: #FFF3E9; --chip-border: #FFE0D2; --alert-bg: #FFF6F2; --alert-border: #F0A08A; --overlay-scrim: rgba(58,46,57,.55); /* Fixed (never flip with theme) — for text sitting on the handful of elements that are ALWAYS a light pastel gradient regardless of theme: the kidcard, village hero, birthday banners, and calendar-day badges. Those backgrounds intentionally don't go dark (small colorful accents read fine as "light islands" on a dark page), so their text can't use the regular brown/plum tokens once those flip to light-on-dark. */ --ink-strong: #7A3B29; --ink-soft: #9C5540; } /* Dark mode. Toggled in Settings (see theme.js), persisted, and applied by setting data-theme="dark|light|system" on before first paint (to avoid a flash of the wrong theme). "system" follows the OS's prefers-color-scheme instead of a fixed choice — same warm palette, just inverted for low light, rather than a generic gray dark theme. */ :root[data-theme="dark"] { --plum: #F3E9E6; --brown1: #FFD9C2; --brown2: #E8B9A0; --brown3: #D9BDB3; --muted: #9C8983; --muted2: #C9B8B2; --border-soft: #4A3B3D; --divider: #3C2F31; --card-shadow: 0 4px 16px rgba(0,0,0,.35); --bg-gradient: linear-gradient(160deg,#241A1D,#2A1E26); --surface: #322528; --surface2: #3A2C2F; --chip-bg: #4A3A3C; --chip-border: #5A4548; --alert-bg: #4A2E2C; --alert-border: #B5715C; --overlay-scrim: rgba(0,0,0,.65); } @media (prefers-color-scheme: dark) { :root[data-theme="system"] { --plum: #F3E9E6; --brown1: #FFD9C2; --brown2: #E8B9A0; --brown3: #D9BDB3; --muted: #9C8983; --muted2: #C9B8B2; --border-soft: #4A3B3D; --divider: #3C2F31; --card-shadow: 0 4px 16px rgba(0,0,0,.35); --bg-gradient: linear-gradient(160deg,#241A1D,#2A1E26); --surface: #322528; --surface2: #3A2C2F; --chip-bg: #4A3A3C; --chip-border: #5A4548; --alert-bg: #4A2E2C; --alert-border: #B5715C; --overlay-scrim: rgba(0,0,0,.65); } } /* ===================== TwoNests Keep Mode ===================== */ /* Applied automatically (data-keep="on" on ) whenever a family's paid Keep is active. It's a full premium re-skin done the same safe way dark mode is — by overriding the shared color tokens, so every screen elevates at once with no per-screen edits. Warm-luxe palette: cream + gold + plum, light-based so all the app's dark-text-on-light assumptions stay readable. Placed after the dark blocks so it wins regardless of light/dark preference — Keep Mode has its own identity. */ /* Executive palette: deep espresso surfaces + warm gold, built on the same token overrides dark mode uses (so it's proven-readable). Deliberately does NOT touch the "light island" tokens (--peach1/2, --peach-bg2, --purple-bg2, --ink-*) — so the kid card, birthday banners, and soft-notes stay warm glowing islands on the espresso page, exactly like dark mode. Accent gold is a mid tone so it reads on both those light islands AND the dark cards. */ :root[data-keep="on"] { --plum: #F3E9DC; --brown1: #F2D9A8; --brown2: #E3C48F; --brown3: #D6C4B4; --muted: #A89684; --muted2: #C9B7A6; --border-soft: #4C3D30; --divider: #3A2E26; --card-shadow: 0 14px 36px rgba(0,0,0,.5); --bg-gradient: linear-gradient(160deg,#241C17 0%,#251B22 55%,#2A2136 100%); --surface: #2E2320; --surface2: #372A24; --chip-bg: #3E2F25; --chip-border: #5A4633; --accent: #E4B24E; --accent-dark: #C89235; --alert-bg: #4A2E2C; --alert-border: #B5715C; --overlay-scrim: rgba(0,0,0,.72); } /* Executive chrome: gold on espresso, serif headings, gold CTA with dark text, gold Keep tab + title. */ :root[data-keep="on"] .card { border: 1px solid rgba(228,178,78,.16); border-radius: 20px; } :root[data-keep="on"] #tabbar { border-top: 1px solid rgba(228,178,78,.22); } :root[data-keep="on"] #tabbar .tab.active { color: var(--accent); } :root[data-keep="on"] #tabbar .tab[data-tab="keep"] { color: var(--accent); } :root[data-keep="on"] .topbar { border-bottom: 1px solid rgba(228,178,78,.22); } :root[data-keep="on"] .topbar-title { color: var(--accent); font-family: Georgia, serif; letter-spacing: .3px; } :root[data-keep="on"] h1 { font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; letter-spacing: .2px; } :root[data-keep="on"] .label { color: #DDA94A; letter-spacing: .1em; } :root[data-keep="on"] .sub { color: #B7A48F; } :root[data-keep="on"] .btn:not(.ghost) { background: linear-gradient(135deg,#E7BE60,#CB9A34); color: #2a1c06; box-shadow: 0 8px 20px rgba(0,0,0,.4); } :root[data-keep="on"] .btn.ghost { background: rgba(228,178,78,.1); color: #EBC97E; border: 1px solid rgba(228,178,78,.4); } :root[data-keep="on"] .chip { border-radius: 12px; } :root[data-keep="on"] #tabbar .tab[data-tab="keep"] .ic { text-shadow: 0 0 10px rgba(228,178,78,.5); } /* Keep hero — a light warm banner in the free/upsell view, a deep espresso one in Keep Mode. */ .keep-hero { border-radius: 22px; padding: 24px 22px; margin-bottom: 16px; position: relative; overflow: hidden; background: linear-gradient(135deg,#F2D9A6 0%,#ECD2DC 52%,#DACFEC 100%); border: 1px solid rgba(184,132,42,.28); box-shadow: 0 12px 34px rgba(150,110,50,.2); } /* The light Keep hero + highlight card keep DARK text in every non-Keep theme (including dark mode, whose light text tokens would otherwise wash out against these warm light backgrounds). :root-scoped for enough specificity to beat token inheritance; the [data-keep="on"] espresso overrides come after so they still win when Keep is active. */ :root .keep-hero .keep-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8a5e12; } :root .keep-hero h1 { margin: 8px 0 6px; color: #3C2C12; } :root .keep-hero .keep-hero-sub { font-size: 14px; color: #5C4516; line-height: 1.5; } .keep-highlight { background: linear-gradient(135deg,#FFF6E8,#F7EFFB); border: 1px solid #EBD9C0; } :root .keep-highlight .mt { color: #3C2C12; } :root .keep-highlight .mm { color: #6B5A3A; } :root[data-keep="on"] .keep-hero { background: linear-gradient(135deg,#4C3620 0%,#3B2540 58%,#2A2136 100%); border-color: rgba(228,178,78,.3); box-shadow: 0 16px 40px rgba(0,0,0,.45); } :root[data-keep="on"] .keep-hero .keep-kicker { color: #E4B24E; } :root[data-keep="on"] .keep-hero h1 { color: #FBF3E6; } :root[data-keep="on"] .keep-hero .keep-hero-sub { color: #DBCBBE; } :root[data-keep="on"] .keep-highlight { background: linear-gradient(135deg,#3A2C22,#332742); border-color: rgba(228,178,78,.25); } :root[data-keep="on"] .keep-highlight .mt { color: #FBF3E6; } :root[data-keep="on"] .keep-highlight .mm { color: #D9C8B8; } /* Keep task screens (Record, Money) — a compact header instead of the big home banner. */ .keep-subhead { margin: 6px 2px 14px; } .keep-subhead h1 { margin: 4px 0 6px; } .keep-subhead .keep-kicker { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-dark); } .keep-subhead .keep-hero-sub { font-size: 13.5px; color: var(--muted); line-height: 1.5; } :root[data-keep="on"] .keep-subhead .keep-kicker { color: var(--accent); } /* Keep home quick-action tiles — 2×2 grid of tappable cards. */ .keep-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .keep-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 18px; padding: 14px; cursor: pointer; box-shadow: var(--card-shadow); } .keep-tile .kt-ic { font-size: 24px; margin-bottom: 4px; } .keep-tile .kt-l { font-weight: 800; font-size: 14px; color: var(--brown1); } .keep-tile .kt-s { font-size: 11px; color: var(--muted); } :root[data-keep="on"] .keep-tile { border-color: rgba(228,178,78,.18); } :root[data-keep="on"] .keep-tile:active { border-color: rgba(228,178,78,.5); } /* Money — warm spending-category quick-pick chips. */ .money-cats { display: flex; flex-wrap: wrap; gap: 7px; } .money-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; } .money-flt { flex: 1; min-width: 96px; padding: 8px 10px; border: 1.5px solid var(--border-soft); border-radius: 12px; background: var(--surface2); color: var(--plum); font-size: 12.5px; font-family: inherit; } .cat-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 700; background: var(--chip-bg); border: 1px solid var(--chip-border); color: var(--brown1); border-radius: 999px; padding: 7px 12px; cursor: pointer; } .cat-chip.sel { background: var(--accent); border-color: var(--accent); color: #2a1c06; } /* Money — the "who owes whom" balance scale (the creative centerpiece). */ .money-balance-card { text-align: center; } .money-scale { display: flex; justify-content: center; margin: 4px 0 12px; } .ms-beam { display: flex; align-items: flex-end; justify-content: center; gap: 14px; transition: transform .6s cubic-bezier(.34,1.3,.5,1); transform-origin: center 90%; } .ms-pan { min-width: 92px; background: var(--surface2); border: 1px solid var(--divider); border-radius: 16px; padding: 12px 10px; } .ms-pan-amt { font-size: 18px; font-weight: 800; color: var(--brown1); } .ms-pan-l { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 2px; } .ms-fulcrum { font-size: 30px; align-self: center; } .money-scale[data-tone="up"] .ms-pan:last-child { border-color: var(--accent); box-shadow: 0 6px 16px rgba(228,178,78,.18); } .money-scale[data-tone="up"] .ms-pan:last-child .ms-pan-amt { color: var(--accent-dark); } .money-scale[data-tone="down"] .ms-pan:first-child { border-color: #C98A6A; } .money-headline { font-family: Georgia, "Iowan Old Style", serif; font-size: 19px; font-weight: 700; color: var(--brown1); margin: 4px 0 2px; } :root[data-keep="on"] .money-headline { color: var(--accent); } :root[data-keep="on"] .money-scale[data-tone="up"] .ms-pan:last-child .ms-pan-amt { color: var(--accent); } /* Note on 100vh vs 100dvh: iOS Safari's address bar shows/hides as you scroll, and 100vh is measured against the LARGEST possible viewport (bar hidden) — so on load (bar visible) the page is actually taller than what's on screen, letting the whole body scroll and dragging the bottom tab bar out of view below the fold. 100dvh tracks the real, current visible viewport instead, so the tab bar stays put. html/body get overflow:hidden so the ONLY thing that ever scrolls is .screen — the tab bar (a sibling, not a child, of .screen) can never be scrolled out of view. IMPORTANT: this only works if #root and .app-shell use a DEFINITE `height` (not `min-height`). With only min-height, a flex container is free to grow taller than the viewport to fit its content, flex:1 stops constraining .screen, and — combined with overflow:hidden above — anything past the bottom of the *original* viewport (including the tab bar itself) becomes completely clipped with no way to scroll to it. Definite height keeps the column locked to the viewport so .screen (flex:1; overflow-y:auto) is what scrolls, never the tab bar. */ * { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; } html, body { height: 100%; overflow: hidden; } body { font-family: -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--bg-gradient); height: 100vh; height: 100dvh; color: var(--plum); } #root { height: 100vh; height: 100dvh; } .app-shell { max-width: 460px; margin: 0 auto; height: 100vh; height: 100dvh; background: var(--bg-gradient); display: flex; flex-direction: column; position: relative; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.10); } @media (min-width: 720px) { .app-shell { margin: 24px auto; height: calc(100vh - 48px); height: calc(100dvh - 48px); border-radius: 38px; } } /* Warm, calming drifting background wash behind every screen — echoes the marketing site's background animation, kept subtle so it never fights with card/text legibility. */ .app-shell::before { content: ''; position: absolute; inset: -60px; z-index: -1; background: radial-gradient(circle at 15% 10%, var(--peach1), transparent 40%), radial-gradient(circle at 90% 20%, var(--purple-bg), transparent 38%), radial-gradient(circle at 20% 85%, var(--green-bg), transparent 40%), radial-gradient(circle at 85% 90%, var(--blue-bg), transparent 38%); filter: blur(50px); opacity: .55; animation: appBgDrift 40s ease-in-out infinite; pointer-events: none; } @keyframes appBgDrift { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-25px, 20px) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .app-shell::before { animation: none; } } .topbar { height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-dark); letter-spacing: .5px; flex-shrink: 0; padding: 0 6px; } .topbar-title { flex: 1; text-align: center; } /* Family settings used to live as a button in the top corner — users on larger phones said it was too far from their thumb to reach one-handed. Moved to a floating button anchored near the bottom of the screen instead (thumb-friendly zone), sitting just above the tab bar and staying put while the screen content scrolls underneath it (.app-shell is position:relative with a definite height, so this positions relative to the whole app frame, not the viewport). */ .fab-settings { position: absolute; right: 18px; bottom: 90px; z-index: 10; width: 50px; height: 50px; border-radius: 50%; border: none; background: var(--surface); color: var(--accent-dark); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,.18); } .fab-settings:hover, .fab-settings:active { background: var(--chip-bg); } .screen { flex: 1; overflow-y: auto; padding: 4px 20px 100px; } .tabbar { position: sticky; bottom: 0; left: 0; right: 0; height: 74px; background: var(--surface); border-top: 1px solid var(--border-soft); display: flex; flex-shrink: 0; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 10px; color: #B9A7A3; cursor: pointer; font-weight: 600; background: none; border: none; } .tab .ic { font-size: 18px; } .tab.active { color: var(--accent-dark); } h1 { font-size: 24px; margin: 10px 0 2px; } .sub { color: var(--muted); font-size: 13px; margin-bottom: 16px; } .card { background: var(--surface); border-radius: 22px; padding: 18px; margin-bottom: 14px; box-shadow: var(--card-shadow); } /* Home screen's day-browser row — arrows either side of the currently-viewed day's label */ .dayrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 4px 0 10px; } .dayrow-label { flex: 1; text-align: center; } .dayrow .chip { padding: 8px 14px; } .kidcard { background: linear-gradient(135deg,var(--peach1),var(--peach2)); border-radius: 26px; padding: 20px; margin-bottom: 16px; position: relative; overflow: hidden; } .kidcard .row { display: flex; align-items: center; gap: 14px; } .kidcard .avatar { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 30px; box-shadow: 0 4px 10px rgba(0,0,0,.1); } .kidcard .name { font-size: 20px; font-weight: 800; color: var(--ink-strong); } /* App-wide birthday celebration — shown all day, on every screen, for whoever's birthday it is */ .birthday-banner { background: linear-gradient(90deg, var(--peach1), var(--purple-bg), var(--peach2), var(--purple-bg2)); background-size: 300% 100%; animation: bbShift 8s ease-in-out infinite; padding: 10px 14px; text-align: center; font-weight: 800; font-size: 13px; color: var(--ink-strong); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .birthday-banner .bb-emoji { display: inline-block; animation: bbBounce 1.6s ease-in-out infinite; } .birthday-banner .bb-emoji:nth-child(2) { animation-delay: .2s; } .birthday-banner .bb-emoji:nth-child(4) { animation-delay: .4s; } @keyframes bbShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } @keyframes bbBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } .kidcard.birthday-glow { background: linear-gradient(135deg, var(--peach1), var(--purple-bg), var(--peach2)); background-size: 200% 200%; animation: bbShift 6s ease-in-out infinite; } .birthday-month-card { background: var(--purple-bg2); border: 1px solid #DDD0F3; border-radius: 18px; padding: 14px 16px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; } .birthday-month-card .bm-emoji { font-size: 28px; flex-shrink: 0; } .birthday-month-card .bm-text { font-size: 13px; font-weight: 700; color: var(--purple-text); } .kidcard .with { font-size: 13px; color: var(--ink-soft); font-weight: 600; } .pill { display: inline-block; background: #FFF3E9; color: var(--accent-dark); font-size: 11px; font-weight: 700; padding: 5px 11px; border-radius: 20px; margin-top: 8px; cursor: pointer; border: none; } .label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; } .next { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .next .ic2 { width: 40px; height: 40px; border-radius: 12px; background: var(--purple-bg2); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .next .t { font-weight: 700; font-size: 14px; } .next .d { color: var(--muted); font-size: 12px; } .moment { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--divider); } .moment:last-child { border-bottom: none; } .moment .mimg { width: 46px; height: 46px; border-radius: 14px; font-size: 24px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; } .moment .mimg img, .moment .mimg video { width: 100%; height: 100%; object-fit: cover; } [data-lightbox-url] { cursor: pointer; } .moment .mt { font-weight: 700; font-size: 14px; } .moment .mm { color: var(--muted2); font-size: 13px; } .moment .mtime { color: var(--muted); font-size: 11px; margin-top: 3px; } .softnote { background: var(--peach-bg2); border: 1px solid #FFD9CC; border-radius: 16px; padding: 13px 15px; font-size: 13px; color: var(--accent-dark); font-weight: 600; display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; cursor: default; } .softnote.green { background: var(--green-bg); border-color: #C6E5CB; color: var(--green-text); } .softnote.purple { background: var(--purple-bg2); border-color: #DDD0F3; color: var(--purple-text); } .btn { background: var(--accent); color: #fff; border: none; border-radius: 16px; padding: 14px; width: 100%; font-size: 15px; font-weight: 700; cursor: pointer; margin-top: 6px; box-shadow: 0 6px 16px rgba(224,120,86,.3); } .btn.ghost { background: var(--chip-bg); color: var(--accent-dark); box-shadow: none; } .btn.small { width: auto; padding: 10px 16px; font-size: 13px; } /* Momentary "already processing this tap" state — see installDoubleTapGuard in app.js. Purely visual; the guard blocks the repeat click in JS so a slow button can't be mashed into duplicates. */ .btn.is-busy { opacity: .6; cursor: progress; } /* Collapsible settings groups — keeps the settings modal short instead of one long scroll. Native
, so it stays accessible and needs no JS; inner fields remain in the DOM (just hidden) so their wiring is unaffected. */ .sgroup { border: 1px solid var(--divider); border-radius: 12px; margin-bottom: 8px; overflow: hidden; } .sgroup > summary { list-style: none; cursor: pointer; padding: 12px 14px; font-weight: 800; font-size: 13px; color: var(--brown1); display: flex; align-items: center; justify-content: space-between; } .sgroup > summary::-webkit-details-marker { display: none; } .sgroup > summary::after { content: '▾'; color: var(--muted2); font-size: 12px; transition: transform .2s; } .sgroup[open] > summary::after { transform: rotate(180deg); } .sgroup > .sgroup-body { padding: 4px 14px 12px; } .sgroup > .sgroup-body .label:first-child { margin-top: 0; } .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; color: var(--brown3); } .field input, .field select, .field textarea { width: 100%; padding: 13px; border: 1.5px solid var(--border-soft); border-radius: 14px; font-size: 15px; background: var(--surface2); color: var(--plum); font-family: inherit; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* Month/Day/Year and Hour/Min/AM-PM picker rows — replaces clunky native date/time inputs */ .dpk3 { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 8px; } .dpk3 select { width: 100%; padding: 13px 8px; border: 1.5px solid var(--border-soft); border-radius: 14px; font-size: 15px; background: var(--surface2); color: var(--plum); font-family: inherit; text-align: center; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .chip { background: var(--chip-bg); border: 1.5px solid var(--chip-border); color: var(--accent-dark); padding: 9px 13px; border-radius: 14px; font-size: 13px; font-weight: 700; cursor: pointer; } .chip.sel { background: var(--accent); color: #fff; border-color: var(--accent); } .calgrid { display: grid; grid-template-columns: repeat(7,1fr); gap: 5px; margin-top: 6px; } .cah { text-align: center; font-size: 10px; font-weight: 800; color: var(--muted); padding: 4px 0; } .cell { aspect-ratio: 1; border-radius: 11px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--rose-bg2); color: var(--ink-strong); position: relative; cursor: pointer; } .cell .dnum { font-size: 12px; } .cell.work { background: var(--duty-p0-bg); color: var(--duty-p0-text); } .cell.workn { background: var(--duty-p1-bg); color: var(--duty-p1-text); } .cell.workboth { background: linear-gradient(135deg, var(--duty-p0-bg) 50%, var(--duty-p1-bg) 50%); color: #fff; } .cell.off { background: var(--green-bg); color: var(--green-text); } .cell.empty { background: transparent; cursor: default; } .cell .dot { position: absolute; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent-dark); } .cell .cell-bday { position: absolute; top: 1px; right: 2px; font-size: 9px; line-height: 1; } .cell.selected { box-shadow: 0 0 0 2px var(--accent) inset; } .legend { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 6px; font-size: 11px; font-weight: 700; color: var(--muted2); } .legend span { display: flex; align-items: center; gap: 5px; } .sw { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } .head { display: flex; justify-content: space-between; align-items: baseline; } .result-banner { background: linear-gradient(135deg,var(--green-bg),#D5EED9); border-radius: 16px; padding: 13px 15px; font-size: 13px; font-weight: 700; color: var(--green-text); margin-bottom: 14px; } .seg { display: flex; background: var(--divider); border-radius: 14px; padding: 4px; margin-bottom: 16px; } .seg button { flex: 1; border: none; background: transparent; padding: 9px; border-radius: 11px; font-weight: 700; font-size: 13px; color: var(--muted); cursor: pointer; } .seg button.on { background: var(--surface); color: var(--accent-dark); box-shadow: 0 2px 6px rgba(0,0,0,.06); } .entry { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--divider); align-items: flex-start; } .entry:last-child { border-bottom: none; } .eimg { width: 44px; height: 44px; border-radius: 13px; font-size: 22px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--peach-bg2); } .etitle { font-weight: 700; font-size: 14px; } .emeta { font-size: 12px; color: var(--muted2); margin-top: 2px; } .byline { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; margin-top: 5px; } .by-you { background: var(--blue-bg); color: var(--blue-text); } .by-them { background: var(--peach-bg); color: var(--accent-dark); } .starrow { color: #E8B04B; font-size: 13px; letter-spacing: 1px; } .sleepbar { height: 26px; border-radius: 8px; background: linear-gradient(90deg,var(--purple-bg),#C9BCEF); display: flex; align-items: center; padding: 0 10px; color: var(--purple-text); font-size: 11px; font-weight: 700; margin-top: 4px; } .addbar { display: flex; gap: 8px; margin-bottom: 14px; } .addbar input, .addbar select { flex: 1; padding: 12px; border: 1.5px solid var(--border-soft); border-radius: 13px; font-size: 14px; background: var(--surface2); } .addbar button { background: var(--accent); color: #fff; border: none; border-radius: 13px; padding: 0 16px; font-weight: 800; font-size: 18px; cursor: pointer; } .photogrid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; margin-top: 10px; } .photo { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; position: relative; overflow: hidden; background: var(--blue-bg); cursor: pointer; } .photo img, .photo video { width: 100%; height: 100%; object-fit: cover; } .photo .vid { position: absolute; bottom: 5px; right: 6px; font-size: 12px; background: rgba(0,0,0,.35); color: #fff; border-radius: 6px; padding: 1px 4px; } .photo .fav { position: absolute; top: 5px; right: 6px; font-size: 13px; } .photo.add { background: var(--chip-bg); border: 2px dashed #FFCDB8; color: var(--accent); font-size: 26px; flex-direction: column; } .photo.add small { font-size: 9px; font-weight: 800; margin-top: 2px; } .memory-overlay { position: fixed; inset: 0; background: var(--overlay-scrim); backdrop-filter: blur(3px); z-index: 50; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; } /* This same card is reused for the Settings modal, which can grow much taller than a phone screen once a family has several children each with their own fields — without a max-height and its own scrollbar, everything past the fold was simply unreachable. */ .memory-card { background: var(--surface); border-radius: 26px; padding: 24px; text-align: center; max-width: 300px; max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.3); animation: pop .35s ease; margin: 0 auto; } @keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } } .memory-card .bigimg { width: 100%; height: 150px; border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 64px; margin-bottom: 14px; overflow: hidden; } .memory-card .bigimg img, .memory-card .bigimg video { width: 100%; height: 100%; object-fit: cover; } /* Full-size photo/video viewer, opened by tapping any moment's media thumbnail */ .media-lightbox-overlay { align-items: center; } .lightbox-media { max-width: 100%; max-height: calc(100vh - 48px); border-radius: 18px; display: block; box-shadow: 0 20px 50px rgba(0,0,0,.4); } .memory-card h3 { font-size: 18px; margin-bottom: 6px; color: var(--brown1); } .memory-card p { font-size: 13px; color: var(--muted2); line-height: 1.5; margin-bottom: 16px; } /* .idea rows get an inline fixed-light pastel background per idea (set in ideas.js), so — like the kidcard — their icon badge and title stay on the fixed --ink-strong/white tokens rather than the ones that flip with the page theme. */ /* Birthday celebration popup — deliberately bigger and more decorated than the regular memory pop-up: this is the one moment in the app that's meant to feel like an event, not a note. */ .birthday-popup-card { background: linear-gradient(135deg, var(--peach1), var(--purple-bg), var(--peach2)); background-size: 200% 200%; animation: bbShift 6s ease-in-out infinite; max-width: 320px; } .birthday-popup-card h3, .birthday-popup-card .birthday-popup-age, .birthday-popup-card p { color: var(--ink-strong); } .birthday-popup-confetti { font-size: 28px; letter-spacing: 6px; margin-bottom: 8px; animation: bbBounce 1.6s ease-in-out infinite; } .birthday-popup-avatar { width: 88px; height: 88px; border-radius: 50%; background: #fff; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; font-size: 46px; box-shadow: 0 8px 20px rgba(0,0,0,.15); } .birthday-popup-age { font-weight: 800; font-size: 16px; margin-bottom: 6px; } .birthday-popup-cake { font-size: 40px; margin-bottom: 4px; display: inline-block; animation: bbCakeBob 2s ease-in-out infinite; } @keyframes bbCakeBob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7px) rotate(2deg); } } /* Full-screen confetti + balloon burst behind the birthday card (concept A). pointer-events:none so it never blocks the card's buttons; sits above the overlay backdrop but below the card. */ .bd-fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 1; } .bd-fx .cf { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: bdFall linear forwards; } @keyframes bdFall { 0% { transform: translateY(-16px) rotate(0); opacity: 0; } 8% { opacity: 1; } 100% { transform: translateY(106vh) rotate(700deg); opacity: .95; } } .bd-fx .bl { position: absolute; bottom: -80px; width: 30px; height: 38px; border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%; opacity: 0; animation: bdRise ease-in forwards; } .bd-fx .bl::after { content: ''; position: absolute; left: 50%; bottom: -18px; width: 1px; height: 18px; background: rgba(0,0,0,.16); } @keyframes bdRise { 0% { transform: translateY(0); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-118vh); opacity: .65; } } @media (prefers-reduced-motion: reduce) { .bd-fx { display: none; } .birthday-popup-cake { animation: none; } } .idea { display: flex; gap: 14px; align-items: center; padding: 14px; border-radius: 18px; margin-bottom: 12px; } .idea .iemoji { width: 52px; height: 52px; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; background: #fff; } .idea .it { font-weight: 800; font-size: 15px; color: var(--ink-strong); } .idea .idesc { font-size: 12px; color: #7d6d69; margin-top: 2px; } .idea .free { display: inline-block; background: var(--green-bg); color: var(--green-text); font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 9px; margin-top: 6px; } .idea .low { background: #FFF3E9; color: var(--accent-dark); } .idea .plus { margin-left: auto; background: var(--accent); color: #fff; border: none; width: 34px; height: 34px; border-radius: 11px; font-size: 18px; font-weight: 800; cursor: pointer; flex-shrink: 0; } .toast { position: fixed; bottom: 88px; left: 50%; transform: translateX(-50%); background: var(--green-accent); color: #fff; padding: 11px 18px; border-radius: 14px; font-size: 13px; font-weight: 700; z-index: 60; box-shadow: 0 8px 20px rgba(0,0,0,.2); animation: pop .25s ease; max-width: 80%; text-align: center; } /* Onboarding */ .onb { position: fixed; inset: 0; background: var(--bg-gradient); z-index: 80; display: flex; flex-direction: column; padding: 34px 26px; overflow-y: auto; } .onb .logo { font-size: 60px; text-align: center; margin-bottom: 8px; } .onb h2 { font-size: 26px; text-align: center; color: var(--brown1); margin-bottom: 8px; } .onb .osub { text-align: center; color: var(--muted2); font-size: 14px; line-height: 1.55; margin-bottom: 26px; } .onb .spacer { flex: 1; } .dots { display: flex; gap: 7px; justify-content: center; margin-bottom: 18px; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--border-soft); display: inline-block; } .dots i.on { background: var(--accent); width: 22px; border-radius: 5px; } .emojipick { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 20px; } .emojipick button { font-size: 28px; width: 52px; height: 52px; border-radius: 16px; border: 2px solid transparent; background: var(--surface); cursor: pointer; } .emojipick button.sel { border-color: var(--accent); background: var(--chip-bg); } .arrangement-pick { display: flex; gap: 10px; } .arr-card { flex: 1; text-align: left; background: var(--surface); border: 2px solid var(--border-soft); border-radius: 16px; padding: 12px; cursor: pointer; font-family: inherit; } .arr-card.sel { border-color: var(--accent); background: var(--chip-bg); } .arr-card .arr-emoji { font-size: 22px; margin-bottom: 4px; } .arr-card .arr-title { font-weight: 800; font-size: 14px; color: var(--brown1); margin-bottom: 4px; } .arr-card .arr-desc { font-size: 12px; color: var(--muted2); line-height: 1.4; } .feat { display: flex; gap: 12px; align-items: center; margin-bottom: 16px; text-align: left; } .feat .fe { width: 44px; height: 44px; border-radius: 13px; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .feat .ft { font-weight: 800; font-size: 14px; } .feat .fd { font-size: 12px; color: var(--muted2); } .invite-box { background: var(--surface); border: 2px dashed var(--accent); border-radius: 16px; padding: 16px; text-align: center; margin-bottom: 18px; } .invite-box .code { font-size: 28px; font-weight: 800; letter-spacing: 4px; color: var(--accent-dark); margin: 6px 0; } /* "Good to know" — parent↔caregiver heads-up notes. Warm, gently highlighted so a sitter sees it. */ .gtk-card { background: var(--peach-bg2); border: 1px solid #FBD9C9; } .gtk-item { display: flex; gap: 10px; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(180,92,75,.10); } .gtk-item:last-of-type { border-bottom: none; } .gtk-dot { flex-shrink: 0; font-size: 16px; line-height: 1.4; } .gtk-text { font-weight: 700; font-size: 14px; color: var(--brown1); } .gtk-meta { font-size: 11.5px; color: var(--muted2); margin-top: 1px; } /* Today feed — a slim at-a-glance counts strip + a chronological activity timeline. */ .today-glance { display: flex; gap: 8px; margin-bottom: 14px; } .today-glance .tg { flex: 1; background: var(--surface); border-radius: 14px; padding: 9px 4px 7px; text-align: center; box-shadow: 0 3px 12px rgba(180,92,75,.05); } .today-glance .tg-i { display: block; font-size: 17px; } .today-glance .tg-n { display: block; font-weight: 800; font-size: 16px; color: var(--brown1); margin-top: 1px; } .today-glance .tg.zero { opacity: .5; } .feed-item { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--divider); } .feed-item:last-child { border-bottom: none; } .feed-ic { width: 38px; height: 38px; border-radius: 12px; background: var(--peach-bg2); display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; } .feed-body { flex: 1; min-width: 0; } .feed-title { font-weight: 700; font-size: 14px; color: var(--brown1); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .feed-meta { font-size: 12px; color: var(--muted2); margin-top: 1px; } .feed-kid { font-size: 14px; } /* "Who's this for?" child checkboxes on the Food form (multi-child families). */ .kid-pick { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1.5px solid var(--border-soft); font-weight: 700; font-size: 13px; cursor: pointer; background: var(--surface); } .kid-pick input { width: auto; margin: 0; } /* Inline child selector — a warm avatar-pill row shown at the top of Care / Village. */ .child-switch { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 4px; margin-bottom: 14px; scrollbar-width: none; } .child-switch::-webkit-scrollbar { display: none; } .child-chip { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1.5px solid var(--border-soft); background: var(--surface); color: var(--brown1); font-weight: 800; font-size: 13px; cursor: pointer; font-family: inherit; transition: .12s; } .child-chip.on { border-color: var(--accent); background: var(--peach-bg); color: var(--accent-dark); } .child-chip .cc-emoji { width: 28px; height: 28px; border-radius: 50%; background: var(--peach-bg2); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .child-chip.on .cc-emoji { background: #fff; } /* Switch-child modal rows (used from the Home kid-card). */ .child-pick-row { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px; border-radius: 14px; border: 2px solid var(--border-soft); background: var(--surface); margin-bottom: 8px; cursor: pointer; font-family: inherit; text-align: left; color: var(--brown1); } .child-pick-row.on { border-color: var(--accent); background: var(--peach-bg); } .child-pick-row .cpr-emoji { width: 40px; height: 40px; border-radius: 50%; background: var(--peach-bg2); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .child-pick-row.on .cpr-emoji { background: #fff; } .child-pick-row .cpr-name { font-weight: 800; font-size: 15px; flex: 1; } .child-pick-row .cpr-check { color: var(--accent-dark); font-weight: 800; } /* Weekly "at a glance" Care journal — week picker, 7-day summary strip, day groups. */ .care-week-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .care-week-nav { flex: 0 0 auto; width: 38px; height: 40px; border: none; border-radius: 13px; background: var(--chip-bg); color: var(--accent-dark); font-size: 20px; font-weight: 800; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .12s; } .care-week-nav:hover { background: var(--peach-bg); } .care-week-nav:disabled { opacity: .3; cursor: default; } .care-week-pick { position: relative; flex: 1; display: flex; align-items: center; } .care-week-pick .cwp-icon { position: absolute; left: 12px; font-size: 15px; pointer-events: none; } .care-week-pick .cwp-caret { position: absolute; right: 12px; font-size: 11px; color: var(--muted2); pointer-events: none; } .care-week-select { width: 100%; height: 40px; margin: 0; border-radius: 13px; border: 1.5px solid var(--divider); background: var(--surface); color: var(--brown1); font-weight: 800; font-size: 14px; text-align: center; text-align-last: center; padding: 0 30px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .care-week-total { text-align: center; font-size: 12px; color: var(--muted2); font-weight: 700; margin: 0 0 12px; } .care-week-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 16px; } .cws-day { text-align: center; border-radius: 12px; padding: 7px 0 6px; background: var(--peach-bg2); border: 1.5px solid transparent; } .cws-day.has { background: var(--peach-bg); } .cws-day.today { border-color: var(--accent); } .cws-dow { font-size: 9.5px; letter-spacing: .4px; color: var(--muted2); font-weight: 800; text-transform: uppercase; } .cws-num { font-size: 14px; font-weight: 800; color: var(--brown1); line-height: 1.35; } .cws-count { display: inline-block; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; border-radius: 9px; font-size: 10px; font-weight: 800; color: #fff; background: var(--accent); } .cws-day:not(.has) .cws-count { visibility: hidden; } .care-day-group { margin-bottom: 6px; } .care-day-head { font-weight: 800; font-size: 13px; color: var(--brown1); margin: 12px 0 4px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .care-day-sum { font-weight: 600; font-size: 11px; color: var(--muted2); } /* Handoff */ .check { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--divider); cursor: pointer; } .check:last-child { border-bottom: none; } .check .box { width: 26px; height: 26px; border-radius: 9px; border: 2px solid #E7C9BF; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #fff; transition: .15s; } .check.done .box { background: var(--green-accent); border-color: var(--green-accent); } .check .ctxt { font-weight: 700; font-size: 15px; } .check.done .ctxt { color: var(--muted); text-decoration: line-through; } .progress { height: 9px; background: var(--divider); border-radius: 6px; overflow: hidden; margin: 6px 0 18px; } .progress i { display: block; height: 100%; background: var(--green-grad); transition: .3s; } /* Medicine */ .med { border-radius: 16px; padding: 14px; margin-bottom: 12px; border: 1.5px solid var(--border-soft); } .med.due { border-color: var(--alert-border); background: var(--alert-bg); } .med .mrow { display: flex; align-items: center; gap: 12px; } .med .micon { width: 44px; height: 44px; border-radius: 13px; background: var(--purple-bg2); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; } .med .mname { font-weight: 800; font-size: 15px; } .med .mdose { font-size: 12px; color: var(--muted2); } .med .lastgiven { font-size: 11px; font-weight: 700; margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: var(--green-bg); color: var(--green-text); display: inline-block; } .med .duetag { font-size: 11px; font-weight: 800; color: var(--accent-dark); margin-top: 8px; } .med .giveBtn { margin-top: 10px; width: 100%; background: var(--accent); color: #fff; border: none; padding: 11px; border-radius: 12px; font-weight: 800; font-size: 14px; cursor: pointer; } .med .giveBtn.done { background: var(--green-bg); color: var(--green-text); } .balance { background: linear-gradient(135deg,var(--green-bg),#D5EED9); border-radius: 20px; padding: 18px; text-align: center; margin-bottom: 16px; } .balance .bl { font-size: 12px; font-weight: 800; color: var(--green-text); text-transform: uppercase; letter-spacing: .5px; } .balance .bv { font-size: 26px; font-weight: 800; color: #2f7a3f; margin: 4px 0; } .balance .bn { font-size: 12px; color: #5a8a63; } .exp { display: flex; gap: 12px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--divider); } .exp:last-child { border-bottom: none; } .exp .ei { width: 42px; height: 42px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; background: var(--peach-bg2); } .exp .et { font-weight: 700; font-size: 14px; } .exp .em { font-size: 12px; color: var(--muted2); } .exp .ea { margin-left: auto; font-weight: 800; font-size: 15px; color: var(--plum); text-align: right; flex-shrink: 0; } .exp .esplit { font-size: 10px; color: var(--muted); font-weight: 700; } .villagehero { background: linear-gradient(135deg,var(--peach1),var(--peach2)); border-radius: 22px; padding: 20px; text-align: center; margin-bottom: 16px; } .villagehero .vh-emoji { font-size: 44px; } .villagehero .vh-t { font-size: 17px; font-weight: 800; color: var(--ink-strong); margin-top: 4px; } .villagehero .vh-s { font-size: 12px; color: var(--ink-soft); margin-top: 3px; } .person { display: flex; gap: 13px; align-items: center; padding: 13px; border-radius: 16px; margin-bottom: 10px; background: var(--surface); box-shadow: 0 3px 12px rgba(180,92,75,.05); } .person .pav, .person-card .pav { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; background: var(--peach-bg); } .person .pn, .person-card .pn { font-weight: 800; font-size: 15px; } .person .pr, .person-card .pr { font-size: 12px; color: var(--muted2); } .person .ptag, .person-card .ptag { margin-left: auto; font-size: 10px; font-weight: 800; padding: 4px 9px; border-radius: 9px; flex-shrink: 0; } /* Compact, tappable village roster — a member is one row until you open it. */ .person-card { background: var(--surface); border-radius: 16px; margin-bottom: 8px; box-shadow: 0 3px 12px rgba(180,92,75,.05); overflow: hidden; } .person-card.open { box-shadow: 0 6px 18px rgba(180,92,75,.10); } .person-head { display: flex; gap: 12px; align-items: center; padding: 11px 13px; cursor: pointer; } .person-head .pn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .person-head .pr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .person-caret { flex-shrink: 0; color: var(--muted2); font-size: 14px; font-weight: 800; width: 12px; text-align: center; } .person-detail { padding: 2px 13px 13px; } .person-detail .access-section:first-child { border-top: none; margin-top: 0; } .ptag.parent { background: var(--blue-bg); color: var(--blue-text); } .ptag.backup { background: var(--green-bg); color: var(--green-text); } .ptag.circle { background: var(--purple-bg2); color: var(--purple-text); } .back-row { display: flex; align-items: center; gap: 10px; margin-top: 4px; } .empty-state { text-align: center; padding: 30px 10px; color: var(--muted); font-size: 13px; } .link { color: var(--accent-dark); text-decoration: underline; cursor: pointer; } /* One-time "walk through the front door" welcome, played once after sign-in (see playHouseWelcome in app.js). Pure CSS/SVG so it works offline; pointer-events off and auto-removed; skipped for anyone who prefers reduced motion. The sequence: a warm little house at dusk with lit windows, the front door swings open, and the view glides toward the doorway while warm light floods out to fill the screen — then it fades to reveal the app underneath, as if you've just stepped inside. */ .house-welcome-overlay { position: fixed; inset: 0; z-index: 4000; pointer-events: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #241c38 0%, #573a56 48%, #b5674b 100%); animation: hw-overlay-fade 3.2s ease forwards; } /* linear timing on the scene + flood so the many hand-tuned keyframe stops set the pacing themselves — a continuous glide that starts gentle and accelerates smoothly into the doorway, rather than an easing curve fighting the door-open and flood timing. */ .house-welcome-overlay .hw-svg { width: min(86vw, 460px); height: auto; transform-origin: 200px 291px; /* the doorway — the whole scene drifts toward it */ animation: hw-approach 3.2s linear forwards; } .house-welcome-overlay .hw-door { transform-origin: 178px 291px; /* left hinge — swings open inward */ animation: hw-door-open .75s cubic-bezier(.34, .04, .2, 1) forwards; animation-delay: 1.05s; } .house-welcome-overlay .hw-knob { animation: hw-fadeaway .3s ease forwards; animation-delay: 1.05s; } .house-welcome-overlay .hw-win { animation: hw-window-glow 2.2s ease-in-out infinite; } .house-welcome-overlay .hw-win.two { animation-delay: .5s; } .house-welcome-overlay .hw-birds { animation: hw-birds-drift 3.2s ease-in forwards; } .house-welcome-overlay .hw-bird { transform-box: fill-box; transform-origin: center; animation: hw-flap .5s ease-in-out infinite; } .house-welcome-overlay .hw-bird.b2 { animation-delay: .12s; } .house-welcome-overlay .hw-bird.b3 { animation-delay: .26s; } .house-welcome-overlay .hw-swing { transform-origin: 63px 252px; animation: hw-sway 2.4s ease-in-out infinite; } .house-welcome-overlay .hw-family { animation: hw-bob 1.1s ease-in-out infinite; } .house-welcome-overlay .hw-dog-tail { transform-origin: 246px 315px; animation: hw-wag .4s ease-in-out infinite; } .house-welcome-overlay .hw-flood { position: absolute; left: 50%; top: 54%; width: 46px; height: 46px; border-radius: 50%; background: radial-gradient(circle, #FFE7B0 0%, #F7B667 54%, #E0842F 100%); transform: translate(-50%, -50%) scale(0); opacity: 0; animation: hw-flood 3.2s ease-in forwards; } .house-welcome-overlay .hw-caption { position: absolute; bottom: 15%; left: 0; right: 0; text-align: center; font-weight: 800; font-size: 21px; color: #FFF3E9; letter-spacing: .3px; text-shadow: 0 2px 14px rgba(0, 0, 0, .4); opacity: 0; animation: hw-caption 2.4s ease forwards; animation-delay: .4s; } @keyframes hw-approach { 0% { transform: scale(.92); } 30% { transform: scale(1.08); } 50% { transform: scale(1.2); } 68% { transform: scale(1.5); } 84% { transform: scale(2.3); } 100% { transform: scale(3.6); } } @keyframes hw-door-open { 0% { transform: scaleX(1); } 100% { transform: scaleX(.05); } } @keyframes hw-fadeaway { to { opacity: 0; } } @keyframes hw-window-glow { 0%, 100% { opacity: .82; } 50% { opacity: 1; } } @keyframes hw-birds-drift { from { transform: translate(0, 0); } to { transform: translate(52px, -16px); } } @keyframes hw-flap { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.5); } } @keyframes hw-sway { 0%, 100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } } @keyframes hw-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } } @keyframes hw-wag { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(22deg); } } @keyframes hw-flood { 0%, 45% { opacity: 0; transform: translate(-50%, -50%) scale(0); } 55% { opacity: .6; transform: translate(-50%, -50%) scale(3); } 70% { opacity: .9; transform: translate(-50%, -50%) scale(10); } 85% { opacity: 1; transform: translate(-50%, -50%) scale(32); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(85); } } @keyframes hw-caption { 0% { opacity: 0; transform: translateY(12px); } 18% { opacity: 1; transform: translateY(0); } 66% { opacity: 1; } 100% { opacity: 0; } } @keyframes hw-overlay-fade { 0%, 88% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }