/* ==========================================================================
SchoolRate — обновление визуала главной страницы
Подключается ПОСЛЕДНИМ, поверх style_new / add / new-changes / inline-main.
Не меняет HTML-структуру, сетку (288 / 1008 / 144) и размеры колонок
(рейтинг 677px + правая колонка 248px). Цвета и шрифт — прежние (Onest).
========================================================================== */
/*
Файл дизайнера из задачи 23212309 (redesign.css, 26.10), подключён
в варианте main шаблона SiteLayout. Снят только последний блок - режим
просмотра во фрейме: он нужен был самому макету (рамка телефона), сайту нет.
Наши правки к нему - в конце файла, отдельным разделом.
*/
:root {
--sr-red: #e41b2e;
--sr-red-dark: #c20f1b;
--sr-red-soft: #fdecee;
--sr-navy: #151d2d;
--sr-ink: #212f52;
--sr-bg: #f8f8f8;
--sr-card: #fff;
--sr-line: #e8eaef;
--sr-muted: #6b7384;
--sr-radius-lg: 16px;
--sr-radius-md: 12px;
--sr-radius-sm: 8px;
--sr-shadow: 0 1px 2px rgba(21, 29, 45, .05), 0 6px 20px rgba(21, 29, 45, .06);
--sr-shadow-hover: 0 2px 4px rgba(21, 29, 45, .06), 0 12px 28px rgba(21, 29, 45, .10);
--sr-ease: .18s ease;
}
/* ---------- 1. Заголовок экрана -------------------------------------------- */
.sr-home .wrapper__main .mainscreen1-title {
letter-spacing: -.01em;
line-height: 1.12;
}
.sr-home .wrapper__main .mainscreen1-subtitle {
color: var(--sr-muted);
letter-spacing: .01em;
}
.sr-home .wrapper__main .main-hed {
position: relative;
margin: 28px 0 16px;
padding-left: 14px;
font-size: 20px;
line-height: 1.25;
color: var(--sr-navy);
}
.sr-home .wrapper__main .main-hed::before {
content: "";
position: absolute;
left: 0;
top: 3px;
bottom: 3px;
width: 4px;
border-radius: 4px;
background: var(--sr-red);
}
/* ---------- 2. Переключатель Все / Online / Очные --------------------------- */
/* Переключатель, сортировка и таблица — одна общая карточка */
.sr-home .wrapper__main #tabs .main-tab {
background: var(--sr-card);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow);
}
.sr-home .wrapper__main .category-list__nav {
display: flex;
height: auto;
margin: 14px 16px 0;
padding: 4px;
gap: 2px;
background: #f2f3f6;
border-radius: var(--sr-radius-md);
}
.sr-home .wrapper__main .category-list__nav-link {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 42px;
border-radius: 9px;
color: var(--sr-muted);
font-size: 15px;
transition: background var(--sr-ease), color var(--sr-ease), box-shadow var(--sr-ease);
}
.sr-home .wrapper__main .category-list__nav-link:hover:not(.active) {
color: var(--sr-navy);
}
.sr-home .wrapper__main .category-list__nav-link.active {
background: #fff;
color: var(--sr-red-dark);
box-shadow: 0 1px 3px rgba(21, 29, 45, .12);
}
/* «Рейтинг по: Общий / Цена / Отзывы» */
.sr-home .wrapper__main .category-list__rating-title .icon {
color: var(--sr-faint, #98a1b3);
}
.sr-home .wrapper__main .category-list__box {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px 6px;
padding: 14px 16px 12px;
background: var(--sr-card);
}
.sr-home .wrapper__main .category-list__rating-title {
display: flex;
align-items: center;
margin: 0 6px 0 0;
color: var(--sr-muted);
}
.sr-home .wrapper__main .category-list__list {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0;
padding: 0;
}
.sr-home .wrapper__main .category-list__list li {
margin: 0;
padding: 0;
list-style: none;
}
.sr-home .wrapper__main .category-list__item {
display: inline-block;
padding: 6px 14px;
border-radius: 999px;
background: #f2f3f6;
color: var(--sr-ink);
line-height: 1.2;
text-decoration: none;
transition: background var(--sr-ease), color var(--sr-ease);
}
.sr-home .wrapper__main .category-list__item:hover {
background: var(--sr-red-soft);
color: var(--sr-red-dark);
}
.sr-home .wrapper__main .category-list__item.active {
background: #fff;
color: var(--sr-red-dark);
box-shadow: inset 0 0 0 1.5px var(--sr-red);
}
/* ---------- 3. Таблица рейтинга -------------------------------------------- */
.sr-home .wrapper__main .courses-content {
background: var(--sr-card);
border-radius: 0 0 var(--sr-radius-lg) var(--sr-radius-lg);
}
.sr-home .wrapper__main .raiting-header {
margin: 0;
padding-top: 4px;
padding-bottom: 8px;
background: var(--sr-card);
border-bottom: 1px solid var(--sr-line);
color: var(--sr-muted);
font-size: 12px;
letter-spacing: .02em;
}
.sr-home .wrapper__main .raiting-content .raiting-row,
.sr-home .wrapper__main .raiting-content .raiting-row:nth-child(odd),
.sr-home .wrapper__main .raiting-content .raiting-row:nth-child(even) {
background: var(--sr-card);
border-bottom: 1px solid #f0f1f5;
transition: background var(--sr-ease), box-shadow var(--sr-ease);
}
.sr-home .wrapper__main .raiting-content .raiting-row:hover {
background: #f8f9fb;
}
/* после последней строки разделитель не нужен */
.sr-home .wrapper__main .raiting-content .raiting-row:last-child {
border-bottom: 0;
}
/* место в рейтинге */
.sr-home .wrapper__main .raiting-row .position {
min-width: 24px;
margin-right: 8px;
color: var(--sr-muted);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 13px;
text-align: center;
}
.sr-home .wrapper__main .raiting-row .name {
color: var(--sr-navy);
transition: color var(--sr-ease);
}
.sr-home .wrapper__main .raiting-row .name:hover {
color: var(--sr-red);
}
.sr-home .wrapper__main .raiting-row .icon-courses {
border-radius: 4px;
}
/* баллы — главная метрика: просто жирнее и темнее остальных чисел */
.sr-home .wrapper__main .raiting-row .points {
color: var(--sr-navy);
font-size: 15px;
}
.sr-home .wrapper__main .raiting-row .price {
color: var(--sr-navy);
font-family: 'Onest-SemiBold', sans-serif;
}
.sr-home .wrapper__main .raiting-row .kolonka {
color: var(--sr-ink);
}
.sr-home .wrapper__main .raiting-row .kolonka--net {
color: #a3a9b6;
}
/* значки «Филиалы / Приложение / Своя платформа» под названием */
.sr-home .wrapper__main .raiting-row__znachki {
color: var(--sr-muted);
}
.sr-home .wrapper__main .raiting-row__znachok {
color: var(--sr-muted);
}
/* «i» в строке */
.sr-home .wrapper__main .raiting-row__popup-link img {
opacity: .45;
transition: opacity var(--sr-ease);
}
.sr-home .wrapper__main .raiting-row:hover .raiting-row__popup-link img {
opacity: 1;
}
/* кнопка «Все школы английского языка» */
.sr-home .wrapper__main .all-school-link {
padding: 18px 16px 20px;
background: var(--sr-card);
margin-top: 0;
text-align: center;
border-radius: 0 0 var(--sr-radius-lg) var(--sr-radius-lg);
}
.sr-home .wrapper__main .all-school-link .header-link1 {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border: 2px solid var(--sr-navy);
border-radius: 999px;
background: transparent;
color: var(--sr-navy);
font-family: 'Onest-Bold', sans-serif;
font-size: 13px;
letter-spacing: .03em;
text-decoration: none;
transition: background var(--sr-ease), color var(--sr-ease), border-color var(--sr-ease);
}
.sr-home .wrapper__main .all-school-link .header-link1:hover {
background: var(--sr-red);
border-color: var(--sr-red);
color: #fff;
}
/* ---------- 4. Правая колонка: цифры + реклама ----------------------------- */
.sr-home .wrapper__main .school-sliders {
display: flex;
flex-direction: column;
gap: 14px;
align-items: stretch;
}
.sr-home .wrapper__main .school-sliders > * {
margin: 0;
}
/* блок цифр — одна аккуратная карточка */
.sr-home .wrapper__main .school-sliders > .header__info {
padding: 16px 18px 18px;
background: var(--sr-card);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow);
margin-bottom: 0;
}
.sr-home .wrapper__main .school-sliders .header__info .average-cost {
margin-bottom: 14px;
padding-bottom: 14px;
border-bottom: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .school-sliders .average-cost__value {
align-items: center;
color: var(--sr-navy);
font-size: 20px;
}
.sr-home .wrapper__main .school-sliders .average-cost__value .icon {
flex: 0 0 auto;
margin-right: 8px;
color: var(--sr-red);
}
.sr-home .wrapper__main .school-sliders .average-cost__text {
max-width: none;
font-size: 11px;
line-height: 1.35;
color: var(--sr-muted);
}
.sr-home .wrapper__main .school-sliders .header__info-rating-row:first-child {
margin-bottom: 14px;
}
.sr-home .wrapper__main .school-sliders .header__info-rating-row:nth-child(2) {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.sr-home .wrapper__main .school-sliders .header__info-rating-row:nth-child(2) .header__info-rating-item:first-child {
margin-right: 0;
}
.sr-home .wrapper__main .school-sliders .header__info-rating-row:nth-child(2) .header__info-rating-item {
padding: 10px 12px;
border-radius: var(--sr-radius-md);
background: #f6f7f9;
}
.sr-home .wrapper__main .school-sliders .header__info-rating-title {
color: var(--sr-navy);
}
.sr-home .wrapper__main .school-sliders a.header__info-rating-item .header__info-rating-title {
color: var(--sr-navy);
}
.sr-home .wrapper__main .school-sliders .header__info-rating-text {
color: var(--sr-muted);
font-size: 12px;
line-height: 1.3;
}
/* карточка баннера */
.sr-home .wrapper__main .school-sliders__slider {
background: var(--sr-card);
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow);
overflow: visible;
transition: box-shadow var(--sr-ease), transform var(--sr-ease);
}
.sr-home .wrapper__main .school-sliders__slider:hover {
box-shadow: var(--sr-shadow-hover);
transform: translateY(-2px);
}
.sr-home .wrapper__main .school-slider__slide-top {
border-radius: var(--sr-radius-lg) var(--sr-radius-lg) 0 0;
overflow: hidden;
}
.sr-home .wrapper__main .school-slider__slide-img {
display: block;
width: 100%;
height: auto;
}
.sr-home .wrapper__main .school-slider__slide-main {
padding-bottom: 18px;
}
/* метка «Реклама» всегда привязана к картинке баннера, а не к карточке */
.sr-home .wrapper__main .school-slider__slide-top {
position: relative;
}
.sr-home .wrapper__main .school-slider__slide-name a {
color: var(--sr-navy);
text-decoration: none;
transition: color var(--sr-ease);
}
.sr-home .wrapper__main .school-slider__slide-name a:hover {
color: var(--sr-red);
}
.sr-home .wrapper__main .school-slider__slide-info {
color: #4a5163;
}
.sr-home .wrapper__main .school-slider__slide-cost-value {
color: var(--sr-navy);
font-family: 'Onest-Bold', sans-serif;
}
.sr-home .wrapper__main .school-slider__slide-btn {
height: 46px;
border-radius: 0 0 var(--sr-radius-lg) var(--sr-radius-lg);
background: var(--sr-red);
transition: background var(--sr-ease);
}
.sr-home .wrapper__main .school-slider__slide-btn:hover {
background: var(--sr-red-dark);
}
/* метка «Реклама» на изображении */
.sr-home .wrapper__main .ad-mark__label {
border-radius: 999px;
}
/* Слоты под рекламу в правой колонке (ширина 248px, высота любая).
.ad-slot--empty — заглушка с пунктиром: для продакшна уберите этот класс и положите внутрь
.ad-slot__box баннер ![]()
, либо скройте заглушки: .ad-slot--empty { display: none; } */
.ad-slot {
position: relative;
width: 100%;
}
.ad-slot__tag {
position: absolute;
z-index: 2;
top: 10px;
left: 10px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(21, 29, 45, .78);
color: #fff;
font-family: 'Onest-Medium', sans-serif;
font-size: 10px;
line-height: 1.5;
letter-spacing: .04em;
text-transform: uppercase;
}
.ad-slot__box {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
min-height: 350px;
padding: 16px;
border: 2px dashed #cfd3dc;
border-radius: var(--sr-radius-lg);
background: repeating-linear-gradient(135deg, #fbfbfc 0 12px, #f4f5f8 12px 24px);
color: var(--sr-muted);
font-size: 12px;
text-align: center;
}
.ad-slot__box b {
font-family: 'Onest-Bold', sans-serif;
font-size: 14px;
color: var(--sr-ink);
}
.ad-slot--sticky {
position: sticky;
top: 16px;
}
.ad-slot--sticky .ad-slot__box {
min-height: 500px;
}
/* заполненный слот: ![]()
внутри .ad-slot__box */
.ad-slot:not(.ad-slot--empty) .ad-slot__box {
min-height: 0;
padding: 0;
border: 0;
overflow: hidden;
background: var(--sr-card);
box-shadow: var(--sr-shadow);
}
.ad-slot:not(.ad-slot--empty) .ad-slot__box img {
display: block;
width: 100%;
height: auto;
}
/* ---------- 5. Эксперты рекомендуют ---------------------------------------- */
/* Карточка-раздел: единые поля со всех сторон (раньше справа было 0 и правая часть слайда обрезалась) */
.sr-home .wrapper__main .content__article_bg {
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow);
}
.sr-home .wrapper__main .content__article_bg {
padding: 28px 24px 24px;
}
.sr-home .wrapper__main .content__article-top .content__article-group {
margin-right: 0;
}
.sr-home .wrapper__main .content__article-link {
color: var(--sr-red);
transition: color var(--sr-ease);
}
.sr-home .wrapper__main .content__article-link:hover {
color: var(--sr-red-dark);
}
.sr-home .wrapper__main .content__article-text {
flex: 1 1 0;
min-width: 0;
color: #4a5163;
line-height: 1.55;
}
.sr-home .wrapper__main .slider-experts__slide-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 270px;
gap: 24px;
align-items: stretch;
}
.sr-home .wrapper__main .slider-experts__slide-col,
.sr-home .wrapper__main .slider-experts__slide-col:nth-child(2) {
min-width: 0;
width: auto;
padding: 0;
}
.sr-home .wrapper__main .slider-experts__slide-expert-name {
color: var(--sr-navy);
}
.sr-home .wrapper__main .slider-experts__slide-expert-img {
border-radius: 50%;
}
/* отзыв эксперта: ровная высота слайдов — максимум два абзаца, длинный обрезается по строкам (без mask-image: он ломает отрисовку слайдера) */
.sr-home .wrapper__main .slider-experts__slide-expert-info-text:not(.slider-experts__slide-expert-info-text_bold) p {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 6;
overflow: hidden;
margin: 0 0 8px;
}
.sr-home .wrapper__main .slider-experts__slide-expert-info-text:not(.slider-experts__slide-expert-info-text_bold) p:nth-child(n+3) {
display: none;
}
.sr-home .wrapper__main .slider-experts__slide-expert-info-link-more {
color: var(--sr-red);
}
/* правая карточка школы */
.sr-home .wrapper__main .slider-experts__slide-info {
width: auto;
height: 100%;
border-radius: var(--sr-radius-md);
background: #f4f5f8;
}
.sr-home .wrapper__main .slider-experts__slide-info-top {
width: auto;
background: var(--sr-card);
border-bottom: 1px solid var(--sr-line);
border-radius: var(--sr-radius-md) var(--sr-radius-md) 0 0;
}
.sr-home .wrapper__main .slider-experts__slide-info-number {
color: var(--sr-navy);
}
/* шапка карточки школы: число и подпись помещаются в 270px в одну строку подписи */
.sr-home .wrapper__main .slider-experts__slide-info-top {
height: auto;
min-height: 52px;
align-items: stretch;
}
.sr-home .wrapper__main .slider-experts__slide-info-number {
flex: none;
padding: 12px 16px;
font-size: 22px;
line-height: 1.2;
}
.sr-home .wrapper__main .slider-experts__slide-info-rating {
justify-content: flex-start;
padding: 10px 14px;
font-family: 'Onest-Medium', sans-serif;
font-size: 11px;
line-height: 1.3;
letter-spacing: .04em;
color: var(--sr-muted);
}
.sr-home .wrapper__main .slider-experts__slide-info-main {
padding: 24px 18px;
}
.sr-home .wrapper__main .slider-experts__slide-info-label {
width: auto;
height: auto;
margin: 0 auto 20px;
padding: 6px 14px;
border-radius: 999px;
background: var(--sr-red-soft);
color: var(--sr-red-dark);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 13px;
line-height: 1.3;
}
.sr-home .wrapper__main .slider-experts__slide-info-label::before,
.sr-home .wrapper__main .slider-experts__slide-info-label::after,
.sr-home .wrapper__main .slider-experts__slide-info-label-left {
display: none;
}
.sr-home .wrapper__main .slider-experts__slide-info-img-wrapper {
margin-bottom: 22px;
border-radius: var(--sr-radius-sm);
}
.sr-home .wrapper__main .slider-experts__slide-info-cost {
margin-bottom: 22px;
font-size: 15px;
line-height: 1.3;
text-align: center;
color: var(--sr-muted);
}
.sr-home .wrapper__main .slider-experts__slide-info-cost-value {
font-size: 28px;
color: var(--sr-navy);
}
.sr-home .wrapper__main .slider-experts__slide-info-link-order {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 48px;
margin: auto 0 0;
padding: 0 12px;
border-radius: 999px;
text-align: center;
transition: background var(--sr-ease), transform var(--sr-ease);
}
.sr-home .wrapper__main .slider-experts__slide-info-link-order:hover {
background: var(--sr-red-dark);
transform: translateY(-1px);
}
.sr-home .wrapper__main .slider-experts__slide-info-img {
border-radius: var(--sr-radius-sm);
}
.sr-home .wrapper__main .slider-experts {
padding-bottom: 64px;
}
/* навигация слайдера: стрелки справа, не перекрывают «Читать далее» */
.sr-home .wrapper__main .slider-experts .slick-prev {
left: auto;
right: 56px;
}
.sr-home .wrapper__main .slider-experts .slick-next {
right: 0;
}
/* ---------- 5a. Шапка раздела: заголовок слева, ссылка справа, текст под ним ---- */
/* Было: огромный заголовок в две строки, текст зажат в узкую колонку справа, на фоне — декоративные треугольники. */
.sr-home .wrapper__main .content__article_bg {
background-image: none;
}
@media all {
.sr-home .wrapper__main .content__article-top {
display: block;
margin-bottom: 0;
padding-bottom: 24px;
}
.sr-home .wrapper__main .content__article_bg:not(:has(.content__experts)) .content__article-top {
padding-bottom: 8px;
}
.sr-home .wrapper__main .content__experts .slider-experts {
padding-top: 24px;
}
.sr-home .wrapper__main .content__article-top .content__article-group {
display: flex;
flex: none;
flex-direction: row-reverse;
align-items: baseline;
justify-content: space-between;
gap: 20px;
width: 100%;
}
.sr-home .wrapper__main .content__article-top .title.title--h1 {
margin: 0;
font-family: 'Onest-Bold', sans-serif;
font-size: 20px;
line-height: 1.25;
letter-spacing: .03em;
}
.sr-home .wrapper__main .content__article-top .title--h1 br {
display: none;
}
.sr-home .wrapper__main .content__article-top .content__article-link {
font-size: 12px;
text-decoration: none;
border-bottom: 1px solid currentColor;
line-height: 1.3;
}
.sr-home .wrapper__main .content__article-top .content__article-text {
max-width: 620px;
margin: 10px 0 0;
font-size: 14px;
line-height: 1.6;
}
}
/* ---------- 6. Быстрый выбор / подборки ------------------------------------ */
.sr-home .wrapper__main .courses-list__item {
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow);
transition: transform var(--sr-ease), box-shadow var(--sr-ease), background var(--sr-ease);
}
.sr-home .wrapper__main .courses-list__item:hover {
transform: translateY(-3px);
box-shadow: 0 14px 28px rgba(21, 29, 45, .22);
}
.sr-home .wrapper__main .courses-selection__item {
border-radius: var(--sr-radius-lg);
box-shadow: var(--sr-shadow);
transition: transform var(--sr-ease), box-shadow var(--sr-ease);
}
.sr-home .wrapper__main .courses-selection__item:hover {
transform: translateY(-2px);
box-shadow: var(--sr-shadow-hover);
}
/* чипы «по направлению / сложности / экзаменам…» */
.sr-home .wrapper__main .special-block .exams-list a {
transition: background var(--sr-ease), color var(--sr-ease), box-shadow var(--sr-ease);
}
.sr-home .wrapper__main .special-block .exams-list a:hover {
background: var(--sr-red-soft);
color: var(--sr-red-dark);
}
.sr-home .wrapper__main .special-block .smart-desc1 h3 {
color: var(--sr-ink);
}
/* ---------- 6a. Быстрый выбор курсов: акцентные плитки + фильтры строками ------- */
/* Было: шесть тяжёлых тёмных плиток по 120px, у фильтров широкие пустые колонки и мелкий серый текст.
Стало: компактные тёмные плитки-подборки (акцент сохранён) и фильтры строками «подпись — теги»,
теги залитые и контрастные. */
@media all {
.sr-home .wrapper__main .content__article_fast .courses-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
width: 100%;
margin: 0 0 28px;
padding: 0;
background: none;
}
.sr-home .wrapper__main .content__article_fast .courses-list li {
width: auto;
margin: 0;
border: 0;
background: none;
}
.sr-home .wrapper__main .content__article_fast .courses-list__item {
min-height: 0;
padding: 18px 16px 18px 20px;
border: 0;
border-radius: 12px;
background: var(--sr-navy);
color: #fff;
box-shadow: none;
transition: background .18s ease;
}
.sr-home .wrapper__main .content__article_fast .courses-list__item:hover {
background: #243050;
}
.sr-home .wrapper__main .content__article_fast .courses-list__category {
max-width: none;
color: #fff;
font-family: 'Onest-SemiBold', sans-serif;
font-size: 14px;
line-height: 1.35;
text-transform: none;
}
.sr-home .wrapper__main .content__article_fast .courses-list__category::first-letter {
text-transform: uppercase;
}
.sr-home .wrapper__main .content__article_fast .courses-list__item svg {
display: none;
}
.sr-home .wrapper__main .content__article_fast .courses-list__category-icon {
display: flex;
flex: none;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin: 0 0 0 12px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
transition: background .18s ease;
}
.sr-home .wrapper__main .content__article_fast .courses-list__category-icon::after {
content: "";
width: 6px;
height: 6px;
margin-right: 2px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
}
.sr-home .wrapper__main .content__article_fast .courses-list__item:hover .courses-list__category-icon {
background: var(--sr-red);
}
.sr-home .wrapper__main .content__article_fast .special-block {
padding: 0;
}
.sr-home .wrapper__main .content__article_fast .smart-desc1 {
flex-direction: column;
align-items: flex-start;
margin: 0;
}
.sr-home .wrapper__main .content__article_fast .smart-desc1 h3 {
width: auto;
min-width: 0;
margin: 0 0 10px;
color: var(--sr-navy);
font-family: 'Onest-Bold', sans-serif;
font-size: 12px;
letter-spacing: .06em;
line-height: 1.2;
}
.sr-home .wrapper__main .content__article_fast .exams-list {
gap: 6px;
}
.sr-home .wrapper__main .content__article_fast .exams-list li {
margin: 0;
}
.sr-home .wrapper__main .content__article_fast .exams-list a {
padding: 7px 14px;
border: 0;
border-radius: 999px;
background: #eceef3;
color: var(--sr-navy);
font-family: 'Onest-Medium', sans-serif;
font-size: 13px;
line-height: 1.2;
transition: background .18s ease, color .18s ease;
}
.sr-home .wrapper__main .content__article_fast .exams-list a:hover {
background: var(--sr-red);
color: #fff;
}
.sr-home .wrapper__main .qc-v1 .special-block,
.sr-home .wrapper__main .content__article_fast .special-block {
display: block;
}
.sr-home .wrapper__main .content__article_fast .smart-desc1:last-child {
border-bottom: 0;
}
.sr-home .wrapper__main .content__article_fast .special-block {
border-top: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .content__article_fast .smart-desc1 {
flex-direction: row;
align-items: flex-start;
gap: 24px;
padding: 14px 0;
border-bottom: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .content__article_fast .smart-desc1 h3 {
flex: 0 0 150px;
margin: 6px 0 0;
}
.sr-home .wrapper__main .content__article_fast .exams-list {
flex: 1;
}
.sr-home .wrapper__main .content__article_fast .special-block {
display: block;
}
/* единый заголовок раздела */
.sr-home .wrapper__main .content__article_bg .title.title--h1 {
margin-top: 0;
font-family: 'Onest-Bold', sans-serif;
font-size: 20px;
letter-spacing: .03em;
}
}
/* ---------- 7. Отзывы ------------------------------------------------------ */
.sr-home .wrapper__main .school-reviews__filter-button {
transition: background var(--sr-ease), color var(--sr-ease), border-color var(--sr-ease);
}
.sr-home .wrapper__main .user-review {
border-radius: var(--sr-radius-md);
transition: border-color var(--sr-ease), box-shadow var(--sr-ease);
}
.sr-home .wrapper__main .user-review:hover {
border-color: #f3b9bf;
box-shadow: 0 6px 18px rgba(21, 29, 45, .08);
}
.sr-home .wrapper__main .review-name-date {
color: var(--sr-muted);
}
/* ---------- 7a. Отзывы: строка-карточка вместо «плавающих» плашек (от 768px) ----- */
/* Было: аватар, имя и звёзды висели над карточкой отдельными плашками с тенями, кнопка — огромная красная «таблетка».
Стало: логотип школы слева, справа имя и дата, звёзды и текст отзыва. */
@media (min-width: 768px) {
.sr-home .wrapper__main .school-reviews-list .one-review {
margin: 0 0 12px;
}
.sr-home .wrapper__main .reviews-tabs .school-reviews-list {
margin: 20px 0 8px;
padding: 0;
}
.sr-home .wrapper__main .reviews-tabs .school-reviews {
margin: 20px 0 0;
padding: 0;
}
.sr-home .wrapper__main .reviews-tabs .school-reviews__filter {
margin: 0;
}
.sr-home .wrapper__main .school-reviews-list .one-review::before {
display: none;
}
.sr-home .wrapper__main .school-reviews-list .user-review {
display: grid;
grid-template-columns: 150px minmax(0, 1fr);
column-gap: 28px;
align-items: start;
margin: 0;
padding: 20px 24px;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-lg);
background: #fff;
box-shadow: none;
}
.sr-home .wrapper__main .school-reviews-list .user-review:hover {
border-color: var(--sr-line);
box-shadow: none;
}
.sr-home .wrapper__main .school-reviews-list .school-reviews-list__logo-wrapper {
width: auto;
padding: 0;
}
.sr-home .wrapper__main .school-reviews-list .school-reviews-list__logo-wrapper a {
flex-direction: column;
align-items: center;
gap: 10px;
}
.sr-home .wrapper__main .school-reviews-list .school-reviews-list__logo-wrapper img {
width: auto;
max-width: 130px;
max-height: 64px;
object-fit: contain;
}
.sr-home .wrapper__main .school-reviews-list .school-reviews-list__logo-wrapper .name {
padding: 0;
font-family: 'Onest-SemiBold', sans-serif;
font-size: 13px;
line-height: 1.3;
color: var(--sr-navy);
}
.sr-home .wrapper__main .school-reviews-list .review-school + .review-content,
.sr-home .wrapper__main .school-reviews-list .school-reviews-list__logo-wrapper + .review-content {
width: auto;
padding: 0;
}
.sr-home .wrapper__main .school-reviews-list .review-flex {
display: flex;
align-items: center;
justify-content: space-between;
margin: 0 0 8px;
}
.sr-home .wrapper__main .school-reviews-list .review-name-date {
position: static;
padding: 0;
background: none;
box-shadow: none;
color: var(--sr-navy);
font-family: 'Onest-Bold', sans-serif;
font-size: 17px;
line-height: 1.25;
letter-spacing: 0;
text-transform: none;
}
.sr-home .wrapper__main .school-reviews-list .review-raiting {
position: static;
padding: 0;
background: none;
box-shadow: none;
}
.sr-home .wrapper__main .school-reviews-list .review-text,
.sr-home .wrapper__main .school-reviews-list .review-text p {
font-size: 14px;
line-height: 1.55;
color: #2a3142;
}
.sr-home .wrapper__main .school-reviews-list .review-name-date {
display: flex;
align-items: baseline;
gap: 12px;
}
.sr-home .wrapper__main .school-reviews-list .review-date {
color: var(--sr-muted);
font-family: 'Onest-Regular', sans-serif;
font-size: 14px;
}
/* фильтр «Нейтральные / Положительные / Отрицательные» и кнопка */
.sr-home .wrapper__main .reviews-tabs .school-reviews__filter-item.ui-tabs-active {
background: var(--sr-red-soft);
color: var(--sr-red-dark);
}
.sr-home .wrapper__main .reviews-tabs .school-reviews__filter-item.ui-tabs-active .school-reviews__filter-button {
color: var(--sr-red-dark);
}
.sr-home .wrapper__main .reviews-block .btn--add {
padding: 10px 20px;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-md);
background: #fff;
color: var(--sr-navy);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 13px;
transition: border-color var(--sr-ease);
}
.sr-home .wrapper__main .reviews-block .btn--add:hover {
border: 1px solid var(--sr-navy);
background: #fff;
color: var(--sr-navy);
}
}
/* смайлы фильтра отзывов: цвет по смыслу, а не фирменный красный у всех.
Иконка лежит рядом со ссылкой (li > svg + a), поэтому адресуем её через :has() у li */
.sr-home .wrapper__main .school-reviews__filter-item:has(.school-reviews__filter-button--neutral) > .icon {
color: #8a93a6;
}
.sr-home .wrapper__main .school-reviews__filter-item:has(.school-reviews__filter-button--positive) > .icon {
color: #2e9b5f;
}
.sr-home .wrapper__main .school-reviews__filter-item:has(.school-reviews__filter-button--negative) > .icon {
color: var(--sr-red);
}
body.sr-home .wrapper__main .school-reviews__filter-item > .icon {
border-color: currentColor !important; /* в оригинале рамка красная у всех трёх, перебиваем селектор с .ui-tabs */
}
/* активная вкладка отзывов — нейтральная, чтобы красный не читался как «отрицательные» */
.sr-home .wrapper__main .reviews-tabs .school-reviews__filter-item.ui-tabs-active,
.sr-home .wrapper__main .reviews-tabs.ui-tabs .school-reviews__filter-item.ui-tabs-active .school-reviews__filter-toggle {
background: #e9ecf3;
color: var(--sr-navy);
}
.sr-home .wrapper__main .reviews-tabs .school-reviews__filter-item.ui-tabs-active .school-reviews__filter-button {
color: var(--sr-navy);
}
/* ---------- 7b. Нижний блок цифр: оригинальная раскладка (колонка 248px), только типографика ---- */
.sr-home .wrapper__main .header .average-cost__text {
max-width: none;
font-size: 12px;
line-height: 1.35;
}
.sr-home .wrapper__main .header .header__info-rating-text {
font-size: 12px;
line-height: 1.3;
}
/* ---------- 7b. Нижний баннер «Подбери курсы» и цифры (от 768px) ---------------------
Баннер на всю ширину колонки, под ним — полоса из четырёх цифр:
число сверху, пояснение снизу, все числа одного размера, тонкие разделители между ними. */
@media (min-width: 768px) {
.sr-home .wrapper__main .header:not(.header--mobile) {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 16px;
width: auto;
margin: 0 0 24px;
padding: 0;
background: none;
}
.sr-home .wrapper__main .header__slider-wrapper {
flex: none;
width: 100%;
max-width: 100%;
}
.sr-home .wrapper__main .header__slider-wrapper img,
.sr-home .wrapper__main .slider-header__slide-img {
display: block;
width: 100%;
height: auto;
border-radius: var(--sr-radius-lg);
}
.sr-home .wrapper__main .slider-header__slide-title {
font-size: 30px;
line-height: 1.2;
}
.sr-home .wrapper__main .header > .header__info {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0;
width: 100%;
max-width: 100%;
margin: 0;
padding: 18px 0;
border-radius: var(--sr-radius-lg);
background: #fff;
}
.sr-home .wrapper__main .header .header__info-rating,
.sr-home .wrapper__main .header .header__info-rating-row,
.sr-home .wrapper__main .header .header__info-rating-row:nth-child(2) {
display: contents;
}
.sr-home .wrapper__main .header .average-cost,
.sr-home .wrapper__main .header .header__info-rating-item {
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
margin: 0;
padding: 0 20px;
border: 0;
border-left: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .header .average-cost {
border-left: 0;
}
.sr-home .wrapper__main .header .average-cost__value .icon {
display: none;
}
.sr-home .wrapper__main .header .average-cost__value,
.sr-home .wrapper__main .header .header__info-rating-title {
display: block;
margin: 0;
color: var(--sr-navy);
font-family: 'Onest-Black', sans-serif;
font-size: 24px;
line-height: 1.1;
white-space: nowrap;
}
.sr-home .wrapper__main .header .average-cost__text,
.sr-home .wrapper__main .header .header__info-rating-text {
max-width: none;
margin: 0;
color: var(--sr-muted);
font-size: 13px;
line-height: 1.4;
}
}
@media (min-width: 768px) and (max-width: 1024px) {
.sr-home .wrapper__main .header > .header__info {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 16px;
}
.sr-home .wrapper__main .header .header__info-rating-row:nth-child(2) .header__info-rating-item:first-child {
border-left: 0;
}
}
/* ---------- 7c. Десктоп/планшет: «Все отзывы» в строке заголовка, цифры столбиком ---- */
@media (min-width: 768px) {
.sr-home .wrapper__main .content__article_review {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 20px;
}
.sr-home .wrapper__main .content__article_review > .title {
flex: 1 1 auto;
order: 1;
margin: 0;
}
.sr-home .wrapper__main .content__article_review > .content__article-link {
order: 2;
margin: 0;
}
.sr-home .wrapper__main .content__article_review > :not(.title):not(.content__article-link) {
order: 3;
flex: 0 0 100%;
min-width: 0;
}
}
/* ---------- 7d. Тематические иконки перед цифрами у нижнего баннера ----------------- */
.sr-home .wrapper__main .header .average-cost__value,
.sr-home .wrapper__main .header .header__info-rating-title {
display: flex !important;
align-items: center;
gap: 10px;
}
.sr-home .wrapper__main .header .average-cost__value::before,
.sr-home .wrapper__main .header .header__info-rating-title::before {
content: "";
flex: none;
width: 26px;
height: 26px;
background: center / 26px no-repeat;
}
/* 200 000 человек подбирали курсы */
.sr-home .wrapper__main .header .average-cost__value::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e41b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M17.5 14.6c2.3.4 3.7 2.1 4 5'/%3E%3C/svg%3E");
}
/* 60% выбрали обучение online */
.sr-home .wrapper__main .header .header__info-rating-row:first-child .header__info-rating-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e41b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='11' rx='1.5'/%3E%3Cpath d='M2 19h20'/%3E%3C/svg%3E");
}
/* 15 000 начали обучение */
.sr-home .wrapper__main .header .header__info-rating-row:nth-child(2) .header__info-rating-item:first-child .header__info-rating-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e41b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9l10-5 10 5-10 5z'/%3E%3Cpath d='M6 11v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5'/%3E%3Cpath d='M22 9v5'/%3E%3C/svg%3E");
}
/* 2 раза в месяц обновление школ */
.sr-home .wrapper__main .header .header__info-rating-row:nth-child(2) .header__info-rating-item:last-child .header__info-rating-title::before {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e41b2e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 11a8 8 0 0 0-14.3-4.9L4 8'/%3E%3Cpath d='M4 4v4h4'/%3E%3Cpath d='M4 13a8 8 0 0 0 14.3 4.9L20 16'/%3E%3Cpath d='M20 20v-4h-4'/%3E%3C/svg%3E");
}
@media (max-width: 767px) {
.sr-home .wrapper__main .header .average-cost,
.sr-home .wrapper__main .header .header__info-rating-item {
grid-template-columns: 136px minmax(0, 1fr) !important;
align-items: start !important;
}
.sr-home .wrapper__main .header .average-cost__text,
.sr-home .wrapper__main .header .header__info-rating-text {
padding-top: 2px;
}
.sr-home .wrapper__main .header .average-cost__value::before,
.sr-home .wrapper__main .header .header__info-rating-title::before {
width: 22px;
height: 22px;
background-size: 22px;
}
.sr-home .wrapper__main .header .average-cost__value,
.sr-home .wrapper__main .header .header__info-rating-title {
gap: 8px;
}
}
/* ---------- 8. SEO-раздел «Как выбрать курсы…» ----------------------------- */
.seo {
--seo-gap: 20px;
display: flex;
flex-direction: column;
gap: var(--seo-gap);
margin: 36px 0 28px;
color: #2a3142;
font-family: 'Onest-Regular', sans-serif;
}
.seo p {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: #3a4256;
}
.seo h2 {
margin: 0;
font-family: 'Onest-Bold', sans-serif;
font-size: 23px;
line-height: 1.2;
letter-spacing: -.005em;
color: var(--sr-navy);
}
.seo h3 {
margin: 0;
font-family: 'Onest-Bold', sans-serif;
font-size: 17px;
line-height: 1.25;
color: var(--sr-ink);
}
.seo a {
color: inherit;
text-decoration: none;
}
.seo-block {
padding: 32px;
border-radius: var(--sr-radius-lg);
background: var(--sr-card);
box-shadow: var(--sr-shadow);
}
/* двухколоночная схема: заголовок слева, текст справа */
.seo-block--intro,
.seo-block--trust,
.seo-block--check {
display: grid;
grid-template-columns: 270px 1fr;
column-gap: 40px;
align-items: start;
}
.seo-block__head {
position: relative;
padding-top: 14px;
}
.seo-block__head::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 36px;
height: 4px;
border-radius: 4px;
background: var(--sr-red);
}
.seo-block__head--wide {
margin-bottom: 22px;
max-width: 640px;
}
.seo-block__head .seo-sub {
margin-top: 10px;
}
.seo-block__body p + p {
margin-top: 14px;
}
.seo-lead {
font-size: 16.5px !important;
line-height: 1.6 !important;
color: var(--sr-navy) !important;
}
/* Почему доверять — белая карточка, как остальные */
.seo-block--trust {
background: var(--sr-card);
}
.seo-facts {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.seo-facts li {
display: flex;
flex-direction: column;
gap: 2px;
padding: 14px 16px;
border-radius: var(--sr-radius-md);
background: #f6f7f9;
font-size: 12px;
line-height: 1.35;
color: var(--sr-muted);
}
.seo-facts b {
font-family: 'Onest-Bold', sans-serif;
font-size: 24px;
line-height: 1.1;
color: var(--sr-navy);
}
/* критерии — 4 карточки 2×2 */
.seo-crit {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
margin: 0;
padding: 0;
list-style: none;
}
.seo-crit__item {
position: relative;
padding: 20px 20px 20px 72px;
border-radius: var(--sr-radius-md);
background: #f6f7f9;
}
.seo-crit__num {
position: absolute;
left: 20px;
top: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--sr-red-soft);
color: var(--sr-red-dark);
font-family: 'Onest-Bold', sans-serif;
font-size: 16px;
}
.seo-crit__item h3 {
margin-bottom: 6px;
}
.seo-crit__item p {
font-size: 14px;
line-height: 1.55;
}
.seo-note {
display: flex;
align-items: center;
gap: 12px;
margin-top: 18px !important;
padding: 14px 18px;
border-radius: var(--sr-radius-md);
background: #eaf6ef;
color: #1f7a48 !important;
font-family: 'Onest-Medium', sans-serif;
}
.seo-note span {
color: var(--sr-ink);
}
.seo-ico {
flex: 0 0 auto;
width: 20px;
height: 20px;
}
.seo-note .seo-ico {
width: 26px;
height: 26px;
padding: 5px;
border-radius: 50%;
background: #fff;
color: #2e9b5f;
}
/* ТОП школ — нумерованный список: место, школа, описание в одной строке */
.seo-schools {
display: flex;
flex-direction: column;
margin: 0;
padding: 0;
list-style: none;
border-bottom: 1px solid var(--sr-line);
}
.seo-school {
display: grid;
grid-template-columns: 44px minmax(160px, 230px) 1fr;
column-gap: 16px;
align-items: baseline;
padding: 16px 12px;
border-top: 1px solid var(--sr-line);
}
.seo-school__rank {
justify-self: center;
align-self: start;
margin-top: -4px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 30px;
border-radius: 50%;
background: #f2f3f6;
color: var(--sr-ink);
font-family: 'Onest-Bold', sans-serif;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.seo-school h3 a:hover {
color: var(--sr-red);
}
.seo-school p {
font-size: 13.5px;
line-height: 1.55;
}
/* что проверить до оплаты */
.seo-checklist {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.seo-checklist li {
display: flex;
align-items: flex-start;
gap: 14px;
margin: 0;
padding: 14px 18px;
border-radius: var(--sr-radius-md);
background: #f6f7f9;
font-size: 14.5px;
line-height: 1.55;
color: #2a3142;
}
.seo-checklist li::before {
content: none;
}
.seo-checklist .seo-ico {
width: 26px;
height: 26px;
margin-top: 1px;
padding: 5px;
border-radius: 50%;
background: var(--sr-red-soft);
color: var(--sr-red-dark);
}
/* финальный призыв */
.seo-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 22px 28px;
border-radius: var(--sr-radius-lg);
background: var(--sr-red-soft);
}
.seo-cta p {
max-width: 480px;
font-family: 'Onest-SemiBold', sans-serif;
font-size: 16px !important;
line-height: 1.45 !important;
color: var(--sr-navy) !important;
}
.seo-cta__btns {
display: flex;
flex: 0 0 auto;
gap: 10px;
}
.seo-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 13px 22px;
border-radius: 999px;
font-family: 'Onest-Bold', sans-serif;
font-size: 14px;
line-height: 1;
white-space: nowrap;
transition: transform var(--sr-ease), background var(--sr-ease), color var(--sr-ease), box-shadow var(--sr-ease);
}
.seo .seo-btn--primary {
background: var(--sr-red);
color: #fff;
}
.seo .seo-btn--primary:hover {
background: var(--sr-red-dark);
}
.seo .seo-btn--ghost {
border: 1.5px solid #d9dce4;
padding: 12px 20px;
background: #fff;
color: var(--sr-navy);
}
.seo .seo-btn--ghost:hover {
border-color: var(--sr-navy);
}
.seo-btn .seo-ico {
width: 16px;
height: 16px;
}
/* ---------- 9. Левый сайдбар — лёгкое обновление --------------------------- */
.sidebar-left__nav-item-link {
border-radius: 10px;
transition: background var(--sr-ease), color var(--sr-ease);
}
.sidebar-left__nav-item-link:hover {
background: rgba(255, 255, 255, .08);
}
.personal-area__link {
transition: opacity var(--sr-ease);
}
.personal-area__link:hover {
opacity: .8;
}
/* ---------- 10. Правый сайдбар (иконки) — лёгкое обновление ---------------- */
.sidebar__item {
border-radius: 14px;
transition: transform var(--sr-ease), box-shadow var(--sr-ease);
}
.sidebar__item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 18px rgba(21, 29, 45, .14);
}
/* Иконки «Сравнение школ» и «Чеклист»: одинаковые кружки 40px, значок по центру (в оригинале разные размеры, чеклист обрезан) */
@media (min-width: 1025px) {
.sr-home .sidebar--outside .sidebar__item[data-compare-link] svg.icon,
.sr-home .sidebar--outside .sidebar__item-icon-wrapper {
box-sizing: border-box;
width: 40px;
height: 40px;
margin: 0 0 8px;
border-radius: 50%;
background: #f4f5f8;
}
.sr-home .sidebar--outside .sidebar__item[data-compare-link] svg.icon {
padding: 11px;
}
.sr-home .sidebar--outside .sidebar__item-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.sr-home .sidebar--outside .sidebar__item-icon-wrapper .icon {
width: 18px;
height: 18px;
margin: 0;
padding: 0;
background: none;
}
}
/* ---------- 11. Футер — точечно ------------------------------------------- */
.footer .menu__item {
transition: color var(--sr-ease);
}
.footer .menu__item:hover {
color: #ff5a68;
}
.footer__col--copyright .copyright {
color: rgba(255, 255, 255, .62);
line-height: 1.55;
}
.footer .social__link {
opacity: .85;
transition: opacity var(--sr-ease), transform var(--sr-ease);
}
.footer .social__link:hover {
opacity: 1;
transform: translateY(-2px);
}
/* ---------- 13. Доступность: видимый фокус ---------------------------------- */
.sr-home .wrapper__main a:focus-visible,
.sr-home .wrapper__main button:focus-visible,
.sr-home .wrapper__main .category-list__nav-link:focus-visible {
outline: 3px solid rgba(228, 27, 46, .45);
outline-offset: 2px;
}
/* ---------- 11a. Типографика: компактная шкала (десктоп) -------------------- */
/* Оригинальные размеры были крупными (заголовки 32px, меню 20px, кнопки 60+px) —
приводим к шкале 12 / 13 / 14 / 16 / 20 / 24 без изменения сетки и ширин колонок. */
@media (min-width: 1025px) {
/* левый сайдбар */
.logo__text:not(.logo__text--small) {
font-size: 30px;
}
.sidebar-left__nav-item-link-text {
font-size: 16px;
}
.personal-area__link-name {
font-size: 14px;
}
.price-stat__value {
font-size: 20px;
}
.sidebar-left__help .help__link {
height: auto;
min-height: 42px;
padding-top: 11px;
padding-bottom: 11px;
border-width: 1.5px;
font-size: 13px;
}
/* правый сайдбар */
.sidebar__item-link {
font-size: 13px;
line-height: 1.25;
}
/* заголовки экрана и разделов */
.sr-home .wrapper__main .mainscreen1-title {
font-size: 26px;
line-height: 1.2;
}
.sr-home .wrapper__main .mainscreen1-subtitle {
margin-top: 4px;
font-size: 14px;
}
.sr-home .wrapper__main .main-hed {
margin-top: 22px;
font-size: 17px;
}
.sr-home .wrapper__main .title--h1:not(.slider-header__slide-title) {
font-size: 22px;
line-height: 1.2;
}
.sr-home .wrapper__main .content__article-link {
font-size: 12px;
}
/* рейтинг */
.sr-home .wrapper__main .category-list__nav-link {
height: 38px;
font-size: 14px;
}
.sr-home .wrapper__main .category-list__item {
padding: 5px 12px;
font-size: 13px;
}
.sr-home .wrapper__main .category-list__rating-title {
font-size: 13px;
}
.sr-home .wrapper__main .raiting-row .price {
font-size: 14px;
}
.sr-home .wrapper__main .raiting-row .points {
font-size: 14px;
}
.sr-home .wrapper__main .raiting-row__znachok {
font-size: 12px;
}
/* правая колонка */
.sr-home .wrapper__main .school-sliders .header__info-rating-title {
font-size: 20px;
line-height: 1.2;
}
.sr-home .wrapper__main .school-sliders .average-cost__value {
font-size: 18px;
}
.sr-home .wrapper__main .school-slider__slide-info {
font-size: 13px;
line-height: 1.5;
}
.sr-home .wrapper__main .school-slider__slide-name,
.sr-home .wrapper__main .school-slider__slide-cost-value {
font-size: 13px;
}
.sr-home .wrapper__main .school-slider__slide-btn {
height: 42px;
font-size: 13px;
}
/* эксперты */
.sr-home .wrapper__main .slider-experts__slide-expert-name {
font-size: 17px;
line-height: 1.3;
}
.sr-home .wrapper__main .slider-experts__slide-expert-info-text_bold {
font-size: 16px;
line-height: 1.3;
}
.sr-home .wrapper__main .slider-experts__slide-info-cost-value {
font-size: 22px;
}
.sr-home .wrapper__main .slider-experts__slide-expert-img-wrapper {
width: 106px;
height: 106px;
}
/* быстрый выбор и отзывы */
.sr-home .wrapper__main .courses-selection__heading {
font-size: 15px;
}
.sr-home .wrapper__main .courses-list__category {
font-size: 14px;
}
.sr-home .wrapper__main .school-reviews__filter-button {
font-size: 13px;
}
/* SEO-раздел */
.seo-block {
padding: 26px 28px;
}
.seo h2 {
font-size: 21px;
}
.seo h3 {
font-size: 15.5px;
}
.seo p {
font-size: 14px;
}
.seo-lead {
font-size: 15.5px !important;
}
.seo-crit__item p,
.seo-school p {
font-size: 13px;
}
.seo-checklist li {
font-size: 14px;
}
.seo-cta p {
font-size: 15px !important;
}
.seo-btn {
padding: 11px 18px;
font-size: 13px;
}
.seo-facts b {
font-size: 22px;
}
}
/* ---------- 12. Адаптив ---------------------------------------------------- */
@media (max-width: 1240px) {
.seo-block--intro,
.seo-block--trust,
.seo-block--check {
grid-template-columns: 220px 1fr;
column-gap: 28px;
}
}
@media (max-width: 880px) {
.seo-block {
padding: 24px 20px;
}
.seo-block--intro,
.seo-block--trust,
.seo-block--check {
grid-template-columns: 1fr;
row-gap: 16px;
}
.seo h2 {
font-size: 22px;
}
.seo-crit {
grid-template-columns: 1fr;
}
.seo-school {
grid-template-columns: 36px 1fr;
row-gap: 4px;
padding: 14px 4px;
}
.seo-school p {
grid-column: 2;
}
.seo-cta {
flex-direction: column;
align-items: flex-start;
padding: 22px 20px;
}
.sr-home .wrapper__main .school-sliders {
flex-direction: column;
}
.ad-slot--sticky {
position: static;
}
/* пустые слоты на мобильном не показываем (баннер появится на месте, когда будет заполнен) */
.ad-slot--empty {
display: none;
}
}
@media (max-width: 550px) {
.seo-facts {
grid-template-columns: 1fr;
}
.seo-cta__btns {
flex-direction: column;
width: 100%;
}
.seo-btn {
justify-content: center;
}
.sr-home .wrapper__main .category-list__nav-link {
height: 46px;
}
}
@media (prefers-reduced-motion: reduce) {
* {
transition: none !important;
}
}
/* ==========================================================================
15. Мобильная версия (до 767px)
Что было: тёмная панель с шестью кнопками, плитки и фильтры по центру, слайдер экспертов
сжимался в «столбик», баннеры уходили в длинную ленту.
Что стало: светлые переключатели, баннеры — горизонтальная карусель со свайпом,
эксперты и фильтры — в одну колонку, крупные зоны нажатия (от 40px).
========================================================================== */
@media (max-width: 767px) {
/* --- рейтинг: переключатели ------------------------------------------------ */
.sr-home .wrapper__main .category-list__heading {
margin: 0 0 12px;
padding: 0;
background: none;
border-radius: 0;
}
.sr-home .wrapper__main .category-list__heading .rating-switch {
display: flex;
gap: 2px;
margin: 0 0 8px;
padding: 4px;
border-radius: var(--sr-radius-md);
background: #eceef3;
}
.sr-home .wrapper__main .rating-switch__btn {
flex: 1 1 0;
margin: 0;
padding: 11px 4px;
border-radius: 9px;
background: none;
color: var(--sr-muted);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 14px;
line-height: 1.2;
text-align: center;
}
.sr-home .wrapper__main .rating-switch__btn.active {
background: #fff;
color: var(--sr-red-dark);
box-shadow: 0 1px 3px rgba(21, 29, 45, .12);
}
.sr-home .wrapper__main .category-list__heading .rating-switch[data-mobile-tabs-row] {
gap: 20px;
padding: 2px 4px;
background: none;
}
.sr-home .wrapper__main .rating-switch[data-mobile-tabs-row] .rating-switch__btn {
flex: none;
padding: 8px 0;
border-radius: 0;
box-shadow: none;
background: none;
}
.sr-home .wrapper__main .rating-switch[data-mobile-tabs-row] .rating-switch__btn.active {
color: var(--sr-navy);
box-shadow: inset 0 -2px 0 var(--sr-red);
}
/* --- рейтинг: таблица ---------------------------------------------------- */
.sr-home .wrapper__main .courses-container--mobile .courses-content {
padding: 0 12px 8px;
border-radius: var(--sr-radius-lg);
background: #fff;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row {
padding: 10px 0 12px;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-header {
padding-right: 0;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-header .col3 {
text-align: right;
}
.sr-home .wrapper__main .slider-experts__slide-expert-info-text_bold {
font-size: 16px;
}
/* рейтинг целиком, без внутренней прокрутки */
.sr-home .wrapper__main .courses-container--mobile .raiting-content {
max-height: none;
overflow: visible;
}
/* «ТОП 40 / 50+ / 30 дней» — столбиком: число слева, подпись справа */
.sr-home .wrapper__main .main-tab--mobile .main-tab__text {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 24px 0 8px;
}
.sr-home .wrapper__main .main-tab__text-paragraph:not(.main-tab__text-paragraph--regular) {
display: grid;
grid-template-columns: 112px 1fr;
align-items: baseline;
column-gap: 12px;
width: auto;
max-width: none;
margin: 0;
padding: 12px 0;
border-bottom: 1px solid var(--sr-line);
color: var(--sr-muted);
font-size: 14px;
line-height: 1.35;
}
.sr-home .wrapper__main .main-tab__text-paragraph span {
margin: 0;
font-size: 20px;
line-height: 1.1;
}
.sr-home .wrapper__main .main-tab__text-paragraph--regular {
width: auto;
max-width: none;
margin: 20px 0 0;
font-size: 15px;
line-height: 1.55;
}
/* «Добавить школу» / «Оставить отзыв»: две равные кнопки в ряд, как «Оставить отзыв» в блоке отзывов */
.sr-home .wrapper__main .main-tab__text .btn-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
width: 100%;
margin: 16px 0 0;
}
.sr-home .wrapper__main .main-tab__text .btn-wrapper > a {
display: block;
margin: 0;
text-decoration: none;
}
.sr-home .wrapper__main .main-tab__text .btn-wrapper .btn {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-width: 0;
height: 44px;
margin: 0;
padding: 0 12px;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-md);
background: #fff;
color: var(--sr-navy);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 14px;
line-height: 1.2;
white-space: nowrap;
box-shadow: none;
}
.sr-home .wrapper__main .main-tab__text .btn-wrapper .btn::before,
.sr-home .wrapper__main .main-tab__text .btn-wrapper .btn::after {
display: none;
}
.sr-home .wrapper__main .main-tab__text .btn-wrapper .btn:hover {
border-color: var(--sr-navy);
background: #fff;
color: var(--sr-navy);
}
/* --- блок цифр и баннеры: свайп-карусель ---------------------------------- */
.sr-home .wrapper__main .school-sliders {
width: auto;
max-width: none;
flex-direction: row;
gap: 12px;
margin: 0 -20px;
padding: 4px 20px 12px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-padding-left: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.sr-home .wrapper__main .school-sliders::-webkit-scrollbar {
display: none;
}
.sr-home .wrapper__main .school-sliders > .school-sliders__slider {
flex: 0 0 80%;
max-width: 320px;
scroll-snap-align: start;
}
.sr-home .wrapper__main .school-sliders > .header__info {
display: none;
}
/* карточки карусели одной высоты, кнопка прижата к низу */
.sr-home .wrapper__main .school-sliders > .school-sliders__slider {
display: flex;
flex-direction: column;
overflow: hidden;
}
.sr-home .wrapper__main .school-sliders__slider .school-slider__slide {
display: flex !important; /* в разметке inline display: inline-block */
flex: 1 1 auto;
flex-direction: column;
}
.sr-home .wrapper__main .school-sliders__slider .school-slider__slide-main {
flex: 1 1 auto;
}
.sr-home .wrapper__main .school-sliders__slider .school-slider__slide-btn {
margin-top: auto;
}
/* --- эксперты ---------------------------------------------------------- */
.sr-home .wrapper__main .content__article_bg:has(.content__experts),
.sr-home .wrapper__main .content__article_fast {
padding: 20px 16px 16px;
}
.sr-home .wrapper__main .slider-experts__slide-row {
grid-template-columns: 1fr;
gap: 16px;
}
.sr-home .wrapper__main .slider-experts__slide-col {
display: block;
}
.sr-home .wrapper__main .slider-experts__slide-info {
width: 100%;
height: auto;
}
.sr-home .wrapper__main .slider-experts__slide-expert-img-wrapper {
width: 84px;
height: 84px;
}
.sr-home .wrapper__main .content__article-top .content__article-group {
flex-direction: column-reverse;
align-items: flex-start;
gap: 8px;
width: 100%;
margin: 0;
text-align: left;
}
.sr-home .wrapper__main .content__article-top .title.title--h1 {
padding: 0;
text-align: left;
}
/* --- быстрый выбор ---------------------------------------------------- */
.sr-home .wrapper__main .content__article_fast .courses-list {
grid-template-columns: 1fr;
gap: 8px;
margin-bottom: 20px;
}
/* в оригинале на мобильном скрыты плитки с 4-й по 6-ю — показываем все шесть */
.sr-home.index .wrapper__main .content__article_fast .courses-list li:not(:nth-child(-n + 3)) {
display: block;
}
.sr-home .wrapper__main .content__article_fast .courses-list__item {
padding: 12px 12px 12px 16px;
}
.sr-home .wrapper__main .content__article_fast .smart-desc1 {
flex-direction: column;
align-items: flex-start;
gap: 0;
padding: 14px 0;
}
.sr-home .wrapper__main .content__article_fast .smart-desc1 h3 {
flex: none;
margin: 0 0 10px;
text-align: left;
}
.sr-home .wrapper__main .content__article_fast .exams-list a {
padding: 9px 14px;
}
/* --- заголовки разделов --------------------------------------------------- */
.sr-home .wrapper__main .content__article_bg .title.title--h1 {
font-size: 17px;
line-height: 1.25;
}
/* --- отзывы: в оригинале на мобильном скрыты (.content__big-screen), оставался пустой заголовок --- */
.sr-home .wrapper__main .content__article_review .reviews-tabs.content__big-screen {
display: block;
}
.sr-home .wrapper__main .content__article_review .school-reviews {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 12px;
margin: 16px 0 0;
padding: 0;
}
.sr-home .wrapper__main .content__article_review .school-reviews__filter {
display: flex;
flex-wrap: nowrap;
gap: 6px;
width: auto;
margin: 0 -16px;
padding: 0 16px 4px;
overflow-x: auto;
scrollbar-width: none;
}
.sr-home .wrapper__main .content__article_review .school-reviews__filter::-webkit-scrollbar {
display: none;
}
.sr-home .wrapper__main .content__article_review .school-reviews__filter-item {
flex: none;
width: auto;
margin: 0;
}
.sr-home .wrapper__main .content__article_review .school-reviews__filter-item,
.sr-home .wrapper__main .content__article_review .school-reviews__filter-button {
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
white-space: nowrap;
font-size: 13px;
}
.sr-home .wrapper__main .content__article_review .school-reviews__filter-item {
padding: 8px 12px;
border-radius: 999px;
background: #f1f2f5;
}
.sr-home .wrapper__main .content__article_review .school-reviews__filter-item svg {
margin: 0;
}
.sr-home .wrapper__main .content__article_review .reviews-block .btn--add {
order: 2;
width: 100%;
height: 44px;
padding: 0 16px;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-md);
background: #fff;
color: var(--sr-navy);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 14px;
}
.sr-home .wrapper__main .content__article_review .reviews-block .btn--add::before,
.sr-home .wrapper__main .content__article_review .reviews-block .btn--add::after {
display: none;
}
.sr-home .wrapper__main .content__article_review .school-reviews-list {
margin: 16px 0 0;
padding: 0 !important;
}
.sr-home .wrapper__main .content__article_review .school-reviews-list + .school-reviews-list {
margin-top: 10px;
}
.sr-home .wrapper__main .content__article_review .one-review {
margin: 0 0 10px;
}
.sr-home .wrapper__main .content__article_review .one-review::before {
display: none;
}
.sr-home .wrapper__main .content__article_review .user-review {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
margin: 0;
padding: 14px;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-md);
background: #fff;
box-shadow: none;
}
.sr-home .wrapper__main .content__article_review .school-reviews-list__logo-wrapper {
width: auto;
padding: 0;
}
.sr-home .wrapper__main .content__article_review .school-reviews-list__logo-wrapper img {
width: 56px;
height: 56px;
object-fit: contain;
}
.sr-home .wrapper__main .content__article_review .school-reviews-list__logo-wrapper .name {
display: none;
}
.sr-home .wrapper__main .content__article_review .review-content {
width: auto;
padding: 0;
}
.sr-home .wrapper__main .content__article_review .review-flex {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 4px 8px;
margin: 0 0 6px;
}
.sr-home .wrapper__main .content__article_review .review-name-date {
position: static;
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
background: none;
box-shadow: none;
color: var(--sr-navy);
font-family: 'Onest-Bold', sans-serif;
font-size: 15px;
line-height: 1.25;
text-transform: none;
letter-spacing: 0;
}
.sr-home .wrapper__main .content__article_review .review-date {
color: var(--sr-muted);
font-family: 'Onest-Regular', sans-serif;
font-size: 13px;
}
.sr-home .wrapper__main .content__article_review .review-raiting {
position: static;
padding: 0;
background: none;
box-shadow: none;
}
.sr-home .wrapper__main .content__article_review .review-text,
.sr-home .wrapper__main .content__article_review .review-text p {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
/* --- статьи: разделители между карточками -------------------------------- */
.sr-home .wrapper__main .featured-links__list {
padding: 0;
}
.sr-home .wrapper__main .featured-links__item {
margin: 0;
padding: 20px 0;
border-bottom: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .featured-links__item:first-child {
padding-top: 4px;
}
.sr-home .wrapper__main .featured-links__item:last-child {
padding-bottom: 0;
border-bottom: 0;
}
/* --- нижняя панель навигации не перекрывает контент ---------------------- */
.sr-home .wrapper {
padding-bottom: 72px;
}
}
/* ---------- 13a. Горизонтальная прокрутка в оригинале (исправлено) ------------------ */
/* мобильная шапка: сдвиг -30px при полях 20px вылезал вправо на 10px */
@media (max-width: 1024px) {
.sr-home .header.header--mobile {
width: auto;
margin: -20px -20px 20px;
}
}
/* планшет: нижний баннер со сдвигом -30px вылезал за экран */
@media (max-width: 1024px) {
.sr-home .wrapper__main .header {
margin-right: 0;
margin-left: 0;
max-width: 100%;
}
}
/* 1025–1439px: основная колонка не сжималась, правое меню уезжало за край экрана */
@media (min-width: 1025px) and (max-width: 1439px) {
.sr-home .wrapper__main {
flex: 1 1 0;
width: auto;
min-width: 0;
}
}
/* ==========================================================================
16. Мобильная версия: шапка, нижнее меню, карточки признаков
========================================================================== */
@media (max-width: 1024px) {
/* обрезка по ширине без overflow: hidden — иначе не работает «липкая» шапка */
.sr-home .wrapper {
overflow: visible;
overflow-x: clip;
}
/* шапка: строка с логотипом и меню закрепляется сверху при прокрутке,
заголовок и выбор города прокручиваются вместе со страницей */
.sr-home .header.header--mobile {
display: contents;
}
.sr-home .header--mobile > .header__container--top {
position: sticky;
top: 0;
z-index: 60;
box-sizing: content-box;
width: auto;
margin: -20px -20px 0;
padding: 14px 20px;
background: #212224;
box-shadow: 0 1px 0 #212224;
}
.sr-home .header--mobile > .mainscreen1-title-mob,
.sr-home .header--mobile > .mainscreen1-subtitle-mob,
.sr-home .header--mobile > .location--mobile {
display: block;
box-sizing: border-box;
width: auto;
max-width: none;
margin: 0 -20px;
padding: 0 20px;
border-radius: 0;
background: #212224;
/* перекрытие на 1px, чтобы между тёмными блоками не было светлых швов при масштабировании */
box-shadow: 0 1px 0 #212224, 0 -1px 0 #212224;
}
.sr-home .header--mobile > .mainscreen1-title-mob {
padding-top: 6px;
padding-bottom: 6px;
}
.sr-home .header--mobile > .location--mobile {
margin-bottom: 20px;
padding-top: 16px;
padding-bottom: 20px;
}
.sr-home .header--mobile > .location--mobile .location__select {
width: 100%;
}
/* стрелка выпадающего списка — по центру поля, с учётом новых полей блока */
.sr-home .header--mobile > .location--mobile .location__arrow {
top: auto;
bottom: 35px;
right: 40px;
}
/* нижнее меню: пять равных колонок, одинаковые иконки без подложек */
.sr-home .wrapper__aside .sidebar--outside {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
align-items: start;
gap: 0;
padding: 12px 4px calc(8px + env(safe-area-inset-bottom, 0px));
background: #fff;
box-shadow: 0 -1px 0 var(--sr-line), 0 -6px 16px rgba(21, 29, 45, .06);
}
.sr-home .wrapper__aside .sidebar--outside .sidebar__item,
.sr-home .wrapper__aside .sidebar--outside .sidebar__item--main {
width: auto;
max-width: none;
height: auto;
margin: 0;
padding: 0;
background: none;
}
.sr-home .wrapper__aside .sidebar__item a {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 2px 2px 0;
}
.sr-home .wrapper__aside .sidebar--outside .sidebar__item svg.icon,
.sr-home .wrapper__aside .sidebar__item-icon-wrapper {
width: 24px;
height: 24px;
margin: 0;
padding: 0;
border-radius: 0;
background: none;
}
.sr-home .wrapper__aside .sidebar__item-icon-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.sr-home .wrapper__aside .sidebar__item-icon-wrapper .icon {
width: 20px;
height: 16px;
margin: 0;
}
.sr-home .wrapper__aside .sidebar--outside .sidebar__item .sidebar__item-name,
.sr-home .wrapper__aside .sidebar__item:nth-child(n) .sidebar__item-name {
width: auto;
max-width: 100%;
margin: 0;
font-family: 'Onest-Medium', sans-serif;
font-size: 10.5px;
line-height: 1.2;
text-align: center;
}
}
@media (max-width: 767px) {
/* карточки признаков: компактные номера */
.seo-crit__item {
padding: 16px 16px 16px 52px;
}
.seo-crit__num {
left: 14px;
top: 16px;
width: 26px;
height: 26px;
border-radius: 8px;
font-size: 13px;
}
.seo-crit__item h3 {
font-size: 15px;
}
}
/* ==========================================================================
17. Мобильный рейтинг — список карточек вместо таблицы (до 767px)
1: место · лого · название · «i» справа
2: филиалы / приложение / своя платформа (если есть)
3–5: баллы, цена за месяц, цена за час — подпись слева, значение справа
Подписи берутся из data-label (проставляются в шаблоне по заголовкам колонок).
========================================================================== */
@media (max-width: 767px) {
.sr-home .wrapper__main .courses-container--mobile .raiting-header {
display: none;
}
.sr-home .wrapper__main .courses-container--mobile .courses-content {
padding: 0 16px;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-content {
margin: 0;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row,
.sr-home .wrapper__main .courses-container--mobile .raiting-row:nth-child(n) {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
height: auto;
margin: 0;
padding: 18px 0;
border: 0;
border-top: 1px solid var(--sr-line);
background: none;
line-height: 1.3;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row:first-child {
border-top: 0;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row > * {
flex: none;
}
/* строка 1 */
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 {
display: flex;
align-items: center;
gap: 8px;
width: auto;
max-width: none;
margin: 0;
padding: 0;
order: 1;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .position {
flex: 0 0 22px;
width: 22px;
margin: 0;
color: var(--sr-muted);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 14px;
text-align: left;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 .ico {
flex: none;
margin: 0;
line-height: 0;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 .ico img {
width: 20px;
max-width: 20px;
height: 20px;
object-fit: contain;
border-radius: 4px;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 a.name {
flex: 1 1 auto;
min-width: 0;
max-width: none;
margin: 0;
color: var(--sr-navy);
font-family: 'Onest-Bold', sans-serif;
font-size: 16px;
line-height: 1.3;
}
/* переход на страницу школы: стрелка справа, кликабельна вся строка с названием */
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 {
position: relative;
padding-right: 40px;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 a.name {
position: static;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1 a.name::after {
content: "";
position: absolute;
inset: -8px 0;
background:
linear-gradient(45deg, transparent 45%, transparent 45%) no-repeat;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col1::after {
content: "";
position: absolute;
top: 50%;
right: 0;
width: 30px;
height: 30px;
margin-top: -15px;
border-radius: 50%;
background:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23151d2d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat,
#f2f3f6;
pointer-events: none;
}
/* строка 2 */
.sr-home .wrapper__main .courses-container--mobile .raiting-row__znachki {
position: static;
display: flex;
flex-wrap: wrap;
gap: 2px 12px;
order: 2;
width: auto;
margin: 0;
padding: 0 0 2px 30px;
color: var(--sr-muted);
font-size: 13px;
line-height: 1.35;
}
/* «i» — в конце строки «Филиалы / Приложение …», неакцентная */
.sr-home .wrapper__main .courses-container--mobile .raiting-row__znachki .raiting-row__popup-link {
display: inline-flex;
align-items: center;
width: auto;
height: auto;
margin: 0;
padding: 2px;
line-height: 0;
transform: none;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row__znachki .raiting-row__popup-link img {
display: block;
width: 14px;
max-width: 14px;
height: 14px;
opacity: .35;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row__znachok {
margin: 0;
padding: 0;
background: none;
font-size: 13px;
line-height: 1.35;
}
/* строки 3–5 */
.sr-home .wrapper__main .courses-container--mobile .raiting-row [data-label] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
width: auto;
max-width: none;
height: auto;
margin: 0;
padding: 0 0 0 30px;
line-height: 20px;
text-align: right;
flex-basis: auto;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row [data-label]::before {
content: attr(data-label);
color: var(--sr-muted);
font-family: 'Onest-Regular', sans-serif;
font-size: 14px;
text-align: left;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col2 { order: 3; }
.sr-home .wrapper__main .courses-container--mobile .raiting-row [data-label="Цена за месяц"] { order: 4; }
.sr-home .wrapper__main .courses-container--mobile .raiting-row [data-label="Цена за час"] { order: 5; }
.sr-home .wrapper__main .courses-container--mobile .raiting-row [data-label="Рейтинг студентов"] { order: 5; align-items: center; }
.sr-home .wrapper__main .courses-container--mobile .raiting-row .points,
.sr-home .wrapper__main .courses-container--mobile .raiting-row .price {
margin: 0;
padding: 0;
background: none;
color: var(--sr-navy);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 15px;
line-height: 20px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
/* ₽ у всех цен одинаково: обычным символом в строке, а не абсолютно спозиционированным значком */
.sr-home .wrapper__main .courses-container--mobile .raiting-row .price .icon-rouble {
position: static;
display: inline;
}
.sr-home .wrapper__main .courses-container--mobile .raiting-row .price .icon-rouble::after {
content: "\00a0₽";
position: static;
padding: 0;
font-family: 'Onest-SemiBold', sans-serif;
font-size: inherit;
line-height: inherit;
text-decoration: none;
}
.sr-home .wrapper__main .courses-container--mobile .all-school-link {
margin: 0;
padding: 16px 0 20px;
border-top: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .courses-container--mobile .all-school-link .header-link1 {
display: flex;
justify-content: center;
width: 100%;
}
/* нижний баннер с цифрами: без тёмной подложки (в оригинале на мобильном цифры были скрыты) */
.sr-home .wrapper__main .header:not(.header--mobile) {
width: auto;
margin: 0 0 24px;
padding: 0;
background: none;
}
/* нижний блок цифр: в один столбик, число и пояснение в одну строку, без разделителя */
.sr-home .wrapper__main .header > .header__info {
display: flex;
flex-direction: column;
gap: 0;
width: 100%;
margin: 20px 0 0;
}
.sr-home .wrapper__main .header .average-cost,
.sr-home .wrapper__main .header .header__info-rating,
.sr-home .wrapper__main .header .header__info-rating-row,
.sr-home .wrapper__main .header .header__info-rating-row:nth-child(2) {
display: flex;
flex-direction: column;
gap: 0;
margin: 0;
padding: 0;
border: 0;
}
.sr-home .wrapper__main .header .average-cost,
.sr-home .wrapper__main .header .header__info-rating-item {
display: grid;
grid-template-columns: 112px minmax(0, 1fr);
align-items: baseline;
column-gap: 12px;
margin: 0;
padding: 12px 0;
border-bottom: 1px solid var(--sr-line);
}
.sr-home .wrapper__main .header .header__info-rating-row:last-child .header__info-rating-item:last-child {
border-bottom: 0;
}
.sr-home .wrapper__main .header .average-cost__value .icon {
display: none;
}
.sr-home .wrapper__main .header .average-cost__value,
.sr-home .wrapper__main .header .header__info-rating-title {
margin: 0;
display: block;
font-family: 'Onest-Black', sans-serif;
font-size: 20px;
line-height: 20px;
white-space: nowrap;
}
.sr-home .wrapper__main .header .average-cost__text,
.sr-home .wrapper__main .header .header__info-rating-text {
max-width: none;
margin: 0;
color: var(--sr-muted);
font-size: 14px;
line-height: 20px;
}
.sr-home .wrapper__main .header .average-cost__value,
.sr-home .wrapper__main .header .header__info-rating-title {
color: var(--sr-navy);
}
/* «Общий / Цена / Отзывы» — выпадающим списком */
.sr-home .wrapper__main .category-list__heading .rating-switch[data-mobile-tabs-row] {
display: none !important;
}
.sr-home .wrapper__main .sr-rating-select {
display: block;
margin: 0 0 12px;
}
.sr-home .wrapper__main .sr-rating-select.is-hidden {
display: none;
}
/* «Добавить школу / Оставить отзыв»: больше воздуха до баннеров */
.sr-home .wrapper__main .main-tab--mobile .main-tab__text {
padding-bottom: 28px;
}
/* «Эксперты рекомендуют»: компактнее вокруг вводного текста */
.sr-home .wrapper__main .content__article-top {
padding-bottom: 16px;
}
.sr-home .wrapper__main .content__article-top .content__article-group {
margin: 0;
padding: 0;
min-height: 0;
}
.sr-home .wrapper__main .content__article-top .content__article-text {
margin: 10px 0 0;
padding: 0;
}
.sr-home .wrapper__main .content__experts .slider-experts {
padding-top: 16px;
}
/* «Интересное о мире английского»: ссылка «Все статьи» внизу, меньше отступ до первой статьи */
.sr-home .wrapper__main .content__article_acticles {
display: flex;
flex-direction: column;
}
.sr-home .wrapper__main .content__article_acticles .content__article-top,
.sr-home .wrapper__main .content__article_acticles .content__article-top .content__article-group {
display: contents;
}
.sr-home .wrapper__main .content__article_acticles .title {
order: 0;
margin: 0 0 16px;
}
.sr-home .wrapper__main .content__article_acticles .content__section-container {
order: 1;
}
.sr-home .wrapper__main .content__article_acticles .content__article-link {
order: 2;
align-self: center;
margin: 16px 0 0;
}
/* «Отзывы о школах»: заголовок сверху, ссылка «Все отзывы» — внизу карточки */
.sr-home .wrapper__main .content__article_review {
display: flex;
flex-direction: column;
}
.sr-home .wrapper__main .content__article_review > .content__article-link {
order: 99;
align-self: center;
margin: 16px 0 0;
}
.sr-home .wrapper__main .content__article_review > .title {
margin: 0;
}
.sr-home .wrapper__main .reviews-tabs.sr-show-all .school-reviews-list {
display: block !important;
}
/* отзывы: выпадающий список вместо пилюль */
.sr-home .wrapper__main .content__article_review .school-reviews__filter {
display: none;
}
.sr-home .wrapper__main .sr-review-select {
display: block;
}
}
.sr-review-select,
.sr-rating-select {
display: none;
position: relative;
}
.sr-review-select select,
.sr-rating-select select {
width: 100%;
height: 44px;
padding: 0 40px 0 14px;
border: 1px solid var(--sr-line);
border-radius: var(--sr-radius-md);
background: #fff;
color: var(--sr-navy);
font-family: 'Onest-SemiBold', sans-serif;
font-size: 15px;
-webkit-appearance: none;
appearance: none;
}
.sr-review-select::after,
.sr-rating-select::after {
content: "";
position: absolute;
top: 50%;
right: 16px;
width: 7px;
height: 7px;
margin-top: -6px;
border-right: 2px solid var(--sr-navy);
border-bottom: 2px solid var(--sr-navy);
transform: rotate(45deg);
pointer-events: none;
}
/* ==========================================================================
Наши правки к файлу дизайнера (при внедрении, 26.10)
========================================================================== */
/* Подписи выпадающих списков: видны читалке экрана, на экране их нет. */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/*
Вторая цена мобильной строки (col-extra) нужна только карточке до 767px.
С 768 до 880 мобильная таблица ещё видна, но остаётся таблицей в три
колонки со своей шапкой - лишняя ячейка встала бы без подписи.
*/
@media (min-width: 768px) {
.sr-home .wrapper__main .courses-container--mobile .raiting-row .col-extra {
display: none;
}
}
/* Пустое значение в карточке не печатаем подписью без числа. */
@media (max-width: 767px) {
.sr-home .wrapper__main .courses-container--mobile .raiting-row [data-label]:empty {
display: none;
}
}
/*
SEO-раздел собирается из текста Directus (src/lib/seo-bloki.ts), и таблица
критериев остаётся таблицей: это содержательный блок SEO, его не меняем
на список. Плитками 2 x 2 с номером её делают правила ниже - те же размеры
и цвета, что у .seo-crit__item макета. Шапка таблицы скрыта визуально,
как в макете, но остаётся в разметке.
*/
.seo table.seo-crit {
display: block;
width: 100%;
margin: 0;
border: 0;
border-collapse: separate;
background: none;
}
.seo table.seo-crit thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.seo table.seo-crit tbody {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
counter-reset: seo-crit;
}
.seo table.seo-crit tr {
position: relative;
display: block;
padding: 20px 20px 20px 72px;
border: 0;
border-radius: var(--sr-radius-md);
background: #f6f7f9;
counter-increment: seo-crit;
}
.seo table.seo-crit tr::before {
content: counter(seo-crit);
position: absolute;
left: 20px;
top: 20px;
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 12px;
background: var(--sr-red-soft);
color: var(--sr-red-dark);
font-family: 'Onest-Bold', sans-serif;
font-size: 16px;
}
.seo table.seo-crit td {
display: block;
width: auto;
height: auto;
padding: 0;
border: 0;
background: none;
text-align: left;
vertical-align: top;
}
.seo table.seo-crit td:first-child,
.seo table.seo-crit td:first-child p {
margin: 0 0 6px;
font-family: 'Onest-Bold', sans-serif;
font-size: 17px;
line-height: 1.25;
color: var(--sr-ink);
}
.seo table.seo-crit td + td,
.seo table.seo-crit td + td p {
font-size: 14px;
line-height: 1.55;
}
/* Описание школы из нескольких абзацев - одной ячейкой сетки строки. */
.seo-school__opis p + p {
margin-top: 8px;
}
.seo-school__opis p {
font-size: 13.5px;
line-height: 1.55;
}
/* Текст без заголовков h2 - одной карточкой, без раскладки макета. */
.seo-block--prostoj > * + * {
margin-top: 14px;
}
/* Размеры по шкале макета: компактная на десктопе, плотные плитки на телефоне. */
@media (min-width: 1025px) {
.seo table.seo-crit td:first-child,
.seo table.seo-crit td:first-child p {
font-size: 15.5px;
}
.seo table.seo-crit td + td,
.seo table.seo-crit td + td p,
.seo-school__opis p {
font-size: 13px;
}
}
@media (max-width: 880px) {
.seo table.seo-crit tbody {
grid-template-columns: 1fr;
}
.seo-school__opis {
grid-column: 2;
}
}
@media (max-width: 767px) {
.seo table.seo-crit tr {
padding: 16px 16px 16px 52px;
}
.seo table.seo-crit tr::before {
left: 14px;
top: 16px;
width: 26px;
height: 26px;
border-radius: 8px;
font-size: 13px;
}
.seo table.seo-crit td:first-child,
.seo table.seo-crit td:first-child p {
font-size: 15px;
}
}
/*
Метка «Реклама» слайдера из new-changes.css (.school-slider::after) стоит
абсолютно, а сам слайдер у нас без position: на боевой его позиционировал
slick, у нас слайд один и slick не включается. Поэтому метка уходит в низ
колонки .wrapper__main, под футер. На www её не видно - там футер тёмный
до самого низа, а в редизайне футер - карточка с отступом, и метка видна
на светлом фоне (в макете тоже). Баннер и так подписан своей меткой AdMark
с реквизитами, этот дубль на главной снимаем.
*/
.sr-home .school-slider::after {
content: none;
}