/* ========================================================= NATONIQ — landing v2 · "Juicy Intelligence" ========================================================= */ /* ---- animatable page-wash colors ---- */ @property --page-a{syntax:'';inherits:true;initial-value:#FFE7EC;} @property --page-b{syntax:'';inherits:true;initial-value:#FFF0DA;} /* цвет пятна в «ленте дня»: без регистрации через @property переход цвета не анимируется и смена кадра читается как щелчок */ @property --rh-a{syntax:'';inherits:true;initial-value:#FFD23F;} /* цвет подсветки в «Позиционировании»: плывёт вслед за ползунком */ @property --edge-a{syntax:'';inherits:true;initial-value:#C9B8F2;} :root{ --bg:#FFF9F5; --ink:#2A2330; --ink-soft:#6B6470; --line:#EFE4DC; --font-display:'Comfortaa',system-ui,-apple-system,'Segoe UI',sans-serif; /* заголовки, названия, кнопки */ --font-body:'Manrope','Comfortaa',system-ui,-apple-system,'Segoe UI',sans-serif; /* абзацы и подписи */ --radius:24px; --maxw:1200px; --pad:24px; --strawberry:#FF4D6D; --strawberry-2:#FF9E2C; --strawberry-tint:#FFE7EC; --cucumber:#2FBE86; --cucumber-2:#9DE7C4; --cucumber-tint:#E2F7EE; --energy:#FF9E2C; --energy-2:#FFD23F; --energy-tint:#FFF0DA; --balance:#8E79E0; --balance-2:#C9B8F2; --balance-tint:#EFE9FB; --currant:#9B2FB0; --currant-2:#5A8C6A; --currant-tint:#F1E2F4; --focus:#E6A100; --focus-2:#E84855; --focus-tint:#FBF0CF; /* --*-deep — затемнённые версии вкусовых цветов ТОЛЬКО для текста и заливок под белым. Исходные --strawberry/--energy и прочие остаются для подложек, рамок и декора. Причина: белый на #FF4D6D -> #FF9E2C давал 2.06–3.21:1 при норме WCAG AA 4.5:1. */ --strawberry-deep:#C42449; --cucumber-deep:#1F7C57; --energy-deep:#A45900; --balance-deep:#5F41D3; --currant-deep:#7C268D; --focus-deep:#8A6100; --cta-a:#D42952; --cta-b:#B15B06; /* фирменный CTA-градиент, белый >= 4.8:1 по всей длине */ --accent:var(--strawberry); --accent-2:var(--strawberry-2); --accent-tint:var(--strawberry-tint); --accent-deep:var(--strawberry-deep); --page-a:#FFE0E6; --page-b:#FFEFD6; transition:--accent .6s ease, --accent-2 .6s ease, --accent-tint .6s ease; } *{box-sizing:border-box;margin:0;padding:0;} /* overflow-x:clip, а НЕ hidden: hidden на html ломает sticky-шапку — клик по бургеру уводил страницу в самый верх (замерено scrollY 6000 -> 0). clip режет так же, без побочки. */ html{scroll-behavior:smooth;overflow-x:clip;} body{ font-family:var(--font-body); font-weight:400;color:var(--ink);background:transparent; line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;position:relative; } img{display:block;max-width:100%;height:auto;} /* display:block выше перебивает браузерное [hidden]{display:none} — без этой строки картинка, скрытая через el.hidden, продолжает показываться */ img[hidden]{display:none;} a{color:inherit;text-decoration:none;} .container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);} /* full-page animated wash */ .page-bg{position:fixed;inset:0;z-index:-1; background: radial-gradient(55% 50% at 80% 18%, var(--page-a), transparent 70%), radial-gradient(60% 55% at 12% 88%, var(--page-b), transparent 72%), var(--bg); transition:--page-a .9s ease, --page-b .9s ease;} /* ---------- type ---------- */ /* дисплейный слой: всё, что работает как имя, заголовок или акцент */ .section__title,.hero__title,.about__title,.about__lead,.bento__tile h3,.card__name, .card__detail h4,.flow__v--state,.label__brand,.problem__answer h3,.problem__answer-out, .problem__bubble b,.scale__pole b,.scale__read b,.edge__claims li,.edge__note,.line__tag,.bento__k,.flow__k,.about__who-k, .btn,.nav__cta,.intel__tab,.card__more,.soon__badge,.label__val,.footer__brand p, .form__toggle label,.rhythm__cap b,.rhythm__cap i,.rhythm__frame figcaption b,.section__title--c{font-family:var(--font-display);} .section__title{font-weight:700;font-size:clamp(1.7rem,4vw,2.8rem);line-height:1.08;letter-spacing:-.01em;} .section__title--c{text-align:center;} .section__sub{font-weight:400;color:var(--ink-soft);max-width:640px;margin:14px auto 0;text-align:center;} .section__sub--l{margin-left:0;text-align:left;} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:600;font-size:1rem; padding:15px 30px;border-radius:999px;cursor:pointer;border:0;transition:transform .2s ease,box-shadow .2s ease,background .3s;} .btn--primary{color:#fff;background:linear-gradient(135deg,var(--cta-a),var(--cta-b)); box-shadow:0 12px 26px -10px color-mix(in srgb,var(--accent) 60%,transparent);} .btn--primary:hover{transform:translateY(-2px);box-shadow:0 18px 32px -10px color-mix(in srgb,var(--accent) 65%,transparent);} .btn--ghost{border:2px solid var(--ink);color:var(--ink);background:transparent;} .btn--ghost:hover{background:var(--ink);color:#fff;transform:translateY(-2px);} /* hero CTA — фиксированный розовый (клубника+базилик), не зависит от темы секции */ .hero .btn--primary{background:linear-gradient(135deg,var(--strawberry-deep),#C63356); box-shadow:0 12px 26px -10px color-mix(in srgb,var(--strawberry) 60%,transparent);} .hero .btn--primary:hover{box-shadow:0 18px 32px -10px color-mix(in srgb,var(--strawberry) 65%,transparent);} /* ========================================================= HEADER ========================================================= */ /* фон плотный сам по себе: blur здесь только украшение, шапка должна оставаться читаемой и там, где backdrop-filter не отрабатывает */ .header{position:sticky;top:0;z-index:50;background:rgba(255,249,245,.93); backdrop-filter:blur(12px);border-bottom:1px solid var(--line);} /* шапка липкая и высотой 66px: без запаса переход по якорю из меню ставил секцию вплотную к верху вьюпорта, и её заголовок оказывался ПОД шапкой (заметнее всего на телефоне) */ [id]{scroll-margin-top:78px;} .header__inner{display:flex;align-items:center;justify-content:space-between;height:66px;} .header__logo{display:inline-flex;align-items:center;min-height:44px;} .header__logo img{height:26px;width:auto;} .nav{display:flex;align-items:center;gap:30px;} .nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.98rem;transition:color .2s;} .nav a:not(.nav__cta):hover{color:var(--accent);} .nav__cta{padding:11px 20px;min-height:44px;display:inline-flex;align-items:center;border-radius:999px;color:#fff; background:linear-gradient(135deg,var(--cta-a),var(--cta-b));font-weight:600;} .burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:0;cursor:pointer;padding:8px;} .burger span{width:24px;height:2px;background:var(--ink);border-radius:2px;transition:.25s;} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger[aria-expanded="true"] span:nth-child(2){opacity:0;} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* ========================================================= HERO — fullscreen living scene ========================================================= */ .hero{position:relative;min-height:calc(100vh - 66px);overflow:hidden;display:flex;align-items:center; perspective:1200px;} .hero__scene{position:absolute;inset:0;z-index:1;transform-style:preserve-3d;transition:transform .4s ease-out;} .hero__glow{position:absolute;left:60%;top:50%;width:64vw;height:64vw;transform:translate(-50%,-50%); background:radial-gradient(circle, color-mix(in srgb,var(--accent) 30%,transparent), transparent 64%);filter:blur(4px);} .hero__can{position:absolute;left:61%;top:50%;height:min(78vh,680px);width:auto;z-index:3; filter:drop-shadow(0 30px 46px rgba(60,30,40,.30)); transform:translate(-50%,-50%); animation:canBob 9s ease-in-out infinite alternate;} @keyframes canBob{from{transform:translate(-50%,-53%) rotate(-1.4deg);}to{transform:translate(-50%,-47%) rotate(1.4deg);}} .float{position:absolute;left:61%;top:50%;z-index:2; transform:translate3d(calc(var(--x) - 50% + var(--px,0px)), calc(var(--y) - 50% + var(--py,0px)), 0); transition:transform .5s ease-out;will-change:transform;} .float img{width:var(--w,120px);height:auto;filter:drop-shadow(0 14px 20px rgba(60,30,40,.22)); transform:rotate(var(--r,0deg)); animation:floatBob var(--dur,8s) ease-in-out var(--delay,0s) infinite alternate;} @keyframes floatBob{from{transform:rotate(var(--r,0deg)) translateY(-11px);}to{transform:rotate(var(--r,0deg)) translateY(13px);}} .hero__scrim{position:absolute;inset:0;z-index:4;pointer-events:none; background:linear-gradient(90deg, var(--bg) 4%, color-mix(in srgb,var(--bg) 72%,transparent) 30%, transparent 56%);} .hero__copy{position:relative;z-index:5;} /* 600, а не 480: после перевода бейджей в капс с разрядкой четвёртый («Vegan») срывался на вторую строку. Ширина заголовка (620) — предел, дальше текст лезет на банки. */ .hero__badges{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px;max-width:600px;} .hero__badges-track{display:contents;} /* десктоп: span-ы участвуют в wrap родителя */ .hero__badges-dup{display:none;} /* дубль нужен только для мобильного marquee */ /* набор как у .line__tag в секциях (капс + разрядка + вес 700) — метки по всему сайту должны читаться одинаково. Кегль .8rem и цвет --ink оставлены от аудита 2026-08-25: на .74rem в цвете эти бейджи не добирали до 4.5:1. */ .hero__badges span{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink);white-space:nowrap;} .hero__title{font-weight:700;font-size:clamp(2.15rem,6vw,4.7rem);line-height:1.04;letter-spacing:.005em;text-transform:uppercase;} .hero__sub{font-size:clamp(1rem,1.6vw,1.22rem);color:var(--ink-soft);margin:20px 0 32px;max-width:430px;} .hero__cta{display:flex;gap:14px;flex-wrap:wrap;} .hero__scroll{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:5;width:26px;height:42px; border:2px solid color-mix(in srgb,var(--ink) 40%,transparent);border-radius:999px;} .hero__scroll span{position:absolute;top:8px;left:50%;width:4px;height:8px;border-radius:4px;background:var(--accent); transform:translateX(-50%);animation:scrollDot 1.6s ease-in-out infinite;} @keyframes scrollDot{0%{opacity:0;top:8px;}40%{opacity:1;}100%{opacity:0;top:22px;}} /* bubbles */ .bubbles{position:absolute;inset:0;z-index:1;pointer-events:none;} .bubble{position:absolute;bottom:-40px;border-radius:50%; background:radial-gradient(circle at 30% 30%, #fff, color-mix(in srgb,var(--accent) 40%,transparent)); opacity:.5;animation:rise linear infinite;} @keyframes rise{0%{transform:translateY(0) scale(.8);opacity:0;}10%{opacity:.5;}90%{opacity:.35;}100%{transform:translateY(-105vh) scale(1.1);opacity:0;}} /* ========================================================= SECTION RHYTHM ========================================================= */ section{padding:90px 0;} /* манифест разложен по плиткам и должен помещаться в экран целиком */ .about{padding:48px 0;} /* мягкое зонирование фоном: секции-через-одну на общем page-bg получают тёплую вуаль с fade по краям — границы блоков читаются, без декора. Вуаль фиксированная (не на --accent), чтобы не мигать при смене data-theme. */ .sec--tint{position:relative;} .sec--tint::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:rgba(255,234,221,.62); -webkit-mask:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%); mask:linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);} .sec--tint > *{position:relative;z-index:1;} /* ========================================================= BENTO (formula + why) ========================================================= */ .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:18px;margin-top:46px;} .bento__tile{position:relative;overflow:hidden;border-radius:var(--radius);padding:26px;display:flex;flex-direction:column;justify-content:flex-end; background:linear-gradient(150deg, color-mix(in srgb,var(--c) 16%,#fff), color-mix(in srgb,var(--c2) 14%,#fff)); border:1px solid var(--line);transition:transform .3s ease,box-shadow .3s ease;} .bento__tile:hover{transform:translateY(-6px);box-shadow:0 22px 44px -22px color-mix(in srgb,var(--c) 55%,rgba(60,30,40,.4));} .bento__tile--lg{grid-row:span 2;grid-column:span 2;} .bento__tile--wide{grid-column:span 2;} .bento__body{position:relative;z-index:2;} .bento__k{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--c-deep,var(--c));} .bento__tile h3{font-weight:700;font-size:1.4rem;margin:4px 0 8px;} .bento__tile--lg h3{font-size:2rem;} .bento__tile p{font-size:.94rem;color:var(--ink-soft);max-width:34ch;} .bento__icon{position:absolute;top:24px;right:24px;width:44px;height:44px;z-index:2;transition:transform .35s ease;} .bento__tile:hover .bento__icon{transform:scale(1.15) rotate(-6deg);} /* Единый набор SVG вместо разностилевых PNG. Правило простое: банка или иконка, но не оба. На ПК «Вкус» и «Стиль» держит крупный вырез банки, и значок в углу становится вторым символом об одном и том же. На мобилке банки скрываются (см. @media 760px) — там иконка, наоборот, единственный визуальный якорь плитки, поэтому возвращается. */ .b-taste .bento__icon,.b-style .bento__icon{display:none;} .bento__art{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:62%;max-width:340px;z-index:1;opacity:.95; transition:transform .5s ease;pointer-events:none;} .bento__tile--lg .bento__art{right:-4%;width:58%;} .bento__art--right{right:-8%;width:46%;} .bento__tile:hover .bento__art{transform:translateY(-50%) scale(1.06) rotate(2deg);} .bento__big{font-weight:700;font-size:4rem;line-height:.9;color:var(--c);display:block;} /* крупная банка-вырез, выходящая за край плитки */ .bento__can{position:absolute;z-index:1;pointer-events:none;right:9%;bottom:7%; height:84%;width:auto;max-width:none;transform:rotate(-5deg);transform-origin:center; filter:drop-shadow(0 16px 26px color-mix(in srgb,var(--c) 38%,rgba(60,30,40,.35))); transition:transform .55s ease;} /* Клубника (Вкус): в покое целиком с наклоном против часовой, при наведении крупнее и по часовой */ .bento__tile:hover .bento__can{transform:scale(1.12) rotate(4deg);} /* Balance (Стиль): в покое ровно и целиком; при наведении крупнее, поворот и выход за край */ .b-style{overflow:visible;} .bento__can--style{height:120%;right:3%;bottom:auto;top:50%;transform:translateY(-50%) rotate(0deg);} .b-style:hover{z-index:6;} .b-style:hover .bento__can{transform:translateY(-50%) scale(1.25) rotate(6deg);} /* малые плитки — выравнивание контента по верху */ .b-clean,.b-func,.b-style{justify-content:flex-start;} /* клиренс сверху, чтобы тень банки из блока выше не падала на бенто */ .formula{padding-top:150px;} /* ========================================================= INGREDIENT INTELLIGENCE ========================================================= */ /* собственный цветной фон-пятна под выбранный вкус (accent задаётся локально по клику вкладки) */ .intel{position:relative;overflow:hidden;} .intel::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(44% 48% at 20% 26%, color-mix(in srgb,var(--accent) 34%,transparent), transparent 70%), radial-gradient(48% 52% at 84% 74%, color-mix(in srgb,var(--accent-2) 32%,transparent), transparent 72%);} .intel > .container{position:relative;z-index:1;} .intel__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:34px 0 40px;} .intel__tab{font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer;padding:12px 24px;min-height:44px;border-radius:999px; border:1px solid var(--line);background:#fff;color:var(--ink-soft);transition:all .25s ease;} .intel__tab:hover{color:var(--ink);} .intel__tab.is-active{color:#fff;background:var(--accent-deep);border-color:transparent; box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent);} .intel__panel{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;max-width:1040px;margin:0 auto;} .intel__stage{position:relative;width:100%;max-width:440px;aspect-ratio:1;margin:0 auto;} .intel__splash{position:absolute;left:50%;top:50%;height:94%;width:auto;transform:translate(-50%,-50%) rotate(8deg); filter:drop-shadow(0 22px 34px rgba(60,30,40,.22));transition:opacity .35s ease,transform .35s ease;} .intel__splash.is-out{opacity:0;transform:translate(-50%,-50%) rotate(8deg) scale(.9);} .intel__ingredients{position:absolute;inset:0;z-index:2;} .chip{position:absolute;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line); border-radius:999px;padding:8px 16px 8px 8px;font-weight:600;font-size:.92rem;white-space:nowrap; box-shadow:0 10px 24px -12px rgba(60,30,40,.4);transform:translate(-50%,-50%) scale(.5);opacity:0; transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s ease;} .chip.in{transform:translate(-50%,-50%) scale(1);opacity:1;} .chip__dot{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent-deep),var(--accent));flex:0 0 auto;} .chip__img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:0 0 auto;} /* Ingredient Intelligence — vertical flow */ .intel__flow{position:relative;} .flow__step{position:relative;display:flex;gap:18px;padding-bottom:24px;} .flow__step:last-of-type{padding-bottom:0;} .flow__step:not(.flow__step--out)::before{content:"";position:absolute;left:17px;top:36px;bottom:2px;width:2px; background:linear-gradient(var(--accent),color-mix(in srgb,var(--accent) 22%,transparent));transition:background .5s ease;} .flow__num{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center; font-weight:700;font-size:.98rem;color:#fff;background:var(--accent-deep); box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 70%,transparent);position:relative;z-index:1;} .flow__body{padding-top:4px;} .flow__k{display:block;font-size:.76rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:3px;transition:color .4s ease;} .flow__v{font-weight:500;font-size:1rem;line-height:1.45;color:var(--ink);} .flow__step--out{margin-top:4px;padding:16px 18px;border-radius:16px; background:linear-gradient(150deg,var(--accent-tint),#fff);border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));} .flow__step--out .flow__num{font-size:1.2rem;} .flow__v--state{font-weight:700;font-size:clamp(1.15rem,2vw,1.5rem);line-height:1.2;color:var(--ink);} /* swap pulse on flavor change */ .intel__flow.is-swap .flow__step{animation:flowIn .5s ease both;} .intel__flow.is-swap .flow__step:nth-child(2){animation-delay:.06s;} .intel__flow.is-swap .flow__step:nth-child(3){animation-delay:.12s;} .intel__flow.is-swap .flow__step:nth-child(4){animation-delay:.18s;} @keyframes flowIn{from{opacity:.25;transform:translateX(8px);}to{opacity:1;transform:none;}} .intel__badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;} .intel__badges span{font-size:.84rem;font-weight:600;padding:8px 16px;border-radius:999px;background:#fff;border:1px solid var(--accent);color:var(--accent-deep);} /* пищевая ценность под бейджами: цифры мелким кеглем, чтобы не спорить с flow */ .intel__nutri{margin:14px 0 0;font-size:.86rem;line-height:1.5;color:var(--ink-soft);} .intel__nutri b{color:var(--accent-deep);font-weight:700;} /* ========================================================= LINES — expanding cards ========================================================= */ .line__head{text-align:center;margin-bottom:42px;} .line__tag{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--accent-deep);background:#fff;border:1px solid var(--line);padding:6px 16px;border-radius:999px;margin-bottom:14px;} /* обязательная оговорка по тонизирующим напиткам — мелким, но читаемым */ .line__note{max-width:760px;margin:6px auto 0;text-align:center;font-size:.86rem;line-height:1.55; color:var(--ink-soft);} .cards{display:flex;gap:20px;align-items:stretch;overflow-x:auto; /* stretch держит свёрнутые карточки ровными (тизеры разной длины), но раздувал бы соседей до высоты раскрытой — на время раскрытия переключаемся на flex-start */ scroll-snap-type:x proximity;scroll-padding:4px;padding:12px 4px 24px; scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--accent) 55%,transparent) transparent;} .cards::-webkit-scrollbar{height:8px;} .cards::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--accent) 40%,transparent);border-radius:99px;} .cards.has-open{align-items:flex-start;} .card{--media-h:320px;--media-k:1; position:relative;display:flex;flex-direction:column;flex:0 0 340px;min-width:0;scroll-snap-align:start; background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;cursor:pointer; transition:flex-basis .55s cubic-bezier(.2,.7,.2,1),box-shadow .3s ease,transform .3s ease;} .card[data-flavor="strawberry"]{--accent:var(--strawberry);--accent-2:var(--strawberry-2);--accent-tint:var(--strawberry-tint);--accent-deep:var(--strawberry-deep);} .card[data-flavor="cucumber"]{--accent:var(--cucumber);--accent-2:var(--cucumber-2);--accent-tint:var(--cucumber-tint);--accent-deep:var(--cucumber-deep);} .card[data-flavor="energy"]{--accent:var(--energy);--accent-2:var(--energy-2);--accent-tint:var(--energy-tint);--accent-deep:var(--energy-deep);} .card[data-flavor="balance"]{--accent:var(--balance);--accent-2:var(--balance-2);--accent-tint:var(--balance-tint);--accent-deep:var(--balance-deep);} .card[data-flavor="currant"]{--accent:var(--currant);--accent-2:var(--currant-2);--accent-tint:var(--currant-tint);--accent-deep:var(--currant-deep);} .card[data-flavor="focus"]{--accent:var(--focus);--accent-2:var(--focus-2);--accent-tint:var(--focus-tint);--accent-deep:var(--focus-deep);} .card:hover{box-shadow:0 24px 44px -22px color-mix(in srgb,var(--accent) 55%,rgba(60,30,40,.4));transform:translateY(-6px);} .card__head{padding:26px;text-align:center;display:flex;flex-direction:column;align-items:center;} /* --media-h — место в потоке, --media-k — масштаб сцены. При раскрытии банка сжимается именно scale'ом всей сцены, а не уменьшением height: траектории разлёта компонентов заданы литеральными translate() и при простом сжатии контейнера компоненты остались бы крупнее самой банки. Отрицательный margin убирает пустоту под сжатой сценой. */ .card__media{position:relative;width:100%;height:var(--media-h);border-radius:16px;overflow:visible; margin-bottom:calc(14px - var(--media-h) * (1 - var(--media-k))); background:radial-gradient(78% 76% at 50% 42%, var(--accent-tint), color-mix(in srgb,var(--accent-tint) 45%,transparent) 62%, transparent 82%); display:flex;align-items:center;justify-content:center; transform:scale(var(--media-k));transform-origin:top center; transition:transform .45s cubic-bezier(.2,.7,.2,1),margin-bottom .45s ease;} .card__can{position:relative;z-index:2;height:96%;width:auto;object-fit:contain; transition:transform .45s cubic-bezier(.2,.7,.2,1);} .card:hover .card__can, .card.is-open .card__can{transform:scale(1.08) rotate(5deg);} /* компоненты выезжают из-за банки: на hover (ПК) ИЛИ при раскрытии (мобилка/клик) */ .card__ingr{position:absolute;z-index:1;left:50%;top:52%;width:70px;height:auto; transform:translate(-50%,-50%) scale(.55);opacity:0; filter:drop-shadow(0 8px 14px rgba(60,30,40,.28)); transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .45s ease;pointer-events:none;} .card:hover .card__ingr--1, .card.is-open .card__ingr--1{transform:translate(-150%,-60%) rotate(-14deg) scale(1);opacity:1;} .card:hover .card__ingr--2, .card.is-open .card__ingr--2{transform:translate(55%,25%) rotate(12deg) scale(1);opacity:1;} /* размеры под пропорции конкретных вырезов */ .card[data-flavor="energy"] .card__ingr--1{width:84px;} /* долька апельсина — широкая */ .card[data-flavor="energy"] .card__ingr--2{width:auto;height:96px;} /* гроздь гуараны */ .card[data-flavor="balance"] .card__ingr--1{width:auto;height:150px; filter:drop-shadow(0 10px 16px rgba(70,40,110,.42));} /* веточка лаванды — высокая, бледная → усиленная тень */ .card[data-flavor="balance"] .card__ingr--2{width:78px;} /* долька лимона — широкая */ /* лаванда выходит полностью влево от банки + наклон CCW, чтобы не «висела в воздухе» */ .card[data-flavor="balance"]:hover .card__ingr--1, .card[data-flavor="balance"].is-open .card__ingr--1{transform:translate(-168%,-28%) rotate(-24deg) scale(1);} .card__name{font-weight:600;font-size:1.2rem;margin-bottom:8px;} .card__tease{font-size:.94rem;color:var(--ink-soft);transition:opacity .3s ease;} .card__more{margin-top:16px;display:inline-flex;align-items:center;justify-content:center;min-height:44px; padding:11px 24px;border-radius:999px; font-size:.88rem;font-weight:700;color:var(--ink); background:var(--accent-tint);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent); transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .3s ease;} .card:hover .card__more{background:var(--accent-deep);color:#fff;border-color:transparent;} /* у раскрытой карточки тизер и «Подробнее +» дублируют то, что уже открыто, — убираем и из вида, и из потока (min-height:0 гасит тач-таргет 44px кнопки) */ .card.is-open .card__tease, .card.is-open .card__more{opacity:0;height:0;min-height:0;margin:0;padding:0;border-width:0; overflow:hidden;pointer-events:none;} /* карточка «Скоро» раскрывается кликом, как и остальные, — курсор должен это подтверждать */ .card--soon .card__more{background:transparent;border-color:var(--line);color:var(--ink-soft);cursor:pointer;} .card--soon:hover .card__more{background:transparent;color:var(--ink-soft);} /* expanded */ .card__detail{display:none;position:relative;padding:30px;border-left:1px solid var(--line);background:linear-gradient(160deg,var(--accent-tint),#fff);} .card.is-open{flex-direction:row;align-items:stretch;text-align:left;cursor:default;flex-basis:min(720px,90vw);} .card.is-open .card__head{flex:0 0 300px;justify-content:center;} .card.is-open .card__detail{display:block;flex:1 1 auto;animation:fadeIn .5s ease both;} @keyframes fadeIn{from{opacity:0;transform:translateX(10px);}to{opacity:1;transform:none;}} /* мобильный вариант без transform: горизонтальный въезд в колонке неуместен, а главное — даже завершённый fadeIn держит computed transform (identity-матрица, а не none), и .card__detail остаётся containing block — крестик не выходит в угол карточки */ @keyframes fadeSoft{from{opacity:0;}to{opacity:1;}} .card__detail h4{font-weight:700;font-size:1.5rem;margin-bottom:12px;color:var(--accent-deep);padding-right:42px;} .card__desc{color:var(--ink-soft);margin-bottom:16px;line-height:1.65;} .card__facts{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:18px;} .card__facts li{font-size:.95rem;} .card__facts b{font-weight:600;} .card__chips{display:flex;flex-wrap:wrap;gap:8px;} .card__chips span{font-size:.82rem;font-weight:600;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--accent);color:var(--accent-deep);} .card__close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;border:1px solid var(--line); background:#fff;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink-soft);transition:.2s;} .card__close:hover{background:var(--accent);color:#fff;border-color:transparent;} /* при открытии карточка расширяется, слайдер прокручивается к ней */ /* soon teaser */ .card__media--blur{overflow:hidden;} /* контейним размытую заливку (у .card__media теперь overflow:visible) */ /* тизер остаётся тизером (приём из ТЗ §4.6), но перестаёт спорить с реальными банками: заливка светлее и мягче — карточка читается как «пока пусто», а не как главный акцент */ .card__media--blur .soon__fill{position:absolute;inset:0; background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 34%,#fff),color-mix(in srgb,var(--accent-2) 28%,#fff)); filter:blur(26px);transform:scale(1.2);opacity:.9;} .soon__badge{position:relative;z-index:2;font-weight:700;font-size:1.05rem;color:#fff;padding:10px 22px;border-radius:999px; background:color-mix(in srgb,var(--accent-deep) 88%,#000);border:1px solid rgba(255,255,255,.5);} .is-blur{filter:blur(7px);user-select:none;} /* ========================================================= ABOUT — манифест-разворот: текст + банка-герой ========================================================= */ /* шапка и продукт — двумя колонками, плитки манифеста — во всю ширину под ними */ .about__inner{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:1.22fr .78fr; gap:clamp(20px,3vw,40px);align-items:center;} /* min-width:0 обязателен всей цепочке до ленты «Для кого». У грид-элемента ширина по умолчанию не может стать меньше содержимого (min-width:auto), поэтому лента .who считала её от суммы шести карточек и раздувала секцию: на 390px плитка манифеста выходила 1792px — текст переносился по строкам такой длины и обрезался краем экрана. Горизонтального скролла при этом не было, overflow-x:clip на html/body его подавлял, и дефект дожил до телефона заказчика. */ .about__inner>*{min-width:0;} .about__head{align-self:center;} .about__title{font-weight:700;font-size:clamp(2rem,5vw,3.4rem);line-height:1.05;letter-spacing:-.02em;margin-bottom:14px;} /* лид — выносная цитата с акцентной чертой */ .about__lead{font-weight:700;font-size:clamp(1.35rem,2.8vw,2rem);line-height:1.22;color:var(--accent-deep); padding-left:18px;border-left:3px solid var(--accent);} /* Манифест разложен по плиткам bento (как «4 причины» и «Осознанно»): текст сохранён дословно, но идёт в три колонки вместо одной — самая длинная колонка 6 строк вместо десяти, и секция влезает в экран. Строки auto, а не 200px: высоту задаёт текст. */ .about__bento{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:auto; gap:18px;align-items:stretch;margin-top:clamp(4px,1vw,12px);} .about__tile{justify-content:flex-start;padding:24px;} .about__tile .about__text{font-size:1rem;line-height:1.62;max-width:38ch;margin-top:6px;} .about__tile .bento__k{color:color-mix(in srgb,var(--c) 62%,var(--ink));} /* подпись-финал манифеста: вынесена из абзаца, работает как росчерк под текстом */ .about__sign{margin:0;font-family:var(--font-display);font-weight:700; font-size:clamp(1.1rem,2vw,1.5rem);line-height:1.25;} .about__text{font-size:clamp(1.04rem,1.6vw,1.18rem);color:var(--ink-soft);line-height:1.72;} /* акцентная подсветка ключевых фраз манифеста — усиленная. Маркер дорисовывается, когда секция входит в экран: .is-in вешает существующий reveal-наблюдатель в js/main.js, отдельного класса и кода не нужно */ .about__hl{color:var(--ink);font-weight:700;font-size:1.06em; background:linear-gradient(transparent 56%, color-mix(in srgb,var(--accent) 34%,transparent) 56%); background-size:0% 100%;background-repeat:no-repeat; transition:background-size .7s cubic-bezier(.22,.8,.3,1) .15s;} .about.is-in .about__hl{background-size:100% 100%;} @media (prefers-reduced-motion:reduce){ .about__hl{background-size:100% 100%;transition:none;} } .about__who{margin:0;min-width:0;} /* подвал секции: росчерк-финал строкой, под ним «для кого» портретами во всю ширину. Прежний двухколоночный ряд (фраза слева, пилюли справа) сжимал бы карточки до нечитаемых. */ .about__foot{grid-column:1/-1;display:grid;grid-template-columns:1fr;min-width:0; gap:clamp(18px,3vw,32px);margin-top:clamp(12px,1.6vw,20px);} .about__foot>*{min-width:0;} .about__who-k{display:block;font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);margin-bottom:14px;} /* --- «Для кого»: портреты сегментов --------------------------------------- Мозаика вместо ровной сетки 3×2: первый кадр героем на 2×2, пять остальных вокруг него, у среднего в нижнем ряду — сбивка ритма. Раскладку целиком делает автопотоком грид, явные координаты не нужны. Накладной банки здесь больше нет: на снятых портретах банка уже в кадре и этикетка воспроизведена достоверно — вырез поверх давал бы вторую. */ .who{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,20px); align-items:start;} .who__card{position:relative;margin:0;border-radius:var(--radius);overflow:hidden; background:linear-gradient(160deg,var(--c2,#f5f5f5),color-mix(in srgb,var(--c,#ddd) 30%,#fff)); box-shadow:0 14px 34px rgba(60,40,40,.10);isolation:isolate;} .who__photo{display:block;width:100%;height:100%;aspect-ratio:3/4;object-fit:cover; transition:transform .55s cubic-bezier(.22,.61,.36,1);} /* герой: высоту задают два ряда, поэтому пропорция снимается, а кадр подрезается по object-position — лица во всех шести снимках сидят в верхней половине */ .who__card--hero{grid-column:span 2;grid-row:span 2;} .who__card--hero .who__photo{aspect-ratio:auto;object-position:50% 30%;} .who__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent 40%,rgba(38,24,26,.14) 58%,rgba(38,24,26,.78) 100%);} .who__flavor{position:absolute;top:16px;left:16px;z-index:3; font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; padding:6px 12px;border-radius:999px;color:#4a2230; background:rgba(255,255,255,.82);backdrop-filter:blur(6px);} .who__card figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:18px 16px;color:#fff;} .who__card figcaption b{display:block;font-family:var(--font-display);font-weight:700; font-size:1.02rem;line-height:1.18;} .who__card figcaption span{display:block;margin-top:4px;font-size:.8rem;font-weight:600;opacity:.92;} .who__card--hero figcaption{padding:26px 24px;} .who__card--hero figcaption b{font-size:clamp(1.3rem,2.2vw,1.9rem);} .who__card--hero figcaption span{margin-top:7px;font-size:.95rem;} /* появление вразнобой: секция .about уже несёт .reveal, здесь только задержка по индексу */ .about.reveal .who__card{opacity:0;transform:translateY(22px); transition:opacity .6s ease,transform .6s ease,box-shadow .35s ease;} .about.reveal.is-in .who__card{opacity:1;transform:none; transition-delay:calc(var(--i,0) * 70ms);} @media (hover:hover){ .who__card{transition:box-shadow .35s ease;} .who__card:hover{box-shadow:0 22px 46px rgba(60,40,40,.18);} .who__card:hover .who__photo{transform:scale(1.06);} } /* сцена с продуктом */ .about__scene{position:relative;min-height:265px;display:flex;align-items:center;justify-content:center;} .about__scene::before{content:"";position:absolute;left:50%;top:50%;width:min(360px,84%);aspect-ratio:1; transform:translate(-50%,-50%);border-radius:50%;pointer-events:none; background:radial-gradient(circle at 40% 34%, color-mix(in srgb,var(--accent-tint) 94%,#fff) 0%, color-mix(in srgb,var(--accent) 15%,var(--accent-tint)) 100%); box-shadow:0 44px 84px -42px color-mix(in srgb,var(--accent) 48%,rgba(60,30,40,.4));} .about__can{position:relative;z-index:2;height:min(265px,36vh);width:auto; filter:drop-shadow(0 26px 42px rgba(60,30,40,.30)); animation:aboutBob 8s ease-in-out infinite alternate;} @keyframes aboutBob{from{transform:rotate(-1.6deg) translateY(-8px);}to{transform:rotate(1.6deg) translateY(8px);}} .about__ingr{position:absolute;z-index:3;width:auto; filter:drop-shadow(0 14px 22px rgba(60,30,40,.28)); animation:floatBob var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate;} .about__ingr--1{height:92px;left:4%;top:12%;--dur:6s;--delay:-1s;--r:-9deg;} .about__ingr--2{height:70px;right:2%;top:22%;--dur:8s;--delay:-2.5s;--r:11deg;} .about__ingr--3{height:78px;right:8%;bottom:10%;--dur:7s;--delay:-1.6s;--r:6deg;} /* ========================================================= WHY — LABEL · честная этикетка (паспорт состава) ========================================================= */ /* секция как холст для фоновых пузырьков */ .why{position:relative;overflow:hidden;} .why .container{position:relative;z-index:1;} /* фоновые пузырьки — атмосфера газировки, за контентом */ .why__bubbles{position:absolute;inset:0;z-index:0;pointer-events:none;} .why__bubble{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);border-radius:50%; background:radial-gradient(circle at 32% 28%, rgba(255,255,255,.9), color-mix(in srgb,var(--accent) 14%, rgba(255,255,255,.4)) 66%, transparent 100%); border:1px solid rgba(255,255,255,.7); box-shadow:0 8px 20px -8px color-mix(in srgb,var(--accent) 30%,rgba(60,30,40,.25)), inset 0 2px 8px rgba(255,255,255,.7); animation:bubbleFloat var(--dur,7s) ease-in-out var(--delay,0s) infinite;} /* разворот: слева обратная сторона банки (реальный состав), справа этикетка */ .why__split{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr); gap:clamp(28px,5vw,60px);align-items:center;margin-top:46px;} .why__scene{position:relative;display:flex;flex-direction:column;align-items:center; gap:clamp(14px,2vw,22px);} /* наклон и покачивание разведены по разным элементам: под лупой банка ложится набок, а покачивание просто ставится на паузу — так возврат обходится без скачка */ .why__tilt{transform:rotate(4.5deg);transition:transform .4s ease;} .why__can{height:min(520px,62vh);width:auto; filter:drop-shadow(0 30px 46px rgba(60,30,40,.32)); transition:filter .4s ease; animation:whyCanBob 8s ease-in-out infinite alternate;} @keyframes whyCanBob{from{transform:translateY(-9px);}to{transform:translateY(9px);}} /* Поза «лёжа»: текст на банке набран поперёк, поэтому под лупой банка поворачивается по часовой — направление текста на банке совпадает с направлением текста в стекле. --ln-s ставит JS: лежачая банка длиной с прежнюю высоту, её нужно вписать в колонку. */ .why__scene.is-lens .why__tilt{transform:rotate(90deg) scale(var(--ln-s,.88));} .why__scene.is-lens .why__can{animation-play-state:paused; /* тень поворачивается вместе с банкой: смещение задано в её локальных осях, чтобы на экране свет остался сверху */ filter:drop-shadow(-30px 0 46px rgba(60,30,40,.32));} /* «стекло» — горизонтальное окно, а не круг: текст на банке набран поперёк, в лупе он развёрнут в горизонт, и в круг Ø200 попадало бы несколько букв поперёк строки */ .lens{display:none;} @media (hover:hover) and (pointer:fine){ .lens{display:block;position:absolute;left:0;top:0;z-index:3;pointer-events:none; width:clamp(280px,32vw,380px);height:clamp(116px,14vw,148px);border-radius:999px; background-repeat:no-repeat;background-color:#F4ECE4; border:2px solid rgba(255,255,255,.9); box-shadow:0 22px 46px -18px rgba(60,30,40,.55),0 0 0 1px rgba(60,30,40,.12), inset 0 0 0 1px rgba(255,255,255,.6); opacity:0;transform:scale(.94);transition:opacity .22s ease,transform .22s ease;} .lens.is-on{opacity:1;transform:none;} /* блик, чтобы окно читалось линзой, а не дыркой в макете */ .lens::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:linear-gradient(128deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 34%, transparent 52%,rgba(255,255,255,.16) 100%);} .why__scene.is-lens .why__tilt{cursor:zoom-in;} .why__can{cursor:zoom-in;} } .why__zoom{display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:11px 20px; border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.8); font-family:var(--font-display);font-weight:700;font-size:.92rem;color:var(--ink); cursor:pointer;transition:background .25s,border-color .25s,transform .2s;} .why__zoom:hover{background:#fff;border-color:var(--accent);transform:translateY(-2px);} .why__zoom svg{color:var(--accent-deep);} /* полноэкранный просмотр: та же лента, читается прокруткой вбок */ .viewer{position:fixed;inset:0;z-index:120;display:flex;flex-direction:column; background:rgba(30,15,22,.94);backdrop-filter:blur(4px); animation:viewerIn .25s ease both;} .viewer[hidden]{display:none;} @keyframes viewerIn{from{opacity:0;}to{opacity:1;}} .viewer__bar{display:flex;align-items:center;gap:12px;padding:12px clamp(12px,3vw,24px); color:#fff;} .viewer__title{flex:1;font-family:var(--font-display);font-weight:700;font-size:.95rem; overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .viewer__zoom,.viewer__close{min-height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.35); background:transparent;color:#fff;cursor:pointer;font-family:var(--font-display);font-weight:700; transition:background .2s,border-color .2s;} .viewer__zoom{padding:10px 18px;font-size:.88rem;} .viewer__close{min-width:44px;font-size:1.5rem;line-height:1;} .viewer__zoom:hover,.viewer__close:hover{background:rgba(255,255,255,.16);border-color:#fff;} .viewer__stage{flex:1;display:flex;align-items:center;justify-content:center; overflow:auto;overscroll-behavior:contain;padding:0 clamp(12px,3vw,24px);} .viewer__stage img{max-width:100%;height:auto;border-radius:10px;} /* в увеличенном режиме лента перестаёт вписываться и прокручивается вбок */ .viewer.is-zoomed .viewer__stage{justify-content:flex-start;} .viewer.is-zoomed .viewer__stage img{max-width:none;width:auto;height:min(62vh,560px);} .viewer__hint{padding:10px 24px 18px;text-align:center;color:rgba(255,255,255,.72);font-size:.84rem; opacity:0;transition:opacity .3s ease;} /* двигать нечего, пока лента вписана целиком */ .viewer.is-zoomed .viewer__hint{opacity:1;} .label{width:100%;max-width:540px;background:#fff;border:1px solid var(--line);border-radius:14px; padding:clamp(24px,4vw,40px) clamp(24px,4vw,44px); box-shadow:0 28px 56px -30px rgba(60,30,40,.5); font-variant-numeric:tabular-nums;} /* шапка этикетки + жирная линейка (nutrition-facts деталь) */ /* wrap обязателен: «NATONIQ Energy» + «Состав · честно» в одну строку на узком телефоне не помещаются, и без переноса вторая надпись сжималась бы в столбик по буквам */ .label__head{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px; flex-wrap:wrap;padding-bottom:14px;border-bottom:3px solid var(--ink);} .label__brand{font-weight:700;font-size:1.5rem;letter-spacing:.02em;} .label__k{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);} .label__rows{list-style:none;margin:0;padding:0;} .label__row,.label__foot{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:18px; padding:16px 0;} .label__row{border-bottom:1px solid var(--line);} .label__name{color:var(--ink-soft);font-size:1.02rem;} .label__hint{font-style:normal;font-size:.82rem;color:color-mix(in srgb,var(--ink-soft) 78%,transparent);white-space:nowrap;} .label__val{font-weight:700;font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink);line-height:1;white-space:nowrap;} .label__num{color:var(--strawberry);} .label__val--no{color:var(--ink);} .label__val--ok{color:var(--cucumber-deep);font-size:clamp(1.6rem,3vw,2rem);} /* итоговая строка — жирная линейка сверху */ .label__foot{padding-top:18px;border-top:3px solid var(--ink);margin-top:2px;} .label__foot .label__name{color:var(--ink);font-weight:700;font-size:1.1rem;} /* сноска под этикеткой — отсылка к полному составу на банке */ .label__note{margin-top:14px;font-size:.78rem;color:var(--ink-soft);} /* построчное появление — «печатается декларация» */ .label__row,.label__foot{opacity:0;transform:translateY(10px);} .why.is-in .label__row,.why.is-in .label__foot{opacity:1;transform:none; transition:opacity .5s ease, transform .5s ease;} /* строк стало 8 (добавлены консерванты и пищевая ценность) — шаг укорочен с .10s до .07s, иначе нижние строки «печатаются» уже после того, как блок ушёл из вида */ .why.is-in .label__row:nth-child(1){transition-delay:.08s;} .why.is-in .label__row:nth-child(2){transition-delay:.15s;} .why.is-in .label__row:nth-child(3){transition-delay:.22s;} .why.is-in .label__row:nth-child(4){transition-delay:.29s;} .why.is-in .label__row:nth-child(5){transition-delay:.36s;} .why.is-in .label__row:nth-child(6){transition-delay:.43s;} .why.is-in .label__row:nth-child(7){transition-delay:.50s;} .why.is-in .label__row:nth-child(8){transition-delay:.57s;} .why.is-in .label__foot{transition-delay:.64s;} /* ========================================================= PROBLEM ========================================================= */ /* три желания — плавающие пузырьки разного размера/высоты */ .problem__bubbles{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:center; gap:20px;margin-top:40px;min-height:340px;} /* ⚠️ Ни backdrop-filter, ни color-mix здесь не возвращать: blur визуально ничего не давал (под пузырём однородный градиент секции), но на части машин Chromium рендерил такой элемент пустым — пузыри пропадали вместе с текстом. Фон собран слоями: белая вуаль на rgba поверх сплошного var(--c). */ .problem__bubble{--s:180px;--tx:0px;--ty:0px;position:relative;z-index:1; width:var(--s);height:var(--s);border-radius:50%; display:grid;place-items:center;text-align:center;padding:20px; transform:translate(var(--tx),var(--ty)); background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.93) 0%, rgba(255,255,255,.74) 58%, rgba(255,255,255,.4) 100%), var(--c); border:1px solid rgba(255,255,255,.55); box-shadow:0 26px 50px -20px rgba(120,30,40,.5), inset 8px 10px 22px rgba(255,255,255,.5), inset -10px -14px 26px rgba(90,40,60,.07); animation:bubbleFloat 6s ease-in-out infinite;transition:transform .3s ease,box-shadow .3s ease;} .problem__bubble:hover{transform:translate(var(--tx),var(--ty)) scale(1.04); box-shadow:0 34px 60px -18px rgba(120,30,40,.6), inset 8px 10px 22px rgba(255,255,255,.55), inset -10px -14px 26px rgba(90,40,60,.08);} .problem__bubble::after{content:"";position:absolute;top:13%;left:19%;width:26%;height:19%;border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.95),transparent 70%);pointer-events:none;} .problem__bubble b{display:block;font-weight:700;font-size:1.35rem;color:var(--c-deep,var(--c));} /* «цена» желания — зачёркнута: видно, чем обычно приходится платить */ .problem__bubble s{display:block;margin-top:4px;font-size:.9rem;font-weight:600; color:var(--ink-soft); text-decoration:line-through;text-decoration-thickness:1.5px; text-decoration-color:color-mix(in srgb,var(--c) 70%,transparent);} /* живой разброс: разный размер, вертикаль и горизонталь — не по дуге и не в ряд. Параметры перенесены из прежнего блока «Позиционирование» (.edge__item) — заказчик отметил, что там пузыри читались интереснее. Рецепт стекла у обоих был один и тот же, отличалась только подача: масштаб, разброс, декор вокруг и реакция на наведение. ⚠️ «Бодрость» — самое длинное слово: текст вписывается не в квадрат, а в хорду на высоте текстового блока, поэтому третьему кругу нужен запас по диаметру. */ .problem__bubble--1{--s:214px;--tx:-12px;--ty:44px;} .problem__bubble--2{--s:268px;--tx:20px;--ty:-30px;animation-delay:-2s;} .problem__bubble--3{--s:198px;--tx:12px;--ty:70px;animation-delay:-4s;} /* 761–1100px: втроём в ряд крупные круги не помещаются в контейнер — на 768 левый выходил за край. Уменьшаем диаметры и поджимаем сдвиги, разброс сохраняется. */ @media (min-width:761px) and (max-width:1100px){ .problem__bubbles{min-height:300px;gap:16px;} .problem__bubble--1{--s:178px;--tx:-6px;--ty:34px;} .problem__bubble--2{--s:222px;--tx:10px;--ty:-22px;} .problem__bubble--3{--s:166px;--tx:8px;--ty:54px;} .problem__bubble b{font-size:1.24rem;} } /* декоративные пустые пузырьки вокруг — среда, а не содержание */ .problem__deco{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s); border-radius:50%;pointer-events:none;z-index:0; /* ⚠️ без color-mix и backdrop-filter — см. предупреждение выше по блоку */ background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(255,236,240,.52) 68%, transparent 100%); border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 18px -8px rgba(120,30,40,.25), inset 0 2px 8px rgba(255,255,255,.7); animation:bubbleFloat 7s ease-in-out infinite;} .problem__deco:nth-of-type(even){animation-duration:9s;animation-delay:-3s;} @keyframes bubbleFloat{0%,100%{translate:0 0;}50%{translate:0 -10px;}} /* мостик между «ценой компромисса» и ответом бренда */ .problem__bridge{display:flex;flex-direction:column;align-items:center;gap:6px;margin:26px 0 0;} .problem__bridge span{font-weight:700;font-size:1.02rem;color:var(--ink); background:#fff;border:1px solid var(--line);border-radius:999px;padding:9px 22px; box-shadow:0 10px 24px -14px rgba(60,30,40,.4);} .problem__bridge i{font-style:normal;font-size:1.3rem;line-height:1;color:var(--ink-soft); animation:bridgeArrow 2.2s ease-in-out infinite;} @keyframes bridgeArrow{0%,100%{transform:translateY(0);opacity:.55;}50%{transform:translateY(5px);opacity:1;}} /* ответ NATONIQ — герой (оранжевая, энергия) */ .problem__answer{position:relative;overflow:visible;margin-top:26px;border-radius:calc(var(--radius) + 6px); color:#fff;background:linear-gradient(130deg, #F26A16 0%, #FF841E 48%, #FF9E2C 100%); box-shadow:0 34px 66px -30px rgba(170,80,20,.55); display:grid;grid-template-columns:.95fr 1.05fr;align-items:stretch;gap:20px;padding:40px 48px;} .problem__answer::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit; background: radial-gradient(46% 60% at 88% 12%, rgba(255,255,255,.34), transparent 66%), radial-gradient(48% 58% at 6% 94%, color-mix(in srgb,var(--energy-2) 55%,transparent), transparent 68%);} .problem__answer > *{position:relative;z-index:1;} /* крупная банка, выступающая за края плашки */ .problem__answer-media{position:relative;min-height:250px;} /* банка выходит за левый край плашки, но целиком остаётся внутри секции */ .problem__answer-media img{position:absolute;left:40%;top:50%;transform:translate(-50%,-50%); height:calc(100% + 96px);width:auto;max-width:none;filter:drop-shadow(0 26px 34px rgba(90,20,40,.4));} .problem__answer-k{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;background:rgba(255,255,255,.22);border-radius:999px;padding:5px 14px;} .problem__answer h3{font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.08;margin:14px 0 4px;} /* пункты ответа зеркалят пузырьки выше и снимают каждую оговорку */ .problem__checks{list-style:none;display:flex;flex-direction:column;gap:9px;margin:16px 0 18px;padding:0;} /* маркер абсолютом — перенесённая часть строки встаёт под текстом, а не под галочкой */ .problem__checks li{font-weight:600;font-size:1.05rem;position:relative;padding-left:31px;} .problem__checks em{font-style:normal;font-weight:500;opacity:.86;} .problem__checks li::before{content:"✓";position:absolute;left:0;top:2px;display:grid;place-items:center; width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.25);font-size:.8rem;} .problem__answer-out{font-weight:700;font-size:clamp(1.1rem,1.8vw,1.35rem);} /* ========================================================= EDGE / POSITIONING — bright juicy contrast anchor ========================================================= */ .edge{position:relative;overflow:hidden;text-align:center;color:var(--ink); background:linear-gradient(125deg, #FFDDE1 0%, #FFE0CF 48%, #FFEDCB 100%);} .edge::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(46% 60% at 88% 10%, rgba(255,255,255,.5), transparent 66%), radial-gradient(40% 56% at 8% 96%, color-mix(in srgb,var(--edge-a) 30%,transparent), transparent 70%); transition:--edge-a .55s ease;} .edge .container{position:relative;z-index:1;} .edge .section__title--c{color:var(--ink);} .edge .section__sub{color:var(--ink-soft);} .edge__tag{display:inline-block;margin:0 auto 14px;background:rgba(255,255,255,.7); border-color:rgba(42,35,48,.12);color:var(--ink);} /* Шкала позиционирования с ползунком-магнитом. Прежняя статичная ось (а до неё — стеклянные пузыри) на мобилке разворачивалась в вертикальный список и читалась как набор текста. Здесь смысл блока отдан жесту: банку тянут к любому полюсу, а пружина возвращает её в центр — «нас тянет в обе стороны, а место бренда посередине». */ .scale{--can-h:clamp(150px,19vw,240px); position:relative;max-width:820px;margin:clamp(34px,5vw,52px) auto 0; padding:0 clamp(4px,2vw,18px);} .scale__poles{display:flex;justify-content:space-between;align-items:flex-start; gap:16px;text-align:left;} .scale__pole{display:flex;flex-direction:column;max-width:44%; opacity:.62;transition:opacity .35s ease,transform .35s ease;} .scale__pole:last-child{text-align:right;align-items:flex-end;} .scale__pole b{font-weight:700;line-height:1.15;font-size:clamp(.98rem,1.6vw,1.18rem); color:var(--ink);transition:color .35s ease;} .scale__pole i{font-style:normal;margin-top:5px;max-width:22ch; font-size:.88rem;line-height:1.35;color:var(--ink-soft);} .scale__pole.is-hot{opacity:1;transform:translateY(-2px);} .scale__pole.is-hot b{color:var(--c);} /* рельса: слева «резче», справа «чище», посередине — лунка магнита */ .scale__rail{position:relative;height:3px;border-radius:3px; margin:calc(var(--can-h) + 46px) 0 0; /* место под банку + зазор от подписей полюсов */ background:linear-gradient(90deg,var(--energy-deep),var(--strawberry),var(--cucumber-deep)); cursor:pointer;} .scale__rail::before{content:"";position:absolute;inset:-24px 0;} /* зона попадания по клику */ .scale__home{position:absolute;left:50%;top:50%;width:24%;height:34px;transform:translate(-50%,-50%); border-radius:999px;pointer-events:none; background:radial-gradient(60% 100% at 50% 50%,color-mix(in srgb,var(--strawberry) 26%,transparent),transparent 72%);} /* ползунок «стоит» на рельсе: точка — его основание и центр по линии, банка выше. При центрировании по высоте линия проходила сквозь банку, а точка наезжала на карточку */ .scale__knob{position:absolute;left:50%;bottom:-11px;z-index:2; display:flex;flex-direction:column;align-items:center; min-width:56px;padding:0 8px; transform:translateX(-50%) translateX(var(--kx,0px)); cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;} .scale__knob:active{cursor:grabbing;} .scale__knob img{height:var(--can-h);width:auto;margin-bottom:6px; transform:rotate(var(--kr,0deg));transform-origin:50% 92%; transition:transform .18s ease-out;pointer-events:none; filter:drop-shadow(0 22px 34px rgba(60,30,40,.32));} .scale__dot{width:22px;height:22px;border-radius:50%;background:var(--strawberry-deep); box-shadow:0 0 0 7px color-mix(in srgb,var(--strawberry) 26%,transparent),0 8px 18px -8px rgba(60,30,40,.45);} /* пружина включается только на время возврата — при перетаскивании ползунок идёт за пальцем */ .scale__knob.is-releasing{transition:transform .62s cubic-bezier(.34,1.5,.5,1);} .scale__knob:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:12px;} .scale__hint{margin:12px 0 0;font-size:.84rem;font-weight:600;letter-spacing:.02em; color:var(--ink-soft);transition:opacity .4s ease;animation:hintPulse 2.6s ease-in-out infinite;} .scale.is-used .scale__hint{opacity:0;animation:none;} @keyframes hintPulse{0%,100%{opacity:.55;}50%{opacity:1;}} .scale__read{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px; min-height:92px;margin-top:34px;padding:16px 20px;border-radius:var(--radius); background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.8); backdrop-filter:blur(6px);transition:background .4s ease;} .scale__read b{font-weight:700;line-height:1.12;font-size:clamp(1.15rem,2.1vw,1.5rem); color:var(--edge-ink,var(--strawberry-deep));transition:color .35s ease;} .scale__read span{max-width:36ch;font-size:.95rem;line-height:1.4;color:var(--ink);} .scale__read.is-swap b,.scale__read.is-swap span{animation:readIn .35s ease both;} @keyframes readIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}} /* три тезиса — вывод под шкалой; активный подсвечивается вместе с ползунком */ .edge__claims{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 28px; max-width:900px;margin:clamp(26px,4vw,36px) auto 0;padding:0;} .edge__claims li{position:relative;padding-left:20px;font-weight:600;font-size:.98rem;color:var(--ink); opacity:.55;transition:opacity .35s ease,color .35s ease;} .edge__claims li::before{content:"";position:absolute;left:0;top:.42em;width:9px;height:9px; border-radius:50%;background:var(--c);} .edge__claims li.is-hot{opacity:1;color:var(--c);} .edge__note{margin-top:30px;font-weight:700;font-size:clamp(1rem,1.6vw,1.15rem);color:var(--ink);} /* ========================================================= RHYTHM OF THE DAY (бывшая LIFESTYLE GALLERY) Прежняя плитка 4×1 была единственной секцией без собственного приёма и читалась как заглушка рядом с hero, бенто и осью. Теперь: сцена залипает, лента кадров едет вбок по прогрессу скролла, слева — таймкод и состояние, фон красится в цвет вкуса. ========================================================= */ .rhythm{padding-bottom:0;} .rhythm__head{text-align:center;} .rhythm__head .line__tag{margin-bottom:14px;} /* высота задаёт длину прокрутки: сколько вертикали тратится на проезд ленты */ .rhythm__scroller{height:calc(var(--n,4) * 88vh);} /* top = высота .header__inner (66px): липкая шапка не должна резать кадр */ .rhythm__stage{position:sticky;top:66px;height:calc(100svh - 66px);min-height:540px; display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,3vh,32px); overflow:hidden;} /* пятно активного вкуса; --rh-a ставит JS, анимируется через @property */ .rhythm__stage::before{content:"";position:absolute;inset:-15% -20%;z-index:0;pointer-events:none; background:radial-gradient(46% 56% at 24% 46%,color-mix(in srgb,var(--rh-a) 46%,transparent),transparent 72%); transition:--rh-a .7s ease;} /* лента уходит за правый край окна: справа кадры «продолжаются», слева колонка выровнена по общему контейнеру */ .rhythm__grid{position:relative;z-index:1;display:grid;align-items:center; grid-template-columns:clamp(190px,20vw,270px) minmax(0,1fr);gap:clamp(20px,3vw,44px); width:100%;max-width:none;padding-right:0; padding-left:max(var(--pad),calc((100vw - var(--maxw))/2 + var(--pad)));} /* крупный типографический слой; дублирует figcaption -> скрыт от скринридера */ .rhythm__aside{position:relative;min-height:230px;} .rhythm__cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; opacity:0;transform:translateY(18px);transition:opacity .45s ease,transform .45s ease;} .rhythm__cap.is-active{opacity:1;transform:none;} .rhythm__cap b{font-weight:700;line-height:1;letter-spacing:-.02em; font-size:clamp(2.3rem,4.4vw,3.5rem);color:var(--accent-deep);} .rhythm__cap i{font-style:normal;margin-top:14px;font-weight:700;line-height:1.15; font-size:clamp(1.05rem,1.8vw,1.32rem);color:var(--ink);} .rhythm__cap s{text-decoration:none;margin-top:7px;font-size:.94rem;color:var(--ink-soft);} .rhythm__viewport{overflow:hidden;} .rhythm__track{list-style:none;display:flex;align-items:center;gap:clamp(16px,2vw,30px); margin:0;padding:26px 0;transform:translate3d(var(--tx,0px),0,0);will-change:transform;} .rhythm__tail{flex:0 0 auto;width:clamp(24px,5vw,90px);height:1px;list-style:none;} .rhythm__frame{--fh:clamp(300px,58vh,540px);--fw:min(calc(var(--fh) * .75),34vw); flex:0 0 auto;width:var(--fw); opacity:.4;transform:scale(.93);filter:saturate(.72); transition:opacity .5s ease,transform .5s ease,filter .5s ease;} .rhythm__frame.is-active{opacity:1;transform:scale(1.03);filter:none;} .rhythm__frame figure{position:relative;margin:0;border-radius:var(--radius);overflow:hidden; border:1px solid var(--line);box-shadow:0 24px 48px -28px rgba(60,30,40,.55);} .rhythm__frame img{width:100%;aspect-ratio:3/4;object-fit:cover;} .rhythm__frame figure::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent 42%,color-mix(in srgb,var(--c) 18%,transparent) 58%,rgba(30,15,22,.76) 100%);} .rhythm__frame figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 18px;text-align:left;color:#fff;} .rhythm__frame figcaption b{display:block;font-weight:700;font-size:1.1rem;line-height:1.15;} .rhythm__frame figcaption span{display:block;margin-top:4px;font-size:.82rem;font-weight:600;opacity:.92;} /* финальная карточка ленты — выход из блока в выбор вкуса */ .rhythm__frame--cta{opacity:1;filter:none;transform:none;} .rhythm__frame--cta.is-active{transform:none;} .rhythm__cta{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px; aspect-ratio:3/4;padding:clamp(20px,2.4vw,30px);border-radius:var(--radius); border:1px dashed color-mix(in srgb,var(--accent) 45%,var(--line)); background:linear-gradient(160deg,color-mix(in srgb,var(--rh-a) 34%,transparent),transparent 70%);} .rhythm__cta b{font-family:var(--font-display);font-weight:700;line-height:1.12; font-size:clamp(1.25rem,2.2vw,1.6rem);color:var(--ink);} .rhythm__cta p{font-size:.94rem;color:var(--ink-soft);} .rhythm__cta .btn{margin-top:6px;padding:13px 24px;font-size:.95rem;} /* прогресс + перемотка по таймкодам */ .rhythm__nav{position:relative;z-index:1;display:flex;align-items:center;gap:clamp(14px,2vw,26px);} .rhythm__line{position:relative;flex:1 1 auto;height:2px;border-radius:2px;background:var(--line);overflow:hidden;} .rhythm__line i{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:2px;background:var(--accent-deep);} .rhythm__dots{display:flex;flex-wrap:wrap;gap:8px;} .rhythm__dot{font-family:var(--font-display);font-weight:700;font-size:.8rem;letter-spacing:.04em; min-height:40px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);background:transparent; color:var(--ink-soft);cursor:pointer;transition:color .25s,background .25s,border-color .25s;} .rhythm__dot:hover{color:var(--ink);} .rhythm__dot.is-active{color:#fff;background:var(--accent-deep);border-color:transparent;} /* ========================================================= HORECA — «карта напитков» Единственный B2B-блок страницы, и раньше единственный без своего приёма. Теперь строка «Где работает» работает переключателем формата: он пересобирает подборку вкусов, перекрашивает секцию и меняет банки на сцене. Механика собрана из готового: вкладки — вид .intel__tab, кроссфейд банок — .intel__splash.is-out, stagger строк — как у .label__row. ========================================================= */ /* цвет пятна за банками: без регистрации через @property переход цвета щёлкает — та же причина, что у --rh-a в «Ленте дня» */ @property --hc-a{syntax:'';inherits:true;initial-value:#9DE7C4;} .horeca .line__tag{display:block;width:max-content;margin-inline:auto;} /* --- переключатель формата --- */ .horeca__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px; margin-top:clamp(24px,3.4vw,34px);} .horeca__tab{font-family:var(--font-display);font-weight:600;font-size:.95rem;cursor:pointer; padding:12px 22px;min-height:44px;border-radius:999px;border:1px solid var(--line); background:#fff;color:var(--ink-soft);transition:all .25s ease;white-space:nowrap;} .horeca__tab:hover{color:var(--ink);} .horeca__tab.is-active{color:#fff;background:var(--accent-deep);border-color:transparent; box-shadow:0 10px 22px -10px color-mix(in srgb,var(--accent) 70%,transparent);} /* --- панель: сцена с банками + страница меню --- */ .horeca__panel{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(24px,4vw,54px); align-items:center;margin-top:clamp(26px,3.6vw,40px);} .horeca__stage{position:relative;aspect-ratio:1;max-width:420px;width:100%;margin:0 auto;} .horeca__glow{position:absolute;left:50%;top:54%;width:104%;aspect-ratio:1;transform:translate(-50%,-50%); border-radius:50%;filter:blur(38px);opacity:.9;transition:--hc-a .5s ease; background:radial-gradient(circle at 50% 50%,var(--hc-a) 0%, color-mix(in srgb,var(--hc-a) 45%,transparent) 42%,transparent 70%);} /* трансформ собран из переменных: кроссфейд .is-out меняет только --ty/--sc и не стирает наклон — прямой transform в .is-out обнулял бы rotate и банки дёргались бы в вертикаль */ .horeca__can{position:absolute;bottom:4%;width:auto; transform:translateY(var(--ty,0)) rotate(var(--rot,0deg)) scale(var(--sc,1)); transform-origin:50% 88%;transition:opacity .28s ease,transform .28s ease; filter:drop-shadow(0 18px 30px rgba(50,35,40,.28));} .horeca__can.is-out{opacity:0;--ty:10px;--sc:.97;} /* наклон в разные стороны + посадка ближе к центру: у краёв банки «торчали» из сцены */ .horeca__can--1{left:13%;height:82%;z-index:2;--rot:-7deg;} .horeca__can--2{right:9%;height:66%;z-index:1;opacity:.96;--rot:9deg;} /* дальний план вместо пустого места, когда вкуса из подборки ещё нет в линейке: блюр такой, что этикетка не читается и вопрос «что за вкус» не возникает */ .horeca__can--ghost{filter:blur(9px) drop-shadow(0 14px 24px rgba(50,35,40,.2)); opacity:.45;height:58%;} /* «страница меню»: белый лист с линейками и выноской-точками между позицией и объёмом */ .horeca__menu{background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:clamp(20px,2.6vw,30px);box-shadow:0 26px 54px -34px rgba(60,30,40,.5);} .horeca__menu-head{padding-bottom:14px;border-bottom:2px solid var(--ink);} .horeca__menu-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;} .horeca__menu-k{font-size:.74rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:var(--accent-deep);} /* карточка выглядит как настоящая карта напитков — плашка снимает это чтение */ .horeca__menu-badge{font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase; padding:4px 10px;border-radius:999px;background:var(--accent-tint);color:var(--accent-deep);} .horeca__menu-head b{display:block;margin-top:6px;font-family:var(--font-display);font-weight:700; font-size:clamp(1.1rem,1.9vw,1.34rem);color:var(--ink);} .horeca__list{list-style:none;margin:0;padding:0;} .horeca__item{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline; column-gap:10px;padding:16px 0;border-bottom:1px solid var(--line);} .horeca__name{font-family:var(--font-display);font-weight:700;font-size:1.06rem;color:var(--ink);} /* пунктир-выноска, как в бумажном меню: тянется на всю свободную ширину строки */ .horeca__dots{align-self:end;height:1px;margin-bottom:5px; background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 7px);} .horeca__meta{font-size:.88rem;font-weight:600;color:var(--accent-deep);white-space:nowrap;} .horeca__desc{grid-column:1/-1;margin-top:5px;font-size:.94rem;line-height:1.55;color:var(--ink-soft);} .horeca__menu-note{margin:14px 0 0;font-size:.8rem;color:var(--ink-soft);} /* строки «печатаются» при смене формата */ .horeca__list.is-swap .horeca__item{animation:hcRow .42s ease both;} .horeca__list.is-swap .horeca__item:nth-child(2){animation-delay:.08s;} .horeca__list.is-swap .horeca__item:nth-child(3){animation-delay:.16s;} @keyframes hcRow{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}} /* --- четыре аргумента: бенто-плитки с цветным пятном --- */ .horeca__bento{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.6vw,18px); margin-top:clamp(26px,4vw,42px);} .horeca__tile{position:relative;overflow:hidden;padding:22px 20px;border-radius:var(--radius); background:#fff;border:1px solid var(--line);} .horeca__tile::before{content:"";position:absolute;right:-30%;top:-60%;width:90%;aspect-ratio:1; border-radius:50%;background:radial-gradient(circle,var(--c2) 0%,transparent 70%);opacity:.55;} .horeca__tile b{position:relative;display:block;font-family:var(--font-display);font-weight:700; font-size:1.06rem;color:var(--ink);padding-left:12px;border-left:3px solid var(--c);} .horeca__tile p{position:relative;margin:10px 0 0;font-size:.92rem;line-height:1.55;color:var(--ink-soft);} @media (hover:hover){ .horeca__tile{transition:transform .3s ease,box-shadow .3s ease;} .horeca__tile:hover{transform:translateY(-4px);box-shadow:0 18px 36px -20px rgba(60,40,40,.45);} } /* --- условия: лента с крупной нумерацией --- */ .horeca__terms{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.4vw,30px); margin-top:clamp(26px,4vw,40px);} .horeca__term{position:relative;padding-top:14px;border-top:2px solid var(--ink);} .horeca__term i{display:block;font-family:var(--font-display);font-style:normal;font-weight:700; font-size:1.9rem;line-height:1;color:var(--accent);opacity:.55;} .horeca__term b{display:block;margin-top:8px;font-family:var(--font-display);font-weight:700; font-size:1.05rem;color:var(--ink);} .horeca__term p{margin:6px 0 0;font-size:.94rem;line-height:1.55;color:var(--ink-soft);} .horeca__cta{display:flex;width:max-content;margin:clamp(26px,3.4vw,38px) auto 0;} /* ========================================================= CONTACT + BUY ========================================================= */ .contact__inner{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:start;} .contact__intro .section__title{text-align:left;} .buy{margin-top:30px;} .buy__label{display:block;font-size:.85rem;color:var(--ink-soft);margin-bottom:12px;} .buy__shops{display:flex;flex-wrap:wrap;gap:12px;} .shop{font-weight:600;font-size:.98rem;padding:13px 24px;border-radius:12px;background:#fff;border:1px solid var(--line);color:var(--ink-soft);cursor:default;transition:transform .2s,border-color .2s;} .shop:hover{transform:translateY(-3px);border-color:var(--accent);color:var(--ink);} .form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px;box-shadow:0 24px 50px -30px rgba(60,30,40,.4);} .form__toggle{display:flex;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:5px;margin-bottom:22px;} .form__toggle input{position:absolute;opacity:0;pointer-events:none;} .form__toggle label{flex:1;text-align:center;padding:11px;border-radius:999px;font-weight:600;font-size:.92rem;cursor:pointer;color:var(--ink-soft);transition:.25s;} .form__toggle input:checked + label{background:linear-gradient(135deg,var(--cta-a),var(--cta-b));color:#fff;box-shadow:0 8px 18px -8px color-mix(in srgb,var(--accent) 60%,transparent);} .form__row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .field{display:block;margin-bottom:14px;} .field span{display:block;font-size:.8rem;font-weight:600;color:var(--ink-soft);margin-bottom:6px;} .field input,.field textarea{width:100%;font-family:inherit;font-size:.96rem;color:var(--ink);background:var(--bg); border:1px solid var(--line);border-radius:12px;padding:13px 15px;transition:border-color .2s,box-shadow .2s;resize:vertical;} .field input:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);} .field input.invalid,.field textarea.invalid{border-color:#E84855;} .form__sms-row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px;align-items:end;} .form__sms-button{min-height:44px;margin-bottom:14px;padding:11px 24px;font-family:var(--font-display);font-size:.88rem;font-weight:700; color:var(--ink);background:var(--accent-tint);border:1.5px solid color-mix(in srgb,var(--accent) 45%,transparent); border-radius:999px;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease,transform .2s,opacity .2s;} .form__sms-button:hover:not(:disabled){color:#fff;background:var(--accent-deep);border-color:transparent;transform:translateY(-1px);} .form__sms-button:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);} .form__sms-button:disabled{opacity:.58;cursor:not-allowed;transform:none;} .form__sms-status{grid-column:1/-1;min-height:0;margin-top:-6px;font-size:.78rem;color:var(--ink-soft);} .form__sms-status:not(:empty){margin-bottom:14px;} .form__submit{width:100%;margin-top:8px;} .form__note{font-size:.74rem;color:var(--ink-soft);margin-top:12px;text-align:center;} /* согласие на обработку персональных данных */ .check{display:flex;align-items:flex-start;gap:10px;margin:4px 0 16px;cursor:pointer;} .check input{position:absolute;opacity:0;width:0;height:0;} .check__box{flex:0 0 auto;width:20px;height:20px;margin-top:1px;border-radius:6px; border:1.5px solid color-mix(in srgb,var(--ink-soft) 45%,transparent);background:var(--bg); transition:background .2s,border-color .2s,box-shadow .2s;position:relative;} .check__box::after{content:"";position:absolute;left:6px;top:2px;width:5px;height:10px; border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(.4);opacity:0; transition:transform .2s ease,opacity .2s ease;} .check:hover .check__box{border-color:var(--accent);} .check input:checked + .check__box{background:linear-gradient(135deg,var(--cta-a),var(--cta-b));border-color:transparent;} .check input:checked + .check__box::after{transform:rotate(45deg) scale(1);opacity:1;} .check input:focus-visible + .check__box{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 28%,transparent);} .check input.invalid + .check__box{border-color:#E84855;box-shadow:0 0 0 3px rgba(232,72,85,.16);} .check__text{font-size:.9rem;line-height:1.5;color:var(--ink-soft);} .check__text a{color:var(--accent-deep);text-decoration:underline;text-underline-offset:2px;} .form__success{margin-top:16px;padding:16px;border-radius:14px;background:color-mix(in srgb,var(--cucumber) 14%,#fff);border:1px solid var(--cucumber);font-size:.95rem;} /* ========================================================= FOOTER ========================================================= */ .footer{background:var(--ink);color:#fff;padding:54px 0;position:relative;z-index:1;} .footer__inner{display:grid;grid-template-columns:1fr auto auto;gap:30px;align-items:center;} /* width:auto обязателен: атрибут width="150" в разметке сохраняется, при height:26px SVG вписывается по своей пропорции (129.8px) и центрируется внутри — логотип отъезжал от левого края на 12.5px. В шапке ровно то же правило, см. .header__logo img */ .footer__brand img{height:26px;width:auto;filter:brightness(0) invert(1);margin-bottom:10px;} .footer__brand p{font-size:.92rem;opacity:.7;} /* принадлежность к семье брендов */ .footer__family{display:flex;align-items:center;gap:12px;margin-top:18px; padding-top:16px;border-top:1px solid rgba(255,255,255,.14);} .footer__family img{height:56px;width:auto;margin-bottom:0;opacity:.92;} .footer__family span{font-size:.8rem;line-height:1.35;opacity:.66;} .footer__links{display:flex;align-items:center;gap:clamp(16px,2vw,26px);} .footer__nav{display:flex;gap:clamp(14px,1.6vw,24px);} .footer__nav a{display:inline-flex;align-items:center;min-height:44px;font-weight:500;font-size:.95rem;opacity:.85;transition:opacity .2s;} .footer__nav a:hover{opacity:1;} /* «Связаться» кнопкой, а не пунктом списка. .btn--ghost не подходит: он рисует обводку var(--ink) — тёмным по тёмному подвалу */ .footer__cta{padding:12px 26px;font-size:.92rem;color:#fff;background:transparent; border:1.5px solid rgba(255,255,255,.34);white-space:nowrap;} .footer__cta:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px);} .footer__meta{text-align:right;} .footer__social{display:flex;gap:10px;justify-content:flex-end;margin-bottom:10px;} .footer__social a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.12);font-size:.8rem;font-weight:600;transition:background .2s;} .footer__social a:hover{background:var(--strawberry);} .footer__meta p{font-size:.8rem;opacity:.6;} .footer__meta p a{text-decoration:underline;text-underline-offset:2px;} /* Юридических ссылок две, и в строку они не выстраиваются: колонки подвала — 1fr auto auto, так что длинная строка копирайта забирает ширину у первой ячейки и ломает подпись «NATONIQ — часть семьи брендов BAGO family» на обрубки. Поэтому ссылки идут столбиком на любой ширине, а разделители снимаются: ячейка получается уже (по самой длинной ссылке), чем была с одной ссылкой в строку. Ниже в @media (max-width:1000px) подвал становится одноколоночным, и там это правило уже своё. */ .footer__meta p .footer__dot{display:none;} .footer__meta p a{display:block;margin-top:5px;} .footer__meta a:hover{opacity:1;} /* ========================================================= FOCUS-VISIBLE — видимый фокус клавиатуры ========================================================= */ .btn:focus-visible,.nav a:focus-visible,.footer__nav a:focus-visible,.footer__meta a:focus-visible, .card:focus-visible,.intel__tab:focus-visible,.card__close:focus-visible,.burger:focus-visible, .check__text a:focus-visible,.header__logo:focus-visible{ outline:3px solid color-mix(in srgb,var(--accent) 70%,transparent);outline-offset:3px;border-radius:8px;} /* ========================================================= REVEAL ========================================================= */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;} .reveal.is-in{opacity:1;transform:none;} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1000px){ .bento{grid-template-columns:repeat(2,1fr);} .bento__tile--lg,.bento__tile--wide{grid-column:span 2;} .bento__tile--lg{grid-row:span 1;} .intel__panel{grid-template-columns:1fr;gap:30px;} .intel__stage{max-width:360px;} .contact__inner{grid-template-columns:1fr;gap:34px;} /* horeca → кадр над аргументами, условия в две колонки */ /* horeca → сцена над меню, плитки 2×2, условия в две колонки */ .horeca__panel{grid-template-columns:1fr;gap:22px;} .horeca__stage{max-width:340px;aspect-ratio:4/3;} .horeca__bento{grid-template-columns:repeat(2,1fr);} .horeca__terms{grid-template-columns:repeat(2,1fr);} .contact__intro .section__title{text-align:center;} .section__sub--l{text-align:center;margin-inline:auto;} /* подпись «Скоро в продаже» шла влево, а плашка магазина — по центру: разнобой */ .buy{text-align:center;} .buy__shops{justify-content:center;} /* about → плитки в одну колонку, продукт первым */ .about__inner{grid-template-columns:1fr;gap:28px;} .about__foot{grid-template-columns:1fr;text-align:center;} .about__bento{grid-template-columns:1fr;} .about__scene{order:-1;} .about__head{text-align:center;margin-inline:auto;} .about__lead{padding-left:0;border-left:0;border-top:3px solid var(--accent);padding-top:14px; display:inline-block;} .about__sign{text-align:center;} .about__scene{min-height:320px;} .about__who{text-align:center;} /* на планшете мозаика остаётся трёхколоночной, как на ПК: в две колонки карточки раздуваются (герой при 1000px выходил 952×1190, весь блок — 3676px), и секция превращается в бесконечную прокрутку. Перестроение в две колонки — только с 760px. */ .who__card figcaption{text-align:left;} /* why → 1 колонка, банка сверху, этикетка по центру */ .why__split{grid-template-columns:1fr;gap:32px;} .why__scene{order:-1;} .label{margin-inline:auto;} /* подвал собирается в три яруса, разделённых линиями: бренд → навигация → контакты. Прежде зоны шли одним столбиком с неровными промежутками, а «Связаться» пятым пунктом ломала навигацию на 4 + 1 и читалась как обрубок списка. Всё содержимое выровнено по левому краю — по одной оси с остальными секциями страницы, а не отдельным центрированным островом. */ .footer__inner{grid-template-columns:1fr;text-align:left;gap:24px;} .footer__links,.footer__meta{border-top:1px solid rgba(255,255,255,.12);padding-top:24px;} .footer__links{flex-direction:column;align-items:flex-start;gap:18px;} .footer__nav{display:grid;grid-template-columns:1fr 1fr;justify-items:start;gap:2px 14px;width:100%;} .footer__cta{width:100%;max-width:280px;} .footer__meta{text-align:left;}.footer__social{justify-content:flex-start;}.footer__brand img{margin-inline:0;} /* логотип семьи над подписью: в строку рядом с текстом блок занимал всю ширину и распадался; собственная линия сверху снимается — ярусные разделители уже есть, две подряд рябят. */ .footer__family{flex-direction:column;align-items:flex-start;text-align:left;gap:10px; border-top:0;padding-top:0;margin-top:22px;} /* копирайт расходится на две строки: одной он шёл во всю ширину, впритык к кромкам */ .footer__dot{display:none;} .footer__meta p a{display:block;margin-top:5px;} /* ярусы добавили подвалу высоты — возвращаем часть, поджимая внешние поля */ .footer{padding:38px 0 34px;} } @media (max-width:760px){ section{padding:36px 0;} /* Телефон: тот же бенто, но в две колонки — герой и последний кадр во всю ширину, четыре остальных парами. Ленты-свайпа здесь больше нет: портреты прятать за кромкой незачем, а лент на странице и так три. Широким пропорция 4:5, иначе карточка во всю ширину вырастает выше экрана; кадр сдвинут вверх — лица во всех шести снимках сидят в верхней половине. */ .who{grid-template-columns:repeat(2,1fr);gap:10px;} .who__card--hero,.who__card:last-child{grid-column:1/-1;grid-row:auto;} .who__card--hero .who__photo,.who__card:last-child .who__photo{ aspect-ratio:4/5;object-position:50% 28%;} /* в парных карточках колонка ~170px: подпись прежним кеглем ломала «Любители функциональных напитков» в четыре строки и упиралась в кромку */ .who__card figcaption{padding:12px 12px 13px;} .who__card figcaption b{font-size:.86rem;} .who__card figcaption span{margin-top:3px;font-size:.74rem;} .who__card--hero figcaption,.who__card:last-child figcaption{padding:18px 16px;} .who__card--hero figcaption b,.who__card:last-child figcaption b{font-size:1.16rem;} .who__card--hero figcaption span,.who__card:last-child figcaption span{font-size:.84rem;} .who__flavor{top:12px;left:12px;font-size:.64rem;padding:5px 10px;} /* стык problem→formula был визуально великоват — поджимаем */ .problem{padding-bottom:14px;} .formula{padding-top:18px;} .nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:10px 0;transform:translateY(-130%);transition:transform .3s ease;} .nav.is-open{transform:translateY(0);} .nav a{padding:14px 24px;width:100%;} .nav__cta{margin:10px 24px;justify-content:center;text-align:center;min-height:48px;} .burger{display:flex;} /* hero on mobile: clean centered can, scattered cutouts hidden */ .hero{min-height:auto;padding-top:20px;padding-bottom:34px;flex-direction:column;} .hero__scene{position:relative;height:auto;order:1;display:flex;align-items:center;justify-content:center;transform:none!important;} .hero__can{position:static;transform:none!important;height:auto;max-height:330px;width:auto;margin:0 auto;animation:none;} .hero__glow{left:50%;top:46%;width:84vw;height:84vw;} .float{display:none;} .hero__scrim{display:none;} /* порядок: заголовок сразу под фото, буллеты — бегущей строкой, кнопки в ряд */ .hero__copy{order:2;text-align:left;margin-top:16px;display:flex;flex-direction:column;align-items:flex-start;} .hero__title{order:1;} /* бейджей три — помещаются в две строки, бегущая строка больше не нужна (маска слева срезала первый бейдж, и он выглядел обрезанным) */ .hero__badges{order:2;margin:14px 0 0;max-width:100%;width:100%;} .hero__badges-track{display:contents;} .hero__sub{order:3;margin:16px 0 0;} .hero__cta{order:4;margin-top:22px;flex-wrap:nowrap;gap:10px;justify-content:flex-start;align-self:stretch;} .hero__cta .btn{flex:1;padding:13px 12px;font-size:.95rem;white-space:nowrap;} .hero__scroll{display:none;} /* компактная сетка 2×2: банки на такой ширине выходили мелкими и обрезанными краем плитки, поэтому на мобилке заменены иконками — четыре равные плитки читаются как один бенто-блок */ .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:12px;margin-top:28px;} .bento__tile{min-height:auto;padding:16px 14px;justify-content:flex-start;} .bento__tile--lg,.bento__tile--wide{grid-column:span 1;grid-row:span 1;} .bento__can,.bento__art{display:none;} .b-taste .bento__body,.b-style .bento__body{max-width:100%;} .bento__icon{position:static;width:32px;height:32px;margin-bottom:10px;} .b-taste .bento__icon,.b-style .bento__icon{display:block;} /* банок здесь уже нет */ .bento__k{font-size:.66rem;letter-spacing:.1em;} .bento__tile h3,.bento__tile--lg h3{font-size:1.08rem;margin:3px 0 6px;} .bento__tile p{font-size:.8rem;line-height:1.45;max-width:none;} /* на мобилке ось разворачивается вертикально: линия слева, точки на ней */ /* шкала остаётся горизонтальной и на телефоне — вертикализация её и убила */ .scale{padding:0;} .scale__pole{max-width:47%;} .scale__pole i{font-size:.8rem;max-width:16ch;} .scale{--can-h:146px;} .scale__read{min-height:104px;padding:14px 16px;} .edge__claims{flex-direction:column;align-items:flex-start;gap:10px;max-width:420px;margin:22px auto 0;padding-left:4px;} /* .edge центрирует текст; пока строка влезала целиком, абсолютный маркер стоял вплотную к первому слову. Как только текст переносится («Вкуснее строгих ЗОЖ-напитков»), li растягивается на всю ширину, текст остаётся по центру, а точка уезжает к левому краю сама по себе. Поэтому на телефоне маркер становится частью строки. */ .edge__claims li{display:flex;gap:10px;align-items:baseline;text-align:left;padding-left:0;} .edge__claims li::before{position:static;flex:0 0 9px;transform:translateY(.42em);} .problem__bubbles{gap:14px;min-height:auto;} .problem__bubble{padding:14px;} .problem__bubble--1{--s:140px;--tx:-6px;--ty:0px;} .problem__bubble--2{--s:166px;--tx:8px;--ty:14px;} .problem__bubble--3{--s:152px;--tx:-4px;--ty:-6px;} .problem__bubble b{font-size:1.22rem;} /* на узком экране оставляем только мелкий декор, крупный прячем */ .problem__deco{transform:scale(.7);} .problem__deco:nth-of-type(1),.problem__deco:nth-of-type(3){display:none;} .problem__answer{grid-template-columns:1fr;text-align:center;padding:28px 22px 18px;} .problem__answer-media{min-height:auto;order:2;} .problem__answer-media img{position:static;transform:none;height:auto;width:78%;margin:8px auto 0;} /* в узкой колонке список выравниваем по левому краю: при центрировании перенесённая часть строки уезжала левее галочки */ .problem__checks{align-items:flex-start;text-align:left;width:100%;} /* about-сцена компактнее */ .about__scene{min-height:260px;} .about__can{height:min(300px,42vh);} .about__ingr--1{height:70px;} .about__ingr--2{height:54px;} .about__ingr--3{height:62px;} /* этикетка компактнее, банка ниже */ .why__can{height:min(360px,44vh);} .why__zoom{font-size:.88rem;padding:11px 16px;} .viewer.is-zoomed .viewer__stage img{height:min(52vh,420px);} .label{padding:22px 20px;} .label__brand{font-size:1.25rem;} .label__row,.label__foot{padding:13px 0;gap:12px;} .label__hint{display:block;white-space:normal;margin-top:2px;} /* табы формата — свайп-лента: пять пилюль в столбик съедали бы пол-экрана. Приём тот же, что у «Ленты дня» и блока «Для кого». */ .horeca__tabs{flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:flex-start; margin-inline:calc(var(--pad) * -1);padding:2px var(--pad) 6px;scroll-padding-inline:var(--pad); /* растворяющийся край — сигнал, что за кромкой есть ещё форматы. Маска считается по боксу, а не по контенту, поэтому при скролле остаётся на месте: обёртка не нужна. Классы ставит JS и гасит ту сторону, за которой лента кончилась. */ -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);} .horeca__tabs.is-at-start{-webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);} .horeca__tabs.is-at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%); mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);} .horeca__tabs.is-at-start.is-at-end{-webkit-mask-image:none;mask-image:none;} .horeca__tabs::-webkit-scrollbar{display:none;} .horeca__tab{scroll-snap-align:center;flex:0 0 auto;font-size:.9rem;padding:11px 18px;} .horeca__stage{max-width:min(78vw,300px);aspect-ratio:1;} .horeca__bento{grid-template-columns:1fr;} .horeca__terms{grid-template-columns:1fr;gap:18px;} /* название и мета в одну строку не помещаются: на 360px «Огурец + мята» ломалось пополам, а объём с калорийностью жался к краю. Строка меню становится столбиком. */ .horeca__item{grid-template-columns:1fr;} .horeca__meta{grid-column:1;margin-top:3px;font-size:.82rem;} .horeca__dots{display:none;} /* на узкой строке выноска вырождалась в обрубок */ .horeca__cta{width:100%;justify-content:center;} .form__row{grid-template-columns:1fr;} .form__sms-row{grid-template-columns:1fr;} .form__sms-button{width:100%;} .form__sms-status{grid-column:1;} /* при 360px паддинг формы 32px + паддинг лейбла 11px оставляли под текст ~96px, и «Для бизнеса» уходило в две строки — пилюли получались разной высоты */ .form{padding:24px 18px;} .form__toggle label{padding:11px 8px;font-size:.86rem;} /* cards: горизонтальный слайдер */ .cards{scroll-snap-type:x mandatory;padding-top:4px;} .line__head{margin-bottom:22px;} .card{flex:0 0 82%;} .card.is-open{flex-basis:92%;flex-direction:column;text-align:center;} .card.is-open .card__head{flex:none;} .card.is-open .card__detail{text-align:left;border-left:0;border-top:1px solid var(--line);} /* плитки/банки ниже, чтобы компоненты не обрубались при раскрытии */ .card{--media-h:280px;} .card__can{height:82%;} /* поворот и показ компонентов — только в .is-open (общие правила) */ /* Раскрытая карточка должна помещаться в экран целиком, поэтому шапка складывается в одну строку: название слева, сжатая сцена справа. Сцену приходится выносить из потока — scale уменьшает её только визуально, а места она занимала бы все 100% ширины, и названию не осталось бы строки. */ .card.is-open{--media-k:.46;} .card.is-open .card__head{position:relative;flex-direction:row;align-items:center; text-align:left;padding:12px 20px; min-height:calc(var(--media-h) * var(--media-k) + 16px); padding-right:calc(var(--media-h) * var(--media-k) + 16px);} /* в компактной строке кегль поменьше: самое длинное название («Black Currant + Rosemary» под блюром) иначе встаёт в три строки */ .card.is-open .card__name{margin:0;text-align:left;font-size:1.06rem;line-height:1.28;} .card.is-open .card__media{position:absolute;right:8px;top:50%;margin:0; transform:translateY(-50%) scale(var(--media-k));transform-origin:right center;} .card.is-open .card__detail{padding:22px;animation-name:fadeSoft;} } /* Невысокий экран: самая длинная карточка (Energy) на 800px высоты не влезала в доступные под шапкой 734px — сжимаем сцену сильнее и убираем лишние паддинги */ @media (max-width:760px) and (max-height:840px){ .card.is-open{--media-k:.36;} .card.is-open .card__detail{padding:18px;} .card.is-open .card__head{padding:10px 20px; padding-right:calc(var(--media-h) * var(--media-k) + 16px);} } /* ---- «Лента дня» на узких экранах: вместо липкого скролла — свайп со снапом. Липкая горизонталь на телефоне отбирает вертикальный скролл и раздражает. ---- */ @media (max-width:900px){ .rhythm__scroller{height:auto;} /* именно relative (+top:auto), а не static: у static-сцены её ::before теряет containing block и цепляется к body (position:relative) — пятно вкуса растягивалось на всю страницу и ложилось плёнкой поверх текста и карточек. */ .rhythm__stage{position:relative;z-index:1;top:auto;height:auto;min-height:0;overflow:visible;padding-top:26px;} .rhythm__stage::before{inset:-6% -20%;} .rhythm__grid{grid-template-columns:1fr;gap:16px;padding-left:0;} .rhythm__aside{display:none;} /* тот же текст уже есть в подписи кадра */ .rhythm__viewport{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad); -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-inline:var(--pad);} .rhythm__viewport::-webkit-scrollbar{display:none;} /* «Для кого» лентой-свайпом больше не становится — сетка задана выше, в блоке ≤760px */ .rhythm__track{gap:14px;padding:12px 0;transform:none!important;} .rhythm__frame{--fw:min(78vw,330px);scroll-snap-align:center;opacity:1;filter:none;transform:none;} .rhythm__frame.is-active{transform:none;} /* таймкоды переезжают НАД лентой: ряд кнопок в самом низу секции читался как обрубленный хвост блока, а карточка со скруглением — как законченный объект. Только order: DOM не трогаем, десктопная сцена и модуль RHYTHM не зависят от порядка. */ .rhythm__nav{order:-1;justify-content:center;padding-inline:var(--pad);} .rhythm__line{display:none;} /* рядом с кнопками сжималась в обрубок */ .rhythm__dots{justify-content:center;} .rhythm__dot{min-height:44px;} /* Стык с «Позиционированием»: .edge залита плотным градиентом, и её верхняя кромка давала жёсткую линию прямо под контентом (padding-bottom:0 стоит под десктопную липкую сцену, которой здесь нет). Даём секции воздух и подкладываем снизу тот же градиент с mask-fade вверх — приём тот же, что у .sec--tint. ⚠️ Цвета продублированы из .edge; менять их надо синхронно. Градиент здесь 90deg, а не 125deg как в самой .edge: на полосе высотой ~120px диагональ вырождается и вытягивает к правому краю жёлтый #FFEDCB, которого в верхней кромке .edge ещё нет — стык уходил в другой оттенок. 90deg повторяет ровно кромку (#FFDDE1 → ~#FFE0CF). */ .rhythm{position:relative;padding-bottom:clamp(46px,9vw,72px);} .rhythm::after{content:"";position:absolute;left:0;right:0;bottom:0;z-index:0; height:clamp(90px,18vw,150px);pointer-events:none; background:linear-gradient(90deg,#FFDDE1 0%,#FFE0CF 100%); -webkit-mask:linear-gradient(180deg,transparent 0,#000 100%); mask:linear-gradient(180deg,transparent 0,#000 100%);} } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation:none!important;transition:none!important;} .reveal{opacity:1;transform:none;} .about.reveal .who__card{opacity:1;transform:none;} /* stagger отключён — карточки не должны остаться скрытыми */ .bubbles,.hero__scroll{display:none;} .page-bg{transition:none;} .chip{opacity:1;transform:translate(-50%,-50%) scale(1);} /* шкала позиционирования: тянуть можно, но без пружины и пульсации подсказки */ .scale__knob,.scale__knob.is-releasing{transition:none!important;} .scale__hint{animation:none;opacity:.8;} .label__row,.label__foot{opacity:1;transform:none;} .lens{transition:none;} .why__tilt{transition:none;} .viewer{animation:none;} /* HoReCa: переключение форматов остаётся, но без кроссфейда и «печати» строк */ .horeca__can{transition:none;} .horeca__can.is-out{opacity:1;transform:none;} .horeca__list.is-swap .horeca__item{animation:none;} .horeca__glow{transition:none;} /* «Лента дня» без движения — прежняя сетка кадров с подписями */ .rhythm__scroller{height:auto;} .rhythm__stage{position:static;height:auto;min-height:0;overflow:visible;} .rhythm__stage::before{display:none;} .rhythm__grid{grid-template-columns:1fr;padding-left:var(--pad);padding-right:var(--pad);} .rhythm__aside{display:none;} .rhythm__viewport{overflow:visible;} .rhythm__track{flex-wrap:wrap;justify-content:center;transform:none!important;} .rhythm__frame{--fw:clamp(200px,22vw,290px);opacity:1!important;transform:none!important;filter:none!important;} .rhythm__frame--cta{--fw:min(100%,620px);} .rhythm__cta{aspect-ratio:auto;align-items:center;text-align:center;padding:26px 24px;} .rhythm__nav{display:none;} /* перемотка без скролл-логики бессмысленна */ .rhythm{padding-bottom:90px;} /* без липкой сцены секция иначе упирается в следующую */ }