/* Плавающая панель связи у левого нижнего края - диктовка Павла 18.08.2026. Разметка: pilotsite/templates/parts/panel_svyazi.html Показ/скрытие: home/static/js/site/panel_svyazi.js Панель висит поверх страницы столбиком: Telegram, MAX, WhatsApp, онлайн-чат и, у самого угла, онлайн-заказ. Появляется она не сразу - пока на экране строка 1 шапки с теми же значками, панель спрятана (иначе одни и те же значки видны дважды). Показом управляет сценарий, здесь описано только, как панель выглядит и как переходит из скрытой в видимую. Откат: удалить этот файл и его подключение в base.html. ── 1. Где панель вообще показывается ────────────────────────────────── По умолчанию панели нет НИГДЕ, она включается только на широких окнах. Причина - место. Содержимое сайта лежит в колонке 1212px по центру (.device), и панель обязана поместиться в свободное поле слева от неё, не наезжая на текст и кнопки блоков. Считать по ширине колонки нельзя: не всё содержимое в неё вписано. Самый левый блок сайта - лента отзывов (.strip): у неё margin-inline: -22px, она специально вылезает за колонку (glavnaya.css, раздел 27). По ней порог и выставлен. Замер (окно с полосой прокрутки, панель занимает полосу 6-60px): · 1320 - лента отзывов начинается на 60px, панель встаёт прямо на карточку отзыва: «Елизавета Царёва», звёзды, число оценок; · 1360 - лента на 68px, зазор 8px, наездов нет; · 1440 и шире - зазор от 20px, чисто. Отсюда порог 1360px. Что происходит на окнах уже 1360px: · до 760px - работает своя липкая нижняя панель действий телефона (glavnaya.css, раздел 5), дублировать её нельзя, панель связи скрыта; · 761-1359px - панели связи нет: она встала бы поверх текста. Связь на этих окнах остаётся в липкой строке меню - там кнопка «Заказать перевод», которая видна при любой прокрутке. Откат/правка порога: одно число в @media ниже. Опустить его ниже 1360px без переделки раскладки нельзя - панель полезет на ленту отзывов. */ .psvyaz { /* базовое состояние - панели нет; включается медиазапросом ниже */ display: none; } @media (min-width: 1360px) { .psvyaz { position: fixed; left: 6px; bottom: 14px; z-index: 54; /* ниже липкого меню (55) и окна заявки (100) */ display: flex; flex-direction: column; gap: 8px; /* Подложка светлая и почти незаметная: фон не должен спорить с содержимым страницы, работать должны сами значки. */ padding: 7px 6px; border: 1px solid var(--line, #d9dbde); border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 18px -10px rgba(27, 27, 27, .55); /* Скрытое состояние. Панель уезжает влево и гаснет; visibility убирает её и от чтения с экрана, и от нажатий - без отдельного aria-hidden. visibility переключается без плавности, но с задержкой на время ухода, иначе панель пропадала бы мгновенно, не досветившись. */ opacity: 0; visibility: hidden; transform: translateX(-16px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s; } /* Класс ставит сценарий, когда строка 1 шапки ушла с экрана. */ .psvyaz--vidna { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease, transform .22s ease, visibility 0s linear 0s; } .psvyaz-knopka { position: relative; display: block; width: 40px; height: 40px; border-radius: 10px; text-decoration: none; transition: transform .15s ease; } .psvyaz-znak { display: block; width: 100%; height: 100%; } /* Наведение: значок чуть подрастает и получает тень - видно, что это кнопка, а не картинка. Откат: удалить два правила ниже. */ .psvyaz-knopka:hover { transform: scale(1.08); } .psvyaz-knopka:hover .psvyaz-znak, .psvyaz-knopka:focus-visible .psvyaz-znak { filter: drop-shadow(0 3px 6px rgba(27, 27, 27, .35)); } /* Обводка при обходе клавишей - обязательна: панель целиком состоит из ссылок, и без неё непонятно, на какой ты стоишь. */ .psvyaz-knopka:focus-visible { outline: 2px solid var(--ink, #1b1b1b); outline-offset: 3px; } /* Подпись рядом со значком - выезжает вправо при наведении и при обходе клавишей. Читающим с экрана подпись и так доступна (aria-label), эта нужна зрячим: значок MAX и зелёное облачко чата узнают не все. Откат: удалить оба правила .psvyaz-knopka::after. */ .psvyaz-knopka::after { content: attr(data-nadpis); position: absolute; top: 50%; left: calc(100% + 10px); transform: translateY(-50%); padding: 4px 9px; border-radius: 7px; background: rgba(27, 27, 27, .9); color: #fff; font-size: 12.5px; line-height: 1.2; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s ease; } .psvyaz-knopka:hover::after, .psvyaz-knopka:focus-visible::after { opacity: 1; } /* Кнопка заказа - главное действие панели, поэтому чуть крупнее соседей и стоит у самого угла экрана. */ .psvyaz-zakaz { width: 44px; height: 44px; margin: 2px -2px 0; } } /* ── 2. Уважение к системной настройке «уменьшить анимацию» ───────────── */ /* Панель по-прежнему появляется и уходит, но мгновенно: без наплыва, сдвига и подрастания значков. Откат: удалить раздел 2. */ @media (prefers-reduced-motion: reduce) { .psvyaz, .psvyaz--vidna, .psvyaz-knopka, .psvyaz-knopka::after { transition: none; } .psvyaz { transform: none; } .psvyaz-knopka:hover { transform: none; } } /* ── 2.5. Нижняя панель телефона: основа. Перенесено из glavnaya.css ────── Перенесено 21.08.2026 вместе с разметкой панели. Это разделы 5 (часть про .bottombar) и 25.4 файла C:\Users\Павел\Claude\Projects\SEO\pilot\wagtail_pilot\pilotsite\home\static\css\site\glavnaya.css дословно: закрепление панели у нижнего края, размеры кнопок и значков, скрытые подписи и нижнее поле страницы под панелью. ЗАЧЕМ. glavnaya.css подключает только шаблон главной и её копий, а панель с 21.08.2026 выводит общий parts/nizhnyaya_panel.html и она есть на каждой странице. Оставь оформление в файле главной - и на цене, услуге, блоге, вакансии, юридической странице, калькуляторе и 404 панель пришла бы в эталонном виде: не закреплённая у нижнего края, а липкая внутри своего блока (эталон пишет `.bottombar[data-h]{position:sticky}`), с отрицательными полями по бокам, кнопками во всю ширину и видимыми подписями. Панель общая - значит и её оформление живёт в общем файле. ПОЧЕМУ РАЗДЕЛ СТОИТ ПЕРЕД РАЗДЕЛОМ 3, А НЕ ПОСЛЕ. Раздел 3 ниже - вид плашки по диктовке Павла 18.08.2026 - НАРОЧНО отменяет часть этих правил: вместо полосы от края до края там продолговатая плашка с полями 10px, бордовой обводкой, скруглением и полупрозрачной подложкой. Пока правила лежали в glavnaya.css, раздел 3 побеждал их порядком - он идёт в файле, который подключён раньше, но с более тяжёлыми селекторами («html body», см. пояснение к разделу 3). Перенеси этот раздел ПОСЛЕ раздела 3 - и он победит его сам: вернётся белая полоса во всю ширину с квадратными кнопками, а плашки не будет. ПОЧЕМУ ПРИСТАВКА «html body» ПОЯВИЛАСЬ. Здесь она обязательна, в отличие от переноса шапки. Этот файл подключён ДО эталона css/etalon/glavnaya-a.css, где то же `.bottombar[data-h]` (сила 0,2,0) задаёт position: sticky, а `body.mob .bottombar[data-h]` (0,3,0) - display и margin-top. Без приставки наши правила были бы ровно той же силы и проиграли бы эталону порядком - панель отлипла бы от нижнего края. «html body» даёт (0,2,2) и (0,3,2), то есть ту же расстановку сил, что была в glavnaya.css, и ту же, что у раздела 3 ниже. Это ровно тот приём, которым уже написан раздел 3. Откат: вернуть эти правила в glavnaya.css (разделы 5 и 25.4), сняв приставку «html body», и удалить раздел 2.5 отсюда. */ /* 2.5.1 = раздел 5 файла glavnaya.css, часть про нижнюю панель, дословно. Диктовка Павла 13.08.2026: нижняя панель должна быть видна всё время, при любой прокрутке. Раньше она уезжала вместе с первым экраном, и на середине страницы заказать было нечем. Селектор с [data-h] обязателен: в эталоне правило записано как .bottombar[data-h]{position:sticky} и по силе перебивает просто .bottombar. Из-за этого панель держалась, пока шла внутри своего блока, а на отзывах уезжала вверх - прилипание sticky работает только внутри родителя. */ @media (max-width: 760px) { html body .bottombar[data-h], html body.mob .bottombar[data-h] { position: fixed; display: flex; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; justify-content: space-around; align-items: center; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line, #d9dbde); background: #fff; box-shadow: 0 -4px 14px -8px rgba(27, 27, 27, .35); } html body .bottombar[data-h] a, html body .bottombar[data-h] button { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; background: var(--soft, #f5f6f7); color: var(--ink, #1b1b1b); text-decoration: none; } html body .bottombar[data-h] .bi { font-size: 20px; line-height: 1; } /* подписи не показываем: Павел просил только значки. Из разметки их не убираем - они читаются вслух для незрячих */ html body .bottombar[data-h] .bl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Чтобы нижняя панель не закрывала конец страницы. Приставки «html» правилу тела документа не нужно: соперника такой же силы у него нет. Значение 64px оставлено ровно тем, каким было у главной, - подбирать его заново значило бы менять вид принятой страницы. Замер: плашка панели 55,92 точки плюс 10 снизу, то есть под ней остаётся 64 - 55,92 - 10 = -1,92; последняя строка подвала панелью не перекрывается, потому что панель к подвалу уже уходит (js/site/panel_svyazi.js, правило 4). */ body { padding-bottom: 64px; } } /* 2.5.2 = раздел 25.4 файла glavnaya.css, дословно. Нижняя панель: кнопки крупные, значок на всю кнопку. Плитки мессенджеров сами рисуют форму и цвет, подложка кнопки не нужна. Диктовка 14: промежутки между кнопками одинаковые И такие же от краёв - крайние (трубка и конверт) отходят от кромки экрана. */ @media (max-width: 760px) { html body .bottombar[data-h] a, html body .bottombar[data-h] button, html body .bottombar[data-h] button[data-h] { flex: 0 0 52px; /* эталон растягивал кнопки flex-ом - размер держим жёстко */ width: 52px; height: 52px; padding: 0; border-radius: 12px; background: none; } html body .bottombar[data-h] .bi { display: block; width: 100%; height: 100%; } html body .bottombar[data-h], html body.mob .bottombar[data-h] { justify-content: space-evenly; gap: 0; margin: 0; /* эталонные отрицательные поля сдвигали закреплённую панель влево */ padding-left: 0; padding-right: 0; } } /* ── 3. Нижняя панель телефона: продолговатая плашка ────────────────────── Диктовка Павла 18.08.2026, пункты 20 и 32. Пункт 20 (сделано раньше): «посмотри, как это реализовано в мобильной версии приложения Telegram: там очень мелкий шрифт, но все его видят... Все значки маленькие тёмно-серые, очень такого офисного типа». Пункт 32 (эта редакция): «сделай её ещё более прозрачной и возьми её в такую плашку - ровно как в WhatsApp: чтобы она была по типу как будто такая общая кнопка наша на сайте, она тоже с закруглёнными краями, такая вот должна быть продолговатая... Давай сделаем их чуть крупнее, в целом я вижу, что расстояние позволяет. Может быть, для этого можно их сдвинуть чуть-чуть в центр, то есть чат и Max чуть-чуть - ну пускай будет немножко неравномерно. Значок чата нужно взять из иконки чата в Telegram, то есть там прямо такое двойное облачко... Логотип Max серый сделать больше, Telegram логотип сделать больше, WhatsApp логотип сделать больше - ну то есть чтобы они были сопоставимы с "Позвонить" и "E-mail", а то сейчас у них какие-то совсем крошечные». ЗАЧЕМ РАЗДЕЛ ЗДЕСЬ, А НЕ В glavnaya.css. Шесть кнопок, которые перечислил Павел (трубка, Telegram, Max, чат, WhatsApp, почта), есть ровно в одном месте сайта - в липкой нижней панели телефона «.bottombar» (разметка в home/templates/home/home_page.html, прежнее оформление - glavnaya.css, разделы 5 и 25.4). У левой плавающей панели «.psvyaz» из раздела 1 набор другой и телефона с почтой в нём нет. Над glavnaya.css сейчас идёт параллельная работа, поэтому правка сделана перебивающим блоком в своём файле. Естественное место раздела - glavnaya.css, раздел 25.4; перенести можно как есть, сняв приставки «html body». ПОЧЕМУ СЕЛЕКТОРЫ НАЧИНАЮТСЯ С «html body». panel_svyazi.css подключён в base.html, то есть РАНЬШЕ glavnaya.css, и по порядку проигрывает. Вес поднят приставкой, а не «!important»: правило остаётся обычным, его легко перебить дальше. Пары селекторов две, потому что в glavnaya.css сама панель описана двумя - «.bottombar[data-h]» и «body.mob .bottombar[data-h]», и вторая тяжелее. Откат: удалить раздел 3 целиком - вернутся крупные разноцветные плитки 52×52 без подписей во всю ширину экрана. */ @media (max-width: 760px) { html body .bottombar[data-h], html body.mob .bottombar[data-h] { /* Тёмно-серый один на значки и подписи: Павел просил «очень такого офисного типа». Взят фирменный серый #54595F, приглушённый до #3E434A - подложка стала прозрачнее, и на прежнем сером подпись переставала добирать до нормы читаемости над тёмным подвалом (замер по снимку: на #54595F контраст 3,3, на #3E434A - 4,7 при норме 4,5). Значок на полтона темнее подписи, чтобы читался первым. */ --pnl-znak: #383d43; --pnl-podpis: #3e434a; /* ПЛАШКА, А НЕ ПОЛОСА. Панель больше не идёт от края до края: она отходит от кромок экрана и висит отдельной продолговатой плашкой - так сделана нижняя панель в WhatsApp, на неё Павел и показал. Радиус снят замером с кнопки «Онлайн заявка» на первом экране (.act.sec): border-radius 8px 8px 12px 12px, то есть у низа кнопки 12px. Взято 12px на все четыре угла - плашка читается как «наша кнопка», а не как чужой элемент. Вырез экрана (iPhone) теперь учитывается в отступе снизу, а не в поле панели: под плашкой всё равно видно страницу, и полоса выреза не должна оставаться пустой белой каймой. */ right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); left: 10px; border-radius: 12px; overflow: hidden; /* заливка крайних кнопок при нажатии - по радиусу */ /* Полупрозрачная подложка с размытием под ней - это и есть «эффект, как в Telegram»: панель не белая плашка, сквозь неё видно страницу. По пункту 32 прозрачности прибавлено: было .72, стало .62, размытие поднято с 14px до 20px - чем прозрачнее подложка, тем сильнее должно быть размытие, иначе сквозь панель читается текст страницы. Замер контраста подписи (#3E434A) сделан по снимку экрана: взят цвет подложки там, где она уже смешана с содержимым страницы. · над светлым содержимым - подложка выходит rgb(251,251,251), контраст 9,6; · над тёмным подвалом #333539 - подложка rgb(177,178,180), контраст 4,7. Норма для мелкого текста - 4,5, обе точки её держат. Для сравнения: прежняя пара (подложка .72 и подпись #54595F) над тем же подвалом давала 4,1, то есть панель стала и прозрачнее, и читаемее. Опускать .62 ниже нельзя без нового затемнения подписи. Замер повторён 19.08.2026 после увеличения значков и бордовой обводки: подложка и размытие не тронуты, числа те же - 9,8 над белой страницей и 4,7 над подвалом; значок #383D43 над подвалом даёт 5,6. Тень слабая и короткая: плашка должна чуть отрываться от страницы, иначе висящий прямоугольник без тени выглядит наклейкой. ОБВОДКА - БОРДОВАЯ ПОЛОСА ПО КРУГУ, правка 19.08.2026. Павел: «она немножко, конечно, так это непонятно что, теряется... возьмём её в бордовую полосу по кругу». Было 1px rgba(27,27,27,.10) - серая нить в одну десятую непрозрачности, на светлой странице её не видно вовсе. Стало 2px сплошного фирменного бордового #8C1821. Толщина подобрана по снимкам при плотности экрана телефона (dpr 2): · 1px - линия читается, но остаётся волоском: на вытянутой руке плашка по-прежнему «не очерчена», то есть жалоба Павла не снята; · 1,5px - от 1px не отличается: браузер прижимает толщину к целым точкам экрана и рисует ту же линию, в коде это была бы неправда; · 2px - выбрано. Полоса видна сразу, по весу совпадает с бордовыми кнопками действия на странице, плашка читается как «наша кнопка»; · 2,5px - как и 1,5px, прижимается к соседнему целому (к 2px). Толще 2px не пробовал: на плашке высотой 56px это уже не полоса, а рама вокруг содержимого. Откат обводки: вернуть «1px solid rgba(27, 27, 27, .10)» и поднять поля кнопки обратно на 6px/5px (см. ниже), иначе плашка станет на 2px ниже задуманного. */ border: 2px solid #8C1821; background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(20px) saturate(150%); backdrop-filter: blur(20px) saturate(150%); box-shadow: 0 6px 18px -8px rgba(27, 27, 27, .38); /* Кнопки делят ширину плашки и растягивают её по высоте. Поля по бокам маленькие: 4px - чтобы крайние кнопки не липли к скруглению. */ align-items: stretch; justify-content: space-between; gap: 0; padding: 0 4px; } /* Браузеры без размытия (старый Firefox): подложка почти непрозрачная, иначе текст страницы просвечивал бы сквозь подписи. */ @supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) { html body .bottombar[data-h], html body.mob .bottombar[data-h] { background: rgba(255, 255, 255, .94); } } /* Кнопка: значок сверху, подпись под ним. Было 52×52 с плиткой на всю кнопку - Павел дважды сказал «сильно-сильно уменьшить», поэтому от кнопки остались значок и подпись. «min-width: 0» обязателен: без него длинная подпись распирает ячейку и кнопки перестают быть равными. */ html body .bottombar[data-h] a, html body .bottombar[data-h] button { flex: 1 1 0; min-width: 0; width: auto; height: auto; flex-direction: column; gap: 2px; /* Было 6px сверху и 5px снизу. Правкой 19.08.2026 срезано по 1px: высоту плашки задаёт содержимое кнопки, а обводка выросла с 1px до 2px и добавила 2px сверх того. Павел просил плашку крупнее «процентов на десять» - без этой срезки вышло бы +16 %. Со срезкой 49,9 → 55,9, то есть +12 %. Зазор от края до значка при этом 5+2=7px против прежних 8px: внутри квадрата 30px у глифа 26px остаётся своя кайма. Откат: вернуть «6px 2px 5px». */ padding: 5px 2px 4px; border-radius: 0; background: none; -webkit-tap-highlight-color: transparent; } /* НЕРАВНОМЕРНЫЙ ШАГ - разрешение Павла, пункт 32: «можно их сдвинуть чуть-чуть в центр, то есть чат и Max чуть-чуть - ну пускай будет немножко неравномерно». У Max и Чата подписи самые короткие (19,3px и 16,6px против 50px у «Позвонить» и 47,5px у «WhatsApp»), поэтому их ячейкам отдаётся 0.8 доли вместо целой. Освободившиеся пиксели уходят четырём крайним кнопкам - тем, у кого подписи длинные. Шаг центров при экране 375 получается 62,0 - 55,8 - 49,6 - 55,8 - 62,0: два средних значка подобрались к центру, картинка осталась симметричной. Порядок кнопок приходит из кабинета и закреплён скриптом C:\Users\Павел\Claude\Projects\Вебсайт\_perenos\panel_svyazi_poryadok.py - слева направо Позвонить, Telegram, Max, Чат, WhatsApp, E-mail. Отсюда номера 3 и 4. Переставят порядок в кабинете - править и эти номера. Откат: удалить правило, шаг снова станет ровным. */ /* 19.08.2026: Павел переставил кнопки под правую руку, слева направо стало E-mail, Чат, Max, WhatsApp, Telegram, Позвонить. Две самые короткие подписи (Чат 16,6px и Max 19,3px) переехали с мест 3-4 на места 2-3, а на месте 4 теперь WhatsApp - ему ужиматься нельзя, у него подпись 47,5px. Номера в селекторе переписаны следом; замер до правки показывал у WhatsApp запас 4,5px, то есть правило работало против замысла. Проверять так: под правило попадают две самые короткие подписи, длинные - никогда. Откат: вернуть nth-child(3) и nth-child(4). */ html body .bottombar[data-h] a:nth-child(2), html body .bottombar[data-h] a:nth-child(3) { flex-grow: .8; } /* Квадрат значка. Было 21px, потом 24px - правкой 19.08.2026 поднят до 30px: Павел просил значки «процентов на тридцать больше». Растёт при этом ВИДИМЫЙ глиф - с 20px до 26px (+30 %), см. блок множителей ниже; квадрат взят с запасом 30px, потому что у svg обрезка по краю включена по умолчанию, а глифы масштабируются вокруг центра квадрата - при квадрате 26px увеличенные рисунки резались бы кромкой. Откат: вернуть 24px и разделить все множители ниже на 1,04. */ html body .bottombar[data-h] .bi, html body .bottombar[data-h] .bi[data-h] { flex: none; width: 30px; height: 30px; } /* Подпись была спрятана от глаз (её читали только с экрана) - теперь видна. Кегль плавающий: 9.5px на экране 375 и уже, чем экран, тем мельче, чтобы «Позвонить» и «WhatsApp» никогда не переносились на вторую строку - это прямое требование Павла. Многоточие - страховка на случай чужой длинной подписи из кабинета. Второй селектор с «[data-h]» - не украшение: в замороженном эталоне (css/etalon/glavnaya-a.css) записано .bottombar[data-h] .bl[data-h] {font-size:11px}, и это тяжелее обычной записи. Без него кегль оставался эталонным - поймано замером. */ html body .bottombar[data-h] .bl, html body .bottombar[data-h] .bl[data-h] { position: static; width: auto; max-width: 100%; height: auto; clip: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: min(9.5px, 2.55vw); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; color: var(--pnl-podpis); } /* ── Значки: те же, что были, перекрашены в тёмно-серый ──────────────── Рисунки встроены в разметку (home/parts/znachok_dejstviya.html) и раскрашены прямо в атрибутах fill. Новых значков не заводим - Павел сказал брать «те, которые у нас уже есть», - поэтому цвет меняется здесь, выбором по самому атрибуту fill. Исключение одно - чат, ему Павел заказал новый рисунок (пункт 32). Приём один на все шесть: цветная плитка мессенджера убирается, глиф, который был на ней белым, становится тёмно-серым, а вырезы внутри глифа - белыми. Получается ровно то, что просил Павел: тёмно-серый Telegram, тёмно-серый WhatsApp, тёмно-серая трубка, тёмно-серая почта. */ /* плитки мессенджеров - долой, остаётся один глиф */ html body .bottombar[data-h] .bi rect[fill="#29a9eb"], html body .bottombar[data-h] .bi rect[fill="#25d366"], html body .bottombar[data-h] .bi rect[fill="url(#maxg)"] { fill: none; } /* глифы: и белые с плиток, и цветная трубка звонка */ html body .bottombar[data-h] .bi path[fill="#fff"], html body .bottombar[data-h] .bi path[fill="#2f7d32"], html body .bottombar[data-h] .bi path[fill="#228b22"], html body .bottombar[data-h] .bi rect[fill="#8c1821"] { fill: var(--pnl-znak); } /* Вырезы внутри глифа остаются светлыми: трубка внутри круга WhatsApp, точка внутри пузыря Max, клапан конверта. Клапан выбран соседним селектором «~»: у конверта корпус - это rect, и только он отличает почту от Telegram, у которого разметка такая же. */ html body .bottombar[data-h] .bi path[fill="#25d366"], html body .bottombar[data-h] .bi circle[fill="url(#maxg)"], html body .bottombar[data-h] .bi rect[fill="#8c1821"] ~ path[fill="#fff"] { fill: #fff; } /* ── Одинаковый ВИДИМЫЙ размер глифа ────────────────────────────────── Пункт 32: «Логотип Max серый сделать больше, Telegram логотип сделать больше, WhatsApp логотип сделать больше... а то сейчас у них какие-то совсем крошечные». Причина «крошечности» была не в размере квадрата - он у всех один, - а в том, как нарисован сам глиф внутри квадрата. Замер (доля квадрата, которую занимает видимая часть рисунка): трубка 0,75 Telegram 0,51 ← вдвое мельче конверта Max 0,64 WhatsApp 0,65 конверт 0,88 Отсюда и ощущение, что мессенджеры мельче трубки и почты. Лечится не квадратом, а масштабом самого рисунка: каждому глифу дан свой множитель, чтобы видимая часть у всех вышла одинаковой. Значения: нужный размер / (доля × сторона квадрата). ПРАВКА 19.08.2026. Павел: «сделать ещё чуть-чуть, процентов на тридцать больше сами значки серые». Целевой видимый глиф поднят с 20px до 26px, квадрат - с 24px до 30px, поэтому каждый множитель умножен на 26/20 × 24/30 = 1,04. Проверено замером: видимая часть всех шести значков стала 26,0 ± 0,1px, ни один глиф не задевает край квадрата (наименьший зазор до кромки - 1,3px у Telegram). ВТОРАЯ ПРАВКА 19.08.2026, вечер. Павел: «давай ещё чуть-чуть увеличим значок письма, e-mail, процентов на десять. А наоборот трубку сделаем процентов на пять поменьше». Общий размер 26,0 после неё держат уже не все: два значка из шести намеренно выбиваются - конверт 28,5 и трубка 24,7. Остальные четыре (Telegram, Max, чат, WhatsApp) остались на 26,0 и не тронуты. Числа стоят у своих правил ниже; если когда-нибудь понадобится вернуть панель к одному размеру, править надо только эти два множителя. «transform-box: view-box» обязателен: без него каждый путь масштабировался бы вокруг СВОЕГО центра, и части рисунка (трубка внутри круга WhatsApp, точка внутри пузыря Max, клапан конверта) разъехались бы. С ним все части одного значка растут вокруг центра квадрата и остаются на местах. Мессенджеры выбраны через соседний селектор «~» от своей плитки: у Telegram и почты глифы помечены одним и тем же fill="#fff", различает их только плитка, которая стоит перед ними. Откат: удалить блок множителей - вернутся глифы разного видимого размера в общем квадрате 30px. */ html body .bottombar[data-h] .bi > * { transform-box: view-box; transform-origin: center; } /* Трубка мельче на 5 % - правка 19.08.2026. Павел: «а наоборот трубку сделаем процентов на пять поменьше». Было scale(1.154), видимый глиф 25,97; стало 1.154 × 0,95 = 1.096, глиф 24,67. Запас до края квадрата вырос с 2,02 до 2,66 - трубка стоит свободнее всех шести. Откат: вернуть scale(1.154). */ html body .bottombar[data-h] .bi path[fill="#2f7d32"] { transform: scale(1.096); /* трубка: 22,5 → 24,7 */ } html body .bottombar[data-h] .bi rect[fill="#29a9eb"] ~ path { transform: scale(1.685); /* Telegram: 15,4 → 26,0 */ } html body .bottombar[data-h] .bi rect[fill="url(#maxg)"] ~ * { transform: scale(1.352); /* Max: 19,3 → 26,0 */ } html body .bottombar[data-h] .bi rect[fill="#25d366"] ~ path { transform: scale(1.331); /* WhatsApp: 19,6 → 26,0 */ } /* Конверт крупнее на 10 % - правка 19.08.2026. Павел: «давай ещё чуть-чуть увеличим значок письма, e-mail, процентов на десять». Было scale(.988), видимый глиф 25,93×18,53; стало 0,988 × 1,1 = 1.087, глиф 28,52×20,38. ПРО КРАЙ КВАДРАТА. Конверт - самый широкий из шести значков, и после прибавки запас до кромки упал с 2,03 до 0,74 точки с каждой стороны. Это ещё зазор, обрезки нет (проверено замером), но дальше конверт растить нельзя: при +15 % он упрётся в край, а при +18 % svg начнёт резать клапан. Захочет Павел крупнее - сначала поднимать квадрат .bi с 30px, а вместе с ним пересчитывать все шесть множителей и высоту плашки (сейчас 55,92) с отступом body снизу. Откат: вернуть scale(.988). */ html body .bottombar[data-h] .bi rect[fill="#8c1821"], html body .bottombar[data-h] .bi rect[fill="#8c1821"] ~ path { transform: scale(1.087); /* конверт: 26,3 → 28,5 */ } html body .bottombar[data-h] .bi path[fill="#228b22"] { transform: scale(1.061); /* облачки чата: 24,5 → 26,0 */ } /* Нажатие: лёгкая заливка ячейки - без неё на телефоне непонятно, попал ли палец в кнопку (подложки у кнопки больше нет). */ html body .bottombar[data-h] a:active { background: rgba(27, 27, 27, .06); } html body .bottombar[data-h] a:focus-visible { outline: 2px solid var(--ink, #1b1b1b); outline-offset: -3px; } /* Запас снизу под панель, чтобы она не закрывала конец страницы. Было 64px под панель 65px - не хватало и не учитывался вырез экрана (на iPhone панель залезала на текст ещё на 34px). Стало: точная высота плашки, её отступ от низа экрана 10px, столько же зазора сверху и вырез экрана. Правка 19.08.2026: плашка выросла с 49,9px до 55,9px (значки крупнее и обводка 2px), поэтому первое слагаемое поднято с 50px до 56px. Число снято замером, а не посчитано на бумаге: высоту плашки задаёт содержимое кнопки, и любая правка полей или значков её меняет. Откат: удалить правило - вернётся 64px из glavnaya.css, раздел 5. */ html body { padding-bottom: calc(56px + 20px + env(safe-area-inset-bottom, 0px)); } }