/* ============================================================================
AutoelectricPRO - mobile layer
Two families of rules share this file. The phone layout is gated on
html.aep-m, a class set only on narrow screens; the rebuilt desktop contact
rows are gated on html:not(.aep-m). The page's ORIGINAL desktop layout is
untouched either way - the :not rules style only elements this layer builds.
(Две семьи правил в одном файле. Телефонная раскладка - под html.aep-m,
классом только для узких экранов; перестроенные десктопные ряды связи - под
html:not(.aep-m). ИСХОДНАЯ десктопная вёрстка страницы не тронута в обоих
случаях: правила с :not стилизуют только элементы, построенные этим слоем.)
============================================================================ */
/* ---- Flow mode: unwind the fixed 963px absolute layout ---- */
html.aep-m,
html.aep-m body
{
width: auto;
min-width: 0;
/* Two declarations on purpose. "hidden" makes the page a scroll container: it clips the drawing,
but the box stays scrollable, and a touch browser will happily pan it sideways - the visitor
gets a page that slides yet shows nothing new. "clip" cuts without creating a scroll container
at all, so there is nothing left to pan. Browsers that do not know "clip" ignore the second
line and keep the first.
(Два объявления намеренно. «hidden» делает страницу прокручиваемой областью: рисование
обрезается, но коробка остаётся прокручиваемой, и сенсорный браузер охотно тянет её вбок —
посетитель получает страницу, которая едет, но ничего нового не показывает. «clip» режет,
вообще не создавая прокручиваемой области, и тянуть становится нечего. Браузеры, не знающие
«clip», пропускают вторую строку и берут первую.) */
overflow-x: hidden;
overflow-x: clip;
text-align: left;
}
html.aep-m body
{
font-size: 15px;
line-height: 1.45;
-webkit-text-size-adjust: 100%;
/* Room for the fixed contact bar: 51px of square plus its 10px of padding above and below and
the hairline, then 22px so the last line of the page is not read through the bar's edge. The
bar adds the notch inset to its own padding, so this has to add it too or the reserve falls
short by exactly that much on a phone that has one.
(Место под закреплённую панель связи: 51px квадрата плюс её отступы по 10px сверху и снизу и
волосяная линия, затем 22px, чтобы последняя строка страницы не читалась вплотную к краю
панели. Панель прибавляет вырез экрана к собственным отступам — значит и здесь его надо
прибавить, иначе на телефоне с вырезом запаса не хватит ровно на эту величину.) */
padding: 0 0 calc(94px + env(safe-area-inset-bottom, 0px)) 0;
margin: 0;
}
/* Anti-flash, and NOTHING that hides. The page is hidden by an inline style the gate in the page's
own creates, and the same gate removes it again — on success, on failure, and on a timer.
This file only helps the reveal along; it must never be able to hide anything, because it is a
separate download with its own six-hour cache, and "styles arrived, script did not" is exactly
the state that showed the 963px desktop canvas on a phone.
(Антимигание — и НИЧЕГО, что прячет. Страницу прячет встроенный стиль, который создаёт гейт в
самой странице, и тот же гейт его снимает: при успехе, при неудаче и по таймеру. Этот файл
только помогает открыть и не имеет права ничего прятать: он приезжает отдельно, со своим
шестичасовым кэшем, а состояние «стили доехали, скрипт нет» и показывало холст 963px на
телефоне.) */
html.aep-m.aep-ready #container,
html.aep-m.aep-ready div[id^="Layer"]
{
visibility: visible;
}
html.aep-m div#container
{
position: static !important;
width: auto !important;
max-width: 100% !important;
margin: 0 !important;
/* ⚠⚠⚠ Высота холста — ДЕСКТОПНАЯ и на телефоне не значит ничего. Она стоит инлайном
(`style="min-height:6430px"`), рассчитана на полотно 963 px и обязана быть снята, иначе разница
между нею и настоящей высотой потока повисает ПУСТОТОЙ ПОД ПОДВАЛОМ. Видно это не везде: если
мобильная раскладка выше десктопной (а так на большинстве страниц), холст растягивается сам и
изъяна не заметно. Он вылезает там, где на телефоне содержимое КОРОЧЕ, — например на страницах
со статьями, где картинки во всю ширину холста сжимаются до ширины экрана.
`!important` здесь обязателен: без него инлайновый `min-height` сильнее любого правила файла. */
min-height: 0 !important;
/* Воздух над заголовком страницы. Раньше его отбивала пурпурная титульная полоса; полосы больше
нет, и без этого отступа заголовок встаёт вплотную к чипам разделов.
⚠ Правило живёт ЗДЕСЬ, а не в инлайновом хроме страницы: mobile.css грузится ПОСЛЕ него, и при
равной силе селектора сокращённая запись padding отсюда всё равно победит — инлайновый
padding-top просто пропадал.
(Air above the page heading. The rule must live HERE: mobile.css loads after the page's inline
chrome, so at equal specificity this shorthand wins and an inline padding-top is simply lost.) */
/* Отступ равен промежутку между плитками (`.aep-grid { gap: 10px }`), и это не совпадение: на
витрине первым под чипами разделов идёт именно сетка плиток, и более крупный отступ сверху
читался как разнобой — расстояние до первого ряда заметно больше, чем между рядами.
Воздух над ЗАГОЛОВКОМ, ради которого отступ и заводился, никуда не делся: он перенесён на сам
заголовок (`margin-top` ниже), поэтому текстовые страницы дышат как прежде, а витрина получает
одинаковые промежутки сверху донизу. */
/* Сверху отступа НЕТ, и это осознанно. Промежуток до содержимого уже отмерен строкой с чипами
разделов — у неё свой нижний отступ 10 px, ровно как `gap` сетки плиток. Собственный отступ
холста складывался с ним и давал 20 px: от края кнопки до первой плитки вдвое больше, чем между
плитками. Воздух над ЗАГОЛОВКОМ, ради которого отступ заводился, перенесён на сам заголовок
(`margin-top` ниже), поэтому текстовые страницы дышат как прежде, а витрина получает один и тот
же промежуток сверху донизу. */
padding: 0 10px 0;
box-sizing: border-box;
text-align: left;
}
/* Elements the script lifted out of the absolute grid become plain blocks.
The reset has to reach DESCENDANTS too: the per-page stylesheets pin widths of
963px / 880px on inner nodes and position inner text absolutely, so a shallow
reset would let that content escape its parent and overflow the screen.
(Сброс обязан доставать и потомков: постраничные стили жёстко задают ширины
963/880px и позиционируют внутренний текст абсолютно — при поверхностном
сбросе он убегает из родителя и вылезает за экран.) */
html.aep-m .aep-flow,
html.aep-m .aep-flow *
{
position: static !important;
left: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
width: auto !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
z-index: auto !important;
float: none !important;
white-space: normal !important;
/* Long URLs and part numbers have no break opportunity and would otherwise force
a sideways scroll on a 390px screen. */
overflow-wrap: break-word !important;
word-break: break-word !important;
}
html.aep-m .aep-flow
{
margin: 0 0 12px 0 !important;
}
/* A rollover frame holds the picture twice: the resting copy and the hover copy, stacked by absolute
positioning and told apart with visibility. Unwinding the frame into the flow makes them siblings,
so the hidden copy would reserve its full height and double the block. A phone has no hover state,
so the copy is dropped outright. */
html.aep-m .aep-flow img.hover
{
display: none !important;
}
html.aep-m .aep-flow img,
html.aep-m .aep-tile img
{
max-width: 100% !important;
height: auto !important;
}
/* Safety net for fixed-size media anywhere on the page, including the parts of a
layout the reflow never reached. Without it the page-level overflow:hidden would
silently CLIP the right edge of a wide picture or table instead of scrolling it.
(Страховка для медиа с жёстким размером в любой части страницы, включая места,
куда перестройка не дошла: иначе overflow:hidden просто ОБРЕЖЕТ правый край
широкой картинки или таблицы вместо прокрутки.) */
html.aep-m img,
html.aep-m iframe,
html.aep-m video,
html.aep-m embed,
html.aep-m object
{
max-width: 100% !important;
height: auto !important;
}
/* The first two selectors must out-rank the blanket ".aep-flow *" reset above,
otherwise its overflow:visible wins and a wide table gets clipped instead of scrolled.
(Первые два селектора обязаны перебить общий сброс ".aep-flow *": иначе его
overflow:visible побеждает и широкая таблица обрезается вместо прокрутки.) */
html.aep-m .aep-flow table,
html.aep-m .aep-layer table,
html.aep-m table
{
display: block !important;
width: auto !important;
max-width: 100% !important;
overflow-x: auto !important;
}
/* ---- Room around pictures and around step numbers ---- */
/* A blank line above and below every picture, so it never touches the text it illustrates.
20px is the line the body text is set on. Marked from the script, because the pages wrap a
picture in whatever WWB produced — a positioned div, a table cell, a rollover frame — and no
single selector reaches all of them.
(Пустая строка сверху и снизу у каждой картинки, чтобы она не касалась поясняющего текста.
20px — высота строки основного текста. Метка ставится скриптом: страницы заворачивают
картинку в то, что выдал WWB, и одним селектором до всех не достать.) */
html.aep-m .aep-pic
{
display: block !important;
margin-top: 20px !important;
margin-bottom: 20px !important;
}
/* The number of a step keeps a column of its own and never breaks inside itself. Without this the
column collapses to one digit wide with no gap at all, and "1." splits across two lines.
(Номер шага держит собственную колонку и не рвётся внутри себя. Без этого колонка схлопывается
до ширины одной цифры без всякого зазора, а «1.» разъезжается на две строки.) */
/* The descendants have to be named too: the blanket ".aep-flow *" reset above forces
white-space:normal and break-anywhere onto every node inside, and inheritance from the cell
loses to it. Without this the dot of "1." still drops to a line of its own.
(Потомков надо назвать отдельно: общий сброс «.aep-flow *» выше навязывает каждому узлу
white-space:normal и перенос в любом месте, и наследование от ячейки ему проигрывает.
Без этого точка от «1.» по-прежнему падает на отдельную строку.) */
html.aep-m td.aep-num,
html.aep-m td.aep-num *
{
white-space: nowrap !important;
word-break: keep-all !important;
overflow-wrap: normal !important;
}
html.aep-m td.aep-num
{
padding-right: 14px !important;
vertical-align: top !important;
}
/* A bulleted list is written as one row per point: a marker box floated beside a text box. The
reflow must strip float and fixed widths or the 963px grid pushes the screen sideways, and that
drops every marker onto a line of its own — 183 stray dots over 15 pages. Laying each row out as
a flex line returns the marker to its text without bringing the float back.
(Маркированный список свёрстан строкой на пункт: обтекаемый блок-маркер рядом с блоком текста.
Перестройка обязана снять обтекание и жёсткие ширины, иначе сетка 963px растягивает экран, —
и от этого каждый маркер падает на отдельную строку: 183 осиротевшие точки на 15 страницах.
Раскладка строки как flex возвращает маркер к своему тексту, не воскрешая обтекание.) */
html.aep-m div[id^="wb_BulletedList"] > div
{
display: flex !important;
align-items: flex-start;
gap: 8px;
}
html.aep-m div[id^="wb_BulletedList"] > div > div.bullet
{
flex: 0 0 auto !important;
}
html.aep-m div[id^="wb_BulletedList"] > div > div.item
{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Points of a bulleted list touch at exactly 0px once the reflow drops the fixed heights that hold
them apart on the canvas, and the whole list then reads as one paragraph. This is the blank line
between them; it is here rather than in the per-page stylesheets so that every list on the site
gets it, including ones added later.
(После перестройки пункты списка смыкаются ровно в 0px: жёсткие высоты, разводящие их на холсте,
сняты, и список читается сплошным абзацем. Это и есть пустая строка между ними; она лежит здесь,
а не в постраничных стилях, чтобы доставалась каждому списку сайта, включая добавленные позже.) */
html.aep-m div[id^="wb_BulletedList"] > div + div
{
margin-top: 22px;
}
html.aep-m .aep-hidden
{
display: none !important;
}
/* Safety net for the article box: in the flow it must NEVER stay absolutely positioned.
The box carries canvas coordinates inline (position:absolute; left; top; width) and the
rebuild strips them — but a block that reaches the flow by any other path keeps them, falls
out of the flow and collapses the page to the height of the header. That is exactly what
iPhone visitors saw on 2026-08-03: all 52 blocks present in the DOM, page 369px tall.
CSS closes the hole for every path at once, including ones not yet imagined.
(Страховка для бокса статьи: в потоке он НИКОГДА не должен остаться абсолютным. Координаты
холста живут в его inline-стиле, перестройка их снимает — но блок, попавший в поток иным
путём, сохраняет их, выпадает из потока и схлопывает страницу до высоты шапки. Именно это
03.08.2026 видели посетители с iPhone: все 52 блока в DOM, страница высотой 369px.) */
html.aep-m .aep-svc
{
position: static !important;
left: auto !important;
top: auto !important;
width: auto !important;
height: auto !important;
}
/* The article box is CONTENT and must never be hidden as a "rebuilt duplicate". On 2026-08-03 an
iPhone visitor received it carrying `aep-hidden` TWICE (a double pass of the rebuild had marked
it consumed): 52 blocks alive in the DOM, page 150px tall, screen blank below the header.
Hiding a leftover frame is a cosmetic win; hiding the article is a dead page — so this rule
outranks the hider for `.aep-svc` alone.
(Бокс статьи — СОДЕРЖИМОЕ и не может быть скрыт как «пересобранный дубликат». 03.08.2026
посетитель с iPhone получил его с классом `aep-hidden` ДВАЖДЫ — двойной проход перестройки
записал бокс в «использованные»: 52 блока живы в DOM, страница 150px, под шапкой пусто.
Спрятать лишнюю рамку — косметика, спрятать статью — мёртвая страница.) */
html.aep-m .aep-svc.aep-hidden
{
display: block !important;
}
/* Layer blocks sit outside #container and so miss its side padding. */
html.aep-m .aep-layer
{
padding: 0 10px !important;
box-sizing: border-box !important;
}
/* ---- Header: name, then one tappable row per country ---- */
html.aep-m .aep-head
{
padding: 12px 10px 6px 10px;
border-bottom: 1px solid #E3E3E3;
margin-bottom: 12px;
}
/* The site banner is 2048x127 and centred; showing it at a fixed height keeps the
brand mark recognisable instead of shrinking it to an unreadable strip. */
html.aep-m .aep-head-banner
{
height: 44px;
margin: 0 -10px 10px -10px;
background-repeat: no-repeat;
background-position: center center;
background-size: auto 44px;
}
html.aep-m .aep-head-name
{
font-family: Tahoma, Arial, sans-serif;
font-size: 22px;
font-weight: bold;
color: #1A1A1A;
letter-spacing: 0.2px;
text-align: center;
margin: 0 0 4px 0;
}
html.aep-m .aep-head-sub
{
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 1.4;
color: #6A6A6A;
text-align: center;
max-width: 32em;
margin: 0 auto 12px auto;
}
/* ---- Navigation: the four section buttons, two per row ---- */
/* minmax(0, 1fr), never a bare 1fr. A bare 1fr means minmax(AUTO, 1fr), and that auto floor is the
column's own minimum content width - the longest unbreakable word, the widest image. A column
whose floor exceeds the share the screen can give takes it anyway, and the row runs off the right
edge past a page padding that still holds on the left. Here the tiles carry overflow:hidden, which
already caps their demand at zero, so today both spellings measure the same 191px columns; the
zero floor is written in so the guarantee belongs to the grid itself and does not depend on a
property set for another reason two rules below.
(minmax(0, 1fr), и никогда голый 1fr. Голый 1fr означает minmax(AUTO, 1fr), и этот автопол —
собственная минимальная ширина содержимого колонки: самое длинное неразрывное слово, самая
широкая картинка. Колонка, у которой пол больше доступной доли, всё равно берёт своё, и ряд
уезжает за правый край мимо отступа страницы, который слева при этом держится. Здесь на плитках
стоит overflow:hidden, который и так обнуляет их требование, поэтому сегодня оба написания дают
одни и те же колонки по 191px; нулевой пол выписан затем, чтобы гарантия принадлежала самой
сетке, а не зависела от свойства, поставленного двумя правилами ниже совсем ради другого.) */
html.aep-m .aep-nav
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
margin: 0 0 16px 0;
}
/* Section-button colours are the site's own: dark blue, current page in violet. */
html.aep-m .aep-nav a
{
display: flex;
align-items: center;
justify-content: center;
min-height: 52px;
padding: 8px 6px;
border-radius: 8px;
background: #00008B;
border: 1px solid #FFFFFF;
color: #FFFFFF;
font-family: Tahoma, Arial, sans-serif;
font-size: 15px;
font-weight: bold;
text-align: center;
text-decoration: none;
line-height: 1.2;
}
html.aep-m .aep-nav a.aep-nav-active
{
background: #8A2BE2;
}
/* The catalogue button keeps its heading tag for search engines; it must read as the button label. */
html.aep-m .aep-nav a h1,
html.aep-m .aep-nav a h2,
html.aep-m .aep-nav a h3
{
display: inline;
margin: 0;
padding: 0;
font: inherit;
color: inherit;
}
/* ---- Service tiles: two per row instead of four ---- */
html.aep-m .aep-grid
{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin: 0 0 16px 0;
}
html.aep-m .aep-tile
{
display: flex;
flex-direction: column;
border: 1px solid #DDDDDD;
border-radius: 10px;
overflow: hidden;
background: #FFFFFF;
text-decoration: none;
color: #000000;
}
html.aep-m .aep-tile-img
{
display: block;
background: #F4F4F4;
line-height: 0;
}
html.aep-m .aep-tile-img img
{
width: 100%;
height: auto;
display: block;
}
html.aep-m .aep-tile-cap
{
display: block;
padding: 8px 8px 10px 8px;
font-family: Tahoma, Arial, sans-serif;
font-size: 13px;
line-height: 1.25;
font-weight: bold;
text-align: center;
color: #1A1A1A;
}
/* Captions carry inline desktop type (21px) that must not survive on a phone. */
html.aep-m .aep-tile-cap span,
html.aep-m .aep-tile-cap strong,
html.aep-m .aep-tile-cap u
{
font-size: 13px !important;
line-height: 1.25 !important;
font-family: Tahoma, Arial, sans-serif !important;
text-decoration: none !important;
color: #1A1A1A !important;
}
/* ⚠ Здесь НЕ должно быть правила `br + br { display: none }`. Оно кажется безобидным, но соседство в
CSS считается по ЭЛЕМЕНТАМ и пропускает текстовые узлы: в подписи «Ремонт Li-Ion
Аккумуляторов
для BMW» второй перенос — соседний первому, и правило его прятало. Подпись из трёх строк
теряла разрыв, а слова слипались. Подряд идущие переносы схлопывает `mobile.js` при сборке
подписи, где видно, что между ними ничего нет. */
/* ---- Desktop: the contact row rebuilt over the page's own header and footer blocks -------------
No panel, no card, no background: this row stands on white in the header and on grey in the foot,
and anything drawn behind it would have to be right on one and wrong on the other. What carries
it instead is the number - large, dark, in the page's own navy - against four solid brand colours.
Those are the SAME four colours the phone bar uses, and that is the point: a visitor moving
between phone and desktop meets the same four marks in the same order.
Colour and decoration are declared !important because these rows live inside WWB's own markup,
whose per-page stylesheet styles bare "a" elements and would otherwise repaint the labels into
link blue and underline them.
(Ни панели, ни плашки, ни фона: этот ряд стоит на белом в шапке и на сером в подвале, и любая
подложка была бы верной на одном и неверной на другом. Держит его вместо этого сам номер —
крупный, тёмный, в том же тёмно-синем, что и страница, — на фоне четырёх плотных фирменных
цветов. Это ТЕ ЖЕ четыре цвета, что у телефонной панели, и в этом смысл: посетитель, переходящий
с телефона на компьютер, встречает те же четыре знака в том же порядке. Цвет и оформление
объявлены !important, потому что ряды живут внутри вёрстки WWB, чей постраничный стиль оформляет
голые «a» и иначе перекрасил бы подписи в синий цвет ссылок и подчеркнул их.) */
html:not(.aep-m) .aep-dcont
{
position: absolute;
z-index: 60;
font-family: Arial, Helvetica, sans-serif;
}
/* The row is two boxes, not one, so that pinning can widen the outer one to the window while the
inner one stays over the column the page is laid out in. One box could not do both: a backing that
stops at the column leaves the rest of the window showing page text sliding underneath it.
(Ряд состоит из двух коробок, а не одной, чтобы закрепление могло растянуть внешнюю во всю ширину
окна, пока внутренняя остаётся над колонкой, по которой сверстана страница. Одной коробкой обоих
не сделать: подложка, обрывающаяся по колонке, оставляет в остатке окна текст страницы, едущий
под ней.) */
html:not(.aep-m) .aep-dinner
{
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
height: 100%;
}
/* Pinned. Declared !important because the row carries its place in the page as inline styles, and
an inline left/top/width outranks any rule that does not say so.
The backing is opaque and edged for one reason: pinned, the row has the page running beneath it,
and without a floor the text is read through the buttons.
(Закреплённый вид. Объявлен !important, потому что своё место на странице ряд несёт в inline-стилях,
а inline left/top/width перебивает любое правило, которое не сказало этого.
Подложка непрозрачна и очерчена ровно по одной причине: у закреплённого ряда под ним едет
страница, и без пола текст читается сквозь кнопки.) */
html:not(.aep-m) .aep-dcont.aep-dstick
{
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: 0 !important;
width: auto !important;
height: auto !important;
z-index: 9990;
padding: 9px 20px;
background: #FFFFFF;
border-bottom: 1px solid #E3E6EC;
box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
animation: aep-dslide 0.18s ease-out;
}
html:not(.aep-m) .aep-dcont.aep-dstick .aep-dinner
{
max-width: var(--aep-dw, 963px);
margin: 0 auto;
}
@keyframes aep-dslide
{
from { transform: translateY(-100%); }
to { transform: none; }
}
@media (prefers-reduced-motion: reduce)
{
html:not(.aep-m) .aep-dcont.aep-dstick { animation: none; }
}
html:not(.aep-m) .aep-dnum
{
display: inline-flex;
align-items: center;
gap: 12px;
text-decoration: none !important;
color: #14213D !important;
font-size: 26px;
font-weight: bold;
letter-spacing: 0.4px;
white-space: nowrap;
transition: color 0.12s ease;
}
html:not(.aep-m) .aep-dnum:hover
{
color: #1F6FEB !important;
}
html:not(.aep-m) .aep-drow
{
display: flex;
align-items: center;
gap: 10px;
}
/* One width for all of them. Left to their own labels they came out 125, 133 and 96 wide, and three
buttons of three sizes read as three different kinds of thing rather than one row of equals.
(Одна ширина на всех. Отданные на волю своих подписей, они выходили 125, 133 и 96, и три кнопки
трёх размеров читались как три разные сущности, а не как один ряд равных.) */
html:not(.aep-m) .aep-dbtn
{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 148px;
height: 42px;
padding: 0;
border-radius: 11px;
color: #FFFFFF !important;
text-decoration: none !important;
font-size: 15px;
font-weight: bold;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
html:not(.aep-m) .aep-dbtn:hover
{
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
filter: brightness(1.06);
}
html:not(.aep-m) .aep-dbtn:active
{
transform: translateY(0);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
}
/* 30px of frame puts the marks at 19-21px of ink, level with the 15px bold label beside them. The
button keeps its fixed 148px width, so the frame can be wider than the ink without moving anything.
(30px рамки ставят знаки в 19-21px краски, вровень с полужирной подписью 15px рядом. Кнопка держит
свою заданную ширину 148px, поэтому рамка может быть шире краски, ничего не сдвигая.) */
html:not(.aep-m) .aep-dbtn svg
{
width: 30px !important;
height: 30px !important;
flex: 0 0 30px;
fill: #FFFFFF;
}
html:not(.aep-m) .aep-dbtn-tel { background: #1F6FEB; }
html:not(.aep-m) .aep-dbtn-tg { background: #29A9EB; }
html:not(.aep-m) .aep-dbtn-wa { background: #25D366; }
html:not(.aep-m) .aep-dbtn-viber { background: #7360F2; }
html:not(.aep-m) .aep-dbtn-ig { background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%); }
@media print { html:not(.aep-m) .aep-dbtn { box-shadow: none; } }
/* ---- Page heading on a phone ----
Three things go wrong with a WWB heading the moment the page leaves the 963px canvas, and all three
are invisible on a desktop:
1. CENTRING. It is written as `text-align:center` in the block's style attribute - and the reflow
strips that attribute, so the heading falls back to the page's left alignment. 51 of 59 pages
centre their heading this way, which means 51 pages lose it on a phone.
2. HARD BREAKS. 16 pages carry a
inside the heading, put there to split it into two lines on a
920px canvas. On a 412px screen the line has already wrapped by then, and the break lands in the
middle of a phrase, tearing the heading into ragged pieces.
3. LINE HEIGHT. 18 pages set an interline SMALLER than the type size (43px type on 26px leading is
the worst). On the canvas the heading is one line and nobody notices; on a phone it wraps and
the lines climb on top of each other.
The heading has to become a block for centring to apply at all - `AutoelectricPRO_2.css` makes every
h1 on the site inline, and text-align does nothing on an inline box.
⚠ This rule stands BEFORE the tile-caption rule below on purpose: a caption that happens to carry
the page heading must keep reading as caption text, and the rule that says so has to win by coming
later.
(Три беды случаются с заголовком WWB, как только страница уходит с холста 963 px, и ни одной не
видно на компьютере: центровка задана в style блока, а перестройка этот атрибут снимает (51 из 59
страниц); жёсткий
рассчитан на две строки в 920 px и на экране 412 px рвёт фразу посередине
(16 страниц); интерлиньяж местами МЕНЬШЕ кегля, и при переносе строки налезают друг на друга
(18 страниц). Заголовок обязан стать блочным, иначе выравнивание к нему неприменимо: на сайте все
h1 строчные. Правило стоит ДО правила о подписях плиток намеренно.) */
/* ⚠ `display: block` обязано быть с `!important`, и это не перестраховка. Заголовок несёт СВОЙ
инлайновый `display:inline` прямо в разметке страницы, а инлайновый стиль сильнее любого правила
файла. Пока h1 остаётся строчным, `text-align` к нему неприменим вовсе — центровать было бы нечего.
Сама центровка живёт у блока-обёртки, но её задают то инлайном (и тогда перестройка её снимает), то
постраничным css (и тогда она уцелевает) — полагаться на обёртку нельзя. */
html.aep-m .aep-flow h1
{
display: block !important;
text-align: center !important;
line-height: 1.25 !important;
/* Воздух над заголовком, и он намеренно ЩЕДРЕЕ промежутка между плитками. Раньше эта величина
жила в отступе холста и потому доставалась всем подряд — в том числе витрине, где первыми идут
плитки и где лишний воздух читался разнобоем. Здесь она достаётся только тому, ради чего
заводилась: страницам с заголовком, то есть внутренним, где вверху «НАЗАД В РАЗДЕЛ». Заголовок
— единственное, что стоит между чипами разделов и текстом, и прижатый к чипам он читается их
продолжением, а не началом страницы. */
/* ⚠ `!important` обязателен ровно по той же причине, что и у `display` выше: заголовок несёт в
самой странице инлайновый `style="margin:0"`, а инлайновый стиль сильнее любого правила файла.
Без пометки отступ не применялся НИ НА ОДНОЙ странице, и проверить это можно только замером —
на снимке разница в полтора десятка пикселей не видна. */
margin-top: 18px !important;
}
html.aep-m .aep-flow h1 span,
html.aep-m .aep-flow h1 strong
{
line-height: 1.25 !important;
}
html.aep-m .aep-flow h1 br
{
display: none;
}
/* A tile caption may carry the page heading, which must keep its tag for search engines while
reading as ordinary caption text. Browser defaults would blow it up to display size. */
html.aep-m .aep-tile-cap h1,
html.aep-m .aep-tile-cap h2,
html.aep-m .aep-tile-cap h3,
html.aep-m .aep-tile-cap h4
{
/* `!important` здесь ради того, чтобы перебить правило заголовка страницы выше: подпись плитки
обязана читаться подписью, даже если несёт тег h1 ради поиска. */
display: inline !important;
text-align: inherit !important;
margin: 0;
padding: 0;
font: inherit !important;
color: inherit !important;
}
/* ---- Footer ---- */
/* One quiet line: it marks the end of the page and names the company, and that is all it should do.
The rule it used to sit under and the two section links were what made the bottom of the page feel
crowded, since the permanent contact bar already occupies that edge.
(Одна тихая строка: обозначает конец страницы и называет компанию — и только. Черта над ней и две
ссылки на разделы и создавали тесноту внизу, ведь этот край уже занят постоянной панелью связи.) */
html.aep-m .aep-foot
{
margin: 22px 0 0 0;
/* The same hairline the header draws under itself (.aep-head), so the page opens and closes
with one identical rule and the bottom reads as an ending rather than as content running out.
(Та же тонкая линия, что шапка рисует под собой (.aep-head): страница открывается и
закрывается одинаковой чертой, и низ читается как окончание, а не как обрыв текста.) */
border-top: 1px solid #E3E3E3;
padding: 12px 10px 8px 10px;
text-align: center;
font-size: 12px;
line-height: 1.4;
color: #9A9A9A;
}
/* Приглашение написать — единственное место в подвале, которое обязано быть ПРОЧИТАНО, а не
опознано. Поэтому оно тёмно-синее, а не серое: серый цвет подвала — это цвет служебной подписи, и
всё, что в него окрашено, глаз пропускает вместе с ней. Кегль на пункт крупнее по той же причине.
Ни рамки, ни заливки, ни восклицательного знака: строка снимает возражение, а не продаёт, и
оформленная как объявление она получила бы ровно ту слепоту, от которой уводит. */
html.aep-m .aep-foot-invite
{
margin-top: 9px;
color: #14213D;
font-size: 13px;
line-height: 1.45;
}
/* ---- Permanent contact bar: the only place contacts live on a phone ---- */
.aep-cta
{
display: none;
}
html.aep-m .aep-cta
{
display: block;
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
/* Translucent ON PURPOSE, and this is the one thing that tells a visitor the page continues.
An opaque strip across the bottom is a "false floor": it cuts the page off in a straight line,
the row of tiles that would have peeked out from under it is hidden, and the screen reads as
the end of the page — measured by Nielsen Norman Group as the main reason people stop
scrolling. Half-visible content is the signifier that works, so the strip lets it through and
blurs it instead of covering it; the blur keeps the marks legible over anything.
A browser without backdrop-filter falls back to the flat colour on the line above and simply
loses the hint — nothing breaks.
(Полупрозрачна НАМЕРЕННО, и это единственное, что сообщает посетителю: страница продолжается.
Непрозрачная полоса внизу — «ложный пол»: она отрезает страницу ровной чертой, прячет ряд
плиток, который выглядывал бы из-под неё, и экран читается как конец страницы. Работает
наполовину видимое содержимое — полоса его пропускает и размывает, а не закрывает; размытие
сохраняет читаемость знаков поверх чего угодно.) */
background: rgba(255, 255, 255, 0.97);
background: rgba(255, 255, 255, 0.74);
-webkit-backdrop-filter: saturate(150%) blur(14px);
backdrop-filter: saturate(150%) blur(14px);
border-top: 1px solid rgba(224, 224, 224, 0.9);
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.10);
/* No padding on the sides: the row below centres the buttons itself and its leftover width
collects at the two ends, so a side padding here would be added ON TOP of that remainder.
(По бокам отступов нет: ряд ниже сам центрует кнопки, и его остаток ширины собирается по
краям, — боковой отступ здесь сложился бы С этим остатком.) */
padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)) 0;
}
/* The gap between buttons is HALF of what an even split of the screen would give, and the six of
them sit as one centred group. The formula is written out rather than fixed in pixels so the
halving holds at every width: an even split of six squares leaves seven spaces, (screen - six
squares) / 7 each, so half of that is / 14. What is left over collects at the two ends, which is
why the distance to the screen edge is larger than the distance between buttons - on one axis the
two cannot both be halved and stay equal.
SIX squares of 51px are 306px; both numbers appear in every rule below and must move together.
(ШЕСТЬ квадратов по 51px — это 306px; оба числа стоят в каждом правиле ниже и меняются только
вместе.)
The percentage resolves against this row's own content box, NOT against 100vw. The two are equal
whenever the page behaves, and differ exactly when it does not: a viewport unit measures the
layout viewport, which an in-app browser can report wider than the strip actually shown, and the
row would then be spaced for a screen the visitor does not have.
(Промежуток между кнопками — ПОЛОВИНА того, что дало бы ровное деление экрана, и все шесть стоят
одной группой по центру. Формула выписана, а не задана в пикселях, чтобы половина держалась на
любой ширине: ровное деление шести квадратов оставляет семь промежутков по (экран − шесть
квадратов) / 7, значит половина — это / 14. Остаток собирается по краям, поэтому расстояние до
края экрана больше расстояния между кнопками: по одной оси нельзя и уполовинить оба, и сохранить
их равными.
Процент считается от собственной коробки ряда, а НЕ от 100vw. Они равны, пока страница ведёт себя
прилично, и расходятся ровно тогда, когда нет: единица вьюпорта меряет layout viewport, а
встроенный браузер приложения может объявить его шире реально показанной полосы, и ряд окажется
разложен под экран, которого у посетителя нет.) */
/* СЕТКА из шести колонок, а не свободный ряд, и это принципиально. Ряд листается: на второй странице
каналов бывает меньше, чем мессенджеров на первой, и свободный ряд тогда сузился бы и переставил
кнопки — в том числе вызов, который обязан оставаться ровно под тем же пальцем. Сетка держит шесть
колонок независимо от того, сколько ячеек занято.
(A six-column GRID, not a free row, and this matters: the row pages, the second page can hold fewer
channels than the first, and a free row would then narrow and move the buttons - including the
call, which must stay under the very same finger.) */
html.aep-m .aep-cta-row
{
display: grid;
grid-template-columns: repeat(6, var(--aep-sq));
justify-content: center;
align-items: center;
gap: calc((100% - 6 * var(--aep-sq)) / 14);
}
/* Стрелка стоит в последней колонке всегда — даже когда занятых ячеек меньше шести. */
html.aep-m .aep-cta-row > .aep-cta-btn-more
{
grid-column: 6;
}
/* A square, and the same square in both orientations. Being square is what makes the turn free: a
rectangle has to be transposed and its proportion re-checked against the shorter edge, a square
is its own transpose and simply moves. 51px is still well past the 44px a fingertip needs, and
the smaller square buys room on the axis that is short: six of them stacked come to 306px, which
stands in the height a landscape browser leaves on ANY phone, so one size now serves both
orientations everywhere instead of shrinking on small screens.
(Квадрат — и тот же квадрат в обеих ориентациях. Квадратность и делает поворот бесплатным:
прямоугольник надо транспонировать и заново сверять пропорцию с короткой стороной, а квадрат сам
себе транспонирование и просто переезжает. 51px по-прежнему заметно больше 44px, нужных подушечке
пальца, а меньший квадрат выигрывает место по короткой оси: шесть штук столбиком дают 306px,
что помещается в высоту, оставляемую горизонтальным браузером на ЛЮБОМ телефоне, — поэтому один
размер теперь обслуживает обе ориентации везде, а не уменьшается на малых экранах.) */
/* ⚠⚠⚠ РАЗМЕР КВАДРАТА ОБЪЯВЛЕН ОДИН РАЗ И ТОЛЬКО ЗДЕСЬ. Его берут четверо: сама кнопка, знак внутри
неё, клетки сетки и отступ страницы под полосу. Задать его по месту хотя бы в одном из них — значит
развести их: кнопка 42px, оставленная в клетке 51px, встаёт по середине клетки и молча прибавляет
девять пикселей к промежутку. Именно так и вышло 01.08.2026.
(Declared ONCE and only here: the button, its mark, the grid tracks and the page padding all read
this. Setting it in one place alone silently drives them apart.) */
html.aep-m
{
--aep-sq: 51px;
}
html.aep-m .aep-cta-btn
{
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: var(--aep-sq);
height: var(--aep-sq);
border-radius: 13px;
text-decoration: none;
color: #FFFFFF;
-webkit-tap-highlight-color: transparent;
}
html.aep-m .aep-cta-btn:active
{
filter: brightness(0.92);
}
/* The mark stays UPRIGHT and stays the same size in both orientations. Turning the phone moves the
bar and transposes the button around it; the symbol inside is the one thing that must not follow,
because a phone handset or a paper plane lying on its side reads as a glitch, not as a rotation.
Never put a transform on this rule.
(Знак остаётся ПРЯМЫМ и одного размера в обеих ориентациях. Поворот телефона переносит панель и
транспонирует кнопку вокруг знака; сам знак — единственное, что не должно следовать за ними:
лежащая на боку трубка или бумажный самолётик читаются как сбой, а не как поворот. Никогда не
ставить transform в это правило.) */
/* The box is the whole tile, because each mark's own frame already holds the share of the badge that
brand publishes it at — so the tile IS the badge and the marks come out at 32-35px inside it, the
size a phone's own app icons sit at. Never trim this to the size a mark should appear: doing that
applies the proportion twice and shrinks every mark by a further third.
(Рамка — вся плитка, потому что собственная рамка каждого знака уже держит ту долю значка, при
которой марка публикуется, — то есть плитка И ЕСТЬ значок, а знаки выходят в ней 32-35px, ровно
того размера, в каком стоят собственные значки приложений на телефоне. Никогда не урезать это до
размера, в каком знак должен появиться: так пропорция применяется дважды и каждый знак сжимается
ещё на треть.) */
html.aep-m .aep-cta-btn svg
{
width: var(--aep-sq);
height: var(--aep-sq);
flex: 0 0 auto;
display: block;
fill: #FFFFFF;
}
/* Messenger brand colours: instantly recognisable, which is what makes the tap happen.
Mail has no brand and therefore no given colour; it takes the one shade none of the marks beside
it uses, so the envelope is never mistaken for one of them.
(У почты марки нет и цвета ей никто не назначал — она берёт тот оттенок, которого нет ни у одного
знака рядом, чтобы конверт нельзя было принять за один из них.) */
html.aep-m .aep-cta-btn-tel { background: #1F6FEB; }
html.aep-m .aep-cta-btn-viber { background: #7360F2; }
html.aep-m .aep-cta-btn-tg { background: #29A9EB; }
html.aep-m .aep-cta-btn-wa { background: #25D366; }
/* Глубокий королевский синий, подобранный ПЕРЕБОРОМ, а не на глаз.
Почта ассоциируется с синим, но канонический «почтовый» #0078D4 здесь невозможен: до кнопки
звонка CIEDE2000 всего 5.8 — это тот же цвет. Светло-синее занято Telegram. Перебран весь синий
тон (208..248) с замером ΔE00 до каждой кнопки и контраста к обоим фонам; потолок для синего —
ΔE ≈ 18.5, потому что три соседа уже синие. #1E33CC: до звонка 18.9, до Telegram 38.0, до Viber
16.4; контраст 8.7 на белой панели, белый конверт внутри 8.7.
Янтарный был объективно заметнее (ΔE 32), но читался как «Одноклассники», а оранжевый в
исследованиях предпочтений стоит среди последних — заметность не единственный критерий.
(A deep royal blue chosen by search, not by eye: the canonical mail blue #0078D4 is 5.8 ΔE from
the call button — the same colour to the eye. 18.5 is the ceiling for blue here.) */
html.aep-m .aep-cta-btn-mail
{
background: #1E33CC;
}
/* Instagram is the one mark here that has no single brand colour - its own is a gradient, and a flat
swatch would read as a different service. The five stops are Instagram's own.
(Instagram — единственный знак здесь без одного фирменного цвета: его цвет и есть градиент, а
плоская заливка читалась бы как другой сервис. Пять точек — собственные цвета Instagram.) */
html.aep-m .aep-cta-btn-ig
{
background: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 25%, #D62976 50%, #962FBF 75%, #4F5BD5 100%);
}
html.aep-m .aep-cta-btn-youtube { background: #FF0000; }
html.aep-m .aep-cta-btn-vk { background: #0077FF; }
html.aep-m .aep-cta-btn-drive2 { background: #EC0030; }
/* ---- The way to the rest -------------------------------------------------------------------
The sixth square is not a sixth brand, and it must not look like one. Every button beside it is a
solid brand colour with a white mark; hunting for a seventh colour that no messenger owns would
only produce another coloured square competing with five real marks - and the search for the mail
button already showed the blue range is exhausted.
So this one differs in KIND rather than in hue: a light face with an outline and a dark stroke,
which is the site's own chip language (`.aep-htab` uses exactly this border and this navy). A
person reads "control" before reading the shape - and that is the whole job, because the mark
inside says nothing about a brand, only about direction.
Open, it inverts: navy face, white chevron. The state is announced once, by `aria-expanded`, and
both the colour and the rotation follow from it - there is no second source of truth to drift.
(Шестой квадрат — не шестая марка, и выглядеть ею не должен. Все соседи — сплошной фирменный цвет с
белым знаком; поиск седьмого цвета, которого нет ни у одного мессенджера, дал бы лишь ещё один
цветной квадрат, спорящий с пятью настоящими марками, — а подбор цвета для почты уже показал, что
синий диапазон исчерпан. Поэтому этот отличается ВИДОМ, а не оттенком: светлая грань с обводкой и
тёмным штрихом — это язык чипов самого сайта. Человек прочитывает «управление» раньше, чем форму,
и в этом вся работа. Раскрытый — инвертируется. Состояние объявлено один раз, в `aria-expanded`, и
цвет с поворотом следуют из него: второго источника правды, который мог бы разойтись, нет.) */
html.aep-m .aep-cta-btn-more
{
background: #FFFFFF;
border: 1.5px solid #C6D0E0;
color: #14213D;
padding: 0;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
/* Открытая вторая страница красит кнопку в тёмно-синий: цвет отвечает на вопрос «я сейчас не там,
где обычно» раньше, чем это делает направление шеврона, и возвращает взгляд к кнопке возврата. */
html.aep-m .aep-cta-next .aep-cta-btn-more
{
background: #14213D;
border-color: #14213D;
color: #FFFFFF;
}
/* Шеврон нарисован штрихом, поэтому красится `color`, а не `fill`, и наследует его от кнопки.
⚠ Толщина штриха задана ЗДЕСЬ и перебивает значение из самой картинки: повёрнутый на 90° штрих
выглядит тяжелее вертикального — горизонтальные линии на экране всегда кажутся толще при той же
ширине, — а шеврон повёрнут почти всегда. */
/* Шеврон — единственный знак, который НЕ заполняет грань: у марок собственная рамка уже держит нужную
долю, а у него рамки нет, и во всю грань он выглядел бы вдвое тяжелее соседей. Доля 0.55 от
квадрата, чтобы он оставался тем же знаком при любом его размере. */
html.aep-m .aep-cta-btn-more svg
{
width: calc(var(--aep-sq) * 0.55);
height: calc(var(--aep-sq) * 0.55);
fill: none;
stroke: currentColor;
stroke-width: 1.8;
transition: transform 0.18s ease;
}
html.aep-m .aep-cta-btn-more svg path
{
stroke-width: 1.8;
}
/* Шеврон нарисован смотрящим ВВЕРХ, а поворачивается под смысл страницы: на первой он показывает
«дальше» — вправо, туда же, куда сместится ряд; на второй разворачивается и показывает «назад».
Одна отрисовка, четыре положения (два здесь и два в горизонтальной раскладке ниже). */
html.aep-m .aep-cta-btn-more svg
{
transform: rotate(90deg);
}
html.aep-m .aep-cta-next .aep-cta-btn-more svg
{
transform: rotate(-90deg);
}
/* Появление новых значков: они не выезжают ниоткуда, а проступают со сдвигом с той стороны, откуда
пришли, — короткое движение подтверждает «мы сместились дальше» и тут же заканчивается.
⚠⚠⚠ ПРАВИЛО ОБЯЗАНО БЫТЬ ОГРАНИЧЕНО КЛАССОМ `aep-cta-anim`, который живёт доли секунды после смены
страницы. Объявленное у кнопок ПОСТОЯННО, оно превращается в мину: браузер запускает анимацию
заново при любой смене `animation-name`, а значит — в тот момент, когда с панели снимается класс
волны и имя возвращается к этому. Замерено: прозрачность падала в НОЛЬ и возвращалась за 180 мс,
все пять значков разом. Со стороны это читается как резкое мерцание сразу после волны, и владелец
поймал это первым.
Совпасть с волной ограниченное правило не может: класс снимается через 260 мс, а волна начинается
не раньше чем через 600 мс после появления подвала.
(⚠ Must stay scoped: an animation declared permanently restarts on ANY change of animation-name —
including the moment the wave class is dropped. Measured: opacity fell to zero for 180 ms.) */
html.aep-m .aep-cta-row.aep-cta-anim > a
{
animation: aep-cta-slide 0.2s ease both;
}
@keyframes aep-cta-slide
{
from { opacity: 0; transform: translateX(10px); }
to { opacity: 1; transform: translateX(0); }
}
/* ---- The wave: a single pass down the buttons when the reader reaches the footer ----------
Момент, длительность и однократность решаются в `mobile.js`; здесь только КАК это выглядит.
Растёт кнопка, а не полоса, и растёт ИЗ СВОЕГО ЦЕНТРА — ни один сосед не сдвигается, высота
панели не меняется, страница не перекомпоновывается. Работает только `transform`, то есть
композитор: ни расчёта раскладки, ни перерисовки, ни следа в INP. Никогда не заменять это на
`width`/`height`/`margin` — там каждый кадр стоит пересчёта всей полосы.
Числа: 12 % прироста, 280 мс на кнопку, шаг 80 мс, шесть кнопок — вся волна 0.68 с. NN/g даёт на
элемент 100–500 мс и ease-out (заметный старт, мягкая посадка); свыше 500 мс движение читается
обременительным. Общая длительность важна и юридически: WCAG 2.2.2 требует средство остановки для
движения дольше пяти секунд — одноразовая волна на 0.7 с под это не подпадает, и потому кнопки
«стоп» здесь нет намеренно.
Порядок задаёт `--aep-i`, номер кнопки в разметке. Стоймя это слева направо, на боку сверху вниз —
верно в обоих случаях без единой проверки ориентации. */
@keyframes aep-cta-wave
{
0% { transform: scale(1); }
38% { transform: scale(1.12); }
100% { transform: scale(1); }
}
/* Ход волны: 420ms на кнопку, шаг 150ms — вся волна из шести кнопок укладывается в 1.17 s.
⚠ ЭТИ ЧИСЛА ПОДОБРАНЫ ПО ЖИВОМУ ВОСПРИЯТИЮ, а не по вкусу: прежние 280/80 ms одинаково стоят
в разметке на всех телефонах, но iPhone с экраном 120 Гц рисует их безупречно гладко, а Android
при одновременной прокрутке теряет кадры и невольно растягивает движение. Владелец сравнил два
телефона и назвал эталоном Android («на iPhone пробегает вдвое быстрее») — поэтому темп замедлен
до того, что видно на Android, и одинаков теперь ВЕЗДЕ.
⚠ Меняя эти числа, править и таймер снятия класса в `runWave()` (mobile.js): класс обязан
держаться дольше, чем длится вся волна, иначе она обрывается на полпути. */
html.aep-m .aep-cta-wave .aep-cta-btn
{
animation: aep-cta-wave 420ms cubic-bezier(0.2, 0, 0, 1) both;
animation-delay: calc(var(--aep-i, 0) * 150ms);
}
/* ⚠ Просьбу о покое исполнять БУКВАЛЬНО — не «помягче», а совсем. Движение способно вызвать приступ
у людей с вестибулярными нарушениями, эпилепсией и мигренью, и для них это вопрос не вкуса.
Проверка стоит и здесь, и в `mobile.js`: там она ещё и не даёт израсходовать суточный лимит на
того, кто волны всё равно не увидит. */
@media (prefers-reduced-motion: reduce)
{
html.aep-m .aep-cta-wave .aep-cta-btn
{
animation: none;
}
}
/* ---- Phone held sideways -----------------------------------------------------------------
Turned on its side a phone has width to spare and almost no height: the strip across the bottom
took about a third of what was left and covered the very content it sits under. So the same four
buttons stand in a column at the right edge, and the page gives up width instead of height.
The button is NOT redesigned here and not even transposed - it is a square, so it simply moves.
Colours, radius, size and mark all stay; the bar turns, the button does not.
⚠ THE SQUARE IS NOT THE PORTRAIT ONE. Standing up, six squares are spread over the WIDTH and the
width is plentiful, so the size is set by the finger; lying down they are spread over the HEIGHT,
the height is all there is, and the size is set by what is left over. Freezing one number for both
spends the surplus on air: at 412px of height six 51px squares leave 68px unused, and on the phones
whose landscape browser keeps less than 380px the frozen figure had to shrink to 42px — smaller
than upright, on the very screen that had room to spare. So the square is COMPUTED here: an even
seven-way split of the height with a 7px space, floored at the fingertip and capped so it never
outgrows a badge.
(⚠ КВАДРАТ ЗДЕСЬ НЕ ТОТ, ЧТО СТОЙМЯ. Стоймя шесть квадратов разложены по ШИРИНЕ, а ширины вдоволь,
и размер задаёт палец; на боку они разложены по ВЫСОТЕ, высота — это всё, что есть, и размер
задаёт остаток. Одно замороженное число на обе ориентации тратит остаток на воздух: при высоте
412px шесть квадратов по 51px оставляют 68px впустую, а на телефонах, где горизонтальный браузер
держит меньше 380px, замороженное число приходилось опускать до 42px — МЕНЬШЕ, чем стоймя, ровно
там, где место было. Поэтому квадрат здесь ВЫЧИСЛЯЕТСЯ: ровное деление высоты на семь при
промежутке 7px, с полом по подушечке пальца и потолком, чтобы он не перерос значок.)
Промежуток 7px стоит во всех семи местах сразу — между кнопками, по концам столбика и до правого
края экрана, — потому что 6 × квадрат + 7 × 7px и есть вся высота. Уполовинивать его, как стоймя,
не нужно и нечего: там остаток шёл на края по одной оси, здесь деление ровное.
Страница не закрывается: запас переезжает с нижнего края на правый и учитывает вырез экрана. */
@media (orientation: landscape) and (max-height: 560px)
{
html.aep-m
{
/* Пол 42px — подушечка пальца (44px рекомендуют, 42 с промежутком 7 дают ту же зону касания).
Потолок 60px — дальше плитка перестаёт читаться значком приложения и начинает спорить с
содержимым страницы. Между ними размер идёт за высотой экрана. */
--aep-sq: clamp(42px, (100svh - 49px) / 6, 60px);
}
html.aep-m body
{
padding-bottom: 12px;
padding-right: calc(72px + env(safe-area-inset-right, 0px));
padding-right: calc(var(--aep-sq) + 7px + 7px + env(safe-area-inset-right, 0px));
}
html.aep-m .aep-cta
{
top: 0;
right: 0;
bottom: 0;
left: auto;
transform: none;
width: auto;
background: transparent;
border-top: 0;
box-shadow: none;
padding: 0 calc(7px + env(safe-area-inset-right, 0px)) 0 0;
}
/* Столбик — та же сетка, повёрнутая: шесть СТРОК вместо шести колонок. Держит она то же самое —
неподвижность вызова и стрелки при листании.
⚠ `align-content` обязан быть `center`, как и `justify-content` у стоячего ряда: панель
ПОВОРАЧИВАЕТСЯ, а не перекладывается по другим правилам, и остаток обязан делиться поровну между
концами. Прижатый к верху столбик оставляет снизу всю разницу разом и читается съехавшим. */
html.aep-m .aep-cta-row
{
grid-template-columns: var(--aep-sq);
grid-template-rows: repeat(6, var(--aep-sq));
align-content: center;
justify-content: end;
height: 100%;
gap: 7px;
}
html.aep-m .aep-cta-row > .aep-cta-btn-more
{
grid-column: 1;
grid-row: 6;
}
/* На боку ряд идёт сверху вниз, поэтому «дальше» — это ВНИЗ, а «назад» — вверх. */
html.aep-m .aep-cta-btn-more svg
{
transform: rotate(180deg);
}
html.aep-m .aep-cta-next .aep-cta-btn-more svg
{
transform: rotate(0deg);
}
html.aep-m .aep-cta-row.aep-cta-anim > a
{
animation-name: aep-cta-slide-down;
}
@keyframes aep-cta-slide-down
{
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* The shadow the buttons need once the white panel behind them is gone and they stand directly
on the page. (Тень, нужная кнопкам, когда белой панели за ними больше нет и они стоят прямо
на странице.) */
html.aep-m .aep-cta-btn
{
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.24);
}
}
/* Отдельного правила для низкого горизонтального экрана здесь БОЛЬШЕ НЕТ, и возвращать его не нужно:
`clamp` выше покрывает весь диапазон разом — 60px на просторной высоте, 42px на самой тесной, и
плавно между ними. Второй порог означал бы второе место, где задан размер, а размер объявлен один
раз (см. `--aep-sq`) именно затем, чтобы клетки, знак и отступ страницы не разошлись с кнопкой.
(No separate rule for a short landscape screen, and none is to be added back: the clamp above
covers the whole range in one place.) */
/* ============================================================================
The last rule in the file, and it is here for what its POSITION proves.
The gate in every page head has to decide, when the script is late or gone,
whether to keep the phone layout or hand the visitor the desktop canvas. That
turns entirely on whether this stylesheet is here, because this file carries
most of the layout by itself - and "here" has to mean COMPLETE, not "the
request succeeded". A stylesheet that arrives cut in half loads without an
error and takes the site down with it; that has happened here, and it left
the phone site blank for the whole six hours the cache held.
Declared last, this property answers both questions at once: a computed style
that reads back 1 proves the file reached its final byte. Do not move it, and
do not add rules after it.
(Последнее правило в файле, и стоит оно здесь ради того, что доказывает его
МЕСТО. Гейт в голове каждой страницы обязан решить, когда скрипт опаздывает
или пропал, держать телефонную раскладку или отдать посетителю десктопный
холст. Это зависит целиком от того, здесь ли этот стиль, потому что он несёт
большую часть раскладки сам, — и «здесь» обязано значить ЦЕЛИКОМ, а не
«запрос удался». Стиль, доехавший разрезанным пополам, грузится без ошибки и
уносит сайт с собой; здесь это уже случалось и оставило мобильный сайт пустым
на все шесть часов, что держался кэш.
/* ---- Wide diagrams (.aep-wide, ставит reflow) ------------------------------------------
A diagram keeps its drawn size and scrolls sideways INSIDE its own box, so the page body
never scrolls horizontally. Both rules must out-rank the blanket ".aep-flow *" reset:
the element selector carries the extra class, the img selector carries three parts.
(Схема сохраняет родной размер и прокручивается вбок ВНУТРИ своего блока — сама страница
вбок не едет. Оба правила обязаны перебивать общий сброс ".aep-flow *": у элемента —
дополнительный класс, у картинки — три звена селектора.) */
html.aep-m .aep-flow.aep-wide
{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* ---- Icon rows (.aep-iconrow собирает reflow) --------------------------------------------
Tiny linked marks ride one wrapping flex row at badge size; margins of the ".aep-pic"
spacing rule are cancelled — inside the row the marks space themselves.
(Мелкие значки едут одной flex-строкой в размере значка; отступы правила ".aep-pic"
гасятся — внутри строки значки разводятся сами.) */
/* A banner picture-part opens its tile card edge to edge. (Баннер-часть открывает
карточку от края до края.) */
html.aep-m .aep-tile-banner
{
display: block;
width: 100%;
height: auto;
}
html.aep-m .aep-iconrow
{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 8px 0;
}
html.aep-m .aep-iconrow .aep-icon
{
margin: 0 !important;
}
html.aep-m .aep-iconrow .aep-icon img
{
height: 28px !important;
width: auto !important;
max-width: none !important;
}
/* ---- Wide tables (класс ставит markWideTables) -------------------------------------------
Minimum width plus normal word wrapping: the cells stop crushing words letter by letter
and the existing table overflow-x rule turns into a real sideways scroll.
(Минимальная ширина плюс обычные переносы: ячейки перестают давить слова по букве, а
существующее правило overflow-x у таблиц превращается в настоящую боковую прокрутку.) */
html.aep-m .aep-tblwrap
{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
margin: 8px 0;
}
html.aep-m table.aep-tblwide
{
min-width: 640px !important;
}
html.aep-m table.aep-tblwide td,
html.aep-m table.aep-tblwide th,
html.aep-m table.aep-tblwide td *,
html.aep-m table.aep-tblwide th *
{
word-break: normal !important;
overflow-wrap: normal !important;
}
html.aep-m .aep-flow.aep-wide img
{
max-width: none !important;
width: auto !important;
height: auto !important;
}
/* ============================================================================
Выбор способа написать письмо (компьютер)
⚠ Узнать заранее, есть ли у человека почтовая программа, НЕЛЬЗЯ: такого
свойства нет ни в одном браузере, и это сделано намеренно — список
установленных программ был бы меткой для слежки. Единственный известный
приём (засечь потерю фокуса после нажатия) врёт в обе стороны. Поэтому
здесь ничего не угадывается: человеку предлагается выбрать способ, и любой
из них работает без программы на компьютере.
Правила видны и без класса html.aep-m: файл грузится на любом устройстве,
а выбор нужен именно там, где мобильного слоя нет.
============================================================================ */
.aep-mailpick
{
position: fixed;
inset: 0;
z-index: 2147483000;
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
background: rgba(10, 18, 38, .55);
}
.aep-mailpick[hidden]
{
display: none;
}
.aep-mailpick-box
{
position: relative;
width: 100%;
max-width: 360px;
padding: 22px 22px 18px;
border-radius: 16px;
background: #FFFFFF;
box-shadow: 0 18px 50px rgba(10, 18, 38, .35);
font-family: Tahoma, Arial, sans-serif;
text-align: left;
}
.aep-mailpick-head
{
margin: 0 0 14px;
font: 700 18px/1.3 Tahoma, Arial, sans-serif;
color: #14213D;
}
.aep-mailpick-item,
.aep-mailpick-item:visited
{
display: block;
margin: 0 0 8px;
padding: 12px 14px;
border: 1.5px solid #C6D0E0;
border-radius: 11px;
background: #FFFFFF;
color: #14213D;
font: 15px/1.25 Arial, Helvetica, sans-serif;
text-decoration: none;
}
.aep-mailpick-item:hover,
.aep-mailpick-item:focus-visible
{
border-color: #1F6FEB;
background: #F2F6FF;
color: #0000CD;
text-decoration: none;
}
.aep-mailpick-addr
{
margin: 14px 0 8px;
padding-top: 13px;
border-top: 1px solid #E3E6EC;
font: 14px/1.4 Arial, Helvetica, sans-serif;
color: #6B7686;
word-break: break-all;
user-select: all;
}
.aep-mailpick-copy
{
display: block;
width: 100%;
padding: 11px 14px;
border: 1.5px solid #C6D0E0;
border-radius: 11px;
background: #F7F9FC;
color: #14213D;
font: 15px/1.25 Arial, Helvetica, sans-serif;
cursor: pointer;
}
.aep-mailpick-copy:hover
{
border-color: #1F6FEB;
color: #0000CD;
}
.aep-mailpick-close
{
position: absolute;
top: 8px;
right: 8px;
width: 34px;
height: 34px;
border: 0;
border-radius: 10px;
background: transparent;
color: #6B7686;
font: 22px/1 Tahoma, Arial, sans-serif;
cursor: pointer;
}
.aep-mailpick-close:hover
{
background: #F2F6FF;
color: #14213D;
}
/* ============================================================================
Объявленное последним, это свойство отвечает на оба вопроса разом: вычисленный
стиль, возвращающий 1, доказывает, что файл дошёл до последнего байта. Не
переносить и не добавлять правил после него.)
============================================================================ */
html.aep-m
{
--aep-css: 1;
}