/* Только контейнер страницы: класс «page» WordPress вешает ещё и на , и без уточнения тега те же отступы получал весь документ вместе с шапкой. */ main.page { background: #ffffff; font-family: var(--vk-font); } /* Отступы нужны обычной странице с текстом. У страницы из секций их не бывает: каждая секция держит поля сама, а обложка идёт вплотную к шапке. */ main.page:not(.page--sections) { padding: var(--vk-section-pad-y) 20px; } .page__inner { max-width: 960px; margin: 0 auto; } .page__title { margin: 0 0 30px; font-size: 42px; font-weight: 600; line-height: 1.2; } .page__content { font-size: 18px; font-weight: 300; line-height: 1.55; } .page__content > * { margin-bottom: 20px; } .page__content > :last-child { margin-bottom: 0; } .page__content img { max-width: 100%; height: auto; } /* Текст, списки и галереи между секциями живут в обычном потоке — им колонку, поля по бокам и типографику даём здесь. Размеры сняты с прежнего сайта. */ .page--sections > :where(h2, h3, h4, p, ul, ol, figure, blockquote, .wp-block-gallery) { width: min(760px, 100% - 40px); margin-inline: auto; font-size: 20px; font-weight: 300; line-height: 1.55; } .page--sections > :where(h2, h3, h4) { margin-block: 90px 40px; font-weight: 600; line-height: 1.2; } .page--sections > h2 { font-size: 32px; } .page--sections > h3 { font-size: 24px; } .page--sections > h4 { font-size: 20px; } .page--sections > :where(p, ul, ol, blockquote) { margin-block-end: 18px; } /* Шапка раздела внутри страницы — как на прежнем сайте: крупный заголовок по центру и короткое описание под ним узкой колонкой. Признак — выравнивание по центру, выставленное в редакторе: так менеджер сам решает, где шапка. */ .page--sections > h2.has-text-align-center { width: min(1160px, 100% - 40px); margin-block: 105px 80px; font-size: 42px; line-height: 1.23; } .page--sections > p.has-text-align-center { width: min(560px, 100% - 40px); margin-block-end: 90px; font-size: 24px; line-height: 1.5; } .page--sections > :where(ul, ol) { padding-inline-start: 40px; } .page--sections > :where(figure, .wp-block-gallery) { margin-block: 90px; width: min(960px, 100% - 40px); } /* Блок вопросов приходит со своими отступами по бокам, поэтому колонку задаём отдельным правилом: в общем перечне выше его margin перебивал центрирование. */ .page--sections > .mvweb-faq { width: min(760px, 100% - 40px); margin-inline: auto; font-size: 18px; font-weight: 300; line-height: 1.55; } /* Только снимки свободных блоков: у секций своя раскладка изображений. */ .page--sections > :where(figure, .wp-block-gallery) img { max-width: 100%; height: auto; } .page--sections > section:first-child { margin-block-start: 0; } /* Между текстом и секцией под ним — тот же воздух, что был на прежнем сайте. Отступ задаётся соседству, а не последнему элементу: пустой абзац, который иногда оставляет редактор, отступ на себя не заберёт. */ .page--sections > :where(p, ul, ol, blockquote, figure, .wp-block-gallery, .mvweb-faq) + section { margin-block-start: 150px; } /* Media */ @media (max-width: 1200px) { .page--sections > :where(h2, h3, h4, p, ul, ol, figure, blockquote, .wp-block-gallery) { width: min(620px, 100% - 40px); font-size: 18px; } .page--sections > .mvweb-faq { width: min(620px, 100% - 40px); } .page--sections > h2.has-text-align-center { width: min(940px, 100% - 40px); font-size: 38px; } .page--sections > p.has-text-align-center { font-size: 22px; } } @media (max-width: 960px) { .page--sections > :where(h2, h3, h4, p, ul, ol, figure, blockquote, .wp-block-gallery) { width: min(600px, 100% - 40px); } .page--sections > .mvweb-faq { width: min(600px, 100% - 40px); } .page--sections > h2.has-text-align-center { width: min(600px, 100% - 40px); margin-block: 105px 45px; } .page--sections > p.has-text-align-center { margin-block-end: 60px; } } @media (max-width: 640px) { .page__title { font-size: 30px; } .page__content { font-size: 16px; } .page--sections > :where(h2, h3, h4, p, ul, ol, figure, blockquote, .wp-block-gallery) { font-size: 16px; line-height: 1.45; } .page--sections > .mvweb-faq { font-size: 16px; } .page--sections > h2.has-text-align-center { font-size: 30px; } .page--sections > p.has-text-align-center { font-size: 20px; line-height: 1.4; } } @media (max-width: 480px) { .page--sections > :where(p, ul, ol, blockquote, figure, .wp-block-gallery, .mvweb-faq) + section { margin-block-start: 90px; } }