/* ===== Базовые стили проекта ===== Веб-шрифты (Unbounded / Source Sans Pro / Caveat) живут НЕ здесь, а в css/fonts.css — они встроены base64 и занимали 99,8% этого файла, из-за чего base.css нельзя было ни открыть, ни осмысленно дифнуть. Причины встраивания, состав начертаний и история формата — в шапке css/fonts.css. Подключать fonts.css ПЕРЕД base.css. */ :root{ --yellow:#FFE300; --ink:#1A1A1C; --purple:#8C30C1; --push-text:#EDE9C9; --header-h:80px; /* Единственная точка правки высоты десктоп-хедера — читается везде через var(--header-h) (.menubar, #slide-viewport/ #slide-track компенсация, .stage-wrap padding-top, js/stage.js menubar.offsetHeight). Только десктоп: .menubar-tablet/.menubar-mobile не используют эту переменную. */ --stage-scale:1; /* обновляется из js/stage.js, используется для позиции сайдбара */ --stage-center-offset:0px; /* обновляется из js/stage.js — вертикальное центрирование #stage-content ((slideH-760)/2 в дизайн-px), см. #slide-viewport/#slide-track ниже */ } *{box-sizing:border-box;} /* Все кнопки на сайте нарисованы вручную: своя заливка, свои скругления, свой шрифт. Пока у кнопки appearance остаётся значением по умолчанию (auto), браузер считает её СИСТЕМНЫМ виджетом и рисует своей темой — а тема имеет право проигнорировать часть авторских свойств. Firefox на этом и попался: кнопка «Получить демонстрацию» в линейке «Внедрение» рисовалась прямоугольной, хотя border-radius:26px стоит (замечание пользователя со скриншотом 2026-08-08). appearance:none снимает системную тему и делает кнопку обычным боксом, который слушается CSS одинаково во всех браузерах. Пять мест в проекте это уже делали поимённо (.slide-dots__btn, .sol-block, .lastpopup-close и др.) — теперь правило одно и общее, а те дубли безвредны. ⚠️ В Chromium это ничего не меняет: там у кнопки с заданными background и border системной темы и так не остаётся. Проверено попиксельной сверкой — ни один из 23 экранов не сдвинулся. */ button{ -webkit-appearance:none; appearance:none; } html,body{ margin:0;padding:0;width:100%;height:100%; background:var(--yellow); overflow:hidden; font-family:'Unbounded',sans-serif; /* -webkit-text-size-adjust:100% — фикс бага, найденного 2026-08-03: "иногда" на Safari один конкретный крупный жирный заголовок (пробовали .solution-text--service на слайде 4, .app-caption на слайде 5 — оба fixed font-size, Unbounded 700, center + translateX(-50%), внутри transform:scale() от fitStage()) рендерился в разы крупнее заданного и вылезал за экран, соседние элементы — нормально. Это известный WebKit-эффект автоматического "text size adjust"/инфлейта текста — эвристика, которая иногда увеличивает отдельные текстовые блоки, особенно внутри transform:scale()-контейнеров (ровно наш случай — вся композиция #stage масштабируется через transform). Отключается глобально этим свойством, задача которого — не подгонять размер текста "на глаз", раз весь макет уже сам явно управляет размерами. */ -webkit-text-size-adjust:100%; text-size-adjust:100%; } /* ===== Два служебных класса «для версии для чтения» ====================== Оба нужны ровно для одного: чтобы фраза, разорванная вёрсткой, читалась как фраза. В режиме чтения (Safari/Firefox) браузер выбрасывает ВСЕ стили сайта — значит любое оформление, заданное здесь, там просто исчезает. На этом и построено. .lb — «line break». Замена
внутри абзаца. На странице это тот же перенос строки (пустой блочный бокс нулевой высоты разрывает строку ровно как
), а в режиме чтения стили сняты, span становится строчным — и строка склеивается обратно в одну фразу. Почему span, а не div:
внутри

закрывает абзац на уровне парсера, — нет. .rd — знак препинания, видимый ТОЛЬКО в тексте. На странице роль запятой или тире играет сама вёрстка: перенос, отдельный блок, жёлтая полоска- разделитель. В извлечённом тексте вёрстки нет, и фраза без знака разваливается («Когда гость не знает о ваших услугах вы теряете продажи»). Кегль в ноль — знак не занимает на экране места и не рисуется. ⚠️ Сюда кладём ТОЛЬКО знаки препинания, ни одного слова: невидимый текст со словами — это то, за что поисковики наказывают, и правильно делают. */ .lb{ display:block; } .rd{ font-size:0; line-height:0; letter-spacing:0; } /* .sr-head — заголовок, который ЕСТЬ в тексте и в озвучке, но не рисуется на экране (правка 2026-08-08). Нужен ровно в двух местах: заголовки «Что это стоит гостинице?» и «Какое же решение?» физически живут не в своих слайдах, а в соседнем слое #searchbar-layer — они нарисованы внутри поисковой строки, которая переезжает между слайдами и крутится флипом. Для глаза это правильно, а для разбора текста — нет: Readability (движок режима чтения) собирает статью вокруг блока с абзацами, а в #searchbar-layer абзацев нет вовсе, и весь слой вместе с обоими заголовками отбрасывается. В извлечённом тексте две секции из одиннадцати оставались без заголовка над собой — ровно та связка «заголовок → пассаж», из которой поисковик строит сниппет. Поэтому в сами слайды кладём по невидимому дублю, а видимые (те, что в поисковой строке) закрываем aria-hidden — иначе заголовок читался бы дважды. ⚠️ Это НЕ «скрытый текст для поисковика»: те же самые слова видны на экране в двух шагах отсюда, просто в другом узле DOM. Прятать так что-то, чего на странице нет, нельзя. Приём — стандартный «visually hidden»: не display:none и не visibility (их Readability и скринридеры пропускают), а схлопнутый до пикселя бокс с обрезкой. position:absolute обязателен — слайды свёрстаны абсолютом, и блочный элемент в потоке сдвинул бы то, что от него зависит. */ .sr-head{ position:absolute; width:1px; height:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }