/* Import centralized design tokens — bump ?v= with the SW CACHE version so dev browsers don't serve a stale token file (styles.css/script.js get ?v= in the , but this @import is fetched fresh only when its own URL changes). */ @import '_tokens.css?v=236'; :root { /* Font stacks */ --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } * { box-sizing: border-box; margin: 0; padding: 0; } /* Hide elements with hidden attribute */ [hidden] { display: none !important; } /* ============================================ MATERIAL ICON UTILITY (see .claude/skills/material-icons) Inline from app/public/assets/icons/*.svg. Inherits the parent's `color`; size with a modifier or by setting font-size on the icon. ============================================ */ .mi { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -0.125em; } .mi--sm { font-size: 16px; } .mi--md { font-size: 20px; } .mi--lg { font-size: 24px; } .mi--xl { font-size: 40px; } :focus-visible { outline: 2px solid rgba(var(--primary-rgb), 0.7); outline-offset: 3px; border-radius: 3px; } /* ============================================ APP HEADER / NAVIGATION ============================================ */ /* One consistent header treatment on every tab (home / profile / check-in): solid surface + a subtle bg.png texture, no frosted blur, no divider — so the header blends seamlessly with the page (and with the goal zone on check-in). */ .app-header { position: sticky; top: 0; z-index: 100; background: var(--bg); border-bottom: 1px solid transparent; /* extra top padding clears the status bar / notch so the avatar and back button sit in the safe area and stay reliably tappable on real devices */ padding: calc(env(safe-area-inset-top) + var(--space-6)) var(--space-4) var(--space-6); overflow: hidden; } .app-header::before { content: ""; position: absolute; inset: 0; background: url("assets/bg.png") center / cover no-repeat; opacity: 0.18; pointer-events: none; z-index: 0; /* Fade the photo out toward the bottom so it dissolves into the page instead of cutting off at a hard line. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 28%, transparent 100%); } .app-header-content { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); position: relative; /* sit above the .app-header::before texture */ z-index: 1; } /* Left side: Home button */ .app-header-left { display: flex; align-items: center; } /* Back chevron — only on the Profile / Family Centre page. It replaces the logo + check-in shortcuts there, and the profile avatar is hidden, so the header reads as a plain "‹ back" to the one home screen. */ .app-back-btn { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; background: none; border: none; color: var(--text-primary, var(--text)); cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent; } .app-back-btn:active { background: rgba(255, 255, 255, 0.08); } /* the profile back carries .app-back now (display:grid) — keep it hidden on every other tab, where this button isn't used. */ .app-header:not(.app-header--profile) .app-back-btn { display: none; } .app-header--profile .app-back-btn { display: inline-flex; } .app-header--profile .app-home-btn, .app-header--profile .app-checkin-btn, .app-header--profile .app-profile-avatar-btn { display: none; } /* Profile: the nav row is empty (back button is the fixed .app-back, floated out of flow) — collapse it so the profile content + its leaf hero start at y=0, the same seamless treatment the check-in home gets. */ .app-header--profile { position: static; min-height: 0; height: 0; padding: 0; background: transparent; border-bottom: 0; overflow: visible; /* never clip the floated back button */ } .app-header--profile::before { display: none; } .app-header--profile .app-header-content { min-height: 0; } /* The base .app-header-content is a z-index:1 stacking context — on profile that was trapping the fixed back button UNDER the leaf-hero content. Drop it here so the button's own z-index floats it above everything on the page. */ .app-header--profile .app-header-content { position: static; z-index: auto; } /* Solid, always-legible back chevron on the Profile page — it floats over the leaf hero, where a translucent disc (and backdrop-filter, unreliable on iOS) was invisible. Opaque card-bg circle + border + full-strength icon. */ .app-header--profile .app-back-btn.app-back { display: grid; z-index: 120; color: var(--text); background: var(--card-bg); border: 1px solid var(--border); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); } .app-header--profile .app-back-btn.app-back:active { background: var(--card-bg-alt, var(--card-bg)); } .app-home-btn { display: flex; align-items: center; gap: var(--space-2); background: none; border: none; color: var(--text-primary); cursor: pointer; font-family: inherit; font-size: var(--type-body); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: 6px; transition: color 0.2s, background 0.2s; min-height: 44px; min-width: 44px; } @media (hover: hover) { .app-home-btn:hover { background: rgba(var(--primary-rgb), 0.08); color: var(--accent); } } .app-home-btn:active { background: rgba(var(--primary-rgb), 0.12); } .app-home-btn svg { flex-shrink: 0; stroke: currentColor; } .app-header-logo { width: 28px; height: 28px; object-fit: contain; } .app-home-label { display: none; } @media (min-width: 540px) { .app-home-label { display: inline; } } .app-home-btn { display: flex; align-items: center; gap: var(--space-2); background: none; border: none; color: var(--text-primary); cursor: pointer; font-family: inherit; font-size: var(--type-body); font-weight: 600; padding: var(--space-2) var(--space-3); border-radius: 6px; transition: color 0.2s, background 0.2s; min-height: 44px; min-width: 44px; } @media (hover: hover) { .app-home-btn:hover { background: rgba(var(--primary-rgb), 0.08); color: var(--accent); } } .app-home-btn:active { background: rgba(var(--primary-rgb), 0.12); } .app-home-btn svg { flex-shrink: 0; stroke: currentColor; } .app-home-label { display: none; } /* Right side: Sign In / Profile */ .app-header-right { display: flex; align-items: center; gap: var(--space-3); } /* Language Selection Button */ .app-language-btn { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); min-height: 32px; border: 1px solid rgba(var(--primary-rgb), 0.3); background: transparent; border-radius: 999px; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: var(--type-xs); font-weight: 600; transition: border-color 0.2s, background 0.2s; } @media (hover: hover) { .app-language-btn:hover { border-color: rgba(var(--primary-rgb), 0.5); background: rgba(var(--primary-rgb), 0.04); } } /* Language Modal */ .language-modal { position: fixed; bottom: 0; left: 0; right: 0; background: var(--card-bg); border-radius: 24px 24px 0 0; max-height: calc(var(--vh-px, 100vh) * 0.7); width: 100%; padding: 0; display: flex; flex-direction: column; z-index: 1001; border: none; animation: slideUp 0.3s ease forwards; overflow: hidden; pointer-events: auto; } .language-modal-handle { width: 40px; height: 4px; background: var(--border); border-radius: 2px; margin: var(--space-3) auto; flex-shrink: 0; } .language-modal-content { flex: 1; display: flex; flex-direction: column; padding: 0 var(--space-5) var(--space-5) var(--space-5); overflow-y: auto; gap: 0; } .language-modal-title { font-size: var(--type-lg); font-weight: 700; margin: var(--space-2) 0 var(--space-4) 0; color: var(--text); } /* Language Options List */ .language-options-list { display: flex; flex-direction: column; gap: 0; } /* Language Option */ .language-option { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: none; border: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text-muted); font-family: inherit; font-size: var(--type-md); font-weight: 500; transition: background 0.15s, color 0.15s; width: 100%; justify-content: space-between; margin-bottom: var(--space-1); position: relative; } .language-option:last-child { margin-bottom: 0; } .language-option-flag { font-size: var(--type-lg); min-width: 24px; text-align: center; flex-shrink: 0; } .language-option-name { font-size: var(--type-md); flex-shrink: 0; } .language-option-soon { font-size: var(--type-sm); color: var(--text-faint); font-weight: 400; white-space: nowrap; font-style: italic; text-align: right; } .language-option--active { color: var(--accent); font-weight: 600; } .language-option--active::after { content: "✓"; font-size: var(--type-base); color: var(--accent); font-weight: 700; } @media (hover: hover) { .language-option:not(.language-option--active):hover { background: rgba(var(--primary-rgb), 0.06); color: var(--text); } } /* Check-In Button */ .app-checkin-btn { display: flex; gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); min-height: 32px; border: 1px solid rgba(var(--primary-rgb), 0.3); background: transparent; border-radius: 999px; cursor: pointer; color: var(--text); font-family: inherit; font-size: var(--type-md); font-weight: 500; transition: background 0.15s, border-color 0.15s; } @media (hover: hover) { .app-checkin-btn:hover { background: rgba(var(--primary-rgb), 0.08); border-color: rgba(var(--primary-rgb), 0.5); } } /* Profile Avatar Button */ .app-profile-avatar-btn { background: none; border: none; padding: var(--space-1); border-radius: 50%; cursor: pointer; min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; transition: background 0.2s; } @media (hover: hover) { .app-profile-avatar-btn:hover { background: rgba(var(--primary-rgb), 0.08); } } .app-profile-avatar-btn:active { background: rgba(var(--primary-rgb), 0.12); } .app-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; } /* Responsive: show label on larger screens */ @media (min-width: 540px) { .app-home-label { display: inline; } } /* ============================================ PROFILE TAB CONTENT ============================================ */ .profile-tab-content { padding: var(--space-5) var(--space-4); /* clear the fixed .app-back button + the status bar */ padding-top: calc(env(safe-area-inset-top) + 76px); position: relative; } /* Leaf hero behind the top of the profile — runs from y=0 (behind the status bar / floating back button) and fades out long and soft, so it dissolves into the page's dot-grid instead of cutting at the old header's edge. */ .profile-tab-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--app-header-h) + 150px); background: url("assets/bg.png") center top / cover no-repeat; opacity: 0.18; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 100%); } .profile-tab-content > * { position: relative; z-index: 1; } .profile-tab-content:not([hidden]) { animation: fadeIn 0.3s var(--ease-out); } .profile-page-container { max-width: 600px; margin: 0 auto; } /* CHECK-IN TAB — Lightweight daily recommendation todo list */ .checkin-tab-content { padding: 0; position: relative; } .checkin-tab-content:not([hidden]) { animation: fadeIn 0.3s var(--ease-out); } /* Leaf hero behind the top of the home check-in — same treatment as .profile-tab-content::before: the photo bleeds down from y=0 and fades out long and soft, so it dissolves into the page's dot-grid rather than cutting off where the header's own bg.png patch ends. Was previously carried by the (now-removed) .tracker-goal-zone::before, which went away with the goal card — restored here on its own since it's just a decorative wash, independent of the goal content. */ .checkin-tab-content::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: calc(var(--app-header-h) + 150px); background: url("assets/bg.png") center top / cover no-repeat; opacity: 0.18; pointer-events: none; z-index: 0; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 26%, transparent 100%); } /* position only, no z-index — z-index:1 here used to trap any deeper descendant's z-index inside a stacking context capped at 1 (this element is the one that creates it), silently defeating any overlay elsewhere on the page that promotes a nested child above itself via a high z-index (e.g. the FRE spotlight's .fre-target-elevated, z-index 2401 — see [[odrifit_feedback_zindex_stacking_pattern]]). position:relative alone still paints these children above the z-index:0 ::before wash below, since same-or-auto z-index ties break by tree order. */ .checkin-tab-content > * { position: relative; } /* Seamless header on Home — the sticky .app-header would otherwise cut the leaf wash into two independent, visibly-seamed pieces (its own ::before fading out by its own bottom edge, then .checkin-tab-content's own wash starting fresh right after). While Home is showing, make the header transparent and drop its own wash, then pull the content up underneath it so ONE continuous wash (this element's ::before, above) runs from true y=0 under the header instead. Scoped to Home only — other tabs keep the normal solid sticky header. */ body:has(.checkin-tab-content:not([hidden])) .app-header { /* Static, not sticky — combined with the negative-margin pull-up below, a sticky header here produced inconsistent/janky sticking (sometimes stuck, sometimes not) as the page scrolled. Only the bottom "Log with Odrifit" bar stays fixed on Home now. */ position: static; background: transparent; border-bottom-color: transparent; } body:has(.checkin-tab-content:not([hidden])) .app-header::before { display: none; } body:has(.checkin-tab-content:not([hidden])) .checkin-tab-content { margin-top: calc(-1 * var(--app-header-h)); padding-top: var(--app-header-h); } /* Home's toolbar carries only the avatar (matches the iOS reference, node 49:510) — the wordmark stays for Profile's header. */ body:has(.checkin-tab-content:not([hidden])) .app-home-btn { display: none; } .home-header { margin-bottom: var(--space-5); } /* Odrifit's Recommendations Summary */ /* Inline builder inside goal context card */ .goal-ctx-sentence { justify-content: center; margin-bottom: var(--space-3) !important; } .goal-ctx-cta { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-2) var(--space-5); border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 999px; background: transparent; color: var(--text-muted); font-family: var(--font-sans); font-size: var(--type-sm); font-weight: 600; cursor: pointer; margin-top: var(--space-2); transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast); width: auto; } .goal-ctx-cta:hover { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), 0.06); } /* Ring component - positioned absolutely, not affecting flow */ .odrifit-progress-ring { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 100px; height: 100px; z-index: 0; /* Ring visual center: top = 10 + 50 = 60px */ } .odrifit-progress-ring__bg { fill: none; stroke: rgba(var(--primary-rgb), 0.1); stroke-width: 3.5; } .odrifit-progress-ring__fill { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: 251; /* 2 * π * 40 */ stroke-dashoffset: calc(251 - (251 * var(--progress)) / 100); stroke-linecap: round; transition: stroke-dashoffset 0.4s ease; transform: rotate(-90deg); transform-origin: 50% 50%; } .odrifit-progress-ring__segment { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-dasharray: var(--segment-size) var(--segment-gap); stroke-dashoffset: var(--segment-offset); stroke-linecap: round; transition: opacity 0.3s ease; transform: rotate(-90deg); transform-origin: 50% 50%; } .odrifit-rec-icon { width: 28px; height: 28px; flex-shrink: 0; filter: drop-shadow(0 0 6px currentColor); transform-origin: center; overflow: visible; display: block; position: relative; z-index: 1; } .odrifit-rec-stat-col--with-meter .odrifit-rec-icon { width: 24px; height: 24px; } /* Animated icons */ /* Recommendation type colors - neon palette */ [data-rec-type="protein"] .odrifit-rec-icon--protein { color: var(--metric-protein); filter: drop-shadow(0 0 5px currentColor); animation: odrifit-curl 3s ease-in-out infinite; } [data-rec-type="protein"] .odrifit-progress-ring__fill { stroke: var(--metric-protein); } [data-rec-type="protein"] .odrifit-progress-ring__bg { stroke: rgba(var(--metric-protein-rgb), 0.15); } @keyframes odrifit-curl { 0% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 5px currentColor); } 20% { transform: rotate(-6deg) scale(0.96); filter: drop-shadow(0 0 4px currentColor); } 45% { transform: rotate(6deg) scale(1.08); filter: drop-shadow(0 0 10px currentColor); } 70% { transform: rotate(-4deg) scale(0.98); filter: drop-shadow(0 0 4px currentColor); } 90% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 5px currentColor); } 100% { transform: rotate(0deg) scale(1); filter: drop-shadow(0 0 5px currentColor); } } [data-rec-type="steps"] .odrifit-rec-icon--movement { color: var(--metric-steps); filter: drop-shadow(0 0 5px currentColor); } [data-rec-type="steps"] .odrifit-progress-ring__fill { stroke: var(--metric-steps); } [data-rec-type="steps"] .odrifit-progress-ring__bg { stroke: rgba(var(--metric-steps-rgb), 0.15); } [data-rec-type="water"] .odrifit-rec-icon--water { color: var(--metric-water); filter: drop-shadow(0 0 5px currentColor); animation: odrifit-drip 3s ease-in-out infinite; } [data-rec-type="water"] .odrifit-progress-ring__fill { stroke: var(--metric-water); } [data-rec-type="water"] .odrifit-progress-ring__bg { stroke: rgba(var(--metric-water-rgb), 0.15); } @keyframes odrifit-drip { 0% { transform: scaleX(1) scaleY(1); filter: drop-shadow(0 0 5px currentColor); } 22% { transform: scaleX(0.82) scaleY(1.22); filter: drop-shadow(0 0 12px currentColor); } 50% { transform: scaleX(1.18) scaleY(0.82); filter: drop-shadow(0 0 8px currentColor); } 78% { transform: scaleX(0.96) scaleY(1.06); filter: drop-shadow(0 0 6px currentColor); } 100% { transform: scaleX(1) scaleY(1); filter: drop-shadow(0 0 5px currentColor); } } .odrifit-rec-icon--movement { color: #d4a04a; } .odrifit-rec-icon--water { color: var(--metric-water); } .odrifit-rec-icon--movement .foot { transform-origin: center; } .odrifit-rec-icon--movement .foot-left { animation: odrifit-march 2.4s ease-in-out infinite; animation-delay: 0s; } .odrifit-rec-icon--movement .foot-right { animation: odrifit-march 2.4s ease-in-out infinite; animation-delay: 0.4s; } @keyframes odrifit-march { 0% { transform: scale(1); opacity: 0.55; } 20% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 7px currentColor); } 40% { transform: scale(1); opacity: 0.55; } 60% { transform: scale(1.1); opacity: 1; filter: drop-shadow(0 0 7px currentColor); } 80% { transform: scale(1); opacity: 0.55; } 100% { transform: scale(1); opacity: 0.55; } } .checkin-section-more { font-size: var(--type-sm); color: var(--accent); margin: 0; flex-shrink: 0; cursor: pointer; user-select: none; -webkit-user-select: none; } .checkin-section-examples { font-size: var(--type-sm); font-weight: 600; color: var(--accent); margin: 0; flex-shrink: 0; cursor: pointer; text-decoration: none; transition: opacity 150ms ease; } .checkin-section-examples:hover { opacity: 0.8; } .checkin-bottom-sheet-header { display: flex; justify-content: space-between; align-items: center; padding: var(--space-4); border-bottom: 1px solid var(--border); sticky: top; top: 0; background: var(--card-bg); } .checkin-bottom-sheet-header h3 { font-size: var(--type-base); font-weight: 600; margin: 0; color: var(--text); line-height: 1.4; } .checkin-bottom-sheet-subtitle { display: block; font-size: var(--type-sm); font-weight: 400; color: var(--text-muted); margin-top: var(--space-1); } .checkin-food-examples-amount { color: var(--accent); font-weight: 600; } .checkin-bottom-sheet-close { border: none; background: transparent; font-size: var(--type-display); color: var(--text-muted); cursor: pointer; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; } .checkin-bottom-sheet .checkin-todo-item { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); } .checkin-bottom-sheet .checkin-food-options-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); padding: var(--space-4); } @media (max-width: 540px) { .checkin-bottom-sheet .checkin-food-options-grid { grid-template-columns: repeat(2, 1fr); } } .checkin-todo-item { display: flex; flex-direction: column; padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgba(var(--primary-rgb), 0.05); cursor: pointer; transition: background 0.15s; } .checkin-todo-row { display: flex; align-items: center; gap: var(--space-3); min-height: 44px; } .checkin-todo-item:last-child { border-bottom: none; } @media (hover: hover) { .checkin-todo-item:hover { background: rgba(var(--primary-rgb), 0.04); } } .checkin-todo-checkbox { flex-shrink: 0; width: 22px; height: 22px; border: 2px solid var(--border); border-radius: 6px; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s, background 0.2s; } .checkin-todo-checkbox--checked { border-color: var(--accent); background: var(--accent); color: #fff; font-size: var(--type-body); font-weight: 700; } .checkin-todo-label { flex: 1; font-size: var(--type-body); color: var(--text); transition: color 0.2s; } .checkin-todo-item--done .checkin-todo-label { color: var(--text-muted); text-decoration: line-through; } .checkin-food-options-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); } /* Lower density on mobile: 2 across instead of 3/4 */ @media (max-width: 540px) { .checkin-food-options-grid { grid-template-columns: repeat(2, 1fr); } } .checkin-food-option { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-2); border-radius: 8px; background: var(--background); border: 1px solid rgba(var(--primary-rgb), 0.1); } .checkin-food-emoji { font-size: var(--type-display); line-height: 1; } .checkin-food-name { font-size: var(--type-sm); color: var(--text); font-weight: 500; text-align: center; } .checkin-food-serving { font-size: var(--type-sm); color: var(--accent); font-weight: 500; } /* Profile Header */ /* Profile Center Header */ .family-centre-panel { margin-bottom: var(--space-8); } /* Health data — a single flat section, no outer card wrapper (was .profile-baseline-card, removed to kill the card-in-card nesting). */ .profile-section--health { border-bottom: none; padding-bottom: 0; } /* One entry point for every setting — a .recs-tile row (same as the home "Recommended for you" tiles), opening the full-screen #settingsPage. */ .profile-settings-tile { margin-top: var(--space-6); } /* #settingsPage body — reuses the full-screen .health-data-all surface; the setting rows sit in a width-capped column like the recap table. */ .settings-page__body { width: 100%; max-width: 340px; margin: 0 auto calc(env(safe-area-inset-bottom) + 24px); display: flex; flex-direction: column; } .settings-page__body .profile-setting-row { padding: var(--space-4) 0; } .settings-page__body .profile-setting-row + .profile-setting-row { border-top: 1px solid var(--border); } /* On this page the label IS the row's main text (not a caption above a value like the Profile Health-data tiles), so it takes a normal body-row size instead of the 12px metric-label size. Hints line up with .recs-tile__sub. */ .settings-page__body .profile-item-label { font-size: var(--type-md); font-weight: 600; color: var(--text); } .settings-page__body .profile-setting-row--lab .profile-item-label { color: var(--text-muted); } .settings-page__body .profile-setting-hint { font-size: 14px; max-width: 220px; } .settings-page .health-data-all__sub { font-size: 14px; } /* Coming-soon / disabled setting row */ .profile-setting-row--disabled { opacity: 0.55; } .profile-setting-row--disabled .profile-toggle-btn { cursor: not-allowed; } .profile-lab-tag.profile-lab-tag--soon { background: var(--icon-tile-bg); color: var(--text-muted); } .profile-center-header { margin-bottom: var(--space-5); text-align: center; } /* ── Family avatar row ───────────────────────────────────── */ .family-avatar-row { display: flex; align-items: flex-start; justify-content: center; gap: var(--space-4); padding: var(--space-1) 0 0; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .family-avatar-row::-webkit-scrollbar { display: none; } .family-avatar-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex-shrink: 0; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; } .family-avatar-circle { width: 56px; height: 56px; border-radius: 50%; border: 2.5px solid transparent; overflow: hidden; display: flex; align-items: center; justify-content: center; transition: border-color var(--transition-fast); background: var(--input-bg); } .family-avatar-item--active .family-avatar-circle { border-color: var(--primary); } .family-avatar-initials { font-size: var(--type-lg); font-weight: var(--weight-bold); color: #fff; letter-spacing: 0.02em; } .family-avatar-name { font-size: var(--type-xs); color: var(--text-muted); max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; } .family-avatar-item--active .family-avatar-name { color: var(--primary); font-weight: var(--weight-semibold); } /* "+" add button */ .family-avatar-circle--add { border: 2px dashed rgba(var(--primary-rgb), 0.4); font-size: var(--type-2xl); font-weight: 300; color: var(--primary); background: transparent; } @media (hover: hover) { .family-avatar-add-item:not(.family-avatar-add-item--disabled):hover .family-avatar-circle--add { border-color: var(--primary); background: rgba(var(--primary-rgb), 0.06); } } /* Disabled look once the family-profile limit is reached (still clickable to show info) */ .family-avatar-add-item--disabled .family-avatar-circle--add { border-color: rgba(255, 255, 255, 0.15); color: var(--text-faint); } .family-avatar-add-item--disabled .family-avatar-name { color: var(--text-faint); } /* ── Family Circle: role selector (add-family sheet) ─────────────────── */ /* ── Family Circle: one-tap Self/member toggle (top of home) ─────────── */ .family-circle-toggle { display: flex; gap: var(--space-2); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: var(--space-4) var(--space-4) 0; margin: 0 auto; max-width: 600px; } .family-circle-toggle::-webkit-scrollbar { display: none; } .family-circle-toggle[hidden] { display: none; } .family-circle-pill { flex-shrink: 0; padding: var(--space-2) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--card-bg); color: var(--text-muted); font-family: inherit; font-size: var(--type-sm); font-weight: 700; cursor: pointer; transition: border-color 0.2s, color 0.2s, background 0.2s; } .family-circle-pill--active { border-color: var(--primary); color: var(--primary); background: rgba(var(--primary-rgb), 0.1); } /* ── Family Circle: Care Log panel ──────────────────────────────────── Default look matches the app's usual card styling (used for "partner" role members). .care-log-panel--calm (senior role) swaps in the spec's warmer, lower-anxiety palette — sage green / warm off-white / slate blue — instead of the app's neon teal, scoped entirely to this panel. */ .care-log-panel[hidden] { display: none; } .care-log-panel { padding: var(--space-4) var(--space-4) var(--space-8); max-width: 600px; margin: 0 auto; } .care-log-header { text-align: left; margin: var(--space-2) 0 var(--space-6); } .care-log-header__label { margin: 0 0 4px; font-size: var(--type-xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; } .care-log-header__name { margin: 0; font-size: var(--type-xl); font-weight: 800; color: var(--text); } .care-log-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); } .care-log-card__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .care-log-card__title { font-size: var(--type-md); font-weight: 700; color: var(--text); } .care-log-toggle { padding: var(--space-2) var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-full); background: none; color: var(--text-muted); font-family: inherit; font-size: var(--type-sm); font-weight: 700; cursor: pointer; } .care-log-toggle--done { border-color: var(--success, #4caf7d); color: var(--success, #4caf7d); background: rgba(76, 175, 125, 0.1); } .care-log-add { background: none; border: 0; color: var(--primary); font-family: inherit; font-size: var(--type-sm); font-weight: 700; cursor: pointer; padding: var(--space-1) 0; } .care-log-list { margin-top: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .care-log-empty { margin: var(--space-2) 0 0; font-size: var(--type-sm); color: var(--text-faint); } .care-log-med { display: flex; align-items: center; gap: var(--space-3); width: 100%; padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: none; cursor: pointer; text-align: left; font-family: inherit; } .care-log-med__check { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border); display: grid; place-items: center; font-size: 14px; color: var(--success, #4caf7d); } .care-log-med--taken .care-log-med__check { border-color: var(--success, #4caf7d); background: rgba(76, 175, 125, 0.12); } .care-log-med__text { display: flex; flex-direction: column; min-width: 0; } .care-log-med__name { font-size: var(--type-sm); font-weight: 700; color: var(--text); } .care-log-med__time { font-size: var(--type-xs); color: var(--text-faint); } .care-log-steps-row { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); } .care-log-steps-input { width: 90px; padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--input-bg); color: var(--text); font-family: inherit; font-size: var(--type-md); } .care-log-steps-unit { flex: 1; font-size: var(--type-sm); color: var(--text-muted); } .care-log-row { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--border); font-size: var(--type-sm); } .care-log-row:last-child { border-bottom: 0; } .care-log-row__date { flex-shrink: 0; font-weight: 700; color: var(--text); } .care-log-row__note { color: var(--text-muted); } /* Calming senior-care palette — scoped to this panel only, doesn't touch the app's global teal theme. Deliberately warmer/softer per the spec's UX guidance (avoid "aggressive fitness neon" for elder/dependent care). */ .care-log-panel--calm { --care-sage: #8fa88a; --care-sage-soft: rgba(143, 168, 138, 0.14); --care-offwhite: #f3ede2; --care-slate: #7c93a8; background: #171d18; border-radius: var(--radius-xl); } .care-log-panel--calm .care-log-header__name { color: var(--care-offwhite); } .care-log-panel--calm .care-log-card { background: #1c231d; border-color: rgba(143, 168, 138, 0.25); } .care-log-panel--calm .care-log-card__title { color: var(--care-offwhite); } .care-log-panel--calm .care-log-toggle { border-color: var(--care-slate); color: var(--care-slate); } .care-log-panel--calm .care-log-toggle--done { border-color: var(--care-sage); color: var(--care-sage); background: var(--care-sage-soft); } .care-log-panel--calm .care-log-add { color: var(--care-slate); } .care-log-panel--calm .care-log-med { border-color: rgba(143, 168, 138, 0.25); } .care-log-panel--calm .care-log-med__check { color: var(--care-sage); } .care-log-panel--calm .care-log-med--taken .care-log-med__check { border-color: var(--care-sage); background: var(--care-sage-soft); } .care-log-panel--calm .care-log-med__name, .care-log-panel--calm .care-log-row__date { color: var(--care-offwhite); } .care-log-panel--calm .care-log-row { border-color: rgba(143, 168, 138, 0.2); } /* ── Family Dashboard — avatar row + story-style activity viewer ────────── */ .family-dash { padding: var(--space-5); } .family-dash-row { display: flex; flex-wrap: wrap; gap: var(--space-5); } .family-dash-avatar { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); width: 76px; background: none; border: 0; cursor: pointer; font-family: inherit; } .family-dash-avatar__ring { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; border: 2px solid transparent; } /* New (unseen) activity — a highlight ring around the avatar, same idea as a chat app's "unread story" indicator. Clears once the viewer is opened for that person (markFamilyActivitySeen). */ .family-dash-avatar--new .family-dash-avatar__ring { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15); } .family-dash-avatar__circle { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--icon-tile-bg); color: var(--primary); font-size: 20px; font-weight: 800; } /* The "+" avatar is the add control — solid, like a real avatar, not a ghost. */ .family-dash-avatar__ring--add { border: 2px solid transparent; } .family-dash-avatar__circle--add { background: var(--icon-tile-bg); color: var(--primary); font-size: 30px; font-weight: 400; } .family-dash-avatar__name { font-size: 12px; font-weight: 600; color: var(--text-muted); max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .family-dash-hint { margin: var(--space-6) 0 0; font-size: 13px; color: var(--text-faint); } /* Family members metadata section — one card per member, below the avatars. Tap opens the edit / remove sheet (openFamilyMemberSheet). */ .family-dash-members { margin-top: var(--space-6); } .family-dash-members__title { margin: 0 0 var(--space-3); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .fam-member-card { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: var(--space-3); padding: 14px 16px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); text-align: left; font-family: inherit; color: var(--text); cursor: pointer; transition: border-color 0.15s ease; } .fam-member-card:first-of-type { margin-top: 0; } .fam-member-card:hover { border-color: rgba(var(--primary-rgb), 0.35); } .fam-member-card__head { display: flex; align-items: baseline; gap: var(--space-3); } .fam-member-card__name { font-size: 15px; font-weight: 700; } .fam-member-card__role { font-size: 11px; font-weight: 600; color: var(--text-faint); } .fam-member-card__meta { font-size: 12px; color: var(--text-muted); } .fam-member-card__edit { display: inline-flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--primary); } /* Member detail / edit sheet */ .fam-sheet-grid { margin: var(--space-3) 0 var(--space-5); } .fam-sheet-row { display: flex; justify-content: space-between; gap: var(--space-4); padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 14px; } .fam-sheet-row:last-child { border-bottom: 0; } .fam-sheet-row span:first-child { color: var(--text-muted); } .fam-sheet-row span:last-child { font-weight: 600; text-align: right; } .fam-sheet-remove { width: 100%; margin-top: var(--space-3); padding: 12px; border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--error); cursor: pointer; } .fam-edit .field { margin-bottom: var(--space-4); text-align: left; } .fam-edit .field-label { text-align: left; } .fam-edit .input-row { justify-content: flex-start; } .fam-edit .fam-food-row { gap: var(--space-2); } .fam-edit .toggle-btn { min-width: 0; padding: 8px 14px; } /* Story-style viewer: one activity category per screen, auto-advances (paused on reduced-motion), Prev/Next steps through manually too. */ .family-activity-viewer { position: fixed; inset: 0; z-index: 2300; display: flex; align-items: center; justify-content: center; background: var(--onboard-bg); opacity: 0; transition: opacity 0.25s ease; padding: var(--space-6); text-align: center; } .family-activity-viewer--open { opacity: 1; } .family-activity-viewer__dots { position: absolute; top: calc(env(safe-area-inset-top) + var(--space-5)); left: var(--space-6); right: var(--space-6); display: flex; gap: 6px; } .family-activity-viewer__dot { flex: 1; height: 3px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.15); } .family-activity-viewer__dot--active, .family-activity-viewer__dot--done { background: var(--primary); } .family-activity-viewer__close { position: absolute; top: calc(env(safe-area-inset-top) + var(--space-5) + 14px); right: var(--space-5); z-index: 2; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); cursor: pointer; } .family-activity-viewer__body { display: flex; flex-direction: column; align-items: center; max-width: 360px; } .family-activity-viewer__icon { font-size: 40px; margin-bottom: var(--space-4); } .family-activity-viewer__name { font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); margin: 0 0 4px; } .family-activity-viewer__title { font-size: 22px; font-weight: 800; color: var(--text); margin: 0 0 var(--space-5); } .family-activity-viewer__content { display: flex; flex-direction: column; gap: var(--space-3); width: 100%; } .family-activity-viewer__big { font-size: 17px; color: var(--text); margin: 0; } .family-activity-viewer__row { font-size: 14px; color: var(--text-muted); margin: 0; text-align: left; } .family-activity-viewer__row strong { color: var(--text); } .family-activity-viewer__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.06); color: var(--text-muted); cursor: pointer; } .family-activity-viewer__nav--prev { left: var(--space-4); } .family-activity-viewer__nav--next { right: var(--space-4); } .family-activity-viewer__nav[hidden] { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .family-activity-viewer { transition: none; } } /* ── Viewing banner ──────────────────────────────────────── */ .viewing-banner { position: sticky; top: var(--app-header-h); /* stack below the sticky header, not on top of it */ z-index: 99; /* below the header so they never visually merge */ display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: rgba(var(--primary-rgb), 0.12); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--primary-rgb), 0.2); font-size: var(--type-md); width: 100%; box-sizing: border-box; } .viewing-banner-text { color: var(--text-muted); } .viewing-banner-text strong { color: var(--primary); font-weight: var(--weight-semibold); } .viewing-banner-switch { padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); border: 1px solid var(--primary); background: transparent; color: var(--primary); font-size: var(--type-sm); font-weight: var(--weight-semibold); font-family: inherit; cursor: pointer; transition: background var(--transition-fast); } .viewing-banner-switch:hover { background: rgba(var(--primary-rgb), 0.1); } /* Pills inside the family sheet: no global min-width, fill available space */ .add-family-sheet .input-pill { min-width: 0; flex: 1; } /* Input fills the pill so the whole area is tappable */ .add-family-sheet .input-pill input { flex: 1; width: auto; min-width: 0; } /* Left-align everything inside the family sheet */ .add-family-sheet .cond-comprehensive-title, .add-family-sheet .goal-sheet-subtitle, .add-family-sheet .field-label { text-align: left; } .add-family-sheet .input-row { justify-content: flex-start; } .add-family-sheet .gender-row { width: 100%; margin: 0; justify-content: flex-start; } .add-family-cta-footer .edit-health-cta { flex: 1; } .profile-email { font-size: var(--type-sm); color: var(--text-faint); text-align: center; margin-top: var(--space-4); padding: 0; } /* Profile Sections */ .profile-section { margin-bottom: var(--space-8); padding-bottom: var(--space-6); border-bottom: 1px solid rgba(var(--primary-rgb), 0.1); } .profile-section:last-of-type { border-bottom: none; } .profile-section-title { font-size: var(--type-body); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-4); opacity: 0.8; display: flex; align-items: center; justify-content: space-between; } .profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); } .profile-item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); min-height: 92px; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); } /* .profile-item's own display:flex would otherwise beat the UA [hidden] rule — some tiles are conditionally hidden by populateProfileTab(). */ .profile-item[hidden] { display: none; } /* Matches #trackerCards .tracker-card-label on the home screen — sentence case, muted, 12px — so labels read the same everywhere. */ .profile-item-label { font-size: 12px; color: var(--text-muted); font-weight: 600; letter-spacing: normal; } .profile-item-value { font-size: var(--type-lg); color: var(--text); font-weight: 700; line-height: 1.15; } /* Action Buttons */ .profile-action-btn { background: none; border: none; color: var(--accent); font-family: inherit; font-size: var(--type-sm); font-weight: 600; cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: 4px; transition: background 0.2s, color 0.2s; min-height: auto; white-space: nowrap; display: flex; align-items: center; gap: var(--space-1); } .profile-action-btn svg { flex-shrink: 0; stroke: currentColor; } @media (hover: hover) { .profile-action-btn:hover { background: rgba(var(--primary-rgb), 0.1); } } .profile-action-btn:active { background: rgba(var(--primary-rgb), 0.15); } /* Food Preferences Toggle */ .profile-toggle-btn { background: transparent; border: none; color: var(--text-muted); font-family: inherit; font-size: var(--type-sm); font-weight: 600; cursor: pointer; padding: var(--space-2) var(--space-3); border-radius: 999px; transition: background 0.2s, color 0.2s; white-space: nowrap; } @media (hover: hover) { .profile-toggle-btn:hover { color: var(--text-primary); } } .profile-toggle-btn--active { background: var(--accent); color: var(--btn-text); } .profile-toggle-btn--active:hover { background: var(--accent); } /* Settings rows (theme toggle + language) */ .profile-setting-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; } .profile-setting-row--link { cursor: pointer; user-select: none; -webkit-user-select: none; } /* Experimental ("Labs") setting — kept understated. */ .profile-setting-row--lab .profile-item-label { color: var(--text-muted); } .profile-setting-hint { display: block; margin-top: 2px; font-size: var(--type-xs); font-weight: var(--weight-regular, 400); color: var(--text-faint); max-width: 210px; line-height: 1.35; } .profile-lab-tag { display: inline-block; margin-left: var(--space-2); padding: 1px var(--space-2); border-radius: 999px; background: rgba(var(--primary-rgb), 0.14); color: var(--primary); font-size: var(--type-2xs, 10px); font-weight: var(--weight-bold); letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; } @media (hover: hover) { .profile-setting-row--link:hover { opacity: 0.75; } } .profile-setting-row--link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } .profile-toggle-group { display: flex; gap: 0; flex-shrink: 0; background: transparent; border: 1px solid rgba(var(--primary-rgb), 0.3); border-radius: 999px; padding: var(--space-1); } .profile-setting-value-row { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; color: var(--text-muted); } .profile-setting-value { font-size: var(--type-md); font-weight: 600; color: var(--text-muted); } /* Sign Out Button */ .profile-signout-btn { width: 100%; margin-top: var(--space-8); padding: var(--space-3) var(--space-4); min-height: 44px; background: transparent; border: 1px solid rgba(220, 60, 60, 0.5); border-radius: 999px; color: rgba(220, 60, 60, 0.8); font-family: inherit; font-size: var(--type-md); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } @media (hover: hover) { .profile-signout-btn:hover { background: rgba(220, 60, 60, 0.08); border-color: rgba(220, 60, 60, 0.8); color: rgba(220, 60, 60, 1); } } .profile-signout-btn:active { background: rgba(220, 60, 60, 0.12); } .profile-delete-btn { width: 100%; margin-top: var(--space-8); padding: var(--space-3) var(--space-4); min-height: 44px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; color: var(--text-muted); font-family: inherit; font-size: var(--type-md); font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } @media (hover: hover) { .profile-delete-btn:hover { background: rgba(220, 60, 60, 0.08); border-color: rgba(220, 60, 60, 0.6); color: rgba(220, 60, 60, 1); } } .profile-delete-btn:active { background: rgba(220, 60, 60, 0.12); border-color: rgba(220, 60, 60, 0.6); color: rgba(220, 60, 60, 1); } /* Responsive adjustments */ @media (min-width: 540px) { .profile-grid { grid-template-columns: 1fr 1fr 1fr; } } /* ============================================ CUSTOM SCROLLBAR (Design System) Deliberately near-invisible — a faint neutral track, never tinted. ============================================ */ /* Webkit browsers (Chrome, Safari, Edge). Scoped to :not(.is-android-app) — defining ANY ::-webkit-scrollbar rule switches Chromium/WebView from its native fading overlay scrollbar to "classic" (always-visible, own layout space) rendering. That reads as web-y inside the Android app, so Android gets no rule here at all and keeps the native overlay behavior. */ html:not(.is-android-app) ::-webkit-scrollbar { width: 6px; height: 6px; } html:not(.is-android-app) ::-webkit-scrollbar-track { background: transparent; } html:not(.is-android-app) ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 999px; transition: background 0.2s; } html:not(.is-android-app) ::-webkit-scrollbar-thumb:hover, html:not(.is-android-app) ::-webkit-scrollbar-thumb:active { background: var(--scrollbar-thumb-hover); } /* Firefox */ * { scrollbar-color: var(--scrollbar-thumb) transparent; scrollbar-width: thin; } *:hover { scrollbar-color: var(--scrollbar-thumb-hover) transparent; } /* ============================================ UNIFIED TOGGLE BUTTON ============================================ */ .toggle-btn { padding: var(--space-3) var(--space-6); min-height: 44px; border: 1px solid var(--border-control); background: transparent; border-radius: 999px; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: var(--type-md); font-weight: 600; transition: border-color 0.2s, color 0.2s, background 0.2s; } @media (hover: hover) { .toggle-btn:hover:not(.active) { border-color: #555555; } .toggle-btn.active:hover { border-color: var(--accent); color: var(--accent); } } .toggle-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--primary-rgb), 0.08); } /* ============================================ GENDER SELECTOR (Separate Component) ============================================ */ .gender-btn { padding: var(--space-3) var(--space-6); min-height: 44px; border: 1px solid var(--border-control); background: transparent; border-radius: 999px; color: var(--text-muted); cursor: pointer; font-family: inherit; font-size: var(--type-md); font-weight: 600; transition: border-color 0.2s, color 0.2s, background 0.2s; } @media (hover: hover) { .gender-btn:hover:not(.active) { border-color: #555555; } .gender-btn.active:hover { border-color: var(--accent); color: var(--accent); } } .gender-btn.active { border-color: var(--accent); color: var(--accent); background: rgba(var(--primary-rgb), 0.08); } /* ============================================ ICON-ONLY BUTTON (Subtle, No Stroke) ============================================ */ .icon-btn { min-width: 48px; min-height: 48px; padding: 0; border: none; background: transparent; color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 8px; transition: background-color 0.2s, color 0.2s; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .icon-btn:hover { background-color: rgba(255, 255, 255, 0.08); color: var(--text); } } .icon-btn:active { background-color: rgba(255, 255, 255, 0.12); } .icon-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -4px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } html, body { background: var(--bg); color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; letter-spacing: -0.005em; min-height: 100vh; min-height: 100dvh; /* Column layout so a short tab (e.g. the locked check-in) can push the disclaimer to the bottom via margin-top:auto instead of floating mid-page. */ display: flex; flex-direction: column; } /* subtle dot grid + radial accent — tech feel without noise */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: radial-gradient( circle at 50% -10%, rgba(var(--primary-rgb), 0.1), transparent 55% ), radial-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px); background-size: auto, 22px 22px; background-position: 0 0, 0 0; } .container { position: relative; z-index: 1; } /* ---- Home 3-step accordion (1 BMI · 2 Weight goal · 3 Health) ---- */ /* One seamless shell; exactly one step expanded (data-active), the rest are flat footprints. Steps beyond data-reached stay hidden. */ .home-wizard { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* Merge the inner cards into the shell — no nested rounding / borders / shadows. */ .home-wizard .card, .home-wizard .rec-card, .home-wizard .rec-card--cond { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } /* Consistent step width: every step (and the footprint) uses Step 1's (BMI card) horizontal padding so all content lines up at the same width. */ .home-wizard .card, .home-wizard .rec-card, .home-wizard .rec-card--cond, .home-wizard .step-footprint { padding-left: var(--space-9); padding-right: var(--space-9); } /* Reveal up to the furthest-reached step. */ .home-wizard[data-reached="1"] .is-2, .home-wizard[data-reached="1"] .is-3, .home-wizard[data-reached="2"] .is-3 { display: none; } /* Hairline divider between visible sections; none under the last visible step. */ .wizard-step { border-bottom: 1px solid var(--border); } .home-wizard[data-reached="1"] .is-1, .home-wizard[data-reached="2"] .is-2, .home-wizard[data-reached="3"] .is-3 { border-bottom: none; } /* Footprint (collapsed) vs body (expanded): body shows only for the active step. */ .step-body { display: none; } .step-footprint { display: none; } .wizard-step .step-footprint { display: flex; } .home-wizard[data-active="1"] .is-1 .step-body, .home-wizard[data-active="2"] .is-2 .step-body, .home-wizard[data-active="3"] .is-3 .step-body { display: block; } .home-wizard[data-active="1"] .is-1 .step-footprint, .home-wizard[data-active="2"] .is-2 .step-footprint, .home-wizard[data-active="3"] .is-3 .step-footprint { display: none; } /* Below-wizard learn-more appears only once Step 2 (goal) is done (reached 3). */ .home-wizard:not([data-reached="3"]) ~ .macros-section, .home-wizard:not([data-reached="3"]) ~ .rec-supporting-label, .home-wizard:not([data-reached="3"]) ~ .protein-details-card, .home-wizard:not([data-reached="3"]) ~ .newsletter-card { display: none !important; } /* Footprint (collapsed step) — centered, minimal stack inside the seamless shell: number badge → subtle title → entered data → Edit pill. (display is set by the visibility rules above; only layout direction/alignment here.) */ .step-footprint { width: 100%; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; background: transparent; border: none; padding: var(--space-6) var(--space-9); cursor: pointer; } /* Numbered badge — same treatment as the expanded step eyebrow. */ .step-fp__num { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary-fill); color: var(--btn-text); font-size: 12px; font-weight: 800; line-height: 1; } .step-fp__title { font-size: var(--type-body); font-weight: 600; color: var(--text-muted); } .step-fp__metrics { font-size: var(--type-sm); color: var(--text-faint); } .step-fp__metrics:empty { display: none; } /* Edit as a pill button, centered below the text */ .step-fp__edit { margin-top: var(--space-1); color: var(--primary); font-weight: 700; font-size: var(--type-sm); white-space: nowrap; border: 1px solid rgba(var(--primary-rgb), 0.4); border-radius: var(--radius-full); padding: var(--space-2) var(--space-5); transition: background 0.2s, color 0.2s; } /* Step "Next" primary CTAs (full-width filled) */ .home-wizard .wiz-primary { width: 100%; margin-top: var(--space-6); border: none; border-radius: 999px; background: var(--primary-fill); color: var(--btn-text); font: inherit; font-weight: 700; font-size: var(--type-md); padding: var(--space-3) var(--space-5); cursor: pointer; justify-content: center; align-items: center; gap: var(--space-2); } /* One CTA per step. The accordion hides the whole step body when collapsed, so these only need their own gating: Step 1 once BMI is calculated (not zero state); Step 2 once a goal is set. */ #step1Cta { display: none; } .container:not(.home-zero) #step1Cta { display: flex; } /* Step 2 CTA always shows on the card; it's disabled (inert) until a goal is set. */ #step2Cta { display: flex; } #step2Cta:disabled { opacity: 0.4; cursor: not-allowed; } /* Helper line below the disabled CTA — hidden once a goal is set. */ .wiz-cta-hint { margin: var(--space-3) 0 0; text-align: center; font-size: var(--type-sm); color: var(--text-faint); } .home-wizard.goal-set .wiz-cta-hint { display: none; } /* Replaced by the single CTA + icon buttons; also hide the BMI "Start over". */ #saveWeightPlanBtn, #saveProteinPlanBtn, #saveCondPlanBtn, #openShareModal, #openProteinShareModal, #condShareBtn, #bmiResetBtn { display: none !important; } /* Step 2's "Save your progress or share with others" block is redundant (the wizard has one Save CTA on Step 3). */ .home-wizard .is-2 .plan-share { display: none; } /* The BMI "…Odrifit has made you a health plan / See my plan" CTA is redundant in the wizard (the weight card sits right below + Next handles progression). */ .bmi-cta { display: none !important; } /* STEP eyebrow (Step 1 = BMI, Step 2 = Health concerns). Marks the two real actions; supporting cards (weight tips, protein) don't get one. */ .step-eyebrow { display: flex; align-items: center; justify-content: center; gap: var(--space-2); font-size: var(--type-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--space-3); } .step-eyebrow__num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary-fill); color: var(--btn-text); font-size: 12px; font-weight: 800; line-height: 1; letter-spacing: 0; } /* The expanded step always shows its solid number badge; the ✓ lives in the collapsed footprint, not the eyebrow. (No --done swap here.) */ /* Supporting (non-step) content: weight tips + protein. Visually secondary to the Step 1/Step 2 cards — flatter, lighter, smaller heading. */ .rec-supporting-label { font-size: var(--type-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); text-align: center; margin: var(--space-6) 0 var(--space-3); } .rec-card--supporting { background: rgba(15, 24, 25, 0.55); /* fallback ≈ var(--card-bg) at 55% */ background: color-mix(in srgb, var(--card-bg) 55%, transparent); box-shadow: none; padding: var(--space-7) var(--space-8); } .rec-card--supporting .protein-card-title, .rec-card--supporting .rec-meta-context { font-size: var(--type-md); } /* Check-in lock nudge (shown until Step 2 / health plan is saved) */ .checkin-lock-nudge { margin: var(--space-8) var(--space-4); } /* ============================================ LANGUAGE TOGGLE — fixed top-right ============================================ */ /* Single-pill language picker */ .lang-picker { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 50; } .lang-dropdown.is-open { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); pointer-events: auto; } .lang-option { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: transparent; border: none; color: var(--text-muted); padding: var(--space-3) var(--space-4); border-radius: 8px; cursor: pointer; font-family: inherit; font-size: var(--type-md); font-weight: 500; text-align: left; width: 100%; transition: color 0.15s, background 0.15s; } .lang-option:disabled { cursor: default; opacity: 0.6; } .lang-option--active { color: var(--text); background: var(--accent-dim); font-weight: 700; } @media (hover: hover) { .lang-option:not(:disabled):hover { color: var(--text); background: rgba(94, 234, 212, 0.08); } } /* ============================================ TOP INSTAGRAM FOLLOW BUTTON ============================================ */ .top-ig { position: fixed; top: 18px; right: 18px; z-index: 50; display: inline-flex; align-items: center; gap: var(--space-2); background: rgba(15, 24, 25, 0.72); border: 1px solid var(--border); border-radius: 999px; padding: var(--space-2) var(--space-4); color: var(--text-muted); text-decoration: none; font-family: inherit; font-size: var(--type-sm); font-weight: 500; letter-spacing: 0.01em; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.6); transition: color 0.3s var(--ease-out), background 0.3s var(--ease-out), border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out); } .top-ig .ig-icon { transition: transform 0.4s var(--ease-spring); } @media (hover: hover) { .top-ig:hover { color: var(--accent-soft); background: rgba(var(--primary-rgb), 0.1); border-color: var(--border-strong); transform: translateY(-1px); } .top-ig:hover .ig-icon { transform: rotate(-8deg) scale(1.1); } } @media (max-width: 540px) { /* Icon-only on mobile so the centered lang toggle has room */ .top-ig { padding: var(--space-2); gap: 0; } .top-ig span { display: none; } .top-ig .ig-icon { width: 16px; height: 16px; } } .container { width: 100%; /* fill the flex-column body; auto margins would otherwise shrink-wrap it to content (and grow with wide chips) */ max-width: 660px; margin: 0 auto; padding: 132px var(--space-6) var(--space-10); display: flex; flex-direction: column; gap: var(--space-14); } /* ============================================ MOTION: reveal-on-scroll ============================================ */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .logo-circle, .logo-circle img, .macros-chart img { animation: none !important; } .logo-sparkles i { animation: none !important; opacity: 0.5; } * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ============================================ HERO ============================================ */ .hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-1); padding-top: var(--space-3); } .logo-circle { position: relative; width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: visible; /* extra room below so the title clears the sparkle field (dots extend ~28% past the ring) */ margin-bottom: var(--space-12); } /* soft teal halo sitting behind the logo */ .logo-circle::before { content: ""; position: absolute; inset: -22%; border-radius: 50%; background: radial-gradient( circle, rgba(var(--primary-rgb), 0.45) 0%, rgba(var(--primary-rgb), 0.18) 40%, transparent 70% ); filter: blur(10px); z-index: -1; animation: glow-enhanced 2.5s ease-in-out infinite; pointer-events: none; } .logo-circle img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 50%; /* slow continuous spin of the SVG ring mark (stays crisp; rotation never upscales) */ animation: spin 16s linear infinite; } /* Subtle star-like glow dots scattered around the logo. Themed via --primary / --primary-rgb. */ .logo-sparkles { position: absolute; inset: -28%; pointer-events: none; z-index: 1; } .logo-sparkles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 6px 1px rgba(var(--primary-rgb), 0.85); opacity: 0; animation: sparkle-twinkle 3s ease-in-out infinite; } .logo-sparkles i:nth-child(1) { top: 6%; left: 50%; width: 2px; height: 2px; animation-duration: 2.6s; animation-delay: 0s; } .logo-sparkles i:nth-child(2) { top: 20%; left: 88%; animation-duration: 3.2s; animation-delay: .6s; } .logo-sparkles i:nth-child(3) { top: 58%; left: 95%; width: 2px; height: 2px; animation-duration: 2.9s; animation-delay: 1.1s; } .logo-sparkles i:nth-child(4) { top: 90%; left: 70%; width: 4px; height: 4px; animation-duration: 3.4s; animation-delay: .3s; } .logo-sparkles i:nth-child(5) { top: 92%; left: 28%; width: 2px; height: 2px; animation-duration: 2.7s; animation-delay: 1.4s; } .logo-sparkles i:nth-child(6) { top: 62%; left: 4%; animation-duration: 3.1s; animation-delay: .9s; } .logo-sparkles i:nth-child(7) { top: 24%; left: 10%; width: 2px; height: 2px; animation-duration: 3.5s; animation-delay: .2s; } .logo-sparkles i:nth-child(8) { top: 2%; left: 78%; width: 4px; height: 4px; animation-duration: 2.8s; animation-delay: 1.7s; } @keyframes sparkle-twinkle { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.85; transform: scale(1); } } @keyframes glow-pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } /* Hero logo: slow continuous rotation of the SVG ring mark. Rotation never bitmap- upscales an SVG, so the logo stays crisp at any size. */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes glow-enhanced { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.65; } } .brand-title { color: var(--primary); font-size: var(--type-display-3); font-weight: 800; letter-spacing: -1.4px; line-height: 1.1; margin-bottom: var(--space-1); } .brand-subtitle { color: var(--text-muted); font-size: var(--type-body); font-weight: 400; font-style: italic; letter-spacing: 0.01em; } /* ============================================ CARDS ============================================ */ .card { position: relative; background: var(--card-bg); border-radius: 20px; padding: var(--space-10) var(--space-9); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); transition: transform 0.4s var(--ease-out); } .card-title { font-size: var(--type-2xl); font-weight: 700; text-align: center; margin-bottom: var(--space-2); letter-spacing: -0.4px; } .card-subtitle { text-align: center; color: var(--text-muted); font-size: var(--type-md); font-weight: 400; margin-bottom: var(--space-5); max-width: 420px; margin-left: auto; margin-right: auto; line-height: 1.5; } /* ============================================ UNIT TOGGLE (Metric / Imperial) ============================================ */ .unit-toggle { display: flex; width: fit-content; background: var(--input-bg); border-radius: 999px; padding: var(--space-1); margin: 0 auto var(--space-8); } .field-label-row { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-bottom: var(--space-3); } .field-label-row .field-label { margin-bottom: 0; } .field-label-row .unit-toggle { margin: 0; } .unit-switch-link { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: var(--type-sm); font-weight: 600; text-decoration: underline; padding: var(--space-1) 0; cursor: pointer; white-space: nowrap; transition: color 0.2s var(--ease-out); } @media (hover: hover) { .unit-switch-link:hover { color: var(--text-muted); } } /* ============================================ REC CARD SHIMMER — rotating conic-gradient border ============================================ */ @property --shimmer-angle { syntax: ""; initial-value: 0deg; inherits: false; } @keyframes shimmer-spin { to { --shimmer-angle: 360deg; } } @keyframes shimmer-fade { 0%, 80% { opacity: 1; } 100% { opacity: 0; } } /* ============================================ PROGRESSIVE DISCLOSURE ============================================ */ @keyframes slide-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .slide-in { animation: slide-in 0.5s var(--ease-out) both; } /* ============================================ BMI CARD: INPUTS ============================================ */ .field { text-align: center; margin-bottom: var(--space-7); } .field:last-of-type { margin-bottom: var(--space-2); } .field-label { display: block; font-size: var(--type-md); font-weight: 500; color: var(--text-muted); margin-bottom: var(--space-3); letter-spacing: 0.005em; } .unit-toggle--inline { margin: 0 auto var(--space-4); } .input-row { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; } .input-pill { background: var(--input-bg); border-radius: 999px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-5); display: flex; align-items: center; gap: var(--space-3); min-width: 140px; /* Spring easing (slight overshoot) on the focus lift; smooth settle for everything else. Shared by every .input-pill surface — BMI checker, edit-health form, add-family sheet, onboarding chat. */ transition: background 0.2s var(--ease-out), box-shadow 0.3s ease, transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* Subtly lifts toward the user on focus — the "sprint into focus". */ .input-pill:focus-within { background: var(--input-bg-focus); box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25); transform: scale(1.015); } /* Re-triggerable one-shot so the sprint replays on EVERY tap, not just the first focus (JS toggles this on pointerdown/focus — a plain :focus-within transition fires only on entry). Ends where :focus-within holds. */ @keyframes input-pill-sprint { 0% { transform: scale(1); } 55% { transform: scale(1.03); } 100% { transform: scale(1.015); } } .input-pill--sprint { animation: input-pill-sprint 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; } @media (prefers-reduced-motion: reduce) { .input-pill { transition: background 0.2s ease, box-shadow 0.2s ease; } .input-pill:focus-within { transform: none; } .input-pill--sprint { animation: none; } } /* ---- Button tap ------------------------------------------------------------ A quick spring press that plays on EVERY tap of any