/* Theme tokens — базовые шрифты и цвета сохранены из старого Toolster. Любые цвета/шрифты/отступы — только через эти переменные, без магических значений по месту. */ :root { /* Типографика (база старого сайта — Droid Sans) */ --tls-font-base: 'Droid Sans', 'Segoe UI', Tahoma, sans-serif; /* Системные стеки для рабочих областей инструментов: интерфейсный, моноширинный, «бумажный». Заведены, чтобы инструменты не переписывали длинный стек шрифтов у себя по месту. */ --tls-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --tls-font-mono: Consolas, Menlo, 'Courier New', monospace; --tls-font-serif: Georgia, 'Times New Roman', serif; /* Палитра (из старого css: серый фон/текст + синий и жёлтый акценты) */ --tls-bg: #ffffff; --tls-surface: #ffffff; --tls-text: #333333; --tls-text-muted: #5b5b5b; --tls-border: #cccccc; --tls-accent: #275ec5; /* основной синий */ --tls-accent-dark: #005c99; /* тёмный синий (hover) */ --tls-highlight: #fcb831; /* жёлтый хайлайт */ --tls-danger: #c0392b; /* ошибки/предупреждения */ --tls-success: #3e9c46; /* подтверждение: тот же зелёный, что у вердиктов чекеров */ --tls-salmon: darksalmon; /* фон подписи shared */ --tls-link-home: #1111cc; /* ссылки списка инструментов на главной (синий оригинала) */ /* Текст ПОВЕРХ заливки: на синем (шапка, корпус карточки) и на жёлтом (hover карточки). */ --tls-on-accent: #ffffff; --tls-on-highlight: #000000; /* Шапка и меню (сохранено из оригинала) */ --tls-header-bg: #2c2f35; /* шапка */ /* --tls-header-bg: #3b5998; прежний синий шапки (сохранён) */ --tls-header-hover: #4c6cb0; /* hover/активный пункт меню в шапке */ --tls-header-text: #e9edf6; --tls-menu-bg: #fbfbfb; /* фон мобильного меню */ --tls-menu-hover: #ebebeb; --tls-menu-active: #3b5998; /* активный пункт (мобильное меню) */ --tls-menu-text: #333333; /* Размеры layout */ --tls-header-h: 40px; --tls-header-px: 1rem; /* правый отступ контента шапки */ --tls-logo-ml: 53px; /* отступ логотипа от края (десктоп: бургера нет); на мобайле уменьшается */ --tls-logo-fz: 28px; /* размер шрифта логотипа */ --tls-burger-fz: 1.4rem; /* иконка-бургер (мобильные) */ --tls-menu-w: 240px; /* ширина выезжающего меню */ /* Единая скорость наведения/подсветки по сайту и толщина подчёркивания активного пункта меню. */ --tls-transition: .12s ease; --tls-nav-underline: 2px; /* Минимальный размер зоны нажатия пальцем. Ориентир Google — 44px; берём с запасом, чтобы по кнопке было удобно попадать, а не «попадать точно». */ --tls-tap-min: 48px; /* Меню в шапке */ --tls-nav-ml: 3rem; /* отступ меню от логотипа (слева) */ --tls-nav-gap: 2px; /* зазор между пунктами */ --tls-nav-px: .7rem; /* горизонтальный паддинг пункта */ --tls-nav-fz: 14px; /* размер шрифта пункта */ /* Дочерняя категория в меню (categories.php → parent): выпадашка на десктопе, отступ на мобайле */ --tls-nav-sub-bg: var(--tls-header-bg); /* фон выпадашки — как у шапки, это её продолжение */ --tls-nav-sub-shadow: 0 6px 14px rgba(0, 0, 0, .22); --tls-nav-sub-w: 190px; /* минимальная ширина выпадашки */ --tls-nav-sub-py: .6rem; /* вертикальный паддинг пункта выпадашки */ --tls-nav-sub-z: 1030; /* выше контента, ниже offcanvas Bootstrap (1045) */ --tls-nav-sub-indent: 2rem; /* сдвиг вложенного пункта в мобильном меню */ --tls-nav-sub-dash: 10px; /* длина чёрточки-маркера вложенности */ --tls-nav-group-fz: .82rem; /* заголовок раздела в мобильном меню (корневой пункт) */ --tls-nav-group-ls: .05em; /* Радиусы / тени */ --tls-radius: .5rem; --tls-shadow: 0 1px 3px rgba(0, 0, 0, .08); /* Листинг-карточки инструментов (категории/related) — размеры и цвета оригинала */ --tls-item-w: 200px; /* ширина карточки */ --tls-item-gap: 20px; /* зазор между карточками */ /* Скрин на карточке листинга. Размер в пикселях — для вёрстки; голые числа (без единиц) — для aspect-ratio, которому единицы запрещены. Те же числа движок ставит в width/height картинки (Tool::LISTING_W/H), чтобы браузер держал место под неё и страница не прыгала при загрузке. */ --tls-item-shot-w: 182px; --tls-item-shot-h: 123px; --tls-item-shot-ar: 182 / 123; /* соотношение сторон для aspect-ratio */ --tls-item-bg: #3b5998; /* синий корпус карточки (прежний цвет шапки; раньше был var(--tls-header-bg)) */ --tls-item-hover: var(--tls-highlight); /* жёлтый hover */ --tls-item-shot-border: #444444; /* линия под скрином */ --tls-item-radius: 5px; --tls-item-shadow: 0 1px 4px rgba(0, 0, 0, .45); --tls-item-title-fz: 20px; /* подпись карточки */ --tls-item-title-minh: 49px; /* синяя зона подписи (186 − 137 из оригинала) */ --tls-related-more-fz: 14px; /* ссылка «все инструменты категории» под «See also» */ /* Страница инструмента: колонка (инструмент + описание + «See also»). Ширина — из manifest layout.width, но НЕ уже минималки: узкие инструменты (калькуляторы 340–420px) иначе сжимали текст описания и карточки related в неудобную колонку. 640px = комфортная строка текста (~80 знаков) и три карточки в ряд (3×200 + 2×20). */ --tls-tool-min-w: 640px; /* Текстовые страницы (Terms, Privacy, FAQ, Sitemap) и формы: комфортная длина строки. */ --tls-text-max-w: 760px; --tls-form-max-w: 560px; --tls-home-max-w: 600px; /* колонка главной страницы */ --tls-lead-max-w: 46rem; /* подводка под H1 страницы инструмента */ /* Рекламный блок НАД инструментом. Здесь только РЕЗЕРВ места: высоту объявления задаёт формат в самом коде блока (`horizontal` — низкие форматы сети), а эти числа держат место заранее, чтобы подъехавший баннер не сдвинул инструмент вниз (скачок вёрстки бьёт по Core Web Vitals). Значения = высоте форматов, которые сеть даёт на такой ширине: 320×100 на телефоне, 728×90 и 970×90 на широком экране. */ --tls-ad-top-h-sm: 100px; --tls-ad-top-h: 90px; /* Иконки общих блоков движка */ --tls-explain-ic-fz: 1.25rem; /* иконка пункта в блоке «How it works» */ --tls-thanks-ic-fz: 2.5rem; /* галочка в окне «спасибо» после отправки формы */ /* Ссылка «Improve this tool» под инструментом: мелкий текст, у правого края. Вертикаль иконки: глиф Bootstrap Icons (`.bi::before`) по умолчанию сидит на vertical-align -.125em и уезжает вверх; значение .1em подобрал владелец в браузере. */ --tls-suggest-fz: 12px; --tls-suggest-ic-fz: 14px; --tls-suggest-ic-align: .1em; /* vertical-align ГЛИФА (.bi::before) */ --tls-suggest-ic-shift: 4.55px; /* доводка бокса иконки по вертикали */ --tls-suggest-ic-gap: .35rem; /* зазор между иконкой и текстом */ /* Кнопка «Install as app» в той же строке слева. Размер взят от ссылки напротив: строка действий должна читаться как одна строка, а не как кнопка с подписью рядом. */ --tls-pwa-btn-fz: var(--tls-suggest-fz); --tls-pwa-btn-ic-fz: var(--tls-suggest-ic-fz); --tls-pwa-btn-py: .15rem; /* высота кнопки: ровно под мелкий текст, без «воздуха» */ --tls-pwa-btn-px: .45rem; --tls-pwa-btn-radius: .25rem; /* Доводка по вертикали двигает ВЕСЬ БЛОК установки (кнопка + значок «?») и только целиком — правило владельца 2026-08-16. Значок внутри кнопки не сдвигается никогда: он часть кнопки и обязан стоять в ней ровно, иначе кнопка выглядит собранной из чужих деталей. Значение подобрал владелец в браузере: без него кнопка «висит» выше надписи справа. Как у --tls-suggest-ic-shift, это доводка на глаз — и это нормально: линию сравнивают глазом, а не калькулятором, шрифты у кнопки и у ссылки разной посадки. */ --tls-pwa-shift: 5px; /* ПЛАШКА УСТАНОВКИ. Пока телефон собирает приложение, блок перестаёт быть строкой действий и становится одним информационным полем: индикатор с надписью «Installing…» и пояснение, почему это дольше загрузки, лежат на общей подложке. До 2026-08-20 пояснение стояло голым абзацем под строкой и читалось как посторонняя приписка — непонятно, к чему относится. Цвет подложки — осветлённый жёлтый акцент сайта (--tls-highlight), полоса слева — сам акцент: это сообщение «идёт процесс», а не ошибка, поэтому не красный и не серый. Подтверждённая установка перекрашивает плашку в зелёный (--tls-success), как и галочку. */ --tls-pwa-panel-bg: #fff6e2; /* --tls-highlight, разбавленный до фона под мелкий текст */ --tls-pwa-panel-ok-bg: #eaf5eb; /* то же для --tls-success: подтверждённая установка */ --tls-pwa-panel-bar: 3px; /* полоса слева: маркер «это одно сообщение» */ --tls-pwa-panel-py: .5rem; --tls-pwa-panel-px: .65rem; --tls-pwa-panel-gap: .3rem; /* зазор между строкой статуса и пояснением */ --tls-pwa-panel-radius: .35rem; --tls-pwa-panel-w: 27rem; /* потолок ширины: комфортная строка для двух-трёх строк текста */ /* ЯРЛЫК В ПЛАШКЕ (подтверждённая установка). Показываем значок, который телефон поставил на домашний экран, — открыть сам экран страница не может ни на Android, ни на iOS. ФОРМУ значка задаёт лаунчер телефона, и узнать её из браузера нечем: Pixel и стоковый Android рисуют круг, Samsung/Xiaomi/Oppo/Realme — скруглённый квадрат. Выбран квадрат (владелец 2026-08-20): таких телефонов у людей больше, и знак на нём выглядит крупнее — у круга срезаются углы заливки. Обрезка нужна в любом случае: показывается maskable-иконка, у неё по краям поля под маску, и без скругления она читалась бы картинкой, а не ярлыком. */ --tls-pwa-shortcut-size: 44px; --tls-pwa-shortcut-radius: 22%; --tls-pwa-shortcut-fz: 11px; /* подпись под значком: мельче текста плашки, как на экране телефона */ --tls-pwa-shortcut-w: 6rem; /* ширина колонки значка: подпись переносится, а не растягивает плашку */ --tls-pwa-shortcut-shadow: 0 1px 3px rgba(0, 0, 0, .25); /* Маппинг на токены Bootstrap 5 */ --bs-body-font-family: var(--tls-font-base); --bs-body-bg: var(--tls-bg); --bs-body-color: var(--tls-text); --bs-primary: var(--tls-accent); --bs-border-color: var(--tls-border); --bs-link-color: var(--tls-accent); --bs-link-hover-color: var(--tls-accent-dark); /* Ширина снимка инструмента в тексте страницы. Заметно меньше рабочей области — картинку нельзя принять за сам инструмент, но она остаётся в статье и индексируется. */ --tls-shot-w: 320px; } /* Подключаем Droid Sans локально не требуется на этом этапе — fallback на системные. Если нужен точный шрифт, добавим @font-face и положим файл в assets/fonts/. */ /* Страница НИКОГДА не ходит по горизонтали (мобайл: никакого «перетаскивания» сайта влево-вправо и упругого горизонтального оттяга Android/iOS; вертикальный скролл — как обычно). overflow-x: clip (модерн) + hidden (fallback), overscroll-behavior-x глушит rubber-band. */ html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; } /* Глобальный сброс bootstrap-обводки фокуса (см. правило в CLAUDE.md «Без bootstrap-обводки фокуса»). Синий focus-ring и синяя смена border не используются на сайте. */ .form-control:focus, .form-select:focus, .form-control-color:focus { box-shadow: none !important; border-color: var(--tls-border) !important; } .form-check-input:focus, .form-check-input:checked:focus, .form-check-input:focus-visible { box-shadow: none !important; border-color: var(--tls-border) !important; /* нет синего обрамления чекбокса при нажатии */ } .btn:focus, .btn:focus-visible, .btn.focus { box-shadow: none !important; } /* Пункты меню тоже: Bootstrap вешает синий ring на .nav-link:focus-visible, и он вылезал на пунктах шапки при обходе с клавиатуры — а с появлением КОРНЕВОГО ПУНКТА (он