/* Медиацентр — стили только для этой страницы, ничего глобального не переопределяет. */ @font-face { font-family: 'Montserrat-SemiBold'; src: url('/fonts/Montserrat/Montserrat-SemiBold/Montserrat-SemiBold-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122; font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat-SemiBold'; src: url('/fonts/Montserrat/Montserrat-SemiBold/Montserrat-SemiBold-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02CC, U+02CE-02FF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0; font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat-SemiBold'; src: url('/fonts/Montserrat/Montserrat-SemiBold/Montserrat-SemiBold-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Montserrat-SemiBold'; src: url('/fonts/Montserrat/Montserrat-SemiBold/Montserrat-SemiBold-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; font-weight: 600; font-style: normal; font-display: swap; } .media-center { --mc-bg: #0D1015; --mc-card-bg: #171B22; --mc-card-border: #262C36; --mc-file-row-bg: #20262F; --mc-text-primary: #EAEDF2; --mc-text-secondary: #A9B1BF; --mc-accent: #CF161B; --mc-accent-2: #F93237; --mc-accent-3: #F84A4F; --mc-warning: #FF9A00; --mc-divider: rgba(90, 100, 114, 0.35); --mc-btn-bg: #0D1015; --mc-btn-bg-hover: #14181f; /* Круг под иконками соцсетей: сами иконки — с белой заливкой, CSS их не перекрашивает, поэтому подложка остаётся тёмной в обеих темах. */ --mc-icon-circle-bg: #0D1015; --mc-container: 1200px; /* 1160px контента + 20px паддинга с каждой стороны, как в SPEC */ background: var(--mc-bg); color: var(--mc-text-primary); font-family: 'Montserrat-Regular', Arial, sans-serif; overflow-x: hidden; } /* ---------- Светлая тема (переключатель на странице) ---------- Светлой палитры в макетах не было — значения подобраны от тёмной: акценты приглушены до #CF161B, а warning затемнён, чтобы мелкий текст проходил по контрасту на белом (AA). Класс ставится на , чтобы тема применялась до отрисовки и не мигала. */ html.mc-theme-light .media-center { --mc-bg: #F2F4F7; --mc-card-bg: #FFFFFF; --mc-card-border: #DDE2EA; --mc-file-row-bg: #F5F7FA; --mc-text-primary: #171B22; --mc-text-secondary: #5A6472; --mc-accent: #CF161B; --mc-accent-2: #CF161B; --mc-accent-3: #CF161B; --mc-warning: #A85F00; --mc-divider: rgba(90, 100, 114, 0.25); --mc-btn-bg: #F5F7FA; --mc-btn-bg-hover: #E9EEF5; --mc-icon-circle-bg: #171B22; } .media-center * { box-sizing: border-box; } .media-center a { text-decoration: none; color: inherit; } .media-center img { max-width: 100%; display: block; } .media-center .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .media-center__container { max-width: var(--mc-container); margin: 0 auto; padding: 0 20px; } /* ---------- Переключатель темы ---------- Позиционируется абсолютно, чтобы не сдвигать согласованные отступы hero. Без JS кнопка не показывается (нечем переключать). */ .media-center__theme-row { position: absolute; top: 160px; left: 0; right: 0; display: none; justify-content: flex-end; } .media-center.js-ready .media-center__theme-row { display: flex; } .media-center__theme-toggle { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mc-btn-bg); border: 1px solid var(--mc-card-border); color: var(--mc-text-secondary); cursor: pointer; padding: 0; transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .media-center__theme-toggle:hover, .media-center__theme-toggle:focus-visible { color: var(--mc-text-primary); border-color: var(--mc-accent-2); background: var(--mc-btn-bg-hover); } /* В тёмной теме показываем солнце (клик → светлая), в светлой — луну. */ .media-center__theme-icon--moon { display: none; } html.mc-theme-light .media-center__theme-icon--moon { display: block; } html.mc-theme-light .media-center__theme-icon--sun { display: none; } /* ---------- Hero ---------- */ /* Верхний отступ учитывает глобальную шапку сайта: она position: absolute и не занимает места в потоке (~136px на десктопе), поэтому без отступа контент уезжает под неё. 220px = ~85px чистого зазора под шапкой. */ .media-center__hero { padding: 220px 0 88px; position: relative; } .media-center__hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; } /* В SPEC колонка 668px, но пункту «…понятны конечным клиентам,» в Montserrat нужно 711px + 18px под маркер списка, иначе «клиентам,» висит отдельной строкой. Колонка расширена до 770px, иллюстрация уменьшена 380 → 340px: 770 + 40 (gap) + 340 = 1150px, укладывается в 1160px контента. */ .media-center__hero-text { max-width: 770px; } .media-center__eyebrow { font-family: 'Montserrat-SemiBold', Arial, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mc-accent-2); margin: 0 0 16px; } .media-center__h1 { font-family: 'Montserrat-Bold', Arial, sans-serif; font-weight: bold; font-size: 64px; line-height: 1.05; margin: 0 0 24px; color: var(--mc-text-primary); } .media-center__h1-accent { color: var(--mc-accent); } .media-center__lead { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 16px; line-height: 24px; color: var(--mc-text-secondary); margin: 0 0 20px; max-width: 560px; } .media-center__lead-caption { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 16px; color: var(--mc-text-primary); margin: 0 0 8px; } .media-center__lead-list { margin: 0; padding: 0; list-style: none; } .media-center__lead-list li { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 16px; line-height: 24px; color: var(--mc-text-secondary); padding-left: 18px; position: relative; } .media-center__lead-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--mc-text-secondary); } /* Ширину hero делят текст и иллюстрация: текстовой колонке нужно ~730px, иначе «клиентам,» снова уйдёт на отдельную строку. 730 + 32 (gap) + 390 = 1152px и укладывается в 1160px контента. */ .media-center__hero-art { flex: 0 0 auto; width: 390px; } .media-center__hero-laptop { width: 100%; height: auto; } /* ---------- Section head ---------- */ .media-center__section { padding: 56px 0; border-top: 1px solid var(--mc-divider); scroll-margin-top: 16px; } .media-center__section-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; } .media-center__section-num { font-family: 'Montserrat-Bold', Arial, sans-serif; font-weight: bold; font-size: 28px; color: var(--mc-accent); } .media-center__section-title { font-family: 'Montserrat-Bold', Arial, sans-serif; font-weight: bold; font-size: 24px; line-height: 32px; color: var(--mc-text-primary); margin: 0; } .media-center__section-text { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 16px; line-height: 24px; color: var(--mc-text-secondary); margin: 0 0 32px; max-width: 760px; } /* ---------- Grids ---------- */ .media-center__grid { display: grid; gap: 20px; } .media-center__grid--4 { grid-template-columns: repeat(4, 1fr); } .media-center__grid--2 { grid-template-columns: repeat(2, 1fr); } /* ---------- Resource card (Учиться) ---------- */ .media-center__resource-card { background: var(--mc-card-bg); border: 1px solid var(--mc-card-border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; } .media-center__resource-thumb { aspect-ratio: 275 / 160; background: var(--mc-file-row-bg); overflow: hidden; } .media-center__resource-thumb img { width: 100%; height: 100%; object-fit: cover; } .media-center__resource-body { padding: 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; } .media-center__card-title { font-family: 'Montserrat-SemiBold', Arial, sans-serif; font-weight: 600; font-size: 18px; line-height: 26px; color: var(--mc-text-primary); margin: 0; } .media-center__card-title--sm { font-size: 16px; line-height: 22px; } .media-center__card-text { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 14px; line-height: 20px; color: var(--mc-text-secondary); margin: 0; } .media-center__card-text--sm { font-size: 13px; line-height: 18px; } .media-center__resource-buttons { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; gap: 10px; } .media-center__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--mc-btn-bg); border: 1px solid var(--mc-card-border); border-radius: 10px; padding: 10px 16px; font-family: 'Montserrat-SemiBold', Arial, sans-serif; font-weight: 600; font-size: 14px; color: var(--mc-text-primary); transition: border-color 0.15s ease, background 0.15s ease; } .media-center__btn:hover, .media-center__btn:focus-visible { border-color: var(--mc-accent-2); background: var(--mc-btn-bg-hover); } .media-center__btn--dark { background: var(--mc-file-row-bg); } .media-center__btn-icon { width: 18px; height: 18px; flex: 0 0 auto; } /* ---------- Dark card (Продавать / Презентовать) ---------- */ .media-center__dark-card { background: var(--mc-card-bg); border: 1px solid var(--mc-card-border); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 10px; } .media-center__howto-label { font-family: 'Montserrat-Medium', Arial, sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0.04em; color: var(--mc-accent-2); margin: 4px 0 0; } .media-center__howto-label--note { color: var(--mc-warning); text-transform: none; letter-spacing: 0; } .media-center__dark-card > .media-center__resource-buttons { padding-top: 12px; } /* ---------- Файловые карточки (Презентовать) ---------- */ .media-center__dark-card--files { padding: 24px 24px 20px; } .media-center__file-card-top { display: flex; gap: 20px; margin: 8px 0 16px; } .media-center__file-card-thumb { flex: 0 0 160px; width: 160px; height: 150px; border-radius: 10px; overflow: hidden; background: var(--mc-file-row-bg); } .media-center__file-card-thumb img { width: 100%; height: 100%; object-fit: cover; } .media-center__file-card-info { flex: 1; display: flex; flex-direction: column; gap: 4px; justify-content: center; } .media-center__file-list { display: flex; flex-direction: column; gap: 8px; } .media-center__file-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--mc-file-row-bg); border: 1px solid var(--mc-card-border); border-radius: 10px; padding: 12px 16px; transition: border-color 0.15s ease; } .media-center__file-row:hover, .media-center__file-row:focus-visible { border-color: var(--mc-accent-2); } .media-center__file-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .media-center__file-row-name { font-family: 'Montserrat-SemiBold', Arial, sans-serif; font-weight: 600; font-size: 13px; line-height: 18px; color: var(--mc-text-primary); } .media-center__file-row-format { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 12px; color: var(--mc-text-secondary); } .media-center__file-row-icon { width: 20px; height: 20px; flex: 0 0 auto; } /* ---------- News banner ---------- */ .media-center__news-banner { margin-top: 20px; background: var(--mc-card-bg); border: 1px solid var(--mc-card-border); border-radius: 12px; padding: 28px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .media-center__news-text { display: flex; flex-direction: column; gap: 6px; max-width: 700px; } /* ---------- Contact cards (Остаемся на связи) ---------- */ .media-center__grid--contacts { margin-top: 8px; } .media-center__contact-card { display: flex; align-items: center; gap: 16px; background: var(--mc-card-bg); border: 1px solid var(--mc-card-border); border-radius: 12px; padding: 20px; transition: border-color 0.15s ease; } .media-center__contact-card:hover, .media-center__contact-card:focus-visible { border-color: var(--mc-accent-2); } .media-center__contact-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--mc-icon-circle-bg); display: flex; align-items: center; justify-content: center; } .media-center__contact-icon img { width: 24px; height: 24px; } .media-center__contact-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .media-center__contact-title { font-family: 'Montserrat-SemiBold', Arial, sans-serif; font-weight: 600; font-size: 15px; color: var(--mc-text-primary); } .media-center__contact-sub { font-family: 'Montserrat-Medium', Arial, sans-serif; font-size: 13px; color: var(--mc-text-secondary); } /* ================================================================== Tablet / промежуточные разрешения ================================================================== */ @media (max-width: 1023px) { .media-center__grid--4 { grid-template-columns: repeat(2, 1fr); } .media-center__hero { /* на планшете шапка ниже (~125px) — воздуха нужно меньше */ padding: 190px 0 72px; } .media-center__theme-row { top: 135px; } .media-center__hero-art { width: 300px; } .media-center__h1 { font-size: 52px; } } /* ================================================================== Mobile (по mobile-макету) ================================================================== */ @media (max-width: 767px) { .media-center__container { padding: 0 16px; } .media-center__hero { /* мобильная шапка сайта ~125px, зазор как в mobile-макете (~77px) */ padding: 200px 0 48px; } .media-center__theme-row { top: 140px; } .media-center__hero-inner { flex-direction: column; align-items: flex-start; gap: 24px; } .media-center__hero-art { display: none; } .media-center__h1 { font-size: 40px; } .media-center__lead, .media-center__lead-caption, .media-center__lead-list li { font-size: 15px; } .media-center__section { padding: 40px 0; } .media-center__grid--2, .media-center__grid--contacts { grid-template-columns: 1fr; } /* «Учиться» по mobile-макету: «База знаний» и «Обучающие ролики» — на всю ширину, два курса — в два столбца. Ассеты нарезаны ровно под эти размеры (343px и 163px), при растягивании в один столбец они мылят. */ .media-center__grid--learn { grid-template-columns: repeat(2, 1fr); } .media-center__grid--learn > :first-child, .media-center__grid--learn > :last-child { grid-column: 1 / -1; } .media-center__resource-thumb { aspect-ratio: 2 / 1; /* 343×172 и 163×82 — оба ассета 2:1 */ } /* Превью в карточках «Презентовать» остаётся слева и небольшим, как в макете: ассеты 116–123px, на всю ширину их тянуло почти втрое. */ .media-center__file-card-thumb { width: 116px; height: 116px; flex: 0 0 auto; } .media-center__news-banner { flex-direction: column; align-items: flex-start; } .media-center__news-banner .media-center__btn { width: 100%; justify-content: center; } }