/* ============================================================ Адаптивный слой для tuchek.net Добавлен 2026-08-22. Подключается из headers.php, то есть действует на всех страницах сразу. Зачем: 83% кликов из Google приходят с телефонов (данные Search Console за 12 месяцев), а вёрстка была рассчитана на ~700px и на экране 374px требовала горизонтальной прокрутки. Google индексирует сайт мобильной версией, поэтому это напрямую влияло на позиции. Принцип: ничего не переписывать в HTML. Все правила действуют только при ширине экрана до 780px — вид на компьютере не меняется вообще. Проверено на: главная, /opm.htm, /hft/logoped.htm, /reviews.htm, /support.htm (таблица цен), /kontakti/, /tDCS.htm, /kids/intellect.htm. На всех: горизонтальной прокрутки нет, scrollWidth равен ширине экрана. Если правите файл — поднимите версию в ссылке в headers.php (mobile.css?v=1), иначе браузеры отдадут старую копию из кеша. ============================================================ */ @media (max-width: 780px) { /* 1. Жёсткие минимальные ширины — главная причина прокрутки. На части страниц min-width:700px стоял прямо на body. */ html, body, td, th, table, div, p, span, video, center, section, article { min-width: 0 !important; } /* 2. Таблицы-раскладки: фиксированный алгоритм ширины. При table-layout:auto ширина таблицы не может стать меньше её min-content, и никакой width:100% её не удержит. */ table { table-layout: fixed !important; width: 100% !important; max-width: 100% !important; border-spacing: 2px !important; } /* 3. Медиа не шире экрана. Намеренно без !important: у части картинок задан свой max-width (например, логотип 150px), и его надо уважать. */ img, video, iframe, picture, object, embed, canvas { max-width: 100%; } img, video { height: auto; } video { max-width: 100% !important; } /* 4. Длинные неразрывные куски (декоративные строки из точек через  , длинные слова) должны переноситься. Именно anywhere, а не break-word: только он уменьшает расчётную минимальную ширину блока. */ td, th, div, p, span, b, font, li, dir { overflow-wrap: anywhere !important; } nobr { white-space: normal !important; } /* 5. Раскладочные таблицы (border=0) — колонки в столбик. Таблицы с рамкой (цены, сравнения) не трогаем: там колонки несут смысл и должны остаться колонками. Исключение записано как :not([id="mainTable"]), а не :not(#mainTable), намеренно. Второй вариант добавляет правилу вес идентификатора, и тогда ни одно исключение ниже (пункты 12 и 13) его не перебивает без нагромождения селекторов. По совпадению элементов это одно и то же. */ table[border="0"]:not([id="mainTable"]) > tbody > tr, table[border="0"]:not([id="mainTable"]) > tbody > tr > td { display: block !important; width: auto !important; max-width: 100% !important; } table[border="0"]:not([id="mainTable"]) > tbody > tr > td > img, table[border="0"]:not([id="mainTable"]) > tbody > tr > td > picture > img { display: block; margin: 0 auto; } /* 6. Рамки и отступы: на 374px десятипиксельные cellspacing и cellpadding съедают заметную долю ширины. */ .MsoNormalTable, .MsoTableShadowArround { border-spacing: 3px !important; box-sizing: border-box !important; } .MsoNormalTable > tbody > tr > td, .MsoTableShadowArround > tbody > tr > td { padding: 6px !important; } div.MsoTableShadowArround, div.MsoNormalTable, div.ThreeDBoxRound, div.dBox, div.ThreeDBox { box-sizing: border-box !important; max-width: 100% !important; } .img-hover-zoom, .img-hover-zoom > * { width: auto !important; max-width: 100% !important; } dir, ul, ol, menu, blockquote { padding-left: 1em !important; margin-left: 0 !important; } /* 7. Заголовки: на главной они заданы инлайном в 19pt и 38pt, то есть до 50px — на телефоне это 5-6 символов в строку. */ .seo-h font, h1 font, h2 font { font-size: 24px !important; line-height: 1.15 !important; } /* 8. Поля форм (отзывы, обратный звонок) не шире экрана. */ textarea, input, select, button { max-width: 100% !important; box-sizing: border-box !important; } /* 9. Лента видеоотзывов прокручивается внутри себя, а не растягивает всю страницу. */ .scrollmenu { width: auto !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* 10. Блоки не шире экрана. Мобильное меню — исключение: оно позиционируется абсолютно и ширину считает само. */ div { max-width: 100% !important; } #mainmenu, .menu_table { max-width: none !important; } /* Вертикальное меню стоит в left:10px, поэтому width:100% из правила 2 давало вылет на 10px за правый край экрана. Задать вместо этого точную ширину нельзя: показывая меню, скрипт ставит ему display:inline, таблица перестаёт быть таблицей, и заданная ширина растягивает только коричневую подложку — плашки пунктов остаются по содержимому, справа получается пустая полоса. Поэтому ширина по содержимому, как на компьютере, и потолок — экран. */ #vmainmenu { width: auto !important; max-width: calc(100% - 20px) !important; } /* 12. Меню сайта — обратно табличная раскладка. Правило 5 раскладывало в столбик ячейки любой table[border=0], включая внутренние таблицы пунктов меню. Внутри пункта иконка вставала НАД подписью, содержимое вырастало с 51 до 69–79px при заданной пункту высоте 68px, вылезало за подложку и наезжало на соседний пункт. Подпись оказывалась в зоне следующего пункта, и палец попадал не туда. Возвращаем меню обычную табличную раскладку: иконка слева, подпись справа, всё внутри своей плашки. Ширина ячеек (иконка — по содержимому, подпись — остаток) повторяет поведение на компьютере, где иконки выстроены в колонку. */ #vmainmenu, #mainmenu, #vmainmenu table[border="0"], #mainmenu table[border="0"] { table-layout: auto !important; } #vmainmenu table[border="0"], #mainmenu table[border="0"] { width: 100% !important; border-spacing: 0 !important; } #vmainmenu > tbody > tr, #mainmenu > tbody > tr, #vmainmenu table[border="0"] > tbody > tr, #mainmenu table[border="0"] > tbody > tr { display: table-row !important; } #vmainmenu > tbody > tr > td, #mainmenu > tbody > tr > td, #vmainmenu table[border="0"] > tbody > tr > td, #mainmenu table[border="0"] > tbody > tr > td { display: table-cell !important; vertical-align: middle !important; } #vmainmenu table[border="0"] > tbody > tr > td:first-child, #mainmenu table[border="0"] > tbody > tr > td:first-child { width: 1% !important; white-space: nowrap !important; } #vmainmenu table[border="0"] > tbody > tr > td + td, #mainmenu table[border="0"] > tbody > tr > td + td { width: 100% !important; } /* Иконка — рядом с подписью, а не отдельным блоком по центру (правило 5 делало её display:block; margin:0 auto). */ #vmainmenu table[border="0"] > tbody > tr > td > img, #mainmenu table[border="0"] > tbody > tr > td > img { display: inline !important; margin: 0 4px !important; } /* 13. Подменю — позиционирует их скрипт, здесь только ширина. Раньше здесь стояло жёсткое смещение влево. Оно спасало от того, что подменю уезжало за правый край экрана, но ценой наложения: при 688px подменю 2-го уровня ложилось прямо на главное меню, а 3-й уровень — поверх 2-го и под всей его колонкой, так что мышью до него было не добраться. Теперь координаты считают show_menu2() и show_menu3() в left.php: подменю выпадает вправо от своего пункта и вровень с ним, а fit_menu_left() поджимает его, если не помещается в экран. Задавать смещение отсюда больше нельзя — !important перебьёт скрипт и всё вернётся к наложению. Ширина остаётся здесь: показывая подменю, скрипт ставит ему display:inline, таблица перестаёт быть таблицей, и заданная ширина растянула бы только подложку, а кнопки внутри всё равно жались бы по содержимому. Поэтому ширина по содержимому, потолок — экран. */ .smenu, .ssmenu { width: auto !important; max-width: calc(100% - 20px) !important; } /* Подписи в пунктах подменю — по середине пункта. У ячеек задан vertical-align:middle и height:52px, но правило 5 делает их display:block, а у блока vertical-align не работает — подпись прижималась к верхнему краю. Flex возвращает её на середину и заодно центрирует по горизонтали. Селектор с html нужен, чтобы перебить правило 5 по весу. */ html table.smenu[border="0"] > tbody > tr > td, html table.ssmenu[border="0"] > tbody > tr > td { display: flex !important; align-items: center !important; justify-content: center !important; } /* 11. Страховка от остаточных нескольких пикселей. */ html { overflow-x: hidden !important; } body { overflow-x: hidden !important; max-width: 100% !important; } } /* ============================================================ Оформление SEO-заголовков. Эти правила продублированы здесь из main.css намеренно. main.css отдаётся с Cache-Control: max-age=315360000 (10 лет), поэтому у вернувшихся посетителей остаётся старая копия и новые классы до них не доходят — заголовки показались бы крупными и жирными, с чужими отступами. Файл mobile.css новый и подключается с версией (?v=1), значит доходит до всех сразу. .seo-h — h1/h2/h3, вставленные внутрь существующей строки: делаем инлайновыми и наследующими все стили. .seo-h-block — заголовок, заменивший собой абзац

: повторяем оформление этого абзаца. ============================================================ */ h1.seo-h, h2.seo-h, h3.seo-h { display: inline; margin: 0; padding: 0; font-size: inherit; font-weight: inherit; font-family: inherit; font-style: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; text-align: inherit; } h1.seo-h-block { display: block; margin: 0cm; margin-bottom: .0001pt; padding: 0; font-size: 13.0pt; font-family: "Arial"; font-weight: normal; font-style: inherit; line-height: inherit; color: inherit; text-align: left; }