, ни не скролл-контейнеры. Глобальные body{overflow-x:hidden} и main{overflow-x:hidden} → overflow-y:auto (скролл-контейнер) и ломают sticky. clip убирает горизонт.прокрутку без этого. */ body.coffee-page{overflow-x:clip!important} .coffee-page main{overflow-x:clip!important;overflow-y:visible!important} .coffee-ea{--cf-cream:var(--paper);--cf-wine:var(--wine);--cf-coffee:#1B1A18;--cf-latte:#FFFFFF} /* ── ВИДЕО-ФОН в герое/блоках (вместо .ea-hero__bg) ── */ .cf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;background:#FFFFFF} .cf-hero__left .cf-video,.cf-svc .cf-video{transform:scale(1.04)} /* лёгкий «живой» зум, пока нет mp4 (постер-фото оживает как видео) */ .cf-kenburns{animation:cfKen 18s ease-in-out infinite alternate} @keyframes cfKen{from{transform:scale(1.04)}to{transform:scale(1.13)}} /* герой/зеркальный блок: фото-сторона центрирует рамку + тёмная вуаль */ .cf-hero__left,.cf-mir__media{position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden; background:#FFFFFF;padding:clamp(120px,15vh,170px) clamp(24px,4vw,56px) clamp(40px,6vh,72px)} .cf-hero__left::after,.cf-mir__media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,rgba(20,12,8,.3),rgba(20,12,8,.46))} .cf-hero__left .ea-hero__frame,.cf-mir__media .ea-hero__frame{z-index:2} /* Статичное фото слева — как в блоке «философия»: без рамки, вуали и паддингов */ .cf-hero__left--static{padding:0} .cf-hero__left--static::after{display:none} .cf-hero__left--static img,.cf-hero__left--static video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} /* ── БЛОК-ГЕРОЙ кофейни: логотип Paloma coffee сверху по центру ── */ /* логотип-герой = «отрисованный» PALOMA как на странице Оформления: Italiana, розовый (--wine), широкий трекинг; опущен чуть ниже под шапку */ .cf-hero__logo{font-family:var(--logo);color:var(--wine);font-size:clamp(24px,2.4vw,34px); letter-spacing:.16em;text-transform:none;text-align:center;line-height:1; margin-top:clamp(24px,5vh,64px)} .cf-hero__logo small{display:block;font-family:var(--logo);font-size:.34em; letter-spacing:.18em;text-transform:lowercase;color:var(--wine);opacity:.92;margin-top:9px} /* логотип-картинка в первом блоке вместо текста */ .cf-hero__logoimg{width:clamp(200px,18vw,280px);height:auto;display:block;margin:clamp(24px,5vh,64px) auto 0} /* блок «философия кофейни» — на всю высоту, как на странице оформления */ .coffee-page .ea-philo{height:100vh;min-height:100vh} /* зеркальный вариант (фото справа, текст слева) — блок 2 */ .ea-hero--mirror .ea-hero__left{order:2;border-left:1px solid var(--eline)} .ea-hero--mirror .ea-hero__right{order:1;border-left:none} .cf-uls{list-style:none;margin:22px 0 34px;display:flex;flex-direction:column;gap:12px;text-align:left;max-width:400px} .cf-uls li{position:relative;padding-left:26px;font-size:clamp(14px,1.05vw,16px);line-height:1.5;color:var(--body)} .cf-uls li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:50%; background:var(--wine);box-shadow:0 0 0 4px rgba(231, 56, 90,.12)} /* ── БЛОК МЕНЮ (как на скриншотах sjostrand: строки + фото при наведении) ── */ .cf-menu{background:transparent;border-top:none} .cf-menu__tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:clamp(28px,3vw,44px) 0 clamp(30px,3vw,50px)} .cf-menu__tab{font-family:var(--fdisplay);font-size:13px;letter-spacing:.14em;text-transform:uppercase; color:var(--muted);background:none;border:1px solid var(--eline);border-radius:40px;padding:10px 22px;cursor:pointer;transition:.3s} .cf-menu__tab:hover{color:var(--wine);border-color:var(--wine)} .cf-menu__tab.is-on{background:var(--wine);color:var(--paper2);border-color:var(--wine)} .cf-menu__list{position:relative;max-width:var(--ea-maxw);margin:0 auto;width:100%} .cf-menu__row{display:grid;grid-template-columns:auto 1fr auto auto;align-items:baseline;gap:clamp(14px,2vw,30px); padding:clamp(20px,2.4vw,30px) clamp(8px,1vw,16px);border-bottom:1px solid var(--eline);cursor:pointer; transition:background .3s var(--eease),padding-left .35s var(--eease)} .cf-menu__row:hover{background:rgba(231, 56, 90,.035);padding-left:clamp(16px,2vw,34px)} .cf-menu__num{font-family:var(--fdisplay);font-size:13px;color:var(--muted);letter-spacing:.1em} .cf-menu__name{font-family:var(--fhead);font-size:clamp(24px,2.6vw,40px);color:var(--ink);line-height:1;transition:color .3s} .cf-menu__row:hover .cf-menu__name{color:var(--wine)} .cf-menu__vol{font-family:var(--fdisplay);font-size:12px;letter-spacing:.08em;color:var(--muted);text-transform:lowercase;white-space:nowrap} .cf-menu__price{font-family:var(--fdisplay);font-size:clamp(16px,1.4vw,21px);color:var(--wine);white-space:nowrap} .cf-menu__desc{grid-column:2/3;font-size:14px;line-height:1.5;color:var(--muted);margin-top:6px;max-width:520px} .cf-menu__note{max-width:var(--ea-maxw);margin:clamp(26px,3vw,40px) auto 0;font-size:13px;line-height:1.7; color:var(--muted);text-align:center;padding:0 var(--ea-px)} /* плавающее фото товара при наведении (следует за курсором) */ .cf-menu__pop{position:fixed;z-index:80;width:clamp(150px,15vw,220px);aspect-ratio:4/5;pointer-events:none; border-radius:4px;overflow:hidden;box-shadow:0 30px 70px rgba(40,24,12,.4);opacity:0;transform:translate(-50%,-46%) scale(.9); transition:opacity .3s var(--eease),transform .3s var(--eease);background-size:cover;background-position:center;background-color:#FFFFFF} .cf-menu__pop.is-on{opacity:1;transform:translate(-50%,-50%) scale(1)} .cf-menu__pop img{width:100%;height:100%;object-fit:cover;display:block} /* ── ЭТАПЫ кофейни (#cf-steps) = ТОЧНО как блок «наш процесс» на Оформлении ── Секция уже имеет класс .ea-proc, поэтому наследует всю базовую раскладку из event-author.css (позиции фото, размеры/шрифт заголовков этапов, стрелки) — тех же, что у #process. Единственная разница на странице кофейни: глобальный оверрайд `.coffee-ea .ea-title{text-transform:uppercase}` делал интро-заголовок ЗАГЛАВНЫМ. Возвращаем смешанный регистр (как «Процесс оформления вашего события»). */ #cf-steps .ea-proc__intro .ea-title{text-transform:none} /* Заголовки кофейни длиннее, чем на Оформлении («ЗАКАЗ ИЗ ДОМА», «ПРИВЕЗЁМ К ДВЕРИ») → налазили на фото. Точечные сдвиги (только #cf-steps). */ /* 01 — заголовок левее, фото-а правее (чтобы не пересекались), текст ниже */ #cf-steps .ea-proc-step:nth-child(2) .ea-step__t--top{left:2%} #cf-steps .ea-proc-step:nth-child(2) .ea-proc__ph--a{left:64%} #cf-steps .ea-proc-step:nth-child(2) .ea-step__body--lo{top:62%} /* 03 — панель уже + контент левее, чтобы 3-й этап шёл ближе ко 2-му (был большой пустой отступ между ними) */ #cf-steps .ea-proc-step:last-child{width:clamp(760px,64vw,1000px)} #cf-steps .ea-proc-step:last-child .ea-step__t--top{left:15%} #cf-steps .ea-proc-step:last-child .ea-step__body--hi{left:13%} #cf-steps .ea-proc-step:last-child .ea-proc__ph--d{left:13%} /* Отступ между двумя фото 3-го этапа = как на «Оформлении» (~14–16px). Панель кофейни уже (64vw vs 78vw), поэтому нужен больший % разброс: 13%→57%. */ #cf-steps .ea-proc-step:last-child .ea-proc__ph--e{left:57%} /* ── БЛОК ЛИМОНАДОВ — тот же макет, что первый блок: лево видео / право текст ── */ /* видео лимонадов: без зума (не вылезает за рамки) + светлее, чтобы было видно сюжет */ /* видео заполняет свою половину как в первом блоке, но без зума (ken burns) — при overflow:visible (ради цветов) зум заставлял видео вылезать за рамку */ .cf-lemon .cf-video{transform:none;object-fit:cover;animation:none;filter:saturate(1.06) brightness(1.02)} .cf-lemon .cf-hero__left::after{display:none} /* рамка с фото — меньше, чтобы видео на фоне было больше видно */ .cf-lemon .cf-lemon__frame{width:min(20vw,272px);overflow:visible} /* два цветка-акцента по углам фото (лево-верх + право-низ), золотой контур */ /* ни секция, ни колонка не должны обрезать цветы по краям */ .cf-lemon.ea-panel{overflow:visible} .cf-lemon .ea-hero{overflow:visible} /* колонку с фото поднимаем над текстовой — иначе её панель закрывает цветы, что вылезают за край фото вправо/вниз (выглядело как обрезка по углам) */ .cf-lemon .cf-hero__left{overflow:visible;z-index:3} .cf-lemon .cf-lemon__frame,.cf-lemon .cf-accent--lemon{overflow:visible} .cf-lemon .cf-accent--lemon{z-index:5;opacity:1;filter:drop-shadow(0 8px 16px rgba(20,12,6,.26))} .cf-lemon .cf-accent--lemon .cf-flower-img{width:clamp(56px,6.6vw,96px);height:auto;display:block} /* цветы сидят в углах, в основном снаружи фото — перекрывают лишь уголок */ .cf-lemon .cf-accent--tl.cf-accent--lemon{top:clamp(-14px,-1.2vw,-8px);left:clamp(-14px,-1.2vw,-8px);bottom:auto;right:auto} .cf-lemon .cf-accent--br.cf-accent--lemon{bottom:clamp(-14px,-1.2vw,-8px);right:clamp(-14px,-1.2vw,-8px);top:auto;left:auto} /* ── АКЦЕНТНЫЕ ДЕТАЛИ в пустых углах (цветок-иконка, как на брендинге) ── */ .cf-accent{position:absolute;z-index:4;pointer-events:none;opacity:.9} .cf-accent svg{display:block;width:100%;height:100%} .cf-accent--tl{top:clamp(16px,3vw,40px);left:clamp(16px,3vw,40px)} .cf-accent--br{bottom:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px)} .cf-flower{width:clamp(44px,5vw,82px);height:auto} .cf-flower path{fill:currentColor} /* подпись «PALOMA × YOU» по дуге — декоративная лента */ .cf-ribbon{font-family:var(--fdisplay);font-size:clamp(11px,1vw,13px);letter-spacing:.36em;text-transform:uppercase;color:var(--muted)} /* ── МОДАЛКА позиции меню (как карточка букета) ── */ .cf-modal{position:fixed;inset:0;z-index:1000;display:none;align-items:center;justify-content:center;padding:5vh 5vw; background:rgba(40,24,12,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)} .cf-modal.is-open{display:flex} .cf-modal__panel{position:relative;display:grid;grid-template-columns:1fr 1fr;max-width:900px;width:100%;max-height:88vh; background:var(--paper2);box-shadow:0 50px 120px rgba(20,12,8,.5);overflow:hidden;border-radius:22px;animation:cfPop .4s var(--eease)} @keyframes cfPop{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} .cf-modal__img{background-size:cover;background-position:center;background-color:#FFFFFF;min-height:340px} /* позиции без своего фото — попап одноколоночный, без фото-заглушки */ .cf-modal__panel--noimg{grid-template-columns:1fr;max-width:520px} .cf-modal__panel--noimg .cf-modal__img{display:none} .cf-modal__body{padding:clamp(32px,4vw,56px);display:flex;flex-direction:column;justify-content:center} .cf-modal__cat{font-family:var(--fdisplay);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .cf-modal__title{font-family:var(--fhead);font-size:clamp(24px,2.4vw,36px);color:var(--wine);line-height:1.06;margin:4px 0 8px} .cf-modal__desc{font-size:clamp(13px,1vw,15px);line-height:1.5;color:var(--body);margin-bottom:10px} .cf-modal__meta{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--eline); border-bottom:1px solid var(--eline);padding:16px 0;margin-bottom:24px} .cf-modal__vol{font-family:var(--fdisplay);font-size:13px;letter-spacing:.06em;color:var(--muted)} .cf-modal__price{font-family:var(--fhead);font-size:clamp(26px,2.4vw,36px);color:var(--wine)} .cf-modal__close{position:absolute;top:16px;right:16px;width:46px;height:46px;border-radius:50%;border:none; background:rgba(244,242,234,.9);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2;transition:.3s} .cf-modal__close:hover{background:var(--wine);color:#FFFFFF} .cf-modal__added{font-family:var(--fdisplay);font-size:13px;color:var(--wine);margin-top:14px;opacity:0;transition:.3s} .cf-modal__added.is-on{opacity:1} body.cf-modal-open{overflow:hidden} /* ── КОНСТРУКТОР ХОЛОДНЫХ (Вариант 1): состав + выбор ингредиентов ── ВАЖНО: попап — прямой потомок , вне main.ea-page, поэтому переменные вроде var(--eline) здесь НЕ определены → делают border/шорткаты невалидными (браузер откатывает к button{border:none}). Используем явные цвета. */ .cf-modal__body{display:flex;flex-direction:column;max-height:88vh;min-height:0;overflow:hidden; background:#FFFFFF;padding:0} .cf-modal__scroll{flex:1 1 auto;min-height:0;overflow-y:auto; padding:clamp(22px,3.4vw,34px) clamp(26px,3vw,44px) 10px} .cf-modal__foot{position:relative;flex-shrink:0;background:#FFFFFF;border-top:1px solid rgba(27,26,24,.08); padding:12px clamp(26px,3vw,44px) clamp(16px,2.2vw,24px)} .cf-modal__add{display:block;width:100%;border-radius:30px;margin:0;padding:15px 26px;background:#3B4B96;color:#FFFFFF} .cf-modal__add:hover{background:#33417f} .cf-modal__added{position:absolute;left:0;right:0;top:-2px;transform:translateY(-100%);text-align:center;margin:0;pointer-events:none;background:#FFFFFF;padding:4px 0} .cf-modal__comp{font-family:var(--fsans);font-size:13px;line-height:1.45;color:var(--body); margin:-2px 0 12px;padding-bottom:11px;border-bottom:1px solid rgba(27,26,24,.14)} .cf-modal__comp b{display:block;font-family:var(--fdisplay);font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:#8A8577;font-weight:400;margin-bottom:4px} /* Десерты: длинный состав — раскрывающийся блок. Заголовок оформлен как кнопка-плитка (как «Добавки»): видно, что это нажимается. */ .cf-modal__comp--fold{border-bottom:none;padding-bottom:0;margin-bottom:14px} .cf-comp{margin:0} .cf-comp__sum{display:flex;align-items:center;justify-content:space-between;gap:10px; list-style:none;cursor:pointer;font-family:var(--fdisplay);font-size:12.5px;letter-spacing:.13em; text-transform:uppercase;color:#3B4B96;font-weight:700; min-height:48px;padding:13px 16px;border:1.5px solid #3B4B96;border-radius:12px; transition:background .25s ease,color .25s ease} .cf-comp__sum::-webkit-details-marker{display:none} .cf-comp__sum::after{content:"";width:8px;height:8px;flex-shrink:0;margin-right:3px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:translateY(-2px) rotate(45deg);transition:transform .25s ease} .cf-comp[open] .cf-comp__sum::after{transform:translateY(2px) rotate(-135deg)} .cf-comp__sum:hover,.cf-comp[open] .cf-comp__sum{background:#3B4B96;color:#FFFFFF} .cf-comp__body{padding:11px 2px 0;font-size:13px;line-height:1.5} @media (prefers-reduced-motion:reduce){.cf-comp__sum,.cf-comp__sum::after{transition:none}} .cf-modal__build{display:flex;flex-direction:column;gap:13px;margin-bottom:16px} .cf-bld__g{display:flex;flex-direction:column;gap:7px} .cf-bld__l{font-family:var(--fdisplay);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:#8A8577} /* Основа — сегментные переключатели (выбор одного), крупные, во всю ширину */ .cf-seg{display:flex;flex-wrap:wrap;gap:6px} .cf-seg__b{flex:1 1 calc(50% - 3px);min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px; padding:10px 8px;border:1px solid rgba(27,26,24,.22);border-radius:12px;background:none;cursor:pointer; font-family:var(--fsans);color:#2b2a28;line-height:1.15;transition:background .2s ease,border-color .2s ease,color .2s ease} .cf-seg__b b{font-weight:500;font-size:13.5px} .cf-seg__b span{font-size:11px;color:#3B4B96} .cf-seg__b:hover{border-color:#3B4B96} .cf-seg__b.is-on{background:#3B4B96;border-color:#3B4B96;color:#FFFFFF} .cf-seg__b.is-on span{color:rgba(255,255,255,.85)} /* Добавки — плитки-тоглы вкл/выкл, 2 в ряд */ .cf-bld__sec{display:flex;flex-direction:column;gap:8px;border-top:1px solid rgba(27,26,24,.12);padding-top:13px} .cf-add-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .cf-add{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 13px; border:1px solid rgba(27,26,24,.18);border-radius:12px;background:none;cursor:pointer; font-family:var(--fsans);color:#2b2a28;text-align:left;transition:background .2s ease,border-color .2s ease,color .2s ease} .cf-add__n{display:flex;align-items:center;font-size:13.5px;font-weight:500} .cf-add__n::before{content:"+";display:inline-block;width:13px;margin-right:7px;color:#8A8577;font-weight:500;text-align:center} .cf-add__p{font-size:12px;color:#3B4B96;white-space:nowrap} .cf-add:hover{border-color:#3B4B96} .cf-add.is-on{background:#F2F4FB;border-color:#3B4B96} .cf-add.is-on .cf-add__n{color:#3B4B96} .cf-add.is-on .cf-add__n::before{content:"\2713";color:#3B4B96} /* ── СЕРВИС-КАРТОЧКИ кофе: длинные «продающие» тексты на обороте флипа ── тексты заметно длиннее, чем на «Оформлении» (заголовок-хук + абзац + оффер со стрелкой + цена) → карточка выше, верхнее выравнивание, нижний блок (оффер + цена) прижат вниз, ничего не обрезается. */ .cf-svc .ea-serv__flip{height:clamp(420px,64vh,560px)} .cf-svc .ea-serv__face--back{justify-content:flex-start;overflow-y:auto; padding:clamp(30px,3vw,52px) clamp(28px,2.6vw,46px)} .cf-svc .ea-serv__num{color:rgba(231,56,90,.65)} .cf-svc .ea-serv__ctitle{font-size:clamp(23px,2.2vw,36px);margin:7px 0 14px;line-height:1.1} /* тело по центру (как на «Оформлении») — auto сверху и снизу делит свободное место пополам, текст не прижат к заголовку и не «растянут» одним провалом */ .cf-svc .ea-serv__slash{margin:auto 0;font-size:clamp(13px,1.02vw,15px);line-height:1.62} /* нижний блок: разделительная линия + оффер со стрелкой → + цена, прижат к низу */ .cf-svc .ea-serv__offer{margin:0;padding-top:clamp(14px,1.6vw,18px); border-top:1px solid rgba(231,56,90,.22);font-family:var(--sans);font-style:italic; font-weight:400;font-size:clamp(12px,.98vw,14px);line-height:1.5;color:rgba(231,56,90,.9)} .cf-svc .ea-serv__offer::before{content:"\2192";font-style:normal;font-weight:600;margin-right:8px} /* цена — отдельной строкой под оффером, без стрелки и линии, крупнее */ .cf-svc .ea-serv__price{margin:9px 0 0;padding-top:0;border-top:none; font-style:normal;font-size:clamp(15px,1.3vw,19px)} .cf-svc .ea-serv__price::before{content:none} .cf-svc .ea-serv__price b{font-size:1em;margin:0} /* ── RESPONSIVE ── */ @media(max-width:900px){ .ea-hero--mirror .ea-hero__left{order:0;border-left:none} .ea-hero--mirror .ea-hero__right{order:0} .cf-menu__row{grid-template-columns:auto 1fr auto;gap:10px 16px} .cf-menu__vol{display:none} .cf-menu__desc{grid-column:1/-1} .cf-modal__panel{grid-template-columns:1fr;max-height:92vh;overflow-y:auto} .cf-modal__img{min-height:230px} } /* FAQ кофейни: класс .ea-panel делает секцию sticky/100vh — из-за этого блок пиннился поверх «лимонадов». id-специфичность гарантированно возвращает обычный поток, авто-высоту и сплошной фон поверх штор-стека. */ #cf-faq{position:relative;z-index:30;min-height:0;height:auto;background:#FFFFFF} /* ===================================================================== МОБИЛЬНАЯ ВЕРСИЯ (≤900px) — удобная вертикальная раскладка кофейни. Базовый event-author.css уже стекает .ea-hero/.ea-philo/.ea-faq в 1 колонку, но: (1) .coffee-page .ea-philo насильно 100vh → две половины сдавлены; (2) блок этапов #cf-steps — горизонтальная лента с абсолютным позициони- рованием → на телефоне ломается. Здесь превращаем его в вертикальный стек. ===================================================================== */ @media(max-width:900px){ /* «Философия»: нормальный поток вместо 100vh (иначе текст+фото налазят) */ .coffee-page .ea-philo{height:auto;min-height:0} .cf-philo .ea-philo__media{min-height:54vh} /* Герой: логотип-картинка и высота под телефон */ .cf-hero__logoimg{width:clamp(150px,44vw,200px);margin-top:clamp(18px,4vh,40px)} .coffee-page .cf-hero .ea-hero__left{min-height:60vh} /* Цветки у заголовка меню — компактнее, чтобы заголовок читался */ .cf-menu-flower{width:clamp(26px,8vw,40px)!important} /* ── ЭТАПЫ #cf-steps: тот же ПК-макет (коллаж + горизонтальное листание), но размеры фото/текста, позиции и отступы подогнаны под телефон — без наложений и лишних пустот. Механику (sticky-пиннинг, трек) НЕ трогаем, только высоту секции уменьшаем, чтобы листалось живо. ── */ #cf-steps{height:250vh!important} /* панель = ширина телефона; весь контент начинается с ~14% (верхняя зона пустая — под шапкой), поэтому текст/фото никогда не заходят под шапку */ #cf-steps .ea-proc__sticky{overflow:hidden} /* панель = ширина телефона; заголовок сверху, описание снизу */ #cf-steps .ea-proc-step, #cf-steps .ea-proc-step:last-child{width:90vw!important;padding:0!important} #cf-steps .ea-proc__intro{width:86vw!important;padding:0 6vw!important} #cf-steps .ea-proc__intro .ea-title{font-size:clamp(27px,8vw,38px)!important;line-height:1.12} #cf-steps .ea-proc__intro .ea-proc__lead{font-size:clamp(14px,3.9vw,16px)!important;max-width:none!important;margin-top:14px} #cf-steps .ea-proc .ea-step__t, #cf-steps .ea-step__t{font-size:clamp(19px,5.6vw,25px)!important;line-height:1.14!important} #cf-steps .ea-step__d{font-size:clamp(12.5px,3.5vw,14px)!important;line-height:1.48!important} /* ── КРУПНЫЕ фото/видео, текст МЕЖДУ ними, по-разному на каждом шаге ── */ /* ШАГ 01: фото A сверху → заголовок+текст в середине → фото B снизу. Верх фото A с 18% — верхние ~146px пусты (под баннером «тех.работы» 67px + шапкой 65px = ~132px), поэтому ничего не залезает под них. */ #cf-steps .ea-proc__ph--a, #cf-steps .ea-proc-step:nth-child(2) .ea-proc__ph--a{ top:18%!important;left:9%!important;width:78%!important;height:26%!important;aspect-ratio:auto!important} #cf-steps .ea-proc__ph--b{ top:68%!important;left:13%!important;width:78%!important;height:28%!important;aspect-ratio:auto!important} /* ШАГ 03: фото D сверху (сдвиг вправо) → текст в середине → фото E снизу (сдвиг влево) */ #cf-steps .ea-proc-step:last-child .ea-proc__ph--d{ top:18%!important;left:13%!important;width:78%!important;height:26%!important;aspect-ratio:auto!important} #cf-steps .ea-proc-step:last-child .ea-proc__ph--e{ top:68%!important;left:9%!important;width:78%!important;height:28%!important;aspect-ratio:auto!important} /* ШАГ 02: заголовок+текст сверху (с 19%, ниже баннера+шапки) → КРУПНОЕ видео снизу */ #cf-steps .ea-proc__ph--c{top:41%!important;left:8%!important;width:84%!important;height:55%!important;aspect-ratio:auto!important} /* заголовки: 01/03 — ровно между фото, 02 — сверху (в безопасной зоне) */ #cf-steps .ea-proc-step:nth-child(2) .ea-step__t--top, #cf-steps .ea-proc-step:last-child .ea-step__t--top{top:47%!important;left:6%!important;right:6%!important;width:auto!important} #cf-steps .ea-step__t--mid{top:19%!important;left:6%!important;right:6%!important;width:auto!important} /* описания: 01/03 — под заголовком в середине, 02 — сверху под заголовком */ #cf-steps .ea-proc-step:nth-child(2) .ea-step__body--lo, #cf-steps .ea-proc-step:last-child .ea-step__body--hi{ top:53%!important;bottom:auto!important;left:6%!important;right:6%!important;width:auto!important;max-width:none!important} #cf-steps .ea-proc-step:nth-child(3) .ea-step__body--mid{ top:26%!important;bottom:auto!important;left:6%!important;right:6%!important;width:auto!important;max-width:none!important} /* декоративные стрелки на телефоне убираем — мешают */ #cf-steps .ea-proc__arrow{display:none!important} } /* Сладкие разделы («Десерты», «Корпусные», «ChokoMe») — оранжевая активная кнопка-фильтр */ #cfMenuFilters .catalog-filter-btn[data-cat="dessert"].is-active, #cfMenuFilters .catalog-filter-btn[data-cat="corpus"].is-active, #cfMenuFilters .catalog-filter-btn[data-cat="chokome"].is-active{ background:#EE7B2D; border-color:#EE7B2D; color:#FFFFFF; } #cfMenuFilters .catalog-filter-btn[data-cat="dessert"]:focus-visible, #cfMenuFilters .catalog-filter-btn[data-cat="corpus"]:focus-visible, #cfMenuFilters .catalog-filter-btn[data-cat="chokome"]:focus-visible{ outline-color:#EE7B2D; } /* Блок «Десерты от нашего кондитера» — оранжевый акцент, как у десертов в меню. Геометрию кнопка берёт из общей группы в coffee-editorial.css, здесь только цвет. */ .cf-sweetblock .ea-eyebrow{color:#EE7B2D} .coffee-page .coffee-ea .cf-sweetblock .ea-hero__h1{color:#EE7B2D} .coffee-page .cf-sweetblock .ea-hero__right .ea-btn{ background:#EE7B2D; border-color:#EE7B2D; box-shadow:0 14px 34px rgba(238,123,45,.26); } .coffee-page .cf-sweetblock .ea-hero__right .ea-btn:hover{ background:transparent; color:#EE7B2D; border-color:#EE7B2D; box-shadow:0 18px 40px rgba(238,123,45,.18); } /* Блоки «Лимонады» и «Десерты» — секции-шторки высотой 100vh: кнопка стояла у самого низа (justify-content:space-between), и следующая шторка сразу её перекрывала — клиент не успевал заметить CTA. Группируем контент по центру и приподнимаем над нижним краем, чтобы кнопка была на виду. */ .coffee-page .cf-lemon .ea-hero__right, .coffee-page .cf-sweetblock .ea-hero__right{ justify-content:center; gap:clamp(14px,2.4vh,30px); padding-bottom:clamp(72px,12vh,150px); } /* лид уже даёт отступ снизу — при центрировании убираем двойной зазор до кнопки */ .coffee-page .cf-lemon .ea-hero__right .ea-hero__lead, .coffee-page .cf-sweetblock .ea-hero__right .ea-hero__lead{ margin-bottom:0; } /* Десерты: отдельный блок БЖУ в попапе */ .cf-nutri__weight{ font-family:var(--sans); font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:rgba(27,26,24,.55); margin:4px 0 12px; } .cf-nutri{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:4px 0 2px; } .cf-nutri__cell{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:11px 6px; border:1px solid rgba(27,26,24,.12); border-radius:12px; background:rgba(27,26,24,.03); } .cf-nutri__v{ font-family:var(--sans); font-size:17px; font-weight:700; line-height:1; color:var(--wine,#3B4B96); } .cf-nutri__k{ font-family:var(--sans); font-size:10px; line-height:1.15; letter-spacing:.03em; text-transform:uppercase; color:rgba(27,26,24,.55); text-align:center; } /* «Философия»: кадрируем видео выше середины — иначе стакан упирается в верхний край, а низ занимают стопки стаканчиков. 18% выводит стакан ровно в центр колонки (видео вертикальное 1080x1920, колонка ~632x720). */ .coffee-page .cf-philo .ea-philo__media video{object-position:50% 18%}