<- сюда встаёт модуль
Отсюда две правки, обе срабатывают только когда модуль на странице.
1. Заголовок «Вакансии» рисует шаблон, а у модуля свой H1 «РАБОТА,
КОТОРАЯ ДВИГАЕТ ТЕХНИКУ ВПЕРЁД». Два H1 — дубль для поиска и лишний
заголовок для читателя; прячем шаблонный.
2. Колонку задаёт сам модуль через .zt-shell. Если оставить ширину
и поля у .container, они сложатся с полями .zt-shell, и модуль станет
уже шапки — а «по ширине шапки» заказчик проверяет первым делом.
Через :has, поэтому другие страницы правила не задевают. В браузере
без :has они просто не сработают: останется лишний заголовок и модуль
будет уже шапки, но вёрстка не развалится. Тот же приём, что у страницы
«Сертификаты» (certificates-page.css). */
body:has(#ztCareers10d) .zt-page-heading--content {
display: none;
}
.content-area-white > .container:has(#ztCareers10d),
.zt-page-content-area > .container:has(#ztCareers10d) {
width: auto;
max-width: none;
padding-right: 0;
padding-left: 0;
}
/* 3. Внешний .container страницы поля не отдаёт: site-shell.css задаёт их
с !important, и в нём же лежат хлебные крошки — сними поля, и крошки
уедут к самому краю. Поэтому не снимаем, а вычитаем: модуль расходится
отрицательными полями ровно на ту же величину, что добавил контейнер,
и дальше колонку задаёт его собственный .zt-shell. Переменная
--zt-site-shell-gutter меняется по тем же ступеням, что и поля шапки
(28 / 20 / 14 px), поэтому левый край модуля совпадает с логотипом
на любой ширине.
Замер на бою до правки: логотип начинался на 20 px, а hero — на 40:
поля контейнера и модуля складывались. */
.container > .careers10d {
/* !important обязателен: `.zt-shell` в zt-home-unify.css задан
с `margin: auto !important` и `padding: … !important`, без него
правило просто не применяется. `width: auto` — потому что ширина
у .zt-shell стоит в 100 %: без него блок сдвинется влево, но
не расширится, и правый край уедет внутрь на те же 20 px. */
width: auto !important;
margin-right: calc(-1 * var(--zt-site-shell-gutter, 20px)) !important;
margin-left: calc(-1 * var(--zt-site-shell-gutter, 20px)) !important;
}
/* Пропорции картинок модуля: если ширину задаёт CSS, а высота осталась
в атрибуте разметки, браузер растягивает изображение. Один раз на всех. */
.careers10d img {
max-width: 100%;
}
.careers10d picture > img {
height: auto;
}
.careers10d__sprite {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
}
.careers10d__icon {
width: 1.25em;
height: 1.25em;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
.careers10d :is(a, button):focus-visible {
/* Фокус комплекта: 3px полупрозрачного янтарного с отступом. */
outline: 3px solid rgba(255, 184, 0, .48);
outline-offset: 3px;
}
/* Надзаголовок — плашка в жёлтой рамке, как «О КОМПАНИИ «ЗИПТЕХ СЕРВИС»»
на главной (правка N-734 от 06.09.2026): прозрачный фон, рамка 1 px,
радиус 8, Manrope 12/700 капсом. */
.careers-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
padding: 7px 11px;
border: 1px solid var(--careers-amber);
border-radius: 8px;
color: var(--careers-amber);
font-family: var(--careers-font-btn);
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
1. Hero
-------------------------------------------------------------------------- */
.careers-hero {
position: relative;
display: flex;
align-items: center;
min-height: 430px;
overflow: hidden;
border-radius: var(--careers-radius-xl);
background: #eef1f2 center right / cover no-repeat;
}
/* Белый градиент слева — ради контраста текста (спецификация §4).
06.09.2026 его укорачивали (плотная зона 26 %, спад до 52 %), чтобы
не засвечивать лица, но заказчик вернул прежнюю силу: плотная зона
35 %, спад до 70 % — текст читается увереннее. */
.careers-hero::after {
content: '';
position: absolute;
z-index: 1;
inset: 0;
background: linear-gradient(90deg,
rgba(255, 255, 255, .98) 0%,
rgba(255, 255, 255, .93) 35%,
rgba(255, 255, 255, .55) 52%,
rgba(255, 255, 255, 0) 70%);
pointer-events: none;
}
/* Левый отступ нулевой: текст hero должен начинаться там же, где
заголовок «Актуальные вакансии» и карточки под ним (правка заказчика
06.09.2026 — строки уезжали вправо на 52 px). */
.careers-hero__copy {
position: relative;
z-index: 2;
width: 64%;
padding: 52px 52px 52px 0;
}
/* Заголовки модуля набраны как заголовки главной (правка N-735
от 06.09.2026): Russo One 700 капсом с трекингом −0,03em. */
.careers-hero__title {
max-width: 700px;
margin: 0;
font-family: var(--careers-font-head);
/* Russo One шире шрифта комплекта, поэтому верхняя граница 56 вместо 68. */
font-size: clamp(28px, 3.4vw, 52px);
font-weight: 700;
line-height: 1.1;
letter-spacing: -.03em;
text-transform: uppercase;
}
/* Вторая строка заголовка — жёлтым и с новой строки, как в референсе.
font: inherit обязателен: глобальные стили сайта сажают span внутри
заголовка на 16 px и гарнитуру текста; гарнитуру, как и на кнопках,
держит правило с !important — отсюда хак специфичности. */
.careers-hero__title span {
display: block;
color: var(--careers-amber-strong);
font: inherit;
}
.careers10d .careers-hero__title span:not(#zt_):not(#zt_),
.careers10d .careers-apply__title span:not(#zt_):not(#zt_),
.careers10d .careers-panel__title span:not(#zt_):not(#zt_) {
font-family: inherit !important;
}
/* Плашки-надзаголовки и бейджи набраны Manrope — как надзаголовок
«О КОМПАНИИ «ЗИПТЕХ СЕРВИС»» на главной. Остальной текст модуля
глобальное правило сайта и так держит на Tektur, что эталону
соответствует, поэтому гарнитуру ему не навязываем. */
.careers10d .careers-kicker:not(#zt_):not(#zt_),
.careers10d .careers-card__badge:not(#zt_):not(#zt_) {
font-family: var(--zt-font-btn, 'Manrope', 'Inter', system-ui, Arial, sans-serif) !important;
}
.careers-hero__lead {
max-width: 620px;
margin: 24px 0 0;
color: var(--careers-muted);
/* Абзац главной: Tektur 17/400 с интерлиньяжем 1,6. Межстрочный
задаём явно во всех абзацах модуля: глобальные стили сайта сажают
их на line-height 1.0, и строки слипаются. */
font-size: 17px;
font-weight: 400;
line-height: 1.6;
}
.careers-hero__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
}
/* Мобильное фото — отдельным рядом между текстом и кнопками
(правка заказчика 06.09.2026); на десктопе его нет. */
.careers-hero__mobile {
display: none;
}
/* --------------------------------------------------------------------------
2. Кнопки
-------------------------------------------------------------------------- */
/* Подпись кнопки — как у кнопок шапки (правка N-727 от 06.09.2026):
Tektur 15/700 капсом с трекингом 0,16 px. Гарнитуру приходится
защищать хаком специфичности: глобальное правило zt-redesign.css
держит на кнопках Manrope через !important. */
.careers-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 48px;
padding: 0 22px;
border: 1px solid transparent;
border-radius: var(--careers-radius-md);
background: var(--careers-amber);
color: #1f242a;
box-shadow: 0 9px 20px rgba(255, 184, 0, .2);
cursor: pointer;
font-size: 15px;
font-weight: 700;
line-height: 1;
letter-spacing: .16px;
text-transform: uppercase;
text-decoration: none;
transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.careers10d .careers-button:not(#zt_):not(#zt_),
.careers10d button.careers-filter:not(#zt_):not(#zt_):not(#zt_) {
/* !important обязателен: zt-redesign.css держит на кнопках Manrope
тоже через !important, специфичности одной мало. Фильтры — тоже
кнопки, а по эталону главной это Tektur. */
font-family: var(--zt-font, 'Tektur', 'Inter', system-ui, Arial, sans-serif) !important;
}
.careers-button:hover {
background: #ffc329;
color: #1f242a;
transform: translateY(-1px);
}
.careers-button:active {
background: var(--careers-amber-hover);
transform: none;
}
.careers-button--secondary {
border-color: #cfd4da;
background: rgba(255, 255, 255, .82);
color: var(--careers-ink);
box-shadow: none;
}
.careers-button--secondary:hover {
border-color: var(--careers-ink);
background: #fff;
color: var(--careers-ink);
transform: none;
}
.careers-button__arrow {
width: 18px;
height: 18px;
}
/* --------------------------------------------------------------------------
3. Вакансии
-------------------------------------------------------------------------- */
.careers-vacancies {
margin-top: 72px;
}
.careers-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 26px;
}
/* Капс по правке N-729, жирность и трекинг главной — по N-735. */
.careers-section__title {
margin: 0;
font-family: var(--careers-font-head);
font-size: clamp(24px, 2.4vw, 36px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.03em;
text-transform: uppercase;
}
.careers-section__all {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--careers-amber-strong);
font-size: 15px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
}
.careers-section__all:hover {
color: var(--careers-amber-strong);
text-decoration: underline;
}
.careers-section__all svg {
width: 18px;
height: 18px;
}
/* Фильтры по направлениям. Это кнопки, а не ссылки: активная несёт
aria-pressed="true" (спецификация §5). Без JS все карточки видны. */
.careers-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.careers-filter {
min-height: 42px;
padding: 0 18px;
/* Обводка жёлтая и у неактивных пунктов (правка заказчика 06.09.2026). */
border: 1px solid var(--careers-amber);
/* Скругление как у кнопок модуля, а не таблетка. */
border-radius: var(--careers-radius-md);
background: #fff;
color: #4b545f;
cursor: pointer;
/* Пункт меню главной: Tektur 15/500; активный — как кнопка, 700. */
font-size: 15px;
font-weight: 500;
transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.careers-filter:hover {
border-color: var(--careers-amber-hover);
color: var(--careers-ink);
}
/* Активный пункт: тот же жёлтый, что у кнопки «Каталог» в шапке
(#ffb800), подпись белая — по указанию заказчика 06.09.2026.
Контраст белого на этом фоне 1,74:1 при норме 4,5:1 — принятое
отступление, зафиксировано в журнале и реестре. */
.careers-filter.is-active {
border-color: var(--careers-amber);
background: var(--careers-amber);
color: #fff;
font-weight: 700;
}
.careers-filter.is-active:hover {
background: var(--careers-amber-hover);
border-color: var(--careers-amber-hover);
color: #fff;
}
.careers-vacancies__count {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
/* Сетка на двенадцати дорожках: карточка занимает четыре — три в ряд.
Двенадцать дорожек нужны, чтобы последний ряд заполнялся при любом
числе колонок (3 в ряд, 4 на сверхшироких, 2 на планшете):
одна карточка в остатке растягивается на 12, две — на 6, три — на 4.
При фильтрации классы проставляет careers-filter.js. */
.careers-vacancies__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 16px;
}
.careers-vacancies__grid > .careers-card {
grid-column: span 4;
}
/* Без JS раскладку последнего ряда задают nth-child-правила; как только
скрипт включает фильтры, он сам расставляет модификаторы, потому что
скрытые карточки остаются в DOM и nth-child начал бы считать их тоже. */
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(3n + 1) {
grid-column: span 12;
}
.careers-vacancies__grid:not(.is-js) > .careers-card:nth-last-child(2):nth-child(3n + 1),
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(3n + 2) {
grid-column: span 6;
}
.careers-vacancies__grid > .careers-card.careers-card--wide {
grid-column: span 12;
}
.careers-vacancies__grid > .careers-card.careers-card--half {
grid-column: span 6;
}
.careers-vacancies__grid > .careers-card.careers-card--third {
grid-column: span 4;
}
/* Без min-height: при коротком описании карточка 270 px оставляла
до 55 px пустоты над строкой «Подробнее». Высоту ряда выравнивает
сама сетка. */
.careers-card {
position: relative;
display: flex;
flex-direction: column;
/* Бровь наведения заходит под верхнюю рамку — лишнее срезаем,
как у карточки бренда на главной. */
overflow: hidden;
padding: 22px;
border: 1px solid var(--careers-line);
border-radius: var(--careers-radius-lg);
background: var(--careers-surface);
transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
/* Бровь — один в один механика блока «Производители» на главной
(`.zip-brands__card::before`, указание заказчика 07.09.2026): полоска
4 px по верхней кромке, отступ 18 px от боков, скругление снизу 8 px.
Лежит всегда прозрачной и просто заливается цветом при наведении —
поэтому переход мягкий и без сдвигов. */
.careers-card::after {
content: '';
position: absolute;
top: -1px;
right: 18px;
left: 18px;
height: 4px;
background: transparent;
border-radius: 0 0 8px 8px;
transition: background-color .28s ease;
pointer-events: none;
}
/* Наведение — как на карточку категории на главной: жёлтая рамка
(указание заказчика 07.09.2026). Только для мыши: на тач-экранах
:hover залипает после нажатия. */
@media (hover: hover) and (pointer: fine) {
/* Наведение целиком повторяет карточку бренда на главной: жёлтая
рамка, белый фон, залитая бровь. Ни подъёма, ни тени там нет —
не добавляем и здесь. */
.careers-card:hover {
border-color: var(--careers-amber);
background: #fff;
}
.careers-card:hover::after {
background: var(--careers-amber);
}
}
.careers-card[hidden] {
display: none;
}
/* Шапка карточки: слева бейдж, справа ссылка «Подробнее о вакансии»
(правка N-732 от 06.09.2026 — раньше она стояла внизу отдельной
строкой с разделителем и тянула карточку вверх). */
.careers-card__top {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px 12px;
color: #54606b;
}
.careers-card__top svg {
width: 20px;
height: 20px;
color: var(--careers-amber-strong);
}
/* Плашка направления повторяет надзаголовок модуля «О компании
«ЗИПТЕХ СЕРВИС»» на главной (правка N-733 от 06.09.2026):
прозрачный фон, жёлтая рамка, Manrope 12/700 капсом, радиус 8. */
.careers-card__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 11px;
border: 1px solid var(--careers-amber);
border-radius: 8px;
background: none;
color: var(--careers-amber);
font-family: var(--careers-font-btn);
font-size: 12px;
font-weight: 700;
line-height: 1;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Название: без резерва высоты — описание идёт сразу под ним. */
.careers-card__title {
display: -webkit-box;
margin: 16px 0 8px;
overflow: hidden;
/* Подзаголовок карточки главной: Russo One 700 без капса.
Резерв второй строки снят: описание должно идти вплотную
под названием (указание заказчика 06.09.2026). */
font-family: var(--careers-font-head);
font-size: 18px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.01em;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* Растянутая карточка занимает весь ряд — резервировать вторую строку
незачем, название и так помещается. */
.careers-card--wide .careers-card__title {
min-height: 0;
}
/* Ссылка внутри названия наследует кегль и жирность заголовка:
глобальные стили сайта сажали её на Tektur 16/400 (правка N-728). */
.careers-card__title a:not(#zt_):not(#zt_) {
color: inherit;
font: inherit;
font-weight: 700;
text-decoration: none;
}
.careers-card__title a:hover {
color: inherit;
text-decoration: underline;
}
/* Город и зарплата — одной строкой, зарплата акцентом. */
/* Зарплата стоит над городом (правка N-749 от 06.09.2026), поэтому
строка развёрнута в колонку. */
.careers-card__meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
margin: 0;
color: #4f5964;
/* Пункт меню главной: Tektur 15/500; в карточке кегль меньше. */
font-size: 13px;
font-weight: 500;
line-height: 1.45;
}
.careers-card__city {
display: inline-flex;
align-items: center;
gap: 7px;
}
/* Вакансия без описания: строка «зарплата + город» идёт сразу за названием
и прижимается к низу карточки. Иначе на бою получалась дыра — у такой
карточки снизу оставалось 125 px пустоты против 23 у соседей по ряду
(замер на zipteh.ru/vakansii/ 07.09.2026). Карточек с описанием правило
не касается: там между названием и метой стоит текст. */
.careers-card__title + .careers-card__meta {
margin-top: auto;
}
/* Строка «город + зарплата» идёт сразу за описанием — без прижатия
к низу и без резерва высоты (указание заказчика 06.09.2026:
«зп и место пусть будут как будут»). */
.careers-card__meta {
margin-top: 12px;
}
.careers-card__meta svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
}
/* Зарплата — акцент, как цена на главной: Tektur 700. Правка N-749
от 06.09.2026: она стоит первой строкой и набрана крупнее города
(18 px против 13). По указанию заказчика прижата к правому краю
карточки — `align-self` в колонке делает то же, что прежний
`margin-left: auto` делал в строке. */
.careers-card__salary {
align-self: flex-end;
color: var(--careers-amber-strong);
font-size: 18px;
font-weight: 700;
line-height: 1.2;
white-space: nowrap;
}
/* Описание: три строки максимум, низ карточки от него не зависит —
строку действия прижимает margin-top: auto. */
.careers-card__text {
display: -webkit-box;
margin: 14px 0 18px;
overflow: hidden;
color: var(--careers-muted);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
/* Описание идёт сразу под названием (N-737), нижний отступ ему больше
не нужен: снизу стоит строка города и зарплаты. */
.careers-card__text {
margin-bottom: 0;
}
/* Ссылка стоит в шапке карточки справа от бейджа: обычное начертание
(N-730), без разделителя и резерва высоты (N-732). */
.careers-card__action {
display: inline-flex;
align-items: center;
gap: 8px;
margin-left: auto;
color: var(--careers-ink);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
}
.careers-card__action span:not(#zt_):not(#zt_) {
font-weight: 500;
}
.careers-card__action:hover {
color: var(--careers-ink);
}
.careers-card__action:hover span {
text-decoration: underline;
}
.careers-card__action svg {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: var(--careers-amber-strong);
}
/* Пусто: либо у компании нет вакансий, либо фильтр ничего не нашёл. */
.careers-vacancies__empty {
padding: 34px 26px;
border: 1px solid var(--careers-line);
border-radius: var(--careers-radius-lg);
background: var(--careers-soft);
text-align: center;
}
.careers-vacancies__empty[hidden] {
display: none;
}
.careers-vacancies__empty-title {
margin: 0;
font-family: var(--careers-font-head);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
letter-spacing: -.03em;
text-transform: uppercase;
}
.careers-vacancies__empty-text {
max-width: 640px;
margin: 10px auto 0;
color: var(--careers-muted);
font-size: 15px;
line-height: 1.5;
}
.careers-vacancies__empty-action {
margin: 18px 0 0;
}
/* --------------------------------------------------------------------------
4. Нижний ряд: преимущества + CTA
-------------------------------------------------------------------------- */
/* Преимущества и CTA стоят в одной строке. Панель преимуществ шире:
в ней пять карточек в ряд. */
.careers-bottom {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(290px, 1fr);
gap: 18px;
align-items: stretch;
margin-top: 72px;
}
.careers-panel {
position: relative;
min-width: 0;
overflow: hidden;
padding: 26px;
border: 1px solid var(--careers-line);
border-radius: var(--careers-radius-xl);
background: linear-gradient(145deg, #fff, #f7f8f9);
}
/* Высота — по содержимому: погрузчик снят (N-736), резервировать
под него 430 px больше незачем. В ряду с CTA панели всё равно
выравнивает сетка. */
.careers-benefits {
min-height: 0;
}
.careers-panel__title {
margin: 0;
font-family: var(--careers-font-head);
font-size: clamp(22px, 2vw, 32px);
font-weight: 700;
line-height: 1.15;
letter-spacing: -.03em;
text-transform: uppercase;
}
/* Погрузчик снят правкой N-736 от 06.09.2026 — всю ширину панели
занимают колонки преимуществ, они были сильно сжаты (98–128 px). */
.careers-benefits__content {
position: relative;
z-index: 2;
width: 100%;
}
.careers-benefits__lead {
margin: 12px 0 28px;
color: var(--careers-muted);
font-size: 17px;
line-height: 1.6;
}
/* Пять преимуществ в один ряд (указание заказчика 06.09.2026:
«картинки должны быть в 1 строку»), карточками. Рядом стоит CTA,
поэтому на 1280–1599 карточка ужимается: там кегль и иконка
на ступень меньше — см. медиазапрос ниже. */
.careers-perks {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 14px;
/* Подзаголовка панели больше нет — сетка идёт сразу под заголовком. */
margin-top: 22px;
}
/* Иконка и подписи по центру карточки (правка заказчика 06.09.2026). */
.careers-perk {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0;
padding: 18px 14px 20px;
border: 1px solid var(--careers-line);
border-radius: var(--careers-radius-lg);
background: var(--careers-surface);
text-align: center;
}
/* 3D-иконки комплекта: прозрачный холст 512×512. Размер держит
— именно она блок строки, а не ![]()
внутри неё; без этого
картинка сжималась до 27 px. */
.careers-perk > picture {
display: block;
width: 84px;
height: 84px;
margin: 0 auto 10px;
}
.careers-perk__icon {
width: 100%;
/* Здесь высота нужна ровно по контейнеру: important перебивает
общее правило height: auto для картинок модуля. */
height: 100% !important;
object-fit: contain;
filter: drop-shadow(0 7px 9px rgba(34, 40, 49, .1));
}
/* Две строки под название преимущества: у «Достойной оплаты» и
«Интересных проектов» оно в две строки, у остальных в одну — без
резерва подписи под ними расходились на 18 px. */
.careers-perk__title {
min-height: 2.4em;
margin: 0 0 6px;
/* Подзаголовок карточки главной: Russo One 700. */
font-family: var(--careers-font-head);
font-size: 17px;
font-weight: 700;
line-height: 1.2;
}
.careers-perk__text {
margin: 0;
color: var(--careers-muted);
font-size: 14px;
font-weight: 400;
line-height: 1.5;
}
/* CTA «Не нашли подходящую вакансию?» — правая колонка нижнего ряда;
содержимое выравнивается по центру, раз панель тянется по соседней. */
.careers-apply {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 0;
background: linear-gradient(155deg, #fff 0%, #fff 54%, #fff4d4 100%);
}
.careers-apply__content {
position: relative;
z-index: 2;
}
.careers-apply__title {
font-size: clamp(22px, 1.8vw, 28px);
}
.careers-apply__title span {
display: block;
color: var(--careers-amber-strong);
font: inherit;
}
/* Вторая часть заголовка панели — жёлтым, в той же строке
(правка N-746 от 06.09.2026). */
.careers-benefits .careers-panel__title span {
color: var(--careers-amber-strong);
font: inherit;
}
/* Название вакансии тоже должно идти гарнитурой заголовков модуля. */
.careers10d .careers-card__title a:not(#zt_):not(#zt_) {
font-family: inherit !important;
}
.careers-apply__text {
max-width: 310px;
margin: 16px 0 22px;
color: var(--careers-muted);
font-size: 14px;
line-height: 1.5;
}
.careers-contacts {
display: grid;
gap: 10px;
margin-top: 22px;
}
.careers-contact {
display: flex;
align-items: center;
gap: 10px;
color: inherit;
text-decoration: none;
}
.careers-contact > svg {
flex: 0 0 auto;
width: 20px;
height: 20px;
color: #616a74;
}
.careers-contact span {
display: grid;
}
.careers-contact strong {
font-size: 15px;
font-weight: 700;
line-height: 1.3;
}
.careers-contact:hover strong {
text-decoration: underline;
}
.careers-contact small {
color: var(--careers-muted);
font-size: 11px;
line-height: 1.35;
}
/* Конверт — декоративный уголок, а не иллюстрация во всю панель.
Размер считается от ширины самой панели, поэтому одинаково ведёт себя
и в узкой колонке рядом с преимуществами, и в полноширинной панели
на планшете. Замер до правки (07.09.2026, жалоба заказчика): на 1280
картинка занимала 90 % ширины панели и ложилась на телефон и почту,
на 1440 — 79 %, на 1920 — 73 %. Теперь 45–50 % в узкой колонке
и 20–29 % в широкой, с потолком 210 px. */
/* Селектор с `.careers10d` — не для красоты: на бою модуль лежит внутри
`section.content-area-white`, а в style.css темы есть
`.content-area-white img { width: 100% }` (вес 0-1-1). Правило
`.careers-apply__envelope` (0-1-0) ему проигрывало, и картинка
растягивалась на всю ширину панели: 340 px вместо 113 (замер на бою
07.09.2026). На стенде этого не видно — там нет обёрток шаблона. */
.careers10d .careers-apply__envelope {
position: absolute;
z-index: 1;
/* Картинка целиком внутри панели (указание заказчика 07.09.2026:
«красиво расположена и не обрезалась»). Раньше она уходила
за край и срезалась `overflow: hidden` панели. Отступы 20 px
от правого и нижнего края — тот же воздух, что у содержимого. */
right: 12px;
bottom: 12px;
/* 32 % ширины панели — столько остаётся справа от строк контактов
в узкой колонке: телефон с подписью занимают её левые две трети
(замер: 188 из 302 px на 1280). Потолок 190 px, чтобы картинка
не разрасталась на 1920, нижняя граница 92 px, чтобы не мельчила
на 320. */
width: clamp(92px, 32%, 190px);
height: auto;
/* Панель бывает низкой (на 1024–1279 всего ~167 px). Ограничение
по высоте не искажает пропорции: у картинки ширина auto-зависимая,
браузер пересчитает её сам. */
max-height: calc(100% - 40px);
transform: rotate(-3deg);
filter: drop-shadow(0 12px 14px rgba(34, 40, 49, .12));
pointer-events: none;
}
/* --------------------------------------------------------------------------
5. Адаптив
-------------------------------------------------------------------------- */
/* От 1600: модуль равен шапке, а она на таких экранах шире 1500 px —
комплект рассчитан на 1180 и на этой ширине разъезжается. Поэтому
карточек в ряду четыре, hero отдаёт больше места фотографии,
кегли и иконки на ступень крупнее. */
@media (min-width: 1600px) {
.careers-hero {
min-height: 480px;
}
.careers-hero__copy {
width: 54%;
padding: 60px 60px 60px 0;
}
.careers-hero__title {
max-width: 760px;
}
.careers-vacancies__grid > .careers-card:nth-child(n):nth-child(n) {
grid-column: span 3;
}
/* Фолбэки без JS написаны под три колонки и в этом диапазоне только
мешают: на бою 07.09.2026 при пяти вакансиях они давали ряд из трёх
карточек с дыркой, потом половину, потом полосу во всю ширину.
Гасим их здесь и ниже задаём свои. */
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(3n + 1),
.careers-vacancies__grid:not(.is-js) > .careers-card:nth-last-child(2):nth-child(3n + 1),
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(3n + 2) {
grid-column: span 3;
}
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(4n + 1),
.careers-vacancies__grid > .careers-card.careers-card--wide:nth-child(n) {
grid-column: span 12;
}
.careers-vacancies__grid:not(.is-js) > .careers-card:nth-last-child(2):nth-child(4n + 1),
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(4n + 3),
.careers-vacancies__grid > .careers-card.careers-card--half:nth-child(n) {
grid-column: span 6;
}
.careers-vacancies__grid > .careers-card.careers-card--third:nth-child(n) {
grid-column: span 4;
}
.careers-card__title {
font-size: 19px;
}
/* Карточек в ряду четыре — они уже, и описание в три строки
обрезалось. Даём четвёртую. */
.careers-card__text {
-webkit-line-clamp: 4;
}
/* Панель преимуществ на такой ширине заканчивалась пустой полосой
в 138 px — контент подрос, высота отдана содержимому. */
.careers-benefits,
.careers-apply {
min-height: 0;
}
.careers-perk > picture {
width: 104px;
height: 104px;
}
.careers-perk__title {
font-size: 19px;
}
.careers-perk__text {
font-size: 15px;
}
.careers-apply__text {
max-width: 380px;
}
}
/* 1280–1599: пять карточек в ряд соседствуют с CTA, колонка выходит
~180 px — кегли и иконка на ступень меньше, иначе текст растягивается
на семь строк. */
@media (min-width: 1280px) and (max-width: 1599px) {
.careers-perk > picture {
width: 72px;
height: 72px;
margin-bottom: 10px;
}
.careers-perk__title {
font-size: 16px;
}
.careers-perk__text {
font-size: 13px;
line-height: 1.45;
}
}
/* 1024–1279: вакансии в две колонки, нижние панели друг под другом. */
@media (max-width: 1279px) {
.careers-hero__copy {
width: 70%;
padding: 42px 42px 42px 0;
}
/* Утяжелитель :nth-child(n):nth-child(n) выравнивает вес правил,
иначе общий сброс перебил бы классы --wide и --half. */
.careers-vacancies__grid > .careers-card:nth-child(n):nth-child(n) {
grid-column: span 6;
}
/* Фолбэки без JS написаны под три колонки и в этом диапазоне только
мешают: на бою 07.09.2026 при пяти вакансиях они давали ряд из трёх
карточек с дыркой, потом половину, потом полосу во всю ширину.
Гасим их здесь и ниже задаём свои. */
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(3n + 1),
.careers-vacancies__grid:not(.is-js) > .careers-card:nth-last-child(2):nth-child(3n + 1),
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(3n + 2) {
grid-column: span 6;
}
.careers-vacancies__grid:not(.is-js) > .careers-card:last-child:nth-child(2n + 1),
.careers-vacancies__grid > .careers-card.careers-card--wide:nth-child(n) {
grid-column: span 12;
}
.careers-vacancies__grid > .careers-card.careers-card--half:nth-child(n),
.careers-vacancies__grid > .careers-card.careers-card--third:nth-child(n) {
grid-column: span 6;
}
/* Ограничение 70 % осталось от времён, когда панель делила ряд
с CTA; теперь она идёт во всю ширину модуля и жать содержимое
незачем (N-754). */
.careers-benefits__content {
width: 100%;
}
.careers-bottom {
grid-template-columns: minmax(0, 1fr);
}
/* Панели встали друг под друга, панель преимуществ — во всю ширину
модуля, поэтому пять карточек в ряд помещаются и здесь
(N-754 от 06.09.2026): колонка 226 px на 1278 и 175 px на 1024. */
.careers-perks {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 20px 16px;
}
/* Запас высоты снят (N-755 от 06.09.2026): CTA стоит отдельной
панелью и растягивать её под соседа больше не нужно. */
.careers-apply {
min-height: 0;
padding-bottom: 30px;
}
/* Правее 440 px начинается зона конверта — текст туда не заходит. */
.careers-apply__text {
max-width: 440px;
}
}
/* 1024–1279: панель CTA идёт во всю ширину модуля, поэтому контакты
уходят вправо и встают вровень с заголовком (N-758 от 06.09.2026),
а не под текстом. Панель от этого ниже (N-760, N-761: 370 → 167 px),
и справа остаётся место конверту. Ниже 1024 места на две колонки
уже нет — там контакты возвращаются под текст. */
@media (min-width: 1024px) and (max-width: 1279px) {
.careers-apply__content {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: start;
column-gap: 40px;
/* Справа оставлено место конверту: без запаса он ложился
на телефон и почту. */
padding-right: 200px;
}
.careers-apply__title,
.careers-apply__text {
grid-column: 1;
}
/* Текст помещается в одну строку (N-759): прежний предел 500 px
рвал его надвое. */
.careers-apply__text {
max-width: none;
margin-bottom: 0;
}
.careers-contacts {
grid-row: 1 / span 2;
grid-column: 2;
margin-top: 0;
}
/* Панель здесь низкая и широкая — картинку держит ограничение
по высоте из базового правила. */
}
/* До 1023: hero колонкой с мобильным фото, вакансии в одну колонку. */
@media (max-width: 1023px) {
.careers-hero {
display: block;
min-height: 0;
border: 1px solid var(--careers-line);
background-image: none !important;
background-color: #fff;
}
.careers-hero::after {
display: none;
}
.careers-hero__copy {
width: 100%;
padding: 30px 26px 26px;
}
/* Фото стоит между текстом и кнопками; отрицательные поля
растягивают его на всю ширину карточки, гася padding колонки. */
.careers-hero__mobile {
display: block;
overflow: hidden;
margin: 24px -26px 4px;
aspect-ratio: 16 / 10;
}
.careers-hero__mobile img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 24%;
}
.careers-hero__lead {
font-size: 16px;
}
/* Авторские переносы лида рассчитаны на широкий экран (N-751);
на планшете и телефоне строку ведёт сам браузер. */
.careers-hero__lead br {
display: none;
}
.careers-vacancies,
.careers-bottom {
margin-top: 56px;
}
/* Ссылка «Все вакансии на hh.ru» остаётся справа от заголовка
и на планшете (N-762, N-765 от 06.09.2026 — на 1022 и 766 она
уходила под заголовок влево). Перенос разрешён: на телефоне пара
в строку не помещается, там ссылка спускается под заголовок,
но остаётся у правого края. */
.careers-section__head {
flex-wrap: wrap;
align-items: center;
margin-bottom: 20px;
}
.careers-section__all {
margin-left: auto;
}
.careers-vacancies__grid > .careers-card:nth-child(n):nth-child(n),
.careers-vacancies__grid > .careers-card.careers-card--wide:nth-child(n),
.careers-vacancies__grid > .careers-card.careers-card--half:nth-child(n),
.careers-vacancies__grid > .careers-card.careers-card--third:nth-child(n) {
grid-column: span 12;
}
/* Одна карточка в ряду — выравнивать не с чем: снимаем резерв строк
и обрезку, описание показывается целиком. */
.careers-card__title {
display: block;
min-height: 0;
overflow: visible;
}
.careers-card__text {
display: block;
overflow: visible;
}
/* Запас 230 px внизу панели держался под погрузчик; картинка снята
правкой N-736, а запас остался и давал пустую полосу под последним
преимуществом (правка заказчика 06.09.2026). Высота — по содержимому. */
.careers-benefits {
min-height: 0;
}
.careers-benefits__content {
width: 100%;
}
.careers-perks {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px 24px;
}
.careers-perk > picture {
width: 80px;
height: 80px;
}
}
/* Телефон: кнопки в колонку, фильтры лентой с прокруткой. */
@media (max-width: 560px) {
.careers10d {
padding-top: 20px;
padding-bottom: 20px;
}
.careers-hero__copy {
padding: 26px 20px 22px;
}
.careers-hero__mobile {
margin: 22px -20px 2px;
}
.careers-hero__actions {
flex-direction: column;
align-items: stretch;
}
.careers-filters {
flex-wrap: nowrap;
margin-right: -16px;
padding: 0 16px 6px 0;
overflow-x: auto;
}
.careers-filter {
flex: 0 0 auto;
}
.careers-card {
min-height: 0;
padding: 19px;
}
/* Телефон: два преимущества в ряд давали колонку 127 px при иконке
76 px — тесно. Одна колонка, зато крупно и читаемо. */
.careers-perks {
grid-template-columns: 1fr;
gap: 24px;
}
.careers-perk__title {
min-height: 0;
}
/* Ссылка стоит в одной строке с плашкой направления и выровнена по её
центру (правка заказчика 06.09.2026). Чтобы пара помещалась на узкой
карточке, здесь всё на ступень мельче: подпись 12 px, стрелка 16,
плашка 11 px с более тесными полями. */
.careers-card__top {
gap: 6px;
}
.careers-card__badge {
gap: 6px;
padding: 6px 7px;
font-size: 11px;
letter-spacing: .03em;
}
.careers-card__action {
flex: 0 1 auto;
gap: 6px;
font-size: 12px;
}
.careers-card__action svg {
width: 16px;
height: 16px;
}
.careers-panel {
padding: 26px;
border-radius: 22px;
}
/* Конверт нужен и на телефоне (N-766, N-767 от 06.09.2026), поэтому
под ним оставлен запас: контакты не должны на него наезжать.
Картинка лежит целиком внутри панели, поэтому запас равен её
высоте плюс воздух. */
.careers-apply {
min-height: 0;
padding-bottom: 128px;
}
.careers10d .careers-apply__envelope {
right: 16px;
bottom: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.careers10d *,
.careers10d *::before,
.careers10d *::after {
transition-duration: .001ms !important;
}
.careers-card:hover,
.careers-button:hover {
transform: none;
}
/* Бровь остаётся, но заливается без плавности. */
.careers-card::after {
transition: none;
}
.careers-card:hover::after {
background: var(--careers-amber);
}
}