/* ========================================================================== INSTICK Israel — стили главной (v5) -------------------------------------------------------------------------- Новое в v5: • Hero — слайдер: 1-й слайд полный, остальные — крупный оффер + CTA. • Слайдер наборов «ערכות» с ценой «החל מ־» и бейджем экономии. • Категории — единые чёрные круги с фото, аккуратная сетка. • Цифры-статистика с count-up (JS) + плитка «כשר», блок после категорий. • Чёрный премиальный футер с колонками ссылок. • Блок клуба (кешбек + личный кабинет) перед футером. • Виджет доступности (נגישות) и cookie-баннер. • Mega-menu уже, карточки товаров 4:5 в фикс-сетке, крупнее шрифт. • RTL: только логические свойства. Светлая тема по умолчанию. ========================================================================== */ /* ---------- Дизайн-токены -------------------------------------------------- */ :root { --is-cream: #FAF4E6; --is-coral: #EF5B4C; --is-dark: #2B1B2E; --is-black: #0B0B0C; /* чёрный футера/кругов */ --is-coral-deep: #D8402F; --is-ink-soft: #75696F; --is-star: #F6A609; /* «Конфетные» цвета категорий */ --cat-klassik: #C22A3A; --cat-tea: #16B6AE; --cat-energy: #F6871F; --cat-iso: #2F6BEF; --cat-natural: #7C8B2E; --cat-milk: #C99A6A; --cat-acc: #8E44AD; --cat-sets: #EF5B4C; --font-display: "Rubik", "Heebo", "Arial Hebrew", "Helvetica Neue", system-ui, sans-serif; --font-body: "Assistant", "Heebo", "Arial Hebrew", "Helvetica Neue", system-ui, sans-serif; --w-title: 500; --w-strong: 600; --step--1: clamp(.82rem, .78rem + .2vw, .9rem); --step-0: clamp(1rem, .96rem + .2vw, 1.08rem); --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); --step-2: clamp(1.5rem, 1.25rem + 1.2vw, 2.2rem); --step-3: clamp(1.9rem, 1.4rem + 2.4vw, 3.2rem); --step-hero: clamp(2.2rem, 1.2rem + 4.2vw, 4.4rem); /* КВАДРАТНАЯ система радиусов: везде прямоугольники с лёгким скруглением 3–5px. --pill сознательно приравнен к --radius-lg — все бывшие «таблетки» (кнопки, чипы, инпуты) становятся прямоугольными */ --radius-sm: 3px; --radius: 4px; --radius-lg: 5px; --pill: 5px; --shadow-soft: 0 6px 24px -10px rgba(43, 27, 46, .12); --shadow: 0 14px 40px -16px rgba(43, 27, 46, .2); --shadow-lg: 0 30px 70px -24px rgba(43, 27, 46, .28); --ease: cubic-bezier(.22, 1, .36, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); /* Семантика — светлая тема по умолчанию */ --ground: #FFFFFF; --ground-2: #F6F4F1; --surface: #FFFFFF; --ink: var(--is-dark); --ink-soft: var(--is-ink-soft); --border: rgba(43, 27, 46, .09); --accent: var(--is-coral); --accent-deep:var(--is-coral-deep); } :root[data-theme="dark"] { --ground: #221426; --ground-2: #2B1B2E; --surface: #33203A; --ink: #FAF4E6; --ink-soft: #C9BCC3; --border: rgba(250, 244, 230, .14); --accent: #FF6D5E; --accent-deep:#EF5B4C; --shadow-soft: 0 6px 24px -10px rgba(0,0,0,.5); --shadow: 0 14px 40px -16px rgba(0,0,0,.6); --shadow-lg: 0 30px 70px -24px rgba(0,0,0,.7); } /* ---------- Режимы доступности (виджет נגישות, ת"י 5568 / WCAG 2.0 AA) ------ Размер шрифта задаёт JS через inline font-size на (шаги ±7.5%). */ /* Подчёркивание всех ссылок */ :root.a11y-underline a { text-decoration: underline !important; } /* Высокий контраст: жёсткие цвета, резкие границы */ :root.a11y-contrast { --ground: #FFFFFF; --ground-2: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --ink-soft: #1A1A1A; --border: rgba(0,0,0,.55); --accent: #B71C0C; --accent-deep: #8F1200; } /* Оттенки серого / инверсия цветов — фильтры на корне (и их комбинация) */ :root.a11y-grayscale { filter: grayscale(1); } :root.a11y-invert { filter: invert(1) hue-rotate(180deg); } :root.a11y-grayscale.a11y-invert { filter: grayscale(1) invert(1) hue-rotate(180deg); } /* Читаемый шрифт: системные гротески вместо фирменных */ :root.a11y-readable body, :root.a11y-readable h1, :root.a11y-readable h2, :root.a11y-readable h3, :root.a11y-readable h4, :root.a11y-readable button, :root.a11y-readable input { font-family: Arial, "Arial Hebrew", Helvetica, sans-serif !important; letter-spacing: 0 !important; } /* Крупный курсор (SVG-стрелка 40px, встроена data-URI) */ :root.a11y-cursor, :root.a11y-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 2, auto !important; } /* Остановка всех анимаций и переходов */ :root.a11y-noanim *, :root.a11y-noanim *::before, :root.a11y-noanim *::after { animation: none !important; transition: none !important; } :root.a11y-noanim .reveal { opacity: 1 !important; transform: none !important; } /* ---------- База ----------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: var(--step-0); font-weight: 400; line-height: 1.65; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.08; text-wrap: balance; font-family: var(--font-display); font-weight: var(--w-title); letter-spacing: .015em; } p { margin: 0; } :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .wrap { width: min(1280px, 100% - 2.5rem); margin-inline: auto; } .eyebrow { font-size: var(--step--1); font-weight: var(--w-strong); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .section { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); } .section--alt { background: var(--ground-2); } .section__head { max-width: 52ch; margin-block-end: clamp(2rem, 4vw, 3.4rem); } .section__head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; } .section__title { font-size: var(--step-3); } .section__sub { margin-block-start: .8rem; font-size: var(--step-1); color: var(--ink-soft); font-weight: 300; } .arrowlink { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-display); font-weight: 500; color: var(--accent); transition: gap .25s var(--ease); } .arrowlink:hover { gap: .75rem; } /* ---------- Кнопки ---------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: .55em; padding: .9em 1.7em; border-radius: var(--pill); font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-0); line-height: 1; letter-spacing: .03em; transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); will-change: transform; } .btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-soft); } .btn--primary:hover { background: var(--accent-deep); transform: translateY(-3px); box-shadow: var(--shadow); } .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); } .btn--ghost:hover { background: var(--ink); color: var(--ground); transform: translateY(-3px); } .btn--light { background: #fff; color: var(--is-dark); } .btn--light:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .btn--ghostlight { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.85); } .btn--ghostlight:hover { background: #fff; color: var(--is-dark); transform: translateY(-3px); } .btn--dark { background: var(--is-dark); color: #fff; } .btn--dark:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .btn__arrow { display: inline-block; transition: transform .3s var(--ease); } .btn:hover .btn__arrow { transform: translateX(-4px); } /* ---------- Фото-карточка --------------------------------------------------- */ .photocard { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--ground-2); box-shadow: var(--shadow-soft); } .photocard img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1); will-change: transform; } /* ========================================================================== 1 · Тонкая тёмная маркиза — всегда fixed Высота вычисляется JS и записывается в --announce-h. ========================================================================== */ :root { --announce-h: 0px; --header-top-gap: .8rem; } /* Резервируем место только на страницах, где реально есть announce. */ body.has-fixed-announce { padding-block-start: var(--announce-h); } .announce { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 120; width: 100%; background: var(--is-black); color: #FAF4E6; font-size: var(--step--1); font-weight: 400; letter-spacing: .04em; overflow: hidden; box-shadow: 0 1px 0 rgba(255,255,255,.05); } .marquee { display: flex; align-items: center; width: max-content; min-width: max-content; will-change: transform; animation-duration: var(--marquee-dur, 34s); animation-timing-function: linear; animation-iteration-count: infinite; } .marquee__track { display: flex; align-items: center; flex: 0 0 auto; width: max-content; min-width: max-content; } .announce .marquee__track { padding-block: .5rem; } .marquee__track > span { padding-inline: 1.4rem; white-space: nowrap; display: inline-flex; align-items: center; gap: .6rem; flex: 0 0 auto; } .marquee__track > span::after { content: "•"; color: var(--is-coral); } /* RU / EN (LTR): справа налево */ html[dir="ltr"] .marquee { animation-name: marquee-ltr; } @keyframes marquee-ltr { from { transform: translateX(0); } to { transform: translateX(calc(-1 * var(--marquee-shift, 300px))); } } /* Hebrew (RTL): слева направо */ html[dir="rtl"] .marquee { animation-name: marquee-rtl; } @keyframes marquee-rtl { from { transform: translateX(calc(-1 * var(--marquee-shift, 300px))); } to { transform: translateX(0); } } @media (hover: hover) { .announce:hover .marquee, .values:hover .marquee { animation-play-state: paused; } } @media (max-width: 767px) { .announce { min-height: 32px; font-size: 12px; line-height: 1.3; } .announce .marquee__track { padding-block: 8px; } .announce .marquee__track > span { padding-inline: 16px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .marquee { animation: none; transform: none; } } /* ========================================================================== 2 · Шапка-«остров» — ТЁМНАЯ (почти чёрная, в цвет лого и футера) Smart sticky: прячется вниз по скроллу, возвращается под announce. ========================================================================== */ .header { position: sticky; inset-block-start: calc(var(--announce-h) + var(--header-top-gap)); z-index: 90; width: min(1080px, 100% - 1.6rem); /* компактнее прежнего */ margin-inline: auto; margin-block-start: var(--header-top-gap); border-radius: var(--pill); /* Тёмный фон: белый логотип на чёрной подложке сливается без плашки */ background: color-mix(in srgb, var(--is-black) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow); color: #EDEBE8; transition: box-shadow .35s var(--ease), width .35s var(--ease), transform .45s var(--ease); background: #000; } .header--stuck { box-shadow: var(--shadow-lg); width: min(1000px, 100% - 1.6rem); } /* Умный sticky: при скролле ВНИЗ шапка плавно уезжает вверх, при скролле ВВЕРХ — возвращается строго под fixed announce. */ .header--hidden { transform: translateY(calc(-100% - var(--announce-h) - var(--header-top-gap) - 4px)); box-shadow: none; } /* Слева (в RTL — справа) почти нулевое поле, чтобы лого стояло вплотную */ .header__bar { display: flex; align-items: center; gap: .7rem; padding: .35rem .8rem; padding-inline-start: .5rem; transition: padding .35s var(--ease); } .header--stuck .header__bar { padding-block: .25rem; } /* Логотип: PNG обрезан по контенту, без скруглений и плашки — сливается с шапкой */ .logo { flex: 0 0 auto; display: grid; } .logo img { height: 42px; width: auto; } .header--stuck .logo img { height: 36px; } .nav { display: none; } .nav__list { display: flex; align-items: center; gap: .05rem; list-style: none; margin: 0; padding: 0; } .nav__link { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .8rem; border-radius: var(--pill); font-weight: 500; font-size: var(--step-0); letter-spacing: .02em; transition: background-color .25s var(--ease), color .25s var(--ease); } .nav__link:hover { background: rgba(255,255,255,.09); color: #FF9082; } /* Заметная ссылка «כל המוצרים» в шапке */ .nav__link--all { color: #FF9082; font-weight: var(--w-strong); } /* ---------- Оверлей поиска (как на маркетплейсах) -------------------------- Открывается иконкой у корзины: большое поле, популярные запросы, быстрые категории и мини-превью товаров. Закрытие: Esc / клик вне / ✕ */ .searchov { position: fixed; inset: 0; z-index: 360; display: grid; justify-items: center; align-items: start; padding: clamp(1rem, 4vh, 3.5rem) 1rem; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; } .searchov.is-open { visibility: visible; opacity: 1; } .searchov__scrim { position: absolute; inset: 0; background: rgba(20,10,22,.6); backdrop-filter: blur(4px); } .searchov__panel { position: relative; width: min(760px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: clamp(1.2rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 1.3rem; transform: translateY(-16px); transition: transform .35s var(--ease-out); max-height: calc(100svh - 2rem); overflow-y: auto; } .searchov.is-open .searchov__panel { transform: none; } /* Большое поле ввода */ .searchov__field { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.2rem; border-radius: var(--radius); background: var(--ground-2); box-shadow: inset 0 0 0 1.5px var(--border); transition: box-shadow .25s var(--ease); } .searchov__field:focus-within { box-shadow: inset 0 0 0 2px var(--accent); } .searchov__field svg { width: 22px; height: 22px; color: var(--ink-soft); flex: 0 0 auto; } .searchov__field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: var(--step-1); color: var(--ink); } .searchov__field input:focus { outline: none; } .searchov__field input::placeholder { color: var(--ink-soft); } .searchov__close { position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; background: var(--ground-2); font-size: 1.05rem; transition: background-color .2s var(--ease); } .searchov__close:hover { background: var(--border); } .searchov h6 { margin: 0 0 .6rem; font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); } /* Популярные запросы — чипы */ .searchov__chips { display: flex; flex-wrap: wrap; gap: .45rem; } .searchov__chip { padding: .45rem 1rem; border-radius: var(--pill); font-weight: 500; font-size: var(--step--1); background: var(--ground-2); transition: background-color .2s var(--ease), color .2s var(--ease); } .searchov__chip:hover { background: var(--is-dark); color: #fff; } /* Быстрые категории с мини-фото */ .searchov__cats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; } @media (min-width: 620px) { .searchov__cats { grid-template-columns: repeat(4, 1fr); } } .searchov__cat { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); background: color-mix(in srgb, var(--cat, var(--accent)) 9%, var(--surface)); transition: background-color .2s var(--ease); } .searchov__cat:hover { background: color-mix(in srgb, var(--cat, var(--accent)) 18%, var(--surface)); } .searchov__cat img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; flex: 0 0 auto; } /* Мини-превью товаров */ .searchov__prods { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; } @media (min-width: 620px) { .searchov__prods { grid-template-columns: repeat(4, 1fr); } } .searchov__prod { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .searchov__prod-photo { aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: var(--ground-2); } .searchov__prod-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s var(--ease); } .searchov__prod:hover .searchov__prod-photo img { transform: scale(1.08); } .searchov__prod-name { font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .searchov__prod-price { font-size: var(--step--1); color: var(--ink-soft); } .nav__caret { font-size: .6em; transition: transform .3s var(--ease); } .nav__item--open .nav__caret { transform: rotate(180deg); } .nav__item--has-menu { position: static; } /* Mega: открывает только JS (hover-intent), сверху padding-«мостик» */ .mega { position: absolute; inset-inline: 0; inset-block-start: 100%; padding-block-start: .8rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s; pointer-events: none; } .nav__item--open .mega { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Панель ТЁМНАЯ и ровно в ширину шапки (inset-inline:0 = ширина .header) — шапка и меню сидят на одной сетке, ничего не «разъезжается» */ .mega__panel { width: 100%; background: color-mix(in srgb, var(--is-black) 97%, transparent); border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: #EDEBE8; align-items: flex-start; padding: 1.2rem; display: grid; gap: 1.2rem; /* наборы (плитка) | список категорий | превью товаров */ grid-template-columns: 220px 170px 1fr; } .mega__panel--learn { grid-template-columns: 210px 1fr; } /* Нижняя полоса панели: заметная ссылка «все товары» */ .mega__all { grid-column: 1 / -1; padding-block-start: .9rem; border-block-start: 1px solid rgba(255,255,255,.1); display: flex; justify-content: center; } .mega__all .arrowlink { color: #FF9082; font-size: var(--step-1); } /* Крупная плитка «ערכות ומארזים» */ .mega__featured { position: relative; display: block; overflow: hidden; border-radius: var(--radius); min-height: 300px; } .mega__featured img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .mega__featured:hover img { transform: scale(1.07); } .mega__featured::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43,27,46,.62), transparent 55%); } .mega__featured-label { position: absolute; z-index: 1; inset-inline: 1rem; inset-block-end: 1rem; color: #fff; } .mega__featured-name { font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-1); display: block; } .mega__featured-name:after {content:'←';} [dir="ltr"] .mega__featured-name:after {content:'→';} .mega__featured-sub { font-size: var(--step--1); opacity: .85; font-weight: 300; } .mega__featured-tag { position: absolute; z-index: 1; inset-block-start: .9rem; inset-inline-start: .9rem; padding: .35rem .8rem; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: .74rem; font-weight: var(--w-strong); } /* Список категорий: крупнее шрифт */ .mega__rows { display: flex; flex-direction: column; gap: .15rem; align-content: start; } .mega__row { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-radius: var(--radius-sm); font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); /* крупнее названия */ transition: background-color .2s var(--ease), color .2s var(--ease); } [dir="ltr"] .mega__row {font-size: 16px;} .mega__row:hover, .mega__row.is-active { background: rgba(255,255,255,.08); color: #FF9082; } .mega__row-thumb { width: 38px; height: 38px; border-radius: 11px; overflow: hidden; flex: 0 0 auto; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); } .mega__row-thumb img { width: 100%; height: 100%; object-fit: cover; } .mega__row-arrow { margin-inline-start: auto; font-size: .7em; opacity: 0; transform: translateX(4px); transition: opacity .2s var(--ease), transform .2s var(--ease); } .mega__row:hover .mega__row-arrow, .mega__row.is-active .mega__row-arrow { opacity: 1; transform: translateX(0); } [dir="ltr"] .mega__row-arrow {transform: translateX(-4px) rotate(180deg);} [dir="ltr"] .mega__row:hover .mega__row-arrow, [dir="ltr"] .mega__row.is-active .mega__row-arrow {transform: translateX(0) rotate(180deg);} /* Превью товаров: ФИКСИРОВАННАЯ сетка 2×2, карточки одинаковые 4:5 — при 1–4 товарах ничего не разъезжается */ .mega__products { position: relative; } .mega__products h5 { margin: 0 0 .7rem; font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .mega__group { display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); /* всегда 2 равные колонки */ grid-auto-rows: max-content; gap: .8rem; animation: megafade .35s var(--ease); } .mega__group.is-active { display: grid; } @keyframes megafade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .mega__prod { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .mega__prod-photo { position: relative; aspect-ratio: 4 / 5; border-radius: var(--radius-sm); overflow: hidden; background: rgba(255,255,255,1); } /* Теги на фото товара в меню — как в каталоге, но компактнее */ .mega__prod-tags { position: absolute; z-index: 1; inset-inline-start: .45rem; inset-block-end: .45rem; display: flex; flex-wrap: wrap-reverse; gap: .25rem; max-width: calc(100% - .9rem); } .mega__prod .ptag { font-size: .62rem; padding: .14rem .5rem; } .mega__prod-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .mega__prod:hover .mega__prod-photo img { transform: scale(1.1); } .mega__prod-name { font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mega__prod-price { font-size: var(--step--1); color: rgba(255,255,255,.55); } /* Панель «ללמוד» */ .mega__col h5 { margin: 0 0 .9rem; font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .mega__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; } .mega__link { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: var(--radius-sm); font-weight: 500; transition: background-color .2s var(--ease), color .2s var(--ease); } /* На тёмной панели меню и в светлой мобильной шторке hover разный: в шторке (светлой) перекрываем ниже */ .mega__link:hover { background: rgba(255,255,255,.08); color: #FF9082; } .drawer .mega__link:hover { background: var(--ground-2); color: var(--accent); } .drawer .mega__row-thumb { box-shadow: inset 0 0 0 1px var(--border); } .mega__cards--learn { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .mega__promo { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 10; display: block; } .mega__promo img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); } .mega__promo:hover img { transform: scale(1.07); } .mega__promo-label { position: absolute; inset-inline-start: 1rem; inset-block-end: 1rem; padding: .55rem 1rem; border-radius: var(--pill); background: rgba(255,255,255,.92); color: var(--is-dark); font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); } .mega__promo-label .arrow::before {content: "←";} [dir="ltr"] .mega__promo-label .arrow::before {content: "→";} /* Иконки-действия */ .header__actions { margin-inline-start: auto; display: flex; align-items: center; gap: .15rem; } .icon-btn { position: relative; display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: var(--pill); transition: background-color .25s var(--ease), color .25s var(--ease); } .icon-btn:hover { background: var(--ground-2); color: var(--accent); } /* В тёмной шапке hover-иконок — светлая подсветка */ .header .icon-btn:hover { background: rgba(255,255,255,.1); color: #FF9082; } .icon-btn svg { width: 21px; height: 21px; } .cart-count { position: absolute; inset-block-start: 3px; inset-inline-start: 3px; min-width: 18px; height: 18px; padding-inline: 5px; display: grid; place-items: center; background: var(--accent); color: #fff; border-radius: var(--pill); font-size: .68rem; font-weight: var(--w-strong); line-height: 1; transition: transform .25s var(--ease); } .burger { display: inline-grid; } @media (min-width: 1080px) { .nav { display: block; } .burger { display: none; } } /* --- Мобильная шторка ------------------------------------------------------ */ .drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; pointer-events: none; } .drawer.is-open { visibility: visible; pointer-events: auto; } .drawer__scrim { position: absolute; inset: 0; background: rgba(43,27,46,.45); opacity: 0; transition: opacity .35s var(--ease); } .drawer.is-open .drawer__scrim { opacity: 1; } .drawer__panel { position: absolute; inset-block: 0; inset-inline-end: 0; width: min(88vw, 360px); padding: 1.4rem; background: var(--surface); box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform .4s var(--ease-out); overflow-y: auto; display: flex; flex-direction: column; } .drawer.is-open .drawer__panel { transform: translateX(0); } .drawer__head { display: flex; justify-content: space-between; align-items: center; margin-block-end: .8rem; } .acc__btn { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem .4rem; border-block-end: 1px solid var(--border); font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); text-align: start; } .acc__btn .nav__caret { font-size: .55em; } .acc__btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); } .acc__body { display: grid; grid-template-rows: 0fr; width: 100%; min-width: 0; max-height: none !important; overflow: hidden; transition: grid-template-rows .4s var(--ease); } .acc__btn[aria-expanded="true"] + .acc__body { grid-template-rows: 1fr; } .acc__body-inner { min-height: 0; min-width: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; gap: .45rem; transition: padding .4s var(--ease); } .acc__btn[aria-expanded="true"] + .acc__body .acc__body-inner { padding: .6rem 0 1rem; } .drawer__link { padding: 1rem .4rem; border-block-end: 1px solid var(--border); font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); } .drawer__tile { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--cat, var(--accent)) 8%, var(--surface)); font-family: var(--font-display); font-weight: 500; } .drawer__tile .mega__row-thumb { width: 42px; height: 42px; } /* ========================================================================== 3 · Hero-СЛАЙДЕР: 1-й слайд полный, остальные — оффер + CTA ========================================================================== */ .hero { position: relative; overflow: hidden; margin-inline: .8rem; margin-block-start: 1rem; border-radius: var(--radius-lg); min-height: calc(100svh - 8.2rem); } /* Слайд: фото-фон + градиент + контент */ .heroslide { position: absolute; inset: 0; display: grid; align-items: end; opacity: 0; pointer-events: none; transition: opacity .8s var(--ease); } .heroslide.is-active { opacity: 1; pointer-events: auto; } .heroslide__bg { position: absolute; inset: 0; } .heroslide__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); will-change: transform; } /* Плотное затемнение снизу — текст и кнопки читаются на любом фото */ .heroslide__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(20,10,22,.82) 0%, rgba(20,10,22,.45) 32%, transparent 62%), linear-gradient(12deg, rgba(43,27,46,.35) 10%, transparent 55%); } /* Контент прижат к нижней части баннера */ .hero__content { position: relative; z-index: 1; color: #fff; padding-inline: clamp(1.6rem, 4vw, 3.2rem); padding-block-start: clamp(4rem, 10vw, 8rem); padding-block-end: clamp(4.4rem, 7vw, 5.2rem); /* резерв под группу управления */ max-width: 640px; } .hero__eyebrow { color: rgba(255,255,255,.85); } .hero__title { font-size: var(--step-hero); color: #fff; margin-block: .7rem .5rem; letter-spacing: .01em; } .hero__title em { color: #FFD9D3; font-style: normal; } .hero__lede { font-size: var(--step-1); color: rgba(255,255,255,.88); font-weight: 300; max-width: 30ch; } .hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: 1.6rem; } .hero__badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.4rem; } .badge--glass { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .95rem; border-radius: var(--pill); background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(6px); color: #fff; font-weight: 500; font-size: var(--step--1); } /* Упрощённый промо-слайд: всё по центру, крупный оффер */ .heroslide--promo { align-items: center; text-align: center; } .heroslide--promo .hero__content { max-width: none; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; } .hero__promo-title { font-size: clamp(2rem, 1rem + 4.6vw, 4.6rem); color: #fff; max-width: 18ch; } .hero__promo-title em { color: #FFD9D3; font-style: normal; } /* Управление hero-слайдером: единая группа [стрелка][точки][стрелка] внизу ПО ЦЕНТРУ — гарантированно не пересекается с заголовком и CTA (текст прижат к inline-start, бейджи выше). RTL-логика направлений: «вперёд» — стрелка ← (влево), «назад» — → (вправо). */ .hero__controls { position: absolute; z-index: 2; inset-inline: 0; inset-block-end: 1rem; display: flex; justify-content: center; align-items: center; gap: .9rem; } .hero__dots { display: flex; gap: .45rem; } .hero__dot { width: 9px; height: 9px; border-radius: var(--pill); background: rgba(255,255,255,.45); padding: 0; transition: width .35s var(--ease), background-color .35s var(--ease); } .hero__dot.is-active { width: 26px; background: #fff; } .hero__arrow { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); color: #fff; font-size: 1.05rem; line-height: 1; transition: background-color .25s var(--ease); } .hero__arrow:hover { background: rgba(255,255,255,.35); } [dir="ltr"] .hero__arrow {transform: rotate(180deg);} /* ========================================================================== 4 · Коралловая маркиза ========================================================================== */ .values { background: var(--accent); color: #fff; overflow: hidden; margin-block-start: 1rem; } .values .marquee__track { padding-block: .7rem; font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); text-transform: uppercase; letter-spacing: .06em; } .values .marquee__track > span::after { content: "✳"; color: rgba(255,255,255,.7); } /* ========================================================================== 5 · Наборы «ערכות ומארזים» — сплит-карточка со слайдером -------------------------------------------------------------------------- Сознательно НЕ похоже на hero: фото без затемнения на одной половине, контент — на светлой кремовой панели с тёмным текстом на другой. Заголовки секции живут ВНУТРИ слайда (overline), управление — компактные шевроны + точки в углу контентной панели. ========================================================================== */ .setsplit { position: relative; overflow: hidden; border-radius: var(--radius-lg); /* ЧЁРНЫЙ премиум-фон: контраст и с hero, и со светлой страницей */ background: #120D14; color: #F4EFF2; min-height: clamp(440px, 46vw, 540px); box-shadow: var(--shadow-lg); } /* Слайд = внутренняя сетка: фото | контент */ .setsplit__slide { position: absolute; inset: 0; display: grid; grid-template-rows: 240px 1fr; opacity: 0; pointer-events: none; transition: opacity .7s var(--ease); } .setsplit__slide.is-active { opacity: 1; pointer-events: auto; } @media (min-width: 900px) { .setsplit__slide { grid-template-rows: none; grid-template-columns: 1.05fr .95fr; } } /* Фото — сочное, без затемнения; внутренний двигает parallax (JS) */ .setsplit__media { position: relative; overflow: hidden; } .setsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); /* запас под parallax-сдвиг */ will-change: transform; } /* Контентная панель: чёрная, белый текст, много воздуха */ .setsplit__body { padding: clamp(1.6rem, 3.5vw, 3rem); padding-block-end: clamp(4.6rem, 7vw, 5.4rem); /* резерв под controls */ display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } /* Overline секции — живёт внутри слайда (вместо заголовка над блоком) */ .setsplit__overline { font-size: var(--step--1); font-weight: var(--w-strong); letter-spacing: .18em; text-transform: uppercase; color: #FF9082; } .setsplit__eyebrow { font-size: var(--step--1); color: rgba(255,255,255,.55); font-weight: 500; } .setsplit__title { font-size: clamp(1.7rem, 1rem + 2.6vw, 2.9rem); color: #fff; } .setsplit__desc { color: rgba(255,255,255,.72); font-weight: 300; max-width: 40ch; } .setsplit__priceline { display: flex; flex-wrap: wrap; align-items: baseline; gap: .7rem; margin-block-start: .3rem; } .setsplit__from { color: rgba(255,255,255,.6); font-size: var(--step--1); } .setsplit__price { font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-2); color: #FF9082; } .setsplit__save { padding: .32rem .85rem; border-radius: var(--pill); background: var(--accent); color: #fff; font-size: .78rem; font-weight: var(--w-strong); align-self: center; } .setsplit__cta { margin-block-start: .5rem; } /* Управление в углу панели: RTL-логика — «вперёд» слева (←), «назад» справа */ .setsplit__controls { position: absolute; z-index: 2; inset-block-end: 1.4rem; inset-inline-end: clamp(1.6rem, 3.5vw, 3rem); display: flex; align-items: center; gap: .8rem; } .setsplit__arrow { width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.3); color: #fff; font-size: 1.05rem; line-height: 1; transition: background-color .25s var(--ease), color .25s var(--ease); } .setsplit__arrow:hover { background: #fff; color: #120D14; } /* Белые точки на чёрной панели */ .setsplit .hero__dot { background: rgba(255,255,255,.3); } .setsplit .hero__dot.is-active { background: #fff; } .setsplit__dots { display: flex; gap: .45rem; } [dir="ltr"] .setsplit__arrow {transform: rotate(180deg);} /* ========================================================================== 6 · Каталог: табы + full-bleed слайдер ========================================================================== */ .bestsellers { background: linear-gradient(180deg, var(--ground) 0%, var(--is-cream) 30%, var(--ground-2) 100%); } :root[data-theme="dark"] .bestsellers { background: linear-gradient(180deg, var(--ground), var(--ground-2)); } .tabs { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-end: 1.6rem; } .tab { padding: .55rem 1.15rem; border-radius: var(--pill); font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); transition: background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease); } .tab:hover { box-shadow: inset 0 0 0 1.5px var(--ink); } .tab[aria-selected="true"] { background: var(--is-dark); color: #fff; box-shadow: none; } .slider { position: relative; } .slider__viewport { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; padding-block: .5rem 1.5rem; padding-inline: max(calc((100vw - 1280px) / 2), 1.25rem); scroll-padding-inline: max(calc((100vw - 1280px) / 2), 1.25rem); } .slider__viewport::-webkit-scrollbar { display: none; } .slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 24vw, 320px); gap: 1.1rem; align-items: stretch; } .slider__nav { display: flex; gap: .5rem; } .slider__btn { width: 46px; height: 46px; border-radius: var(--radius); display: grid; place-items: center; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border); font-size: 1.2rem; transition: background-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease); } .slider__btn:hover { background: var(--is-dark); color: #fff; transform: translateY(-2px); } .slider__btn:disabled { opacity: .3; cursor: default; transform: none; } [dir="ltr"] .slider__btn {transform: rotate(180deg);} /* --- Карточка товара (фикс-раскладка, теги на фото, кроссфейд) -------------- */ .product { scroll-snap-align: start; display: flex; flex-direction: column; gap: .85rem; height: 100%; } .product[hidden] { display: none; } .product__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--ground-2); box-shadow: var(--shadow-soft); display: block; flex: 0 0 auto; } .product__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .55s var(--ease), transform .7s var(--ease); } .product__img--alt { opacity: 0; } .product:hover .product__img--main { opacity: 0; } .product:hover .product__img--alt { opacity: 1; transform: scale(1.06); } .product__tags { position: absolute; z-index: 1; inset-inline-start: .7rem; inset-block-end: .7rem; display: flex; flex-wrap: wrap-reverse; gap: .35rem; max-width: calc(100% - 1.4rem); } /* --- Milk / Pareve badges on product photo --------------------------------- */ .product__milk-badges { position: absolute; z-index: 4; top: .7rem; left: .7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; max-width: calc(100% - 1.4rem); pointer-events: none; direction: ltr; } .product__milk-badge { display: inline-flex; align-items: center; gap: .38rem; width: max-content; max-width: 100%; min-height: 30px; padding: .32rem .62rem; border: 1px solid rgba(255,255,255,.72); border-radius: var(--radius); background: rgba(255,255,255,.94); color: var(--is-dark); box-shadow: 0 5px 16px -7px rgba(20,10,22,.38); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); font-family: var(--font-display); font-size: .72rem; font-weight: var(--w-strong); line-height: 1.15; white-space: nowrap; } .product__milk-badge svg { width: 15px; height: 15px; flex: 0 0 15px; } .product__milk-badge--pareve { color: #55701c; border-color: rgba(124,139,46,.26); } .product__milk-badge--nodairy { color: #6f5134; border-color: rgba(201,154,106,.30); } /* Чипы-теги на фото: крупнее, с эмодзи-иконкой в начале */ .ptag { display: inline-flex; align-items: center; gap: .35rem; padding: .32rem .8rem; border-radius: var(--pill); font-size: .82rem; font-weight: var(--w-strong); line-height: 1.4; white-space: nowrap; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); color: color-mix(in srgb, var(--tag, var(--accent)) 75%, var(--is-dark)); box-shadow: 0 3px 10px -4px rgba(43,27,46,.25); } .ptag--sale { background: var(--accent); color: #fff; } .product__body { display: flex; flex-direction: column; gap: .3rem; padding-inline: .3rem; flex: 1 1 auto; } .product__cat { font-size: var(--step--1); font-weight: var(--w-strong); color: var(--accent); text-transform: uppercase; letter-spacing: .1em; } .product__name { font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-1); } .product__desc { font-size: var(--step--1); color: var(--ink-soft); font-weight: 300; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(var(--step--1) * 2.9); } /* --- Small milk compatibility note inside product card --------------------- */ .product__desc__milk { position: relative; display: flex; flex-direction: column; gap: .18rem; margin-block-start: .38rem; padding: .58rem .68rem .6rem; border: 1px solid rgba(201,154,106,.22); border-radius: var(--radius); background: color-mix(in srgb, var(--cat-milk) 7%, var(--surface)); box-shadow: 0 7px 20px -15px rgba(43,27,46,.45); overflow: hidden; } .product__desc__milk::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 3px; background: var(--cat-milk); } .product__desc__milk span { display: block; color: var(--ink); font-family: var(--font-display); font-size: .73rem; font-weight: var(--w-strong); line-height: 1.3; } .product__desc__milk b { display: block; color: var(--ink-soft); font-size: .67rem; font-weight: 400; line-height: 1.42; } .product__foot { margin-block-start: auto; padding-block-start: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; } .product__price { font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-1); white-space: nowrap; } .product__price del { color: var(--ink-soft); font-size: .74em; font-weight: 400; margin-inline-start: .3rem; } /* Два действия: подробная кнопка «לפרטים» + круглая иконка быстрого добавления в корзину. Группа фиксирована в конце строки. */ .product__actions { display: flex; align-items: center; gap: .45rem; flex: 0 0 auto; } .product__more { display: inline-flex; align-items: center; padding: .6rem 1.05rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step--1); transition: background-color .25s var(--ease), color .25s var(--ease); } .product__more:hover { background: var(--cat-tea); color: #fff; box-shadow: inset 0 0 0 1.5px var(--cat-tea);} .product__quick { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; background: var(--is-dark); color: #fff; transition: background-color .25s var(--ease), transform .25s var(--ease); } .product__quick svg { width: 19px; height: 19px; } .product__quick:hover { background: var(--cat-tea); color: #fff; box-shadow: inset 0 0 0 1.5px var(--cat-tea); transform: scale(1.08); } .product__quick.is-added { background: var(--cat-natural); } /* ========================================================================== 7 · Категории «יש טעם לכל אחד» — лакшери фото-карточки (Joy Rush / happly) -------------------------------------------------------------------------- Крупное сочное фото 4:5 с мягким скруглением, подпись ПОД фото (чистая типографика, воздух), цветная стрелка проявляется на hover. ========================================================================== */ .catgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem) 1.2rem; } @media (min-width: 720px) { .catgrid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1040px) { .catgrid { grid-template-columns: repeat(4, 1fr); } } .catcard { display: flex; flex-direction: column; gap: .85rem; } .catcard__photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); background: var(--ground-2); box-shadow: var(--shadow-soft); } .catcard__photo img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); transition: transform .8s var(--ease); } .catcard:hover .catcard__photo img { transform: scale(1.11); } /* Мягкая тень при наведении — премиальный «подъём» без резкости */ .catcard:hover .catcard__photo { box-shadow: var(--shadow); } /* Подпись под фото: название + счётчик вкусов, стрелка справа */ .catcard__meta { display: flex; align-items: center; gap: .7rem; padding-inline: .25rem; } .catcard__name { font-family: var(--font-display); font-weight: 500; font-size: var(--step-1); letter-spacing: .02em; } .catcard__sub { display: block; font-size: var(--step--1); color: var(--ink-soft); font-weight: 300; } /* Цветная стрелка-кружок: появляется на hover */ .catcard__go { margin-inline-start: auto; flex: 0 0 auto; width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; background: var(--cat, var(--accent)); color: #fff; opacity: 0; transform: translateX(6px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .catcard:hover .catcard__go { opacity: 1; transform: translateX(0); } /* ========================================================================== 8 · Цифры-статистика (count-up) + плитка «כשר» ========================================================================== */ .stats__statement { font-size: var(--step-3); max-width: 22ch; margin-block-end: clamp(2rem, 4vw, 3rem); } .stats__statement em { color: var(--accent); font-style: normal; } .stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 0; } @media (min-width: 940px) { .stats { grid-template-columns: repeat(5, 1fr); } } .stat { padding: 1.4rem .2rem 0; border-block-start: 1.5px solid var(--ink); margin-inline-end: 1.5rem; } .stat__num { font-family: var(--font-display); font-weight: var(--w-title); font-size: clamp(2.2rem, 4vw, 3.4rem); line-height: 1; font-variant-numeric: tabular-nums; /* цифры не «дышат» при count-up */ } .stat__num small { font-size: .45em; color: var(--ink-soft); font-weight: 400; } .stat__label { margin-block-start: .5rem; color: var(--ink-soft); font-size: var(--step--1); font-weight: 300; max-width: 20ch; } /* Плитка кашрута: круглый значок-«печать» */ .stat__kosher { width: 62px; height: 62px; border-radius: var(--radius); border: 2.5px solid var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--w-strong); font-size: 1.25rem; } /* ========================================================================== 9 · «Как использовать» — 3 видео-плитки ========================================================================== */ .howto__grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; counter-reset: howstep; } @media (min-width: 760px) { .howto__grid { grid-template-columns: repeat(3, 1fr); } } .howto { display: flex; flex-direction: column; gap: .9rem; } .howto__media { position: relative; overflow: hidden; display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); background: var(--ground-2); box-shadow: var(--shadow-soft); width: 100%; padding: 0; aspect-ratio: 3 / 4; } .howto__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform .7s var(--ease); } .howto__media:hover img { transform: scale(1.1); } .howto__play { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: var(--radius); display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--is-dark); font-size: 1.3rem; padding-inline-start: 4px; box-shadow: var(--shadow); transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease); } .howto__media:hover .howto__play { transform: scale(1.12); background: var(--accent); color: #fff; } .howto__caption { display: flex; align-items: center; gap: .8rem; padding-inline: .3rem; } .howto__num { counter-increment: howstep; width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--radius); background: var(--accent); color: #fff; font-family: var(--font-display); font-weight: var(--w-strong); } .howto__num::before { content: counter(howstep); } .howto__title { font-size: var(--step-1); font-weight: var(--w-strong); } .howto__text { font-size: var(--step--1); color: var(--ink-soft); font-weight: 300; } /* ========================================================================== 10 · Цитата-вынос ========================================================================== */ .pullquote { text-align: center; padding-block: clamp(3rem, 6vw, 5.5rem); } .pullquote__stars { color: var(--is-star); letter-spacing: .15em; font-size: var(--step-1); } .pullquote__text { margin-block: 1rem .9rem; margin-inline: auto; font-family: var(--font-display); font-weight: var(--w-title); font-size: var(--step-3); line-height: 1.25; max-width: 22ch; } .pullquote__text em { color: var(--accent); font-style: normal; } .pullquote__author { color: var(--ink-soft); font-size: var(--step--1); font-weight: 300; } /* ========================================================================== 11 · Ассортимент — текст + коллаж ========================================================================== */ .flavors__inner { display: grid; gap: 2.6rem; align-items: center; } @media (min-width: 920px) { .flavors__inner { grid-template-columns: .9fr 1.1fr; } } .flavors__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.4rem; } .chip { display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .95rem; border-radius: var(--pill); font-weight: 500; font-size: var(--step--1); background: color-mix(in srgb, var(--chip) 13%, transparent); color: color-mix(in srgb, var(--chip) 78%, var(--ink)); } .chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--chip); } .flavors__collage { display: grid; grid-template-columns: 1.15fr .85fr; grid-template-rows: 1fr 1fr; gap: 1rem; } .flavors__collage .photocard:first-child { grid-row: span 2; } /* ========================================================================== 12 · Фотогалерея — masonry + lightbox ========================================================================== */ .gallery { columns: 2; column-gap: 1rem; } @media (min-width: 720px) { .gallery { columns: 3; } } @media (min-width: 1080px) { .gallery { columns: 4; } } .gallery__item { display: block; width: 100%; margin-block-end: 1rem; break-inside: avoid; border-radius: var(--radius); overflow: hidden; padding: 0; box-shadow: var(--shadow-soft); position: relative; transition: transform .35s var(--ease), box-shadow .35s var(--ease); } .gallery__item img { width: 100%; height: auto; transition: transform .6s var(--ease); } .gallery__item:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .gallery__item:hover img { transform: scale(1.05); } /* ========================================================================== 13 · Отзывы — маркетплейс-блок ========================================================================== */ .rev-summary { display: grid; gap: 2rem; align-items: center; padding: clamp(1.6rem, 3vw, 2.6rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); margin-block-end: 2.2rem; } @media (min-width: 800px) { .rev-summary { grid-template-columns: auto 1fr auto; } } .rev-summary__score { text-align: center; } .rev-summary__num { font-family: var(--font-display); font-weight: var(--w-title); font-size: clamp(3rem, 6vw, 4.4rem); line-height: 1; } .rev-summary__of { color: var(--ink-soft); font-size: var(--step--1); } .stars { color: var(--is-star); letter-spacing: .08em; } .rev-summary__meta { color: var(--ink-soft); font-size: var(--step--1); margin-block-start: .3rem; font-weight: 300; } .rev-bars { display: flex; flex-direction: column; gap: .45rem; min-width: 0; } .rev-bar { display: grid; grid-template-columns: 3.2em 1fr 3em; align-items: center; gap: .8rem; font-size: var(--step--1); font-weight: 500; } .rev-bar__track { height: 8px; border-radius: var(--pill); background: var(--ground-2); overflow: hidden; } .rev-bar__fill { display: block; height: 100%; border-radius: var(--pill); background: var(--is-star); width: var(--w, 0%); } .rev-bar__pct { color: var(--ink-soft); text-align: end; } .reviews__grid { display: grid; gap: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 700px) { .reviews__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1060px) { .reviews__grid { grid-template-columns: repeat(3, 1fr); } } .review { margin: 0; padding: 1.5rem; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-soft); display: flex; flex-direction: column; gap: .8rem; } .review__top { display: flex; align-items: center; gap: .7rem; } .review__avatar { width: 42px; height: 42px; border-radius: 50%; /* аватар остаётся круглым */ display: grid; place-items: center; color: #fff; font-family: var(--font-display); font-weight: var(--w-strong); flex: 0 0 auto; } .review__who { display: flex; flex-direction: column; line-height: 1.3; } .review__name { font-weight: var(--w-strong); } .review__verified { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 500; color: var(--cat-natural); } .review__quote { font-size: var(--step-0); font-weight: 300; } .review__media { display: flex; gap: .5rem; } .ugc-thumb { position: relative; width: 74px; height: 74px; border-radius: var(--radius-sm); overflow: hidden; padding: 0; flex: 0 0 auto; box-shadow: inset 0 0 0 1px var(--border); transition: transform .3s var(--ease); } .ugc-thumb img { width: 100%; height: 100%; object-fit: cover; } .ugc-thumb:hover { transform: scale(1.06); } .ugc-thumb--video::after { content: "▶"; position: absolute; inset: 0; display: grid; place-items: center; background: rgba(43,27,46,.35); color: #fff; font-size: 1.05rem; padding-inline-start: 3px; } .review__product { margin-block-start: auto; font-size: var(--step--1); color: var(--ink-soft); } .review__product b { color: var(--ink); font-weight: var(--w-strong); } /* ========================================================================== Lightbox — image / video ========================================================================== */ .lightbox { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 1.5rem; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; } .lightbox.is-open { visibility: visible; opacity: 1; } .lightbox__scrim { position: absolute; inset: 0; background: rgba(43,27,46,.72); } .lightbox__body { position: relative; z-index: 1; width: min(70vw, 1100px); max-width: calc(100vw - 3rem); max-height: calc(100svh - 5rem); display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; } .lightbox__img { display: block; width: auto; height: auto; max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow-lg); } .lightbox__body video, .lightbox__body [data-lightbox-video-player] { display: block; width: 100%; max-width: 100%; height: auto; max-height: 75vh; object-fit: contain; background: #000; border-radius: var(--radius); box-shadow: var(--shadow-lg); } @supports (aspect-ratio: 1 / 1) { .lightbox__body video, .lightbox__body [data-lightbox-video-player] { width: auto; max-width: 100%; max-height: 75vh; } } .lightbox__close { position: absolute; z-index: 5; inset-block-start: 12px; inset-inline-end: 12px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: var(--radius); background: rgba(15,10,18,.64); color: #fff; font-size: 1.3rem; line-height: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color .2s var(--ease), transform .2s var(--ease); } .lightbox__close:hover { background: rgba(15,10,18,.88); transform: scale(1.05); } .lightbox__note { margin-block-start: .8rem; text-align: center; color: #fff; font-size: var(--step--1); opacity: .85; } @media (max-width: 1023px) { .lightbox__body { width: min(82vw, 850px); max-width: calc(100vw - 2rem); } .lightbox__img, .lightbox__body video, .lightbox__body [data-lightbox-video-player] { max-height: 78vh; } } @media (max-width: 767px) { .lightbox { padding: 12px; } .lightbox__body { width: 100%; max-width: 100%; max-height: calc(100svh - 24px); } .lightbox__img, .lightbox__body video, .lightbox__body [data-lightbox-video-player] { width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 70px); object-fit: contain; } .lightbox__close { inset-block-start: 8px; inset-inline-end: 8px; width: 40px; height: 40px; font-size: 1.15rem; } .lightbox__note { margin-block-start: .55rem; font-size: .78rem; } } @media (max-width: 380px) { .lightbox { padding: 8px; } .lightbox__body { max-height: calc(100svh - 16px); } .lightbox__img, .lightbox__body video, .lightbox__body [data-lightbox-video-player] { max-height: calc(100svh - 58px); } } /* ========================================================================== 14 · Подписка + поп-ап ========================================================================== */ .signup { background: var(--accent); color: #fff; text-align: center; border-radius: var(--radius-lg); padding: clamp(2.6rem, 5vw, 4.4rem); box-shadow: var(--shadow); } .signup__title { font-size: var(--step-3); color: #fff; } .signup__sub { margin-block: 1rem 2rem; font-size: var(--step-1); opacity: .93; font-weight: 300; } .signup__form { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; max-width: 520px; margin-inline: auto; } .signup__input { flex: 1 1 240px; padding: .95em 1.3em; border-radius: var(--pill); border: 0; font: inherit; background: #fff; color: var(--is-dark); } .signup__input::placeholder { color: #9a8a90; } .signup__note { margin-block-start: 1rem; font-size: var(--step--1); opacity: .85; } .popup { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.5rem; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; } .popup.is-open { visibility: visible; opacity: 1; } .popup__scrim { position: absolute; inset: 0; background: rgba(43,27,46,.5); } .popup__card { position: relative; max-width: 440px; width: 100%; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); transform: translateY(24px) scale(.97); transition: transform .4s var(--ease-out); text-align: center; } .popup.is-open .popup__card { transform: translateY(0) scale(1); } .popup__banner { background: var(--accent); color: #fff; padding: 1.7rem 1.5rem; } .popup__off { font-family: var(--font-display); font-weight: var(--w-strong); font-size: clamp(2.3rem, 8vw, 3.2rem); line-height: 1; } .popup__body { padding: 1.7rem; display: flex; flex-direction: column; gap: 1rem; } .popup__body h3 { font-size: var(--step-2); } .popup__form { display: flex; flex-direction: column; gap: .6rem; } .popup__field { display: flex; flex-direction: column; gap: 5px; } .popup__field .btn { width: 100%; } .popup__input { width: 100%; padding: .9em 1.2em; border-radius: var(--pill); border: 1px solid var(--border); font: inherit; background: var(--ground-2); color: var(--ink); } .popup__close { position: absolute; inset-block-start: .8rem; inset-inline-end: .8rem; z-index: 2; width: 38px; height: 38px; border-radius: var(--radius); display: grid; place-items: center; background: rgba(255,255,255,.25); color: #fff; font-size: 1.2rem; } .popup__close:hover { background: rgba(255,255,255,.4); } /* ========================================================================== 15 · Клуб INSTICK — кешбек + личный кабинет (перед футером) ========================================================================== */ .club { display: grid; overflow: hidden; border-radius: var(--radius-lg); background: var(--is-dark); color: #fff; box-shadow: var(--shadow-lg); } @media (min-width: 880px) { .club { grid-template-columns: 1.05fr .95fr; } } .club__media { position: relative; min-height: 260px; } .club__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* Градиент в сторону текста, чтобы фото мягко «втекало» */ .club__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, var(--is-dark) 2%, transparent 45%); } @media (max-width: 879px) { .club__media::after { background: linear-gradient(0deg, var(--is-dark) 4%, transparent 55%); } } .club__content { padding: clamp(1.8rem, 4vw, 3.2rem); display: flex; flex-direction: column; gap: 1rem; } .club__title { font-size: var(--step-3); color: #fff; } .club__title em { color: #FFB9AF; font-style: normal; } .club__perks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .club__perk { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.85); font-weight: 300; } .club__perk::before { content: "✓"; flex: 0 0 auto; width: 22px; height: 22px; border-radius: var(--radius); display: grid; place-items: center; background: var(--accent); color: #fff; font-size: .75rem; font-weight: 600; } .club__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-block-start: .6rem; } /* ========================================================================== 16 · Футер — ЧЁРНЫЙ премиум ========================================================================== */ .footer { background: var(--is-black); color: #EDEBE8; padding-block: clamp(3rem, 5vw, 5rem) 2rem; } .footer__grid { display: grid; gap: 2.2rem; grid-template-columns: 1fr; } @media (min-width: 620px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (min-width: 940px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } } .footer__brand-logo { height: 40px; width: auto; margin-block-end: 1rem; } .footer__about { color: rgba(255,255,255,.6); max-width: 34ch; font-size: var(--step--1); font-weight: 300; } .footer__col h4 { font-weight: var(--w-strong); font-size: var(--step-0); margin-block: 0 1rem; color: #fff; } .footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; } .footer__col a { color: rgba(255,255,255,.62); font-size: var(--step--1); transition: color .2s var(--ease); } .footer__col a:hover { color: var(--is-coral); } .footer__socials { display: flex; gap: .6rem; margin-block-start: 1.2rem; } .footer__social { width: 42px; height: 42px; border-radius: var(--radius); display: grid; place-items: center; background: rgba(255,255,255,.08); color: #fff; transition: background-color .25s var(--ease), transform .25s var(--ease); } /* ВАЖНО: перебиваем общий .footer__col a:hover { color: coral } — иначе коралловая иконка на коралловом фоне «пропадала» при наведении */ .footer__col a.footer__social:hover, .footer__social:hover { background: var(--is-coral); color: #fff; transform: translateY(-3px); } .footer__social svg { width: 20px; height: 20px; } .footer__climate { display: flex; flex-direction: column; align-items: stretch; gap: .18rem; width: fit-content; max-width: min(310px, 100%); margin-block-start: 1.4rem; padding: .62rem .85rem .68rem; border-radius: var(--pill); background: rgba(124,139,46,.22); border: 1px solid rgba(124,139,46,.45); color: #CBDB8E; font-size: var(--step--1); font-weight: 500; line-height: 1.35; text-align: start; white-space: normal; } /* Если внутри climate-блока два span/small — складываем их как в RU-примере: основная мысль сверху, пояснение отдельной строкой ниже. */ .footer__climate > * { display: block; width: 100%; min-width: 0; text-align: start; } .footer__climate > :first-child { color: #D7E79F; font-weight: var(--w-strong); } .footer__climate > :not(:first-child) { color: rgba(203,219,142,.84); font-size: .78rem; font-weight: 400; line-height: 1.42; } @media (max-width: 619px) { .footer__climate { width: 100%; max-width: 310px; } } .footer__bottom { margin-block-start: 2.6rem; padding-block-start: 1.6rem; border-block-start: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; color: rgba(255,255,255,.45); font-size: var(--step--1); align-items: center; } .bigmark { font-family: var(--font-display); font-weight: var(--w-strong); font-size: clamp(4rem, 19vw, 17rem); line-height: .82; letter-spacing: .02em; text-align: center; margin-block-start: 2.5rem; overflow: hidden; white-space: nowrap; direction: ltr; color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.16); } /* ========================================================================== 17 · Виджет доступности (נגישות) + cookie-баннер ========================================================================== */ /* Плавающая круглая кнопка доступности — ЛЕВЫЙ нижний угол. Физические left/bottom сознательно: угол не должен зеркалиться в RTL */ .a11y { position: fixed; left: 1rem; bottom: 1.2rem; z-index: 350; } .a11y__btn { width: 52px; height: 52px; border-radius: 50%; /* стандартный круглый значок נגישות */ display: grid; place-items: center; background: var(--cat-iso); color: #fff; box-shadow: var(--shadow); transition: transform .25s var(--ease); } .a11y__btn:hover { transform: scale(1.08); } .a11y__btn svg { width: 26px; height: 26px; } /* Меню настроек доступности */ .a11y__menu { position: absolute; bottom: calc(100% + .7rem); left: 0; /* раскрывается вверх от кнопки */ width: 264px; padding: .9rem; max-height: min(70svh, 560px); overflow-y: auto; /* меню длинное — скроллим */ background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: .3rem; } .a11y__menu.is-open { display: flex; } .a11y__menu h5 { margin: 0 0 .3rem; font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step--1); } /* Ряд «шрифт больше/меньше» — две полукнопки */ .a11y__row { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; } /* Кнопки-действия без состояния (A+/A−/сброс) — без индикатора ●/○ */ .a11y__opt--action::after { content: none; } /* Ссылка на заявление о доступности */ .a11y__link { display: block; margin-block-start: .3rem; padding: .5rem .7rem; font-size: var(--step--1); font-weight: 500; color: var(--cat-iso); text-decoration: underline; border-radius: var(--radius-sm); } .a11y__link:hover { background: var(--ground-2); } .a11y__opt { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .7rem; border-radius: var(--radius-sm); font-size: var(--step--1); font-weight: 500; text-align: start; background: var(--ground-2); transition: background-color .2s var(--ease); } .a11y__opt:hover { background: color-mix(in srgb, var(--cat-iso) 12%, var(--ground-2)); } /* Индикатор вкл/выкл */ .a11y__opt::after { content: "○"; color: var(--ink-soft); } .a11y__opt[aria-pressed="true"] { background: color-mix(in srgb, var(--cat-iso) 16%, var(--surface)); } .a11y__opt[aria-pressed="true"]::after { content: "●"; color: var(--cat-iso); } /* Cookie-баннер снизу */ .cookies { position: fixed; z-index: 340; inset-inline: 1rem; inset-block-end: 1rem; max-width: 640px; margin-inline: auto; display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); transform: translateY(160%); transition: transform .5s var(--ease-out); } .cookies.is-show { transform: none; } .cookies__text { flex: 1 1 260px; font-size: var(--step--1); color: var(--ink-soft); } .cookies__text b { color: var(--ink); } .cookies__text a {color: var(--is-coral); text-decoration: underline;} .cookies__text a:hover {text-decoration: none;} .cookies__actions { display: flex; gap: .5rem; } .cookies .btn { padding: .65em 1.2em; font-size: var(--step--1); } /* ========================================================================== Анимации: reveal + stagger + parallax ========================================================================== */ .reveal { opacity: 0; transform: translateY(34px) scale(.985); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--reveal-delay, 0s); will-change: opacity, transform; } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .photocard img, .heroslide__bg img, .club__media img, .setsplit__media img { transform: none !important; } /* parallax наборов тоже гасим */ } /* ========================================================================== Селектор языка: кнопка в шапке + модалка со списком (стиль Zara) Языки: HE / EN / RU — новый язык = строка в модалке + объект в I18N ========================================================================== */ /* Кнопка в шапке: глобус + текущий код языка */ .langsel { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: var(--radius); background: rgba(255,255,255,.1); font-family: var(--font-display); font-weight: var(--w-strong); font-size: .76rem; letter-spacing: .05em; color: #fff; transition: background-color .2s var(--ease); text-transform: uppercase; } .langsel:hover { background: rgba(255,255,255,.18); } .langsel svg { width: 15px; height: 15px; opacity: .75; } /* Модалка выбора языка */ .langmodal { position: fixed; inset: 0; z-index: 370; display: grid; place-items: center; padding: 1.5rem; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; } .langmodal.is-open { visibility: visible; opacity: 1; } .langmodal__scrim { position: absolute; inset: 0; background: rgba(20,10,22,.55); backdrop-filter: blur(3px); } .langmodal__card { position: relative; width: min(360px, 100%); background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.6rem; transform: translateY(14px); transition: transform .3s var(--ease-out); display: flex; flex-direction: column; gap: .35rem; } .langmodal.is-open .langmodal__card { transform: none; } .langmodal__title { font-size: var(--step-1); margin-block-end: .6rem; } .langmodal__close { position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; width: 34px; height: 34px; border-radius: var(--radius); display: grid; place-items: center; background: var(--ground-2); font-size: .95rem; } /* Строка языка: название + код; активный — рамка-акцент и галочка */ .langmodal__row { display: flex; align-items: center; gap: .7rem; padding: .8rem .9rem; border-radius: var(--radius); border: 1.5px solid var(--border); text-align: start; font-weight: 500; transition: border-color .2s var(--ease), background-color .2s var(--ease); } .langmodal__row:hover { background: var(--ground-2); } .langmodal__row.is-active { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); } .langmodal__code { margin-inline-start: auto; font-size: .74rem; color: var(--ink-soft); letter-spacing: .06em; } .langmodal__row.is-active .langmodal__code::after { content: " ✓"; color: var(--accent); font-weight: 600; } /* ========================================================================== INSTICK SETS: саб-бренд + инфографика состава/выгоды в блоке наборов ========================================================================== */ /* Строка суб-бренда: логотип + слово SETS с широким трекингом */ .setsplit__brand { display: flex; align-items: center; gap: .55rem; } .setsplit__brand img { height: 26px; width: auto; border-radius: 3px; } .setsplit__brand-word { font-family: var(--font-display); font-weight: var(--w-strong); font-size: 1.05rem; letter-spacing: .32em; color: #FF9082; direction: ltr; /* латинское слово SETS */ } /* Факты-инфографика: число + подпись, разделены тонкими линиями */ .setfacts { display: flex; gap: 1.4rem; flex-wrap: wrap; margin-block-start: .3rem; } .setfact { display: flex; flex-direction: column; gap: .1rem; padding-inline-end: 1.4rem; border-inline-end: 1px solid rgba(255,255,255,.16); } .setfact:last-child { border-inline-end: 0; padding-inline-end: 0; } .setfact__num { font-family: var(--font-display); font-weight: var(--w-strong); font-size: var(--step-1); color: #fff; font-variant-numeric: tabular-nums; } .setfact__label { font-size: .78rem; color: rgba(255,255,255,.55); font-weight: 300; } /* «Что внутри»: мини-чипы вкусов */ .setinc { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; } .setinc__label { font-size: .78rem; color: rgba(255,255,255,.5); margin-inline-end: .2rem; } .setinc__chip { padding: .18rem .55rem; border-radius: var(--radius); border: 1px solid rgba(255,255,255,.25); color: rgba(255,255,255,.85); font-size: .74rem; font-weight: 500; } /* ========================================================================== Каталог: «табы + стрелки» на одной линии ========================================================================== */ .tabsbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.6rem; } .tabsbar .tabs { margin-block-end: 0; } /* ========================================================================== Блок «תוצרת גרמניה» — CSS-флаг + короткий текст + чипы качества ========================================================================== */ .germany { display: flex; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); flex-wrap: wrap; padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } /* Флаг Германии на чистом CSS: три горизонтальные полосы */ .flag-de { width: 72px; height: 46px; flex: 0 0 auto; border-radius: var(--radius); overflow: hidden; display: grid; grid-template-rows: 1fr 1fr 1fr; box-shadow: var(--shadow-soft); } .flag-de span:nth-child(1) { background: #111; } .flag-de span:nth-child(2) { background: #DD0000; } .flag-de span:nth-child(3) { background: #FFCE00; } .germany__text { flex: 1 1 300px; min-width: 0; } .germany__title { font-size: var(--step-2); } .germany__sub { margin-block-start: .35rem; color: var(--ink-soft); font-weight: 300; font-size: var(--step-0); max-width: 52ch; } .germany__chips { display: flex; flex-wrap: wrap; gap: .45rem; } .germany__chip { display: inline-flex; align-items: center; gap: .35rem; padding: .45rem .85rem; border-radius: var(--radius); background: var(--ground-2); font-size: var(--step--1); font-weight: 500; } /* В LTR-режиме (EN) стрелки «←» в кнопках разворачиваем зеркально */ [dir="ltr"] .btn__arrow, [dir="ltr"] .arrowlink { --flip: -1; } [dir="ltr"] .btn__arrow { transform: scaleX(-1); } [dir="ltr"] .btn:hover .btn__arrow { transform: scaleX(-1) translateX(-4px); } /* ========================================================================== Модальная форма «כתוב ביקורת» (демо, без бэкенда) ========================================================================== */ .revmodal { position: fixed; inset: 0; z-index: 320; display: grid; place-items: center; padding: 1.5rem; visibility: hidden; opacity: 0; transition: opacity .3s var(--ease), visibility .3s; } .revmodal.is-open { visibility: visible; opacity: 1; } .revmodal__scrim { position: absolute; inset: 0; background: rgba(43,27,46,.55); } .revmodal__card { position: relative; width: min(480px, 100%); max-height: calc(100svh - 3rem); overflow-y: auto; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.8rem; transform: translateY(20px); transition: transform .35s var(--ease-out); display: flex; flex-direction: column; gap: 1rem; } .revmodal.is-open .revmodal__card { transform: none; } .revmodal__title { font-size: var(--step-2); } .revmodal__close { position: absolute; inset-block-start: .9rem; inset-inline-end: .9rem; width: 36px; height: 36px; border-radius: var(--radius); display: grid; place-items: center; background: var(--ground-2); font-size: 1rem; } .revmodal__close:hover { background: var(--border); } .revmodal label { font-size: var(--step--1); font-weight: 500; display: block; margin-block-end: .35rem; } .revmodal input[type="text"], .revmodal textarea { width: 100%; padding: .8em 1em; border-radius: var(--radius-sm); border: 1.5px solid var(--border); background: var(--ground-2); font: inherit; color: var(--ink); } .revmodal input:focus, .revmodal textarea:focus { outline: none; border-color: var(--accent); } .revmodal textarea { min-height: 110px; resize: vertical; } /* Выбор оценки: 5 кнопок-звёзд, заполняются до выбранной */ .rvstars { display: flex; gap: .2rem; direction: ltr; justify-content: flex-end; } .rvstars__star { font-size: 1.7rem; color: var(--border); padding: .1rem; transition: color .15s var(--ease), transform .15s var(--ease); } .rvstars__star.is-on { color: var(--is-star); } .rvstars__star:hover { transform: scale(1.15); } /* Загрузка фото: стилизованная кнопка + имя файла */ .revmodal__file { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; } .revmodal__file input[type="file"] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .revmodal__filebtn { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1.1rem; border-radius: var(--pill); box-shadow: inset 0 0 0 1.5px var(--border); font-family: var(--font-display); font-weight: 500; font-size: var(--step--1); cursor: pointer; transition: background-color .2s var(--ease); } .revmodal__filebtn:hover { background: var(--ground-2); } .revmodal__filename { font-size: var(--step--1); color: var(--ink-soft); } .revmodal__thanks { text-align: center; padding-block: 2rem; font-size: var(--step-1); } /* ========================================================================== v17 · Кредит разработчика в футере (ненавязчиво, в нижней строке) ========================================================================== */ .footer__dev { display: inline-flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.45); font-size: var(--step--1); } .footer__dev a { color: rgba(255,255,255,.65); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; transition: color .2s var(--ease); } .footer__dev a:hover { color: var(--is-coral); } /* Место под лого агентства (файла нет в brief — компактная монограмма) */ .footer__dev-logo { width: 20px; height: 20px; border-radius: 4px; flex: 0 0 auto; display: grid; place-items: center; background: rgba(255,255,255,.12); font-family: var(--font-display); font-weight: 600; font-size: .6rem; letter-spacing: .02em; color: #fff; direction: ltr; } /* ========================================================================== INSTICK Stories Viewer — Instagram-style fullscreen popup Добавлено к общим стилям главной страницы. ========================================================================== */ body.story-viewer-open { overflow: hidden; overscroll-behavior: none; } .story-viewer { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(circle at 50% 22%, rgba(45, 75, 135, .48), transparent 42%), linear-gradient(135deg, #172654 0%, #07102f 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility .25s ease; } .story-viewer.is-open { opacity: 1; visibility: visible; pointer-events: auto; } .story-viewer__close { position: fixed; inset-block-start: 16px; inset-inline-start: 16px; z-index: 8; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: #fff; color: #0c183c; box-shadow: 0 12px 34px rgba(0, 0, 0, .24); cursor: pointer; font-size: 0; } .story-viewer__close::before, .story-viewer__close::after { content: ""; position: absolute; width: 18px; height: 2px; border-radius: 2px; background: currentColor; } .story-viewer__close::before { transform: rotate(45deg); } .story-viewer__close::after { transform: rotate(-45deg); } .story-viewer__stage { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .story-viewer__card { position: relative; width: min(410px, calc(100vw - 150px)); height: min(730px, calc(100svh - 48px)); aspect-ratio: 9 / 16; overflow: hidden; border-radius: 20px; background: #090c16; box-shadow: 0 32px 90px rgba(0, 0, 0, .52); transform: scale(.97); transition: transform .25s ease; isolation: isolate; } .story-viewer.is-open .story-viewer__card { transform: scale(1); } .story-viewer__media, .story-viewer__media img, .story-viewer__media video { width: 100%; height: 100%; } .story-viewer__media { position: absolute; inset: 0; background: #090c16; } .story-viewer__media img, .story-viewer__media video { display: block; object-fit: cover; } .story-viewer__media img[hidden], .story-viewer__media video[hidden] { display: none !important; } .story-viewer__shade { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, transparent 24%), linear-gradient(0deg, rgba(0,0,0,.34) 0%, transparent 24%); } .story-viewer__progress { position: absolute; z-index: 5; inset-block-start: 11px; inset-inline: 12px; display: flex; gap: 5px; direction: ltr; } .story-viewer__progress-item { position: relative; flex: 1 1 0; height: 3px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.35); } .story-viewer__progress-fill { position: absolute; inset: 0; transform: scaleX(0); transform-origin: left center; background: #fff; will-change: transform; } .story-viewer__top { position: absolute; z-index: 5; inset-block-start: 27px; inset-inline: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; } .story-viewer__identity { min-width: 0; display: flex; align-items: center; gap: 9px; } .story-viewer__avatar { width: 34px; height: 34px; flex: 0 0 34px; overflow: hidden; border-radius: 50%; border: 1px solid rgba(255,255,255,.75); background: rgba(255,255,255,.18); } .story-viewer__avatar img { width: 100%; height: 100%; object-fit: cover; } .story-viewer__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: .88rem; font-weight: 600; text-shadow: 0 1px 5px rgba(0,0,0,.5); } .story-viewer__mute { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: rgba(15, 18, 29, .52); backdrop-filter: blur(8px); cursor: pointer; } .story-viewer__mute svg { width: 18px; height: 18px; } .story-viewer__caption { position: absolute; z-index: 5; inset-inline: 18px; inset-block-end: 22px; color: #fff; font-family: var(--font-display); font-size: 1rem; font-weight: 600; line-height: 1.45; text-align: center; text-shadow: 0 2px 12px rgba(0,0,0,.72); } .story-viewer__tap { position: absolute; z-index: 4; inset-block: 0; width: 42%; border: 0; padding: 0; background: transparent; cursor: pointer; } .story-viewer__tap--prev { inset-inline-start: 0; } .story-viewer__tap--next { inset-inline-end: 0; } .story-viewer__nav { position: absolute; z-index: 7; inset-block-start: 50%; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.10); color: #fff; backdrop-filter: blur(8px); transform: translateY(-50%); cursor: pointer; font-size: 1.7rem; line-height: 1; transition: background-color .2s ease, opacity .2s ease; } .story-viewer__nav:hover { background: rgba(255,255,255,.20); } .story-viewer__nav[disabled] { opacity: .25; cursor: default; } .story-viewer__nav--prev { inset-inline-start: calc(50% - 270px); } .story-viewer__nav--next { inset-inline-end: calc(50% - 270px); } .story-viewer__loader { position: absolute; z-index: 6; inset-block-start: 50%; inset-inline-start: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255,255,255,.28); border-block-start-color: #fff; border-radius: 50%; animation: story-spin .75s linear infinite; } .story-viewer__loader[hidden] { display: none; } @keyframes story-spin { to { transform: rotate(360deg); } } @media (max-width: 720px) { .story-viewer { padding: 0; background: #050919; } .story-viewer__card { width: 100vw; height: 100svh; max-width: none; max-height: none; border-radius: 0; aspect-ratio: auto; } .story-viewer__close { inset-block-start: 14px; inset-inline-start: 12px; width: 40px; height: 40px; z-index: 12; background: rgba(15,18,29,.55); color: #fff; box-shadow: none; backdrop-filter: blur(8px); } .story-viewer__nav { display: none; } .story-viewer__progress { inset-block-start: 10px; inset-inline: 10px; } .story-viewer__top { inset-block-start: 25px; inset-inline: 12px 58px; } .story-viewer__caption { inset-block-end: 28px; } } @media (prefers-reduced-motion: reduce) { .story-viewer, .story-viewer__card { transition: none; } .story-viewer__loader { animation-duration: 1.5s; } } .searchov__ajax[hidden], .searchov__defaults[hidden] { display: none !important; } .searchov__ajax { width: 100%; } .searchov__ajax-block { margin-top: 24px; } .searchov__ajax-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 14px; } .searchov__ajax-head h6 { margin: 0; } .searchov__all { color: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; } .searchov__loading, .searchov__empty { display: flex; align-items: center; justify-content: center; min-height: 100px; padding: 24px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 18px; background: #fff; text-align: center; } .searchov__empty { flex-direction: column; gap: 7px; } .searchov__empty strong { font-size: 18px; } .searchov__empty span { font-size: 14px; opacity: 0.65; } .searchov__spinner { width: 22px; height: 22px; margin-inline-end: 10px; border: 2px solid rgba(0, 0, 0, 0.15); border-top-color: currentColor; border-radius: 50%; animation: searchov-spinner 0.7s linear infinite; } @keyframes searchov-spinner { to { transform: rotate(360deg); } } .searchov__prods--ajax { display: grid; } .searchov__prod-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; } .searchov__prod-brand { margin-bottom: 3px; font-size: 12px; opacity: 0.6; } .searchov__prod-title { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .searchov__prod-article { margin-top: 4px; font-size: 11px; opacity: 0.5; } .searchov__prod-price { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 3px; } .searchov__prod-price del { font-size: 12px; opacity: 0.5; } .searchov__prod-price b { white-space: nowrap; } .search-page { min-height: 65vh; } .search-page__hero { padding: 60px 0 35px; } .search-page__title { margin: 0; font-size: 48px; line-height: 1.1; } .search-page__form { display: flex; max-width: 760px; margin-top: 28px; gap: 10px; } .search-page__form input { min-width: 0; flex: 1 1 auto; height: 58px; padding: 0 20px; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 16px; background: #fff; color: inherit; font: inherit; } .search-page__form button { flex: 0 0 auto; min-width: 130px; height: 58px; padding: 0 22px; border: 0; border-radius: 16px; cursor: pointer; font: inherit; font-weight: 700; } .search-page__results { padding-top: 20px; } .search-page__empty { grid-column: 1 / -1; padding: 60px 20px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 20px; text-align: center; } @media (max-width: 767px) { .search-page__hero { padding: 35px 0 25px; } .search-page__title { font-size: 34px; } .search-page__form { flex-direction: column; } .search-page__form button { width: 100%; } } .footer__uweb { display: flex; justify-content: center; margin-top: 10px; margin-bottom: 28px; } .footer__uweb a { display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.6); transition: .3s; } .footer__uweb svg { display: block; width: 120px; height: auto; } .footer__uweb a:hover { color: #fff; transform: translateY(-2px); } /* ========================================================================== FAQ ========================================================================== */ .faq-section { background: var(--ground); } .faq-section__head { margin-block-end: clamp(1.8rem, 3vw, 2.8rem); text-align: center; } .faq-section__title { max-width: 18ch; margin-inline: auto; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.4rem); line-height: 1.08; text-align: center; } .faq-list { width: min(920px, 100%); margin-inline: auto; border-block-start: 1px solid var(--border); } .faq-item { border-block-end: 1px solid var(--border); } .faq-item > summary { list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item__summary { display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 1rem; width: 100%; padding-block: 1.25rem; padding-inline: 0; cursor: pointer; text-align: start; } .faq-item__question { font-family: var(--font-display); font-size: clamp(1.02rem, .98rem + .25vw, 1.2rem); font-weight: var(--w-strong); line-height: 1.45; color: var(--ink); display: block; } .faq-item__toggle { position: relative; width: 36px; height: 36px; margin-inline-start: auto; border-radius: var(--radius); background: var(--ground-2); box-shadow: inset 0 0 0 1px var(--border); transition: background-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease); } .faq-item__toggle::before, .faq-item__toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 14px; height: 2px; background: var(--is-dark); border-radius: 2px; transform: translate(-50%, -50%); transition: transform .25s var(--ease), background-color .25s var(--ease), opacity .25s var(--ease); } .faq-item__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item__summary:hover .faq-item__question { color: var(--accent); } .faq-item__summary:hover .faq-item__toggle { background: color-mix(in srgb, var(--accent) 8%, var(--ground-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, var(--border)); } .faq-item[open] .faq-item__question { color: var(--accent); } .faq-item[open] .faq-item__toggle { background: var(--accent); box-shadow: none; } .faq-item[open] .faq-item__toggle::before, .faq-item[open] .faq-item__toggle::after { background: #fff; } .faq-item[open] .faq-item__toggle::after { opacity: 0; } .faq-item__content { padding-block-end: 1.35rem; } .faq-item__answer { max-width: 68ch; color: var(--ink-soft); font-size: var(--step-0); font-weight: 300; line-height: 1.8; } .faq-item__answer p { margin: 0; } .faq-item__answer p + p { margin-block-start: .8rem; } .faq-item__summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); } @media (max-width: 767px) { .faq-item__summary { grid-template-columns: 1fr 40px; gap: .85rem; padding-block: 1rem; } .faq-item__toggle { width: 32px; height: 32px; } .faq-item__toggle::before, .faq-item__toggle::after { width: 12px; } .faq-item__answer { max-width: none; } } /* ========================================================================== SEO text · типографический контент без классов внутри ========================================================================== */ .seo-text { width: min(920px, 100%); margin-inline: auto; color: var(--ink); font-size: var(--step-0); line-height: 1.8; } /* Заголовки -------------------------------------------------------------------------- */ .seo-text h2, .seo-text h3, .seo-text h4 { color: var(--ink); font-family: var(--font-display); font-weight: var(--w-title); line-height: 1.2; } .seo-text h2 { margin-block: 0 1.2rem; font-size: clamp(1.7rem, 1.35rem + 1.4vw, 2.5rem); } .seo-text h2:not(:first-child) { margin-block-start: clamp(2.6rem, 5vw, 4rem); } .seo-text h3 { margin-block: 2.2rem .9rem; font-size: clamp(1.3rem, 1.15rem + .7vw, 1.7rem); } .seo-text h4 { margin-block: 1.8rem .7rem; font-size: var(--step-1); font-weight: var(--w-strong); } /* Текст -------------------------------------------------------------------------- */ .seo-text p { margin-block: 0 1.15rem; color: var(--ink-soft); font-weight: 300; } .seo-text p:last-child { margin-block-end: 0; } .seo-text strong, .seo-text b { color: var(--ink); font-weight: var(--w-strong); } /* Ссылки -------------------------------------------------------------------------- */ .seo-text a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s var(--ease); } .seo-text a:hover { color: var(--accent-deep); } /* Списки -------------------------------------------------------------------------- */ .seo-text ul, .seo-text ol { margin-block: .8rem 1.4rem; padding-inline-start: 1.5rem; color: var(--ink-soft); } .seo-text li { padding-inline-start: .3rem; } .seo-text li + li { margin-block-start: .45rem; } .seo-text li::marker { color: var(--accent); font-weight: var(--w-strong); } /* Цитата -------------------------------------------------------------------------- */ .seo-text blockquote { margin-block: 2rem; margin-inline: 0; padding-block: 1rem; padding-inline: 1.3rem; border-inline-start: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); color: var(--ink); font-family: var(--font-display); font-size: var(--step-1); line-height: 1.6; } /* Разделитель -------------------------------------------------------------------------- */ .seo-text hr { margin-block: 2.5rem; border: 0; border-block-start: 1px solid var(--border); } /* Изображения -------------------------------------------------------------------------- */ .seo-text img { max-width: 100%; height: auto; margin-block: 1.5rem; border-radius: var(--radius-lg); } /* Таблицы -------------------------------------------------------------------------- */ .seo-text table { width: 100%; margin-block: 1.5rem; border-collapse: collapse; font-size: var(--step--1); } .seo-text th, .seo-text td { padding: .8rem 1rem; border: 1px solid var(--border); text-align: start; vertical-align: top; } .seo-text th { background: var(--ground-2); color: var(--ink); font-family: var(--font-display); font-weight: var(--w-strong); } .seo-text td { color: var(--ink-soft); } /* Mobile -------------------------------------------------------------------------- */ @media (max-width: 767px) { .seo-text { line-height: 1.75; } .seo-text h2:not(:first-child) { margin-block-start: 2.4rem; } .seo-text h3 { margin-block-start: 1.9rem; } .seo-text ul, .seo-text ol { padding-inline-start: 1.25rem; } .seo-text table { display: block; overflow-x: auto; } } /* ========================================================= PRODUCT CARD — MOBILE FIX 2 карточки в ряд цена отдельно, кнопки по краям ========================================================= */ @media (max-width: 767px) { .product { min-width: 0; gap: .55rem; } .product__body { min-width: 0; padding-inline: 0; gap: .22rem; } /* Название */ .product__name { width: 100%; min-width: 0; font-size: 16px; line-height: 1.25; } /* Описание немного компактнее */ .product__desc { font-size: 12px; line-height: 1.45; min-height: 35px; -webkit-line-clamp: 2; } /* Нижняя часть теперь вертикальная: сначала цена, потом кнопки */ .product__foot { width: 100%; margin-block-start: auto; padding-block-start: .45rem; display: flex; flex-direction: column; align-items: stretch; gap: .55rem; } /* Цена всегда одной строкой */ .product__price { display: flex; align-items: baseline; flex-wrap: nowrap; width: 100%; gap: 5px; font-size: 17px; line-height: 1.2; white-space: nowrap; } .product__price del { flex: 0 0 auto; margin: 0; font-size: 12px; white-space: nowrap; } /* Кнопки занимают всю ширину */ .product__actions { width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 6px; } /* "Подробнее" занимает всё свободное место */ .product__more { flex: 1 1 auto; min-width: 0; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 13px; line-height: 1; white-space: nowrap; } /* Корзина — квадрат с другой стороны */ .product__quick { flex: 0 0 40px; width: 40px; height: 40px; } .product__quick svg { width: 17px; height: 17px; } /* Milk / Pareve labels: compact on two-column mobile cards */ .product__milk-badges { top: 6px; left: 6px; gap: 4px; max-width: calc(100% - 12px); } .product__milk-badge { min-height: 24px; padding: 4px 6px; gap: 4px; font-size: 9px; line-height: 1.1; border-radius: 4px; max-width: 100px; width: auto; white-space: initial; /* min-height: auto; */ display: flex; /* width: 100px; */ } .product__milk-badge--nodairy { order: -1; } .product__milk-badge svg { width: 12px; height: 12px; flex-basis: 12px; } .product__desc__milk { margin-block-start: 4px; padding: 7px 7px 7px 9px; gap: 2px; } .product__desc__milk span { font-size: 10px; line-height: 1.25; } .product__desc__milk b { font-size: 9px; line-height: 1.35; } } /* ========================================================= MOBILE DRAWER — FINAL STABLE VERSION No max-height calculations: open/close is controlled only by aria-expanded. RTL/LTR safe, phone + tablet. ========================================================= */ @media (max-width: 1079px) { .drawer__panel { width: min(88vw, 360px); max-width: 360px; padding: 18px 18px 26px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .drawer__head { margin-block-end: 10px; } .acc__btn { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 4px; border-block-end: 1px solid var(--border); font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.25; text-align: start; } .acc__btn .nav__caret { width: 28px; height: 28px; flex: 0 0 28px; display: flex; align-items: center; justify-content: center; font-size: 10px; transition: transform .25s ease; } .acc__btn[aria-expanded="true"] .nav__caret { transform: rotate(180deg); } /* Closed: physically removed from layout. This avoids clipping/empty height. */ .acc__body { display: none !important; width: 100%; min-width: 0; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .acc__btn[aria-expanded="true"] + .acc__body { display: block !important; max-height: none !important; overflow: visible !important; } .acc__body-inner { width: 100%; min-width: 0; min-height: 0; display: flex !important; flex-direction: column; gap: 6px !important; margin: 0 !important; padding: 9px 0 12px !important; overflow: visible !important; } .acc__body-inner > :first-child, .acc__body-inner > :last-child { margin-block: 0 !important; } /* Product categories */ .acc__body-inner .drawer__tile { width: 100%; min-width: 0; min-height: 48px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 5px 8px; border-radius: 6px; box-sizing: border-box; background: color-mix(in srgb, var(--cat, var(--accent)) 7%, var(--surface)); font-family: var(--font-display); font-size: 14px; font-weight: 600; line-height: 1.25; } .acc__body-inner .mega__row-thumb { width: 40px; height: 40px; flex: 0 0 40px; overflow: hidden; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--border); } .acc__body-inner .mega__row-thumb img { width: 100%; height: 100%; object-fit: cover; } /* Learn links */ .acc__body-inner .mega__link { position: relative; width: 100%; min-width: 0; min-height: 40px; flex: 0 0 auto; display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 8px 8px; border-radius: 5px; box-sizing: border-box; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.35; transition: background-color .2s ease, color .2s ease; } .acc__body-inner .mega__link:hover, .acc__body-inner .mega__link:active { background: var(--ground-2); color: var(--accent); } .acc__body-inner .mega__link::after { content: "›"; flex: 0 0 auto; margin-inline-start: auto; opacity: .35; font-size: 18px; line-height: 1; transform: none; } html[dir="rtl"] .acc__body-inner .mega__link::after { content: "‹"; transform: scaleX(-1); } html[dir="ltr"] .acc__body-inner .mega__link::after { content: "›"; transform: none; } .drawer__link { min-height: 54px; display: flex; align-items: center; padding: 12px 4px; font-size: 17px; } } /* Phones */ @media (max-width: 767px) { .drawer__panel { width: calc(100vw - 36px); max-width: 360px; padding: 16px 18px 24px; } .acc__btn { min-height: 52px; font-size: 16px; } .acc__body-inner .drawer__tile { min-height: 46px; font-size: 14px; } .acc__body-inner .mega__row-thumb { width: 38px; height: 38px; flex-basis: 38px; } .acc__body-inner .mega__link { min-height: 40px; font-size: 14px; } } /* Tablets / narrow desktop before the 1080px desktop navigation breakpoint */ @media (min-width: 768px) and (max-width: 1079px) { .drawer__panel { width: 360px; max-width: 42vw; padding: 18px 22px 28px; } } .club__promo-text { max-width: 38ch; color: rgba(255,255,255,.72); font-size: var(--step--1); font-weight: 300; } .club__promo { width: fit-content; min-width: 220px; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px dashed rgba(255,255,255,.32); border-radius: var(--radius); background: rgba(255,255,255,.08); } .club__promo-label { color: rgba(255,255,255,.55); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; } .club__promo-code { color: #FFB9AF; font-family: var(--font-display); font-size: 28px; font-weight: 600; line-height: 1.1; letter-spacing: .08em; user-select: all; } @media (max-width: 767px) { .club__promo { width: 100%; min-width: 0; } .club__promo-code { font-size: 24px; } } /* ========================================================================== CLUB — welcome promo for registered customer without orders ========================================================================== */ .club__welcome-promo { position: relative; width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-block-start: .4rem; padding: 18px 20px 20px; border: 1px solid rgba(255, 185, 175, .38); border-radius: var(--radius); background: linear-gradient( 135deg, rgba(239, 91, 76, .17), rgba(255, 255, 255, .06) ); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 14px 35px -24px rgba(0,0,0,.8); } /* Маленькая верхняя подпись */ .club__welcome-promo-label { color: #FFB9AF; font-family: var(--font-display); font-size: .72rem; font-weight: 600; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; } /* Описание */ .club__welcome-promo-text { color: rgba(255,255,255,.72); font-size: .84rem; font-weight: 400; line-height: 1.4; } /* Сам промокод */ .club__welcome-promo-code { display: block; width: 100%; margin-block: 8px 2px; padding: 16px 18px; border: 1px dashed rgba(255,255,255,.34); border-radius: var(--radius); background: rgba(0,0,0,.22); color: #fff; font-family: var(--font-display); font-size: clamp(1.8rem, 1.35rem + 1.8vw, 2.7rem); font-weight: 600; line-height: 1; letter-spacing: .12em; text-align: center; cursor: text; user-select: all; -webkit-user-select: all; } /* Небольшая подсказка */ .club__welcome-promo-hint { color: rgba(255,255,255,.46); font-size: .72rem; font-weight: 300; line-height: 1.4; } /* RTL / Hebrew */ html[dir="rtl"] .club__welcome-promo { align-items: flex-start; text-align: start; } /* Mobile */ @media (max-width: 767px) { .club__welcome-promo { max-width: none; padding: 16px; } .club__welcome-promo-code { padding: 14px 12px; font-size: 1.8rem; letter-spacing: .08em; } } /* ========================================================================== */ /* Footer legal links — centered vertical layout */ /* ========================================================================== */ .footer__legal { display: flex; flex-direction: column; align-items: center; gap: .55rem; text-align: center; } .footer__legal > span { display: none; } .footer__legal a { display: block; color: rgba(255,255,255,.72); font-size: 16px; line-height: 1.4; transition: color .2s var(--ease); } .footer__legal a:hover { color: var(--is-coral); } @media (max-width: 767px) { .footer__bottom { flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; text-align: center; } .footer__legal { width: 100%; gap: .7rem; } .footer__legal a { width: 100%; font-size: 16px; text-align: center; } .footer__dev { justify-content: center; flex-wrap: wrap; text-align: center; } } /* ========================================================================== */ /* FINAL HOME RESPONSIVE POLISH — 2026-08-31 */ /* Hero width / setsplit mobile controls / kosher badge / mobile footer */ /* ========================================================================== */ /* Desktop: hero text block slightly wider */ @media (min-width: 1024px) { .hero__content { max-width: 740px; } .heroslide--promo .hero__content { max-width: none; } } /* Kosher label should size itself from its text */ .stat__kosher { width: max-content; min-width: 62px; max-width: 100%; height: auto; min-height: 62px; padding: .65rem .9rem; white-space: nowrap; line-height: 1.15; text-align: center; } /* Tablet / mobile: sets slider controls must never overlap content */ @media (max-width: 899px) { .setsplit { min-height: 0; overflow: hidden; } .setsplit__slide { position: relative; inset: auto; display: none; grid-template-rows: 240px auto; min-width: 0; } .setsplit__slide.is-active { display: grid; } .setsplit__media, .setsplit__body { min-width: 0; max-width: 100%; } .setsplit__body { /* controls now live below the text, so no huge reserved bottom padding */ padding: 1.35rem; padding-block-end: 1.35rem; } .setsplit__title, .setsplit__desc, .setsplit__priceline, .setfacts, .setinc { max-width: 100%; } .setsplit__desc { overflow-wrap: anywhere; } .setsplit__controls { position: relative; inset: auto; width: 100%; margin-block-start: .7rem; padding-block-start: .85rem; border-block-start: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; gap: .65rem; } .setsplit__arrow { flex: 0 0 40px; } .setsplit__dots { min-width: 0; justify-content: center; } } @media (max-width: 767px) { .setsplit__slide { grid-template-rows: 210px auto; } .setsplit__body { padding: 1.1rem; gap: .65rem; } .setsplit__title { font-size: clamp(1.55rem, 7vw, 2.1rem); line-height: 1.08; } .setsplit__desc { font-size: .95rem; line-height: 1.55; } .setfacts { gap: .8rem; } .setfact { padding-inline-end: .8rem; } .setsplit__controls { margin-block-start: .55rem; padding-block-start: .75rem; } /* Entire footer centered on phones */ .footer, .footer__grid, .footer__col, .footer__col--brand, .footer__bottom { text-align: center; } .footer__grid { justify-items: center; } .footer__col { width: 100%; display: flex; flex-direction: column; align-items: center; } .footer__brand-link, .footer__brand-logo { margin-inline: auto; } .footer__about { margin-inline: auto; max-width: 34ch; } .footer__col ul { width: 100%; align-items: center; } .footer__col li, .footer__col a { text-align: center; } .footer__socials { justify-content: center; margin-inline: auto; } .footer__climate { width: auto; max-width: min(310px, 100%); margin-inline: auto; align-items: center; text-align: center; } .footer__climate > * { text-align: center; } .footer__bottom { width: 100%; align-items: center; justify-content: center; } .footer__legal, .footer__dev { margin-inline: auto; } } @media (max-width: 420px) { .stat__kosher { min-width: 0; min-height: 54px; padding: .55rem .7rem; font-size: 1rem; } .setsplit__slide { grid-template-rows: 190px auto; } .setsplit__arrow { width: 38px; height: 38px; flex-basis: 38px; } } /* Mobile: more space before setsplit slider controls */ @media (max-width: 767px) { .setsplit__controls { margin-block-start: 1.5rem; margin-block-end: 1.5rem; } } /* ========================================================================== */ /* SETS SPLIT — AUTO HEIGHT FIX */ /* Desktop: height follows the longest slide content, image stretches with it */ /* Controls have their own bottom area and do not overlap the CTA. */ /* ========================================================================== */ @media (min-width: 900px) { .setsplit { display: grid; min-height: 0; height: auto; overflow: hidden; } .setsplit__slide { position: relative; inset: auto; grid-area: 1 / 1; grid-template-columns: 1.05fr .95fr; grid-template-rows: auto; width: 100%; min-height: 540px; align-items: stretch; visibility: hidden; opacity: 0; pointer-events: none; } .setsplit__slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; } .setsplit__media { position: relative; min-height: 100%; overflow: hidden; } .setsplit__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .setsplit__body { min-width: 0; height: auto; padding: clamp(1.6rem, 3.5vw, 3rem); padding-block-end: 7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; } .setsplit__title, .setsplit__desc, .setsplit__priceline, .setfacts, .setinc { max-width: 100%; min-width: 0; } .setsplit__title, .setsplit__desc { overflow-wrap: break-word; word-break: normal; } .setsplit__cta { position: relative; z-index: 1; margin-block-start: .5rem; max-width: 100%; } .setsplit__controls { position: absolute; z-index: 5; inset-inline-end: clamp(1.6rem, 3.5vw, 3rem); inset-block-end: 1.4rem; display: flex; align-items: center; gap: .8rem; } } .ms2_total_cost, #ms2_order_cart_cost, #ms2_order_cost { direction: ltr; display: inline-block; } button[value="cart/add"], input[value="cart/add"] { display: none !important; } /* ========================================= ВРЕМЕННО СКРЫВАЕМ ЦЕНЫ НА ВСЕМ САЙТЕ ========================================= */ .product__price, .searchov__prod-price, .mega__prod-price, .pinfo__price, .fbt__price, .citem__price, .opt__price, .optrow__price, .abuy__price, .abuybar__price, .ainline__price, .bigset__price, .gift__price, .plan__price, .setcmp__price, .setsplit__price, .sbbottle__price, .sbcard__price, .sbitem__price, .sbplan__price, .sview__pprice, .rbuy__price, .pr-kit__price, .pr-line__price, .pr-prod__price, .pr-shipopt__price, .ms2_total_cost { display: none !important; }