/* ═══════════════════════════════════════════════════════════════════════ Оформление LUMI для страниц-расчётов (/human-design/, /numerologia/, /astrologia/, /bazi/, /matrix-destiny/) Зачем этот файл. Страницы жили своей палитрой: холодный графит и сиреневый акцент, четыре темы со своими именами. Приложение на vatma.ru — тёплая сливовая тёмная и бумажная светлая, акцент розовое золото и терракота. Получались два разных сайта под одним адресом. Как это сделано. Стили этих страниц с самого начала написаны через переменные (--bg, --text, --accent и так далее) — это большая удача: значит перекрасить их можно, не трогая ни одного правила. Здесь мы объявляем те же переменные заново, беря значения из палитры приложения (css/core/tokens.css). Палитра сама переключается между светлой и тёмной — значит и страницы переключаются вместе с ней, и добавлять сюда второй набор цветов не нужно. ЕДИНСТВЕННОЕ место, где страницы-расчёты получают свои цвета. Меняется палитра приложения — меняются и они. Разъехаться не могут. Про :root:root. Повтор не опечатка. В astrologia/style.css цвета объявлены в блоках :root[data-theme="dark"] и [data-theme="light"] — такой селектор «весит» больше обычного :root и перебил бы нас. Повтор уравнивает вес, а этот файл подключается последним и потому выигрывает. Не самый красивый приём, но честный: альтернатива — расставлять !important, а это как раз то, от чего мы уходим. ═══════════════════════════════════════════════════════════════════════ */ :root:root { /* ── Основа ── */ --bg: var(--lumi-bg); /* фон страницы */ --surface: var(--lumi-bg-elev); /* поднятые блоки: карточки, формы */ --hover: var(--lumi-bg-sunken); /* подсветка строки под курсором */ --tile: var(--lumi-card); /* плитки */ --tile2: var(--lumi-bg-sunken); /* плитки второго уровня */ /* ── Линии ── */ --border: var(--lumi-border); --border-soft: var(--lumi-border-soft); /* ── Текст ── */ --text: var(--lumi-text); /* основной */ --muted: var(--lumi-text-2); /* подписи, пояснения */ --sec: var(--lumi-text-2); /* второстепенный — то же самое */ --dim: var(--lumi-text-3); /* самый тихий */ /* ── Акцент ── */ --accent: var(--lumi-accent); --accent-h: var(--lumi-accent-strong); --accent-hover: var(--lumi-accent-strong); --accent-soft: var(--lumi-accent-soft); /* Надпись на насыщенной акцентной заливке: переворачивается вместе с темой, иначе в одной из тем сливается. */ --on-accent: var(--lumi-on-accent-strong); /* ── Шрифт ────────────────────────────────────────────────────────── Одно объявление на все страницы. Раньше шрифт задавался в пятнадцати местах, и русская «Дизайн человека» уезжала в засечный Marcellus с Cormorant Garamond, а все остальные оставались на системном. По решению владельца — везде Inter, тот же, что в приложении. */ --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* ── Состояния ── */ --err: var(--lumi-danger); /* --shadow и --overlay намеренно НЕ трогаем: в calc.css это цвет (пишется как «0 8px 24px var(--shadow)»), а в astrologia/style.css — готовое значение тени целиком. Один и тот же по имени, разный по смыслу; свести их одной строкой нельзя, а ломать нельзя тем более. Оставляем каждому файлу своё. */ } /* Фон страницы задаём на , а оставляем ПРОЗРАЧНЫМ. Это не придирка, а исправление собственной ошибки. Сначала я написал фон и там, и там — и погасил фоновый слой с видео и частицами (.hd-bgfx), который есть на всех пяти страницах. Механика такая: пока у фона нет, браузер поднимает фон на холст, и сам блок остаётся непокрашенным — поэтому слой, лежащий «под» содержимым (z-index:-1), видно. Как только у появляется свой фон, подъём прекращается: начинает красить свой прямоугольник и закрывает им этот слой целиком. Поймано не рассуждением, а проверкой: собранная копия страницы в браузере без окна показала, что видео пропало в ОБЕИХ темах. Держим правило: цвет холста — на , ничем не красим. */ html:root:root { background: var(--lumi-bg); } /* Раньше держали прозрачным нарочно: под ним лежал космический слой, и любая заливка его гасила. Слоя больше нет — фон теперь такой же ровный, как в приложении, — поэтому красим явно. Прозрачный body на странице без своего слоя означает «возьми цвет откуда-нибудь», а это ровно тот случай, когда однажды возьмётся не оттуда. */ body { background: var(--lumi-bg); color: var(--lumi-text); } /* ── Заголовок страницы: цвет из палитры, обе темы ───────────────────── В calc.css заголовок, лид и хлебные крошки принудительно светлые (#F4F3EF) с тёмной тенью. Это был единственный способ читать их поверх космического видео: яркость картинки заранее неизвестна. Видео снято, фон теперь ровный из палитры — и приём стал вредным. Замер сразу после снятия фона показал контраст 1.0 в светлой теме: почти белые буквы на почти белом. Возвращаем палитру и снимаем тень. Варианты темы перечислены поимённо не для красоты: в calc.css правило написано через [data-theme], и короткая запись его не перебьёт. */ header h1, :root[data-theme="light"] header h1, :root[data-theme="atma-light"] header h1, :root[data-theme="dark"] header h1 { color: var(--lumi-text) !important; text-shadow: none !important; } header p, .crumbs, .crumbs a, :root[data-theme="light"] header p, :root[data-theme="light"] .crumbs, :root[data-theme="light"] .crumbs a, :root[data-theme="atma-light"] header p, :root[data-theme="atma-light"] .crumbs, :root[data-theme="atma-light"] .crumbs a, :root[data-theme="dark"] header p, :root[data-theme="dark"] .crumbs, :root[data-theme="dark"] .crumbs a { color: var(--lumi-text-2) !important; text-shadow: none !important; } /* Ссылка в крошках — акцентом, как все ссылки на сайте. */ .crumbs a:hover { color: var(--lumi-accent) !important; } /* ── Светлая тема ────────────────────────────────────────────────────── Здесь стоял костыль: космическое видео лежало во весь экран и в светлой теме давало тёмный текст на тёмном. Его приглушали до 12% прозрачности, а заголовку принудительно навязывали цвет. Слой снят целиком, фон теперь ровный из палитры — костыль стал не нужен и убран. Если светлая тема где-то поедет, чинить надо палитру, а не заголовки поимённо. */ /* Шрифт применяем и к самой странице, и к элементам управления: поля и кнопки шрифт от страницы не наследуют, им нужно сказать отдельно — иначе форма набрана системным, а текст вокруг Inter. */ body, button, input, select, textarea, .calc, .calc-nav, .calc-bottomnav { font-family: var(--font); } /* ── Заливка кнопок ──────────────────────────────────────────────────── Проверка читаемости показала: у главной кнопки и активной вкладки в светлой теме контраст 3.1 при норме 4.5 — надпись читается плохо. Причина: на этих страницах одна переменная --accent отвечает и за цвет ссылок, и за заливку кнопок. Ссылке нужен насыщенный цвет (терракота), а кнопке — светлая подложка с тёмной надписью, как в приложении. Одним значением обе задачи не решить. Поэтому заливку задаём кнопкам отдельно: подложка --lumi-accent-fill, надпись --lumi-on-accent. Ровно та пара, что даёт в приложении контраст 12:1. Ссылки при этом остаются насыщенными. */ .calc__submit, .calc__buy, .calc .calc__tabs .calc__tab.is-active, /* вес как у правила в calc.css: там селектор из трёх частей */ .calc__tab-badge, .cta { background: var(--lumi-accent-fill); color: var(--lumi-on-accent); border-color: var(--lumi-accent-fill); } .calc__submit:hover, .calc__buy:hover, .cta:hover { background: var(--lumi-accent-strong); color: var(--lumi-on-accent); } /* ═══ ФОРМА: те же правила, что в приложении ═══════════════════════════ Цвет — половина дела. Второй половиной оставались форма и размеры: у приложения кнопки и поля — «таблетки» со скруглением 999, карточки со скруглением 28 и мягкой тенью, у страниц расчётов было 12, 10 и 16 без тени. Числа сняты обмером живых страниц, не на глаз: кнопка приложение 999 / высота 54 / поля по 22 было 12 / 46 / 16 поле приложение 999 / высота 50 / поля по 18 было 10 / 46 / 12 карточка приложение 28 + тень было 16 без тени подпись приложение 13.5 пт, насыщенность 600 было 13 пт, 400 Держим их одним набором здесь — это и есть «единый источник правды» не только по цвету, но и по форме. ══════════════════════════════════ */ /* ── Кнопки ── */ .calc__submit, .calc__buy, .cta, .calc button.calc__submit { min-height: 54px; padding: 0 22px; border-radius: 999px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; border: 0; } /* ── Второстепенные кнопки: «Редактировать», «Удалить» ──────────── Эти две кнопки остались от старого оформления: скругление 12, высота 46, серая рамка, заливка --surface. Рядом с «таблеткой» 999/54 это читалось как кнопка из другой системы — владелец так и сказал. Берём не новый вид, а тот, что уже есть в приложении для второй по важности кнопки (.pwa-btn-secondary, .modal-sheet .btn.secondary): прозрачная подложка, рамка 1.5 по --lumi-border, надпись --lumi-text-2. Отличие одно — высота: в приложении такие кнопки стоят 48, но здесь они в одном ряду со «Скачать PDF» (54). Разная высота в одной строке видна сразу, поэтому равняем на соседа. ────────────────────── */ .calc__edit { min-height: 54px; padding: 0 22px; border-radius: 999px; background: transparent; border: 1.5px solid var(--lumi-border); color: var(--lumi-text-2); font-family: inherit; font-size: 15.5px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; } .calc__edit:hover { background: var(--lumi-bg-elev); border-color: var(--lumi-accent); color: var(--lumi-text); } /* «Удалить» — действие необратимое, поэтому на наведении краснеет. Красный берём из общего набора (--lumi-danger), не свой. */ .calc__delcard:hover { background: transparent; border-color: var(--lumi-danger); color: var(--lumi-danger); } .calc__delcard:disabled { opacity: .5; cursor: default; } /* ── Поля ввода ── */ .calc__field input, .calc input[type="text"], .calc input[type="date"], .calc input[type="time"], .calc input[type="email"], .calc input[type="number"], .calc select { min-height: 50px; padding: 0 18px; border-radius: 999px; font-size: 15px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-sunken); color: var(--lumi-text); } .calc__field input:focus, .calc select:focus { border-color: var(--lumi-accent); outline: none; } /* ── Подписи над полями ── */ .calc__field > span, .calc__field label { font-size: 13.5px; font-weight: 600; color: var(--lumi-text-2); } /* ── Карточки ── */ .calc, .calc__card, .card { border-radius: 28px; padding: 20px 16px; /* Рамка карточек в приложении мягче обычной — обмер показал --lumi-border-soft, а не --lumi-border. Разница небольшая, но именно из таких мелочей и складывается «другой дизайн». */ border: 1px solid var(--lumi-border-soft); background: var(--lumi-card); box-shadow: var(--lumi-shadow); } /* ── Вкладки: тоже таблетки ── */ .calc .calc__tabs .calc__tab { border-radius: 999px; min-height: 38px; padding: 0 14px; font-weight: 600; } /* ═══ НИЖНЕЕ МЕНЮ: как в приложении ═══════════════════════════════════ Само меню страниц уже было на переменных, поэтому цвет подтянулся. Оставались три отличия и одна ошибка. Ошибка — та же, что я чинил в приложении: под полоску возврата на айфоне здесь отводилось «6 пикселей ПЛЮС полоска». Место считается дважды: свои 6 и системные 34. Отдаём это одной переменной --safe-bottom, как в приложении. Отличия: линия сверху у приложения мягче обычной рамки (--lumi-nav-line), подпись мельче (10 пунктов против 11) и активный пункт красится акцентом. ══════════════════════════════ */ .calc__bottomnav { border-top: 1px solid var(--lumi-nav-line); padding-bottom: var(--safe-bottom); box-shadow: none; } .calc__navbtn { font-size: 10px; color: var(--lumi-text-3); } .calc__navbtn.is-active { color: var(--lumi-accent); } .calc__navbtn:active { background: var(--lumi-bg-sunken); } /* ═══════════════════════════════════════════════════════════════════════ Верхняя полоса — как в приложении ═══════════════════════════════════════════════════════════════════════ Владелец показал два снимка: на страницах расчётов полоса своя, а должна быть как на vatma.ru. Числа сняты обмером живого приложения, не на глаз: полоса высота 44, без фона и без нижней черты язык две кнопки 42×34, скругление 999, 12.5 пт / 600 выбранная — заливка accent-fill, тёмная надпись круглые кнопки 40×40, круг, фон bg-elev, рамка 1 px border Здесь повторяются ровно они. */ .calc-nav { height: 44px; gap: 8px; /* ПОДЛОЖКА ОБЯЗАТЕЛЬНА. Здесь я ошибся: снял у приложения «фон прозрачный» и повторил буквально. Но в приложении полоса лежит на непрозрачной оболочке, а тут — «липкая» поверх прокручивающегося текста, и под ней ещё прозрачный body с космическим фоном. Заголовок страницы проезжал сквозь полосу и мешался с кнопками. Правило на будущее: снятое у образца значение цвета ничего не значит без того, что за ним лежит. Проверять надо пару. */ background: var(--lumi-bg); border-bottom: 1px solid var(--lumi-nav-line, var(--lumi-border-soft)); /* Лёгкое размытие: край полосы читается, но космос под ней не пропадает совсем. */ -webkit-backdrop-filter: saturate(1.1) blur(10px); backdrop-filter: saturate(1.1) blur(10px); } .calc-nav__actions { display: flex; align-items: center; gap: 6px; } /* ── Переключатель языка таблеткой ── */ .calc-nav__langs { display: inline-flex; align-items: center; border: 1px solid var(--lumi-border); border-radius: 999px; padding: 2px; background: var(--lumi-bg-elev); } .calc-nav__langbtn { min-width: 42px; height: 34px; padding: 4px 8px; border: 0; border-radius: 999px; background: transparent; color: var(--lumi-text); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .calc-nav__langbtn.is-active { background: var(--lumi-accent-fill); color: var(--lumi-on-accent); } /* ── Круглые кнопки ── */ .calc-nav__icon, .calc-nav__round { width: 40px; height: 40px; border-radius: 50%; background: var(--lumi-bg-elev); border: 1px solid var(--lumi-border); color: var(--lumi-text); font-family: inherit; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .calc-nav__icon:hover, .calc-nav__round:hover { background: var(--lumi-bg-sunken); } /* ── Меню под гамбургером ── */ /* Профиль в меню трёх линий */ .calc-nav__who { padding: 2px 14px 8px; font-size: 13.5px; font-weight: 600; color: var(--lumi-text); word-break: break-all; } /* Удаление записи — необратимо, поэтому приглушено и краснеет только на наведении: рядом с «Выйти» его легко нажать случайно. */ .calc-nav__menu button.calc-nav__danger { color: var(--lumi-text-3); } .calc-nav__menu button.calc-nav__danger:hover { color: var(--lumi-danger); background: var(--lumi-bg-sunken); } /* Сложенный список расчётов: текущая система и стрелка. */ .calc-nav__menu button.calc-nav__calcs-head { display: flex; align-items: center; gap: 10px; width: 100%; font-weight: 600; color: var(--lumi-accent); } .calc-nav__calcs-head > span { flex: 1 1 auto; min-width: 0; text-align: left; } .calc-nav__arrow { flex: 0 0 auto; color: var(--lumi-text-3); transition: transform .18s ease-out; } .calc-nav__calcs-head.is-open .calc-nav__arrow { transform: rotate(180deg); } #nav-calcs-more[hidden] { display: none; } /* Раскрытые — с отступом, чтобы видно было, что они внутри. */ #nav-calcs-more a { padding-left: 26px; } .calc-nav__menu { position: absolute; right: 12px; top: 52px; z-index: 90; min-width: 230px; background: var(--lumi-bg-elev); border: 1px solid var(--lumi-border); border-radius: 16px; box-shadow: var(--lumi-shadow, 0 8px 28px rgba(0,0,0,.18)); padding: 6px; } .calc-nav__menu[hidden] { display: none; } .calc-nav__menu a, .calc-nav__menu button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 11px 12px; border: 0; border-radius: 12px; background: transparent; color: var(--lumi-text); font-family: inherit; font-size: 14.5px; font-weight: 500; text-decoration: none; cursor: pointer; } .calc-nav__menu a:hover, .calc-nav__menu button:hover { background: var(--lumi-bg-sunken); } .calc-nav__menu a.is-current { color: var(--lumi-accent); font-weight: 600; } .calc-nav__menu hr { border: 0; border-top: 1px solid var(--lumi-border-soft); margin: 5px 8px; } .calc-nav__menu-title { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--lumi-text-3); font-weight: 600; padding: 8px 12px 4px; } /* ═══════════════════════════════════════════════════════════════════════ Зелёное поле транзита в карте ═══════════════════════════════════════════════════════════════════════ Зелёный берём тот же, каким на бодиграфе рисуются транзитные ворота (#22b35e в calc.css) — чтобы поле и линии читались как одно целое. Подложка и текст — из палитры, чтобы работало в обеих темах. */ /* Поле стоит ПОД коробкой со схемой, отдельным блоком (см. пояснение в calc-transit-card.js). Свой отступ сверху не нужен: у коробки уже есть нижний, а #calc-result — сетка, где отступы не слипаются. */ .tc-box { margin: 0; padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(34, 179, 94, .38); background: rgba(34, 179, 94, .08); color: var(--lumi-text); font-size: 14.5px; line-height: 1.55; } .tc-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .tc-head b { font-size: 15.5px; font-weight: 700; } .tc-dot { width: 9px; height: 9px; border-radius: 50%; background: #22b35e; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(34, 179, 94, .18); } /* Дата, подпись «Каналы» и планета стояли на самом тусклом цвете палитры. На новой подложке это давало 4.49 — на волос ниже нормы 4.5, а буквы там мелкие (11.5-12.5). Переведены на второй по тусклости: стало 7.40, и роль «второстепенной подписи» сохранилась за счёт размера и насыщенности, а не за счёт нечитаемого цвета. */ .tc-date { margin-left: auto; font-size: 12.5px; color: var(--lumi-text-2); } .tc-sum { margin: 0 0 10px; color: var(--lumi-text-2); } .tc-lights { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 10px; } .tc-lights span { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--lumi-bg-elev); border: 1px solid var(--lumi-border-soft); color: var(--lumi-text-2); } .tc-chans-t { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--lumi-text-2); font-weight: 600; margin-bottom: 6px; } .tc-chans ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; } .tc-chans li { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } /* Зелёный номер канала в светлой теме давал 3.68 при норме 4.5 — тоже ниже, просто не так заметно, как остальное. Затемнён до 4.69. */ .tc-chans li b { color: #157F42; font-weight: 700; } :root[data-theme="dark"] .tc-chans li b, :root:not([data-theme="light"]) .tc-chans li b { color: #4ed88a; } .tc-planet { margin-left: auto; font-size: 12.5px; color: var(--lumi-text-2); } .tc-none { margin: 0; color: var(--lumi-text-2); } .tc-wait { color: var(--lumi-text-2); font-size: 13.5px; } /* ═══ СВЕТЛЫЙ ОСТРОВОК: коробка со схемой тела ══════════════ Коробка схемы (.calc__bg) нарочно светлая в обеих темах — иначе не читается сам бодиграф. А всё, что внутри неё, до сих пор брало цвета из темы страницы. В тёмной теме это давало светлое на светлом: кнопка «Открыть интерактивный режим» 1.93 (норма 4.5) квадратик «определённый» в легенде ~1.9 (норма 3) Первое владелец увидел на снимке, второе нашлось рядом. Лечим не каждую надпись отдельно, а разом: объявляем внутри коробки светлые значения переменных. Тогда и всё, что попадёт сюда позже, окажется читаемым само. Значения — ровно те, что в tokens.css у :root[data-theme="light"]; если палитру там поменяют, сверить надо и здесь. */ .calc__bg { --lumi-accent: #B84A45; --lumi-accent-strong: #98342F; --lumi-text: #2A1D1B; --lumi-text-2: #5C4844; --lumi-text-3: #7A6460; /* Старые имена приходится подменять отдельно. Причина не в лени: --accent объявлен как var(--lumi-accent) на :root, а переменная вычисляется там же, где объявлена. Подмена --lumi-accent глубже до неё уже не доходит — проверено замером: кнопка вылечилась, а квадратик легенды остался 1.93. Внутри коробки старыми именами пользуются двое: квадратик «определённый» в легенде и заливка определённых центров на самой схеме. Второе заметнее: в тёмной теме центры заливались бледно- розовым по белому и почти не читались. Теперь схема выглядит одинаково в обеих темах — как и должна, коробка ведь всегда светлая. */ --accent: #B84A45; --accent-h: #98342F; --accent-hover: #98342F; --text: #2A1D1B; --muted: #5C4844; } /* ── Кнопка «интерактивный режим» и прочее из схемы тела ──────────────── В calc-bodygraph-interactive.css сиреневый вписан числом, мимо переменных, — потому кнопка осталась чужого цвета посреди перекрашенной страницы. Здесь переводим её на палитру; сам файл схемы не трогаем, чтобы не задеть саму схему. */ .calc__bg-interactive { color: var(--lumi-accent) !important; border-color: var(--lumi-accent) !important; background: transparent !important; } .calc__bg-interactive:hover { background: var(--lumi-accent-soft, rgba(184,74,69,.08)) !important; } /* ── Заголовки групп в выборе ячейки ────────────────────────────────── */ .calc__mini-picker .cc-group { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--lumi-text-3); font-weight: 700; padding: 9px 12px 4px; cursor: default; } .calc__mini-picker .cc-group:not(:first-child) { border-top: 1px solid var(--lumi-border-soft); margin-top: 4px; } /* Незаметная кнопка «выбрать другой» рядом с подписью совместимости */ .cc-swap { border: 0; background: none; padding: 0; color: var(--lumi-accent); font-family: inherit; font-size: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; } /* Две кнопки в ряд в окне ввода: «Отмена» и «Добавить». Уйти назад должно быть так же просто, как пойти вперёд. */ .cp-btns { display: flex; gap: 8px; } .cp-btns .calc__submit { flex: 1 1 auto; } .cp-btns .cp-cancel { flex: 0 0 auto; } .cp-cancel-form { width: 100%; margin-top: 8px; } /* Старая кнопка «Добавить ещё одну карту» в ряду действий убрана: её заменил «плюс» в списке карт, и две кнопки об одном сбивали. Прячем стилем, а не правкой calc-cards.js — там на ней обработчик, и вынимать её из разметки значило бы трогать проверенный файл ради косметики. */ .calc__addcard { display: none !important; } /* Кнопка удаления учётной записи. Действие необратимое, поэтому вид у неё сдержанный, а не зовущий: рамка вместо заливки, приглушённая надпись. Краснеет только на наведении — чтобы человек понял, что это опасное действие, но не нажал его случайно, перепутав с «Выйти». */ /* ═══ ВЕС ПРОТИВ ШИРОКОГО ПРАВИЛА ОКНА ══════════════════════════════ В calc.css есть .calc__modal-box button с заливкой акцентом — оно красит ЛЮБУЮ кнопку внутри окна. Вес (класс + тег) выше, чем у правил по классу, поэтому строки покупок выходили розовыми кнопками, а «Удалить учётную запись» — розовой залитой вместо приглушённой. Убрать то правило нельзя: на нём держатся кнопки других окон. Поэтому здесь перебиваем его равным весом, поимённо — только для тех кнопок, которым заливка не нужна. ══════════════════════════ */ .calc__modal-box button.calc__buys-item, .calc__modal-box button.calc__buys-exp { background: var(--lumi-bg-elev); color: var(--lumi-text); border: 1px solid var(--lumi-border); border-radius: 14px; font-weight: 500; } .calc__modal-box button.calc__buys-item:hover { border-color: var(--lumi-accent); background: var(--lumi-bg-sunken); } .calc__modal-box button.calc__acct-del { background: transparent; color: var(--lumi-text-3); border: 1.5px solid var(--lumi-border); border-radius: 999px; } .calc__modal-box button.calc__acct-del:hover { border-color: var(--lumi-danger); color: var(--lumi-danger); background: transparent; } /* Счётчик карт и стрелка — чтобы их было видно, а не угадывать. */ .calc__buys-count { background: var(--lumi-accent-fill) !important; color: var(--lumi-on-accent) !important; font-style: normal; font-weight: 700; font-size: 12px; } .calc__buys-arrow { color: var(--lumi-text-3); } /* Тариф в предложении: цена слева, «Купить» справа. */ .calc__buys-plan { display: grid; gap: 4px; padding: 12px 0; } .calc__buys-plan + .calc__buys-plan { border-top: 1px solid var(--lumi-border-soft); } .calc__buys-plan-top { display: flex; align-items: center; gap: 12px; } .calc__buys-plan-top .calc__buys-price { flex: 1 1 auto; } /* Только форма. Цвет НЕ задаём: кнопки внутри окна красит правило .calc__modal-box button из calc.css — в тот же красный с белым, что у «Отправить код» и «Перейти на vatma.ru». Своя покраска тут уже один раз дала бледно-розовую кнопку среди красных. */ .calc__modal-box button.calc__buys-buy { flex: 0 0 auto; min-height: 42px; padding: 0 20px; border-radius: 999px; font-size: 14.5px; width: auto; } /* Предложение, когда ничего не куплено */ .calc__buys-offer { display: grid; gap: 6px; padding: 14px 16px; border-radius: 18px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-elev); } .calc__buys-offer b { font-size: 15px; } .calc__buys-offer span { font-size: 14px; color: var(--lumi-text-2); } .calc__buys-offer .calc__buys-price { font-size: 17px; font-weight: 700; color: var(--lumi-accent); } .calc__acct-del { width: 100%; min-height: 48px; padding: 0 18px; margin-top: 8px; border-radius: 999px; background: transparent; border: 1.5px solid var(--lumi-border); color: var(--lumi-text-3); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; } .calc__acct-del:hover { border-color: var(--lumi-danger); color: var(--lumi-danger); } .calc__acct-del:disabled { opacity: .5; cursor: default; } /* ═══ СВОИ КАРТЫ В «МОЁМ РАСЧЁТЕ» ════════════════ Было рядом вкладок «Карта 1 · дата». Владелец просит список: имя, дата и «Открыть», а открытая карта в списке не показывается — она и есть то, что человек видит ниже. Строки списка — те же кнопки, что рисует calc-cards.js: их не пересоздавали, чтобы не потерять обработчик нажатия. Поэтому здесь переопределяем вид .calc__card-tab внутри списка, а не свой класс. ══════════════════════════════════════ */ .calc__cards.cp-list { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; border: 0; background: none; } .cp-head { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lumi-text-3); } .calc__cards.cp-list .calc__card-tab { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 15px; border-radius: 999px; cursor: pointer; border: 1px solid var(--lumi-border-soft); background: var(--lumi-bg-elev); color: var(--lumi-text); font-family: inherit; font-size: 14.5px; text-align: left; } .calc__cards.cp-list .calc__card-tab:hover { border-color: var(--lumi-accent) } .calc__cards.cp-list .calc__card-tab[hidden] { display: none } .cp-row__v { display: grid; gap: 1px; min-width: 0 } .cp-row__v b { font-size: 14.5px; font-weight: 600 } .cp-row__v span { font-size: 12.5px; color: var(--lumi-text-2) } .cp-row__go { margin-left: auto; flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--lumi-accent); } /* Кнопка «плюс». Не гаснет на пределе — нажатие объясняет, а не молчит: на телефоне подсказки при наведении не существует. */ .cp-add { width: 100%; min-height: 48px; padding: 0 18px; margin-top: 2px; border-radius: 999px; border: 1.5px dashed var(--lumi-accent); background: transparent; color: var(--lumi-accent); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; } .cp-add::before { content: "+ "; font-weight: 700 } .cp-add:hover { background: var(--lumi-accent-soft, rgba(184, 74, 69, .07)) } .cp-add--full { border-color: var(--lumi-border); color: var(--lumi-text-3) } /* ═══ СОВМЕСТИМОСТЬ С ГРУППОЙ ══════════════ Человек А выбирается из готовых карт, людей добавляют кнопкой. Поля внутри окна берут готовые классы главной формы (.calc__field, .calc__submit) — потому окно и выглядит «прям как на vatma.ru», а не похоже на неё. ══════════════════════ */ /* Служебный атрибут «спрятан» на этих блоках не работал. Причина: calc.css задаёт .calc__pair и .calc__mini свой display (grid), а правило оформления сильнее встроенного в браузер [hidden]{display:none}. Поэтому старые поля ввода оставались на экране рядом с новым блоком выбора — владелец это и увидел. Заодно чинится давняя мелочь: calc-compat.js прячет человека А тем же способом, когда человек вошёл в свою карту, — и тоже безуспешно. Возвращаем атрибуту силу в обоих местах. */ .calc__pair[hidden], .calc__mini[hidden] { display: none !important; } .cg { display: grid; gap: 14px; } /* Человек А */ .cg-me { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-radius: 20px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-elev); } .cg-me--empty { border-style: dashed; } .cg-me__t { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lumi-text-3); flex: 0 0 100%; } .cg-me__v { display: grid; gap: 2px; min-width: 0; } .cg-me__v b { font-size: 15.5px; font-weight: 600; } .cg-me__v span { font-size: 13.5px; color: var(--lumi-text-2); } .cg-me__v--none { font-size: 14.5px; color: var(--lumi-text-3); } .cg-me__pick { margin-left: auto; min-height: 38px; padding: 0 16px; border-radius: 999px; background: transparent; border: 1.5px solid var(--lumi-border); color: var(--lumi-text-2); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .cg-me__pick:hover { border-color: var(--lumi-accent); color: var(--lumi-text); } /* Список своих карт — раскрывается под строкой */ .cg-pickbox { flex: 0 0 100%; display: grid; gap: 6px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--lumi-border-soft); } .cg-pickbox__i { display: grid; gap: 2px; text-align: left; cursor: pointer; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-sunken); color: var(--lumi-text); font-family: inherit; } .cg-pickbox__i:hover { border-color: var(--lumi-accent); } .cg-pickbox__i b { font-size: 14.5px; font-weight: 600; } .cg-pickbox__i span { font-size: 13px; color: var(--lumi-text-2); } .cg-pickbox__e { font-size: 14px; color: var(--lumi-text-3); } /* ── Закрытая часть парного разбора ──────────────────────────────── Базовая совместимость открыта всем, сравнение характеров — после оплаты. Блок должен читаться как продолжение разбора, а не как сбой: те же скругление, рамка и подложка, что у карточек рядом. */ .cmp-lock { padding: 16px 18px; border-radius: 20px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-elev); } .cmp-lock h4 { margin: 0; } .cmp-lock__lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--lumi-text-2); } .cmp-lock__n { margin: 0; font-size: 13px; color: var(--lumi-text-3); } .cmp-lock__n b { font-size: 15px; color: var(--lumi-text); } .cmp-lock .calc__buy { margin-top: 4px; } /* Кнопка «показать пароль» — в палитре приложения. */ .calc__modal-box button.cs-eye { background: none; color: var(--lumi-text-3); } .calc__modal-box button.cs-eye:hover { background: var(--lumi-bg-sunken); color: var(--lumi-text); } /* Образец платного текста — в палитре приложения. */ .calc__peek-card { border-radius: 20px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-elev); } .calc__peek-card p { color: var(--lumi-text-2); } .calc__peek-tail { color: var(--lumi-text-3) !important; } .calc__peek-fade { background: linear-gradient(to bottom, rgba(0,0,0,0), var(--lumi-bg-elev)); } .calc__peek-note { color: var(--lumi-text-3); } /* Форма отзыва — в палитре приложения. */ .calc__review { border-radius: 20px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-elev); } .calc__review textarea { border-radius: 16px; border-color: var(--lumi-border); background: var(--lumi-bg); color: var(--lumi-text); } .calc__review-star { color: var(--lumi-border-soft); } .calc__review-star.is-on, .calc__review-star:hover { color: var(--lumi-accent); } .calc__review-word, .calc__review-hint { color: var(--lumi-text-3); } .calc__review-done { color: var(--lumi-text-2); } /* Список людей */ .cg-block { padding: 14px 16px; border-radius: 20px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-elev); } .cg-block__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .cg-block__head b { font-size: 15px; font-weight: 600; } .cg-count { margin-left: auto; font-size: 12.5px; color: var(--lumi-text-3); font-variant-numeric: tabular-nums; } .cg-list { display: grid; gap: 8px; } .cg-list:empty { display: none; } .cg-row { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--lumi-border-soft); background: var(--lumi-bg-sunken); } .cg-row__v { display: grid; gap: 1px; min-width: 0; } .cg-row__v b { font-size: 14.5px; font-weight: 600; } .cg-row__v span { font-size: 12.5px; color: var(--lumi-text-2); } .cg-row__del { margin-left: auto; width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 1px solid var(--lumi-border); background: transparent; color: var(--lumi-text-3); font-size: 17px; line-height: 1; cursor: pointer; } .cg-row__del:hover { border-color: var(--lumi-danger); color: var(--lumi-danger); } .cg-add { width: 100%; margin-top: 10px; min-height: 48px; padding: 0 18px; border-radius: 999px; border: 1.5px dashed var(--lumi-accent); background: transparent; color: var(--lumi-accent); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer; } .cg-add:hover:not(:disabled) { background: var(--lumi-accent-soft, rgba(184, 74, 69, .07)); } .cg-add:disabled { opacity: .5; cursor: default; border-color: var(--lumi-border); color: var(--lumi-text-3); } .cg-err { margin: 0; font-size: 14px; color: var(--lumi-danger); } .cg-go { width: 100%; } .cg-wait { margin: 16px 0 0; color: var(--lumi-text-2); font-size: 14.5px; } /* Окно добавления */ .cg-modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 7, 12, .62); } .cg-modal__box { position: relative; width: 100%; max-width: 460px; max-height: 92vh; overflow-y: auto; display: grid; gap: 12px; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: var(--lumi-card); color: var(--lumi-text); border: 1px solid var(--lumi-border-soft); box-shadow: var(--lumi-shadow); } @media (min-width: 560px) { .cg-modal { align-items: center; padding: 24px; } .cg-modal__box { border-radius: 28px; } } .cg-modal__t { margin: 0 30px 2px 0; font-size: 19px; font-weight: 700; } .cg-modal__x { position: absolute; top: 14px; right: 16px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--lumi-border); background: transparent; color: var(--lumi-text-2); font-size: 20px; line-height: 1; cursor: pointer; } .cg-modal__err { margin: 0; font-size: 13.5px; color: var(--lumi-danger); } /* Сохранённые люди в окне добавления и отказ по пределу */ .cg-saved { display: grid; gap: 6px; padding-bottom: 14px; margin-bottom: 2px; border-bottom: 1px solid var(--lumi-border-soft); } .cg-saved__t { font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lumi-text-3); } .cg-saved__i { display: grid; gap: 2px; text-align: left; cursor: pointer; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--lumi-border); background: var(--lumi-bg-sunken); color: var(--lumi-text); font-family: inherit; } .cg-saved__i:hover { border-color: var(--lumi-accent); } .cg-saved__i b { font-size: 14.5px; font-weight: 600; } .cg-saved__i span { font-size: 12.5px; color: var(--lumi-text-2); } .cg-modal__p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lumi-text-2); } /* Предел достигнут — кнопка живая, но приглушённая: нажатие объясняет. */ .cg-add--full { border-style: solid; border-color: var(--lumi-border); color: var(--lumi-text-3); } /* Итог */ /* Схема группы и толкование каналов */ .cg-bg { margin: 0; } .cg-bg__mount { width: 100%; display: grid; justify-items: center; } .cg-bg__leg { flex-wrap: wrap; gap: 10px 16px; } .cg-chan { border: 1px solid var(--lumi-border-soft); border-radius: 16px; background: var(--lumi-bg-elev); margin-bottom: 7px; overflow: hidden; } .cg-chan[open] { border-color: var(--lumi-border); } .cg-chan__h { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; padding: 12px 15px; cursor: pointer; font-size: 14.5px; list-style: none; } .cg-chan__h::-webkit-details-marker { display: none; } .cg-chan__h::after { content: "+"; margin-left: auto; color: var(--lumi-text-3); font-size: 17px; line-height: 1; font-weight: 400; } .cg-chan[open] .cg-chan__h::after { content: "\2212"; } .cg-chan__h b { color: var(--lumi-accent); font-weight: 700; } .cg-chan__c { font-size: 12.5px; color: var(--lumi-text-3); } .cg-chan__b { padding: 0 15px 14px; display: grid; gap: 9px; border-top: 1px solid var(--lumi-border-soft); padding-top: 12px; } .cg-chan__who { margin: 0; font-size: 13px; color: var(--lumi-text-2); padding: 8px 12px; border-radius: 12px; background: var(--lumi-bg-sunken); } .cg-chan__who b { color: var(--lumi-text); font-weight: 600; } .cg-chan__p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lumi-text-2); } .cg-chan__p b { color: var(--lumi-text); font-weight: 600; } .cg-res { margin-top: 18px; display: grid; gap: 16px; } .cg-res__head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .cg-res__head b { font-size: 18px; font-weight: 700; } .cg-res__head span { font-size: 13px; color: var(--lumi-text-3); } .cg-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); } .cg-tile { padding: 13px 15px; border-radius: 18px; border: 1px solid var(--lumi-border-soft); background: var(--lumi-bg-elev); } .cg-tile__t { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lumi-text-3); margin-bottom: 5px; } .cg-tile__v { font-size: 23px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--lumi-accent); } .cg-tile__s { margin-top: 3px; font-size: 12.5px; color: var(--lumi-text-2); } .cg-sec { display: grid; gap: 8px; } .cg-sec__t { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lumi-text-3); } /* ── Связь ветвей в Бацзы ──────────────────────────────────────────── Полоса слева: притяжение или трение. Столкновения сервер отдаёт первыми — их человек обязан прочесть. */ .cmp-line { border-left: 3px solid var(--lumi-border); } .cmp-line--harmony { border-left-color: var(--lumi-accent); } .cmp-line--clash { border-left-color: var(--lumi-danger); } .cmp-line__k { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lumi-text-3); margin-left: 6px; } .cmp-line--harmony .cmp-line__k { color: var(--lumi-accent); } .cmp-line--clash .cmp-line__k { color: var(--lumi-danger); } .cmp-card p.cmp-line__who { font-size: 12.5px; color: var(--lumi-text-3); margin-top: 2px; } /* ── Ячейка квадрата Пифагора у двоих ──────────────────────────────── Полоса слева и подпись справа от названия показывают состояние ячейки раньше, чем прочитан текст. */ .cmp-sq { border-left: 3px solid var(--lumi-border); } .cmp-sq--both { border-left-color: var(--lumi-accent); } .cmp-sq--weak { border-left-color: var(--lumi-danger); } .cmp-sq--one { border-left-color: var(--lumi-text-3); } .cmp-sq__st { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lumi-text-3); margin-left: 6px; } .cmp-sq--both .cmp-sq__st { color: var(--lumi-accent); } .cmp-sq--weak .cmp-sq__st { color: var(--lumi-danger); } /* Тот, у кого ячейка сильнее: выделяем число вместо слов — имя в прозе не склоняется, а выделение верно при любом имени. */ .cmp-sq__hold { color: var(--lumi-accent); font-weight: 700; } .cmp-card p.cmp-sq__n { font-size: 12.5px; color: var(--lumi-text-3); font-variant-numeric: tabular-nums; margin-top: 2px; } /* ── Контакт планет ────────────────────────────────────────────────── Аналог канала в дизайне человека. Полоса слева — характер контакта: его видно раньше, чем прочитан текст. */ .cmp-contact { border-left: 3px solid var(--lumi-border); } .cmp-contact--harmonious { border-left-color: var(--lumi-accent); } .cmp-contact--challenging { border-left-color: var(--lumi-danger); } .cmp-contact__nat { font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--lumi-text-3); margin-left: 6px; } .cmp-contact--harmonious .cmp-contact__nat { color: var(--lumi-accent); } .cmp-contact--challenging .cmp-contact__nat { color: var(--lumi-danger); } .cmp-card p.cmp-contact__who { font-size: 12.5px; color: var(--lumi-text-3); font-variant-numeric: tabular-nums; margin-top: 2px; } .cmp-dim { color: var(--lumi-text-3); font-weight: 400; } .cmp-more[hidden] { display: none; } .calc .cmp-more__btn, .cmp-more__btn { width: 100%; margin-top: 8px; padding: 11px 16px; border: 1.5px dashed var(--lumi-accent); border-radius: 999px; background: transparent; color: var(--lumi-accent); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .cmp-more__btn:hover { background: var(--lumi-bg-sunken); } /* ── Разбор по частям: близость, быт, сила, риск ───────────────────── Раньше в зонах пары стоял один общий совет на все 22 аркана. Теперь у каждого свой разбор — теми же частями, что у каналов в дизайне человека. */ .cmp-det { margin-top: 9px; } .cmp-det__t { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--lumi-text-3); margin-bottom: 2px; } .cmp-card .cmp-det p { font-size: 13.5px; color: var(--lumi-text-2); line-height: 1.55; } .cmp-card p.cmp-det__sum { font-size: 14px; color: var(--lumi-text); line-height: 1.55; margin-top: 6px; } /* Риск — единственная часть, которую надо прочесть обязательно. Красим ПО КЛАССУ, а не по «последней части»: в карточках контактов планет последней идёт «Что делать», и она выходила красной. */ .cmp-det--risk .cmp-det__t { color: var(--lumi-danger); } /* ── Пара с раскрытием ─────────────────────────────────────────────── Раньше пары показывались сухой таблицей, и только если их больше одной. Теперь каждая раскрывается, и внутри — подробный разбор системы. При одной паре головы нет: разбор открыт сразу. */ .cg-pair { border: 1px solid var(--lumi-border-soft); border-radius: 18px; background: var(--lumi-bg-elev); overflow: hidden; } .cg-pair.is-open { border-color: var(--lumi-accent); } .calc .cg-pair__head, .cg-pair__head { display: grid; width: 100%; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 13px 15px; text-align: left; background: transparent; border: 0; cursor: pointer; color: var(--lumi-text); font-family: inherit; } .cg-pair__head:hover { background: var(--lumi-bg-sunken); } .cg-pair__who { font-size: 15px; font-weight: 600; min-width: 0; } .cg-pair__n { font-size: 17px; font-weight: 700; color: var(--lumi-accent); font-variant-numeric: tabular-nums; white-space: nowrap; } .cg-pair__t { font-size: 13px; color: var(--lumi-text-2); } .cg-pair__more { font-size: 12.5px; font-weight: 600; color: var(--lumi-accent); white-space: nowrap; text-align: right; } .cg-pair__body { padding: 0 13px 13px; } /* При одной паре головы нет — отступ сверху нужен свой. */ .cg-pair > .cg-pair__body:first-child { padding-top: 13px; } .cg-pair__body[hidden] { display: none; } .cg-err { font-size: 13.5px; color: var(--lumi-danger); margin: 0; padding: 4px 2px; } .cg-dim { color: var(--lumi-text-3); font-weight: 400; } .cg-scroll { overflow-x: auto; border-radius: 16px; border: 1px solid var(--lumi-border-soft); } .cg-table { width: 100%; border-collapse: collapse; background: var(--lumi-bg-elev); } .cg-table td { padding: 10px 14px; font-size: 14px; border-bottom: 1px solid var(--lumi-border-soft); } .cg-table tr:last-child td { border-bottom: 0; } .cg-num { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; text-align: right; color: var(--lumi-accent); } .cg-chans { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .cg-chans li { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 14px; } .cg-chans li b { color: var(--lumi-accent); font-weight: 700; } .cg-chans__who { margin-left: auto; font-size: 12.5px; color: var(--lumi-text-3); } /* ── Закрытые вкладки: видны, но с замком ────────────────────────────── Прятать их было ошибкой замысла: человек не знал, что эти разделы вообще есть, и захотеть их не мог. Теперь они на месте, приглушены и с замком; нажатие ведёт в окно тарифов. */ .calc__tab.is-locked, .calc__navbtn.is-locked { opacity: .58; cursor: pointer; } .calc__tab.is-locked .cg-lock, .calc__navbtn.is-locked .cg-lock { vertical-align: -1px; margin-left: 4px; opacity: .85; } /* В нижнем меню подпись и значок стоят столбиком — замок ставим рядом с подписью, иначе он уедет под неё третьей строкой. */ .calc__navbtn.is-locked .cg-lock { position: absolute; top: 4px; right: 50%; transform: translateX(26px); margin: 0; } .calc__navbtn { position: relative; } /* ═══ ИИ-КОНСУЛЬТАНТ — КАК ЧАТ VATMA.RU ═════════════════════════════════ Владелец 2026-09-14: «много лишнего текста, надо по дизайну как на vatma.ru ИИ-чат». Образец — #screen-chat в css/core/lumi.css. Замер до правки (телефон, 390 точек): подпись панели 84, шапка 94, рамка вокруг чата, значок робота, прокрутка внутри переписки. Ответ шёл колонкой в три слова. Правила по классу, как в calc.css, но ниже по файлу — поэтому побеждают. Цвета только из токенов: обе темы сразу. ════════════ */ .calc__panel[data-panel="consultant"] > .calc__panel-lead { display: none; } .calc-ai { margin-top: 4px; border: 0; border-radius: 0; background: transparent; overflow: visible; } .calc-ai__head { display: none; } .calc-ai__body { padding: 0; display: grid; gap: 12px; } .calc-ai__log { display: flex; flex-direction: column; gap: 10px; max-height: none; overflow: visible; padding: 0; } .calc-ai__msg { max-width: 88%; padding: 11px 15px; border-radius: 20px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; } .calc-ai__msg--user { align-self: flex-end; background: var(--lumi-accent-fill); color: var(--lumi-on-accent); border: 0; border-bottom-right-radius: 7px; } .calc-ai__msg--ai { align-self: flex-start; /* Не --lumi-card, как в приложении: там ответ лежит на фоне ЭКРАНА, а здесь — внутри карточки страницы, у которой цвет и есть --lumi-card. В тёмной теме замер дал контраст карточки ответа с фоном 1.0 и мягкой рамки 1.09 — ответ сливался с блоком. --lumi-bg отличается от карточки в обеих темах (1.07 и 1.13), обычная рамка видна (1.42 и 1.29). */ background: var(--lumi-bg); color: var(--lumi-text); border: 1px solid var(--lumi-border); border-bottom-left-radius: 7px; } .calc-ai__msg--err { background: transparent; color: var(--lumi-danger); border-color: var(--lumi-danger); } .calc-ai__msg.is-typing { color: var(--lumi-text-3); } .calc-ai__msg strong { font-weight: 700; color: inherit; } .calc-ai__p { margin: 0 0 8px; } .calc-ai__p:last-child { margin-bottom: 0; } .calc-ai__li { margin: 0 0 5px; } .calc-ai__li:last-child { margin-bottom: 0; } .calc-ai__n { font-weight: 700; } .calc-ai__chips { display: flex; flex-wrap: wrap; gap: 8px; } .calc-ai__chip { min-height: 38px; padding: 0 15px; border-radius: 999px; background: var(--lumi-bg-sunken); border: 1px solid var(--lumi-border); color: var(--lumi-text-2); font-size: 13px; font-weight: 500; } .calc-ai__chip:hover { color: var(--lumi-text); border-color: var(--lumi-accent); } .calc-ai__meta { margin: 2px 0 0; min-height: 16px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--lumi-text-3); text-align: center; } .calc-ai__meta svg { width: 14px; height: 14px; flex: 0 0 auto; } .calc-ai__composer { display: flex; align-items: flex-end; gap: 8px; border: 0; border-radius: 0; background: transparent; padding: 0; } .calc-ai__ta { flex: 1 1 auto; min-width: 0; box-sizing: border-box; min-height: 46px; max-height: 140px; padding: 12px 18px; border-radius: 23px; background: var(--lumi-bg-sunken); border: 1px solid var(--lumi-border); color: var(--lumi-text); /* 16, а не 15, как в приложении: на айфоне поле мельче 16 увеличивает страницу при нажатии. */ font-size: 16px; line-height: 1.4; resize: none; } .calc-ai__ta:focus { outline: none; border-color: var(--lumi-accent); } .calc-ai__ta::placeholder { color: var(--lumi-text-3); opacity: 1; } .calc-ai__ta:disabled { opacity: .6; } .calc-ai__send { flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; background: var(--lumi-accent-fill); color: var(--lumi-on-accent); } .calc-ai__send:hover:not(:disabled) { transform: none; } .calc-ai__send:disabled { opacity: .45; } .calc-ai__send svg { width: 20px; height: 20px; } /* ═══ ЭКРАН ЧАТА: вкладка консультанта не листается ═══════════════════ Владелец 2026-09-14: «почему картинка листается? Она должна быть статична… текст, что ниже и выше, не должен быть там, посмотри как на vatma.ru». Образец — #screen-chat в css/core/lumi.css. Класс calc-chat-on ставит calc-ai.js, пока открыта вкладка. Высоту и верх он же считает замером (--calc-chat-top, --calc-chat-h). ═════════════════════════════════════════════════════════════════════ */ /* Только , НЕ : overflow у body делает его своим окном прокрутки, и «липкая» верхняя полоса перестаёт липнуть к экрану — проверено: после прокрутки страницы экран чата вставал от 0, под полосу. */ html.calc-chat-on { overflow: hidden; overscroll-behavior: none; } /* Весь текст страницы — внутри .wrap: прячем его целиком. Видимость наследуется, и ребёнок может её вернуть — поэтому чат и окно входа (оно тоже внутри .wrap) остаются видимыми. */ html.calc-chat-on .wrap { visibility: hidden; } html.calc-chat-on .calc__modal, html.calc-chat-on .calc__panel[data-panel="consultant"]:not([hidden]) { visibility: visible; } html.calc-chat-on .calc__panel[data-panel="consultant"]:not([hidden]) { position: fixed; left: 0; right: 0; top: var(--calc-chat-top, 44px); height: var(--calc-chat-h, calc(100dvh - 100px)); z-index: 35; /* под верхней полосой (40) и меню (60) */ margin: 0; padding: 0; background: var(--lumi-bg); display: flex; flex-direction: column; } /* Клавиатура открыта — меню прячем, иначе поле ввода уйдёт под неё. */ html.calc-chat-on.calc-chat-kb .calc__bottomnav { display: none; } html.calc-chat-on .calc-ai { flex: 1 1 auto; min-height: 0; width: 100%; max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; } /* Шапка — одна строка со значком, как «AI-наставник». */ .calc-ai__top { display: none; } html.calc-chat-on .calc-ai__top { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 16px; border-bottom: 1px solid var(--lumi-border-soft); font-size: 17px; color: var(--lumi-text); } .calc-ai__top b { font-weight: 700; } .calc-ai__top-ico { display: inline-flex; color: var(--lumi-accent); } .calc-ai__top-ico svg { width: 22px; height: 22px; } html.calc-chat-on .calc-ai__body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; } /* Прокручивается только переписка. */ html.calc-chat-on .calc-ai__log { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px 14px 10px; } /* Подсказки — одной строкой с прокруткой вбок: столбиком они съели бы половину экрана телефона. */ html.calc-chat-on .calc-ai__chips { flex: 0 0 auto; flex-wrap: nowrap; overflow-x: auto; padding: 2px 14px 8px; scrollbar-width: none; } html.calc-chat-on .calc-ai__chips::-webkit-scrollbar { display: none; } html.calc-chat-on .calc-ai__chip { flex: 0 0 auto; white-space: nowrap; } /* Низ экрана: счётчик и поле ввода, отделены линией — как в приложении. */ html.calc-chat-on .calc-ai__meta { flex: 0 0 auto; margin: 0; padding: 8px 14px 6px; border-top: 1px solid var(--lumi-border-soft); } html.calc-chat-on .calc-ai__composer { flex: 0 0 auto; padding: 0 14px 10px; } /* Полосу прокрутки в поле включает сам скрипт — когда текст упёрся в предел высоты. До того её не должно быть. */ .calc-ai__ta { overflow-y: hidden; } html.calc-chat-on .calc-ai__loading { margin: auto; } html.calc-chat-on .calc-ai__locked { margin: auto; padding: 24px 16px; justify-items: center; text-align: center; } /* Кнопка подписки, когда кончились 10 вопросов разовой покупки. Цвета — как у кнопки отправки: заливка и надпись парой из палитры, в обеих темах читается. */ .calc-ai__sub[hidden] { display: none; } .calc-ai__sub { align-self: center; margin: 0 14px 8px; min-height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--lumi-accent-fill); color: var(--lumi-on-accent); font-size: 14px; font-weight: 600; cursor: pointer; } /* Название системы в шапке чата длиннее прежнего («ИИ-консультант · Дизайн человека»): на узком телефоне не переносим строку, а сокращаем многоточием — шапка всегда в одну строку, как в приложении. */ .calc-ai__top b { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }