/* Start:/local/templates/ivomed_new/css/styles.css?178393367297620*/ /** * Fonts are loaded from HTML (see scripts/apply-seo-head.py). * Do not @import Google Fonts here — it blocks rendering via the CSS chain. */ :root { --color-black: #000000; --color-white: #ffffff; --color-bg: #ffffff; --color-bg-soft: #f0f0f0; --color-bg-card: #eef0f4; --color-bg-card-alt: #e6eaf2; --color-bg-news: #e9eef6; --color-bg-category: #e8ebf1; --color-accent: #4a76fd; --color-accent-light: #6b8fff; --color-text: #000000; --color-text-muted: #4a4a4a; --color-text-secondary: #7a7a7a; --color-ozon: #005bd1; --color-ozon-brand: #2a48e1; --Butter: #2a48e1; --color-wb-brand: #7646de; --color-border: #e8e8e8; --color-social-bg: #f0f2f5; --color-social-icon: #5f6368; --Icon: rgba(81, 92, 114, 1); --slider-dot-size: 0.5rem; --slider-dot-gap: 0.5rem; --slider-dot-inactive: #c4c8d0; --slider-dot-active: var(--Icon); --slider-dot-active-width: 2rem; --font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-size-body: 0.875rem; --line-height-body: 1.5625rem; --letter-spacing-body: 0.0094rem; --container-max: 85rem; --layout-min-width: 320px; --container-padding: 3rem; --section-gap: 78px; --section-gap-mobile: 48px; --radius-sm: 0.75rem; --radius-md: 1.25rem; --radius-lg: 1.5rem; --radius-xl: 2rem; --radius-pill: 62.4375rem; --header-height: 80px; --hero-height: 100dvh; --hero-max-height: 100dvh; --transition: 0.25s ease; /* Белый блок поверх баннера (как на главной) */ --sheet-overlap: -56px; --sheet-radius: 3.5rem; --sheet-padding-top: 48px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; min-width: var(--layout-min-width); font-family: var(--font-family); } body { margin: 0; font-family: var(--font-family); font-size: 1rem; line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; max-width: 100%; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } ul, ol { margin: 0; padding: 0; list-style: none; } p { margin: 0; } sup { position: relative; top: 0.625rem; } sup.brand-reg { top: -3px; font-size: 0.55em; font-weight: 500; line-height: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; } .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .section { padding-top: var(--section-gap); padding-bottom: 0; } .section-label { display: block; margin-bottom: 20px; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 20px; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1rem; letter-spacing: 0.0094rem; text-align: right; color: var(--color-text-secondary); } .breadcrumbs__sep { display: inline-block; flex-shrink: 0; width: 1rem; height: 1rem; margin: 0 0.375rem; font-size: 0; line-height: 0; color: transparent; overflow: hidden; vertical-align: middle; background: url(/local/templates/ivomed_new/css/../assets/images/breadcrumb-sep.png) center / contain no-repeat; } .breadcrumbs__current { color: var(--color-text); } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 1.75rem; border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 500; line-height: 1.2; transition: opacity var(--transition); } .btn:hover:not(.btn--primary) { opacity: 0.85; } .btn--primary { box-sizing: border-box; max-height: 3.5rem; background: var(--color-black); color: var(--color-white); } .btn--sm { padding: 10px 1.375rem; font-size: 0.8125rem; } .mobile-only { display: none; } @media (max-width: 767px) { :root { --container-padding: 1rem; --section-gap: 40px; --hero-height: 100dvh; --hero-max-height: 100dvh; --hero-slider-height: min(var(--hero-max-height), calc(100vw * 787 / 375)); --sheet-overlap: 0; --sheet-radius: 3.5rem; --sheet-padding-top: 36px; } .desktop-only { display: none !important; } .mobile-only { display: block; } } @media (min-width: 768px) and (max-width: 1199px) { :root { --container-padding: 2rem; --section-gap: 64px; } } /* UI icons from assets/images/svg (SVG as img) */ .icon { display: block; flex-shrink: 0; object-fit: contain; } .icon--search { width: 1.4375rem; height: 1.4375rem; } .icon--menu { width: 1.5rem; height: 1.5rem; } .icon--close { width: 1rem; height: 1rem; } /* Close button in overlays — circle + cross from close.svg */ .overlay-close, .filters-panel__close, .nav-dropdown__close, .mobile-drawer__close, .search-bar__close { display: flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; /* width: 2rem; */ /* height: 2rem; */ padding: 0; border: none; background: transparent; cursor: pointer; transition: opacity var(--transition); } .overlay-close:hover, .filters-panel__close:hover, .nav-dropdown__close:hover, .mobile-drawer__close:hover, .search-bar__close:hover { opacity: 0.6; } .overlay-close .icon, .filters-panel__close .icon, .nav-dropdown__close .icon, .mobile-drawer__close .icon, .search-bar__close .icon { display: block; width: 1rem; height: 1rem; } .icon--chevron { width: 1rem; height: 1rem; transition: transform var(--transition); } .icon--chevron-up { transform: rotate(180deg); } .accordion__item.is-open .icon--chevron { transform: rotate(180deg); } .nav-dropdown__chevron.icon { width: 0.75rem; height: 0.75rem; transform: rotate(180deg); } .icon--chevron-left { width: 1.5rem; height: 1.5rem; } .icon--chevron-right { width: 1.5rem; height: 1.5rem; transform: rotate(180deg); } .icon--arrow { width: 3.5625rem; height: 3.5625rem; } @media (max-width: 767px) { .icon--arrow { width: 3rem; height: 3rem; } } /** * UI-состояния по гайду «UI элементы (анимация)» * Обычное → hover / active */ /* —— Кнопки primary —— */ .btn--primary { transition: background-color var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition); } .btn--primary:hover { /* background: var(--color-ozon); */ color: var(--color-white); opacity: 0.7; } .btn--primary:active { opacity: 0.85; } /* Кнопка без смены цвета при hover (Показать результаты) */ .btn--primary.btn--solid:hover { background: var(--color-black); color: var(--color-white); opacity: 0.7; } .btn--primary.btn--solid:active { background: var(--color-black); color: var(--color-white); opacity: 0.85; } /* —— Блок «В интернет-магазин» + маркетплейсы —— */ .marketplace-buy { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.625rem; min-height: 3rem; } .marketplace-buy__main { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; max-height: 3.5rem; height: 3rem; min-height: 0; padding: 0 1.75rem; border-radius: var(--radius-pill); font-family: var(--font-family); font-size: 1.25rem; font-weight: 500; line-height: 2.25rem; letter-spacing: -0.0206rem; } .marketplace-buy__ozon, .marketplace-buy__wb { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box; gap: 0; height: 3rem; min-height: 3rem; max-height: 3rem; padding: 0; border-radius: 50%; background: transparent; box-shadow: none; line-height: 1.2; overflow: hidden; white-space: nowrap; transition: background-color var(--transition), opacity var(--transition), box-shadow var(--transition); } .marketplace-buy__ozon-logo, .marketplace-buy__wb-logo { flex-shrink: 0; display: block; height: 3rem; width: auto; object-fit: contain; transition: opacity var(--transition); } .marketplace-buy__ozon-text, .marketplace-buy__wb-text { overflow: hidden; clip: rect(0, 0, 0, 0); position: absolute; width: 0.0625rem; height: 0.0625rem; margin: -1px -0.0625rem; padding: 0; border: 0; white-space: nowrap; font-size: 0.875rem; font-weight: 500; line-height: 1.2; transition: opacity var(--transition); } .marketplace-buy__ozon:hover, .marketplace-buy__ozon:focus-visible { box-shadow: none; opacity: 0.85; } .marketplace-buy__ozon:hover .marketplace-buy__ozon-logo, .marketplace-buy__ozon:focus-visible .marketplace-buy__ozon-logo { opacity: 1; } .marketplace-buy__wb:hover, .marketplace-buy__wb:focus-visible { opacity: 0.88; box-shadow: none; } /* —— Точки слайдера —— */ .slider-dot:hover:not(.is-active) { background: rgba(0, 0, 0, 0.45); } .hero-screen-dots--banner .slider-dot:hover:not(.is-active) { background: rgba(255, 255, 255, 0.85); } .hero--desktop .hero-screen-dots:not(.hero-screen-dots--banner) .slider-dot:hover:not(.is-active), .hero-screen-dots:not(.hero-screen-dots--banner) .slider-dot:hover:not(.is-active) { background: #aeb4bf; } .news-detail__dots .slider-dot:hover:not(.is-active) { background: rgba(255, 255, 255, 0.7); } .news__pagination .slider-dot:hover:not(.is-active), .novinki__pagination .slider-dot:hover:not(.is-active) { background: rgba(0, 0, 0, 0.45); } /* —— Теги / вкладки (обводка → заливка) —— */ .tab-pill, .catalog-pill { transition: background-color var(--transition), color var(--transition), border-color var(--transition), opacity var(--transition); } .tab-pill:hover:not(.is-active), .catalog-pill:hover:not(.is-active) { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); opacity: 1; } .tab-pill.is-active, .catalog-pill.is-active { background: var(--color-black); color: var(--color-white); border-color: var(--color-black); } /* —— Хлебные крошки (серый → чёрный + подчёркивание) —— */ .breadcrumbs a { color: #000; transition: color var(--transition), text-decoration-color var(--transition); } .breadcrumbs a:hover { color: var(--color-text); text-decoration: underline; text-underline-offset: 0.1875rem; } /* —— Соцсети в подвале —— */ .footer__social { transition: opacity var(--transition), transform var(--transition); } .footer__social:hover { opacity: 0.75; } /* —— Текстовые кнопки каталога (фильтры, сортировка) —— */ .catalog-toolbar__btn:hover, .filters-panel__clear:hover { opacity: 1; color: var(--color-text); } .filters-panel__clear:hover { text-decoration: underline; text-underline-offset: 0.1875rem; } /* —— Чекбоксы фильтров (пустой квадрат → синяя заливка) —— */ .filters-checklist__input { flex-shrink: 0; appearance: none; -webkit-appearance: none; width: 1.125rem; height: 1.125rem; margin: 3px 0 0; border: 0.0625rem solid var(--color-black); border-radius: 0.1875rem; background: var(--color-white); cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } .filters-checklist__input:checked { background: var(--color-ozon); border-color: var(--color-ozon); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2.5 6.2L5 8.7L9.5 3.8' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.75rem 0.75rem; } .filters-checklist__label:hover { opacity: 1; } /* —— Аккордеон фильтров: подчёркивание при раскрытии (уже в overlays) —— */ /* —— Ссылки подвала «Интернет-магазин» —— */ .footer__link--accent:hover { color: var(--color-ozon); opacity: 1; } .news__link:hover, .catalog-buy__more:hover { opacity: 1; color: var(--color-text); } /* —— Кнопка «Наверх» —— */ .scroll-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; padding: 0; border: none; border-radius: 50%; background: var(--color-white); color: var(--slider-dot-active); box-shadow: 0 0.25rem 1.5rem rgba(15, 23, 42, 0.12); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(1rem); transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background-color var(--transition), color var(--transition), box-shadow var(--transition); } .scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top:hover { background: var(--color-accent); color: var(--color-white); box-shadow: 0 0.375rem 1.75rem rgba(74, 118, 253, 0.35); } .scroll-top:active { transform: translateY(0) scale(0.96); } .scroll-top__icon { display: block; } @media (max-width: 767px) { .scroll-top { right: 1rem; bottom: 1rem; width: 2.75rem; height: 2.75rem; } } @media (prefers-reduced-motion: reduce) { .scroll-top { transition: opacity 0.2s ease, visibility 0.2s ease; } .scroll-top:active { transform: none; } } .header { top: 0; left: 0; right: 0; z-index: 100; height: var(--header-height); background: transparent; box-shadow: none; transition: background-color 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease; } .header--desktop { position: fixed; } .header.is-scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); box-shadow: 0 0.0625rem 0 var(--color-border); } @media (prefers-reduced-motion: reduce) { .header { transition: none; } } .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: var(--header-height); gap: 1.5rem; } .header__nav { display: flex; align-items: center; gap: 2.25rem; } .header__nav--left { justify-content: flex-start; } .header__nav--right { justify-content: flex-end; } .header__link, .header__nav-trigger { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1rem; letter-spacing: 0.0094rem; text-align: right; text-shadow: none; white-space: nowrap; transition: text-shadow var(--transition), opacity var(--transition); } .header__nav-trigger { background: none; border: none; padding: 0; color: inherit; cursor: pointer; } .header__nav-chevron { width: 0.625rem; height: 0.625rem; flex-shrink: 0; } .header__link:hover, .header__nav-trigger:hover { text-shadow: 0 0 0.0006rem currentColor, 0 0 0.0006rem currentColor; } .header__link[aria-current="page"], .header__nav-trigger[aria-expanded="true"] { text-shadow: 0 0 0.0006rem currentColor, 0 0 0.0006rem currentColor; font-weight: 500; } .header__logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .header__logo-img { display: block; width: 11.1875rem; height: 2.25rem; } .header__actions { display: flex; align-items: center; gap: 2.25rem; justify-content: flex-end; } .header__search { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; color: var(--color-black); padding: 0; } .header__burger { display: none; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; padding: 0; } .header--mobile { position: sticky; background: var(--color-white); } .header--mobile.is-scrolled { box-shadow: 0 0.25rem 1.5rem rgba(15, 23, 42, 0.08); } .header--mobile .header__inner { grid-template-columns: 2.5rem 1fr 2.5rem; } .header--mobile .header__burger { display: flex; justify-self: end; } .header--mobile .header__logo { justify-self: center; } .header--mobile .header__logo-img { width: 8.75rem; height: auto; } .header--mobile .header__search { justify-self: start; } @media (max-width: 767px) { .header--desktop { display: none; } } @media (min-width: 768px) { .header--mobile { display: none; } } @media (min-width: 768px) and (max-width: 1199px) { .header__nav { gap: 1.5rem; } .header__actions { gap: 1.25rem; } .header__link, .header__nav-trigger { font-size: 0.8125rem; } } /* Backdrop */ .overlay-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(1.125rem); -webkit-backdrop-filter: blur(1.125rem); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .overlay-backdrop.is-visible { opacity: 1; visibility: visible; } body.is-locked { overflow: hidden; } /* Desktop nav dropdown */ .nav-dropdown { position: fixed; z-index: 210; top: calc(var(--header-height) + 0.5rem); left: var(--container-padding); width: 20rem; padding: 20px 1.5rem 24px; background: var(--color-white); border-radius: var(--radius-md); box-shadow: 0 0.5rem 2.5rem rgba(0, 0, 0, 0.08); opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); } .nav-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown--about { width: 17.5rem; } .nav-dropdown__head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 4px; padding: 10px 0; } .nav-dropdown__title-wrap { display: flex; align-items: center; gap: 0.5rem; min-height: 1.5625rem; } .nav-dropdown__title { font-size: 0.875rem; font-weight: 500; line-height: 1.5625rem; letter-spacing: 0.0094rem; } .nav-dropdown__chevron { flex-shrink: 0; } /* Accordion */ .accordion__item + .accordion__item { margin-top: 4px; } .accordion__trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 0; font-family: var(--font-family); font-size: 0.875rem; font-weight: 300; line-height: 1.5625rem; letter-spacing: 0.0094rem; text-align: left; color: var(--color-text); transition: opacity var(--transition); } .accordion__trigger:hover { opacity: 0.7; } .accordion__item.is-open .accordion__trigger { font-weight: 500; } .accordion__icon { flex-shrink: 0; } .accordion__panel { display: grid; grid-template-rows: 0fr; min-height: 0; transition: grid-template-rows 0.3s ease; } .accordion__item.is-open > .accordion__panel { grid-template-rows: 1fr; } .accordion__panel-inner { min-height: 0; overflow: hidden; } .accordion__links { padding: 4px 0 12px; } .accordion__link { display: block; padding: 6px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.5625rem; letter-spacing: 0.0094rem; color: var(--color-text); transition: opacity var(--transition); } .accordion__link:hover { opacity: 0.6; } .nav-dropdown--about .accordion__link { padding: 10px 0; } .nav-dropdown__links { display: flex; flex-direction: column; } .mobile-nav__accordion .accordion__panel .accordion { padding-left: 0.25rem; } .mobile-nav__accordion .accordion__panel .accordion__trigger { padding: 10px 0; font-size: 0.875rem; } .mobile-nav__accordion .accordion__panel .accordion__link { padding: 5px 0 5px 0.5rem; } /* Mobile drawer */ .mobile-drawer { position: fixed; z-index: 215; inset: 0; display: flex; flex-direction: column; background: var(--color-white); opacity: 0; visibility: hidden; transform: translateY(-0.75rem); transition: opacity var(--transition), visibility var(--transition), transform var(--transition); } .mobile-drawer.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .mobile-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: 20px var(--container-padding); flex-shrink: 0; } .mobile-drawer__title { font-size: 1.125rem; font-weight: 500; letter-spacing: -0.01em; } .mobile-drawer__body { flex: 1; overflow-y: auto; padding: 0 var(--container-padding) 32px; } .mobile-nav__link { display: block; padding: 14px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.5625rem; letter-spacing: 0.0094rem; } .mobile-nav__accordion .accordion__trigger { padding: 14px 0; } .mobile-nav__accordion > .accordion__item.is-open > .accordion__trigger { font-weight: 500; } /* Search panels */ .search-panel { position: fixed; z-index: 220; background: var(--color-white); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition), transform var(--transition); } .search-panel.is-open { opacity: 1; visibility: visible; } /* Desktop search */ .search-panel--desktop { top: 0; left: 0; right: 0; padding: 0 0 48px; border-radius: 0 0 2rem 2rem; box-shadow: 0 1.25rem 3.75rem rgba(15, 23, 42, 0.1); transform: translateY(-1rem); } .search-panel--desktop.is-open { transform: translateY(0); } .search-panel--desktop .search-panel__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding); padding-top: calc(var(--header-height) + 20px); } .search-panel--desktop .search-bar { display: flex; align-items: flex-end; gap: 2.5rem; padding-bottom: 0; border-bottom: none; margin-bottom: 44px; } .search-panel--desktop .search-bar__field { flex: 1; display: flex; align-items: center; gap: 0.875rem; min-width: 0; padding-bottom: 14px; border-bottom: 0.0625rem solid var(--color-black); } .search-panel--desktop .search-bar__field .icon--search { flex-shrink: 0; width: 1.25rem; height: 1.25rem; opacity: 0.45; } .search-panel--desktop .search-bar__input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--font-family); font-size: 0.875rem; font-weight: 300; line-height: 1.5625rem; letter-spacing: 0.0094rem; color: var(--color-text); background: transparent; } .search-panel--desktop .search-bar__input::placeholder { color: var(--color-text-secondary); } .search-panel--desktop .search-bar__actions { display: flex; align-items: center; gap: 1.75rem; flex-shrink: 0; padding-bottom: 10px; } .search-panel--desktop .search-bar__actions .btn--primary.btn--sm { min-width: 6.75rem; padding: 12px 1.75rem; font-size: 0.875rem; font-weight: 500; } .search-panel--desktop .search-bar__close--text { width: auto; height: auto; padding: 0; font-family: var(--font-family); font-size: 0.875rem; font-weight: 400; line-height: 1.5625rem; letter-spacing: 0.0094rem; color: var(--color-text); background: transparent; border: none; cursor: pointer; transition: opacity var(--transition); } .search-panel--desktop .search-bar__close--text:hover { opacity: 0.55; } .search-panel__content { display: grid; grid-template-columns: minmax(12.5rem, 15.5rem) minmax(0, 1fr); gap: 4.5rem; align-items: start; } .search-panel__heading { margin: 0 0 20px; font-family: var(--font-family); font-size: 1.125rem; font-weight: 600; line-height: 2.1875rem; letter-spacing: -0.0187rem; vertical-align: bottom; color: var(--color-text); } .search-suggest { display: flex; flex-direction: column; gap: 0.125rem; } .search-suggest__item { display: flex; align-items: center; gap: 0.75rem; padding: 8px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.5625rem; letter-spacing: 0.0094rem; color: var(--color-text); transition: opacity var(--transition); } .search-suggest__item:hover { opacity: 0.55; } .search-suggest__item .icon--search { flex-shrink: 0; width: 1rem; height: 1rem; opacity: 0.4; } .search-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; max-width: 56.25rem; } .search-product { display: flex; flex-direction: column; transition: opacity var(--transition); } .search-product:hover { opacity: 0.85; } .search-product__image-wrap { /* display: flex; */ /* align-items: center; */ /* justify-content: center; */ /* aspect-ratio: 1; */ margin-bottom: 16px; border-radius: 1.25rem; background: #e8edf6; overflow: hidden; /* min-height: 42vh; */ } .search-product__image { /* width: 56%; */ /* max-height: 76%; */ /* object-fit: contain; */ } .search-product__name { font-size: 0.875rem; font-weight: 400; line-height: 1.35; letter-spacing: -0.0125rem; color: var(--color-text); } .search-product__name strong { font-weight: 500; } /* Shared search bar (mobile) */ .search-bar { display: flex; align-items: center; gap: 1.5rem; } .search-bar__field { flex: 1; display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .search-bar__input { flex: 1; min-width: 0; border: none; outline: none; font-family: var(--font-family); font-size: 0.875rem; font-weight: 300; line-height: 1.5625rem; letter-spacing: 0.0094rem; color: var(--color-text); background: transparent; } .search-bar__input::placeholder { color: var(--color-text-secondary); } .search-bar__actions { display: flex; align-items: center; gap: 1.25rem; flex-shrink: 0; } /* Mobile search */ .search-panel--mobile { inset: 0; z-index: 232; display: flex; flex-direction: column; transform: translateX(100%); } .search-panel--mobile.is-open { transform: translateX(0); } .search-panel--mobile .search-bar { flex-shrink: 0; align-items: center; gap: 0.625rem; margin: 0; padding: 14px var(--container-padding) 16px; border-bottom: none; } .search-panel--mobile .search-bar__back { display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; flex-shrink: 0; padding: 0; border: none; background: transparent; color: var(--color-text); cursor: pointer; } .search-panel--mobile .search-bar__back .icon--chevron-left { width: 1.5rem; height: 1.5rem; } .search-panel--mobile .search-bar__field { flex: 1; min-width: 0; padding-bottom: 10px; border-bottom: 0.0625rem solid var(--color-border); } .search-panel--mobile .search-bar__actions { flex-shrink: 0; gap: 0; align-self: center; } .search-panel--mobile .search-bar__actions .btn { padding: 11px 1.375rem; border-radius: var(--radius-pill); white-space: nowrap; } .search-panel--mobile .search-bar__close { display: none; } .search-panel--mobile .search-panel__body { flex: 1; overflow-y: auto; padding: 28px var(--container-padding) 32px; } .search-panel--mobile .search-panel__heading { margin: 0 0 16px; font-size: 0.875rem; font-weight: 600; line-height: 1.45; letter-spacing: -0.01em; } .search-panel--mobile .search-suggest { gap: 0; } .search-panel--mobile .search-suggest__item { gap: 0.75rem; padding: 12px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.45; } .search-panel--mobile .search-suggest__item .icon--search { width: 1.125rem; height: 1.125rem; opacity: 0.35; } /* Active nav state */ .header__link--trigger.is-active, .header__nav-trigger.is-active { opacity: 0.6; } @media (min-width: 768px) and (max-width: 1199px) { .nav-dropdown { left: var(--container-padding); } .search-panel__content { grid-template-columns: 12.5rem 1fr; gap: 2.5rem; } .search-products { gap: 1rem; } } @media (max-width: 767px) { .search-panel--desktop, .nav-dropdown { display: none !important; } .overlay-backdrop.is-visible { background: var(--color-white); backdrop-filter: none; -webkit-backdrop-filter: none; } .search-panel--mobile .search-bar { padding-top: max(14px, env(safe-area-inset-top, 0)); } } @media (min-width: 768px) { .search-panel--mobile, .mobile-drawer { display: none !important; } } /* Mobile burger menu — ≤47.9375rem (Menu / New mockups) */ @media (max-width: 767px) { .mobile-drawer { --mobile-drawer-icon-track: 2rem; z-index: 230; transform: none; transition: opacity var(--transition), visibility var(--transition); } .mobile-drawer.is-open { transform: none; } .mobile-drawer__head { align-items: center; padding: 18px var(--container-padding) 20px; padding-top: max(18px, env(safe-area-inset-top, 0)); } .mobile-drawer__title { font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; } .mobile-drawer__close { width: var(--mobile-drawer-icon-track); height: var(--mobile-drawer-icon-track); } .mobile-drawer__close .icon--close { width: var(--mobile-drawer-icon-track); height: var(--mobile-drawer-icon-track); } .mobile-drawer .accordion__trigger { position: relative; padding-right: var(--mobile-drawer-icon-track); } .mobile-drawer .accordion__icon { position: absolute; right: calc((var(--mobile-drawer-icon-track) - 1rem) / 2); top: 50%; transform: translateY(-50%); } .mobile-drawer .accordion__item.is-open > .accordion__trigger > .accordion__icon { transform: translateY(-50%) rotate(180deg); } .mobile-drawer__body { padding: 4px var(--container-padding) max(32px, env(safe-area-inset-bottom, 0)); } .mobile-nav__link { padding: 16px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.45; letter-spacing: 0.0094rem; color: var(--color-text); } /* Top-level accordion (Каталог, О бренде) */ .mobile-nav__accordion > .accordion__item > .accordion__trigger { width: 100%; padding: 16px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.45; letter-spacing: 0.0094rem; color: var(--color-text); background: none; border: none; cursor: pointer; } .mobile-nav__accordion > .accordion__item.is-open > .accordion__trigger { font-weight: 600; } .mobile-nav__accordion > .accordion__item > .accordion__trigger .accordion__icon { width: 1rem; height: 1rem; opacity: 1; } .mobile-nav__accordion .accordion__panel .accordion__trigger .accordion__icon { width: 1rem; height: 1rem; } /* Nested catalog accordion */ .mobile-nav__accordion .accordion__panel .accordion { padding: 0; } .mobile-nav__accordion .accordion__panel .accordion__trigger { width: 100%; padding: 14px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.45; letter-spacing: 0.0094rem; color: var(--color-text); background: none; border: none; cursor: pointer; } .mobile-nav__accordion .accordion__panel .accordion__item.is-open > .accordion__trigger { font-weight: 500; text-decoration: underline; text-underline-offset: 0.25rem; } .mobile-nav__accordion .accordion__panel .accordion__links { padding: 0 0 8px 1rem; } .mobile-nav__accordion .accordion__panel .accordion__link { display: block; padding: 10px 0; font-size: 0.875rem; font-weight: 300; line-height: 1.45; letter-spacing: 0.0094rem; color: var(--color-text); } .mobile-nav__accordion .accordion__panel .accordion__panel .accordion__links { padding-left: 0; } .mobile-nav__accordion .accordion__item + .accordion__item { margin-top: 0; } .mobile-nav__accordion > .accordion__item + .accordion__item { margin-top: 0; } } .hero { position: relative; overflow: hidden; background: var(--color-bg-soft); } /* Homepage hero slider — full viewport, flush to next block */ .page-home .hero.hero--desktop { box-sizing: border-box; height: 100vh; max-height: 100vh; margin-bottom: 0; padding-bottom: 0; min-height: calc(100vh + 56px); } .page-home .hero.hero--mobile { box-sizing: border-box; margin-bottom: 0; padding-bottom: 0; } .page-home .hero .hero__layout, .page-home .hero .hero__slides, .page-home .hero .hero__slide, .page-home .hero .hero__media, .page-home .hero .hero__image-wrap { margin-bottom: 0; padding-bottom: 0; } .page-home .hero.hero--desktop .hero__layout, .page-home .hero.hero--desktop .hero__slides, .page-home .hero.hero--desktop .hero__slide { height: 100%; min-height: 500px; max-height: 100vh; } .page-home .hero.hero--mobile .hero__slides, .page-home .hero.hero--mobile .hero__slide, .page-home .hero.hero--mobile .hero__slide.is-active { height: 100%; max-height: 100vh; } .page-home .hero .hero__pagination { margin-bottom: 0; padding-bottom: 0; } .page-home main { margin-bottom: 0; padding-bottom: 0; } /* Desktop hero */ .hero--desktop { height: var(--hero-height); min-height: 0; max-height: var(--hero-max-height); margin-bottom: 0; } .hero--desktop .hero__layout { position: relative; height: 100%; min-height: 0; max-height: var(--hero-max-height); } .hero--desktop .hero__slide { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; min-height: 0; max-height: var(--hero-max-height); } .hero--desktop .hero__content-wrap { position: relative; z-index: 2; width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-padding) 120px; } .hero--desktop .hero__content { max-width: 45%; } .hero--desktop .hero__title { font-size: 4rem; font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; margin-bottom: 20px; } .hero--desktop .hero__subtitle { font-family: var(--font-family); font-size: 1.6875rem; font-weight: 500; line-height: 2.5rem; letter-spacing: 0; color: var(--color-text-muted); margin-bottom: 36px; max-width: 23.75rem; } .hero--desktop .btn--primary { padding: 16px 2rem; font-family: var(--font-family); font-size: 1.25rem; font-weight: 500; line-height: 2.25rem; letter-spacing: -0.0206rem; } .hero--desktop .hero__slide .hero__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; min-height: 0; max-height: var(--hero-max-height); } .hero--desktop .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: right center; min-height: calc(100vh + 56px); } .hero--desktop .hero__pagination { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; align-items: center; gap: 0.5rem; } .hero--desktop .hero__dot { display: block; width: 0.5rem; height: 0.25rem; border-radius: 0.125rem; background: rgba(255, 255, 255, 0.45); } .hero--desktop .hero__dot--active { width: 2.5rem; background: var(--color-white); } /* Mobile hero */ .hero--mobile { position: relative; height: min(var(--hero-height), calc(100vw * 787 / 375)); max-height: var(--hero-max-height); min-height: 0; } .hero--mobile .hero__slides { height: 100%; min-height: inherit; } .hero--mobile .hero__image-wrap { position: absolute; inset: 0; } .hero--mobile .hero__image { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; } .hero--mobile .hero__overlay { position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px var(--container-padding) 52px; background: none; } .hero--mobile .hero__title { font-weight: 500; letter-spacing: -0.02em; } .hero--mobile .hero__btn { border-radius: var(--radius-pill); } .hero--mobile .hero__pagination--mobile { bottom: 1rem; } @media (max-width: 767px) { .hero--mobile { width: 100%; height: min(var(--hero-max-height), calc(100vw * 787 / 375)); max-height: var(--hero-max-height); min-height: 0; background: var(--color-bg-soft); } .hero--mobile .hero__slides { position: absolute; inset: 0; height: 100%; min-height: 0; } .hero--mobile .hero__slide, .hero--mobile .hero__slide.is-active { position: absolute; inset: 0; height: 100%; min-height: 0; } .hero--mobile .hero__image { object-position: center -2.8125rem; } .hero--mobile .hero__overlay { position: absolute; inset: auto 0 0; min-height: 0; justify-content: flex-end; padding: 0 var(--container-padding) 56px; background: none; } .hero--mobile .hero__title { color: var(--color-black); font-size: 1.625rem; line-height: 1.12; margin-bottom: 8px; } .hero--mobile .hero__subtitle { color: var(--color-black); font-size: 0.875rem; font-weight: 400; line-height: 1.45; margin-bottom: 16px; } .hero--mobile .hero__btn { width: 100%; max-width: none; padding: 16px 1.5rem; } .hero--mobile .hero__pagination--mobile { bottom: 1.375rem; z-index: 4; } } @media (min-width: 768px) and (max-width: 1199px) { .hero--desktop .hero__title { font-size: 3rem; } .hero--desktop .hero__content-wrap { padding-bottom: 100px; } } @media (min-width: 1200px) and (max-width: 1439px) { .hero--desktop .hero__title { font-family: var(--font-family); font-size: 4.6875rem; font-weight: 500; line-height: 4.8125rem; letter-spacing: -0.0625rem; } } /* First-screen banner + white sheet — homepage, catalog, product */ @media (min-width: 768px) { .page-catalog .catalog-hero, .page-product .product-hero.product-hero--banner { box-sizing: border-box; height: 100vh; max-height: 100vh; min-height: calc(100vh + 56px); margin-bottom: 0; padding-bottom: 0; overflow: hidden; } .page-catalog .catalog-hero__media { position: absolute; inset: 0; height: 100%; } .page-catalog .catalog-hero__image, .page-product .product-hero--banner .product-hero__banner:not(.product-hero__banner--product) { width: 100%; height: 100%; object-fit: cover; object-position: right center; min-height: calc(100vh + 56px); } .page-catalog .catalog-hero__content { min-height: calc(100vh + 56px); } .page-product .product-hero--banner .product-hero__bg { position: absolute; inset: 0; height: 100%; min-height: calc(100vh + 56px); } } @media (max-width: 767px) { .page-home, .page-catalog, .page-product { /* Белый блок — строго после 1-го экрана, без наезда в viewport */ --sheet-overlap: 0; --sheet-bg-extend: var(--sheet-radius); } .page-home, .page-product { --first-screen-height: 100dvh; } .page-catalog { --first-screen-height: 77dvh; } /* * 1-й экран: главная — 100dvh, каталог и карточка товара — не более 77dvh. * Фон продлевается на sheet-bg-extend ниже fold — виден в скруглении при скролле. */ .page-home .hero.hero--mobile, .page-catalog .catalog-hero, .page-product .product-hero.product-hero--banner { position: relative; z-index: 1; box-sizing: border-box; height: var(--first-screen-height); min-height: var(--first-screen-height); max-height: var(--first-screen-height); margin-bottom: 0; padding-bottom: 0; overflow: visible; background: var(--color-bg-soft); } .page-catalog .catalog-hero { background: #c5c7e1; } .page-product .product-hero.product-hero--banner { background: #d4d0e8; } /* Слой фона — выступает за нижний край 1-го экрана */ .page-home .hero--mobile .hero__slides, .page-home .hero--mobile .hero__slide, .page-home .hero--mobile .hero__slide.is-active, .page-home .hero--mobile .hero__image-wrap, .page-catalog .catalog-hero__media, .page-catalog .catalog-hero__media picture, .page-product .product-hero__bg, .page-product .product-hero__slide { position: absolute; top: 0; left: 0; right: 0; height: calc(var(--first-screen-height) + var(--sheet-bg-extend)); max-height: none; z-index: 0; } .page-catalog .catalog-hero__media, .page-catalog .catalog-hero__media picture { display: block; width: 100%; } .page-product .product-hero__slide picture { display: block; width: 100%; height: 100%; } .page-home .hero--mobile .hero__image, .page-catalog .catalog-hero__image, .page-product .product-hero__banner { width: 100%; height: 100%; min-height: calc(var(--first-screen-height) + var(--sheet-bg-extend)); object-fit: cover; } .page-home .hero--mobile .hero__image { object-position: center 50%; } .page-catalog .catalog-hero__image { object-position: center 50%; } .page-product .product-hero__banner { object-position: center 20%; } .page-product .product-hero__banner--product { object-fit: contain; object-position: center bottom; background: transparent; } /* Контент — в пределах 1-го экрана */ .page-home .hero--mobile .hero__overlay, .page-catalog .catalog-hero__content, .page-product .product-hero__inner { position: absolute; inset: auto 0 0; z-index: 2; min-height: 0; max-height: var(--first-screen-height); padding-bottom: 56px; } .page-home .hero--mobile .hero__overlay { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; padding: 0 var(--container-padding) 56px; background: none; } .page-catalog .catalog-hero__content { display: flex; align-items: flex-end; padding: 0 var(--container-padding) 56px; } .page-product .product-hero__inner { display: block; padding: 0 var(--container-padding) 56px; } .page-home .hero--mobile .hero__pagination--mobile, .page-product .product-hero__pagination { position: absolute; bottom: 1.25rem; left: 0; right: 0; z-index: 4; margin: 0 auto; transform: none; } /* Белый блок — 2-й экран (margin-top: 0, без наезда в 1-й) */ .page-home .intro-mobile, .page-catalog .catalog-main, .page-product .product-main { position: relative; z-index: 3; margin-top: 0; } .page-home .intro-mobile, .page-catalog .catalog-main__sheet, .page-product .product-main__sheet { border-radius: 30px 30px 0 0; background: var(--color-white); } .page-home .intro-mobile { padding-top: 40px; } .page-catalog .catalog-main__sheet, .page-product .product-main__sheet { padding-top: var(--sheet-padding-top); } .page-catalog .header--mobile { position: absolute; top: 0; left: 0; right: 0; z-index: 20; background: transparent; box-shadow: none; } .page-catalog .header--mobile.is-scrolled { position: sticky; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); box-shadow: 0 0.0625rem 0 var(--color-border); } } /* Fade slider (hero) */ .hero--desktop .hero__slides { position: relative; height: 100%; min-height: 0; max-height: var(--hero-max-height); } .hero--desktop .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; pointer-events: none; } .hero--desktop .hero__slide.is-active { position: relative; opacity: 1; visibility: visible; pointer-events: auto; } .hero--mobile .hero__slides { position: relative; height: 100%; min-height: 0; max-height: var(--hero-max-height); } .hero--mobile .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0.6s ease; pointer-events: none; } .hero--mobile .hero__slide.is-active { opacity: 1; visibility: visible; pointer-events: auto; } /* First-screen fade slider pagination */ .hero-screen-dots { display: flex; align-items: center; justify-content: center; gap: var(--slider-dot-gap); pointer-events: auto; } .hero-screen-dots[hidden] { display: none !important; } .hero-screen-dots .slider-dot { display: block; flex-shrink: 0; width: var(--slider-dot-size); height: var(--slider-dot-size); padding: 0; border: none; border-radius: 50%; background: var(--slider-dot-inactive); cursor: pointer; transition: width var(--transition), background-color var(--transition), border-radius var(--transition); background: rgba(255, 255, 255, 0.3); } .hero-screen-dots .slider-dot.is-active { width: var(--slider-dot-active-width); border-radius: var(--slider-dot-size); background: #ffffff; } .hero--mobile .hero__pagination--mobile { position: absolute; bottom: 1.25rem; left: 0; right: 0; z-index: 4; } .hero--mobile .hero-screen-dots--banner .slider-dot { background: rgba(255, 255, 255, 0.45); } .hero--mobile .hero-screen-dots--banner .slider-dot.is-active { background: var(--color-white); } /* Slider dots (shared) */ .slider-dot { display: block; padding: 0; border: none; cursor: pointer; transition: width var(--transition), background var(--transition), border-radius var(--transition); } .news__pagination .slider-dot, .novinki__pagination .slider-dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: rgba(0, 0, 0, 0.2); } .news__pagination .slider-dot.is-active, .novinki__pagination .slider-dot.is-active { width: 1.75rem; height: 0.25rem; border-radius: 0.125rem; background: var(--Icon, rgba(81, 92, 114, 1)); } [data-slider-dots] { display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* Scroll sliders */ [data-slider-type="scroll"] [data-slider-track] { scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } [data-slider-type="scroll"] [data-slider-track]::-webkit-scrollbar { display: none; } [data-slider-slide] { scroll-snap-align: start; } .novinki__slider, .news__slider { position: relative; } .novinki__pagination, .news__pagination { margin-top: 20px; } @media (max-width: 767px) { .news__pagination .slider-dot.is-active, .novinki__pagination .slider-dot.is-active { width: 1.75rem; height: 8px; border-radius: 50px; background: var(--Icon, rgba(81, 92, 114, 1)); } } @media (min-width: 768px) { .novinki__pagination, .news__pagination { display: none; } } /* Philosophy — белый лист поверх баннера */ .philosophy--desktop { position: relative; z-index: 5; margin-top: var(--sheet-overlap); padding-top: 100px; padding-bottom: 20px; background: var(--color-white); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; } .philosophy__top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 2rem 4rem; align-items: end; margin-bottom: 56px; } .philosophy__top .section-label { display: block; margin-bottom: 12px; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1rem; letter-spacing: 0.125rem; } .philosophy__title-line { display: inline-block; } .philosophy__text { font-family: var(--font-family); font-size: 1.375rem; font-weight: 500; line-height: 2.1875rem; letter-spacing: -0.0187rem; vertical-align: bottom; color: var(--color-text); margin: 0; } .philosophy__categories { --categories-inset: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding))); position: relative; } .philosophy__categories-track { display: flex; gap: 1.25rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-padding-inline: var(--categories-inset) calc(var(--container-padding) + 3.5rem); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-inline: var(--categories-inset) calc(var(--container-padding) + 3.5rem); /* padding-bottom: 4px; */ cursor: grab; touch-action: pan-x; } .philosophy__categories-track.is-dragging { cursor: grabbing; user-select: none; } .philosophy__categories-track.is-dragging .category-card, .philosophy__categories-track.is-dragging .product-card { transform: none; pointer-events: none; } .philosophy__categories-track::-webkit-scrollbar { display: none; } .philosophy__categories-track:focus-visible { outline: 0.125rem solid var(--color-accent); outline-offset: 0.25rem; border-radius: var(--radius-sm); } .philosophy__categories:not(.philosophy__categories--catalog) .category-card { flex: 0 0 18.75rem; width: 18.75rem; min-width: 18.75rem; background-size: cover; -webkit-user-drag: none; } .philosophy__categories--catalog .category-card { background-size: cover; background-position: center; -webkit-user-drag: none; } .category-card--photo { padding: 0; background-color: transparent; background-size: cover; background-position: center; } .category-card--photo::before { display: none; } .category-card--photo .category-card__title { position: absolute; top: 1.25rem; left: 1.25rem; right: 0.75rem; z-index: 2; margin: 0; font-size: 1.375rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; pointer-events: none; } .philosophy__categories-track .product-card { flex: 0 0 18.75rem; width: 18.75rem; min-width: 18.75rem; -webkit-user-drag: none; } .philosophy__categories-track .product-card__body { padding: 0; } .philosophy__carousel-wrap { position: relative; } .philosophy__carousel { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px; } .philosophy__carousel::-webkit-scrollbar { display: none; } .category-card { flex: 0 0 calc(25% - 0.9375rem); min-width: 17.5rem; scroll-snap-align: start; position: relative; display: flex; flex-direction: column; justify-content: flex-start; min-height: 23.75rem; padding: 28px 1.5rem 20px; border-radius: var(--radius-lg); /* background-color: var(--color-bg-category); */ background-repeat: no-repeat; background-position: center bottom; background-size: auto 72%; overflow: hidden; text-decoration: none; color: var(--color-text); transition: opacity var(--transition); isolation: isolate; } .category-card::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background-color: var(--color-bg-category); background-image: repeating-linear-gradient( -45deg, transparent, transparent 0.6875rem, rgba(255, 255, 255, 0.42) 0.6875rem, rgba(255, 255, 255, 0.42) 0.75rem ); pointer-events: none; } .category-card:hover { opacity: 0.88; } .category-card__title { position: relative; z-index: 1; font-size: 1.675rem; font-weight: 500; line-height: 2rem; letter-spacing: -0.0312rem; } .philosophy__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; display: flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; padding: 0; border: none; border-radius: 50%; background: transparent; overflow: visible; cursor: pointer; transition: opacity var(--transition), transform var(--transition); } .philosophy__nav--prev { left: 0; transform: translate(-50%, -50%); } .philosophy__nav--next { right: 0; transform: translate(50%, -50%); } .philosophy__nav--prev:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.04); opacity: 0.85; } .philosophy__nav--next:hover:not(:disabled) { transform: translate(50%, -50%) scale(1.04); opacity: 0.85; } .philosophy__nav:disabled { opacity: 0.35; cursor: default; pointer-events: none; } /* Новинки — горизонтальная лента со скроллом */ .philosophy__categories--novinki { --categories-inset: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding))); --novinki-nav-size: 2.25rem; margin-top: 0; overflow: visible; padding-left: var(--categories-inset); padding-right: var(--categories-inset); } .philosophy__categories--novinki .philosophy__categories-track { gap: 1.25rem; padding-inline: 0; scroll-padding-inline: 0; scroll-snap-type: x mandatory; } .philosophy__categories--novinki .philosophy__categories-track .product-card { flex: 0 0 19.75rem; width: 19.75rem; min-width: 19.75rem; scroll-snap-align: start; } .philosophy__categories--novinki .product-card__media { aspect-ratio: 316 / 400; } .philosophy__categories--novinki .philosophy__nav--prev { left: var(--categories-inset); transform: translate(-50%, -50%); } .philosophy__categories--novinki .philosophy__nav--next { right: var(--categories-inset); transform: translate(50%, -50%); } .philosophy__categories--novinki .philosophy__nav--prev:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); } .philosophy__categories--novinki .philosophy__nav--next:hover:not(:disabled) { transform: translate(50%, -50%) scale(1.05); } .philosophy__categories--novinki .philosophy__nav--prev:disabled { opacity: 0; visibility: hidden; pointer-events: none; } /* Каталог на главной — на ширину контейнера, 4 карточки как в макете */ .philosophy__categories--catalog { --categories-inset: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding))); --catalog-nav-size: 2.25rem; margin-top: 0; overflow: visible; padding-left: var(--categories-inset); padding-right: var(--categories-inset); } .philosophy__categories--catalog .philosophy__categories-track { gap: 1.25rem; padding-inline: 0; scroll-padding-inline: 0; } .philosophy__categories--catalog .category-card--photo { aspect-ratio: 316 / 400; min-height: 0; padding: 0; border-radius: var(--radius-lg); } .philosophy__categories--catalog .philosophy__nav--prev { left: var(--categories-inset); transform: translate(-50%, -50%); } .philosophy__categories--catalog .philosophy__nav--next { right: var(--categories-inset); transform: translate(50%, -50%); } .philosophy__categories--catalog .philosophy__nav--prev:hover:not(:disabled) { transform: translate(-50%, -50%) scale(1.05); } .philosophy__categories--catalog .philosophy__nav--next:hover:not(:disabled) { transform: translate(50%, -50%) scale(1.05); } .philosophy__categories--catalog .philosophy__nav--prev:disabled { opacity: 0; visibility: hidden; pointer-events: none; } @media (min-width: 1200px) { .philosophy__categories--catalog .category-card { flex: 0 0 calc((100% - 3.75rem) / 4); width: calc((100% - 3.75rem) / 4); min-width: calc((100% - 3.75rem) / 4); font-family: var(--font-family); font-size: 1.875rem; font-weight: 500; line-height: 2rem; letter-spacing: -0.0312rem; } .philosophy__categories--catalog .category-card--photo .category-card__title { top: 1.5rem; left: 1.5rem; font-size: 1.875rem; line-height: 2rem; letter-spacing: -0.0312rem; } .philosophy__categories--novinki .product-card__image { width: auto; } } @media (min-width: 768px) and (max-width: 1199px) { .philosophy__categories--catalog .category-card { flex: 0 0 calc((100% - 1.25rem) / 2); width: calc((100% - 1.25rem) / 2); min-width: calc((100% - 1.25rem) / 2); } .philosophy__categories--novinki .philosophy__categories-track .product-card { flex: 0 0 17.5rem; width: 17.5rem; min-width: 17.5rem; } } .philosophy__nav-icon { display: block; width: 3.25rem; height: 3.25rem; pointer-events: none; } /* Ozon banner */ .ozon--desktop { padding-top: 0; padding-bottom: 0; } .ozon--mobile { padding-top: var(--section-gap); padding-bottom: 0; } .ozon__banner { position: relative; border-radius: var(--radius-xl); overflow: hidden; } .ozon__banner-img { display: block; width: 100%; height: auto; aspect-ratio: 3967 / 1500; object-fit: cover; object-position: center; } .ozon--desktop .ozon__banner { min-height: 497px; } .ozon--desktop .ozon__banner-img { min-height: 497px; } .ozon__banner-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(32px, 5vw, 56px); max-width: min(60%, 37.5rem); } .ozon__banner-title { font-family: var(--font-family); font-size: 3.125rem; font-weight: 500; line-height: 3.5rem; letter-spacing: 0; color: var(--color-white); margin-bottom: 8px; } .ozon__banner-content .btn--primary { background: rgba(0, 0, 0, 0.8); opacity: 1; font-family: var(--font-family); font-size: 20px; font-weight: 500; line-height: 36px; letter-spacing: -0.33px; border-radius: 100px; padding: 10px 25px; } .ozon__banner-content .btn--primary:hover { background: rgba(0, 0, 0, 0.8); opacity: 0.7; } .ozon__banner-sub { font-family: var(--font-family); font-size: 27px; font-weight: 500; line-height: 36px; letter-spacing: -0.3px; color: rgba(255, 255, 255, 0.92); margin-bottom: 28px; } .ozon--mobile .ozon__card { position: relative; min-height: 12.5rem; border-radius: var(--radius-lg); overflow: hidden; } .ozon--mobile .ozon__card--banner { position: relative; display: block; min-height: 12.5rem; aspect-ratio: 3967 / 2871; background: var(--color-ozon); overflow: hidden; } .ozon__card-img { position: absolute; right: 0; bottom: 0; z-index: 0; display: block; width: 58%; height: auto; max-height: 100%; object-fit: contain; object-position: right bottom; pointer-events: none; } .ozon--mobile .ozon__card--banner .ozon__card-img { width: 100%; height: 100%; object-fit: cover; object-position: right bottom; } .ozon__card-content { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; padding: 20px 1.25rem; max-width: 62%; } .ozon--mobile .ozon__card-title { font-size: 1.25rem; font-weight: 500; color: var(--color-white); line-height: 1.2; margin-bottom: 4px; } .ozon--mobile .ozon__card-sub { font-size: 0.8125rem; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.92); margin-bottom: 0; } .ozon--mobile .ozon__btn--below { width: 100%; justify-content: center; padding: 16px 1rem; font-weight: 500; border-radius: var(--radius-pill); background: rgba(0, 0, 0, 0.8); opacity: 1; } .ozon--mobile .ozon__btn--below:hover { background: rgba(0, 0, 0, 0.8); opacity: 0.7; } /* Novinki */ .novinki__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; } .novinki__link { font-family: var(--font-family); font-size: 1.5625rem; font-weight: 500; line-height: 2.25rem; letter-spacing: -0.0187rem; color: var(--color-text); text-decoration: underline; text-decoration-style: solid; text-underline-offset: 20%; text-decoration-thickness: 2.5%; white-space: nowrap; transition: opacity var(--transition); } .novinki__link:hover { opacity: 0.6; } .novinki .product-card__media { position: relative; } .novinki .catalog-product__badge { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; padding: 4px 0.625rem; border-radius: var(--radius-pill); font-family: var(--font-family); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 1px; text-align: center; text-transform: uppercase; color: var(--color-white); } .novinki .catalog-product__badge--hit { background: var(--color-accent); } .novinki .catalog-product__badge--new { background: var(--color-wb-brand); } .product-card { display: flex; flex-direction: column; gap: 1rem; min-width: 0; } .product-card__media { display: flex; align-items: flex-end; justify-content: center; aspect-ratio: 316 / 400; border-radius: var(--radius-lg); background: var(--color-bg-card); overflow: hidden; text-decoration: none; transition: transform var(--transition), opacity var(--transition); } .product-card__media--banner { align-items: stretch; justify-content: stretch; } .product-card__media:hover { transform: translateY(-0.125rem); } .product-card__image { object-fit: contain; object-position: center bottom; } .product-card__image--banner { width: 100%; height: 100%; object-fit: cover; object-position: 18% center; } .product-card__image--banner-offset { object-position: 32% center; } .product-card__body { display: flex; flex-direction: column; gap: 0.25rem; padding: 0 0.25rem; } .product-card__name { display: block; font-family: var(--font-family); font-size: 1.375rem; font-weight: 500; line-height: 2.1875rem; letter-spacing: -0.025rem; color: var(--color-text); text-decoration: none; transition: opacity var(--transition); } .product-card__name:hover { opacity: 0.7; } .product-card__variant { font-family: var(--font-family); font-size: 1.125rem; font-weight: 500; line-height: 1.875rem; letter-spacing: -0.0206rem; color: var(--color-text); } /* News */ .news__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 32px; } .news__title { margin: 0; font-family: var(--font-family); font-size: 3.125rem; font-weight: 500; line-height: 3.5rem; letter-spacing: 0; color: var(--color-text); } .news__link { font-family: var(--font-family); font-size: 1.5625rem; font-weight: 500; line-height: 2.25rem; letter-spacing: -0.0187rem; color: var(--color-text); text-decoration: underline; text-decoration-style: solid; text-underline-offset: 20%; text-decoration-thickness: 2.5%; white-space: nowrap; transition: opacity var(--transition); } .news__link:hover { opacity: 0.6; } .news__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .news-card { display: flex; flex-direction: column; padding: 32px 1.75rem 28px; border-radius: var(--radius-lg); background: var(--color-bg-news); min-height: 15rem; } .news-card__date { display: block; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1rem; letter-spacing: 0; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; } .news-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; max-width: 100%; text-overflow: ellipsis; margin-bottom: 14px; font-family: var(--font-family); font-size: 1.375rem; font-weight: 500; line-height: 2rem; letter-spacing: -0.0206rem; color: var(--color-text); text-decoration: none; cursor: pointer; transition: opacity var(--transition); } .news-card__title:hover { opacity: 0.7; } .news-card__title:focus-visible { outline: 0.125rem solid var(--color-accent); outline-offset: 0.25rem; border-radius: 0.125rem; } .news-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; max-width: 100%; text-overflow: ellipsis; margin: 0; font-family: var(--font-family); font-size: 1.25rem; font-weight: 500; line-height: 1.75rem; letter-spacing: -0.0206rem; color: var(--color-text-muted); } .news__pagination { display: none; } /* Production */ .production__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 3rem 4rem; align-items: start; } .production__content { display: flex; flex-direction: column; align-items: flex-start; } .production__content .section-label { margin-bottom: 12px; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1rem; letter-spacing: 0.125rem; text-align: center; text-transform: uppercase; } .production__text { font-family: var(--font-family); font-size: 1.375rem; font-weight: 500; line-height: 2.1875rem; letter-spacing: -0.0187rem; vertical-align: bottom; color: var(--color-text); margin: 0; max-width: 32rem; } .production__btn { margin-top: 48px; font-family: var(--font-family); font-size: 1.25rem; font-weight: 500; line-height: 2.25rem; letter-spacing: -0.0206rem; } .production { padding-bottom: var(--section-gap); } .production__image-wrap { align-self: start; } .production__image { width: 100%; border-radius: var(--radius-lg); aspect-ratio: 760 / 512; object-fit: cover; } .production__btn-mobile { margin-top: 24px; display: inline-flex; } @media (max-width: 767px) { .intro-mobile { margin-top: 0; } } .intro-mobile { position: relative; z-index: 3; margin-top: var(--sheet-overlap); padding: var(--sheet-padding-top) var(--container-padding) 0; background: var(--color-white); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; } .intro-mobile .section-label { margin-bottom: 12px; } .intro-mobile .section-heading--philosophy { font-size: 1.5rem; margin-bottom: 16px; } .intro-mobile .philosophy__text { font-size: 0.875rem; line-height: 1.55; color: var(--color-text-muted); } .intro-mobile .philosophy__text--second { margin-top: 12px; } .intro-mobile { padding-bottom: 28px; } .philosophy__carousel-section--mobile { padding-top: 0; background: var(--color-white); } .ozon__mobile-wrap { display: flex; flex-direction: column; gap: 0.75rem; } @media (max-width: 767px) { .philosophy--desktop { display: none; } .ozon--desktop { display: none; } .intro-mobile { padding-top: 40px; } .intro-mobile .section-heading--philosophy { font-size: 1.375rem; font-weight: 500; line-height: 1.28; } .philosophy__carousel-section--mobile .philosophy__categories { margin-inline: 0; } .ozon--mobile { padding-top: 32px; } .ozon--mobile .ozon__card--banner { border-radius: 1.5rem; } .ozon--mobile .ozon__card-content { padding: 22px 1.25rem; max-width: 100%; } .ozon--mobile .ozon__card-title { margin-bottom: 8px; font-family: var(--font-family); font-size: 1.5625rem; font-weight: 500; line-height: 2.0625rem; letter-spacing: -0.03125rem; } .ozon--mobile .ozon__card-sub { font-family: var(--font-family); font-size: 0.9375rem; font-weight: 500; line-height: 1.5rem; letter-spacing: -0.0206rem; vertical-align: bottom; } .ozon--mobile .ozon__btn--below { padding: 16px 1rem; font-family: var(--font-family); font-size: 1.375rem; font-weight: 500; line-height: 2.25rem; letter-spacing: -0.0206rem; background: #000; opacity: 1; } .novinki { padding-top: 40px; padding-left: var(--container-padding); padding-right: 0; } .novinki > .container { max-width: none; margin: 0; padding-inline: 0; } .novinki__link.mobile-only { display: none; } .novinki__header, .news__header { margin-bottom: 20px; } .novinki .section-heading { font-size: 1.5625rem; line-height: 2.0625rem; } .novinki .philosophy__categories { margin-inline: 0; } .philosophy__categories-track { display: flex; gap: 1.25rem; overflow-x: auto; overflow-y: hidden; scroll-behavior: smooth; scroll-padding-inline: var(--categories-inset) calc(var(--container-padding) + 3.5rem); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; padding-inline: var(--categories-inset) calc(var(--container-padding) + 3.5rem); /* padding-bottom: 4px; */ cursor: grab; touch-action: pan-x; } .novinki .philosophy__categories-track { padding-inline: 0; } .philosophy__categories-track .product-card { flex: 0 0 min(18.75rem, 78vw); width: min(18.75rem, 78vw); min-width: min(18.75rem, 78vw); } .philosophy__categories-track .product-card__media { border-radius: 1.25rem; background: var(--color-bg-card); } .philosophy__categories-track .product-card__body { padding: 0 0.125rem; } .product-related .philosophy__categories-track .product-card, .novinki .philosophy__categories-track .product-card { flex: 0 0 min(17.5rem, 82vw); width: min(17.5rem, 82vw); min-width: min(17.5rem, 82vw); gap: 0.75rem; } .product-related .product-card__media, .novinki .product-card__media { /* aspect-ratio: 280 / 300; */ border-radius: 1.25rem; background: none; } .product-related .product-card__name, .novinki .product-card__name { display: inline; font-family: var(--font-family); font-size: 20px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; } .product-related .product-card__variant, .novinki .product-card__variant { display: inline; font-family: var(--font-family); font-size: 14px; font-weight: 500; line-height: 30px; letter-spacing: -0.33px; vertical-align: middle; } .product-related .product-card__variant::before, .novinki .product-card__variant::before { content: " "; } .product-related .product-card__body, .novinki .product-card__body { padding: 0 0.125rem; gap: 0; } .news { padding-top: 0; padding-left: var(--container-padding); padding-right: 0; overflow: hidden; } .news > .container { max-width: none; margin: 0; padding-inline: 0; } .news__link { font-family: var(--font-family); font-size: 1rem; font-weight: 500; line-height: 2.0625rem; letter-spacing: 0; color: var(--color-text); text-decoration: none; margin-right: 15px; } .news__title { font-family: var(--font-family); font-size: 1.5625rem; font-weight: 500; line-height: 2.0625rem; letter-spacing: 0; } .news__slider { margin-inline: 0; margin-right: calc(-1 * var(--container-padding)); } .news__slider-frame { position: relative; } .news__grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.75rem; scrollbar-width: none; padding: 0 var(--container-padding) 0 0; margin: 0; } .news__grid::-webkit-scrollbar { display: none; } .news-card { flex: 0 0 min(93vw, 100vw); min-width: min(93vw, 100vw); scroll-snap-align: start; min-height: 0; padding: 35px 20px 56px; border-radius: 1.25rem; } .news-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-family: var(--font-family); font-size: 24px; font-weight: 500; line-height: 32px; letter-spacing: -0.4px; vertical-align: bottom; } .news-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-family: var(--font-family); font-size: 0.9375rem; font-weight: 500; line-height: 1.5625rem; letter-spacing: -0.0206rem; color: rgba(106, 123, 149, 1); } .news__pagination { position: absolute; bottom: 20px; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: min(93vw, 93vw); gap: 0.5rem; margin-top: 0; } .news__pagination .slider-dot { background: rgba(0, 0, 0, 0.2); } .production--desktop { display: none; } .production--mobile { padding-top: 40px; padding-bottom: 0; } .production--mobile picture { display: block; } .production--mobile .section-label { margin-bottom: 10px; font-family: var(--font-family); font-size: 0.625rem; font-weight: 500; line-height: 1rem; letter-spacing: 0.125rem; } .production--mobile .section-heading { margin-bottom: 14px; font-size: 1.5625rem; line-height: 2.0625rem; } .production--mobile .production__text { font-size: 0.9375rem; font-weight: 500; line-height: 1.55; margin-bottom: 20px; } .production--mobile .production__image { display: block; border-radius: 1.25rem; aspect-ratio: auto; } .production--mobile .production__btn-mobile { width: 100%; justify-content: center; margin-top: 12px; padding: 0 1rem; border-radius: var(--radius-pill); max-height: 3.5rem; box-sizing: border-box; } /* Stats — About & Production mobile */ .page-about .about__stats, .page-production .production__stats { display: flex; flex-direction: column; gap: 24px; margin-top: 28px; } .page-about .about__stat, .page-production .production__stat { display: flex; flex-direction: row; align-items: flex-start; gap: 16px; } .page-about .about__stat-value, .page-production .production__stat-value { flex-shrink: 0; margin: 0; min-width: 3.75rem; font-family: var(--font-family); font-size: 50px; font-weight: 500; line-height: 55px; letter-spacing: 0; color: var(--color-ozon-brand); } .page-about .about__stat-text, .page-production .production__stat-text { flex: 1; margin: 0; padding-top: 6px; font-family: var(--font-family); font-size: 15px; font-weight: 400; line-height: 24px; letter-spacing: -0.3px; color: var(--color-text); } .category-card { flex: 0 0 min(18.75rem, 78vw); min-width: min(18.75rem, 78vw); min-height: 17.5rem; border-radius: 1.25rem; padding: 22px 1.25rem 16px; background-size: 68% auto; } .philosophy__categories .category-card { flex: 0 0 min(18.75rem, 78vw); width: min(18.75rem, 78vw); min-width: min(18.75rem, 78vw); } .philosophy__categories { --categories-inset: var(--container-padding); } .category-card__title { font-size: 1.375rem; line-height: 1.625rem; letter-spacing: -0.0187rem; } } @media (min-width: 768px) { .intro-mobile, .ozon--mobile, .production--mobile, .philosophy__carousel-section--mobile { display: none; } .novinki__header { margin-bottom: 32px; } .news__header { margin-bottom: 48px; } .novinki { padding-top: 78px; } .philosophy__categories--catalog .philosophy__categories-track { gap: 1.25rem; } .philosophy__categories--catalog .category-card:not(.category-card--photo) { min-height: 22.5rem; padding: 24px 1.375rem 16px; } .philosophy__categories--catalog .category-card:not(.category-card--photo) .category-card__title { font-size: 1.5rem; line-height: 1.25; letter-spacing: -0.02em; } } @media (min-width: 768px) and (max-width: 1199px) { .ozon__banner-title { font-size: 2rem; } .philosophy__top { grid-template-columns: 1fr; gap: 1.5rem; } .section-heading--philosophy { font-size: 2.25rem; line-height: 2.625rem; } .category-card { flex: 0 0 calc(50% - 0.625rem); min-width: 13.75rem; } .philosophy__categories:not(.philosophy__categories--catalog) .category-card { flex: 0 0 17.5rem; width: 17.5rem; min-width: 17.5rem; } .philosophy__categories:not(.philosophy__categories--novinki) .philosophy__categories-track .product-card { flex: 0 0 17.5rem; width: 17.5rem; min-width: 17.5rem; } .category-card__title { font-size: 1.625rem; line-height: 1.75rem; } .news__grid { grid-template-columns: repeat(2, 1fr); } .news__grid .news-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 0.5rem); } .production__grid { grid-template-columns: 1fr; } .production__image-wrap { order: -1; } } @media (min-width: 1200px) { .philosophy__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 2rem 5rem; } .philosophy__title-line { white-space: nowrap; font-family: var(--font-family); font-size: 3.125rem; font-weight: 500; line-height: 3.625rem; letter-spacing: 0; } .category-card { flex: 0 0 calc(25% - 0.9375rem); } .philosophy__categories--catalog .category-card:not(.category-card--photo) { min-height: 23.75rem; padding: 28px 1.5rem 20px; } .philosophy__categories--catalog .category-card:not(.category-card--photo) .category-card__title { font-size: 1.875rem; line-height: 2rem; letter-spacing: -0.0312rem; } } /* Homepage mobile — typography & sections (banner/sheet in banner-sheet.css) */ @media (max-width: 767px) { .page-home .header--mobile { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: transparent; box-shadow: none; } .page-home .header--mobile.is-scrolled { background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(0.625rem); -webkit-backdrop-filter: blur(0.625rem); box-shadow: 0 0.0625rem 0 var(--color-border); } .page-home .hero--mobile .hero__title { margin-bottom: 6px; font-family: var(--font-family); font-size: 1.875rem; font-weight: 500; line-height: 2.1875rem; letter-spacing: -0.0625rem; text-align: left; } .page-home .hero--mobile .hero__subtitle, .page-home .hero--mobile .hero__subtitle--tagline { margin-bottom: 12px; width: 100%; text-align: left; font-family: var(--font-family); font-size: 1.25rem; font-weight: 500; line-height: 1.6875rem; letter-spacing: -0.0206rem; } .page-home .hero--mobile .hero__btn { padding: 14px 1.25rem; } .page-home .hero--mobile .hero-screen-dots--banner { gap: 0.5rem; } .page-home .hero--mobile .hero-screen-dots--banner .slider-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: rgba(255, 255, 255, 0.45); } .page-home .hero--mobile .hero-screen-dots--banner .slider-dot.is-active { width: 2rem; height: 0.5rem; border-radius: var(--radius-pill); background: var(--color-white); } .page-home .intro-mobile { margin-bottom: 0; padding-bottom: 16px; } .page-home .intro-mobile .section-label { margin-bottom: 12px; font-family: var(--font-family); font-size: 0.625rem; font-weight: 500; line-height: 1rem; letter-spacing: 0.125rem; } .page-home .philosophy__carousel-section--mobile { overflow: hidden; padding-top: 0; } .page-home .intro-mobile .section-heading--philosophy { font-size: 1.375rem; font-weight: 500 !important; line-height: 1.75rem; letter-spacing: 0; margin-bottom: 12px; } .page-home .intro-mobile .philosophy__text { font-family: var(--font-family); font-size: 0.9375rem; font-weight: 500; line-height: 1.5rem; letter-spacing: -0.0206rem; vertical-align: bottom; color: var(--color-text); margin-bottom: 0; } .page-home .intro-mobile .philosophy__text--second { display: none; } .page-home .philosophy__carousel-section--mobile .philosophy__categories-track .category-card { flex: 0 0 300px; width: 300px; min-width: 300px; min-height: 0; aspect-ratio: 316 / 400; height: auto; border-radius: 20px; } .page-home .philosophy__carousel-section--mobile .category-card--photo { background-size: cover; background-position: center; padding: 0; } .page-home .philosophy__carousel-section--mobile .category-card--photo::before { display: none; } .page-home .philosophy__carousel-section--mobile .category-card--photo .category-card__title { top: 22px; left: 20px; font-family: var(--font-family); font-size: 1.375rem; font-weight: 500; line-height: 2rem; letter-spacing: -0.03125rem; } .page-home .philosophy__carousel-section--mobile .category-card:not(.category-card--photo) { background-position: center bottom; background-color: var(--color-bg-category); background-size: auto 72%; padding: 22px 20px 16px; } .page-home .novinki .section-heading { font-size: 1.5625rem; line-height: 2.0625rem; } .page-home .novinki__header { margin-bottom: 20px; } .page-home .news-card__date { font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1rem; letter-spacing: 0; text-transform: uppercase; color: var(--color-accent); margin-bottom: 14px; } .page-home .news__header { margin-bottom: 20px; } .page-home .news-card__excerpt { -webkit-line-clamp: 2; line-clamp: 2; } .page-home .production--mobile .production__text { font-size: 0.9375rem; font-weight: 500; line-height: 1.55; color: var(--color-text); } .page-home .production--mobile { padding-bottom: 40px; } } /* Homepage — desktop (Homepage (2).pdf) */ @media (min-width: 768px) { .page-home .hero--desktop .hero__title { line-height: 1.05; letter-spacing: -0.03em; } .page-home .hero--desktop .hero__subtitle { max-width: 24rem; margin-bottom: 32px; } .page-home .philosophy--desktop .section-heading--philosophy { font-size: 3.125rem; line-height: 3.625rem; letter-spacing: 0; } .page-home .news .news-card__excerpt { font-family: var(--font-family); font-size: 20px; font-weight: 500; line-height: 28px; letter-spacing: -0.33px; color: rgba(106, 123, 149, 1); } .page-home .news .news-card__title, .page-home .news .news-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .page-home .production--desktop .production__text { max-width: 34rem; font-size: 1.375rem; font-weight: 500; line-height: 2.1875rem; letter-spacing: -0.0187rem; } } @media (min-width: 1200px) { .page-home .philosophy--desktop .philosophy__top { margin-bottom: 48px; } .page-home .ozon--desktop { padding-top: 0; /* padding-bottom: var(--section-gap); */ } } .footer { padding: 64px 0 40px; background: var(--color-white); border-top: 0.0625rem solid var(--color-border); } .footer__contacts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3rem; padding-bottom: 48px; margin-bottom: 48px; border-bottom: 0.0625rem solid var(--color-border); } .footer__contact-item--email { grid-column: 3; } @media (min-width: 1200px) { .footer__contact-item:first-child { grid-column: 1 / span 2; } } .footer__contact-label { display: block; margin-bottom: 12px; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1.5rem; letter-spacing: 0; color: var(--color-text-secondary); } .footer__phone, .footer__email { display: inline-block; font-family: var(--font-family); font-size: 2rem; font-weight: 600; line-height: 2.5rem; letter-spacing: 0; color: var(--color-text); transition: opacity var(--transition); } .footer__phone:hover, .footer__email:hover { opacity: 0.7; } .footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 3rem; row-gap: 2rem; padding-bottom: 48px; margin-bottom: 32px; border-bottom: 0.0625rem solid var(--color-border); } .footer__col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; } .footer__col-title { width: 100%; margin: 0 0 16px; padding: 0; font-family: var(--font-family); font-size: 1.125rem; font-weight: 600; line-height: 1.6875rem; letter-spacing: 0; text-align: left; color: var(--color-text); } .footer__link { display: block; width: 100%; margin: 0; padding: 0; font-family: var(--font-family); font-size: 0.875rem; font-weight: 500; line-height: 1.75; letter-spacing: 0.0094rem; text-align: left; color: var(--color-text); transition: opacity var(--transition); } .footer__link + .footer__link { margin-top: 4px; } .footer__link--accent { color: var(--color-ozon-brand); } .footer__link:hover { opacity: 0.6; } .footer__link--accent:hover { color: var(--color-ozon-brand); opacity: 0.85; } .footer__socials { display: flex; gap: 0.5rem; margin: 0 0 20px; padding: 0; } .footer__social { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; background: transparent; transition: opacity var(--transition), transform var(--transition); } .footer__social:hover { opacity: 0.75; transform: translateY(-0.0625rem); } .footer__social img { display: block; width: 2.5rem; height: 2.5rem; } .footer__company { width: 100%; margin: 0; padding: 0; font-size: 0.75rem; font-weight: 300; line-height: 1.65; letter-spacing: 0.0094rem; text-align: left; color: var(--color-text-secondary); } .footer__bottom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 1.5rem; align-items: start; } .footer__copyright, .footer__legal-link { margin: 0; padding: 0; font-family: var(--font-family); font-size: 0.75rem; font-weight: 500; line-height: 1.5rem; letter-spacing: 0; color: var(--color-text-secondary); } .footer__legal-link { transition: color var(--transition); } .footer__legal-link:hover { color: var(--color-text); } @media (max-width: 1199px) { .footer__contacts { grid-template-columns: 1fr 1fr; } .footer__contact-item--email { grid-column: auto; } .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 2.5rem; } .footer__bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 0.75rem; } .footer__copyright { grid-column: 1 / -1; } } @media (min-width: 768px) { .footer__masthead, .footer__ask { display: none; } } @media (max-width: 767px) { .footer { padding: 32px 0 36px; border-top: 0.0625rem solid var(--color-border); } .footer__masthead { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 24px; } .footer__masthead-logo { display: block; flex-shrink: 0; } .footer__masthead-logo img { display: block; width: 8.75rem; height: auto; } .footer__masthead .footer__socials { margin: 0; } .footer__contacts.desktop-only, .footer__grid.desktop-only { display: grid !important; } .footer__mobile-nav, .footer__info { display: none !important; } .footer__contacts { grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; padding-bottom: 20px; margin-bottom: 0; border-bottom: none; } .footer__contact-item--email { grid-column: auto; } .footer__phone, .footer__email { font-family: var(--font-family); font-size: 1.125rem; font-weight: 600; line-height: 2.5rem; letter-spacing: 0; vertical-align: middle; } .footer__contact-label { margin-bottom: 8px; font-size: 0.75rem; font-weight: 300; line-height: 1.45; color: var(--color-text-secondary); } .footer__contacts .footer__contact-label.desktop-only { display: block !important; } .footer__ask { display: none; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 0.0625rem solid var(--color-border); } .page-about .footer__ask, .page-production .footer__ask, .page-news .footer__ask, .page-news-detail .footer__ask { display: block; } .footer__ask-btn { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 1.75rem; font-weight: 500; border-radius: var(--radius-pill); } .footer__grid { grid-template-columns: 1fr 1fr; gap: 1.5rem 1.25rem; padding-bottom: 28px; margin-bottom: 24px; } .footer__col:last-child { grid-column: 1 / -1; } .footer__col--social .footer__col-title, .footer__col--social > .footer__socials { display: none; } .footer__col--social .footer__company { margin-top: 0; font-family: var(--font-family); font-size: 0.75rem; font-weight: 500; line-height: 1.25rem; letter-spacing: 0; vertical-align: middle; color: var(--color-text); } .footer__col-title { margin-bottom: 12px; font-family: var(--font-family); font-size: 1.125rem; font-weight: 600; line-height: 1.6875rem; letter-spacing: 0; } .footer__company { font-size: 0.75rem; line-height: 1.65; color: var(--color-text-secondary); } .footer__mobile-nav { display: flex; flex-direction: column; align-items: flex-start; padding-bottom: 28px; margin-bottom: 28px; border-bottom: 0.0625rem solid var(--color-border); } .footer__mobile-title { margin: 0 0 20px; font-size: 1.125rem; font-weight: 500; line-height: 1.35; color: var(--color-text); } .footer__mobile-nav .footer__link { font-size: 0.875rem; font-weight: 300; line-height: 1.75; } .footer__mobile-nav .footer__link + .footer__link { margin-top: 4px; } .footer__info { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; } .footer__info p { margin: 0; font-size: 0.875rem; font-weight: 300; line-height: 1.65; letter-spacing: 0.0094rem; color: var(--color-text); } .footer__info p + p { margin-top: 0; } .footer__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .footer__bottom .footer__copyright { margin-bottom: 4px; } .footer__bottom .footer__legal-link { display: block; font-family: var(--font-family); font-size: 0.625rem; font-weight: 500; line-height: 0.75rem; letter-spacing: 0; } } @media (min-width: 768px) and (max-width: 1199px) { .footer__phone, .footer__email { font-size: 2rem; } } .cookie-banner { position: fixed; right: 0; bottom: 0; left: 0; z-index: 1200; padding: 16px 0; background: var(--color-white); border-top: 0.0625rem solid var(--color-border); box-shadow: 0 -0.5rem 2rem rgba(0, 0, 0, 0.08); opacity: 0; transform: translateY(100%); transition: opacity var(--transition), transform var(--transition); pointer-events: none; } .cookie-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .cookie-banner__inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .cookie-banner__text { margin: 0; max-width: 52rem; font-size: 0.875rem; line-height: 1.5; color: var(--color-text-muted); } .cookie-banner__link { color: var(--color-accent); text-decoration: underline; text-underline-offset: 0.1875rem; } .cookie-banner__accept { flex-shrink: 0; } body.has-cookie-banner { padding-bottom: var(--cookie-banner-offset, 0); } @media (max-width: 767px) { .cookie-banner__inner { flex-direction: column; align-items: stretch; gap: 1rem; } .cookie-banner__accept { width: 100%; } } .orientation-lock { display: none; position: fixed; inset: 0; z-index: 10000; align-items: center; justify-content: center; padding: 24px; background: var(--color-white); text-align: center; } .orientation-lock__inner { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 280px; } .orientation-lock__icon { width: 48px; height: 48px; color: var(--color-text-muted); } .orientation-lock__text { margin: 0; font-family: var(--font-family); font-size: 1rem; line-height: 1.5; color: var(--color-text); } @media (max-width: 767px) and (orientation: landscape) { .orientation-lock { display: flex; } html.is-portrait-only, html.is-portrait-only body { overflow: hidden; touch-action: none; } } /** * Shared page layout & typography * Единые классы для повторяющихся стилей внутренних страниц */ /* --- Page shell --- */ .page-inner { background: var(--color-white); } .page-inner main { padding: 0; } .page-section { padding-top: calc(var(--header-height) + 52px); padding-bottom: 64px; } .page-section--compact { padding-top: calc(var(--header-height) + 40px); padding-bottom: 80px; } /* --- Breadcrumbs spacing --- */ .breadcrumbs--gap-sm { margin-bottom: 20px; } .breadcrumbs--gap-md { margin-bottom: 28px; } .breadcrumbs--gap-lg { margin-bottom: 32px; } /* --- Page headings (h1) --- */ .page-head__title { margin: 0; font-family: var(--font-family); font-size: 3.125rem; font-weight: 500; line-height: 3.4375rem; color: var(--color-text); } .page-head__title--brand { font-size: 3.12rem; line-height: 1.04; letter-spacing: -0.03em; } .page-head__title--contacts { margin-bottom: 32px; font-size: 3.375rem; line-height: 1.1; letter-spacing: -0.03em; } .page-head__title--legal { margin-bottom: 12px; font-size: 2.75rem; line-height: 1.12; letter-spacing: -0.03em; text-transform: uppercase; } .page-head__title--mb-sm { margin-bottom: 24px; } .page-head__title--mb-md { margin-bottom: 28px; } .page-head__title--mb-lg { margin-bottom: 32px; } /* --- Section headings (h2) --- */ .section-heading { margin: 0; font-family: var(--font-family); font-size: 3.125rem; font-weight: 500; line-height: 3.5rem; letter-spacing: 0; color: var(--color-text); } .section-heading--relaxed { line-height: 3.4375rem; } .section-heading--philosophy { line-height: 1.1; letter-spacing: -0.025em; } .section-heading--mb-sm { margin-bottom: 20px; } /* --- Feature strip (about / production) --- */ .feature-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; margin-bottom: 26px; } .feature-strip__item { position: relative; margin: 0; padding: 12px 0 0; font-family: var(--font-family); font-size: 1.0625rem; line-height: 1.35; color: var(--color-text); } .feature-strip__item::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 50px; background: var(--Butter, rgba(42, 72, 225, 1)); } @media (min-width: 1200px) { .feature-strip__item { font-size: 1.25rem; font-weight: 500; line-height: 1.8125rem; letter-spacing: -0.0187rem; } } @media (max-width: 1199px) { .page-head__title, .page-head__title--brand { font-size: 2.5rem; } .page-head__title--contacts { font-size: 2.75rem; } .section-heading, .section-heading--relaxed { font-size: 2.25rem; } } @media (max-width: 767px) { .page-section { padding-top: 0; padding-bottom: 40px; } .page-section--compact { padding-top: 0; padding-bottom: 48px; } .page-section--compact .breadcrumbs--gap-lg { margin-bottom: 20px; } .page-inner .breadcrumbs--gap-sm, .page-inner .breadcrumbs--gap-md, .page-inner .breadcrumbs--gap-lg { display: none; } .page-head__title, .page-head__title--brand, .page-head__title--contacts, .page-head__title--legal { font-size: 1.5rem; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; } .page-head__title--legal { font-size: 2rem; } .section-heading, .section-heading--relaxed, .section-heading--philosophy { font-size: 1.75rem; } .feature-strip { display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; } .feature-strip__item { padding: 12px 0; font-size: 0.9375rem; font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; } .feature-strip__item:last-child { padding-bottom: 0; } } @media (max-width: 767px) { .btn.btn--primary, .search-panel--mobile .search-bar__actions .btn.btn--primary { font-family: var(--font-family); font-weight: 500; font-size: 22px; line-height: 36px; letter-spacing: -0.33px; min-height: 56px; } } /* Legacy Bitrix / WYSIWYG content blocks */ .text-center .small { padding: 20px 0; font-size: 100%; max-width: 1280px; margin: 0 auto; text-align: center; color: #000; } /* End */ /* /local/templates/ivomed_new/css/styles.css?178393367297620 */