/* ============================================================================ Дизайн-система «Рузгор» — современный финтех, ИНДИГО-бренд. Ключевое решение: бренд (акцент) НЕ зелёный — индиго. Так зелёный честно значит «деньги вверх/прибыль», красный — «вниз/убыток», индиго — бренд/кнопки/выделение. Это даёт чёткую иерархию (раньше бренд и прибыль сливались в один зелёный). Принцип: только CSS (без блюра) — летает на слабом Android и 3G. Имена классов 1:1 с прежней версией, app.js не трогаем — переоформление каскадом доходит до всех экранов. ============================================================================ */ :root { /* — Светлая тема (по умолчанию) — */ --bg: #f4f5fb; /* фон приложения — чуть холодный, под индиго */ --bg-elev: #fbfbfe; /* вложенные поверхности (поля, чипсы) */ --text: #15171f; /* основной текст */ --text-2: #3c4150; /* вторичный текст */ --hint: #767c8c; /* подписи/плейсхолдеры */ --card: #ffffff; /* карточки */ --accent: #5b5bd6; /* индиго — бренд/кнопки/выделение (НЕ деньги) */ --accent-2: #7c7cf5; /* светлее для градиента */ --accent-soft: rgba(91, 91, 214, 0.12); /* подложка активных состояний */ --accent-text: #ffffff; --sep: rgba(20, 24, 48, 0.08); /* разделители */ --border: rgba(20, 24, 48, 0.11); /* видимые рамки полей/карточек */ --green: #0e9f6e; /* теперь только семантика «прибыль/вверх» */ --red: #e5484d; /* «убыток/вниз» */ --amber: #d98000; /* мягкие слоистые тени — лёгкие, чтобы не грузить композитор WebView */ --shadow-sm: 0 1px 2px rgba(16, 32, 48, 0.06), 0 1px 1px rgba(16, 32, 48, 0.04); --shadow-md: 0 2px 8px rgba(16, 32, 48, 0.07), 0 1px 2px rgba(16, 32, 48, 0.05); --shadow-lg: 0 8px 28px rgba(16, 32, 48, 0.14); --r-card: 18px; --r-btn: 14px; --r-field: 12px; } /* — Тёмная тема — включается классом .theme-dark на (см. index.html и Настройки) — */ html.theme-dark { --bg: #0f1620; --bg-elev: #18222e; --text: #f3f6f9; --text-2: #c2ccd6; --hint: #8595a3; --card: #1a1f2e; --accent: #8b8bf2; /* в темноте индиго светлее: читается как текст/иконка на тёмном */ --accent-2: #a5a5f7; --accent-soft: rgba(139, 139, 242, 0.18); --accent-text: #11122e; /* тёмный текст на светло-индиго кнопке/градиенте — контраст ок */ --sep: rgba(255, 255, 255, 0.08); --border: rgba(255, 255, 255, 0.12); --green: #34d399; --red: #ff6b6b; --amber: #f0a52e; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30); --shadow-md: 0 2px 10px rgba(0, 0, 0, 0.36); --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.50); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* Непрозрачная база того же цвета: при открытии клавиатуры на Android под «залипшим» старым кадром WebView не должно быть прозрачной подложки. */ html { background: var(--bg); } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; background: var(--bg); color: var(--text); padding-bottom: 88px; /* место под плавающий таб-бар */ -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Цифры денег — моноширинные по ширине, чтобы суммы не «прыгали» при обновлении */ .big-number, .mini-value, .value, .amt, .sum, .rate-row span, .total-line { font-variant-numeric: tabular-nums; } /* Микровзаимодействие: лёгкое «нажатие» у всех кликабельных. Дёшево и оживляет интерфейс. */ button { transition: transform .12s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease; } button:active { transform: scale(.97); } /* Слои композитора: на Android-WebView Telegram при появлении клавиатуры sticky/fixed «двоились» (старый кадр поверх нового); своя GPU-плоскость перерисовывает их чисто. */ .app-header, .view, .tabbar { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; } /* — Шапка — */ .app-header { padding: 18px 18px 12px; position: sticky; top: 0; z-index: 5; background: linear-gradient(var(--bg) 70%, transparent); /* мягкое растворение контента под шапкой */ background-color: var(--bg); } .app-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; } .app-sub { font-size: 13px; color: var(--hint); margin-top: 2px; } /* Изящный медленный вход экрана: долгое мягкое проявление (без рывка). */ .view { padding: 12px 16px 28px; animation: viewin .9s cubic-bezier(.22, 1, .36, 1); } @keyframes viewin { from { opacity: 0; } to { opacity: 1; } } /* Каскадное появление карточек: каждая неспешно «всплывает» заметно позже предыдущей — экран собирается плавной волной. Длинная мягкая кривая (easeOutQuint), большие интервалы. backwards держит первый кадр (прозрачно) до старта задержки. */ .view > .card { animation: cardin .85s cubic-bezier(.22, 1, .36, 1) backwards; } .view > .card:nth-child(1) { animation-delay: .06s; } .view > .card:nth-child(2) { animation-delay: .16s; } .view > .card:nth-child(3) { animation-delay: .26s; } .view > .card:nth-child(4) { animation-delay: .36s; } .view > .card:nth-child(5) { animation-delay: .46s; } .view > .card:nth-child(6) { animation-delay: .56s; } .view > .card:nth-child(7) { animation-delay: .66s; } .view > .card:nth-child(n+8) { animation-delay: .76s; } @keyframes cardin { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } /* Неспешный «вдох» герой-карточки суммы дня — еле заметно дышит, очень плавно. */ .card.hero { animation: viewin .9s cubic-bezier(.22, 1, .36, 1), heroglow 7s ease-in-out 1.2s infinite; } @keyframes heroglow { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: var(--shadow-md), 0 10px 38px rgba(91, 91, 214, 0.32); } } .loading { text-align: center; color: var(--hint); padding: 48px 0; } /* Спиннер вместо «Загружаю…»: кольцо в акцентном цвете медленно и плавно вращается над текстом — единый изящный индикатор на ВСЕХ экранах (каскад от .loading, разметку не трогаем). */ .loading::before { content: ""; display: block; width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%; border: 3px solid var(--accent-soft); border-top-color: var(--accent); animation: spin 1.3s cubic-bezier(.55, .15, .45, .85) infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Брендовый сплэш первого кадра (index.html) — три неспешно «всплывающие» индиго-точки. */ .splash { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; animation: viewin 1s cubic-bezier(.22, 1, .36, 1); } .splash-logo { font-size: 30px; font-weight: 800; letter-spacing: -0.6px; background: linear-gradient(120deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; animation: breathe 3.4s ease-in-out infinite; } @keyframes breathe { 0%, 100% { opacity: .8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } } .splash-dots { display: flex; gap: 9px; } .splash-dots span { width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(var(--accent-2), var(--accent)); animation: bounce 1.8s cubic-bezier(.45, 0, .55, 1) infinite; } .splash-dots span:nth-child(2) { animation-delay: .22s; } .splash-dots span:nth-child(3) { animation-delay: .44s; } @keyframes bounce { 0%, 75%, 100% { transform: translateY(0); opacity: .45; } 38% { transform: translateY(-11px); opacity: 1; } } /* Деликатный «поп» суммы при появлении/смене (count-up в app.js даёт цифры, это — масштаб). */ .pop { animation: pop .7s cubic-bezier(.22, 1, .36, 1); } @keyframes pop { from { transform: scale(.975); } to { transform: scale(1); } } /* — Карточки — */ .card { background: var(--card); border: 1px solid var(--sep); border-radius: var(--r-card); padding: 16px 18px; margin-bottom: 12px; box-shadow: var(--shadow-sm); } .card-title { font-size: 12px; color: var(--hint); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; } /* Заглавная сумма — герой экрана. Можно повесить класс-модификатор для «градиентной» карточки. */ .big-number { font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.6px; } .big-number .cur { font-size: 16px; color: var(--hint); font-weight: 600; margin-left: 6px; letter-spacing: 0; } /* Премиальная карточка-герой: ФИКСИРОВАННЫЙ индиго-градиент (не зависит от темы), белый текст читается и в светлой, и в тёмной. Если бы брали var(--accent), в тёмной теме индиго светлее — белый текст на нём «провалился» бы по контрасту. Применяется классом .hero к .card. */ .card.hero { background: linear-gradient(135deg, #5b5bd6, #7c7cf5); border: none; color: #fff; box-shadow: var(--shadow-md); } .card.hero .card-title { color: rgba(255, 255, 255, 0.85); } .card.hero .big-number, .card.hero .big-number .cur { color: #fff; } .card.hero .row .label { color: rgba(255, 255, 255, 0.85); } .card.hero .row + .row { border-color: rgba(255, 255, 255, 0.18); } /* — Строки «ключ: значение» — */ .row { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 0; gap: 12px; } .row + .row { border-top: 1px solid var(--sep); } .row .label { color: var(--text-2); font-size: 14px; } .row .value { font-weight: 700; font-size: 15px; } .value.green { color: var(--green); } .value.red { color: var(--red); } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grid2 .card { margin-bottom: 0; } .mini-label { font-size: 12px; color: var(--hint); font-weight: 500; } .mini-value { font-size: 24px; font-weight: 800; margin-top: 3px; letter-spacing: -0.4px; } /* таблица банковских курсов: компактная сетка с зеброй */ .rate-grid { display: grid; gap: 2px 10px; align-items: center; } .rate-head { padding: 5px 8px; border-bottom: 1px solid var(--border); font-size: 11px; color: var(--hint); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; } .rate-row { padding: 8px; border-bottom: 1px solid var(--sep); font-size: 13px; border-radius: 8px; } .rate-row:nth-child(even) { background: var(--bg-elev); } /* — мини-бар-чарт без библиотек — */ .bars { display: flex; align-items: flex-end; gap: 5px; height: 96px; margin-top: 8px; } .bars .bar { flex: 1; border-radius: 6px 6px 0 0; min-height: 4px; background: linear-gradient(var(--accent-2), var(--accent)); /* объёмная заливка столбца */ } .bars-x { display: flex; gap: 5px; margin-top: 6px; } .bars-x span { flex: 1; text-align: center; font-size: 9px; color: var(--hint); overflow: hidden; } .barline { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .barline .name { width: 92px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .barline .track { flex: 1; height: 9px; background: var(--sep); border-radius: 6px; overflow: hidden; } .barline .fill { height: 100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); border-radius: 6px; } .barline .amt { font-size: 12px; color: var(--hint); min-width: 64px; text-align: right; } /* — список операций — */ .entry { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--sep); } .entry:first-child { border-top: none; } .entry .ico { font-size: 18px; width: 38px; height: 38px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: var(--bg-elev); border-radius: 11px; /* иконка в «плашке» — чище читается */ } .entry .main { flex: 1; min-width: 0; } .entry .prod { font-size: 15px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .entry .when { font-size: 12px; color: var(--hint); margin-top: 1px; } .entry .sum { font-weight: 700; font-size: 15px; } .entry .del { background: none; border: none; color: var(--red); font-size: 18px; padding: 4px 6px; cursor: pointer; } /* — сегментированный переключатель (как iOS) — */ .seg { display: flex; background: var(--bg-elev); border-radius: 12px; padding: 4px; margin-bottom: 14px; gap: 2px; } .seg button { flex: 1; border: none; background: none; color: var(--hint); padding: 9px; border-radius: 9px; font-size: 14px; font-weight: 600; } .seg button.active { background: var(--card); color: var(--text); box-shadow: var(--shadow-sm); } .empty { text-align: center; color: var(--hint); padding: 36px 14px; font-size: 14px; line-height: 1.5; } .pill { display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* — Плавающий таб-бар — приподнятый, со скруглением и активным «пилюля»-состоянием — */ .tabbar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 2px; background: var(--card); border-top: 1px solid var(--sep); box-shadow: 0 -4px 24px rgba(16, 32, 48, 0.08); padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0)); } .tab { flex: 1; border: none; background: none; color: var(--hint); font-size: 11px; font-weight: 600; padding: 7px 0 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px; border-radius: 12px; } .tab span { font-size: 21px; line-height: 1; } .tab.active { color: var(--accent); background: var(--accent-soft); } /* — формы / кнопки — */ .big-btn { width: 100%; border: none; border-radius: var(--r-btn); padding: 15px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-text); font-size: 16px; font-weight: 700; margin-top: 10px; cursor: pointer; box-shadow: var(--shadow-sm); } .big-btn:disabled { opacity: .55; box-shadow: none; } .ghost-btn { width: 100%; border: 1px solid var(--border); border-radius: var(--r-btn); padding: 12px; background: var(--card); color: var(--text); font-size: 14px; font-weight: 600; margin-top: 8px; cursor: pointer; } .ghost-btn:active { background: var(--bg-elev); } .ghost-btn.small { width: auto; padding: 9px 16px; margin: 0; border-radius: 999px; } .ghost-btn.rec { background: var(--red); color: #fff; border-color: var(--red); } /* Функция выключена на сервере (нет модели): кнопка видна, но явно неактивна. Прячь мы её совсем — пользователь решил бы, что приложение сломалось или обновилось. pointer-events оставляем включёнными, чтобы тап показывал подсказку «почему». */ .ghost-btn.off { opacity: .45; cursor: not-allowed; color: var(--hint); background: var(--bg-elev); border-style: dashed; } .formrow2 .ghost-btn { flex: 1; margin-top: 0; } /* — чипсы-подсказки (готовые вопросы на «Спросить») — */ .ask-hint { margin-top: 16px; font-size: 13px; color: var(--hint); } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } /* тонкий тематический скроллбар для горизонтального ряда чипсов (рынки) */ .chips::-webkit-scrollbar { height: 3px; } .chips::-webkit-scrollbar-track { background: var(--sep); border-radius: 3px; } .chips::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .chip { border: 1px solid var(--border); border-radius: 999px; padding: 9px 15px; background: var(--card); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; line-height: 1.2; } .chip:active, .chip-active { background: var(--accent); color: var(--accent-text); border-color: var(--accent); } .chip:disabled { opacity: .5; } .formrow { margin-bottom: 10px; } .f-prod, .f-num, .f-unit { border: 1px solid var(--border); border-radius: var(--r-field); background: var(--bg-elev); color: var(--text); font-size: 15px; transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .f-prod { width: 100%; padding: 12px; margin-bottom: 6px; } /* фокус-кольцо в акцентном цвете — современный сигнал «здесь печатаю» */ .f-prod:focus, .f-num:focus, .f-unit:focus, .magic-ta:focus { outline: none; border-color: var(--accent); background: var(--card); box-shadow: 0 0 0 3px var(--accent-soft); } .formrow2 { display: flex; gap: 6px; align-items: center; } .f-num { flex: 1; padding: 11px; min-width: 0; } .f-unit { width: 72px; padding: 11px; text-align: center; min-width: 0; } .formrow2 .del { background: none; border: none; color: var(--red); font-size: 18px; padding: 4px 6px; } /* нумерация позиций + компактный дропдаун (товар/единица) */ .prod-line { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .rownum { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .combo { position: relative; flex: 1; min-width: 0; } .combo .f-prod { margin-bottom: 0; } .combo-unit { flex: 0 0 84px; } .combo-unit .f-unit { width: 100%; padding-left: 8px; padding-right: 8px; } .combo-list { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; max-height: 176px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-field); box-shadow: var(--shadow-lg); } .combo-list-unit { left: auto; right: 0; width: 120px; } .combo-opt { padding: 12px 14px; font-size: 15px; border-bottom: 1px solid var(--sep); } .combo-opt:last-child { border-bottom: none; } .combo-opt:active { background: var(--accent-soft); } .combo-opt.u-mass { color: var(--red); font-weight: 600; } .combo-opt.u-vol { color: var(--green); font-weight: 600; } .combo-opt.u-count { color: var(--text); } .combo-opt.u-custom { color: var(--accent); font-weight: 600; } /* «умный ввод»: текст → разбор в позиции */ .magic-box { padding: 12px; margin-bottom: 10px; } .magic-ta { width: 100%; resize: none; font-family: inherit; line-height: 1.4; margin-bottom: 8px; border: 1px solid var(--border); border-radius: var(--r-field); padding: 12px; background: var(--bg-elev); color: var(--text); font-size: 15px; } .magic-btn { width: 100%; color: var(--accent); border-color: var(--accent); font-weight: 700; background: var(--accent-soft); } .total-line { text-align: right; font-size: 16px; margin: 14px 2px; color: var(--hint); } .total-line b { color: var(--text); font-size: 22px; letter-spacing: -0.4px; } /* — тосты / модалки / оверлеи — */ .toast { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); background: rgba(15, 27, 36, 0.94); color: #fff; padding: 12px 20px; border-radius: 999px; font-size: 14px; font-weight: 500; z-index: 50; max-width: 90%; text-align: center; box-shadow: var(--shadow-lg); animation: toastin .2s ease; } /* анимируем только прозрачность — transform занят центровкой translateX(-50%) */ @keyframes toastin { from { opacity: 0; } to { opacity: 1; } } .modal-overlay { position: fixed; inset: 0; z-index: 70; background: rgba(15, 27, 36, 0.55); display: flex; align-items: center; justify-content: center; padding: 20px; animation: fadein .18s ease; } @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } .modal { background: var(--card); color: var(--text); border-radius: 20px; padding: 20px; width: 100%; max-width: 360px; box-shadow: var(--shadow-lg); animation: modalin .22s cubic-bezier(.2, .8, .2, 1); } @keyframes modalin { from { opacity: 0; transform: translateY(16px) scale(.97); } to { opacity: 1; transform: none; } } .modal .card-title { font-size: 17px; margin-bottom: 12px; text-transform: none; letter-spacing: 0; } /* — хаб «Ещё», кнопка назад, ответ ИИ — */ .qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .qa { border: 1px solid var(--sep); border-radius: 16px; background: var(--card); color: var(--text); padding: 14px 6px; font-size: 12px; font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); /* grid-ячейка по умолчанию min-width:auto и НЕ сжимается уже самого длинного слова в плитке — длинный однословный заголовок («Себестоимость») раздувал колонку и ломал ширину всей страницы. min-width:0 разрешает колонке ужаться до 1fr, перенос слова — ниже в .qa-label. */ min-width: 0; } .qa:active { background: var(--accent-soft); border-color: var(--accent); } /* иконка плитки */ .qa .qa-icon { font-size: 24px; } /* название — жирное, это главный текст */ .qa .qa-label { font-size: 12px; font-weight: 700; text-align: center; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; } /* подсказка — тихая, одна строка с обрезкой; заметно мельче и бледнее названия */ .qa .qa-hint { font-size: 11px; font-weight: 400; color: var(--hint); opacity: 0.8; text-align: center; line-height: 1.2; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hdr-back { background: none; border: none; color: var(--accent); font-size: 26px; line-height: 1; padding: 0 8px 0 0; cursor: pointer; vertical-align: middle; } .answer { white-space: pre-wrap; line-height: 1.55; font-size: 15px; } .toggle { border: 1px solid var(--border); border-radius: 999px; padding: 5px 18px; background: var(--card); color: var(--hint); font-size: 13px; font-weight: 600; cursor: pointer; } .toggle.on { background: var(--green); color: #fff; border-color: var(--green); } /* оверлей-превью картинки (ценники/прайс/чек) — поверх всего, тап по фону закрывает */ .img-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(15, 27, 36, 0.78); display: flex; align-items: center; justify-content: center; padding: 16px; animation: fadein .18s ease; } .img-box { background: var(--card); border-radius: 16px; padding: 12px; max-width: 96%; max-height: 92%; overflow: auto; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow-lg); } .img-box img { max-width: 100%; height: auto; border-radius: 8px; background: #fff; } .img-actions { display: flex; gap: 8px; justify-content: center; } /* Урожайный календарь: секция «что созревает по месяцам» на экране Праздники */ .harvest-section { display: flex; flex-direction: column; gap: 20px; } .harvest-month { display: flex; flex-direction: column; gap: 8px; } .harvest-month + .harvest-month { padding-top: 16px; border-top: 1px solid var(--border); } .harvest-month-hdr { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; color: var(--hint); } .harvest-month.current .harvest-month-hdr { color: var(--accent); } .harvest-month-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--hint); flex-shrink: 0; } .harvest-month.current .harvest-month-dot { background: var(--accent); border-color: var(--accent); } .harvest-badge { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; background: var(--accent-soft); color: var(--accent); border-radius: 20px; padding: 2px 8px; } .harvest-items { display: flex; flex-direction: column; gap: 6px; padding-left: 18px; } .harvest-row { display: flex; align-items: flex-start; gap: 10px; } .harvest-emoji { font-size: 20px; line-height: 1.2; flex-shrink: 0; width: 24px; text-align: center; } .harvest-info { display: flex; flex-direction: column; gap: 1px; } .harvest-name { font-size: 14px; font-weight: 600; color: var(--text); } .harvest-tip { font-size: 12px; color: var(--hint); line-height: 1.3; } /* Информационный баннер в верхней части каждого экрана (ScreenInfo компонент). Левая цветная полоска — бренд-акцент, текст внутри иерархичен: описание → пример → источник. */ .screen-info { background: var(--card); border-radius: var(--r-card); padding: 14px 16px; margin-bottom: 12px; border-left: 3px solid var(--accent); box-shadow: var(--shadow-sm); } .screen-info-body { display: flex; gap: 12px; align-items: flex-start; } .screen-info-ico { font-size: 26px; flex-shrink: 0; line-height: 1.2; margin-top: 1px; } .screen-info-text { flex: 1; } .screen-info-desc { font-size: 13px; color: var(--text); line-height: 1.45; } .screen-info-ex { font-size: 12px; color: var(--accent); margin-top: 5px; font-weight: 600; line-height: 1.4; } .screen-info-src { font-size: 11px; color: var(--hint); margin-top: 9px; border-top: 1px solid var(--sep); padding-top: 7px; line-height: 1.4; opacity: 0.85; } /* Уважение к системной настройке «уменьшить движение»: гасим все анимации (включая псевдоэлементы — их `*` не ловит, поэтому перечисляем спиннер/точки/герой явно). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after, .view, .view > .card, .modal, .toast, .card.hero, .splash, .splash-logo, .splash-dots span, .loading::before, .pop { animation: none !important; transition: none !important; } }