/* ========================================================================== Экосистема 99Percentile – база: сброс, типографика, контейнер, кнопки Здесь только то, что применяется на всех страницах. Всё остальное – в CSS своей секции. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { /* Полоса прокрутки не должна дёргать ширину контента: иначе замеры сверки с макетом расходятся на 15 px между страницами. */ scrollbar-gutter: stable; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-base); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); letter-spacing: var(--ls-body); -webkit-font-smoothing: antialiased; /* Горизонтальный скролл на макетной вёрстке – почти всегда следствие блока шире контейнера. Прячем, но искать причину всё равно надо: на мобиле обрезанный блок виден. */ overflow-x: clip; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5, h6, p, figure, ul, ol { margin: 0; } ul, ol { padding: 0; list-style: none; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; background: none; border: 0; padding: 0; } h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: var(--fw-h1); letter-spacing: var(--ls-h1); } h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-h2); letter-spacing: var(--ls-h2); } /* * [ВЫВЕДЕНО] Мобильных кеглей в макете НЕТ – единственная мобильная нода * содержит только хиро главной. * * Без этого правила заголовок ломает страницу: «Политика * конфиденциальности» при 48px занимает 414px, а на экране 390 доступно * 375. Длинное слово не переносится по пробелам, и страница уезжает * вбок на 79px. Поймано замером на странице политики. * * Значения ниже – решение верстальщика, не дизайнера. Согласовать. */ @media (max-width: 640px) { h1 { font-size: 32px; } h2 { font-size: 28px; line-height: 1.1; } } h1, h2, h3, h4 { overflow-wrap: break-word; } /* --- Контейнер ----------------------------------------------------------- */ .container { width: 100%; max-width: calc(var(--container) + var(--side-padding) * 2); margin-inline: auto; padding-inline: var(--side-padding); } /* --- Кнопки -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); padding: 0 var(--space-24); min-height: 48px; border-radius: var(--radius-pill); font-weight: 500; transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .btn--primary { background: var(--color-brand); color: var(--color-text-invert); } /* * [ВЫВЕДЕН] hover в макете НЕ нарисован ни у одной кнопки – ни здесь, ни в * шапке, ни в подвале, ни на одной странице. Оттенок берётся из * --color-brand-hover, который в variables.css тоже помечен как выведенный. * * Оставлено намеренно: кнопка вообще без отклика на наведение – заметная * потеря для пользователя, и молча выкинуть её хуже, чем показать * помеченное значение. Согласовать оттенок с дизайнером. */ .btn--primary:hover { background: var(--color-brand-hover); } /* --- Карточка ------------------------------------------------------------ */ /* Замеры с ноды 32705:6908 («Profile card» в хиро главной). Компонент повторяется в макете 9 раз, поэтому лежит в базе, а не в CSS секции. Высота в макете фиксированная (174px), но здесь не задана: она принадлежит конкретной секции, а не компоненту – задавать её в базе значит сломать карточку на других экранах. */ .card { display: flex; flex-direction: column; gap: var(--space-12); align-items: center; justify-content: center; padding: var(--space-24); background: var(--color-bg-cold); border-radius: var(--radius-lg); } .card__text { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-small); letter-spacing: var(--ls-small); color: var(--color-text); text-align: center; } /* --- Таблетка-ярлык ------------------------------------------------------ */ /* Замеры с ноды 32705:6910 («Учимся» / «Развиваемся» / «Поступаем»). Цвет – модификатором: в макете он несёт смысл, а не украшает, и закреплён за категорией. Список цветов – в variables.css. */ .badge { display: inline-flex; align-items: center; justify-content: center; min-height: var(--badge-height); padding-inline: var(--space-12); border-radius: var(--radius-pill); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; letter-spacing: var(--ls-h3); color: var(--color-text-invert); white-space: nowrap; } .badge--yellow { background: var(--color-yellow); } .badge--red { background: var(--color-red); } .badge--mint { background: var(--color-mint); } .badge--green { background: var(--color-green); } .badge--purple { background: var(--color-purple); } .badge--blue { background: var(--color-brand); } /* --- Поле формы: НЕ СВЁРСТАНО ------------------------------------------- */ /* Единственная форма в макете – попап записи на консультацию (нода 32513:3984), и он пока не разобран. Полей ввода как повторяющегося компонента в макете нет. Стили поля здесь намеренно отсутствуют: придуманное поле разойдётся с макетом, когда попап всё-таки разберут, и переделывать придётся везде, где оно к тому моменту применится. */ /* --- Контент обычных страниц --------------------------------------------- */ /* * Страницы без своего макета (политика конфиденциальности, будущие * текстовые страницы) выводятся через page.php и получают эти стили. * * В макете таких страниц НЕТ – оформление ниже минимальное и служебное. * Главное здесь не красота, а перенос длинных ссылок: в стандартном * тексте политики WordPress встречаются URL без пробелов, и без * overflow-wrap они дают горизонтальную прокрутку на узком экране. * Поймано замером на 390px: страница уезжала на 79px. */ .entry-content { max-width: 900px; padding-block: var(--space-48) var(--section-gap); overflow-wrap: anywhere; word-break: break-word; } .entry-content > * + * { margin-top: var(--space-24); } .entry-content h2 { margin-top: var(--space-48); font-size: var(--fs-h4); line-height: var(--lh-h4); font-weight: 500; letter-spacing: var(--ls-h4); } .entry-content h3 { margin-top: var(--space-32); font-size: var(--fs-body); font-weight: 600; letter-spacing: var(--ls-body); } .entry-content ul, .entry-content ol { padding-left: var(--space-24); list-style: revert; } .entry-content li + li { margin-top: var(--space-8); } .entry-content a { color: var(--color-link); text-decoration: underline; text-underline-position: from-font; } /* Таблицы и код шире контейнера прокручиваются внутри себя, а не тянут за собой всю страницу. */ .entry-content table { width: 100%; border-collapse: collapse; } .entry-content td, .entry-content th { padding: var(--space-8); border: 1px solid var(--color-border); } .entry-content pre { overflow-x: auto; padding: var(--space-16); background: var(--color-bg-soft); border-radius: var(--radius-lg); } .entry-content img { border-radius: var(--radius-lg); } /* Заголовок страницы без макета */ .page:not(.home) > .container > article > h1 { padding-top: calc(var(--header-height) + var(--space-48)); } /* --- Доступность --------------------------------------------------------- */ .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :focus-visible { outline: 2px solid var(--color-brand); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Плеер вместо заглушки «видео» (inc/video.php, 2026-08-12; неинтерактивный с 2026-08-17) Плеер – flex-ребёнок плашки на всю её площадь: контейнеры плашек на восьми страницах разные (flex, часть без position), поэтому не абсолют. Высота: align-self: stretch тянет плеер на высоту плашки (фиксированная, min-height или строка сетки – все дают высоту флекс-линии); там, где плашка на мобильных сбрасывает высоту в auto, срабатывает запасное aspect-ratio 16:9 – плеер не схлопывается в ноль. Состояния: .p99-video--embed – превью с кнопкой play (до клика); .p99-video--playing – обёртка с iframe и «щитом» (YouTube/Vimeo после клика); .p99-video--file.is-playing – файл играет, обёртка инертна. ========================================================================== */ /* Плашка с плеером: паддинг убираем, чтобы плеер занял всю площадь. !important – намеренно: паддинг плашек задают CSS страниц (грузятся позже и специфичнее, напр. .summer-academic__media .summer-video), а это состояние должно побеждать везде. */ :is(.about-stub, .prog-video, .club-hero__video, .ap-tracks__video, .ielts-cta__video, .tour-cta__video, .summer-video, .adm-video):has(> .p99-video) { padding: 0 !important; overflow: hidden; /* position здесь НЕ трогаем: у части плашек (SAT/IELTS/тур/сопровождение/ летние – финальные CTA) position: absolute, и relative выбрасывал их из макета в поток (ловилось на SAT, 2026-08-17). Плеер – флекс-ребёнок, позиционирование хосту не нужно. */ } .p99-video { position: relative; display: block; flex: 1 1 100%; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; align-self: stretch; padding: 0; border: 0; border-radius: inherit; overflow: hidden; background: #000; color: #fff; } /* Всё внутри плеера – на всю площадь: iframe,