/* * Сброс и базовые правила. Всё, что задаётся здесь, действует на любой странице * и не должно переопределяться в секциях. */ *, *::before, *::after { box-sizing: border-box; } html { /* Шапка (.frk-header) — position: fixed: высота, которую она закрывает сверху */ --frk-header-offset: calc(66px + 2 * var(--frk-layout-gutter)); /* Якорные переходы не должны прятать заголовок под залипшую шапку */ scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; } body { margin: 0; /* Компенсируем высоту фиксированной шапки, чтобы контент не уезжал под неё */ padding-top: var(--frk-header-offset); background: var(--frk-color-surface); color: var(--frk-color-text); font-family: var(--frk-font-ui); font-weight: var(--frk-weight-regular); font-size: var(--frk-size-ui-lg); line-height: var(--frk-leading-base); letter-spacing: var(--frk-tracking-ui); font-optical-sizing: auto; /* Цифры Roboto Serif по умолчанию старого стиля: 3, 5, 9 уходят под строку */ font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * Панель администратора Битрикса (видна только вошедшему администратору) стоит * в потоке первой в : отступ под фиксированную шапку оказывался над ней * белой полосой, а шапка — её опускает под панель admin-panel.js — закрывала * начало страницы. Панель поднимаем в самый верх, отступ под шапку — после неё. * Закреплённая панель (.bx-panel-fixed) фиксирована сама и отступ перекрывает. * !important — стили панели обнуляют её отступы тоже с !important. */ #bx-panel:not(.bx-panel-fixed) { margin-top: calc(-1 * var(--frk-header-offset)) !important; margin-bottom: var(--frk-header-offset) !important; } /* * Футер прижат к низу окна на страницах короче окна браузера — без этого * приёма под футером остаётся пустая белая полоса до низа окна. Раньше это * правило заводили заново на каждой такой странице под собственным именем * (.frk-page--checkout, .frk-page--error, .frk-page--search); здесь оно одно * общее — класс .frk-page на , свой CSS для этого приёма больше не нужен * (у поиска остался свой модификатор поверх общего — см. .frk-page--search * в search.css, там особая причина). В вёрстке класс ставит сама страница, * главная — без него: она не оборачивает контент в

и всегда выше окна. * На сайте класс ставит шаблон (header.php) на всех страницах —

там * есть всегда, а у страниц выше окна от класса ничего не меняется; страница * добавляет в BODY_CLASS только свой модификатор. * * min-height задан дважды: браузер без поддержки svh не поймёт вторую строку * и отбросит её целиком — тогда останется первая, с обычным vh. */ .frk-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; } .frk-page > main { flex: 1; } h1, h2, h3, h4, h5, h6, p, figure, blockquote { margin: 0; } h1, h2, h3, h4, h5, h6 { font-family: var(--frk-font-display); font-weight: var(--frk-weight-extralight); letter-spacing: var(--frk-tracking-serif); text-wrap: balance; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } img, picture, video, svg { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; color: inherit; } button { padding: 0; border: none; background: none; cursor: pointer; } /* * Фокус показываем только при навигации с клавиатуры: обводка на каждый клик * мышью выглядит как дефект, но без неё сайт недоступен без мыши. */ :focus-visible { outline: 2px solid var(--frk-color-gold); outline-offset: 2px; } /* Видно скринридеру, не видно глазу — для подписей к иконкам и ориентиров */ .frk-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }