/* ============================================================================ Главная INGRIAFARM — собственная вёрстка витрины (не зеркало старого сайта). Палитра и пластика бренда: оранжевый #F39B2B/#E69328, чернильный #040000, тёплый серый #F6F6F6, Montserrat, волны, лапки, кот-маскот. Светлую/тёмную тему ведёт класс theme-dark на (как во всей теме). Подключается только на главной (@push('theme_head') в catalog/index). ========================================================================== */ .if-home { --if-orange: #F39B2B; --if-orange-2: #E69328; --if-ink: #040000; --if-paper: #FFFFFF; --if-soft: #F6F6F6; --if-dim: rgba(4, 0, 0, .62); --if-card: #F6F6F6; --if-line: rgba(4, 0, 0, .12); /* Полноширинные (100vw) блоки с наклоном и scale(1.02) — волна-подол, бегущая строка и её низ — вылезают на ~1vw за вьюпорт и давали лишний горизонтальный скролл. clip по X срезает этот декоративный перехлёст, НЕ создавая скролл- контейнер и не трогая вертикаль (гребни-призраки волны свободно торчат вверх). */ overflow-x: clip; } .theme-dark .if-home { --if-paper: #222222; --if-soft: #2D2D2D; --if-dim: rgba(255, 255, 255, .66); --if-card: #2D2D2D; --if-line: rgba(255, 255, 255, .16); --if-ink: #FFFFFF; } /* --- Общий каркас секций -------------------------------------------------- */ .if-sec { margin: 0 0 84px; } .if-sec--tight { margin-bottom: 64px; } .if-sec-head { margin-bottom: 34px; } .if-kicker { display: inline-flex; align-items: center; gap: 9px; font: 600 13px/1 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--if-orange-2); } .if-kicker::before { content: ''; width: 16px; height: 16px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-14deg); } .if-sec-title { margin: 10px 0 0; font: 800 clamp(24px, 3.2vw, 34px)/1.14 'Montserrat', sans-serif; text-transform: uppercase; color: var(--if-ink); } /* --- Кнопки --------------------------------------------------------------- */ .if-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 17px 28px; border-radius: 14px; font: 700 15px/1 'Montserrat', sans-serif; overflow: hidden; transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; } .if-btn--solid { background: linear-gradient(180deg, #f6a63c, #e0840f); color: #1c1712; box-shadow: 0 12px 26px -12px rgb(224 132 15 / .75); } .if-btn--solid:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -12px rgb(224 132 15 / .85); color: #1c1712; } /* Световой блик — как у orange-btn в motion.css */ .if-btn--solid::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); pointer-events: none; } .if-btn--solid:hover::after { animation: if-sheen .7s ease; } .if-btn--ghost { border: 2px solid var(--if-line); color: var(--if-ink); background: transparent; } .if-btn--ghost:hover { border-color: var(--if-orange); color: var(--if-ink); transform: translateY(-2px); box-shadow: 0 14px 26px -16px rgb(243 155 43 / .6); } /* --- Герой ----------------------------------------------------------------- */ /* Без нижнего отступа: волна-подол переходит прямо в бегущую строку */ .if-hero { position: relative; margin-bottom: 0; } /* Верхняя волна единого героя: тонкая оранжевая лента (продолжение оранжевой шапки, зазора между ними нет) «живой водой» переливается в бумажную страницу. Слои залиты БУМАГОЙ и заполняют низ ленты — их волнистый верх и есть граница «оранжевая вода → страница»; техника и анимации те же, что у волны-подола ниже (drift в противофазе + пена по гребню). */ .if-hero__topwave { position: relative; width: 100vw; /* -2px сверху: нахлёст на шапку глушит субпиксельный просвет фона на стыке */ margin: -2px 0 6px calc(50% - 50vw); height: clamp(2.6rem, 4vw, 4.2rem); background: #F39B2B; } .if-hero__topwave-layer { position: absolute; left: 0; /* Запас +1200px (период узора) справа: дрейф идёт transform-ом на композиторе (translateX на один период = бесшовный цикл), а не background-position-x — тот репейнтил 100vw-полосу КАЖДЫЙ кадр и на слабых машинах ронял FPS. Свес за правый край невидим: body { overflow-x: hidden } (style.css). */ right: -1200px; /* Запас снизу: передний слой «дышит» translate ±4px — без запаса при подъёме из-под бумаги мигала бы оранжевая полоска ленты */ bottom: -6px; background: repeat-x center bottom / 1200px 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C160,105 360,15 600,60 C840,105 1040,15 1200,60 L1200,120 L0,120 Z' fill='%23FFFFFF'/%3E%3C/svg%3E"); animation: if-wave-drift 22s linear infinite; will-change: transform; } .if-hero__topwave-back { height: 150%; opacity: .22; animation-duration: 40s; animation-direction: reverse; } .if-hero__topwave-mid { height: 128%; opacity: .42; animation-duration: 30s; } .if-hero__topwave-front { height: 112%; /* Дрейф — transform (общие keyframes), «дыхание» — отдельное свойство translate: два канала не конфликтуют и оба живут на композиторе */ animation: if-wave-drift 22s linear infinite, if-wave-swell 6s ease-in-out infinite alternate; } /* Пена по гребню передней волны: своей анимации больше нет — псевдо покрывает весь (расширенный) бокс переднего слоя и едет вместе с ним, скорость дрейфа у них и была одинаковой (22s) — синхрон сохранён */ .if-hero__topwave-front::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: repeat-x center bottom / 1200px 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C160,105 360,15 600,60 C840,105 1040,15 1200,60' fill='none' stroke='%23FFD79A' stroke-width='3.5'/%3E%3C/svg%3E"); opacity: .55; } /* Тёмная тема: «бумага» страницы тёмная — низ ленты перекрашивается в неё */ .theme-dark .if-hero__topwave-layer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C160,105 360,15 600,60 C840,105 1040,15 1200,60 L1200,120 L0,120 Z' fill='%23222222'/%3E%3C/svg%3E"); } .if-hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 30px; padding-top: 8px; } /* Страховка слоёв: если текст колонки всё же дотянется до сцены (экзотическая ширина/очень длинная фраза хвоста), он рисуется ПОВЕРХ блоба (z-index 1), а не исчезает под ним — читаемость важнее декора. */ .if-hero__copy { position: relative; z-index: 2; } .if-hero__eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; border: 1px solid var(--if-line); border-radius: 999px; font: 600 12px/1 'Montserrat', sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--if-dim); background: var(--if-soft); } .if-hero__eyebrow::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--if-orange); box-shadow: 0 0 0 4px rgb(243 155 43 / .22); } .if-hero__title { margin: 18px 0 0; font: 800 clamp(32px, 4.6vw, 54px)/1.08 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: -.01em; color: var(--if-ink); } .if-hero__title em { font-style: normal; color: var(--if-orange); /* Рукописное волнистое подчёркивание — жест логотипа. Высота и отступ в em (не px): заголовок текучий clamp(32→54px), поэтому em-единицы держат ОДИНАКОВУЮ близость росчерка к слову на любом кегле — иначе фикс. px «отрывается» вниз и липнет к строке-хвосту. Якорь left bottom: при появлении штрих рисуется слева-направо (см. .is-underline). */ background: no-repeat left bottom / 100% .18em url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 16' preserveAspectRatio='none'%3E%3Cpath d='M4 11 C40 3 78 13 112 8 C150 3 186 12 216 6' fill='none' stroke='%23F39B2B' stroke-width='5' stroke-linecap='round' opacity='.55'/%3E%3C/svg%3E"); padding-bottom: .08em; } /* Сменяемый хвост заголовка на СВОЕЙ строке в одну линию (nowrap): так число строк заголовка постоянно (2 фикс. + 1 хвост) — ни прыжка при смене текста, ни пустоты под строкой. Размер хвоста под ширину подгоняет JS (fitTail), одинаково для всех фраз, чтобы длинная не вылезла за колонку. */ .if-hero__rotate { display: block; white-space: nowrap; color: var(--if-orange-2); will-change: transform, opacity; } .if-hero__lead { margin: 20px 0 0; max-width: 54ch; font: 500 16px/1.65 'Montserrat', sans-serif; color: var(--if-dim); } .if-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; } .if-hero__stats { display: flex; flex-wrap: wrap; /* По низу: у стата часов dt мельче (см. --hours ниже), при верхнем выравнивании его подпись всплывала бы выше подписей соседей. */ align-items: flex-end; gap: 14px 44px; margin: 38px 0 0; padding: 0; } .if-hero__stat { margin: 0; } .if-hero__stat dt { font: 800 clamp(26px, 3vw, 34px)/1 'Montserrat', sans-serif; color: var(--if-ink); } .if-hero__stat dt::after { content: ''; display: block; width: 34px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--if-orange); } .if-hero__stat dd { margin: 8px 0 0; font: 600 12px/1.35 'Montserrat', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--if-dim); } /* Сцена: оранжевый блоб + кот + парящие чипы + следы лапок */ .if-hero__scene { position: relative; min-height: clamp(320px, 36vw, 470px); } /* Морф разведён на два слоя ради FPS: сам элемент несёт ТОЛЬКО статичную тень (анимированный border-radius пересчитывал бы её 80px-блюр каждый кадр — дорого на слабых машинах), а «пластилиновая» заливка живёт на ::before и морфится clip-path'ом (inset round = тот же синтаксис радиусов; в Chrome такая анимация уходит на композитор, в остальных — не дороже прежнего border-radius). Тень статичной формы под 80px-блюром неотличима от морфящей: амплитуда морфа тонет в размытии. */ .if-hero__blob { position: absolute; inset: 4% 2% 6% 6%; z-index: 1; border-radius: 53% 47% 56% 44% / 51% 55% 45% 49%; box-shadow: 0 40px 80px -40px rgb(224 132 15 / .55); } .if-hero__blob::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 120% at 30% 20%, #f8b055 0, var(--if-orange) 55%, #e88f1a 100%); /* Форма даётся ДВОЙНЫМ образом: border-radius (= кадр 0% морфа) + clip-path. border-radius клипает фон синхронно на первом же кадре, а анимируемый clip-path на iOS Safari при появлении блоба (композиторный слой: GSAP scale-интро + анимация clip-path после раскрытия прелоадера) 1–2 кадра НЕ применяется — и заливка ::before мелькала сплошным оранжевым ПРЯМОУГОЛЬНИКОМ. С border-radius:inherit в этот кадр фон уже скруглён — форма остаётся овалом. clip-path поверх продолжает давать морф (его сильные «острые» экскурсии мягко ограничены статичным радиусом — под 80px-тенью и на медленном 16s-пульсе разница незаметна). */ border-radius: inherit; clip-path: inset(0 round 53% 47% 56% 44% / 51% 55% 45% 49%); animation: if-blob-morph 16s ease-in-out infinite alternate; } /* НОЧНАЯ СЦЕНА (спека 2026-07-22): в тёмной теме дневной оранжевый блоб становится ЛУНОЙ — бледный серебристо-кремовый диск с холодным свечением. Морф-анимация сохраняется: пластика бренда едина днём и ночью. */ .theme-dark .if-hero__blob { box-shadow: 0 0 90px -18px rgb(214 226 255 / .38), 0 40px 90px -44px rgb(4 0 0 / .6); } .theme-dark .if-hero__blob::before { background: radial-gradient(120% 120% at 30% 20%, #F6F1E5 0, #E3DBC8 55%, #C6BBA2 100%); } /* Кратеры: вместо точечного узора — несколько мягких пятен по диску. Маска та же, что у дневного узора (см. базовый ::after ниже). */ .theme-dark .if-hero__blob::after { background-image: radial-gradient(circle at 27% 34%, rgb(140 128 104 / .30) 0 7%, transparent 9%), radial-gradient(circle at 58% 18%, rgb(140 128 104 / .24) 0 5%, transparent 7%), radial-gradient(circle at 71% 52%, rgb(140 128 104 / .28) 0 9%, transparent 11%), radial-gradient(circle at 42% 66%, rgb(140 128 104 / .22) 0 6%, transparent 8%), radial-gradient(circle at 82% 30%, rgb(140 128 104 / .18) 0 4%, transparent 6%); background-size: auto; /* Дневная маска прячет низ диска — луне кратеры нужны по всей поверхности, лишь с мягким затуханием к краю */ -webkit-mask-image: radial-gradient(120% 120% at 50% 40%, #000 0, transparent 82%); mask-image: radial-gradient(120% 120% at 50% 40%, #000 0, transparent 82%); } @keyframes if-blob-morph { 0% { clip-path: inset(0 round 53% 47% 56% 44% / 51% 55% 45% 49%); } 50% { clip-path: inset(0 round 46% 54% 44% 56% / 57% 45% 55% 43%); } 100% { clip-path: inset(0 round 55% 45% 50% 50% / 44% 56% 46% 54%); } } /* Точечный узор на блобе — фактура, чтобы не был плоским */ .if-hero__blob::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background-image: radial-gradient(rgba(255, 255, 255, .28) 1.5px, transparent 1.5px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(90% 90% at 70% 20%, #000 0, transparent 65%); mask-image: radial-gradient(90% 90% at 70% 20%, #000 0, transparent 65%); } .if-hero__cat { position: absolute; left: 50%; bottom: 4%; z-index: 3; /* выше орбит — фишки уходят за маскота на дальней дуге */ /* Ширина в % от сцены жёстко привязывает кота к блобу-«кружочку»: блоб = 92% сцены (inset 4% 2% 6% 6%), значит кот держит ≈78% его ширины на любой десктопной ширине. Сцена/блоб почти постоянны (контейнер ограничен по max-width), аспект блоба ~1.26 — высота арта укладывается в круг без обреза. */ width: 72%; height: auto; /* перебивает height-атрибут — пропорции арта сохраняются */ transform: translateX(-50%); filter: drop-shadow(0 26px 30px rgb(96 54 5 / .35)); } /* Аура-сияние за блобом: медленно вращающийся тёплый конический градиент. Живёт под блобом, размыт и полупрозрачен — добавляет глубину и «дорогое» свечение сцене. */ /* Ради FPS градиент с блюром живёт на ::before ВДВОЕ меньшего размера и растянут scale(2): блюр падает 44px → 22px на вчетверо меньшей текстуре (GPU-стоимость размытия ~×4 ниже), после масштабирования картинка неотличима — резкости под блюром всё равно нет. Родитель остаётся целью входной GSAP-анимации (autoAlpha/scale) — каналы не пересекаются. */ .if-hero__aurora { position: absolute; inset: -8% -6% -10% -4%; z-index: 0; opacity: .55; pointer-events: none; } .if-hero__aurora::before { content: ''; position: absolute; inset: 25%; border-radius: 50%; background: conic-gradient(from 0deg, rgb(243 155 43 / 0) 0deg, rgb(243 155 43 / .38) 70deg, rgb(255 194 92 / .18) 150deg, rgb(243 155 43 / 0) 210deg, rgb(232 143 26 / .3) 300deg, rgb(243 155 43 / 0) 360deg); filter: blur(22px); transform: scale(2); animation: if-aurora-spin 24s linear infinite; will-change: transform; } /* Ночью аура — холодный лунный свет вместо тёплого оранжевого */ .theme-dark .if-hero__aurora { opacity: .35; } .theme-dark .if-hero__aurora::before { background: conic-gradient(from 0deg, rgb(214 226 255 / 0) 0deg, rgb(214 226 255 / .4) 70deg, rgb(236 242 255 / .2) 150deg, rgb(214 226 255 / 0) 210deg, rgb(198 214 248 / .32) 300deg, rgb(214 226 255 / 0) 360deg); } /* Звёзды: два слоя точек в сцене мерцают в противофазе. Только ночь. */ .theme-dark .if-hero__scene::before, .theme-dark .if-hero__scene::after { content: ''; position: absolute; inset: -6% -4%; z-index: 0; /* под блобом-луной (z:1), над бумагой страницы */ pointer-events: none; background-repeat: no-repeat; animation: if-star-twinkle 3.6s ease-in-out infinite; } .theme-dark .if-hero__scene::before { background-image: radial-gradient(circle 1.6px at 8% 18%, #FFFFFF 99%, transparent), radial-gradient(circle 1.2px at 22% 62%, #FFFFFF 99%, transparent), radial-gradient(circle 1.8px at 37% 8%, #FFFFFF 99%, transparent), radial-gradient(circle 1.2px at 78% 12%, #FFFFFF 99%, transparent), radial-gradient(circle 1.5px at 93% 44%, #FFFFFF 99%, transparent), radial-gradient(circle 1.2px at 64% 86%, #FFFFFF 99%, transparent); opacity: .8; } .theme-dark .if-hero__scene::after { background-image: radial-gradient(circle 1.2px at 14% 40%, #FFFFFF 99%, transparent), radial-gradient(circle 1.7px at 30% 26%, #FFFFFF 99%, transparent), radial-gradient(circle 1.2px at 52% 5%, #FFFFFF 99%, transparent), radial-gradient(circle 1.4px at 86% 68%, #FFFFFF 99%, transparent), radial-gradient(circle 1.2px at 96% 20%, #FFFFFF 99%, transparent), radial-gradient(circle 1.6px at 6% 78%, #FFFFFF 99%, transparent); opacity: .5; animation-delay: -1.8s; /* противофаза: пока один слой гаснет, другой горит */ } @keyframes if-star-twinkle { 0%, 100% { opacity: .85; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .theme-dark .if-hero__scene::before, .theme-dark .if-hero__scene::after { animation: none; } } /* scale(2) в обоих кадрах: вращение не должно сбрасывать растяжку ::before */ @keyframes if-aurora-spin { from { transform: scale(2) rotate(0deg); } to { transform: scale(2) rotate(360deg); } } /* Орбиты фишек: каждое кольцо .if-hero__orbit вращается вокруг центра сцены; «рука» .if-hero__orbit-arm сдвинута на радиус, поэтому фишка едет по кругу, а сама фишка контр-вращается той же длительностью — остаётся «лицом» к зрителю. Разные радиусы/скорости/направления дают живое казино-кольцо. */ .if-hero__orbits { position: absolute; inset: 0; z-index: 2; pointer-events: none; } /* Центр орбит — по центру блоба (его inset 4% 2% 6% 6%), чтобы фишки кружили ровно по ободу маскота, а не улетали в пустоту над сценой. */ .if-hero__orbit { position: absolute; left: 52%; top: 50%; width: 0; height: 0; } .if-hero__orbit-arm { position: absolute; left: 0; top: 0; width: 0; height: 0; } .if-hero__chip { position: absolute; left: 0; top: 0; width: clamp(50px, 5.6vw, 74px); height: clamp(50px, 5.6vw, 74px); /* Базовое img{max-width:100%} тут = 100% от «руки» (её ширина 0) → обнулило бы ширину фишки. Явно снимаем ограничение. */ max-width: none; margin: calc(clamp(50px, 5.6vw, 74px) / -2); /* центрируем фишку на конце руки */ object-fit: contain; filter: drop-shadow(0 12px 18px rgb(4 0 0 / .28)); } /* Радиусы держим в пределах блоба (его полурадиус ~210×200), поэтому фишки едут по ободу, а не выскакивают за сцену. Орбита круговая: scaleY на «руке» сплющил бы саму фишку (наследует трансформ), поэтому только радиус. */ .if-hero__orbit--1 { animation: if-orbit 20s linear infinite; } .if-hero__orbit--1 .if-hero__orbit-arm { transform: translateX(clamp(130px, 16vw, 208px)); } .if-hero__orbit--1 .if-hero__chip { animation: if-orbit-cc 20s linear infinite; } .if-hero__orbit--2 { animation: if-orbit 28s linear infinite reverse; } .if-hero__orbit--2 .if-hero__orbit-arm { transform: translateX(clamp(95px, 12vw, 158px)); } .if-hero__orbit--2 .if-hero__chip { animation: if-orbit-cc 28s linear infinite reverse; } .if-hero__orbit--3 { animation: if-orbit 15s linear infinite; } .if-hero__orbit--3 .if-hero__orbit-arm { transform: translateX(clamp(160px, 19vw, 238px)); } .if-hero__orbit--3 .if-hero__chip { animation: if-orbit-cc 15s linear infinite; } @keyframes if-orbit { to { transform: rotate(360deg); } } @keyframes if-orbit-cc { to { transform: rotate(-360deg); } } /* Тропинка лапок убегает от кота к тексту */ .if-hero__paws { position: absolute; bottom: 4%; left: -8%; display: flex; gap: 18px; opacity: .5; } .if-hero__paws svg { width: 20px; height: 20px; color: var(--if-orange-2); } .if-hero__paws svg:nth-child(odd) { transform: rotate(-24deg) translateY(-10px); } .if-hero__paws svg:nth-child(even) { transform: rotate(-8deg); } /* Дрейф вправо на один период узора (1200px): translateX -1200 → 0 на расширенном вправо боксе — в каждый момент лента покрыта, шов невидим. transform композитится (0 репейнтов) — прежний background-position-x перерисовывал слой каждый кадр. reverse у заднего слоя работает как и раньше — просто гонит текстуру влево. */ @keyframes if-wave-drift { from { transform: translateX(-1200px); } to { transform: translateX(0); } } /* «Дыхание» — через отдельное свойство translate: не дерётся за transform с дрейфом (у переднего слоя обе анимации разом) */ @keyframes if-wave-swell { from { translate: 0 4px; } to { translate: 0 -4px; } } /* --- Бегущие контр-ленты фишек --------------------------------------------- */ /* Дуэт без плашки: чернильный ряд бежит влево (скорость подгоняет скролл), контурный оранжевый — вправо медленнее. Разные скорости и направления дают глубину; кромки растворяются маской, а лёгкий наклон — жест бренда. */ .if-ticker { position: relative; z-index: 2; width: 100vw; margin: 30px calc(50% - 50vw) 60px; transform: rotate(-1.1deg); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .if-ticker__track, .if-ticker__track2 { display: flex; width: max-content; } .if-ticker__track { animation: if-ticker-run 34s linear infinite; } /* track2 намеренно НЕ носит класс track: .if-ticker--js глушит CSS-анимацию только у первого ряда (им управляет GSAP), второй всегда живёт на CSS */ .if-ticker__track2 { margin-top: 4px; animation: if-ticker-run 52s linear infinite reverse; } .if-ticker:hover .if-ticker__track, .if-ticker:hover .if-ticker__track2 { animation-play-state: paused; } .if-ticker__group { display: flex; align-items: center; flex: none; } .if-ticker__item { display: inline-flex; align-items: center; gap: 22px; padding: 0 46px 0 0; font: 800 15px/1.15 'Montserrat', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--if-ink); white-space: nowrap; } /* Контурный ряд: прозрачная заливка + оранжевый штрих, чуть крупнее */ .if-ticker__track2 .if-ticker__item { font-size: 18px; color: transparent; -webkit-text-stroke: 1.2px var(--if-orange-2); } .if-ticker__item::after { content: ''; width: 14px; height: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); opacity: .5; transform: rotate(12deg); } @keyframes if-ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- Баннеры (реклама из админки) ------------------------------------------ */ /* Сетка на 6 колонок: full = span 6, half = span 3, third = span 2 (общая механика с Banner::SPANS). Ячейки одной высоты; незакрытый ряд добивают «призраки», при пустой базе — приглашение рекламодателям. Пластика «дорогой» карточки: двойная кромка (градиентный кант вокруг ядра с концентричными радиусами), мягкие рассеянные брендовые тени, пружинная кривая ховера и световой блик if-sheen (кейфреймы в motion.css). */ .if-banners { --if-b-ease: cubic-bezier(.32, .72, 0, 1); } .if-banners__grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-flow: dense; gap: 16px; } .if-banners__item, .if-banners__ghost, .if-banners__invite { position: relative; display: block; overflow: hidden; height: clamp(130px, 15vw, 200px); border-radius: 22px; } .if-banners__item--full { grid-column: span 6; } .if-banners__item--half { grid-column: span 3; } .if-banners__item--third { grid-column: span 2; } /* Настоящий баннер: тонкий кант (padding 2px) вокруг постера; ховер — лифт с рассеянной тенью, медленный «наезд камеры», пробегающий блик и контур, разгорающийся у курсора (--mx/--my ставит ingri-home.js — тот же приём, что курсор-спотлайт карточек товара в motion.css). */ a.if-banners__item { padding: 2px; background: linear-gradient(160deg, rgb(243 155 43 / .4), rgb(243 155 43 / .12) 45%, rgb(4 0 0 / .08)); box-shadow: 0 18px 44px -30px rgb(224 132 15 / .5); transition: transform .6s var(--if-b-ease), box-shadow .6s var(--if-b-ease); } .theme-dark a.if-banners__item { background: linear-gradient(160deg, rgb(243 155 43 / .45), rgb(255 255 255 / .1) 45%, rgb(255 255 255 / .06)); } a.if-banners__item:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgb(224 132 15 / .75); } /* Когда наклоном владеет JS (is-tilt ставит ingri-home.js): transform ведёт GSAP (rotate + лифт), CSS-ховер и transition на transform глушатся, иначе два изинга дерутся за одно свойство и карточка «дребезжит». Без JS остаётся CSS-фолбэк выше. */ a.if-banners__item.is-tilt { transition: box-shadow .6s var(--if-b-ease); } a.if-banners__item.is-tilt:hover { transform: none; } /* Кольцо-свечение по контуру, следующее за курсором (mask XOR оставляет только 2px канта; фолбэк без курсора — центр). Проявляется на ховере. */ a.if-banners__item::before { content: ''; position: absolute; inset: 0; border-radius: 22px; padding: 2px; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgb(243 155 43 / .9), rgb(243 155 43 / 0) 46%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; } a.if-banners__item:hover::before { opacity: 1; } .if-banners__item img, .if-banners__item video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 20px; /* концентрично внешним 22px минус кант 2px */ transition: transform 1.1s var(--if-b-ease); } a.if-banners__item:hover img, a.if-banners__item:hover video { transform: scale(1.04); } /* Световой блик пробегает по постеру при ховере (как у orange-btn) */ a.if-banners__item::after { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .38), transparent); transform: skewX(-18deg); pointer-events: none; } a.if-banners__item:hover::after { animation: if-sheen .8s ease; } /* Свободная ячейка: пунктир, тёплая подсветка и лапка, оживающая на ховере */ .if-banners__ghost { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; border: 2px dashed rgb(243 155 43 / .38); background: radial-gradient(120% 140% at 85% -25%, rgb(243 155 43 / .13) 0, transparent 55%), var(--if-card); color: var(--if-dim); font: 600 12px/1.3 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 14px; transition: transform .5s var(--if-b-ease), border-color .5s var(--if-b-ease), box-shadow .5s var(--if-b-ease); } .if-banners__ghost:hover { transform: translateY(-4px); border-color: rgb(243 155 43 / .7); box-shadow: 0 20px 44px -30px rgb(224 132 15 / .6); } .if-banners__paw { width: 26px; height: 26px; color: var(--if-orange); opacity: .55; transform: rotate(-14deg); transition: transform .5s var(--if-b-ease), opacity .5s var(--if-b-ease); } .if-banners__ghost:hover .if-banners__paw { transform: rotate(6deg) scale(1.14); opacity: .9; } /* Приглашение рекламодателям (пустая база): панель с mesh-подсветкой углов, верхней световой нитью и водяной лапкой. Вместо толстого канта — тонкий контур 1.5px, который разгорается у курсора (mask-кольцо, --mx/--my из ingri-home.js) — тот же язык, что у курсор-спотлайта карточек товара. */ .if-banners__invite { height: auto; min-height: clamp(210px, 22vw, 270px); border-radius: 28px; box-shadow: 0 30px 70px -42px rgb(224 132 15 / .6); } /* Тихий hairline-контур в покое */ .if-banners__invite::before { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 28px; padding: 1.5px; background: linear-gradient(rgb(243 155 43 / .35), rgb(243 155 43 / .35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* Кольцо-свечение по контуру, преследующее курсор (появляется на ховере) */ .if-banners__invite::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 28px; padding: 1.5px; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgb(243 155 43 / .85), rgb(243 155 43 / 0) 46%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s ease; pointer-events: none; } .if-banners__invite:hover::after { opacity: 1; } .if-banners__invite-core { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; height: 100%; padding: 28px 22px; border-radius: 28px; overflow: hidden; text-align: center; background: radial-gradient(46rem 20rem at 12% -30%, rgb(243 155 43 / .16) 0, transparent 60%), radial-gradient(40rem 18rem at 95% 130%, rgb(224 132 15 / .14) 0, transparent 58%), var(--if-paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / .55); } .theme-dark .if-banners__invite-core { box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); } /* Водяная лапка-знак в углу ядра */ .if-banners__invite-core::after { content: ''; position: absolute; right: -26px; bottom: -30px; width: 150px; height: 150px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); opacity: .09; transform: rotate(-16deg); pointer-events: none; } .if-banners__invite-eyebrow { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px; border: 1px solid rgb(243 155 43 / .4); background: rgb(243 155 43 / .12); font: 700 10px/1 'Montserrat', sans-serif; letter-spacing: .22em; text-transform: uppercase; color: var(--if-orange-2); } .if-banners__invite-title { font: 800 clamp(19px, 2.4vw, 27px)/1.2 'Montserrat', sans-serif; text-transform: uppercase; color: var(--if-ink); } .if-banners__invite-text { margin: 0; max-width: 52ch; font: 500 13.5px/1.6 'Montserrat', sans-serif; color: var(--if-dim); } /* CTA-пилюля с «кнопкой в кнопке»: стрелка в собственном круге, на ховере уезжает по диагонали — внутренняя кинетика вместо смены цвета. */ .if-banners__cta { margin-top: 6px; padding: 10px 10px 10px 26px; border-radius: 999px; gap: 12px; } .if-banners__cta:active { transform: scale(.97); } .if-banners__cta-arrow { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 999px; background: rgb(28 23 18 / .16); font-size: 15px; line-height: 1; transition: transform .5s var(--if-b-ease); } .if-banners__cta:hover .if-banners__cta-arrow { transform: translate(2px, -2px) scale(1.08); } /* Мобильный: вертикальный стек во всю ширину вместо горизонтальной ленты. Баннеры — платные рекламные места: карусель показывала по-настоящему только первый, остальные надо было листать (мимо видят немногие). Столбец держит все баннеры на виду. Единое соотношение 5:2 (cover) даёт опрятный ряд и снимает сильную обрезку прежней коробки 84%×150. Спаны grid-column у full/ half/third в одной колонке схлопываются — каждый баннер занимает всю строку. */ @media (max-width: 760px) { .if-banners__grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .if-banners__item, .if-banners__ghost { /* Сброс span 6/3/2: иначе grid плодит неявные колонки и ломает столбец. */ grid-column: auto; width: 100%; height: auto; aspect-ratio: 5 / 2; } .if-banners__invite { grid-column: auto; width: 100%; height: auto; min-height: 216px; } .if-banners__invite-core { padding: 22px 16px; } } /* --- Преимущества (фишки) -------------------------------------------------- */ .if-perks { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .if-perk { position: relative; padding: 26px 24px 28px; border-radius: 18px; background: var(--if-card); border: 1px solid transparent; overflow: hidden; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .if-perk:hover { transform: translateY(-6px); border-color: rgb(243 155 43 / .5); box-shadow: 0 22px 44px -24px rgb(243 155 43 / .55); } /* Лапка-водяной знак в углу карточки */ .if-perk::after { content: ''; position: absolute; right: -16px; bottom: -16px; width: 92px; height: 92px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); opacity: .1; transform: rotate(-18deg); transition: transform .35s ease, opacity .35s ease; } .if-perk:hover::after { opacity: .2; transform: rotate(-4deg) scale(1.08); } .if-perk__pic { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; margin-bottom: 18px; border-radius: 20px; background: rgb(243 155 43 / .16); } .if-perk__pic img { width: 46px; height: 46px; object-fit: contain; } /* Фишки — портретные PNG: диск нарисован в верхней части кадра, снизу мягкая тень. object-fit:contain центрирует ВЕСЬ кадр, поэтому диск оптически уезжает вверх (и влево у icon-2). Кроме увеличения даём небольшой сдвиг, чтобы диск встал по центру плитки; правая (красная icon-3) фишка самая узкая — ей чуть крупнее. */ .if-perk__pic--chip-geo img { width: 66px; height: 66px; transform: translate(3px, 5px); } /* Топовые гео (icon-2) */ .if-perk__pic--chip-fast img { width: 72px; height: 72px; transform: translate(0, 10px); } /* Мгновенная выдача (icon-3) */ .if-perk__title { margin: 0 0 9px; font: 700 17px/1.25 'Montserrat', sans-serif; color: var(--if-ink); } .if-perk__text { margin: 0; font: 500 13.5px/1.6 'Montserrat', sans-serif; color: var(--if-dim); } /* --- Три шага --------------------------------------------------------------- */ .if-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: if-step; } .if-step { position: relative; padding: 26px 24px 30px; border-radius: 18px; border: 1.5px dashed rgb(243 155 43 / .55); } .if-step__num { display: inline-block; font: 800 44px/1 'Montserrat', sans-serif; color: transparent; -webkit-text-stroke: 2px var(--if-orange); margin-bottom: 16px; } .if-step__title { margin: 0 0 9px; font: 700 17px/1.25 'Montserrat', sans-serif; color: var(--if-ink); } .if-step__text { margin: 0; font: 500 13.5px/1.6 'Montserrat', sans-serif; color: var(--if-dim); } /* Лапка-стрелка между шагами */ .if-step + .if-step::before { content: ''; position: absolute; left: -21px; top: 44px; width: 24px; height: 24px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23E69328'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(90deg); } /* --- Живая лента покупок ---------------------------------------------------- */ .if-trust { position: relative; overflow: hidden; /* Растворение кромок ленты */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .if-trust__track { display: flex; gap: 14px; width: max-content; animation: if-ticker-run 80s linear infinite; } .if-trust:hover .if-trust__track { animation-play-state: paused; } .if-trust__group { display: flex; gap: 14px; flex: none; padding-right: 14px; } .if-trust__item { display: inline-flex; align-items: center; gap: 12px; padding: 14px 20px; border-radius: 999px; background: var(--if-card); border: 1px solid var(--if-line); white-space: nowrap; } .if-trust__check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgb(243 155 43 / .2); color: var(--if-orange-2); font: 800 13px/1 'Montserrat', sans-serif; } .if-trust__name { font: 700 13.5px/1 'Montserrat', sans-serif; color: var(--if-ink); } .if-trust__when { font: 500 12.5px/1 'Montserrat', sans-serif; color: var(--if-dim); } /* --- FAQ -------------------------------------------------------------------- */ .if-faq { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; } .if-faq details { border-radius: 16px; background: var(--if-card); border: 1px solid transparent; transition: border-color .3s ease, box-shadow .3s ease; } .if-faq details[open] { border-color: rgb(243 155 43 / .5); box-shadow: 0 18px 36px -26px rgb(243 155 43 / .6); } .if-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 22px; cursor: pointer; list-style: none; font: 700 15px/1.35 'Montserrat', sans-serif; color: var(--if-ink); } .if-faq summary::-webkit-details-marker { display: none; } .if-faq summary::after { content: '+'; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 10px; background: rgb(243 155 43 / .18); color: var(--if-orange-2); font: 600 20px/1 'Montserrat', sans-serif; transition: transform .3s ease; } .if-faq details[open] summary::after { transform: rotate(45deg); } .if-faq .if-faq__a { margin: 0; padding: 0 22px 20px; font: 500 13.5px/1.65 'Montserrat', sans-serif; color: var(--if-dim); } /* --- Адаптив ----------------------------------------------------------------- */ @media (max-width: 992px) { .if-sec { margin-bottom: 60px; } .if-hero__grid { grid-template-columns: 1fr; gap: 12px; } .if-hero__scene { order: -1; min-height: clamp(250px, 52vw, 330px); margin-top: -6px; } /* На узком экране блоб становится широкой низкой «пилюлей» (высота уперта в max-height сцены ~330px), а сцена по ширине растёт до ~992px — поэтому кот не в % (раздулся бы и вылез за низкий блоб), а в px с потолком: держим ~80% высоты блоба на всём диапазоне 320–992px без обреза. */ .if-hero__cat { width: clamp(210px, 45vw, 280px); } .if-hero__paws { display: none; } /* Орбиты плотнее к центру, чтобы фишки не улетали за сцену на узком экране. Потолок в px обязателен: на планшете 800–992px радиус 29vw (~288px) поднимал фишки верхней дуги выше низкой сцены — на заголовок и шапку. */ .if-hero__orbit--1 .if-hero__orbit-arm { transform: translateX(clamp(90px, 20vw, 165px)); } .if-hero__orbit--2 .if-hero__orbit-arm { transform: translateX(clamp(60px, 14vw, 115px)); } .if-hero__orbit--3 { display: none; } .if-steps { grid-template-columns: 1fr; } .if-step + .if-step::before { left: 34px; top: -22px; transform: rotate(180deg); } .if-faq { grid-template-columns: 1fr; } .if-ticker { margin-bottom: 48px; } .if-ticker__item { font-size: 13px; gap: 16px; padding-right: 32px; } .if-ticker__track2 .if-ticker__item { font-size: 15.5px; -webkit-text-stroke-width: 1px; } } @media (max-width: 492px) { .if-hero__cta { flex-direction: column; align-items: stretch; } .if-btn { justify-content: center; } .if-hero__stats { gap: 12px 28px; } } /* ============================================================================ ВАУ-СЛОЙ (моушн, добавочный). Всё ниже включается только классами, которые ставит ingri-home.js: без JS страница выглядит как базовая версия. ========================================================================== */ /* Слова заголовка героя (JS оборачивает в .if-w для каскадного входа) */ .if-w { display: inline-block; transform-origin: 50% 100%; } /* Росчерк «взведён»: класс ставит ingri-home.js в момент, когда моушн-слой забирает заголовок себе (вместе с разбивкой на слова, до первого кадра). Пока слова каскадом встают на место, статичная полоса из базовой вёрстки скрыта — без этого она видна весь вход, а потом «мигает»: анимация .is-underline стартует с нулевой ширины. Без JS класса нет — базовая полоса остаётся видимой (прогрессивное улучшение не ломается). */ .if-hero__title.is-underline-wait em { background-size: 0 .18em; } /* Подчёркивание-росчерк у акцентного слова: рисуется слева-направо сразу после того, как слово встало на место (класс ставит ingri-home.js). Высота в em совпадает с фоном .if-hero__title em; background-position:left → ширина растёт от левого края, как штрих пера, а не «раздувается» из центра. Анимация в каскаде сильнее background-size от .is-underline-wait, а fill both держит конечные 100% — порядок классов не важен. */ .if-hero__title.is-underline em { animation: if-underline-draw .6s .1s cubic-bezier(.66, 0, .34, 1) both; } @keyframes if-underline-draw { from { background-size: 0 .18em; } to { background-size: 100% .18em; } } /* Кот кликабелен, когда сценой управляет JS (прыжок + салют лапок). ВАЖНО: не глушим анимацию у .if-hero__chip — теперь это орбитальное вращение (CSS), а не старый float; оно должно работать всегда. */ .if-hero__scene--js .if-hero__cat { cursor: pointer; } /* Магнитные кнопки: транслейт ведёт GSAP, CSS-ховер оставляет только тень */ .if-btn--magnet { will-change: transform; } .if-btn--magnet:hover { transform: none; } /* Бегущим строкам, которыми управляет JS, CSS-анимация не нужна */ .if-ticker--js .if-ticker__track, .if-trust--js .if-trust__track { animation: none; } /* Следы-лапки за курсором внутри сцены героя */ .if-trail-paw { position: absolute; width: 18px; height: 18px; color: var(--if-orange-2); pointer-events: none; z-index: 2; } .if-trail-paw svg { width: 100%; height: 100%; } /* Лапки-салют по клику на кота */ .if-burst-paw { position: absolute; width: 22px; height: 22px; color: #fff; pointer-events: none; z-index: 3; } .if-burst-paw svg { width: 100%; height: 100%; } /* Пузырьки z-z-z спящего кота: контейнер ставит ingri-home.js по макушке (в координатах сцены, как салют лапок); три «z» всплывают по очереди. */ .if-zzz { position: absolute; z-index: 4; font: 800 clamp(14px, 1.6vw, 22px)/1 'Montserrat', sans-serif; color: var(--if-ink); opacity: .75; pointer-events: none; } .if-zzz b { position: absolute; left: 0; top: 0; animation: if-zzz 2.4s ease-in infinite; } .if-zzz b:nth-child(2) { animation-delay: .8s; font-size: .8em; } .if-zzz b:nth-child(3) { animation-delay: 1.6s; font-size: .65em; } @keyframes if-zzz { 0% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.7); } 25% { opacity: .8; } 100% { opacity: 0; transform: translate(26px, -46px) rotate(14deg) scale(1.15); } } /* Мини-фишки, разлетающиеся при добавлении в корзину */ .if-burst-chip { position: fixed; width: 26px; height: auto; z-index: 10001; pointer-events: none; } /* Ответ FAQ мягко всплывает при раскрытии */ .if-faq details[open] .if-faq__a { animation: if-faq-open .35s ease; } @keyframes if-faq-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* Пульс лапки-стрелки между шагами (класс is-pulse ставит JS по очереди) */ .if-step.is-pulse::before { animation: if-paw-pulse .6s ease; } @keyframes if-paw-pulse { 40% { transform: rotate(90deg) scale(1.45); } } @media (max-width: 992px) { .if-step.is-pulse::before { animation-name: if-paw-pulse-m; } } @keyframes if-paw-pulse-m { 40% { transform: rotate(180deg) scale(1.45); } } /* ============================================================================ ПРЕМИУМ-АПГРЕЙД КАТАЛОГА (только на главной, всё под .if-home). Старые прод-блоки (фильтр категорий, «Рекомендованные», ряды товаров, низ поддержки/SEO) в покое были плоскими — глубина всплывала лишь на ховере из motion.css. Здесь даём им постоянную «дорогую» подложку, аватар-плитки логотипов, акценты-лапки и ховер-лифт — в один тон с новыми секциями. Псевдоэлементы .product::before/.::after НЕ трогаем: на них живёт курсор-спотлайт из motion.css (поэтому все акценты ниже — через box-shadow/inset, не через ::before/::after у .product). ========================================================================== */ /* --- Фильтр категорий ------------------------------------------------------ */ /* Чипы-«воздух» — общий скин темы (style.css + motion.css); здесь только вёрстка строки заголовка каталога: тайтл слева, живая статистика справа на одной базовой линии. */ .if-home .main__navigation-link { letter-spacing: .01em; } .if-sec-head--catalog { display: flex; align-items: flex-end; gap: 16px; } /* Тайтл сжимаем (переносится внутри своей колонки), статистика прижата вправо и не разлучается со строкой заголовка. */ .if-sec-head--catalog > div { flex: 1 1 auto; min-width: 0; } .if-sec-head--catalog .if-nav-stats { flex: 0 0 auto; margin-left: auto; margin-bottom: 7px; } /* --- «Рекомендованные товары»: заголовок-кикер как у новых секций --------- */ .if-home .main__content-title { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 4px; font: 700 12px/1.2 'Montserrat', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--if-orange-2); } .if-home .main__content-title::before { content: ''; width: 16px; height: 16px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-14deg); } /* --- Заголовки секций товаров: акцент-лапка + подчёркивание --------------- */ .if-home .product-section__title { display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: -.01em; } .if-home .product-section__title::before { content: ''; width: 24px; height: 24px; flex: none; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='%23F39B2B'%3E%3Cellipse cx='32' cy='43' rx='14' ry='11'/%3E%3Cellipse cx='13' cy='27' rx='6' ry='8' transform='rotate(-22 13 27)'/%3E%3Cellipse cx='25' cy='18' rx='6' ry='8' transform='rotate(-7 25 18)'/%3E%3Cellipse cx='39' cy='18' rx='6' ry='8' transform='rotate(7 39 18)'/%3E%3Cellipse cx='51' cy='27' rx='6' ry='8' transform='rotate(22 51 27)'/%3E%3C/g%3E%3C/svg%3E"); transform: rotate(-10deg); } /* --- Ряд-карточка товара: постоянная подложка + акцент-полоса + лифт ------- */ /* Подложка = тот же грей, что заливает .product::before на ховере (motion.css), поэтому спотлайт-halo на ховере просто «прорастает» из карточки, без стыков. Левая акцент-полоса — inset-тень (не ::before, он занят спотлайтом). */ .if-home .product { padding: 12px 16px; border-radius: 16px; background: var(--if-card); box-shadow: inset 3px 0 0 rgb(243 155 43 / .55), 0 10px 26px -18px rgb(4 0 0 / .35); transition: transform .32s cubic-bezier(.32, .72, 0, 1), box-shadow .32s ease; } .if-home .product:hover { transform: translateY(-3px); box-shadow: inset 4px 0 0 var(--if-orange), 0 20px 40px -22px rgb(243 155 43 / .5); } .theme-dark .if-home .product { box-shadow: inset 3px 0 0 rgb(243 155 43 / .6), 0 12px 28px -18px rgb(0 0 0 / .6); } /* --- Рекомендованные карточки: рамка, тень, верхняя нить-акцент, лифт ------ */ .if-home .product-block.recommend { border: 1px solid var(--if-line); box-shadow: inset 0 2px 0 rgb(243 155 43 / .5), 0 12px 30px -20px rgb(4 0 0 / .4); transition: transform .32s cubic-bezier(.32, .72, 0, 1), box-shadow .32s ease, border-color .32s ease; } .if-home .product-block.recommend:hover { transform: translateY(-4px); border-color: rgb(243 155 43 / .45); box-shadow: inset 0 2px 0 var(--if-orange), 0 24px 46px -24px rgb(243 155 43 / .55); } /* --- Плитка-аватар под логотип товара (ряд и карточка) -------------------- */ .if-home .product__logo { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; max-width: none; border-radius: 14px; background: rgb(243 155 43 / .12); box-shadow: inset 0 0 0 1px rgb(243 155 43 / .18); transition: transform .3s ease, background-color .3s ease; } .if-home .product:hover .product__logo, .if-home .product-block.recommend:hover .product__logo { transform: rotate(-4deg) scale(1.06); background: rgb(243 155 43 / .2); } .if-home .product__logo img { width: 38px; height: 38px; } .theme-dark .if-home .product__logo { background: rgb(243 155 43 / .16); } /* --- Живая цена: крупнее и весомее --------------------------------------- */ .if-home .product__price-live { font-weight: 800; font-size: 16px; color: var(--if-ink); transition: color .25s ease; } .if-home .product:hover .product__price-live, .if-home .product-block.recommend:hover .product__price-live { color: var(--if-orange-2); } /* --- Бейдж «мало»: живой пульсирующий индикатор -------------------------- */ .if-home .if-badge--low { display: inline-flex; align-items: center; gap: 6px; } .if-home .if-badge--low::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; animation: if-badge-pulse 1.8s ease-out infinite; } @keyframes if-badge-pulse { 0% { box-shadow: 0 0 0 0 rgb(201 121 10 / .55); } 70%, 100% { box-shadow: 0 0 0 6px rgb(201 121 10 / 0); } } /* --- Низ: поддержка и SEO как премиум-карточки ---------------------------- */ .if-home .main__bottom { gap: 24px; align-items: stretch; } .if-home .support { flex: 1 1 0; gap: 30px; padding: 28px 30px; border-radius: 20px; background: var(--if-card); border: 1px solid var(--if-line); box-shadow: inset 0 2px 0 rgb(243 155 43 / .5), 0 16px 40px -26px rgb(4 0 0 / .4); } .if-home .support__picture { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .if-home .support:hover .support__picture { transform: rotate(-5deg) scale(1.05); } .if-home .ceo-block { border: 1px solid var(--if-line); box-shadow: inset 0 2px 0 rgb(243 155 43 / .5), 0 16px 40px -26px rgb(4 0 0 / .4); } /* Мобильный/планшетный: main__bottom стал колонкой — сбрасываем flex-basis:0 у карточек. Иначе .support сжимается по высоте ниже своего контента, а он (лого/слоган/статус/кнопки) при align-items:center вываливается ВВЕРХ (на FAQ) и ВНИЗ (на SEO-блок). flex:none = коробка по контенту, наложения уходят. */ @media (max-width: 992px) { .if-home .main__bottom { flex-direction: column; } .if-home .support, .if-home .ceo-block { flex: none; } } /* Телефон: карточка поддержки — контент в столбец во всю ширину, кнопки «Поддержка/Канал» полноширинными CTA вместо мелких пилюль. */ @media (max-width: 610px) { .if-home .support { flex-direction: column; align-items: stretch; justify-content: flex-start; } .if-home .support .support__item { max-width: none; gap: 14px; } .if-home .support .support__actions { flex-direction: column; align-items: stretch; gap: 10px; } .if-home .support .support__link { width: 100%; padding: 12px; } } /* --- Доступность: без крупного движения ------------------------------------- */ @media (prefers-reduced-motion: reduce) { .if-hero__blob, .if-hero__chip, .if-hero__aurora, .if-hero__orbit, .if-hero__orbit .if-hero__chip, .if-hero__topwave-layer, .if-hero__topwave-front::after, .if-ticker__track, .if-ticker__track2, .if-trust__track, .if-hero__title.is-underline em, .if-home .if-badge--low::before, .if-faq details[open] .if-faq__a { animation: none; } /* Анимация росчерка выключена — «взведённое» состояние (полоса спрятана до отрисовки) вернуло бы её насовсем; показываем статичную полосу базы. */ .if-hero__title.is-underline-wait em { background-size: 100% .18em; } /* Без вращения кольца ставим фишки статично вдоль дуги (просто видимы) */ .if-hero__orbit--2 { transform: rotate(130deg); } .if-hero__orbit--3 { transform: rotate(240deg); } } /* =================================================================== ЖИВОЙ ИНДИКАТОР ПОДДЕРЖКИ Зелёная пульсирующая точка в рабочие часы (9–20 МСК), красная вне. Формула цвета/пульса повторяет AF (.af-benefit__dot), но на своём классе и в пайплайне темы (public/source/custom/css/ingri/*), т.к. AF-скин собирается отдельно через Vite (resources/css/app.css). Первый рендер приходит из Blade, актуализация — support-dot.js. =================================================================== */ .if-dot { position: relative; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #22c55e; box-shadow: 0 0 10px 1px rgba(52, 211, 153, .7); vertical-align: -1px; } /* Расходящееся кольцо — сигнал «саппорт онлайн» */ .if-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(52, 211, 153, .55); animation: if-support-pulse 2s ease-out infinite; } .if-dot.is-off { background: #ef4444; box-shadow: 0 0 10px 1px rgba(251, 113, 133, .6); } .if-dot.is-off::after { animation: none; } /* вне часов не пульсирует */ @keyframes if-support-pulse { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .5); } 70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } @media (prefers-reduced-motion: reduce) { .if-dot::after { animation: none; } } /* Часы «9:00–20:00» длиннее «24/7» — ужимаем dt, чтобы не переносилось в тройке hero-статов. Модификатор вешается только на этот стат. */ .if-hero__stat--hours dt { font-size: clamp(20px, 2.2vw, 26px); } /* Компактная строка со статусом поддержки в блоке .support (над кнопками) */ .support__status { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 2px; font: 600 13px/1.35 'Montserrat', sans-serif; color: var(--if-dim); letter-spacing: .04em; } /* ============================================================================ ЕДИНЫЙ ГЕРОЙ (спека 2026-07-22): оранжевая лента шапки сшивается со сценой героя — один цвет без шва, а «живой водой» в бумагу страницу переливает верхняя волна героя (.if-hero__topwave). Своих правил для шапки здесь больше нет: тонкая лента стала дефолтом ВСЕЙ темы, а общая волна лейаута .if-topwave на главной схлопнута скоупом body:has(.if-home) — и то и другое живёт в theme-extra.css («Единая шапка витрины»), потому что home.css грузится только на главной, а правило-исключение обязано присутствовать при заходе на главную полной загрузкой всегда. */ /* ========================================================================== Экономия FPS: декор за экраном ставится на паузу. Класс is-offstage вешает IntersectionObserver из ingri-home.js, когда секция целиком уходит из вьюпорта; снимается при возврате. Пауза анимации визуально ничего не меняет (элементов не видно) — но слабый процессор перестаёт тратить кадры на невидимый декор: орбиты фишек, ауру, морф блоба, волны и бегущие строки. GSAP-идлы (дыхание кота, листалка хвоста) паузит сам ingri-home.js той же логикой. ========================================================================== */ .if-hero.is-offstage .if-hero__topwave-layer, .if-hero.is-offstage .if-hero__aurora::before, .if-hero.is-offstage .if-hero__blob::before, .if-hero.is-offstage .if-hero__orbit, .if-hero.is-offstage .if-hero__chip, .if-hero.is-offstage .if-hero__scene::before, .if-hero.is-offstage .if-hero__scene::after, .if-hero.is-offstage .if-zzz b, .if-ticker.is-offstage .if-ticker__track, .if-ticker.is-offstage .if-ticker__track2, .if-trust.is-offstage .if-trust__track { animation-play-state: paused; }