/* Light by default (this block), dark under prefers-color-scheme — the app follows the phone/browser's system theme out of the box. A user can still pin it explicitly (see the "Тема" setting in the Профиль tab, wired up in app.js): that sets data-theme on , which the two [data-theme=...] blocks below override with — CSS specificity, not source order, is why an explicit choice always wins over the media query regardless of which one comes first in this file. */ :root { --bg: oklch(97% 0.01 75); --surface: oklch(99% 0.006 75); --surface-2: oklch(94% 0.012 75); --field-bg: oklch(96% 0.006 75); --text: oklch(20% 0.02 260); --hint: oklch(46% 0.02 260 / 65%); --hint-faint: oklch(46% 0.02 260 / 55%); --border: oklch(20% 0.02 260 / 12%); --accent: oklch(60% 0.19 40); --accent-text: oklch(99% 0.01 90); --green: oklch(60% 0.19 150); --danger: oklch(58% 0.19 20); } @media (prefers-color-scheme: dark) { :root { --bg: oklch(18% 0.02 260); --surface: oklch(24% 0.02 260); --surface-2: oklch(28% 0.02 260); --field-bg: oklch(26% 0.02 260); --text: oklch(97% 0.01 90); --hint: oklch(97% 0.01 90 / 50%); --hint-faint: oklch(97% 0.01 90 / 40%); --border: oklch(97% 0.01 90 / 8%); --accent: oklch(70% 0.19 40); --accent-text: oklch(18% 0.02 260); --green: oklch(73% 0.19 150); --danger: oklch(68% 0.19 20); } } :root[data-theme="light"] { --bg: oklch(97% 0.01 75); --surface: oklch(99% 0.006 75); --surface-2: oklch(94% 0.012 75); --field-bg: oklch(96% 0.006 75); --text: oklch(20% 0.02 260); --hint: oklch(46% 0.02 260 / 65%); --hint-faint: oklch(46% 0.02 260 / 55%); --border: oklch(20% 0.02 260 / 12%); --accent: oklch(60% 0.19 40); --accent-text: oklch(99% 0.01 90); --green: oklch(60% 0.19 150); --danger: oklch(58% 0.19 20); } :root[data-theme="dark"] { --bg: oklch(18% 0.02 260); --surface: oklch(24% 0.02 260); --surface-2: oklch(28% 0.02 260); --field-bg: oklch(26% 0.02 260); --text: oklch(97% 0.01 90); --hint: oklch(97% 0.01 90 / 50%); --hint-faint: oklch(97% 0.01 90 / 40%); --border: oklch(97% 0.01 90 / 8%); --accent: oklch(70% 0.19 40); --accent-text: oklch(18% 0.02 260); --green: oklch(73% 0.19 150); --danger: oklch(68% 0.19 20); } * { box-sizing: border-box; } /* Any plain author display rule (even something as generic as `input { display: block }` below) beats the browser's built-in [hidden] { display: none } in the cascade, regardless of selector specificity — normal author rules always outrank normal user-agent rules. Without this, every hidden-but-styled element (file inputs behind a custom label, etc.) silently leaks back into view. This is a permanent, global guard instead of patching each element that hits it one at a time. */ [hidden] { display: none !important; } html, body { height: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; } /* Shown from first paint (no JS delay) so a slow auth check never flashes the logged-in view or the login form before we know which one to show — see the boot sequence at the bottom of app.js. */ #splash-screen { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; background: var(--bg); } .pulse-scope { width: 220px; height: 56px; overflow: hidden; } .pulse-scope svg { display: block; width: 440px; height: 56px; animation: pulse-scroll 2.4s linear infinite; } .pulse-scope path { fill: none; stroke: var(--accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px var(--accent)); } @keyframes pulse-scroll { from { transform: translateX(0); } to { transform: translateX(-220px); } } .splash-title { font: 800 20px "Manrope", sans-serif; letter-spacing: 0.02em; color: var(--text); } @media (prefers-reduced-motion: reduce) { .pulse-scope svg { animation: none; } } #app { display: flex; flex-direction: column; height: 100%; } /* Top/bottom padding both account for edge-to-edge rendering in the Android app (its WebView draws under the status bar and gesture-nav bar by default) — safe-area-inset-* is 0 in a normal browser tab, so this is a no-op there. Without the top one, the first thing in a tab with no header (e.g. "Продукт" on "Добавить") hides under the status bar; without the bottom one, the last thing in a long tab (e.g. "Выйти из аккаунта" on "Профиль") can end up under the bottom tab bar on devices with a tall gesture-nav safe area, where 5.5rem alone isn't enough clearance for the tab bar's real height. */ #content { flex: 1; overflow-y: auto; padding: calc(0.5rem + env(safe-area-inset-top)) 1.1rem calc(5.5rem + env(safe-area-inset-bottom)); } .view { display: none; } .view.active { display: block; animation: fadeUp 0.35s ease both; } /* Shared entrance/interaction keyframes (redesign) — kept alongside the pre-existing pulse-scroll/spin above rather than merged in, so each effect's origin (splash vs. general UI motion) stays easy to trace. */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes floatBlob1 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(18px, -22px); } } @keyframes floatBlob2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-16px, 18px); } } @keyframes glowPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .view.active { animation: none; } } /* Toast — a brief, self-dismissing confirmation ("Сохранено", "Вес сохранён: 75 кг", ...) for actions that already have their own success haptic, so it doesn't need to stay on screen or be dismissed by hand the way an inline #foo-status error message does. Always in the DOM (no [hidden] toggling, since display:none can't be transitioned) — app.js's showToast() only ever flips the .visible class. */ .toast { position: fixed; left: 50%; bottom: calc(5.5rem + env(safe-area-inset-bottom)); transform: translate(-50%, 10px); max-width: calc(100% - 2.4rem); padding: 0.7rem 1.1rem; border-radius: 12px; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); font-size: 0.9rem; text-align: center; z-index: 30; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .toast.visible { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .toast { transition: opacity 0.01ms; } } /* Bottom nav */ .tabs { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; padding: 0.5rem 0.4rem calc(0.5rem + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); z-index: 10; } .tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; background: none; padding: 4px 2px; color: var(--hint-faint); } .tab-icon { display: block; } .tab-label { font: 700 10px "Manrope", sans-serif; } .tab.active { color: var(--accent); } /* Global floating "+" (quick add), above the tab bar on every screen */ .fab-add { position: fixed; right: 20px; bottom: calc(76px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border: none; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-text); box-shadow: 0 8px 20px -6px color-mix(in oklch, var(--accent) 60%, transparent); z-index: 15; cursor: pointer; } .fab-menu-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 20px calc(140px + env(safe-area-inset-bottom)); z-index: 20; } .fab-menu { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } .fab-menu-item { min-width: 200px; padding: 14px 22px; border: none; border-radius: 999px; font: 700 15px "Manrope", sans-serif; color: var(--accent-text); cursor: pointer; box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.3); } .fab-menu-item-accent { background: var(--accent); } .fab-menu-item-green { background: var(--green); } /* Add-food bottom sheet (FAB "Добавить еду" / Today's quick-add buttons) */ .add-via-fab-hint { color: var(--hint); font: 600 12.5px "Manrope", sans-serif; text-align: center; margin: 4px 0 0; } .sheet-overlay { position: fixed; inset: 0; z-index: 25; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, 0.42); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .sheet-card { width: 100%; max-width: 480px; background: var(--surface); border-radius: 26px 26px 0 0; padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 50px -20px rgba(20, 15, 10, 0.4); max-height: 88vh; overflow-y: auto; } .sheet-handle { width: 42px; height: 4px; border-radius: 4px; background: var(--border); margin: 0 auto 14px; } .sheet-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .sheet-title { font: 800 17px "Manrope", sans-serif; color: var(--text); letter-spacing: -0.01em; } .sheet-close { width: 32px; height: 32px; flex: none; border: none; border-radius: 10px; background: var(--surface-2); color: var(--hint); display: flex; align-items: center; justify-content: center; cursor: pointer; } .quick-grams-row { display: flex; gap: 8px; margin: 10px 0 14px; } .quick-gram-btn { flex: 1; padding: 9px 0; border: 1px solid var(--border); border-radius: 999px; background: var(--field-bg); color: var(--text); font: 700 12px "Manrope", sans-serif; cursor: pointer; } .quick-gram-btn:hover { border-color: var(--accent); color: var(--accent); } /* Header */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 4px 4px; } .app-title { font: 800 19px "Manrope", sans-serif; letter-spacing: -0.01em; } .app-date { font: 600 13px "Manrope", sans-serif; color: var(--hint); } /* Today-tab widget carousel (design handoff) — replaces the old single hero-card ring with 4 (web) / 5 (mobile) swipeable stat widgets sharing one card shell, plus a dot indicator row below. */ .widget-carousel-wrap { margin-top: 10px; } .widget-carousel { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; } .widget-carousel::-webkit-scrollbar { display: none; } .widget-card { flex: 0 0 100%; scroll-snap-align: center; box-sizing: border-box; background: linear-gradient(160deg, var(--surface), var(--surface-2)); border-radius: 24px; padding: 20px 18px 16px; box-shadow: 0 10px 30px -18px rgba(20, 15, 10, 0.2); min-height: 168px; } .widget-header { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; } .widget-hero-row { display: flex; align-items: baseline; gap: 6px; } .widget-hero-value { font: 800 34px "Manrope", sans-serif; font-variant-numeric: tabular-nums; } .widget-hero-value.widget-hero-value-sm { font-size: 30px; } .widget-hero-hint { font: 700 12px "Manrope", sans-serif; color: var(--hint); } .widget-eyebrow { font: 700 10px "Manrope", sans-serif; color: var(--hint-faint); text-transform: uppercase; letter-spacing: 0.04em; } .widget-title { font: 800 15px "Manrope", sans-serif; font-variant-numeric: tabular-nums; } .widget-footnote { font: 600 11px "Manrope", sans-serif; color: var(--hint-faint); margin: 14px 0 0; } /* Bar charts (weekly calories / weekly activity widgets) */ .bar-chart { display: flex; align-items: flex-end; gap: 8px; height: 96px; margin-top: 16px; } .bar-chart.bar-chart-short { height: 84px; } .bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .bar-track { width: 100%; max-width: 26px; border-radius: 6px; background: var(--surface-2); height: 100%; overflow: hidden; display: flex; align-items: flex-end; } .bar-fill { width: 100%; border-radius: 6px; transition: height 1s cubic-bezier(0.22, 1, 0.36, 1); } .bar-label { font: 700 10px "Manrope", sans-serif; } @media (prefers-reduced-motion: reduce) { .bar-fill { transition: none; } } /* Remaining-calories ring widget */ .widget-ring-card { display: flex; align-items: center; gap: 18px; } .ring-wrap { position: relative; display: flex; align-items: center; justify-content: center; flex: none; } .ring-track { stroke: var(--surface-2); } .ring-progress { stroke: var(--accent); transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1); } @media (prefers-reduced-motion: reduce) { .ring-progress { transition: none; } } .ring-center { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; } .ring-center span { font: 800 26px "Manrope", sans-serif; font-variant-numeric: tabular-nums; } .ring-center small { font: 700 10px "Manrope", sans-serif; color: var(--hint); } .ring-stats { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .ring-stat-label { display: block; font: 700 11px "Manrope", sans-serif; color: var(--hint); } .ring-stat-value { display: block; font: 800 17px "Manrope", sans-serif; font-variant-numeric: tabular-nums; margin-top: 1px; } .ring-stat-value.ring-stat-green { color: var(--green); } /* Day-balance widget */ .balance-bars { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; } .balance-bar-header { display: flex; justify-content: space-between; font: 700 11px "Manrope", sans-serif; color: var(--hint); margin-bottom: 6px; } .balance-bar-header span:last-child { font-variant-numeric: tabular-nums; } .balance-bar-track { height: 12px; border-radius: 12px; background: color-mix(in oklch, var(--text) 7%, transparent); overflow: hidden; } .balance-bar-fill { height: 100%; border-radius: 12px; width: 0%; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1); } .balance-bar-fill.intake { background: var(--accent); } .balance-bar-fill.expenditure { background: var(--green); } @media (prefers-reduced-motion: reduce) { .balance-bar-fill { transition: none; } } /* Dot indicator row */ .widget-dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; } .widget-dot { width: 6px; height: 6px; border-radius: 6px; border: none; padding: 0; background: var(--surface-2); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; } .widget-dot.active { width: 20px; background: var(--accent); } @media (prefers-reduced-motion: reduce) { .widget-dot { transition: none; } } /* Macro chips */ .macro-chips-card { background: var(--surface); border-radius: 20px; padding: 14px 16px; margin-top: 12px; } .macro-chips { display: flex; justify-content: center; gap: 26px; } .macro-chip { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 56px; } .macro-chip-label { display: flex; align-items: center; gap: 4px; font: 700 12px "Manrope", sans-serif; } .macro-chip b { font-variant-numeric: tabular-nums; } .dot { display: inline-block; width: 0.6em; height: 0.6em; border-radius: 50%; } .dot.protein { background: #4c8bf5; } .dot.fat { background: var(--accent); } .dot.carbs { background: var(--green); } .macro-bar { width: 100%; height: 4px; border-radius: 4px; background: color-mix(in oklch, var(--text) 10%, transparent); overflow: hidden; } .macro-bar-fill { height: 100%; border-radius: 4px; width: 0%; transition: width 1s ease; } .macro-bar-fill.protein { background: #4c8bf5; } .macro-bar-fill.fat { background: var(--accent); } .macro-bar-fill.carbs { background: var(--green); } @media (prefers-reduced-motion: reduce) { .macro-bar-fill { transition: none; } } .section-label { display: block; font: 700 11px "Manrope", sans-serif; color: var(--hint-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 8px; } .section-label.danger-label { color: color-mix(in oklch, var(--danger) 85%, transparent); } /* Entry list (Today / Записи / История) */ .entry-list { list-style: none; margin: 0; padding: 0; } .entry { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border-radius: 14px; padding: 10px 12px; margin-bottom: 8px; gap: 0.6rem; animation: fadeUp 0.4s ease both; } /* Staggered entrance, 60ms per row, capped at 10 so a long list doesn't keep animating rows in for a visually distracting length of time. */ .entry-list .entry:nth-child(1) { animation-delay: 0ms; } .entry-list .entry:nth-child(2) { animation-delay: 60ms; } .entry-list .entry:nth-child(3) { animation-delay: 120ms; } .entry-list .entry:nth-child(4) { animation-delay: 180ms; } .entry-list .entry:nth-child(5) { animation-delay: 240ms; } .entry-list .entry:nth-child(n+6) { animation-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .entry { animation: none; } } .entry-thumb { flex: none; width: 2.75rem; height: 2.75rem; border-radius: 8px; object-fit: cover; background: var(--surface-2); } .entry-main { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; flex: 1; } .entry-food { font: 600 13px "Manrope", sans-serif; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry-meta, .entry-macros { color: var(--hint); font-size: 0.78rem; font-variant-numeric: tabular-nums; } .entry-ingredients { color: var(--hint-faint); font-size: 0.74rem; font-style: italic; line-height: 1.4; } /* Neutral card background (not accent-tinted) behind a flat, single-color line icon (see ICON_SVG in app.js — these are no longer the ✏️/🗑 emoji, which come with their own fixed multi-color palette). */ .entry-actions { display: flex; gap: 0.5rem; flex: none; } .entry-actions button { display: flex; align-items: center; justify-content: center; border: none; background: var(--surface-2); color: var(--hint); border-radius: 12px; width: 2.25rem; height: 2.25rem; } .entry-actions button:disabled { opacity: 0.4; } .entry-actions button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } /* "Приёмы пищи сегодня" (Питание tab, saved plan state) — a 2-column grid of photo tiles, per design_handoff_fitbot_redesign's latest revision (replaces the old dot+row mealLine list, which the week view below still uses as-is). */ .meal-tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .meal-tile { background: var(--surface); border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px -16px rgba(20, 15, 10, .35); cursor: pointer; transition: transform 0.15s ease; animation: fadeUp 0.4s ease both; } .meal-tile-grid .meal-tile:nth-child(1) { animation-delay: 0ms; } .meal-tile-grid .meal-tile:nth-child(2) { animation-delay: 70ms; } .meal-tile-grid .meal-tile:nth-child(3) { animation-delay: 140ms; } .meal-tile-grid .meal-tile:nth-child(4) { animation-delay: 210ms; } .meal-tile-grid .meal-tile:nth-child(n+5) { animation-delay: 280ms; } @media (prefers-reduced-motion: reduce) { .meal-tile { animation: none; } } @media (hover: hover) { .meal-tile:hover { transform: translateY(-2px); } } .meal-tile:active { transform: translateY(-2px); } .meal-tile-photo-wrap { position: relative; height: 104px; background: var(--surface-2); } .meal-tile-photo { width: 100%; height: 100%; object-fit: cover; display: block; } .meal-tile-kcal-pill { position: absolute; top: 8px; right: 8px; background: var(--accent); color: var(--accent-text); font: 800 10px "Manrope", sans-serif; padding: 3px 7px; border-radius: 999px; } .meal-tile-body { padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; } .meal-tile-name { font: 800 13px "Manrope", sans-serif; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } .meal-tile-desc { font: 600 11px "Manrope", sans-serif; color: var(--hint); min-height: 2.4em; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .meal-tile-macros { display: flex; gap: 5px; } .meal-tile-macro-chip { flex: 1; text-align: center; border-radius: 8px; padding: 3px 0; font: 700 10px "Manrope", sans-serif; font-variant-numeric: tabular-nums; } .meal-tile-macro-chip.protein { background: color-mix(in oklch, #4c8bf5 12%, transparent); color: #4c8bf5; } .meal-tile-macro-chip.fat { background: color-mix(in oklch, var(--accent) 12%, transparent); color: var(--accent); } .meal-tile-macro-chip.carbs { background: color-mix(in oklch, var(--green) 12%, transparent); color: var(--green); } .meal-tile-actions { display: flex; gap: 6px; margin-top: 2px; } .meal-tile-actions button { flex: 1; border: none; background: var(--surface-2); color: var(--hint); border-radius: 8px; padding: 6px 0; font-size: 13px; } .meal-tile-actions button:disabled { opacity: 0.4; } .empty { color: var(--hint); font-size: 0.9rem; } /* Footer stat cards (Today) — "Сожжено" (first) tinted green, "Вес" (second) tinted orange, matching the design handoff exactly. */ .footer-cards { display: flex; gap: 10px; margin-top: 16px; } .footer-card { flex: 1; background: var(--surface); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 2px; } .footer-card:first-child { background: color-mix(in oklch, var(--green) 12%, transparent); } .footer-card:last-child { background: color-mix(in oklch, var(--accent) 10%, transparent); } .footer-card-label { font: 700 11px "Manrope", sans-serif; color: var(--hint); } .footer-card-value { font: 800 16px "Manrope", sans-serif; font-variant-numeric: tabular-nums; } /* Forms */ form label, #view-profile label, #plan-profile-gate label, #nutrition-profile-gate label { display: block; font: 600 12px "Manrope", sans-serif; color: var(--hint); margin-bottom: 1rem; } /* "Возраст"/"Рост" sit side by side in the handoff, not stacked. */ .settings-row { display: flex; gap: 8px; } .settings-row label { flex: 1; } /* "Тема"/"Язык" segmented pill-groups — replace what used to be a