/* =============================================================================
* aru.perf.css — оптимизация Core Web Vitals (CLS / LCP / шрифты)
* -----------------------------------------------------------------------------
* Подключается ПОСЛЕДНИМ в (site/themes/vivashop/index.html).
*
* Принцип: файл не меняет внешний вид сайта.
* 1) Правила раскладки действуют ТОЛЬКО пока карусель не инициализирована
* (селектор :not(.owl-loaded)). После init OwlCarousel добавляет класс
* .owl-loaded — все правила отключаются, работает штатная вёрстка темы.
* 2) @font-face продублированы с font-display:swap и woff2 первым источником.
* По спецификации CSS побеждает последнее объявление с той же парой
* family/weight/style — поэтому файл обязан идти после fontawesome.min.css
* и ionicons.min.css.
*
* Зачем: vendor.css содержит `.owl-carousel{display:none}` и
* `.owl-carousel.owl-loaded{display:block}`. До инициализации JS все карусели
* имеют высоту 0, после — разворачиваются. Это давало CLS 0.701.
*
* Откат: удалить из index.html (и этот файл).
* ============================================================================= */
/* -----------------------------------------------------------------------------
* 1. ШРИФТЫ: font-display:swap + woff2 первым
* Было: FontAwesome и Ionicons блокировали отрисовку текста (PSI: 3000 мс).
* Ionicons вдобавок грузился как ionicons.ttf (188 КБ), т.к. ttf стоял в
* списке src раньше woff (68 КБ).
* -------------------------------------------------------------------------- */
@font-face {
font-family: 'FontAwesome';
src: url(fonts/fontawesome-webfont.woff2?v=4.7.0) format('woff2'),
url(fonts/fontawesome-webfont.woff?v=4.7.0) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Ionicons';
src: url(fonts/ionicons.woff?v=2.0.0) format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}
/* Ionicons 2.0.0 официально не поставляется в woff2; woff (68 КБ) меньше, чем
woff2, собранный из ttf (85 КБ), поэтому woff оставлен единственным источником.
Главное — ttf (188 КБ) больше не запрашивается. */
/* -----------------------------------------------------------------------------
* 2. ПРОМО-СЛАЙДЕР НА ГЛАВНОЙ (.js-slider)
* До init показываем первый слайд как обычный блок: размеры картинки заданы
* атрибутами width/height в slider.html, поэтому браузер резервирует место
* и LCP-изображение рисуется без ожидания JS.
* -------------------------------------------------------------------------- */
.v-slider .js-slider-content.owl-carousel:not(.owl-loaded) {
display: block;
}
.v-slider .js-slider-content.owl-carousel:not(.owl-loaded) > *:not(:first-child) {
display: none;
}
/* используется только как контейнер для WebP-источника.
display:contents делает так, что ![]()
остаётся прямым потомком
родителя (ссылки слайда / flex-бокса логотипа) — вёрстка не меняется. */
.v-slider__promo picture,
.v-shop-brands-carousel__logo picture {
display: contents;
}
/* первый (не ленивый) слайд не должен попадать под правило height:1px */
.v-slider._lazy .v-slider__promo img._is-lazy {
height: auto !important;
}
/* Резерв места под баннер ДО инициализации owl.
1218/450 — формат промо-баннеров магазина (все текущие баннеры такие,
в вёрстке они всё равно растягиваются на всю ширину: width:100%!important).
Если формат баннеров изменится — поменять только эту дробь. */
.v-slider[data-type="promos"] .js-slider-content.owl-carousel:not(.owl-loaded) .v-slider__promo-img,
.v-slider[data-type="photos"] .js-slider-content.owl-carousel:not(.owl-loaded) .v-slider__promo-img {
width: 100% !important;
height: auto !important;
aspect-ratio: 1218 / 450;
}
/* -----------------------------------------------------------------------------
* 3. КАРУСЕЛИ СПИСКОВ ТОВАРОВ (.js-list-carousel-wrap)
* До init раскладываем карточки в такую же горизонтальную строку, какую
* построит OwlCarousel. Числа взяты 1-в-1 из VivaProductsCarousel._config
* (vivashop.shop.js): responsive-карты full / short / very_short.
* -------------------------------------------------------------------------- */
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) {
display: block;
overflow: hidden;
white-space: nowrap;
}
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
display: inline-block;
vertical-align: top;
white-space: normal;
box-sizing: border-box;
}
/* по умолчанию (typeDefault = short) */
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 1) !important;
padding-right: 0px;
}
@media (min-width: 440px) {
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 2) !important;
padding-right: 10px;
}
}
@media (min-width: 800px) {
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 961px) {
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 2) !important;
padding-right: 18px;
}
}
@media (min-width: 1100px) {
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 1280px) {
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 4) !important;
padding-right: 18px;
}
}
@media (min-width: 1400px) {
.js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 4) !important;
padding-right: 28px;
}
}
/* без сайдбаров -> full */
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 1) !important;
padding-right: 0px;
}
@media (min-width: 440px) {
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 2) !important;
padding-right: 10px;
}
}
@media (min-width: 800px) {
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 961px) {
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 1100px) {
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 4) !important;
padding-right: 18px;
}
}
@media (min-width: 1280px) {
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 5) !important;
padding-right: 18px;
}
}
@media (min-width: 1400px) {
.js-main-columns-center:not(._with-left):not(._with-right) .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 5) !important;
padding-right: 28px;
}
}
/* оба сайдбара -> very_short */
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 1) !important;
padding-right: 0px;
}
@media (min-width: 440px) {
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 2) !important;
padding-right: 10px;
}
}
@media (min-width: 800px) {
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 961px) {
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 2) !important;
padding-right: 18px;
}
}
@media (min-width: 1100px) {
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 1280px) {
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 18px;
}
}
@media (min-width: 1400px) {
.js-main-columns-center._with-left._with-right .js-list-carousel-wrap.owl-carousel:not(.owl-loaded) > .v-products-card__item {
width: calc(100% / 3) !important;
padding-right: 28px;
}
}
/* -----------------------------------------------------------------------------
* 4. КАРУСЕЛЬ БРЕНДОВ (.js-shop-brands-carousel-list)
* Высота плитки фиксирована в vivashop.custom.css
* (.v-shop-brands-carousel__link{height:125px}, до 767px — 95px),
* поэтому резервируем её точно. Числа items/margin — из brands-carousel.js.
* -------------------------------------------------------------------------- */
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) {
display: block;
overflow: hidden;
white-space: nowrap;
height: 125px;
}
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) > .v-shop-brands-carousel__item {
display: inline-block;
vertical-align: top;
white-space: normal;
box-sizing: border-box;
}
@media (max-width: 767px) {
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) {
height: 95px;
}
}
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) > .v-shop-brands-carousel__item {
width: calc(100% / 2.25);
padding-right: 7px;
}
@media (min-width: 480px) {
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) > .v-shop-brands-carousel__item {
width: calc(100% / 3);
padding-right: 10px;
}
}
@media (min-width: 768px) {
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) > .v-shop-brands-carousel__item {
width: calc(100% / 4);
padding-right: 12px;
}
}
@media (min-width: 1024px) {
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) > .v-shop-brands-carousel__item {
width: calc(100% / 5);
padding-right: 13px;
}
}
@media (min-width: 1280px) {
.js-shop-brands-carousel-list.owl-carousel:not(.owl-loaded) > .v-shop-brands-carousel__item {
width: calc(100% / 5.25);
padding-right: 13px;
}
}
/* -----------------------------------------------------------------------------
* 5. МЕЛКИЕ ИСТОЧНИКИ СДВИГА
* -------------------------------------------------------------------------- */
/* логотип: атрибуты width/height проставлены в header.html,
height:auto оставляет масштабирование на CSS темы */
.v-header-logo__img {
height: auto;
}
/* логотипы брендов: width/height проставлены в brands-carousel.html */
.v-shop-brands-carousel__img {
height: auto;
}