/* ---------- Фирменный шрифт Gotham Pro (лицензия клиента) ---------- */ @font-face{font-family:'Gotham Pro';src:url('fonts/gothampro.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Gotham Pro';src:url('fonts/gothampro_medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'Gotham Pro';src:url('fonts/gothampro_bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:'Gotham Pro';src:url('fonts/gothampro_black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap} /* ============================================================ Serikov Coffee — общие стили сайта Токены сняты с утверждённого макета Figma (Frame 409) и сверены с брендбуком (docs/BRAND-RULES.md) ============================================================ */ :root{ /* Зелёные */ --green-deep:#205b28; /* футер, тёмные плоскости */ --green-deep-2:#22612b; --green:#009144; /* кнопки, акценты */ --green-bright:#00904c; --green-brand:#00723b; /* брендбук */ --green-pale:#d9f2dd; /* фон шкал вкуса, подложки */ /* Акценты */ --teal:#00a8bc; --teal-2:#019db0; --orange:#f47920; --orange-2:#f36d0c; --yellow:#f7ab01; --yellow-2:#fdb913; --crimson:#9c1c3c; --crimson-2:#ab1a40; --bordo:#861e22; /* тёмно-красный из палитры */ --cart:#8b2628; /* кнопка «В корзину»: заливка .pbtn и btn-cart.svg */ /* Плитка — как в примерах заказчика (Ligastore, Lemana): белая карточка, еле заметная линия и мягкая тень вместо жирной цветной обводки. */ --tile-line:#ececE8; --tile-shadow:0 1px 2px rgba(20,40,20,.04), 0 8px 24px rgba(20,40,20,.06); --tile-shadow-hover:0 2px 4px rgba(20,40,20,.06), 0 16px 36px rgba(20,40,20,.10); /* Нейтральные */ --ink:#1a1a1a; --ink-soft:#4d4d4d; --line:#e4e4e0; --bg:#ffffff; --bg-soft:#f4f6f3; /* Геометрия */ --r-sm:8px; --r:12px; --r-md:20px; --r-lg:36px; --r-xl:52px; --shadow:0 4px 18px rgba(20,30,20,.07); --shadow-lift:0 12px 34px rgba(20,30,20,.13); --ease:cubic-bezier(.22,1,.36,1); --font:'Gotham Pro','Montserrat',system-ui,-apple-system,sans-serif; --font-ui:'Geologica','Montserrat',system-ui,sans-serif; --font-display:'Gotham Pro','Oswald',sans-serif; --wrap:1280px; /* Единый масштаб макета. Макет нарисован под 1440 и на реальных экранах читается крупно, поэтому базовый коэффициент 0.9 и плавное уменьшение на узких окнах. Крупнее/мельче — меняется здесь одним числом. */ --u: clamp(.70px, .0556vw, .8px); /* Ширина контентной колонки. Хотите уже поля по бокам — увеличьте число. 1640 при масштабе .8 даёт колонку 1312px. */ --wrap-w: calc(1640 * var(--u)); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{font-family:var(--font);font-size:16px;line-height:1.55;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} input,select,textarea{font-family:inherit;font-size:16px} .wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 16px;width:100%} @media(min-width:768px){.wrap{padding:0 28px}} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* ---------- Шапка (макет Figma: Frame 409 + Frame 316) ---------- Контейнер 1440 · плашка 1360×64, radius 20 Логотип 144×77 выступает за плашку Кнопка «Меню» и поиск — рисованные фигуры наискось (SVG из макета) Справа три иконки, слово ПОД иконкой · корзина бордовая #8b2628 ------------------------------------------------------------------ */ #site-header{position:sticky;top:0;z-index:100} .site-head{background:transparent;padding:calc(14 * var(--u)) 0 calc(12 * var(--u));will-change:transform;transition:transform .42s var(--ease),box-shadow .3s ease} .site-head.is-hidden{transform:translateY(-102%)} .site-head.is-stuck .head-inner{background:rgba(255,255,255,.78);box-shadow:0 10px 30px rgba(20,40,20,.14)} @media(prefers-reduced-motion:reduce){.site-head{transition:none}} .head-plate{max-width:var(--wrap-w);margin:0 auto;padding:0 calc(24 * var(--u))} .head-inner{position:relative;height:calc(64 * var(--u));display:flex;align-items:center;gap:calc(16 * var(--u)); padding:0 calc(22 * var(--u)) 0 calc(20 * var(--u));border-radius:calc(22 * var(--u)); background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%); border:1px solid rgba(255,255,255,.7);box-shadow:0 6px 26px rgba(20,40,20,.10)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .head-inner{background:#fff}} @media(max-width:1100px){.head-plate{padding:0 16px}.head-inner{height:auto;padding:10px 0;flex-wrap:wrap}} /* логотип */ .hd-logo{flex-shrink:0;display:block;line-height:0;margin-right:calc(16 * var(--u))} .hd-logo img{width:calc(144 * var(--u));height:auto;max-height:calc(78 * var(--u));object-fit:contain} @media(max-width:1100px){.hd-logo img{width:112px}} /* «Меню» — рисованная плашка из макета (наискось) */ .hd-cat{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;gap:calc(10 * var(--u)); width:calc(160 * var(--u));height:calc(50 * var(--u));background:url(img/hd-shape-btn.svg?v=2) no-repeat center/100% 100%; color:#f5f5f5;font-family:var(--font);font-weight:500;font-size:calc(18 * var(--u));letter-spacing:.01em; white-space:nowrap;transition:transform .18s var(--ease),filter .18s ease} .hd-cat:hover{transform:translateY(-1px);filter:brightness(1.08)} /* ---- мега-меню: каталог на виду, служебное убрано внутрь ---- */ .hd-menu{position:static} .hd-cat.is-open{filter:brightness(1.12)} .hd-drop{position:absolute;left:0;right:0;top:calc(100% + 10px);z-index:120; background:#fff;border:1px solid var(--line);border-radius:calc(24 * var(--u)); box-shadow:0 22px 54px rgba(20,40,20,.20);overflow:hidden; animation:mmIn .28s cubic-bezier(.22,1,.36,1)} @keyframes mmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} .hd-drop[hidden]{display:none} .hd-drop-in{display:grid;gap:0} @media(min-width:900px){.hd-drop-in{grid-template-columns:minmax(0,1fr) calc(286 * var(--u))}} /* каталог */ .hd-cat-cols{display:grid;gap:calc(26 * var(--u));padding:calc(26 * var(--u)) calc(30 * var(--u))} @media(min-width:620px){.hd-cat-cols{grid-template-columns:repeat(3,minmax(0,1fr))}} .hd-cat-col{display:flex;flex-direction:column;gap:calc(9 * var(--u))} .hd-cat-h{font-family:var(--font);font-weight:900;font-size:calc(19 * var(--u));text-transform:uppercase; color:var(--green-deep-2);letter-spacing:-.01em;margin-bottom:calc(4 * var(--u));transition:color .15s} .hd-cat-h:hover{color:var(--green-brand)} .hd-cat-col a:not(.hd-cat-h){font-weight:500;font-size:calc(16 * var(--u));line-height:1.25;color:var(--ink); transition:color .15s,transform .15s} .hd-cat-col a:not(.hd-cat-h):hover{color:var(--green-brand);transform:translateX(3px)} /* служебная колонка */ .hd-drop-side{display:flex;flex-direction:column;gap:calc(9 * var(--u)); padding:calc(26 * var(--u)) calc(30 * var(--u));background:var(--bg-soft);border-left:1px solid var(--line)} @media(max-width:899px){.hd-drop-side{border-left:0;border-top:1px solid var(--line)}} .hd-drop-cap{font-family:var(--font);font-weight:900;font-size:calc(13 * var(--u));text-transform:uppercase; letter-spacing:.05em;color:var(--green-brand)} .hd-drop-cap.gap{margin-top:calc(14 * var(--u))} .hd-drop-side a{font-weight:500;font-size:calc(15 * var(--u));line-height:1.25;color:var(--ink-soft);transition:color .15s} .hd-drop-side a:hover{color:var(--green-brand)} .hd-drop-tel{margin-top:auto;padding-top:calc(16 * var(--u));font-family:var(--font); font-weight:700;font-size:calc(19 * var(--u));color:var(--green-deep-2)!important;white-space:nowrap} .hd-drop a.is-here{color:var(--green-brand);font-weight:700} @media(max-width:620px){.hd-drop{left:calc(-16 * var(--u));right:calc(-16 * var(--u))} .hd-cat-cols,.hd-drop-side{padding:calc(20 * var(--u)) calc(22 * var(--u))}} .hd-cat-ico{width:calc(18 * var(--u));height:calc(13 * var(--u));flex-shrink:0;margin-top:1px} /* поиск — рисованная обводка из макета (наискось) */ .hd-search{flex:1;min-width:0;max-width:calc(860 * var(--u));display:flex;align-items:center;gap:calc(10 * var(--u));height:calc(50 * var(--u)); padding:0 calc(24 * var(--u));background:url(img/hd-shape-search.svg?v=2) no-repeat center/100% 100%} .hd-search input{flex:1;border:none;outline:none;background:none;font-family:var(--font);font-weight:500;font-size:calc(16 * var(--u));color:var(--ink);min-width:0} .hd-search input::placeholder{color:var(--green-brand);opacity:1} .hd-search-ico{width:calc(18 * var(--u));height:calc(18 * var(--u));flex-shrink:0} /* правый блок: иконка сверху, слово под ней */ /* margin-left:auto прижимает иконки к правому краю плашки: без него они липли к полю поиска, а справа оставалась пустота. */ .hd-right{display:flex;align-items:flex-start;gap:calc(24 * var(--u));flex-shrink:0;margin-left:auto} .hd-ico{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px; color:var(--green-deep-2);font-family:var(--font);font-weight:500;font-size:calc(16 * var(--u));line-height:1; white-space:nowrap;transition:opacity .15s} .hd-ico:hover{opacity:.72} .hd-ico.cart{color:#8b2628} .hd-ico .cnt{position:absolute;top:-7px;right:-4px;font-family:var(--font);font-weight:900;font-size:13px;color:#8b2628} @media(max-width:1100px){ .hd-right{gap:16px;order:2;margin-left:auto;align-items:center} .hd-ico span:not(.cnt){display:none} .hd-search{order:3;flex-basis:100%;max-width:none;height:48px;padding:0 18px} .hd-search input{font-size:16px} .hd-cat{width:132px;height:46px;font-size:16px;order:1} } /* ---------- Хлебные крошки и заголовок страницы ---------- */ .crumbs{padding:18px 0 0;font-size:13px;color:var(--ink-soft)} .crumbs a:hover{color:var(--green)} .crumbs span{opacity:.5;margin:0 6px} .page-head{padding:14px 0 26px} .page-head h1{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(28px,4.4vw,46px);line-height:1.05} .page-head h1 em{font-style:normal;color:var(--green)} .page-head .lead{margin-top:10px;color:var(--ink-soft);max-width:640px;font-size:15.5px} /* ---------- Кнопки ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:800;font-size:15px;padding:15px 26px;border-radius:var(--r);min-height:52px;transition:background .2s,transform .15s,box-shadow .2s} .btn:active{transform:scale(.98)} .btn-green{background:var(--green);color:#fff} .btn-green:hover{background:var(--green-bright)} .btn-bordo{background:var(--bordo);color:#fff} .btn-bordo:hover{background:#6f181c} .btn-ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)} .btn-ghost:hover{border-color:var(--green);color:var(--green)} /* ---------- Подвал — отдельный фрейм Figma «footer» 1440×319 ---------- Рваный зелёный край #22612b (SVG 1440×276, снизу) Узор-шеврон белым 3% (SVG 1440×319) Колонки по макету: лого 82 · ссылки 373 · каталог 575 · лицам 790 · телефоны 1112 Ссылки Gotham Pro Bold 14 · телефоны Medium 22 · копирайт Bold 10 (y=276) ----------------------------------------------------------------------- */ .site-foot{position:relative;padding:0 0 calc(26 * var(--u));margin-top:64px; min-height:calc(319 * var(--u));color:#fff;font-family:var(--font);overflow:hidden} /* Зелёная заливка с рваным краем раньше была фиксированной высоты и висела у нижней кромки. Подвал теперь растёт по содержимому, поэтому тянем заливку от той же линии до самого низа — иначе верхние ссылки оказывались на белом фоне и пропадали. */ .site-foot .ft-shape{position:absolute;left:0;right:0;top:calc(43 * var(--u));bottom:0;height:auto; background:url(img/foot-shape.svg) no-repeat center bottom/100% 100%;pointer-events:none} .site-foot .ft-wave{position:absolute;inset:0;z-index:1; background:url(img/foot-wave.svg) no-repeat center/100% 100%;pointer-events:none} .ft-in{position:relative;z-index:2;max-width:var(--wrap-w);margin:0 auto;padding:calc(78 * var(--u)) calc(82 * var(--u)) 0; display:grid;grid-template-columns:calc(291 * var(--u)) calc(202 * var(--u)) calc(215 * var(--u)) calc(322 * var(--u)) 1fr;align-items:start} .ft-logo{display:block;line-height:0} .ft-logo img{width:calc(223 * var(--u));height:auto} .ft-col{list-style:none;margin-top:18px} .ft-col li{list-style:none;line-height:0} .ft-col a{display:block;font-weight:700;font-size:14px;line-height:17px;color:#fff;transition:opacity .15s} .ft-col a:hover{opacity:.72} .ft-col.c1 a{margin-bottom:7px} .ft-col.c2 a{margin-bottom:11px} .ft-col.c3{margin-top:18px} .ft-col.c3 p{font-weight:700;font-size:14px;line-height:17px;margin:0 0 10px} .ft-col.c3 a{display:inline;font-weight:700;line-height:17px} .ft-col.c3 .cap{font-weight:500;text-transform:uppercase;letter-spacing:.01em} .ft-col.c3 .gap{margin-top:35px} .ft-col.c3 p:nth-child(4){margin-bottom:5px} .ft-tel{margin-top:18px} .ft-tel a{display:block;font-weight:500;font-size:calc(22 * var(--u));line-height:22px;margin-bottom:24px;color:#fff;white-space:nowrap;transition:opacity .15s} .ft-tel a:hover{opacity:.8} .ft-legal{position:relative;top:auto;z-index:2;max-width:var(--wrap-w);margin:0 auto; padding:calc(34 * var(--u)) calc(82 * var(--u)) 0; display:flex;flex-wrap:wrap;gap:4px 46px;font-weight:700;font-size:10px;line-height:1.4;color:#fff} @media(max-width:1200px){ .site-foot{height:auto;padding-bottom:34px} /* рваный край — отдельной полосой сверху, дальше сплошная заливка */ .site-foot::before{content:'';position:absolute;left:0;right:0;top:0;height:34px;z-index:0; background:url(img/foot-shape.svg) no-repeat center top/1440px auto} .site-foot .ft-shape{top:26px;bottom:0;height:auto;background:var(--green-deep-2)} .site-foot .ft-wave{inset:26px 0 0;background:url(img/foot-wave.svg) repeat center top/1440px auto} .ft-in{grid-template-columns:1fr 1fr 1fr;gap:26px;padding:56px 28px 0} .ft-logo{grid-column:1/-1} .ft-logo img{width:190px} .ft-col,.ft-col.c3,.ft-tel{margin-top:0} .ft-legal{position:static;padding:26px 28px 0;margin-top:0} } @media(max-width:700px){ .ft-in{grid-template-columns:1fr 1fr;padding:46px 18px 0;gap:22px} .ft-logo img{width:160px} .ft-tel{grid-column:1/-1} .ft-tel a{font-size:20px;margin-bottom:14px} .ft-legal{padding:22px 18px 0;font-size:11px;gap:4px 20px} } /* ---------- Плавающая поддержка ---------- */ .fab{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;align-items:center;gap:9px;background:#25d366;color:#fff;font-weight:800;font-size:14px;padding:14px 18px;border-radius:999px;box-shadow:0 8px 24px rgba(0,0,0,.22);transition:transform .2s} .fab:hover{transform:scale(1.04)} @media(max-width:560px){.fab span{display:none}.fab{padding:15px}} /* ---------- Юридические (текстовые) страницы ---------- */ .doc{max-width:820px;padding-bottom:20px} .doc .updated{display:inline-block;background:var(--green-pale);color:var(--green-deep);font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px;margin-bottom:24px} .doc h2{font-family:var(--font-display);font-weight:700;text-transform:uppercase;font-size:20px;line-height:1.2;margin:32px 0 12px;color:var(--green-deep)} .doc h2:first-of-type{margin-top:0} .doc p{margin-bottom:12px;color:var(--ink-soft);font-size:15.5px;line-height:1.65} .doc ul{margin:0 0 14px 0;padding-left:20px} .doc li{margin-bottom:8px;color:var(--ink-soft);font-size:15.5px;line-height:1.6} .doc .req{background:var(--bg-soft);border-radius:var(--r-md);padding:22px 24px;margin-top:34px} .doc .req b{display:block;margin-bottom:10px;color:var(--ink);font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-size:15px} .doc .req p{margin-bottom:6px;font-size:14.5px} .doc-nav{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px} .doc-nav a{font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:999px;background:var(--bg-soft);transition:background .2s} .doc-nav a:hover{background:var(--green-pale);color:var(--green-deep)} .doc-nav a.on{background:var(--green);color:#fff} /* ---------- Появление блоков ---------- */ .rv{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease)} .rv.in{opacity:1;transform:none} /* ============================================================ ГЛАВНАЯ СТРАНИЦА — перенос макета Figma (Frame 409) Сетка: контейнер 1440, контент 1360 (padding 40). Секции: hero-баннер, 4 карточки-входа, бегущая строка, «Хиты обжарки», квиз «Подберём кофе за минуту». ============================================================ */ .mac{max-width:var(--wrap-w);margin:0 auto;padding:0 calc(24 * var(--u))} @media(max-width:1100px){.mac{padding:0 16px}} /* ---------- HERO: баннеры заказчика ---------- Раньше главный экран был собран из кусков — фон, декор, вырезанный человек и текст, который менялся по таймеру. Теперь показываем готовые баннеры бренда как есть: в них уже своя типографика и своя композиция, поверх ничего не рисуем. Пропорция дорожки равна пропорции баннера (1900×814), поэтому картинка ложится без обрезки на любой ширине. Ничего не теряется — но и на телефоне баннер остаётся широкой полосой: под мобильные нужны свои версии, они запрошены у заказчика. ------------------------------------------------------------------------ */ .hero-b{position:relative;padding:0;margin-top:8px;border-radius:36px;overflow:hidden; background:var(--green-deep-2);isolation:isolate} /* РАЗМЕР БАННЕРА ЗАФИКСИРОВАН: 2560×800, пропорция 3.2:1. Картинка другой пропорции обрежется по центру — намеренно, чтобы ошибка в размерах была видна сразу и её починили в макете, а не подгоняли вёрсткой. Нужны две версии: десктоп 2560×800 и мобильная 1080×1080, вторая пока не сделана. */ .hero-track{position:relative;aspect-ratio:2560 / 800} .hero-slide{position:absolute;inset:0;display:block;opacity:0;pointer-events:none; transition:opacity .6s ease} .hero-slide.on{opacity:1;pointer-events:auto} .hero-slide img{display:block;width:100%;height:100%;object-fit:cover} /* Заголовок страницы держим текстом: на баннере он нарисован, а поиску и скринридеру нужен настоящий h1. */ .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0} .hero-nav{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); display:flex;justify-content:space-between;padding:0 calc(18 * var(--u));z-index:8; pointer-events:none} .hero-nav button{width:calc(44 * var(--u));height:calc(44 * var(--u));border-radius:50%; color:#fff;background:rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center; pointer-events:auto;cursor:pointer;border:0;opacity:.85; transition:opacity .2s,background .2s,transform .2s} .hero-nav button:hover{opacity:1;background:rgba(0,0,0,.38);transform:scale(1.08)} .hero-dots{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(18 * var(--u)); display:flex;gap:calc(10 * var(--u));z-index:8} .hero-dots i{width:calc(30 * var(--u));height:calc(6 * var(--u));border-radius:999px; background:rgba(255,255,255,.45);cursor:pointer;transition:background .25s,width .3s} .hero-dots i.on{background:#fff;width:calc(46 * var(--u))} @media(max-width:900px){ /* Пока нет мобильной версии баннера — берём более высокий кадр из того же файла, обрезая бока: полоса 3.2:1 на телефоне складывается в 117 px. */ .hero-track{aspect-ratio:16 / 10} .hero-b{border-radius:20px;margin-top:4px} .hero-nav{display:none} .hero-dots{bottom:8px;gap:6px} .hero-dots i{width:20px;height:4px} .hero-dots i.on{width:30px} } @media(prefers-reduced-motion:reduce){ .hero-slide{transition:none} } /* ---------- 4 карточки-входа (Frame 316: ровные, r32, 322×400) ---------- На десктопе — аккордеон: наведённая карточка расширяется, соседние поджимаются, у наведённой снизу выезжает описание и кнопка. Текст не переверстывается: заголовок в одну строку с плавной сменой кегля, описание фиксированной ширины. ------------------------------------------------------------------------ */ .entries{display:grid;gap:24px;margin-top:22px} @media(min-width:1000px){.entries{grid-template-columns:repeat(4,1fr)}} @media(min-width:620px) and (max-width:999px){.entries{grid-template-columns:1fr 1fr}} .entry{position:relative;aspect-ratio:322/400;min-height:300px;border-radius:32px;overflow:hidden; display:block;padding:calc(32 * var(--u)) calc(27 * var(--u)) 0;transition:transform .4s var(--ease),box-shadow .4s ease} .entry:hover{transform:translateY(-6px);box-shadow:0 20px 44px rgba(20,40,20,.2)} .entry .wave{position:absolute;inset:-20%;z-index:0;pointer-events:none;opacity:.45; background:url(img/foot-wave.svg) no-repeat center/cover} .entry h3{position:relative;z-index:3;font-family:var(--font);font-weight:700;text-transform:uppercase; font-size:calc(32 * var(--u));line-height:1.08;letter-spacing:-.03em} .entry ul{list-style:none;margin-top:24px;position:relative;z-index:3} .entry li{font-weight:500;font-size:calc(16 * var(--u));line-height:1.5;display:flex;gap:10px;align-items:baseline;margin-bottom:9px} .entry li::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;transform:translateY(-4px)} .entry .pic{position:absolute;z-index:1;pointer-events:none;transition:transform .5s var(--ease)} .entry .pic img{width:100%;height:auto;display:block} .entry:hover .pic{transform:scale(1.04)} /* позиции фото — 1:1 с макетом (проценты от 322×400) */ .e-home .pic{left:-3.1%;top:19.5%;width:104%} .e-biz .pic{left:21.7%;top:37.3%;width:88.5%} .e-quiz .pic{left:2.2%; top:41.3%;width:95.3%} .e-where .pic{left:-6.2%;top:38.3%;width:112.4%} .e-biz{background:#fdb913;color:var(--green-deep-2)} .e-home{background:#f47920;color:#fff} .e-quiz{background:#00a8bc;color:#fff} .e-where{background:#a71e40;color:#fff} /* выезжающая подпись — по умолчанию скрыта */ .entry .more{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:56px 27px 26px; background:linear-gradient(to top,rgba(12,32,14,.74) 0%,rgba(12,32,14,.55) 46%,rgba(12,32,14,0) 100%); color:#fff;opacity:0;transform:translateY(16px);pointer-events:none; transition:opacity .4s ease,transform .6s cubic-bezier(.3,.7,.2,1)} .entry .more-t{display:block;width:330px;max-width:100%;font-weight:500;font-size:15px;line-height:1.5} .entry .more-b{display:inline-flex;align-items:center;gap:9px;margin-top:16px;background:#fff; color:var(--green-deep-2);font-family:var(--font);font-weight:700;font-size:15px; padding:12px 20px;border-radius:999px;white-space:nowrap} @media(max-width:999px){.entry{aspect-ratio:auto;height:400px;padding:26px 22px 0}.entry h3{font-size:26px}.entry li{font-size:15px}} /* аккордеон — только там, где есть настоящее наведение курсором */ @media(min-width:1000px) and (hover:hover){ .entries{display:flex} .entry{flex:1 1 0;min-width:0;height:calc(400 * var(--u));aspect-ratio:auto; transition:flex-grow .7s cubic-bezier(.3,.7,.2,1),filter .45s ease, box-shadow .45s ease,border-radius .5s ease} .entry:hover{transform:none} /* Разъезд заметный: наведённая карточка почти вдвое шире соседней, остальные уходят на второй план и цветом, и кеглем заголовка. */ .entries:hover .entry{flex-grow:.78} .entries .entry:hover{flex-grow:2.1;box-shadow:0 28px 60px rgba(20,40,20,.28);z-index:2} .entries:hover .entry:not(:hover){filter:saturate(.72) brightness(.9)} .entry h3{white-space:nowrap;transition:font-size .5s cubic-bezier(.3,.7,.2,1), letter-spacing .5s ease} .entries:hover .entry:not(:hover) h3{font-size:calc(23 * var(--u));letter-spacing:-.04em} .entries .entry:hover h3{font-size:calc(36 * var(--u))} /* Список пунктов у поджатых карточек мешает читать заголовок — убираем. */ .entry ul{transition:opacity .35s ease} .entries:hover .entry:not(:hover) ul{opacity:.35} .entries .entry:hover .more{opacity:1;transform:none;transition-delay:.12s} .entries .entry:hover .pic{transform:scale(1.06)} .entries:hover .entry:not(:hover) .pic{transform:scale(.94)} } /* ---------- бегущая строка (макет: 1985×73, наклон 1,72°) ---------- */ .ticker-wrap{overflow:hidden;margin-top:44px;padding:16px 0} .ticker{background:var(--green-brand);color:#fff;height:calc(73 * var(--u));display:flex;align-items:center;overflow:hidden; width:124%;margin-left:-12%;transform:rotate(-1.72deg)} .ticker-t{display:flex;white-space:nowrap;width:max-content;animation:tick 38s linear infinite} .ticker-t span{font-family:var(--font);font-weight:700;font-size:calc(22 * var(--u));text-transform:uppercase;padding:0 20px} @keyframes tick{to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){.ticker-t{animation:none}} @media(max-width:700px){.ticker{height:56px}.ticker-t span{font-size:16px}} /* ---------- ХИТЫ ОБЖАРКИ ---------- */ .hits{padding-top:70px;padding-bottom:20px} .hits-head{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:44px} .hits-all{font-family:var(--font);font-weight:700;font-size:calc(20 * var(--u));text-transform:uppercase;color:var(--green-brand);padding-bottom:14px;background:url(img/underline-catalog.svg) no-repeat left bottom/188px auto;white-space:nowrap} .hits-ttl{text-align:right;flex:1;min-width:300px} .hits-ttl h2{font-family:var(--font);font-weight:900;text-transform:uppercase;font-size:calc(48 * var(--u));line-height:1.02;letter-spacing:-.01em} .hits-ttl h2 em{font-style:normal;color:var(--green-brand)} .hits-ttl p{margin-top:12px;font-size:15px;color:#010101} @media(max-width:820px){.hits-ttl{text-align:left}.hits-ttl h2{font-size:30px}.hits{padding-top:44px}} .pgrid{display:grid;gap:20px} @media(min-width:1040px){.pgrid{grid-template-columns:repeat(4,1fr)}} @media(min-width:620px) and (max-width:1039px){.pgrid{grid-template-columns:1fr 1fr}} .pcard{position:relative;background:#fff;border:1px solid var(--tile-line);border-radius:36px;padding:22px 20px 24px;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s ease} .pcard:hover{transform:translateY(-5px);box-shadow:0 16px 36px rgba(20,40,20,.13)} /* Обводка карточки — в цвет кнопки «В корзину». Классы c1..c4 раздаются по кругу и раньше давали четыре разных цвета; оставляем их в разметке, чтобы не переписывать шаблоны, но цвет теперь один. */ .pcard.c1,.pcard.c2,.pcard.c3,.pcard.c4{border-color:var(--tile-line)} .ptags{position:absolute;top:calc(16 * var(--u));left:calc(16 * var(--u));display:flex;flex-direction:column;gap:calc(6 * var(--u));align-items:flex-start;z-index:3} .ptag{font-family:var(--font);font-weight:700;font-size:calc(11.5 * var(--u));padding:calc(6 * var(--u)) calc(12 * var(--u));border-radius:999px;line-height:1;text-transform:uppercase;letter-spacing:.02em} .t-milk{background:var(--yellow-2);color:#000} .t-hit{background:#891c1e;color:#fff} .t-rare{background:#00a8bc;color:#fff} .t-black{background:#000;color:#fff} .pcard .pimg{height:calc(236 * var(--u));display:flex;align-items:center;justify-content:center;margin:6px 0 18px;position:relative;z-index:1} .pcard .pimg img{max-height:100%;max-width:100%;object-fit:contain;transition:transform .45s var(--ease)} .pcard:hover .pimg img{transform:scale(1.06)} .pcard h3{font-family:var(--font);font-weight:900;font-size:calc(20 * var(--u));text-transform:uppercase;color:var(--green-deep-2);line-height:1.2} .pcard .pdesc{font-weight:500;font-size:15px;color:#4d4d4d;margin-top:9px;line-height:1.45;flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .scales4{margin-top:16px;display:flex;flex-direction:column;gap:9px} .sc{display:flex;align-items:center;gap:12px;font-weight:500;font-size:15px;color:#000} .sc .nm{flex:none;white-space:nowrap;min-width:calc(78 * var(--u))} .sc .bars{display:flex;gap:5px;margin-left:auto} .sc i{width:17px;height:9px;border-radius:5px;background:var(--green-pale)} .sc i.on{background:var(--green-deep-2)} .pw{display:flex;gap:10px;margin-top:18px} .pw button{font-weight:500;font-size:15px;padding:9px 20px;border-radius:12px;border:1.5px solid var(--green-deep-2);color:var(--green-deep-2);background:#fff;transition:all .18s} .pw button.on{background:var(--green-deep-2);color:#fff} .pbuy{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:20px} .pprice{font-family:var(--font);font-weight:900;font-size:calc(20 * var(--u));color:var(--green-deep-2);line-height:1.25} .pprice small{display:block;font-family:var(--font-ui);font-weight:400;font-size:15px;color:#000;margin-top:3px} /* Фирменная форма со скосом — у ЛЮБОЙ кнопки .pbtn, а не только у тех, которым дописали отдельное правило. Прямоугольник со скруглением макету не соответствует. */ /* .pbtn описан ниже, в общем правиле формы кнопок. */ @media(max-width:1039px){.pcard{border-radius:28px}.pcard .pimg{height:200px}} /* ---------- ТЕСТ «Подберём кофе за минуту» ---------- Перенос Figma Frame 405 (файл XxbJXTBouifhaQr5F4y50H): • шапка 48/Black + подводка 15/Regular; • слева колонка 325×400: шаг 20/Bold #0c723b, вопрос 24/Black, чашка 269×281 (наполняется по шагам) и прогресс из 3 сегментов; • справа три карточки 325×400 r36: цветной верх с иконкой, белая панель с большим скруглением 120px, номер в кружке, заголовок 20/Black #22612b, описание 15/Medium #4c4c4c, круглая стрелка 52px #246231; • помол определяется автоматически по ответу на 2-й вопрос. ----------------------------------------------------- */ .quizsec{position:relative;padding:80px 0 64px;overflow:hidden} /* шапка */ .quiz-head{position:relative;z-index:3;max-width:520px} .quiz-head h2{font-family:var(--font);font-weight:900;text-transform:uppercase;font-size:calc(48 * var(--u));line-height:1.1;letter-spacing:-.01em} .quiz-head h2 em{font-style:normal;color:var(--green-brand);display:block} .quiz-head .sub{margin-top:16px;font-size:15px;line-height:1.3;max-width:391px;color:#000} /* декор за карточками */ .quiz-deco{position:absolute;left:50%;top:0;width:1440px;height:731px;margin-left:-720px;z-index:0;pointer-events:none} .quiz-deco{transition:opacity .6s ease} .quizsec.is-done .quiz-deco{opacity:.32} .quiz-deco img{position:absolute;max-width:none} .quiz-deco .d-orn{left:790px;top:44px;height:620px;opacity:.95} .quiz-deco .d-man{left:750px;top:-40px;height:700px} @media(max-width:1439px){.quiz-deco{left:auto;right:-120px;margin-left:0;width:760px} .quiz-deco .d-orn{left:80px;top:40px;height:520px}.quiz-deco .d-man{left:40px;top:-30px;height:580px}} @media(max-width:1100px){.quiz-deco{display:none}} /* сетка блока: 325 слева, карточки справа */ .quiz-row{position:relative;z-index:3;display:grid;gap:20px;margin-top:44px} @media(min-width:1040px){.quiz-row{grid-template-columns:calc(325 * var(--u)) minmax(0,1fr)}} /* ---- левая колонка ---- */ .quiz-aside{width:100%;max-width:calc(325 * var(--u))} @media(min-width:1040px){.quiz-aside{position:relative;height:calc(400 * var(--u))} /* полоска прижата к низу колонки — ровно на уровне нижней границы карточек */ .q-prog{position:absolute;left:0;right:0;bottom:0;margin-top:0}} .q-step{display:block;font-family:var(--font);font-weight:700;font-size:calc(20 * var(--u));text-transform:uppercase;color:#0c723b} .q-title{font-family:var(--font);font-weight:900;font-size:calc(24 * var(--u));line-height:1.3;text-transform:uppercase;color:#000;margin-top:10px;height:calc(56 * var(--u))} .q-cup{height:calc(282 * var(--u));margin-top:6px;display:flex;align-items:flex-end;justify-content:center} .q-cup img{height:100%;width:auto;max-width:100%;object-fit:contain; animation:cupIn .55s cubic-bezier(.22,1,.36,1)} @keyframes cupIn{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}} .q-prog{display:flex;align-items:center;gap:4px;margin-top:14px;padding-left:38px} .q-prog i{width:59px;height:8px;border-radius:200px;background:#d9d9d9;flex:none;transition:background .45s var(--ease)} .q-prog i.done{background:#0c723b} .q-prog i.on{width:67px;height:16px;border-radius:0;background:url(img/q-progress-on.svg) no-repeat left center/67px 16px;margin-left:-8px} .q-prog i.on + i{margin-left:-4px} /* ---- карточки-ответы ---- */ .quiz-main{position:relative;min-height:400px} .qcards{display:grid;gap:20px;transition:opacity .22s ease,transform .38s var(--ease)} .qcards[hidden]{display:none} .qcards.is-out{opacity:0;transform:translateY(12px)} .qcards.is-in{opacity:1;transform:none} @media(min-width:760px){.qcards{grid-template-columns:repeat(3,1fr)}} .qc{position:relative;height:calc(400 * var(--u));border-radius:36px;overflow:hidden;display:block;text-align:left; transition:transform .35s var(--ease),box-shadow .35s ease} .qc:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(20,40,20,.18)} .qc.a1{--c:#f47920;background:var(--c)} .qc.a2{--c:#a71e40;background:var(--c)} .qc.a3{--c:#00a8bc;background:var(--c)} /* обводка цвета карточки поверх белой панели — Frame 405 */ .qc::after{content:'';position:absolute;inset:0;border-radius:36px;pointer-events:none;z-index:4; border:calc(4 * var(--u)) solid var(--c)} .qc .qc-pat{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.6;z-index:0} .qc .qc-ico{position:absolute;left:50%;top:8.5%;transform:translateX(-50%);height:34.5%;width:auto;z-index:2; transition:transform .45s var(--ease)} .qc:hover .qc-ico{transform:translateX(-50%) scale(1.06)} /* белая панель шире карточки (в макете 420 при карточке 325) — даёт пологую дугу сверху */ .qc .qc-panel{position:absolute;left:-17.5%;right:-17.5%;bottom:0;top:52%;background:#fff; border-radius:120px 120px 0 0;z-index:3} .qc .qc-num{position:absolute;left:calc(22 * var(--u));top:43.5%;width:calc(51 * var(--u));height:calc(51 * var(--u));border-radius:50%;background:#fff; display:flex;align-items:center;justify-content:center;z-index:5} .qc .qc-num i{width:88%;height:88%;border-radius:50%;display:flex;align-items:center;justify-content:center; font-family:var(--font);font-weight:700;font-size:calc(28 * var(--u));font-style:normal;color:#fff} .qc.a1 .qc-num i{background:#f36d0c} .qc.a2 .qc-num i{background:#9c1c3c} .qc.a3 .qc-num i{background:#019db0} .qc .qc-txt{position:absolute;left:calc(20 * var(--u));top:55.5%;width:calc(100% - 40 * var(--u));z-index:5} .qc .qc-t{display:block; font-family:var(--font);font-weight:900;font-size:calc(20 * var(--u));text-transform:uppercase;color:#22612b;line-height:1.3} .qc .qc-d{display:block;margin-top:8px; font-weight:500;font-size:15px;line-height:1.55;color:#4c4c4c} .qc .qc-go{position:absolute;left:auto;right:calc(20 * var(--u));bottom:calc(20 * var(--u));width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:50%;background:#246231; display:flex;align-items:center;justify-content:center;z-index:5;transition:transform .25s var(--ease)} .qc .qc-go img{width:22px;height:22px} .qc:hover .qc-go{transform:translateX(4px)} .qc.picked{outline:3px solid #246231;outline-offset:3px} .qc.picked .qc-go{transform:translateX(4px) scale(1.08)} /* ---- результат ---- */ .qresult{position:relative;z-index:3} .qresult[hidden]{display:none} @keyframes qrIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}} @keyframes qrLead{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}} .qr-lead{font-weight:500;font-size:16px;line-height:1.55;max-width:660px;opacity:0;animation:qrLead .5s var(--ease) .06s forwards} .qr-grind{display:inline-flex;align-items:center;gap:10px;margin-top:14px;background:var(--green-pale); color:var(--green-deep-2);font-weight:700;font-size:15px;padding:11px 18px;border-radius:999px; opacity:0;animation:qrLead .5s var(--ease) .14s forwards} .qr-grind b{font-weight:900} .qr-grid{display:grid;gap:16px;margin-top:22px} @media(min-width:760px){.qr-grid{grid-template-columns:1fr 1fr}} .qr-card{display:grid;grid-template-columns:118px minmax(0,1fr);gap:18px;align-items:center;background:#fff; border:1px solid var(--tile-line);box-shadow:var(--tile-shadow);border-radius:24px;padding:16px 18px; opacity:0;animation:qrIn .62s cubic-bezier(.22,1,.36,1) forwards} .qr-card:nth-child(1){animation-delay:.24s} .qr-card:nth-child(2){animation-delay:.38s} .qr-img{display:flex;align-items:center;justify-content:center} .qr-img img{max-width:100%;height:auto;transition:transform .45s var(--ease)} .qr-card:hover .qr-img img{transform:scale(1.05)} .qr-body h4{font-family:var(--font);font-weight:900;font-size:19px;text-transform:uppercase;color:var(--green-deep-2)} .qr-body p{font-weight:500;font-size:14px;color:#4d4d4d;margin-top:6px;line-height:1.45} .qr-w{display:flex;gap:8px;margin-top:12px} .qr-w button{font-weight:500;font-size:14px;padding:7px 16px;border-radius:11px;background:#fff; border:1.5px solid var(--green-deep-2);color:var(--green-deep-2);transition:all .18s} .qr-w button.on{background:var(--green-deep-2);color:#fff} .qr-buy{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:14px; margin-top:6px;padding-top:14px;border-top:1px solid var(--line)} .qr-price{font-family:var(--font);font-weight:900;font-size:20px;color:var(--green-deep-2);line-height:1.25} .qr-price small{display:block;font-family:var(--font-ui);font-weight:400;font-size:14px;color:#000;margin-top:2px} .qr-reset{margin-top:22px;font-weight:700;font-size:15px;color:var(--green-deep-2); border-bottom:2px solid var(--yellow);padding-bottom:3px;opacity:0;animation:qrLead .5s var(--ease) .52s forwards} .qr-reset:hover{border-bottom-color:var(--green)} @media(max-width:1039px){.quiz-head h2{font-size:30px}.quizsec{padding-top:50px} .quiz-aside{max-width:none} .q-title{margin-top:8px;height:auto} .q-cup{height:200px;width:100%;margin-top:14px;justify-content:flex-start} .q-cup img{max-width:100%} .q-prog{margin-top:14px}} @media(max-width:759px){.qc{height:348px}.qc .qc-ico{height:116px;top:28px} .qc .qc-num{top:150px}.qc .qc-txt{top:196px}.qc .qc-go{left:auto;right:20px} .q-cup{height:180px}.qr-card{grid-template-columns:1fr}.qr-buy{flex-wrap:wrap} .quiz-main{min-height:0}} @media(prefers-reduced-motion:reduce){ .qr-card,.qr-lead,.qr-grind,.qr-reset{animation:none;opacity:1;transform:none} .qcards,.q-cup img{transition:none;animation:none} } /* ---------- ДЕТАЛЬНАЯ КАРТОЧКА ТОВАРА — Figma Frame 452 ---------- Слева блок 465 (бейджи, имя 64/ExtraBold #22612b, происхождение, описание, шкалы вкуса, способы приготовления), в центре фото пачки 737×643 с зёрнами, справа карточка покупки 329×424 (#145732, r36) с белой панелью 325×326 внутри. ------------------------------------------------------------------- */ .pdp{padding:calc(22 * var(--u)) 0 calc(70 * var(--u))} .pdp-crumbs{font-size:14px;color:var(--ink-soft)} .pdp-crumbs a{color:var(--ink-soft);transition:color .15s} .pdp-crumbs a:hover{color:var(--green-brand)} .pdp-crumbs span{color:var(--green-deep-2);font-weight:500} .pdp-grid{display:grid;gap:calc(24 * var(--u));margin-top:calc(28 * var(--u));align-items:start} @media(min-width:1100px){ .pdp-grid{grid-template-columns:calc(465 * var(--u)) minmax(0,1fr) calc(329 * var(--u)); gap:calc(30 * var(--u))} } /* ---- левая колонка ---- */ .pdp-badges{display:flex;gap:calc(10 * var(--u));flex-wrap:wrap} .pdp-badges .ptag{position:static} .pdp-name{font-family:var(--font);font-weight:900;text-transform:uppercase;color:var(--green-deep-2); font-size:calc(64 * var(--u));line-height:1.02;letter-spacing:-.02em;margin-top:calc(24 * var(--u))} .pdp-meta{display:flex;flex-wrap:wrap;gap:calc(8 * var(--u)) calc(26 * var(--u));margin-top:calc(16 * var(--u)); font-size:15px;color:var(--ink-soft)} .pdp-meta span{display:inline-flex;align-items:center;gap:8px} .pdp-desc{margin-top:calc(18 * var(--u));font-size:15px;line-height:1.6;color:#000;max-width:calc(400 * var(--u))} .pdp-box{margin-top:calc(22 * var(--u));border:1.5px solid var(--line);border-radius:calc(24 * var(--u)); padding:calc(20 * var(--u)) calc(22 * var(--u))} .pdp-scales{display:flex;flex-direction:column;gap:calc(10 * var(--u));max-width:calc(405 * var(--u))} .pdp-scales .sc{display:flex;align-items:center;gap:calc(16 * var(--u));font-weight:500;font-size:15px;color:#000} .pdp-scales .nm{width:calc(84 * var(--u));flex:none} .pdp-scales .bars{display:flex;gap:calc(7 * var(--u))} .pdp-scales i{width:calc(13 * var(--u));height:calc(13 * var(--u));border-radius:50%; border:1.5px solid var(--green-deep-2);background:#fff} .pdp-scales i.on{background:var(--green-deep-2)} .pdp-scales i.half{background:linear-gradient(90deg,var(--green-deep-2) 50%,#fff 50%)} .pdp-brew{display:flex;gap:calc(6 * var(--u));justify-content:space-between;max-width:calc(405 * var(--u))} .pdp-brew span{display:flex;flex-direction:column;align-items:center;gap:calc(8 * var(--u)); font-weight:500;font-size:12px;color:#000;text-align:center;flex:1;min-width:0;white-space:nowrap} .pdp-brew img{height:calc(46 * var(--u));width:auto} /* ---- фото ---- */ .pdp-photo{position:relative;display:flex;align-items:flex-start;justify-content:center;padding-top:calc(10 * var(--u))} @media(min-width:1100px){.pdp-photo{margin:0 calc(-30 * var(--u))}} .pdp-pack{width:100%;max-width:calc(737 * var(--u));height:auto} .pdp-bean{position:absolute;pointer-events:none;opacity:.95} .pdp-bean.b1{width:calc(115 * var(--u));left:9%;bottom:calc(-14 * var(--u));transform:rotate(-8deg)} .pdp-bean.b2{width:calc(84 * var(--u));left:30%;bottom:calc(-26 * var(--u));transform:rotate(12deg)} .pdp-bean.b3{width:calc(160 * var(--u));right:6%;bottom:calc(-4 * var(--u));transform:rotate(-3deg)} /* ---- карточка покупки ---- */ .pdp-buy{position:relative;background:#145732;border-radius:calc(36 * var(--u));padding:calc(4 * var(--u)); box-shadow:0 18px 44px rgba(20,60,30,.18)} .buy-top{position:relative;display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--u)); padding:calc(20 * var(--u)) calc(22 * var(--u)) calc(4 * var(--u))} .buy-prices{display:flex;flex-direction:column;min-width:0} .buy-old{font-weight:400;font-size:calc(19 * var(--u));color:var(--yellow-2);text-decoration:line-through; text-decoration-thickness:1.5px;white-space:nowrap} .buy-new{font-family:var(--font);font-weight:700;font-size:calc(34 * var(--u));color:#fff;line-height:1.1;margin-top:2px;white-space:nowrap} .buy-off{flex:none;background:var(--orange);color:#fff;font-family:var(--font);font-weight:700; font-size:calc(19 * var(--u));padding:calc(6 * var(--u)) calc(14 * var(--u));border-radius:999px;white-space:nowrap} .buy-save{font-style:italic;font-size:11px;line-height:1.25;color:#fff;opacity:.9;text-align:right; padding:0 calc(22 * var(--u)) calc(14 * var(--u))} .buy-panel{background:#fff;border-radius:calc(34 * var(--u));padding:calc(24 * var(--u)) calc(24 * var(--u)) calc(20 * var(--u))} .buy-row + .buy-row{margin-top:calc(18 * var(--u))} .buy-cap{display:block;font-weight:500;font-size:15px;color:#000} .buy-cap .req{font-style:normal;color:var(--orange)} .buy-chips{display:flex;gap:calc(10 * var(--u));margin-top:calc(10 * var(--u))} .buy-chips button{font-weight:500;font-size:15px;padding:calc(10 * var(--u)) calc(20 * var(--u)); border-radius:999px;background:#fff;border:1.5px solid var(--line);color:#000;transition:all .18s} .buy-chips button.on{background:var(--yellow-2);border-color:var(--yellow-2);color:#000;font-weight:700} .buy-select{position:relative;margin-top:calc(10 * var(--u))} .buy-select select{width:100%;appearance:none;-webkit-appearance:none;background:#fff;border:1.5px solid var(--line); border-radius:calc(14 * var(--u));padding:calc(12 * var(--u)) calc(38 * var(--u)) calc(12 * var(--u)) calc(16 * var(--u)); font-family:var(--font-ui);font-weight:500;font-size:15px;color:#000;cursor:pointer} .buy-select select:focus{outline:none;border-color:var(--green-brand)} .buy-select svg{position:absolute;right:calc(16 * var(--u));top:50%;transform:translateY(-50%);color:#000;pointer-events:none} .buy-actions{display:flex;align-items:center;gap:calc(12 * var(--u));margin-top:calc(20 * var(--u))} .buy-qty{display:flex;align-items:center;gap:calc(6 * var(--u));border:1.5px solid var(--line); border-radius:calc(14 * var(--u));padding:calc(6 * var(--u)) calc(10 * var(--u));flex:none} .buy-qty button{width:calc(28 * var(--u));height:calc(28 * var(--u));border-radius:50%;font-size:calc(20 * var(--u)); line-height:1;color:var(--green-deep-2);transition:background .15s} .buy-qty button:hover{background:var(--green-pale)} .buy-qty span{min-width:calc(22 * var(--u));text-align:center;font-weight:500;font-size:calc(18 * var(--u))} .buy-cta{flex:1;justify-content:center;border-radius:calc(14 * var(--u));padding:calc(14 * var(--u)) calc(16 * var(--u))} .buy-cta.is-added{background:var(--green)} .buy-note{list-style:none;margin-top:calc(16 * var(--u));display:flex;flex-direction:column;gap:3px} .buy-note li{font-style:italic;font-size:11px;line-height:1.35;color:#000;opacity:.75} .buy-note li::before{content:'— ';opacity:.6} @media(max-width:1099px){ .pdp-grid{grid-template-columns:1fr} .pdp-photo{order:-1} .pdp-pack{max-width:min(100%,420px)} .pdp-name{font-size:clamp(34px,7vw,56px)} .pdp-buy{max-width:420px} } /* --- выравнивание карточек «Хитов обжарки» --- Товары в каталоге заполнены по-разному: у кого-то нет фото, у кого-то описания или шкал. Чтобы карточки не разъезжались, место под картинку держим постоянным, а блок с ценой прижимаем к низу. */ /* В макете пачка занимает почти всю ширину карточки — держим место под неё постоянным и даём картинке заполнить его. */ .pcard .pimg{display:flex;align-items:center;justify-content:center; min-height:calc(268 * var(--u));padding:calc(6 * var(--u)) 0} .pcard .pimg img{max-height:calc(268 * var(--u));max-width:100%;width:auto;object-fit:contain} .pcard .pimg.is-empty{background:var(--bg-soft);border-radius:24px} .pcard .pdesc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .pcard .pbuy{margin-top:auto;padding-top:16px} .pcard h3{min-height:calc(52 * var(--u))} .pcard .scales4 .nm-text{font-weight:700;color:var(--green-brand);white-space:nowrap} /* Ссылка внутри заголовка карточки не должна перекрашиваться темой. */ .pcard h3 a{color:inherit;text-decoration:none} .pcard h3 a:hover{color:var(--green-brand)} .pcard .pimg{text-decoration:none} /* Карточка покупки на детальной: кнопка вылезала за пределы зелёной плашки, потому что строка с количеством и кнопкой не переносилась. */ .pdp-buy .buy-actions{display:flex;flex-wrap:wrap;gap:calc(12 * var(--u));align-items:center} .pdp-buy .buy-cta{flex:1 1 auto;justify-content:center;min-width:calc(150 * var(--u))} .pdp-buy .buy-qty{flex:0 0 auto} .pdp-buy .buy-panel,.pdp-buy .buy-top{box-sizing:border-box} .pdp-brew span{display:block} /* Карточки в списке каталога: сетка там от темы (row-cols), поэтому растягиваем ячейку и саму карточку, иначе они разной высоты. */ /* Ячейка списка каталога. height:100% ставить НЕЛЬЗЯ: заданная высота отменяет растягивание по ряду, и карточки выходят разной длины. Достаточно сделать ячейку флекс-контейнером — она сама займёт высоту ряда, а карточка внутри растянется. */ .pgrid-cell{display:flex} .pgrid-cell > .pcard{width:100%} .pcard .pw{margin-top:auto} /* ================= правки по замечаниям ================= */ /* 1. Поиск занимал 688px, дальше до иконок оставалось 125px пустоты. На широких экранах снимаем потолок — поле дотягивается до иконок. */ @media(min-width:1101px){ .hd-search{max-width:none} } /* 2. Бегущая строка шла внутри контентной колонки. В макете она во всю ширину экрана. */ .ticker-wrap{width:100vw;margin-left:calc(50% - 50vw);max-width:100vw} /* 3. Аккордеон карточек входа раскрывался рывком: правило появления .rv из home.css перебивало переход flex-grow, потому что идёт позже и имеет ту же силу. Возвращаем оба перехода вместе. */ @media(min-width:1000px) and (hover:hover){ .entries .entry.rv{ transition:flex-grow .8s cubic-bezier(.3,.7,.2,1), filter .5s ease, box-shadow .45s ease, opacity .7s var(--ease), transform .7s var(--ease)} } /* 4. Карточка товара расползалась по высоте: два блока разом тянулись вниз через margin-top:auto и растягивали пустоту между шкалами и ценой. Тянем только фасовки, остальное идёт следом. */ .pcard .pw{margin-top:auto;margin-bottom:calc(14 * var(--u))} .pcard .pbuy{margin-top:0;padding-top:0} .pcard .scales4{margin-top:calc(14 * var(--u))} .pcard h3{min-height:0;margin-bottom:calc(6 * var(--u))} .pcard .pdesc{margin-top:calc(6 * var(--u))} /* ---------- кнопки в карточке товара, по макету ---------- Кнопки веса — полные пилюли, а не прямоугольники со скруглением; выбранная залита тёмно-зелёным, остальные белые с обводкой. «В корзину» — скруглённый прямоугольник, чуть просторнее. */ .pcard .pw{gap:calc(10 * var(--u))} .pcard .pw button{ border-radius:999px; padding:calc(10 * var(--u)) calc(22 * var(--u)); font-size:calc(16 * var(--u)); border-width:calc(2 * var(--u)); line-height:1} /* «В корзину» — та же рисованная фигура, что у кнопки «Меню», только бордовая. Ровный прямоугольник со скруглением макету не соответствует. */ .pcard .pbtn{ padding:0 calc(24 * var(--u)); font-size:calc(16 * var(--u)); gap:calc(10 * var(--u))} /* На детальной кнопка покупки той же формы. */ .pdp-buy .buy-cta{ background:url(img/btn-cart.svg?v=1) no-repeat center/100% 100%; border-radius:0} .pdp-buy .buy-cta:hover{filter:brightness(1.08)} .pcard .pprice{font-size:calc(24 * var(--u))} .pcard .pprice small{font-size:calc(15 * var(--u))} /* ---------- страницы документов (политика, оферта) ---------- Текст приходит из Битрикса обычными

,

,