*/
.dx { transform: translateX(var(--dx, 0)); }
/* --- Вертикальный ритм ---------------------------------------------------
Ряд макета = --rh (43px). Отступ строки заголовка «лесенкой» и сдвиг
блока на N рядов вниз.
------------------------------------------------------------------------- */
.rows-1 { margin-top: calc(var(--rh) * 1); }
.rows-2 { margin-top: calc(var(--rh) * 2); }
.rows-3 { margin-top: calc(var(--rh) * 3); }
.rows-4 { margin-top: calc(var(--rh) * 4); }
.rows-6 { margin-top: calc(var(--rh) * 6); }
/* --- Линии страницы -------------------------------------------------------
ВСЕ линии сайта одной толщины и одного цвета — так в макете:
`border: 1.5px solid rgba(16, 16, 16, 0.15)`. Это сетка колонок в 3, 4 и 6
блоках, вертикали 2 блока, разделители FAQ и подчёркивания полей формы.
Границей их не рисуем: браузер округляет `border-width` до целого пикселя
(1.5 → 1), и горизонтали выходили бы легче вертикалей — ровно то, чего
надо избежать. Поэтому линия — это либо фон элемента шириной --line-w
(вертикали и сетка), либо внутренняя тень (там, где у элемента есть
содержимое и своя коробка под линию не нужна).
Толщина и цвет живут ровно в одном месте: --line-w и --c-line в tokens.css.
Ниже — готовые значения тени по сторонам и классы, если линию удобнее
навесить прямо в разметке. Место применения задаёт только длину и
положение, никогда — толщину и цвет.
------------------------------------------------------------------------- */
:root {
--rule-top: inset 0 var(--line-w) 0 var(--c-line);
--rule-bottom: inset 0 calc(-1 * var(--line-w)) 0 var(--c-line);
--rule-left: inset var(--line-w) 0 0 var(--c-line);
--rule-right: inset calc(-1 * var(--line-w)) 0 0 var(--c-line);
}
.rule-top { box-shadow: var(--rule-top); }
.rule-bottom { box-shadow: var(--rule-bottom); }
.rule-left { box-shadow: var(--rule-left); }
.rule-right { box-shadow: var(--rule-right); }
/* Вертикальная линия отдельным элементом: ширина отсюда, высота и положение
с места применения. */
.rule-v {
width: var(--line-w);
background: var(--c-line);
}
/* --- Декоративные вертикальные линии -------------------------------------
13 линий по границам 12 колонок, толщина --line-w, цвет --c-line.
Вешается на .section, которой линии нужны по макету (блоки 2, 3, 4, 6, футер).
Секция лежит внутри .container (у нас это ), поэтому
её ширина уже равна 12 колонкам — никаких своих полей ::before не добавляет,
иначе линии разъедутся с колонками .row:
------------------------------------------------------------------------- */
.has-lines::before {
content: "";
position: absolute;
inset-block: 0;
inset-inline: 0;
z-index: 0;
pointer-events: none;
background-image: linear-gradient(
to right,
var(--c-line) 0 var(--line-w),
transparent var(--line-w)
);
background-size: calc(100% / var(--line-cols)) 100%;
/* последняя линия — правым краем: градиент рисует только начала плиток */
box-shadow: var(--rule-right);
}
/* содержимое секции — над линиями */
.has-lines > * { position: relative; z-index: 1; }
/* Vector 6 */
.has-lines-3 .col-4 {
position: relative;
}
/*.has-lines-3 .col-4::after {*/
/* content: "";*/
/* position: absolute;*/
/* left: 50%;*/
/* top: 0;*/
/* bottom: 0;*/
/* width: 1.5px;*/
/* background: rgba(16, 16, 16, 0.15);*/
/* transform: translateX(-50%);*/
/*}*/
/*.has-lines-3 .col-4:last-child::after {*/
/* display: none;*/
/*}*/
/*.has-lines-3::before {*/
/* content: "";*/
/* position: absolute;*/
/* inset-block: 0;*/
/* inset-inline: 0;*/
/* z-index: 0;*/
/* pointer-events: none;*/
/* max-width: var(--layout-max);*/
/* margin-inline: auto;*/
/* border-inline: 450px solid transparent;*/
/* background-clip: content-box;*/
/* background-image: linear-gradient(*/
/* to right,*/
/* var(--c-line) 0 var(--line-w),*/
/* transparent var(--line-w)*/
/* );*/
/* background-size: calc(100% / 2) 100%;*/
/* box-shadow: inset calc(-1 * 1.5px) 0 0 rgba(16, 16, 16, 0.15);*/
/*}*/
/*!* содержимое секции — над линиями *!*/
/*.has-lines-3 > * { position: relative; z-index: 1; }*/
/*@media (max-width: 991.98px) {*/
/* .has-lines-3::before { display: none; } !* на узком экране линии не по макету *!*/
/*}*/
/* --- Мобильная раскладка -------------------------------------------------
Макет 498: поля 15, три колонки по 156. Подробности и замеры — MOBILE.md.
------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
/* Линии идут по границам КОЛОНОК МАКЕТА, а не окна, и стоят ПО ЦЕНТРУ
границы: в макете это 15 / 171 / 327 / 483, то есть полоса 1.5px
занимает 14.25…15.75. Отсюда две поправки против десктопа:
· коробку раздвигаем на полтолщины в каждую сторону (14.25…483.75 —
ровно 469.5, как в экспорте этой группы из Figma);
· плитку считаем от ширины БЕЗ последней полосы, иначе 469.5/3 = 156.5
и вторая с третьей уезжают на четверть пикселя.
Правая полоса приходит из box-shadow по внутреннему краю коробки. */
.has-lines::before {
inset-inline: calc(var(--layout-pad) - var(--line-w) / 2);
background-size: calc((100% - var(--line-w)) / var(--line-cols)) 100%;
}
/* Десктопные доводки полей: на мобилке поле одно и задаётся токеном,
иначе сетка разъезжается с линиями. .container-25 висит на секции —
ему поле нужно; .container-13 лежит ВНУТРИ неё, и своё поле только
сложилось бы с внешним, уводя колонки с линий. */
.container-25 {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--container-pad) !important;
padding-right: var(--container-pad) !important;
}
.container-13 {
margin-inline: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Секция с линиями сама несёт поля, поэтому .custom-container на ней
не нужен — но если стоит, поля не должны сложиться вдвое. */
.has-lines.custom-container {
padding-left: var(--container-pad) !important;
padding-right: var(--container-pad) !important;
}
}
/* --- Отладочная сетка ----------------------------------------------------
Клавиша G (см. js/main.js) — накладывает колонки поверх всей страницы,
чтобы сверять вёрстку с рендером макета (design-ref/).
------------------------------------------------------------------------- */
.is-debug-grid::after {
content: "";
position: fixed;
inset: 0;
z-index: 9999;
pointer-events: none;
max-width: var(--layout-max);
margin-inline: auto;
border-inline: var(--layout-pad) solid transparent;
background-clip: content-box;
background-image: linear-gradient(
to right,
rgba(255, 0, 80, 0.14) 0 calc(100% / var(--line-cols)),
transparent 0
);
background-size: calc(200% / var(--line-cols)) 100%;
outline: 1px solid rgba(255, 0, 80, 0.35);
outline-offset: calc(-1 * var(--layout-pad));
}
.sdjfhkldsj {
/* Vector 13 */
position: absolute;
width: 0px;
height: 1061px;
left: 819px;
top: 22974px;
border: 1.5px solid rgba(16, 16, 16, 0.15);
transform: rotate(-90deg);
/* Vector 11 */
position: absolute;
width: 0px;
height: 1840px;
left: 40px;
top: 22301px;
border: 1.5px solid rgba(16, 16, 16, 0.15);
transform: rotate(-90deg);
/* Vector 7 */
position: absolute;
width: 0px;
height: 3797px;
left: 1116px;
top: 12687px;
border: 1.5px solid rgba(16, 16, 16, 0.15);
}