/* Start:/local/templates/vine/components/bitrix/news/vine_teachers/style.css?17871539726424*/
/* Страницы «Преподаватели» (2090:18002) и «Преподаватель» (2093:20344):
обвязка, которую рисует сам комплексный шаблон, — панель фильтров,
алфавит, заголовки секций, сетка мероприятий с плиткой заявки и
заключительный текстовый блок. Карточки, детальная, материалы и форма
лежат в style.css своих шаблонов. */
/* ------------------------------------------------ панель фильтров 2091:19669 */
.vine-teachers-intro {
display: flex;
flex-direction: column;
gap: 24px;
box-sizing: border-box;
width: 100%;
max-width: var(--vine-container);
padding: var(--vine-gap);
border-radius: var(--vine-gap);
background: var(--vine-color-card);
}
.vine-teachers-intro__title {
margin: 0;
font-family: var(--vine-font);
font-size: var(--vine-fz-h1);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text);
}
.vine-teachers-intro__lead {
margin: 0;
font-size: var(--vine-fz-text);
line-height: normal;
}
.vine-teachers-intro__filters {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 32px;
margin: 0;
}
/* поле поиска 2090:19335 — 344×32, белое, рамка 1px, лупа справа */
.vine-teachers-search {
display: flex;
align-items: center;
gap: var(--vine-gap);
}
.vine-teachers-search__field {
display: flex;
align-items: center;
box-sizing: border-box;
width: 344px;
max-width: 100%;
height: 32px;
padding: 0 4px 0 8px;
border: 1px solid var(--vine-color-text);
background: var(--vine-color-bg) url("/local/templates/vine/images/icon-search.svg") no-repeat right 4px center;
background-size: 20px 20px;
}
.vine-teachers-search__input {
flex: 1 0 0;
min-width: 0;
padding: 0 28px 0 0;
border: 0;
background: transparent;
font-family: var(--vine-font);
font-size: var(--vine-fz-text);
line-height: normal;
color: var(--vine-color-text);
}
.vine-teachers-search__input::placeholder {
color: var(--vine-color-card);
opacity: 1;
}
.vine-teachers-search__input:focus {
outline: none;
}
/* кнопка «Найти» 2090:19336 */
.vine-teachers-search__submit {
padding: 9px 12px 10px;
border: 1px solid var(--vine-color-text);
border-radius: var(--vine-radius-btn);
background: var(--vine-color-btn);
font-family: var(--vine-font);
font-size: var(--vine-fz-text);
line-height: normal;
color: var(--vine-color-btn-text);
cursor: pointer;
}
/* алфавит 2091:19606 — буквы 18px, #0077FF, подчёркивание пунктиром, шаг 16 */
.vine-teachers-alphabet {
display: flex;
flex-wrap: wrap;
gap: var(--vine-gap);
}
.vine-teachers-alphabet__item {
font-size: var(--vine-fz-text);
line-height: normal;
color: var(--vine-color-link);
text-decoration: underline dotted;
text-underline-position: from-font;
}
.vine-teachers-alphabet__item--current {
font-weight: 700;
text-decoration: none;
color: var(--vine-color-text);
}
/* ------------------------------------------------------ заголовки страницы */
/* Селектор с .vine-main намеренно: общее правило шаблона сайта
«.vine-h2, .vine-main h2 { font-size: var(--vine-fz-h2) }» специфичнее
одного класса и сажало заголовок сетки с макетных 48px на 34px. */
.vine-main .vine-teachers-heading {
margin: 0;
font-family: var(--vine-font);
font-size: 48px;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text);
}
.vine-main .vine-teachers-events__title,
.vine-main .vine-teacher-events__title,
.vine-main .vine-teachers-outro__title {
margin: 0;
font-family: var(--vine-font);
font-size: var(--vine-fz-h1);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text);
}
.vine-teachers-events,
.vine-teacher-events,
.vine-teachers-outro {
display: flex;
flex-direction: column;
gap: var(--vine-gap);
width: 100%;
max-width: var(--vine-container);
}
.vine-teachers-outro__text {
margin: 0;
font-size: var(--vine-fz-text);
line-height: normal;
}
/* ------------------------- сетка мероприятий детальной + плитка 2095:21531 */
/* Плитка стоит третьей ячейкой той же сетки, что и карточки мероприятий.
Чтобы не трогать общий шаблон events-card, его обёртки распластываются
по нашей сетке: и .events, и .events__grid становятся display: contents,
а их li — прямыми ячейками. */
.vine-teacher-events__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--vine-gap);
align-items: stretch;
}
.vine-teacher-events__grid > .events--flat,
.vine-teacher-events__grid > .events--flat > .events__grid {
display: contents;
}
.vine-teacher-request-tile {
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 9px 12px 10px;
border: 1px solid var(--vine-color-text);
border-radius: var(--vine-radius-btn);
background: var(--vine-color-bg);
font-family: var(--vine-font);
font-size: var(--vine-fz-h1);
font-weight: 700;
line-height: normal;
text-align: center;
color: var(--vine-color-text);
overflow-wrap: break-word;
cursor: pointer;
}
@media (max-width: 900px) {
.vine-teacher-events__grid {
grid-template-columns: 1fr;
}
.vine-teacher-request-tile {
font-size: var(--vine-fz-h3);
}
}
/* Лента мероприятий: в макете обеих страниц три карточки в ряд, а общий
шаблон events-card раскладывает их по две. Ширину колонок задаём здесь,
через штатный модификатор SECTION_MOD_CLASS, — сам events-card
используется и на главной и остаётся нетронутым. */
.events--cols3 .events__grid {
grid-template-columns: repeat(3, 1fr);
}
/* End */
/* Start:/local/templates/vine/components/bitrix/news.list/vine_city_filter/style.css?17875778007779*/
/* =========================================================================
ЧИП «ГОРОД» И ОКНО ВЫБОРА ГОРОДА (news.list / vine_city_filter)
Макет Figma HA2Vx4dnWPRDdb6SL7tM3y.
ЧИП СТРОКИ — узел 2090:19373, 116x40: фон #C4C4C4, рамка 1px #000,
радиус 16, отступы 16 по горизонтали и 8 по вертикали ОТ РАМКИ (в вёрстке
padding 15/7 плюс рамка 1px — тот же приём, что в чипах календаря),
шаг 10, текст 18px, крестик 24x24 справа.
ОКНО — узел 2090:19564, 344 по ширине, белое, padding 16, БЕЗ рамки и БЕЗ
скругления; внутренняя колонка 2090:19566 — 312px, шаг 24. Высота 261 в
макете набирается содержимым и здесь не задаётся: городов в справочнике
может стать больше двух.
Подложку, окно и шапку строит js/contacts-modal.js, базовые габариты
(1280x986 под окно контактов) лежат в css/contacts-modal.css. Здесь они
переопределены модификатором .contacts-modal__window--teachers-city,
который скрипт ставит по значению data-contacts-modal. Селекторы двойные:
у правил оболочки та же специфичность, и одиночный класс зависел бы от
порядка подключения файлов.
ВНЕ МАКЕТА (нарисовано одно состояние, второе пришлось решать вёрсткой):
- чипы городов в окне 2090:19580 и 2090:19584 оба серые, крестики в них
скрыты, состояния «не выбран» нет. Здесь невыбранный чип белый, а
выбранный — серый #C4C4C4: серый по всему макету означает именно
«отмечено» (так же прочитан макет в окнах фильтра календаря);
- крестик чипа строки показывается только при выбранном городе — снимать
нечего, пока фильтр не применён.
========================================================================= */
/* ------------------------------------------------------------------ ЧИП */
.vine-teachers-city {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 10px;
max-width: 100%;
min-height: 40px;
padding: 7px 15px;
border: 1px solid var(--vine-color-text, #000000);
border-radius: 16px;
background: var(--vine-color-card, #C4C4C4);
}
/* Вся видимая часть чипа — кнопка: открывает окно, форму не отправляет. */
.vine-teachers-city__open {
padding: 0;
border: 0;
background: none;
font-family: inherit;
/* 21px — высота текстового узла макета (18px Roboto). line-height: normal
даёт 22 и раздувает чип на 1px против макета. */
font-size: var(--vine-fz-text, 18px);
font-weight: 400;
line-height: 21px;
color: inherit;
text-align: left;
cursor: pointer;
}
.vine-teachers-city__reset {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
text-decoration: none;
}
.vine-teachers-city__reset:hover,
.vine-teachers-city__reset:focus {
text-decoration: none;
}
.vine-teachers-city__reset-icon {
display: block;
width: 24px;
height: 24px;
}
/* ----------------------------------------------------------------- ОКНО */
.contacts-modal__window.contacts-modal__window--teachers-city {
position: relative;
gap: 0;
width: 344px;
max-width: 100%;
min-height: 0;
padding: var(--vine-gap, 16px);
}
/* Кнопка закрытия 2090:19565 в макете скрыта, но место под неё оставлено в
правом верхнем углу — туда её и ставим. Обычная шапка оболочки — отдельная
строка 32px, она сдвинула бы «Фильтр» вниз, и контент начался бы не на
y=16, как в макете. */
.contacts-modal__window--teachers-city .contacts-modal__head {
position: absolute;
top: var(--vine-gap, 16px);
right: var(--vine-gap, 16px);
width: 32px;
height: 32px;
}
/* колонка 2090:19566 — 312px, шаг 24 */
.contacts-modal__window--teachers-city .contacts-modal__content {
gap: 24px;
padding: 0;
}
/* Заголовки 2090:19567 и 2090:19568 — оба 34px, первый Bold, второй Regular.
Селектор с .vine-main обязателен: общее правило «.vine-h2, .vine-main h2»
специфичнее одного класса и молча сбивает кегль. */
.teachers-city-modal__title,
.vine-main .teachers-city-modal__title {
margin: 0;
font-size: 34px;
font-weight: 700;
line-height: normal;
color: var(--vine-color-text, #000000);
}
.teachers-city-modal__subtitle,
.vine-main .teachers-city-modal__subtitle {
margin: 0;
font-size: 34px;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
}
/* ------------------------------------------------------- ГОРОДА В ОКНЕ */
/* 2090:19579 — поток чипов с переносом, шаг 24 по обеим осям.
Чип города: 37px высотой (8 + 21 + 8), радиус 16, рамка 1px #000. */
.teachers-city-modal__options {
display: flex;
flex-wrap: wrap;
gap: 24px;
width: 100%;
}
.teachers-city-option {
display: inline-flex;
max-width: 100%;
}
/* Радиокнопка не видна, но остаётся доступной с клавиатуры: убирать её через
display: none нельзя — пропадёт фокус и вместе с ним управление окном. */
.teachers-city-option__input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
border: 0;
white-space: nowrap;
}
.teachers-city-option__text {
display: inline-flex;
align-items: center;
max-width: 100%;
/* 7/15 + рамка 1 = макетные 37px высоты и «текст + 32» ширины */
padding: 7px 15px;
border: 1px solid var(--vine-color-text, #000000);
border-radius: 16px;
background: var(--vine-color-bg, #FFFFFF);
font-size: var(--vine-fz-text, 18px);
line-height: 21px;
color: var(--vine-color-text, #000000);
cursor: pointer;
}
.teachers-city-option__input:checked + .teachers-city-option__text {
background: var(--vine-color-card, #C4C4C4);
}
.teachers-city-option__input:focus-visible + .teachers-city-option__text {
outline: 2px solid var(--vine-color-link, #0077FF);
outline-offset: 2px;
}
/* --------------------------------------------------------------- КНОПКИ */
/* 2090:19593 — «Отмена» слева, «Применить» справа, между ними распор.
Сами кнопки — общие .vine-btn и .vine-btn--dark: padding 9/12/10,
рамка 1px, радиус 5, текст 18px, то есть ровно макетные 89x40 и 120x40. */
.teachers-city-modal__actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--vine-gap, 16px);
width: 100%;
}
.teachers-city-modal__cancel,
.teachers-city-modal__apply {
cursor: pointer;
}
/* End */
/* Start:/local/templates/vine/css/contacts-modal.css?17873146455499*/
/* =========================================================================
ОБОЛОЧКА МОДАЛКИ «Контакты — Город» (макет 2023:13109).
Здесь только каркас окна: подложка, само окно 1280x986, кнопка закрытия,
шапка с ней и служебное скрытие неактивных панелей городов.
Содержимое (заголовок, вкладки, панель офиса, карта, карусель
сотрудников) размечает и оформляет шаблон компонента
news.list/contacts-city — его классы в этом файле не описаны.
Разметку подложки и окна строит на лету js/contacts-modal.js вокруг
контейнера [data-contacts-modal], который уже стоит на странице.
Габариты макета (узел 2023:13109):
окно 1280 x 986, белое, padding 16, без рамки и скругления;
кнопка закрытия 2063:17660 — 32x32, рамка 1px #000, радиус 5,
иконка 24x24, отступы сверху и справа по 16;
контент 2023:13111 — 1248 x 912, начинается на y=58,
то есть 16 (padding) + 32 (кнопка) + 10 (зазор).
ВНЕ МАКЕТА: затемнённой подложки в макете нет — сделана
rgba(0, 0, 0, 0.4), это решение вёрстки, а не значение из Figma.
========================================================================= */
/* ------------------------------------------------------------- подложка */
.contacts-modal {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
overflow: auto;
padding: 16px 0;
background: rgba(0, 0, 0, 0.4);
}
.contacts-modal[hidden] {
display: none;
}
/* Пока окно открыто, страница под ним не прокручивается.
Класс вешает скрипт на и . */
.contacts-modal__body-lock {
overflow: hidden;
}
/* ----------------------------------------------------------------- окно */
.contacts-modal__window {
display: flex;
flex-direction: column;
gap: 10px;
width: 1280px;
max-width: 100%;
min-height: 986px;
margin: auto;
padding: 16px;
background: var(--vine-color-bg, #FFFFFF);
font-family: var(--vine-font, "Roboto", "Helvetica Neue", Arial, sans-serif);
font-size: var(--vine-fz-text, 18px);
line-height: normal;
color: var(--vine-color-text, #000000);
}
/* Шапка 32px: в макете в ней только кнопка закрытия, прижатая вправо. */
.contacts-modal__head {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: flex-end;
width: 100%;
height: 32px;
}
.contacts-modal__close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--vine-color-text, #000000);
border-radius: var(--vine-radius-btn, 5px);
background: var(--vine-color-bg, #FFFFFF);
cursor: pointer;
}
.contacts-modal__close img {
display: block;
width: 24px;
height: 24px;
}
/* До того как скрипт обернёт контейнер в окно, он не должен мелькать в
потоке страницы: класс contacts-modal__content ставит на него скрипт. */
[data-contacts-modal]:not(.contacts-modal__content) {
display: none;
}
/* Контейнер [data-contacts-modal] — фрейм 2023:13111 1248x912.
Ширину и внутренние отступы задаёт скрипт этим классом, чтобы шаблон
контента не зависел от того, чем его обернули. */
.contacts-modal__content {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 16px;
width: 100%;
padding: 0 16px;
}
/* --------------------------------------------- переключение городов */
/* Активную вкладку и панель отмечает классом is-active скрипт, а рисует их
style.css шаблона contacts-city. Здесь только скрытие неактивных панелей:
без него все города показались бы разом. Правило намеренно не назначает
display активной панели — её раскладку задаёт шаблон. */
[data-city-panel]:not(.is-active) {
display: none;
}
/* -------------------------------------------------------------- узкий экран */
/* В макете мобильных состояний модалки нет. Ниже 1312px (1280 окна + 2x16
подложки) окно занимает всю доступную ширину, а жёсткая высота снимается,
чтобы содержимое не обрезалось. */
@media (max-width: 1311px) {
.contacts-modal {
padding: 16px;
}
.contacts-modal__window {
width: 100%;
min-height: 0;
}
}
@media (max-width: 640px) {
.contacts-modal {
padding: 8px;
}
.contacts-modal__window {
padding: 8px;
}
.contacts-modal__content {
padding: 0;
}
}
/* End */
/* Start:/local/templates/vine/components/bitrix/news.list/vine_teachers/style.css?17871510618242*/
/* =========================================================================
Сетка карточек преподавателей — bitrix:news.list / vine_teachers
Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 2091:19804.
Размеры из макета:
сетка — контейнер 1248, три колонки по 400px,
x = 0 / 424 / 848 → шаг между колонками 24px
(3 × 400 + 2 × 24 = 1248 ровно);
колонка — вертикальный шаг 16px (413 + 16 = 429, шаг карточек);
блок о команде (2091:19805) — 400×184, рамка 1px #000, padding 8,
текст 18px; стоит ПЕРВЫМ во второй колонке, из-за чего
колонки не выровнены построчно;
карточка (2090:18021) — 400×413, рамка 1px #000, padding 8,
внутренний шаг 10, содержимое по центру;
фото — 270×220 (x = 65 → по центру карточки), object-fit: cover;
имя — 18px Bold, по центру;
должность — 14px Regular, по левому краю, на всю ширину;
анонс — 18px Regular, на всю ширину, три строки с многоточием;
«Подробнее» — 18px, #0077FF, подчёркнутая, по левому краю;
кнопка «Показать ещё» — 143×40, белая, рамка 1px #000, радиус 5,
текст 18px, поля 9/12/10 (общий класс .vine-btn);
строка «Вы посмотрели всех преподавателей» — 18px Regular без курсива,
в макете нарисована под кнопкой с отступом 24px.
Кнопка (.vine-btn) и скрытая подпись (.vine-visually-hidden) живут в
общем слое template_styles.css. Здесь только раскладка секции.
========================================================================= */
.vine-teachers {
display: flex;
flex-direction: column;
/* расстояния между сеткой и кнопкой в предоставленных данных нет —
берём базовый шаг макета 16px */
gap: var(--vine-gap, 16px);
width: 100%;
/* Контентная колонка макета — 1248. Без ограничения на широком экране
сетка растягивалась во всю страницу и колонки выходили по 445 вместо
400 — те же грабли, что были на детальной странице курса. */
max-width: var(--vine-container, 1248px);
}
/* ------------------------------------------------------------------ СЕТКА */
/* Колонки равной ширины: (1248 − 2 × 24) / 3 = 400. align-items: start —
чтобы колонки жили независимо друг от друга (раскладка masonry). */
.vine-teachers__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
column-gap: var(--vine-teachers-col-gap, 24px);
row-gap: var(--vine-gap, 16px);
align-items: start;
width: 100%;
}
.vine-teachers__col {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--vine-gap, 16px);
}
/* --------------------------------------------------- БЛОК О КОМАНДЕ (2091:19805) */
.vine-teachers__intro {
padding: var(--vine-pad-card, 8px);
border: 1px solid var(--vine-color-text, #000000);
background: var(--vine-color-bg, #FFFFFF);
font-size: var(--vine-fz-text, 18px);
font-style: normal;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
/* ---------------------------------------------------------------- КАРТОЧКА */
.vine-teachers__item {
display: flex;
/* в макете все карточки одной высоты — 413px */
min-height: 413px;
flex-direction: column;
align-items: center;
gap: 10px;
padding: var(--vine-pad-card, 8px);
border: 1px solid var(--vine-color-text, #000000);
background: var(--vine-color-bg, #FFFFFF);
}
.vine-teachers__photo {
flex: 0 0 auto;
width: 270px;
max-width: 100%;
height: 220px;
overflow: hidden;
}
.vine-teachers__photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* двойной класс — чтобы перебить общие правила заголовков базового слоя */
.vine-teachers .vine-teachers__name {
margin: 0;
font-size: var(--vine-fz-text, 18px);
font-weight: 700;
line-height: normal;
text-align: center;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
.vine-teachers__position {
width: 100%;
margin: 0;
font-size: var(--vine-fz-small, 14px);
font-style: normal;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
/* анонс в макете обрывается многоточием на третьей строке */
.vine-teachers__text {
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
width: 100%;
margin: 0;
font-size: var(--vine-fz-text, 18px);
font-style: normal;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
.vine-teachers__link {
width: 100%;
font-size: var(--vine-fz-text, 18px);
line-height: normal;
color: var(--vine-color-link, #0077FF);
text-decoration: underline;
text-decoration-skip-ink: none;
text-underline-position: from-font;
word-break: break-word;
}
/* ------------------------------------------------------------------ ПОДВАЛ */
/* Кнопка и строка «Вы посмотрели всех преподавателей» нарисованы в макете
одновременно с отступом 24px, но это два состояния одного места —
лишнее скрыто атрибутом hidden. */
.vine-teachers__foot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 24px;
}
.vine-teachers__foot > [hidden] {
display: none;
}
/* «Показать ещё» — 143×40 из макета: ширина набирается текстом 18px и
полями .vine-btn, поэтому фиксируем минимумы, а не жёсткий размер */
.vine-teachers__more {
min-width: 143px;
min-height: 40px;
}
.vine-teachers__more[aria-busy="true"] {
opacity: 0.6;
pointer-events: none;
}
.vine-teachers__end {
margin: 0;
font-size: var(--vine-fz-text, 18px);
font-style: normal; /* в макете строка без курсива */
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
}
/* ------------------------------------------------------------------ АДАПТИВ */
/* Мобильных раскладок в макете нет: сетка просто складывается в две, затем
в одну колонку, чтобы карточка 400px не ломала строку на узком экране.
display: contents убирает колонки-обёртки из раскладки, и карточки
становятся ячейками сетки напрямую — иначе третья колонка целиком
уехала бы под первые две. */
@media (max-width: 1024px) {
.vine-teachers__grid {
grid-template-columns: repeat(2, 1fr);
column-gap: var(--vine-gap, 16px);
align-items: stretch;
}
.vine-teachers__col {
display: contents;
}
}
@media (max-width: 640px) {
.vine-teachers__grid {
grid-template-columns: 1fr;
}
.vine-teachers__more {
width: 100%;
}
}
/* End */
/* Start:/local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17875979953249*/
/* Карточка мероприятия — макет, узел 1675:17854 */
.events {
--events-text: #000000;
--events-link: #0077FF;
--events-card-bg: #C4C4C4;
--events-badge-bg: #FFFF00;
font-family: "Roboto", system-ui, sans-serif;
color: var(--events-text);
}
.events__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin: 0;
padding: 0;
list-style: none;
}
.events__item {
display: flex;
min-width: 0;
}
.events-card {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 16px;
min-width: 0;
box-sizing: border-box;
padding: 8px;
border-radius: 8px;
background: var(--events-card-bg);
}
.events-card__title {
margin: 0;
font-size: 28px;
font-weight: 700;
line-height: normal;
word-break: break-word;
}
.events-card__title-link {
color: var(--events-text);
text-decoration: none;
}
.events-card__title-link:hover {
text-decoration: underline;
}
/* Картинка сверху во всю ширину карточки */
.events-card__media {
display: flex;
justify-content: center;
width: 100%;
}
.events-card__media .events-card__pic {
width: 389px;
max-width: 100%;
height: 110px;
}
/* Ряд «картинка слева 128x128 + мета» */
.events-card__row {
display: flex;
align-items: flex-start;
gap: 16px;
width: 100%;
}
.events-card__thumb {
flex: 0 0 128px;
width: 128px;
height: 128px;
overflow: hidden;
}
.events-card__thumb .events-card__pic {
width: 128px;
height: 128px;
}
.events-card__pic {
display: block;
object-fit: cover;
}
.events-card__meta {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: 8px;
min-width: 0;
}
.events-card__priceline {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.events-card__price {
font-size: 16px;
font-weight: 700;
line-height: normal;
white-space: nowrap;
}
.events-card__badge {
padding: 4px;
border: 1px solid var(--events-text);
border-radius: 4px;
background: var(--events-badge-bg);
font-size: 14px;
font-style: italic;
line-height: normal;
white-space: nowrap;
}
.events-card__date,
.events-card__address,
.events-card__announce {
font-size: 18px;
line-height: normal;
word-break: break-word;
}
.events-card__announce p {
margin: 0;
}
.events-card__more {
align-self: flex-start;
font-size: 18px;
line-height: normal;
color: var(--events-link);
text-decoration: underline;
}
/* «Показать ещё» (143×40) — прижата к левому краю, отступ от сетки 16px, как
у такой же кнопки партнёрской страницы. Габариты даёт .vine-more. */
.events__pager {
display: flex;
margin-top: 16px;
}
@media (max-width: 767px) {
.events__grid {
grid-template-columns: minmax(0, 1fr);
}
}
@media (max-width: 479px) {
.events-card__row {
flex-direction: column;
}
.events-card__thumb {
flex: 0 0 auto;
}
}
/* End */
/* Start:/local/templates/vine/components/bitrix/news.list/vine_materials_cards/style.css?17871501007487*/
/* =========================================================================
«Полезные материалы» — карточки с картинкой сверху
bitrix:news.list / vine_materials_cards
Макет Figma HA2Vx4dnWPRDdb6SL7tM3y:
2091:20207 — режим GRID (страница списка преподавателей);
2095:21626 — режим CAROUSEL (детальная страница преподавателя).
Общее для обоих режимов: заголовок секции 40px, карточка без фона,
рамки и внутренних отступов; картинка высотой 152px, ниже название
Bold 28px, дата Italic 14px, анонс 18px и ссылка «Подробнее →» 18px
цветом #0077FF. Шаг между картинкой и текстом 16px, между текстовыми
полями 8px.
========================================================================= */
.materials-cards {
display: flex;
flex-direction: column;
gap: var(--vine-gap, 16px);
}
/* двойной класс — чтобы перебить общее правило .vine-main h2 из базового слоя */
.materials-cards .materials-cards__title {
margin: 0;
font-size: var(--vine-fz-h1, 40px);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
/* ------------------------------------------------------- СТРОКА С ЛЕНТОЙ */
.materials-cards__row {
display: flex;
gap: var(--vine-gap, 16px);
min-width: 0;
}
.materials-cards__list {
display: flex;
gap: var(--vine-gap, 16px);
margin: 0;
padding: 0;
list-style: none;
min-width: 0;
}
/* ------------------------------------------------------------- КАРТОЧКА */
/* ни фона, ни рамки, ни padding — только колонка с шагом 16px */
.materials-cards__item {
display: flex;
flex-direction: column;
gap: var(--vine-gap, 16px);
min-width: 0;
}
.materials-cards__pic {
display: block;
width: 100%;
height: 152px;
overflow: hidden;
background: var(--vine-color-card, #C4C4C4);
}
.materials-cards__img {
display: block;
width: 100%;
height: 152px;
object-fit: cover;
border-radius: 0;
}
.materials-cards__body {
display: flex;
flex-direction: column;
gap: var(--vine-gap-sm, 8px);
min-width: 0;
}
/* двойной класс — чтобы перебить общее правило .vine-main h3 из базового слоя */
.materials-cards .materials-cards__name {
margin: 0;
font-size: var(--vine-fz-h3, 28px);
font-weight: 700;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
.materials-cards__name-link {
color: inherit;
text-decoration: none;
}
.materials-cards__name-link:hover,
.materials-cards__name-link:focus {
color: inherit;
text-decoration: underline;
}
.materials-cards__date {
margin: 0;
font-size: var(--vine-fz-small, 14px);
font-style: italic;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
}
.materials-cards__text {
margin: 0;
font-size: var(--vine-fz-text, 18px);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
.materials-cards__text p {
margin: 0;
}
.materials-cards__more {
align-self: flex-start;
font-size: var(--vine-fz-text, 18px);
font-weight: 400;
line-height: normal;
color: var(--vine-color-link, #0077FF);
text-decoration: underline;
text-decoration-skip-ink: none;
text-underline-position: from-font;
white-space: nowrap;
}
/* =============================================================== РЕЖИМ GRID
Строка карточек 300px с шагом 16, выравнивание по верху: высоты
карточек не выравниваются. Четвёртая плитка-ссылка растянута на
высоту строки.
------------------------------------------------------------------------ */
.materials-cards--grid .materials-cards__row,
.materials-cards--grid .materials-cards__list {
align-items: flex-start;
}
.materials-cards--grid .materials-cards__list {
flex-wrap: wrap;
}
.materials-cards--grid .materials-cards__item {
flex: 0 0 300px;
width: 300px;
}
/* плитка «Все полезные материалы» */
.materials-cards--grid .materials-cards__item--all {
align-self: stretch;
}
.materials-cards__all {
display: flex;
flex-direction: column;
gap: var(--vine-gap, 16px);
box-sizing: border-box;
width: 100%;
height: 100%;
padding: var(--vine-pad-card, 8px);
background: var(--vine-color-card, #C4C4C4);
border-radius: var(--vine-radius, 8px);
text-decoration: none;
}
/* картинка занимает всё оставшееся место плитки */
.materials-cards__all-img {
display: block;
flex: 1 1 auto;
width: 100%;
min-height: 0;
object-fit: cover;
}
.materials-cards__all-text {
flex: 0 0 auto;
font-size: var(--vine-fz-h3, 28px);
font-weight: 700;
line-height: normal;
color: var(--vine-color-link, #0077FF);
text-decoration: underline;
text-decoration-skip-ink: none;
text-underline-position: from-font;
word-break: break-word;
}
/* =========================================================== РЕЖИМ CAROUSEL
Лента карточек 373px с шагом 16, по краям кнопки-стрелки 32x32.
Выравнивание по центру; карточки при этом одной высоты — их тянет
align-self: stretch, поэтому центрирование на вид ничего не смещает.
Прокрутка — overflow-x: auto, кнопки листают лентой из script.js.
------------------------------------------------------------------------ */
.materials-cards--carousel .materials-cards__row,
.materials-cards--carousel .materials-cards__list {
align-items: center;
}
.materials-cards--carousel .materials-cards__list {
flex: 1 1 auto;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch;
}
.materials-cards--carousel .materials-cards__item {
flex: 0 0 373px;
width: 373px;
align-self: stretch;
scroll-snap-align: start;
}
/* ---------------------------------------------------------- КНОПКИ-СТРЕЛКИ */
/* скруглённый квадрат 32x32, внутри чёрный треугольник 24x24 */
.materials-cards__arrow {
display: flex;
flex: 0 0 32px;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid var(--vine-color-text, #000000);
border-radius: var(--vine-radius-btn, 5px);
background: var(--vine-color-bg, #FFFFFF);
color: var(--vine-color-text, #000000);
cursor: pointer;
}
.materials-cards__arrow-icon {
display: block;
width: 24px;
height: 24px;
font-size: 24px;
line-height: 24px;
color: var(--vine-color-text, #000000);
}
.materials-cards__arrow[disabled] {
opacity: 0.4;
cursor: default;
}
/* ------------------------------------------------------------- АДАПТИВ */
@media (max-width: 640px) {
.materials-cards--grid .materials-cards__item,
.materials-cards--carousel .materials-cards__item {
flex-basis: 86vw;
width: 86vw;
}
}
/* End */
/* Start:/local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17875764226847*/
/* =========================================================================
Отзывы на детальной — bitrix:news.list / course-reviews
Макет Figma HA2Vx4dnWPRDdb6SL7tM3y, узел 1641:11136 (очный курс),
он же 960:12354 «Другие отзывы» на онлайн-курсе.
Из макета: заголовок 40px; цитата Roboto Italic 18px с чёрной чертой
слева 5px и отступом 16px; подпись «— Имя, возраст» 18px без курсива;
шаг между отзывами 16px, внутри отзыва 8px; кнопка «Показать ещё»
143×40; строка «Вы посмотрели все отзывы» 18px; ссылка «Оставить отзыв»
18px синяя подчёркнутая.
Черта, курсив и подпись живут в общем слое (.vine-quote,
.vine-quote__author), кнопка — .vine-btn. Здесь только раскладка секции.
========================================================================= */
.course-reviews {
display: flex;
flex-direction: column;
gap: var(--vine-gap, 16px);
}
/* двойной класс — перебить .vine-main h2 (34px) из базового слоя */
.course-reviews .course-reviews__title {
margin: 0;
font-size: var(--vine-fz-h1, 40px);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
/* ------------------------------------------------------------- СПИСОК */
.course-reviews__list {
display: flex;
flex-direction: column;
gap: var(--vine-gap, 16px);
}
/* .vine-quote даёт черту, отступ и курсив; здесь — только внутренний шаг */
.course-reviews__item {
display: flex;
flex-direction: column;
gap: var(--vine-gap-sm, 8px);
}
.course-reviews__quote {
margin: 0;
font: inherit;
color: inherit;
word-break: break-word;
}
.course-reviews__quote p {
margin: 0 0 var(--vine-gap-sm, 8px);
}
.course-reviews__quote p:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------- ПОДВАЛ */
/* Кнопка, строка «всё» и ссылка идут друг под другом с шагом 16px.
В макете кнопка и строка нарисованы одновременно, но это два состояния
одного места — лишнее скрыто атрибутом hidden. */
.course-reviews__foot {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: var(--vine-gap, 16px);
}
.course-reviews__foot > [hidden] {
display: none;
}
/* «Показать ещё» — 143×40 из макета: ширина набирается текстом 18px
и полями .vine-btn, поэтому фиксируем минимумы, а не жёсткий размер */
.course-reviews__more {
min-width: 143px;
min-height: 40px;
}
.course-reviews__more[aria-busy="true"] {
opacity: 0.6;
pointer-events: none;
}
.course-reviews__end {
margin: 0;
font-size: var(--vine-fz-text, 18px);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
}
.course-reviews__add {
font-size: var(--vine-fz-text, 18px);
line-height: normal;
color: var(--vine-color-link, #0077FF);
text-decoration: underline;
}
/* ================================================= МОДАЛЬНОЕ ОКНО ОТЗЫВА */
/* Макет 328:4974 «Отправка отзыва» (344×505) и 328:5013 «Отзыв отправлен»
(344×329) — два состояния одного окна: шапка общая, меняется то, что под
ней. Оболочку (подложку, крестик 32×32, Escape, клик вне окна) держит
css/contacts-modal.css; здесь размер окна и его содержимое.
Окно: 344, padding 16, белое, без рамки и скругления.
Контент 328:4976 / 328:5015 — колонка 312 с шагом 24, по центру;
шапка 328:4994 / 328:5016 — колонка с шагом 8:
заголовок «Отзыв» 34px по центру, подзаголовок 28px по ширине колонки.
Высота окна не фиксируется: у двух состояний она разная и набирается
содержимым. */
.contacts-modal__window.contacts-modal__window--review {
box-sizing: border-box;
gap: 0; /* контент начинается сразу под крестиком: 16 + 32 = y 48 */
width: 344px;
max-width: 100%;
min-height: 0;
padding: var(--vine-gap, 16px);
background: var(--vine-color-bg, #FFFFFF);
}
.contacts-modal__window--review .contacts-modal__content {
gap: 0;
padding: 0;
}
.review-modal__panel {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
width: 100%;
}
.review-modal__panel[hidden] {
display: none;
}
/* шапка 328:4994 — шаг 8 */
.review-modal__head {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--vine-gap-sm, 8px);
width: 100%;
}
/* Заголовок 34px Regular. Тег , а не
, и селектор с .vine-main —
иначе общее правило проекта для заголовков перебьёт кегль (грабля,
на которой в проекте горели трижды). */
.review-modal__title,
.vine-main .review-modal__title {
margin: 0;
font-size: 34px;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
text-align: center;
}
/* подзаголовок 328:4992 — название мероприятия, 28px по левому краю колонки */
.review-modal__subtitle,
.vine-main .review-modal__subtitle {
width: 100%;
margin: 0;
font-size: 28px;
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
word-break: break-word;
}
/* благодарность 328:5020 — 18px по ширине колонки */
.review-modal__text {
width: 100%;
margin: 0;
font-size: var(--vine-fz-text, 18px);
font-weight: 400;
line-height: normal;
color: var(--vine-color-text, #000000);
}
/* кнопка «Закрыть» 328:5021 — тёмная 97×40 по центру */
.review-modal__close-btn {
min-height: var(--vine-field-h, 40px);
}
/* Узкий экран: в макете мобильного состояния окна нет, поэтому только
снимаем фиксированную ширину, чтобы окно влезло. */
@media (max-width: 375px) {
.contacts-modal__window.contacts-modal__window--review {
width: 100%;
}
}
/* End */
/* /local/templates/vine/components/bitrix/news/vine_teachers/style.css?17871539726424 */
/* /local/templates/vine/components/bitrix/news.list/vine_city_filter/style.css?17875778007779 */
/* /local/templates/vine/css/contacts-modal.css?17873146455499 */
/* /local/templates/vine/components/bitrix/news.list/vine_teachers/style.css?17871510618242 */
/* /local/templates/vine/components/bitrix/catalog.section/events-card/style.css?17875979953249 */
/* /local/templates/vine/components/bitrix/news.list/vine_materials_cards/style.css?17871501007487 */
/* /local/templates/vine/components/bitrix/news.list/course-reviews/style.css?17875764226847 */