/* Планшетный кадр приёмки: шкала телефонная, но кадр уже широкий — порог 480. */ /* Fincer — стили раздела вакансий. Один файл на весь раздел. Значения только из tokens.css: своих чисел и цветов здесь нет. Все классы с приставкой fnc-, чтобы не столкнуться с классами старого сайта. Подключается после tokens.css. */ /* Все значения — из tokens.css. Своих чисел и цветов этот файл не содержит. */ .fnc-area{background:var(--c-bg-2);display:flex;flex-direction:column;gap:var(--s-32);max-width:var(--content-max);margin:0 auto;padding:var(--s-24) var(--gutter) var(--s-40);border-top:var(--bw-1) solid var(--c-border-1);border-bottom:var(--bw-1) solid var(--c-border-1)} /* верх страницы */ .fnc-ptop{display:flex;flex-direction:column;gap:var(--s-8);max-width:var(--vac-card-max)} .fnc-ptop__h1{font-family:var(--font-head);font-weight:var(--fw-extrabold);font-size:var(--fs-h1);line-height:var(--lh-h1); letter-spacing:var(--ls-h1);margin:0;text-wrap:pretty} .fnc-ptop__lead{font-size:var(--fs-body-lg);line-height:var(--lh-body-lg);color:var(--c-text-2);margin:0;text-wrap:pretty} /* блок подбора */ .fnc-pick{display:flex;flex-direction:column;gap:var(--s-16);max-width:var(--vac-card-max)} .fnc-pick__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:var(--lh-h3); letter-spacing:var(--ls-h3);margin:0;text-wrap:pretty} .fnc-pick__lead{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-2);margin:0;text-wrap:pretty} .fnc-pick__cta{display:flex;flex-direction:column;gap:var(--s-12);align-items:flex-start} .fnc-pick__saved{margin:0;background:var(--c-bg-3);border-radius:var(--r-12);padding:var(--s-12) var(--s-16); font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);text-wrap:pretty} .fnc-pick__saved-t{font-family:var(--font-head);font-weight:var(--fw-semibold);color:var(--c-text-1)} .fnc-pick__legal{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0; padding-top:var(--s-16);border-top:var(--bw-1) solid var(--c-border-1);text-wrap:pretty} .fnc-jump{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tap-min); font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-button);line-height:var(--lh-button); color:var(--c-accent-for-white-text);padding:0 var(--s-4)} .fnc-jump__arr{font-family:var(--font-head);font-weight:var(--fw-bold)} .fnc-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-24);width:100%} /* витрина */ /* Линия и отступ сверху убраны: витрина идёт сразу за обложкой, расстояние держит обычный промежуток области --s-32. Прежние border-top и padding-top добавлялись к нему и давали 65 точек пустого места на первом экране телефона. */ .fnc-shop{display:flex;flex-direction:column;gap:var(--s-16)} .fnc-shop__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-8) var(--s-16)} .fnc-shop__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h3);line-height:var(--lh-h3); letter-spacing:var(--ls-h3);margin:0} .fnc-shop__found{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-2)} .fnc-shop__note{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)} /* ===================== ОТБОР НА ВИТРИНЕ ===================== Передача 47 от 24.09.2026, раздел 15.1 версии 3.0. Два отбора всегда на виду: поле города и шесть кнопок категорий. Ничего не сворачивается и не всплывает. Кнопка — настоящий флажок, поэтому отметка видна сразу и без скриптов. Без скриптов форма отправляется кнопкой «Показать»; со скриптами класс fnc-otbor--js её прячет, а выдача и строка «{N} вакансий» пересчитываются на месте. */ .fnc-otbor{display:flex;flex-direction:column;gap:var(--s-12);align-self:stretch;width:100%;max-width:none;margin:0} .fnc-city{display:grid;grid-template-columns:auto minmax(0,1fr) auto; grid-template-areas:"pin lab clr" "pin inp clr";column-gap:var(--s-12);align-items:center; /* Высота постоянная — по кнопке «Очистить»: иначе при первом введённом знаке капсула вырастала на 3 точки и сдвигала всю выдачу. */ min-height:calc(var(--tap-min) + var(--s-4) * 2 + var(--bw-1) * 2);padding:var(--s-4) var(--s-4) var(--s-4) var(--s-16); background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-pill); box-shadow:var(--sh-1);transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} .fnc-city:focus-within{border-color:var(--c-border-focus)} .fnc-city__pin{grid-area:pin;display:flex;color:var(--c-accent)} .fnc-city__pin svg{width:var(--icon-md);height:var(--icon-md)} .fnc-city__label{grid-area:lab;align-self:end;font-family:var(--font-head);font-weight:var(--fw-semibold); font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2);cursor:pointer} .fnc-city__inp{grid-area:inp;align-self:start;min-width:0;width:100%;border:0;padding:0;margin:0;background:transparent; font-family:var(--font-text);font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-1);outline:none} .fnc-city__inp::placeholder{color:var(--c-text-3);opacity:var(--o-solid)} /* Кнопка очистки: знак и слово рядом. Ширина больше не равна высоте — слово должно поместиться; цель нажатия держит `min-height`. */ .fnc-city__clear{grid-area:clr;min-width:var(--tap-min);min-height:var(--tap-min);border:0; padding:0 var(--s-12) 0 0;border-radius:var(--r-pill);gap:var(--s-4); background:transparent;color:var(--c-text-1);display:flex;align-items:center;justify-content:center;cursor:pointer} .fnc-city__clear-t{font-family:var(--font-head);font-weight:var(--fw-semibold); font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2)} .fnc-city__x{width:var(--s-32);height:var(--s-32);border-radius:var(--r-pill);background:var(--c-bg-3); display:flex;align-items:center;justify-content:center} .fnc-city__x svg{width:var(--icon-sm);height:var(--icon-sm)} .fnc-city__clear:hover .fnc-city__x{background:var(--c-border-1)} .fnc-city__clear:focus{outline:var(--bw-2) solid var(--c-border-focus);outline-offset:calc(var(--bw-2) * -1)} /* Пустое поле — очищать нечего, кнопка исчезает. Работает без скриптов. */ .fnc-city__inp:placeholder-shown ~ .fnc-city__clear{display:none} /* Кнопки категорий. Шесть долей во всю ширину содержимого, без прокрутки, на любой ширине: круг со значком и подпись под ним. Каждая кнопка — флажок: нажал — отмечена, нажал ещё раз — снята, можно несколько. Флажок спрятан, кнопку рисует соседний .fnc-tag__face, поэтому отметка не зависит от :has(). */ .fnc-tags{border:0;margin:0;padding:0;min-width:0;align-self:stretch;width:100%} .fnc-tags__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--cat-gap);width:100%} .fnc-tag{position:relative;display:block;min-width:0;cursor:pointer} .fnc-tag__inp{position:absolute;width:var(--bw-1);height:var(--bw-1);margin:0;overflow:hidden;clip-path:inset(50%)} .fnc-tag__face{display:flex;flex-direction:column;align-items:center;gap:var(--s-4);min-width:0; min-height:var(--tap-min);padding:var(--s-2) 0;border-radius:var(--r-12);text-align:center; font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-cat-t);line-height:var(--lh-cat-t);color:var(--c-text-1)} .fnc-tag__ico{position:relative;flex:0 0 auto;width:var(--cat-ico);height:var(--cat-ico);border-radius:var(--r-pill); background:var(--c-bg-3);display:flex;align-items:center;justify-content:center; transition:background var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)} .fnc-tag:hover .fnc-tag__ico{box-shadow:0 0 0 var(--bw-1) var(--c-border-strong)} .fnc-tag__ico img{display:block;width:var(--cat-img);height:var(--cat-img);object-fit:contain} .fnc-tag__t{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* На телефоне — одно слово, полное название для чтеца экрана; с 768 — полное название. */ .fnc-tag__t--full{display:none} /* Короткие слова — закрытый набор из шести, замерены: обрезки нет, ellipsis не нужен. */ .fnc-tag__t--short{overflow:visible;text-overflow:clip} .fnc-tag__check{position:absolute;right:calc(var(--s-2) * -1);top:calc(var(--s-2) * -1); width:var(--icon-sm);height:var(--icon-sm);border-radius:var(--r-pill);background:var(--c-bg-1);color:var(--c-text-1); box-shadow:0 0 0 var(--bw-2) var(--c-text-1);display:none;align-items:center;justify-content:center} .fnc-tag__check svg{width:var(--s-12);height:var(--s-12)} /* Отмеченная кнопка — тёмный круг, обводка и галочка: видно сразу, и не только цветом. */ .fnc-tag__inp:checked ~ .fnc-tag__face .fnc-tag__ico{background:var(--c-text-1);box-shadow:0 0 0 var(--bw-2) var(--c-text-1)} .fnc-tag__inp:checked ~ .fnc-tag__face .fnc-tag__check{display:flex} .fnc-tag__inp:focus ~ .fnc-tag__face{outline:var(--bw-2) solid var(--c-border-focus);outline-offset:calc(var(--bw-2) * -1)} .fnc-otbor__submit{align-self:flex-start} .fnc-otbor--js .fnc-otbor__submit{display:none} .fnc-found{margin:0;font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-body); line-height:var(--lh-body);color:var(--c-text-1)} /* Полные названия — с 768: доля кнопки там 119 точек, самое длинное название «Ремонт и техника» кеглем 11 занимает 94,7. На телефоне доля 51–54, и четыре полных названия из шести не влезают, поэтому там — одно слово. */ @media (min-width:768px){ .fnc-city{max-width:var(--field-max)} .fnc-tag__t--short{display:none} .fnc-tag__t--full{display:block} /* Планшет: две колонки карточек. В один столбец карточка выходила 807 точек высотой при экране 713 — выше экрана, и человек не видел её целиком ни при какой прокрутке. Находка восьмого прохода 25.09.2026. Трёх колонок здесь мало места: колонка вышла бы уже минимальной ширины карточки. */ .fnc-vac__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-24);align-items:start} .fnc-vac{max-width:none;height:100%} } @media (min-width:1024px){ .fnc-tag__face{gap:var(--s-8)} } /* полоса управления витриной */ .fnc-bar{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--s-8) var(--s-16)} .fnc-fpanel{border-radius:var(--r-pill)} .fnc-fpanel[open]{border-radius:var(--r-20);flex:1 1 100%} /* Раскрытая панель отбора не выше экрана. Замер 24.09.2026 на 375: три группы давали 721 точку при окне 812 — витрины под панелью не видно вовсе, и человек не понимал, к чему относится отбор. Прокрутка внутри панели оставляет карточки на месте: они не уезжают за экран. Два запаса, оба из шкалы: 96 под саму строку управления и рамку браузера, 120 под верх витрины — чтобы за панелью было видно, к чему относится отбор. Единицы экрана шкалой не задаются: экран не расстояние. */ .fnc-fpanel[open] .filter{max-height:calc(100svh - var(--s-96) - var(--s-120));overflow-y:auto} .fnc-fpanel__sum{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tap-min); padding:var(--s-8) var(--s-16);background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-strong); border-radius:var(--r-pill);cursor:pointer;list-style:none; font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)} .fnc-fpanel__sum::-webkit-details-marker{display:none} .fnc-fpanel__sum:hover{border-color:var(--c-text-2)} .fnc-fpanel__hint{color:var(--c-text-2)} .fnc-fpanel[open] .fnc-fpanel__sum{background:var(--c-bg-3)} .fnc-sort{display:flex;flex-direction:column;gap:var(--s-8);align-items:flex-start;margin-top:var(--s-12); background:var(--c-bg-2);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);padding:var(--s-16)} .fnc-sort__opt{display:flex;align-items:center;gap:var(--s-12);min-height:var(--tap-min);cursor:pointer;position:relative} .fnc-sort__opt input{position:absolute;opacity:0;width:var(--s-2);height:var(--s-2);margin:0} .fnc-sort__mark{width:var(--control-box);height:var(--control-box);border-radius:var(--r-pill);flex:0 0 auto; border:var(--bw-2) solid var(--c-border-strong);background:var(--c-bg-1);display:flex;align-items:center;justify-content:center} .fnc-sort__opt input:checked + .fnc-sort__mark{border-color:var(--c-accent-for-white-text);border-width:var(--bw-3);} .fnc-sort__opt input:focus + .fnc-sort__mark{outline:var(--bw-2) solid var(--c-border-focus);outline-offset:var(--s-2)} .fnc-sort__t{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)} /* отбор */ .fnc-filter{display:flex;flex-direction:column;gap:var(--s-16);background:var(--c-bg-2); border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);padding:var(--s-16)} .fnc-fpanel .fnc-filter{margin-top:var(--s-12)} .fnc-facet{display:flex;flex-direction:column;gap:var(--s-8)} .fnc-facet__name{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-caption); line-height:var(--lh-caption);letter-spacing:var(--ls-overline);text-transform:uppercase;color:var(--c-text-2)} .fnc-facet__row{display:flex;flex-wrap:wrap;gap:var(--s-8)} .fnc-facet__note{margin:0;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2)} .fnc-fchip{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tap-min);max-width:100%; padding:var(--s-8) var(--s-16);background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-2); border-radius:var(--r-pill);color:var(--c-text-1);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm); transition:border-color var(--dur-fast) var(--ease-out)} .fnc-fchip__t{min-width:0;overflow-wrap:anywhere} .fnc-fchip:hover{border-color:var(--c-border-strong);text-decoration:none;color:var(--c-text-1)} .fnc-fchip__n{font-family:var(--font-mono);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2);flex:0 0 auto} .fnc-fchip--on{background:var(--c-accent-bg);border-color:var(--c-accent-for-white-text);border-width:var(--bw-15);font-weight:var(--fw-semibold)} .fnc-fchip__x{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--c-text-2);flex:0 0 auto} .fnc-applied{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-8) var(--s-12)} .fnc-applied__t{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2)} .fnc-achip{display:inline-flex;align-items:center;gap:var(--s-8);min-height:var(--tap-min);max-width:100%;padding:var(--s-4) var(--s-16); background:var(--c-accent-bg);border:var(--bw-15) solid var(--c-accent-for-white-text);border-radius:var(--r-pill); color:var(--c-text-1);font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);font-weight:var(--fw-semibold)} .fnc-achip:hover{text-decoration:none;color:var(--c-text-1);background:var(--c-bg-3)} .fnc-achip__x{font-family:var(--font-head);font-weight:var(--fw-bold);color:var(--c-text-2)} /* карточки */ .fnc-vac__list{display:flex;flex-direction:column;gap:var(--s-16);align-self:stretch;width:100%} .fnc-vac{width:100%;background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20); box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:var(--s-12);overflow:hidden; max-width:var(--vac-card-max);height:100%} /* Обёртка картинки: только она и плашка состояния. Нужна затем, что плашка стоит углом НА картинке — раздел 10.1 версии 3.3, — а для этого ей нужен предок с точкой отсчёта. */ .fnc-vac__pic{position:relative;display:block;width:100%} .fnc-vac__banner{display:block;width:100%;height:auto;aspect-ratio:var(--ar-vac-banner);object-fit:cover; background:var(--c-bg-3);border-bottom:var(--bw-1) solid var(--c-border-1)} .fnc-vac__banner--none{display:flex;align-items:center;justify-content:center;color:var(--c-text-3); font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:var(--lh-caption); text-transform:uppercase;letter-spacing:var(--ls-overline)} .fnc-vac__body{display:flex;flex-direction:column;gap:var(--s-12);padding:var(--s-16) var(--s-20) var(--s-20);flex:1 1 auto} /* Плашка состояния карточки. Вид — капсула передачи (`.fnc-vac__chosen`), цвет нейтральный: зелёный в передаче принадлежал выбору, а выбор упразднён. Стоит углом на картинке и вынута из потока — раздел 10.1 версии 3.3. Прежде она была первой строкой тела карточки, и место под неё держалось всегда: у каждой карточки без состояния под картинкой оставалась пустая полоса. Резервировать больше нечего — плашка содержимое не сдвигает, и работодатель стоит на одной высоте у карточек со статусом и без. Подложка непрозрачная: плашка ложится на снимок, и просвечивающий текст на светлом кадре не читался бы. */ .fnc-vac__badge{position:absolute;top:var(--s-8);left:var(--s-8);z-index:1; display:inline-flex;align-items:center;gap:var(--s-8);max-width:calc(100% - var(--s-16)); background:var(--c-neutral-bg);color:var(--c-neutral);border-radius:var(--r-pill); padding:var(--s-4) var(--s-12);box-sizing:border-box; box-shadow:var(--sh-1); font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:var(--lh-caption); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fnc-vac__badge--gone{background:var(--c-error-bg);color:var(--c-error)} .fnc-vac__top{display:flex;flex-direction:column;gap:var(--s-4)} .fnc-vac__emp{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Предел по знакам для кода, при котором две строки заполняются целиком: 360 — 50 знаков, 375 — 52, 1440 — 67. Худший случай сплошных широких букв: 30 / 32 / 36. Код режет по меньшему из двух и дописывает многоточие сам. */ /* Название — две строки. Многоточие ставит КОД при сборке строки, а не браузер: движок нормализует display:-webkit-box в flow-root, и text-overflow на двух строках не рисуется. Здесь только закреплённое место под две строки и страховочный overflow. */ .fnc-vac__title{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h4); line-height:var(--lh-h4);letter-spacing:var(--ls-h4);margin:0;overflow:hidden; height:calc(var(--lh-h4) * 2);overflow-wrap:break-word} .fnc-vac__facts{margin:0;display:flex;flex-direction:column;gap:var(--s-8)} .fnc-vac__fact{display:flex;gap:var(--s-8);align-items:baseline} .fnc-vac__fact dt{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2);margin:0} .fnc-vac__fact dd{margin:0;font-size:var(--fs-body);line-height:var(--lh-body);font-weight:var(--fw-medium);white-space:nowrap;overflow:hidden;min-width:0;text-overflow:ellipsis} .fnc-vac__income{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5)} .fnc-vac__actions{display:flex;gap:var(--s-8);flex-direction:column;align-items:stretch;margin-top:auto;padding-top:var(--s-4)} .fnc-state{background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-1);border-radius:var(--r-20);box-shadow:var(--sh-2); padding:var(--s-20);display:flex;flex-direction:column;gap:var(--s-12);max-width:var(--vac-card-max)} .fnc-state__icon{width:var(--logo-box);height:var(--logo-box);border-radius:var(--r-pill);display:flex;align-items:center; justify-content:center;font-family:var(--font-head);font-weight:var(--fw-extrabold);font-size:var(--fs-h4)} .fnc-state__icon--neutral{background:var(--c-neutral-bg);color:var(--c-neutral)} .fnc-state__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h5);line-height:var(--lh-h5); letter-spacing:var(--ls-h5);margin:0;text-wrap:pretty} .fnc-state__text{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0;text-wrap:pretty} .fnc-state__act{display:flex;flex-wrap:wrap;gap:var(--s-12) var(--s-24);align-items:center} .fnc-photo{display:none;background-color:var(--c-bg-3); background-image:repeating-linear-gradient(135deg,var(--c-border-2) 0 var(--s-8),transparent var(--s-8) var(--s-16)); border-radius:var(--r-24);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s-8); padding:var(--s-20);aspect-ratio:var(--ar-card)} .fnc-photo__tag{font-family:var(--font-mono);font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-2); background:var(--c-bg-1);border-radius:var(--r-8);padding:var(--s-4) var(--s-8);align-self:flex-start} .fnc-photo__brief{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2);margin:0; background:var(--c-bg-1);border-radius:var(--r-12);padding:var(--s-12);text-wrap:pretty} .fnc-btn{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-button);line-height:var(--lh-button); border:var(--bw-15) solid transparent;border-radius:var(--r-pill);min-height:var(--btn-h);padding:var(--s-12) var(--s-24); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-align:center; transition:background var(--dur-base) var(--ease-out)} .fnc-btn--primary{background:var(--c-accent);color:var(--c-text-1)} .fnc-btn--primary:hover{background:var(--c-accent-hover);color:var(--c-text-1);text-decoration:none} .fnc-btn--secondary{background:var(--c-bg-1);color:var(--c-accent-for-white-text);border-color:var(--c-accent-for-white-text)} .fnc-btn--secondary:hover{color:var(--c-accent-for-white-text-active);text-decoration:none} .fnc-btn--sm{min-height:var(--btn-h-sm);padding:var(--s-8) var(--s-20);font-size:var(--fs-body-sm)} .fnc-btn--block{width:100%} .fnc-link{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-button);line-height:var(--lh-button); color:var(--c-accent-for-white-text);min-height:var(--tap-min);display:inline-flex;align-items:center; border-radius:var(--r-pill);padding:0 var(--s-4)} .fnc-link--sm{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm)} /* ===== ОБВОДКА ФОКУСА: ОДНА И ТА ЖЕ ОТ МЫШИ И ОТ КЛАВИАТУРЫ ===== Ширина — как у обычной рамки выбранного, `--bw-2`. Ореола `--sh-focus` под ней больше нет нигде в разделе: две точки обводки плюс два отступа плюс три точки тени читались как жирная рамка, и владелец показал это на снимках 26.09.2026. Условие `:focus`, а не `:focus-visible`. Второе у нажатия мышью срабатывает не везде: браузер показывает его на переключателе и не показывает на кнопке, и обводка от мыши и от клавиатуры выходила разной. `:focus` шире и включает в себя `:focus-visible` целиком. Порядок обхода клавишей этим не затронут: он задан разметкой — у группы переключателей своё поведение, внутри ходят стрелками. */ .fnc-btn:focus,.fnc-link:focus,.fnc-fchip:focus,.fnc-jump:focus,.fnc-fpanel__sum:focus,.fnc-is-focus{ outline:var(--bw-2) solid var(--c-border-focus);outline-offset:var(--s-2)} /* ===== десктоп: от --bp-lg ===== */ /* ===================== ОБЛОЖКА РАЗДЕЛА ===================== Порядок в файле важен: базовые (телефонные) правила стоят ДО блока @media (min-width:1024px). Прежде они лежали после него и при равной специфичности перебивали десктопную ветку — продуктовая страница в окне 1440 собирала телефонную обложку 1152 x 952 вместо 1152 x 292, и это было видно только на отдельной странице, потому что на приёмке выигрывала пиновка .screen--desktop. Правило 7в.9. Плашки под рукописной строкой нет: строка стоит по светлой стене кадра, где худший пиксель rgb(178,164,146) и тёмный текст даёт 7,37 : 1. Мягкая светлая тень за буквами — страховка на случай другого кадра; в замере она не участвует. */ /* Промежуток внутри обложки 12, а не 16: с кадром 16 : 9 во всю ширину первая карточка приходилась на 535 при сгибе 533 — уходила на две точки. */ .fnc-cover{position:relative;align-self:stretch;width:100%;display:flex;flex-direction:column; gap:var(--s-12)} /* H1 стоит НАД баннером небольшим названием экрана: страница индексируется, и заголовок обязан быть живым текстом, а не частью картинки. */ .fnc-cover__h1{margin:0;font-family:var(--font-head);font-weight:var(--fw-bold); font-size:var(--fs-h4);line-height:var(--lh-h4);letter-spacing:var(--ls-h4);color:var(--c-text-1)} /* Надпись, кнопка, голова и кот запечены в кадр, поэтому кадр показывается ЦЕЛИКОМ: ни object-fit:cover, ни фиксированной высоты. Пропорция своя на каждой ширине — 1 : 1 на телефоне, 21 : 9 на широком, файлы разные. */ .fnc-cover__media{position:relative;width:100%;border-radius:var(--r-20);overflow:hidden;background:var(--c-bg-3)} .fnc-cover__img{display:block;width:100%;height:auto;aspect-ratio:1/1} /* Прозрачная ссылка поверх НАРИСОВАННОЙ кнопки. Границы в процентах от кадра, поэтому совпадают на любой ширине. Высота не меньше цели нажатия: центр зоны совмещён с центром кнопки, и она растёт вверх и вниз поровну. */ .fnc-cover__hit{position:absolute;display:block;left:5.18%;width:47.85%; top:calc(38.68% + 4.505%);height:max(9.01%,var(--tap-min));transform:translateY(-50%); border-radius:var(--r-pill)} .fnc-cover__hit:focus{outline:var(--bw-2) solid var(--c-border-focus);outline-offset:var(--s-2)} /* Вернувшемуся — мелкая живая строка под баннером. Своей кнопки нет: она на кадре. */ .fnc-cover__back{margin:0;display:flex;flex-wrap:wrap;gap:var(--s-8) var(--s-16);align-items:center} .fnc-cover__go,.fnc-cover__again{font-family:var(--font-head);font-weight:var(--fw-semibold); font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);min-height:var(--tap-min); display:inline-flex;align-items:center;text-decoration:underline;text-underline-offset:var(--s-2)} .fnc-cover__go{color:var(--c-accent-for-white-text)} /* «Начать заново» — кнопка отправки формы (раздел 2.2 документа 2.6): состояние не меняется переходом по ссылке. На вид остаётся той же мелкой строкой, что и соседняя ссылка, поэтому убираем родное оформление кнопки. */ .fnc-cover__again{color:var(--c-text-2);background:none;border:0;padding:0;cursor:pointer} /* Форма не участвует в раскладке: кнопка встаёт в ту же строку, что ссылка. */ .fnc-cover__again-form{display:contents} .fnc-cover__go:focus,.fnc-cover__again:focus{outline:var(--bw-2) solid var(--c-border-focus); outline-offset:var(--s-2);border-radius:var(--r-8)} /* Кадр переключается на широкий уже с --bp-sm (480), а не с 1024: квадрат 1 : 1 при области 877 давал 877 точек высоты — почти экран ноутбука под одним баннером. Квадрат остаётся только на телефоне, где он и задуман: максимум 448 точек. Остальная раскладка страницы по-прежнему переключается на 1024. */ @media (min-width:480px){ .fnc-cover__img{aspect-ratio:21/9} .fnc-cover__hit{left:11.43%;width:30.74%; top:calc(56.03% + 6.515%);height:max(13.03%,var(--tap-min))} } /* ===================== РЯД КАТЕГОРИЙ ===================== Одна строка, листается пальцем, без скриптов: overflow-x + scroll-snap. Показываются только категории, у которых есть вакансии. Первая плитка стоит ровно по левому краю карточек: ряд выходит под обрез отрицательными полями, а внутренний отступ и scroll-padding возвращают содержимое на линию колонки. */ /* Ряд не листается: все семь плиток лежат в ширину содержимого. Отрицательных полей и прокрутки больше нет — края ряда совпадают с краями карточек. */ .fnc-cats{align-self:stretch;width:100%} .fnc-cats__row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)); gap:var(--cat-gap);align-items:stretch;width:100%} /* Плитка тянется долей сетки. Подпись — одно слово, переносов нет; кегль подобран так, чтобы самое длинное слово («Подработка») влезло в долю на 360. */ .fnc-cat{display:flex;flex-direction:column;align-items:center; gap:var(--s-4);min-width:0;min-height:var(--tap-min);text-align:center;align-self:stretch; color:var(--c-text-1);border-radius:var(--r-12);padding:var(--s-2) 0} .fnc-cat:focus{outline:var(--bw-2) solid var(--c-border-focus);outline-offset:var(--s-2)} /* Круг пастельный, значок занимает около трёх четвертей круга. */ .fnc-cat__ico{position:relative;width:var(--cat-ico);height:var(--cat-ico);border-radius:var(--r-pill); background:var(--c-bg-3);display:flex;align-items:center;justify-content:center;flex:0 0 auto} .fnc-cat__ico img{display:block;width:var(--cat-ico-img);height:var(--cat-ico-img);object-fit:contain} .fnc-cat__t{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-cat-t); line-height:var(--lh-cat-t);white-space:nowrap} /* Полное название категории — для читающей программы и голосового управления. На экране видно одно слово, доступное имя: «Клиенты — работа с людьми». */ .fnc-sr{position:absolute;width:var(--bw-1);height:var(--bw-1);overflow:hidden; clip-path:inset(50%);white-space:nowrap} .fnc-cat--on .fnc-cat__ico{box-shadow:0 0 0 var(--bw-2) var(--c-text-1)} .fnc-cat--on .fnc-cat__t{text-decoration:underline;text-underline-offset:var(--s-2)} /* Значки-кнопки фильтров и сортировки: без слов и треугольников. Название для чтеца экрана лежит в .fnc-vh — оно есть в разметке, но не на экране. */ .fnc-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip-path:inset(50%);white-space:nowrap;border:0} .fnc-tool{width:var(--tap-min);height:var(--tap-min);border-radius:var(--r-pill); border:var(--bw-1) solid var(--c-border-2);background:var(--c-bg-1);color:var(--c-text-1); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;list-style:none} .fnc-tool::-webkit-details-marker{display:none} .fnc-tool svg{width:var(--icon-md);height:var(--icon-md);display:block} .fnc-tool:hover{border-color:var(--c-border-strong)} .fnc-tool:focus{outline:var(--bw-2) solid var(--c-border-focus);outline-offset:var(--s-2)} .fnc-fpanel[open] .fnc-tool{border-color:var(--c-text-1);border-width:var(--bw-15)} @media (min-width:1024px){ .fnc-vak__banner{order:0} /* Обложка: фото во всю карточку, текст слева поверх светлой стены кадра. Подложки нет — худший пиксель зоны текста rgb(188,166,143), тёмный текст на нём 7,80 : 1. Высоту держит текстовый блок. */ /* Кадр и зона нажатия переключены раньше, на 480 — см. блок выше. */ .fnc-cover__h1{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3)} /* Широкий экран: семь плиток занимают всю ширину колонки равными долями, прокрутки нет — справа больше не остаётся пустой трети. */ .fnc-cats__row{gap:var(--cat-gap)} .fnc-cat{gap:var(--s-8);padding:var(--s-4) var(--s-2)} .fnc-cat__t{font-size:var(--fs-cat-t);line-height:var(--lh-cat-t)} .fnc-filter{padding:var(--s-24);gap:var(--s-20)} .fnc-vac__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-24);align-items:start} .fnc-vac{max-width:none;height:100%} .fnc-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-64);align-items:center} .fnc-photo{display:block} .fnc-area{padding:var(--s-48) var(--gutter) var(--s-64)} } /* ===== знаки категорий в плашках отбора ===== */ .fnc-ico{flex:0 0 auto;width:var(--icon-tile);height:var(--icon-tile);border-radius:var(--r-8); display:flex;align-items:center;justify-content:center;color:var(--c-text-1)} .fnc-ico svg{width:var(--icon-md);height:var(--icon-md);display:block} .fnc-ico--road{background:var(--c-cat-road)} .fnc-ico--store{background:var(--c-cat-store)} .fnc-ico--people{background:var(--c-cat-people)} .fnc-ico--desk{background:var(--c-cat-desk)} .fnc-ico--delivery{background:var(--c-cat-delivery)} .fnc-ico--parttime{background:var(--c-cat-parttime)} .fnc-ico--repair{background:var(--c-cat-repair)} .fnc-fchip--ico{padding-left:var(--s-4)} .fnc-btn--quiet{background:var(--c-bg-1);color:var(--c-text-1);border-color:var(--c-border-strong)} .fnc-btn--quiet:hover{border-color:var(--c-text-2)} .fnc-vac__actions .fnc-btn{width:100%} /* Обрезка — одной строкой с многоточием, а не -webkit-line-clamp: движок нормализует display:-webkit-box в flow-root, кламп ограничивает высоту, но многоточие не рисуется, и текст обрывается посреди слова. Обрезаемых мест пять: название, компания, «Где», плашка требования, причина. */ /* ===== требования на карточке: не более двух, место занято всегда ===== */ .fnc-vac__req{display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--s-8);margin:0;padding:0;height:var(--vac-req-h);overflow:hidden} .fnc-vac__req li{list-style:none;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--c-bg-3); color:var(--c-text-2);border-radius:var(--r-8);padding:var(--s-4) var(--s-8); font-size:var(--fs-caption);line-height:var(--lh-caption)} /* ===== достоинства на карточке: до двух, раздел 10.1 версии 3.3 ===== Место не резервируется: кнопки прижаты к низу (`margin-top:auto`), и разная длина списка ряд карточек не ломает. Вид отличается от плашки требования — требование может остановить, достоинство зовёт, и путать их нельзя. */ .fnc-vac__plus{display:flex;flex-wrap:wrap;gap:var(--s-8);margin:0;padding:0} .fnc-vac__plus li{list-style:none;display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;background:var(--c-second-bg);color:var(--c-text-2); border-radius:var(--r-8);padding:var(--s-4) var(--s-8); font-size:var(--fs-caption);line-height:var(--lh-caption)} /* ===================== УЗЛЫ ОПРОСА ===================== */ /* полоса шагов */ .fnc-steps{display:flex;flex-direction:column;gap:var(--s-8);max-width:var(--vac-card-max)} .fnc-steps__t{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm); line-height:var(--lh-body-sm);color:var(--c-text-2)} .fnc-steps__bar{display:flex;gap:var(--s-4)} .fnc-steps__seg{flex:1 1 0;height:var(--s-4);border-radius:var(--r-4);background:var(--c-border-1)} .fnc-steps__seg--done{background:var(--c-border-strong)} .fnc-steps__seg--next{background:var(--c-border-1)} .fnc-steps__seg--now{background:var(--c-accent)} /* вопрос */ .fnc-q{display:flex;flex-direction:column;gap:var(--s-20);max-width:var(--vac-card-max)} .fnc-q__title{font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-h2); line-height:var(--lh-h2);letter-spacing:var(--ls-h2);margin:0;text-wrap:pretty} .fnc-q__why{margin:0;font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-2); background:var(--c-bg-3);border-radius:var(--r-12);padding:var(--s-12) var(--s-16);text-wrap:pretty} .fnc-q__lead{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-2);margin:0} .fnc-q__sub{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-h5); line-height:var(--lh-h5);letter-spacing:var(--ls-h5);margin:0} /* варианты ответа */ .fnc-opts{display:flex;flex-direction:column;gap:var(--s-8);margin:0;padding:0;border:0} .fnc-opts--pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-8)} .fnc-opts--fold{max-height:calc((var(--option-h) + var(--s-8)) * var(--opt-visible));overflow-y:auto} /* Короткий экран: список забирает остаток высоты, кнопка всегда остаётся видна. Число видимых вариантов не задаётся заранее — оно зависит от высоты экрана и длины заголовка. --opt-visible-short держит нижнюю границу: меньше этого числа список не сжимается, иначе выбирать не из чего. */ /* Высота обрезанного списка: N вариантов с промежутками, минус --s-4 на рамки самих вариантов — без поправки остаток в пару точек выталкивает низ области. */ .fnc-opts--fold-short{overflow-y:auto;max-height:calc((var(--option-h) + var(--s-8)) * var(--opt-visible-short) - var(--s-4))} .fnc-opt{display:flex;align-items:center;gap:var(--s-12);min-height:var(--option-h); background:var(--c-bg-1);border:var(--bw-1) solid var(--c-border-2);border-radius:var(--r-12); padding:var(--s-8) var(--s-16);cursor:pointer;position:relative} .fnc-opt:hover{border-color:var(--c-accent-for-white-text)} .fnc-opt input{position:absolute;opacity:0;width:var(--s-2);height:var(--s-2);margin:0} .fnc-opt__mark{flex:0 0 auto;width:var(--control-box);height:var(--control-box);border-radius:var(--r-pill); border:var(--bw-2) solid var(--c-border-strong);background:var(--c-bg-1); display:flex;align-items:center;justify-content:center;color:var(--c-text-inverse); font-family:var(--font-head);font-weight:var(--fw-bold);font-size:var(--fs-caption);line-height:1} .fnc-opt__mark--check{border-radius:var(--r-4)} .fnc-opt__t{font-size:var(--fs-body);line-height:var(--lh-body)} /* Вид отмеченного идёт от самого поля, а не от класса сервера: у состояния один источник. Прежде рамку рисовали оба — класс `--on` и `:has(:checked)`, — и на выбранном варианте стояло две оранжевые обводки. Находка владельца 22.09.2026. Обводка не зависит от того, куда человек нажал потом: за фокусом следит только `:focus`, а он у нажатия мышью не срабатывает. */ .fnc-opt:has(input:checked){border-color:var(--c-accent-for-white-text);border-width:var(--bw-2);background:var(--c-accent-bg)} .fnc-opt:has(input:checked) .fnc-opt__t{font-weight:var(--fw-semibold)} .fnc-opt:has(input:checked) .fnc-opt__mark{border-color:var(--c-accent-for-white-text);background:var(--c-accent-for-white-text)} .fnc-opt--apart{margin-top:var(--s-12)} .fnc-opt__note{display:block;font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)} .fnc-opt input:focus + .fnc-opt__mark,.fnc-opt.is-focus{outline:var(--bw-2) solid var(--c-border-focus); outline-offset:var(--s-2)} /* поле города и подсказка */ .fnc-field{display:flex;flex-direction:column;gap:var(--s-8);max-width:var(--field-max);position:relative} .fnc-field__label{font-family:var(--font-head);font-weight:var(--fw-semibold);font-size:var(--fs-body-sm); line-height:var(--lh-body-sm);color:var(--c-text-2)} .fnc-field__box{display:flex;align-items:center;gap:var(--s-8);background:var(--c-bg-1); border:var(--bw-1) solid var(--c-border-strong);border-radius:var(--r-12); min-height:var(--field-h);padding:0 var(--s-8) 0 var(--s-16)} .fnc-field__box--focus{border-color:var(--c-border-focus);border-width:var(--bw-2)} .fnc-field__box--err{border-color:var(--c-error);border-width:var(--bw-2)} .fnc-field__inp{flex:1 1 auto;min-width:0;border:0;background:transparent;font-family:var(--font-text); font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-1);padding:var(--s-12) 0} .fnc-field__inp::placeholder{color:var(--c-text-3)} .fnc-field__clear{flex:0 0 auto;width:var(--tap-min);height:var(--tap-min);border:0;background:transparent; border-radius:var(--r-pill);cursor:pointer;color:var(--c-text-2); font-size:var(--fs-body-lg);line-height:1;display:flex;align-items:center;justify-content:center} .fnc-field__clear:hover{background:var(--c-bg-3);color:var(--c-text-1)} .fnc-field__hint{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-text-3);margin:0} .fnc-sugg{list-style:none;margin:0;padding:var(--s-4);background:var(--c-bg-1); border:var(--bw-1) solid var(--c-border-2);border-radius:var(--r-12);box-shadow:var(--sh-4); max-height:calc(var(--sugg-h) * var(--sugg-visible));overflow-y:auto} .fnc-sugg__i{display:flex;align-items:baseline;gap:var(--s-8);min-height:var(--sugg-h); padding:var(--s-8) var(--s-12);border-radius:var(--r-8);cursor:pointer} .fnc-sugg__i:hover{background:var(--c-bg-3)} .fnc-sugg__c{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--c-text-1)} .fnc-sugg__c b{font-weight:var(--fw-bold)} .fnc-sugg__r{font-size:var(--fs-caption);line-height:var(--lh-caption);color:var(--c-text-3)} /* просьба */ .fnc-ask{display:flex;gap:var(--s-12);background:var(--c-error-bg);border-radius:var(--r-12); padding:var(--s-12) var(--s-16);max-width:var(--vac-card-max);margin:0} .fnc-ask__t{font-size:var(--fs-body-sm);line-height:var(--lh-body-sm);color:var(--c-error);text-wrap:pretty} /* низ экрана опроса */ .fnc-nav{display:flex;flex-direction:column;gap:var(--s-12);align-items:stretch;max-width:var(--vac-card-max)} .fnc-nav__back{align-self:flex-start} /* ===================== ПИНОВКИ ПРИЁМОЧНЫХ ФРЕЙМОВ ===================== Только для страниц приёмки: там макеты стоят рядом в одном окне, и медиазапрос по ширине окна для них не работает. В продукте эти правила не нужны — там раскладку переключает @media из tokens.css. Держатся здесь, а не в