/* ---------- Фирменный шрифт 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',system-ui,-apple-system,sans-serif; /* Обычный текст тем же Gotham Pro: в наборе дизайнера один шрифт, Geologica здесь была временной подменой. */ --font-ui:'Gotham Pro',system-ui,sans-serif; --font-display:'Gotham Pro',system-ui,sans-serif; --wrap:1280px; /* Единый масштаб макета. Макет нарисован под 1440 и на реальных экранах читается крупно, поэтому базовый коэффициент 0.9 и плавное уменьшение на узких окнах. Крупнее/мельче — меняется здесь одним числом. */ --u: clamp(.70px, min(.0576vw, .1005vh), 1.085px); /* Ширина контентной колонки. Хотите уже поля по бокам — увеличьте число. 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} /* Автозаполнение браузера (сохранённый пароль, почта) красило поле голубым прямоугольником поверх нарисованной фигуры (Герман 17.09.2026, вход). Цвет автозаполнения браузер ставит своим правилом с !important, и перебить его нельзя; зато можно бесконечно отложить его появление переходом. Текст оставляем цветом сайта. */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus, textarea:-webkit-autofill,select:-webkit-autofill{ -webkit-text-fill-color:var(--ink);caret-color:var(--ink); transition:background-color 0s 600000s,color 0s 600000s} input:autofill{transition:background-color 0s 600000s,color 0s 600000s} .wrap{max-width:var(--wrap-w);margin:0 auto;padding:0 16px;width:100%} @media(min-width:768px){.wrap{padding:0 28px}} /* Фокус. Ссылкам в тексте — кольцо в цвет сайта. Полям, спискам и кнопкам прямоугольной обводки НЕТ никогда, ни по щелчку, ни с клавиатуры (правило «без обводки», BRAND-RULES §3.2): у них фигура нарисована фоном со скосом, и прямоугольник outline вставал вокруг неё вторым контуром (Герман 16.09.2026, поле помола в каталоге). Фокус с клавиатуры показывает свечение по силуэту: drop-shadow повторяет нарисованную форму, а не прямоугольник коробки. Ссылки, которые выглядят кнопками (.pbtn-*, значки шапки, пагинация, переключатель документов), переведены на то же свечение своими правилами. */ a:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:6px} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:none;filter:drop-shadow(0 0 3px var(--green-brand))} /* Щелчок мышью — никакого отклика вокруг поля (Герман 17.09.2026, поле помола: «Тут тень»). Chrome ставит :focus-visible списку и полю ввода и при щелчке, поэтому свечение выглядело тенью. Свечение показываем только при работе с клавиатуры: класс sc-kbd на ставит site-hf.js по Tab и стрелкам и снимает при нажатии мышью или пальцем. Кнопки и ссылки (22.09.2026). Считалось, что им браузер :focus-visible по щелчку не ставит, но на снимке Германа после щелчка по заголовку фильтра «Способ заваривания» (это кнопка) вокруг букв стоял зелёный ореол: браузер всё-таки ставит, когда фокус переводит скрипт раскрытия. Правило то же — при работе мышью и пальцем никакого свечения, у ссылок и прямоугольной рамки. */ html:not(.sc-kbd) input:focus-visible, html:not(.sc-kbd) select:focus-visible, html:not(.sc-kbd) textarea:focus-visible, html:not(.sc-kbd) button:focus-visible{filter:none!important;box-shadow:none!important} html:not(.sc-kbd) a:focus-visible{outline:none!important} @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} /* Шапка по макету: простая белая полоса. Ряд стоит на 19-й строке и сам высотой 64, поля 40 по бокам. Скруглённой плашки с матовым стеклом, рамкой и тенью в макете нет — это была отсебятина. Правила дублировались в site.css и site-hf.css: я поправил только второй файл, и ничего не изменилось, потому что site.css идёт следом и перебивал. Здесь оставлена одна версия. */ .site-head{background:#fff;padding:calc(19 * var(--u)) 0 0;will-change:transform;transition:transform .42s var(--ease),box-shadow .3s ease} .site-head.is-hidden{transform:translateY(-102%)} /* Прилипшая шапка: полупрозрачная с размытием. В покое, наверху страницы, она сплошная белая — как в макете; полупрозрачной становится только когда возвращается при прокрутке вверх посреди страницы, чтобы не закрывать содержимое глухой плашкой. */ .site-head.is-stuck{background:rgba(255,255,255,.82); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%); box-shadow:0 6px 18px rgba(20,40,20,.10)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ .site-head.is-stuck{background:rgba(255,255,255,.96)}} @media(prefers-reduced-motion:reduce){.site-head{transition:none}} .head-plate{max-width:var(--wrap-w);margin:0 auto;padding:0 calc(48 * var(--u))} .head-inner{position:relative;height:calc(64 * var(--u));display:flex;align-items:center; gap:calc(40 * var(--u));padding:0;border-radius:0;border:0;box-shadow:none;background:none} @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} /* Цифра стоит у самого значка, а не у правого края столбца: столбец шире значка на всю подпись, и от «right» цифра уезжала к «Корзине». В макете она в 3,5 правее значка и на 6 выше его верхнего края. */ .hd-ico .cnt{position:absolute;top:calc(-6 * var(--u));left:calc(50% + 12 * var(--u));right:auto; font-family:var(--font);font-weight:900;font-size:calc(15 * var(--u));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; 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} /* Переключатель документов «Политика / Оферта / Доставка / Возврат». Герман 16.09.2026, снимок «кнопки не той формы»: стояли скруглённые пилюли (серые, активная зелёная). Правило сайта — все кнопки фирменной формы (BRAND-RULES §3.1): активная — заливка как у .pbtn-green, остальные — контур как у .pbtn-line. Классы .pbtn-* на ссылки не вешаем: это правило (.doc-nav a, вес (0,1,1)) перебило бы их подложку, поэтому фигура нарисована здесь целиком — один раз на все четыре страницы (разметка у них одинаковая, стилей на страницах нет). Ряд переключателей — рост 40 из набора kit/cap40-* (колпачок 0,56265 и линия 0,05 роста), как у сортировки каталога (catalog-sort.css §1.1): у выбранной и невыбранной кнопки один силуэт и одна толщина линии, разница только заливкой — «ровно» по §3.2. На телефон переносится сам: у ряда flex-wrap, кнопки не ужимаются. */ .doc-nav{display:flex;flex-wrap:wrap;align-items:center;gap:calc(10 * var(--u));margin-bottom:calc(30 * var(--u))} .doc-nav a{ --btn-h:calc(40 * var(--u)); --cap:calc(var(--btn-h) * 0.56265); /* 22,506 / 40 */ --line-h:calc(var(--btn-h) * 0.05); /* обводка 2 при высоте 40 */ display:inline-flex;align-items:center;justify-content:center; min-height:var(--btn-h);min-width:calc(56 * var(--u));padding:0 calc(20 * var(--u)); border:0;border-radius:0;white-space:nowrap;text-decoration:none; font-family:var(--font);font-weight:500;font-size:calc(15 * var(--u));line-height:1.15; color:var(--green-deep-2);background-color:transparent; background-repeat:no-repeat; /* Белая середина — пятым слоем только между колпачками (+2px на их белые полоски), не background-color на всю коробку: иначе углы за дугами — белый прямоугольник, по которому пошли бы и затемнение при наведении, и свечение фокуса. Слой последний — под остальными. */ background-image:url(img/kit/cap40-line-l.svg),url(img/kit/cap40-line-r.svg), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(var(--green-brand),var(--green-brand)), linear-gradient(#fff,#fff); background-position:left center,right center,center top,center bottom,center; background-size:auto 100%,auto 100%, calc(100% - 2 * var(--cap)) var(--line-h), calc(100% - 2 * var(--cap)) var(--line-h), calc(100% - 2 * var(--cap) + 2px) 100%; transition:filter .2s,transform .2s} /* Наведение не меняет фигуру — только яркость и подъём, как у .pbtn-*. Тень под кнопкой не рисуем: box-shadow идёт по прямоугольнику коробки, а не по скосу. */ .doc-nav a:hover{filter:brightness(1.06);transform:translateY(-2px)} /* Открытый документ — тот же силуэт заливкой: залитый близнец колпачка cap-tag-green-*. +2px у середины закрывают шов между заливками. Это отметка «вы здесь», не ссылка куда-то: подъём ему не нужен. */ .doc-nav a.on{color:#fff;cursor:default; background-image:url(img/cap-tag-green-l.svg),url(img/cap-tag-green-r.svg), linear-gradient(var(--green-brand),var(--green-brand)); background-position:left center,right center,center; background-size:auto 100%,auto 100%,calc(100% - 2 * var(--cap) + 2px) 100%} .doc-nav a.on:hover{filter:none;transform:none} /* Телефон: --u упирается в нижний предел 0,70px, и рост 40·--u дал бы 28px. Числа в пикселях, как во всём слое mobile/ (условие — его же): рост 44 под палец, колпачок и линия считаются от --btn-h сами. */ @media (max-width:767px), (max-width:1023px) and (max-height:520px){ .doc-nav{gap:8px;margin-bottom:20px} .doc-nav a{--btn-h:44px;min-height:44px;padding:0 16px;font-size:15px} } /* ---------- Появление блоков ---------- */ .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), поэтому картинка ложится без обрезки на любой ширине. Ничего не теряется — но и на телефоне баннер остаётся широкой полосой: под мобильные нужны свои версии, они запрошены у заказчика. ------------------------------------------------------------------------ */ /* Баннер — та же окантовка, что у карточек: рамка 4 px, скругление 32. */ .hero-b{position:relative;padding:0;margin-top:8px;border-radius:calc(32 * var(--u));overflow:hidden; background:var(--green-brand);isolation:isolate} /* У баннера рваный край и никакой линии: обрезаем сам элемент по силуэту, и картинка кончается по рисованной кромке. */ /* РАЗМЕР БАННЕРА ЗАФИКСИРОВАН: 2560×800, пропорция 3.2:1. Картинка другой пропорции обрежется по центру — намеренно, чтобы ошибка в размерах была видна сразу и её починили в макете, а не подгоняли вёрсткой. Нужны две версии: десктоп 2560×800 и мобильная 1080×1080, вторая пока не сделана. */ /* Пропорция из макета: Frame 490 — 1360×320, то есть 4,25:1. Было 2560×800 (3,2:1), и баннер выходил заметно выше, чем нарисовано. Готовые баннеры бренда сделаны под 3,2:1, поэтому теперь они немного подрезаются сверху и снизу — нужны версии под 1360×320. */ .hero-track{position:relative;aspect-ratio:1360 / 320} .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} /* Стрелки из макета: тонкие уголки 14×16 без круглой подложки, слева на 30 от края. Было — серые полупрозрачные кружки 44×44. */ .hero-nav{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%); display:flex;justify-content:space-between;padding:0 calc(30 * var(--u));z-index:8; pointer-events:none} .hero-nav button{width:calc(14 * var(--u));height:calc(16 * var(--u));border-radius:0; background:no-repeat center/100% 100%; pointer-events:auto;cursor:pointer;border:0;opacity:.9;font-size:0; transition:opacity .2s,transform .2s} .hero-nav button:first-child{background-image:url(img/hero-arr-l.svg)} .hero-nav button:last-child{background-image:url(img/hero-arr-r.svg)} .hero-nav button svg{display:none} .hero-nav button:hover{opacity:1;transform:scale(1.12)} .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:2 / 1} .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}} /* Пропорция и окантовка — из макета: 325×388. Рамка НЕ css-бордюр: в макете это рисованная от руки линия, она гуляет и меняет толщину. Ровная рамка сразу выдаёт подделку, поэтому контур вынесен в SVG (путь на 980 узлов, выгружен из Figma) и кладётся поверх карточки. Скругление у самой карточки оставлено только чтобы обрезать фотографию внутри. */ .entry{position:relative;aspect-ratio:325/388;min-height:300px;border-radius:calc(32 * var(--u)); border:0;background:#fff;overflow:hidden; display:block;padding:calc(30 * var(--u));transition:transform .4s var(--ease),box-shadow .4s ease} .entry:hover{transform:translateY(-6px)} .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:900;text-transform:uppercase; font-size:calc(24 * var(--u));line-height:1.1;letter-spacing:0;color:var(--green-brand); max-width:calc(147 * var(--u))} .entry ul{list-style:none;margin-top:calc(16 * var(--u));position:relative;z-index:3} .entry li{font-family:var(--font-ui);font-weight:400;font-size:calc(14 * var(--u));line-height:1.3; display:flex;gap:calc(5 * var(--u));align-items:baseline;margin-bottom:calc(4 * var(--u));color:#000} /* Маркер — треугольник из макета, а не точка. */ .entry li::before{content:'\25B8';font-family:var(--font);font-weight:700;flex:none; width:auto;height:auto;border-radius:0;background:none;transform:none} .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)} /* Посадка фотографий — из макета, проценты от карточки 325×388. Считано по прямоугольникам самих снимков: Для дома −23 / 184, 371×220 Для бизнеса −7 / 154, 335×253 Подбор кофе −2 / 139, 334×297 Наши точки −13 / 156, 351×249 Раньше значения были от другой сетки (322×400) и с другими снимками, поэтому фотографии стояли вразнобой. */ .e-home .pic{left:-7.08%;top:47.42%;width:114.15%} .e-biz .pic{left:-2.15%;top:39.69%;width:103.08%} .e-quiz .pic{left:-0.62%;top:35.82%;width:102.77%} .e-where .pic{left:-4.04%;top:40.21%;width:108.08%} /* Плитки по макету: не сплошная заливка, а белая карточка с фирменной зелёной окантовкой — так теперь оформлены все карточки и секции. Цветные классы оставляем в разметке, чтобы не переписывать страницу. */ .e-biz,.e-home,.e-quiz,.e-where{background:#fff;color:#000} /* Круглая зелёная стрелка в правом верхнем углу — она есть у каждой плитки. */ .entry::after{content:'';position:absolute;right:calc(30 * var(--u));top:calc(30 * var(--u)); width:calc(52 * var(--u));height:calc(52 * var(--u));z-index:4;pointer-events:none; background:url(img/btn-arrow-green.svg) no-repeat center/100% 100%} /* Выезжающая подпись при наведении: в макете её нет. */ .entry .more{display:none} /* выезжающая подпись — по умолчанию скрыта */ .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} .entries > .entry{flex:1 1 0;min-width:0; transition:flex-grow .7s cubic-bezier(.3,.7,.2,1),filter .45s ease} .entry:hover{transform:none} /* Разъезд заметный: наведённая почти вдвое шире соседней, остальные уходят на второй план цветом и кеглем заголовка. */ .entries:hover .entry{flex-grow:.78} .entries .entry:hover{flex-grow:2.1;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)} .entries:hover .entry:not(:hover) h3{font-size:calc(21 * var(--d))} .entries .entry:hover h3{font-size:calc(32 * var(--d))} /* Список у поджатых мешает читать заголовок — притухает. */ .entry ul{transition:opacity .35s ease} .entries:hover .entry:not(:hover) ul{opacity:.35} /* Единственное, чего в разъезде быть не должно, — увеличение самого снимка. Заказчик: «картинка внутри карточек должна съезжать без увеличения». Поэтому наведённая двигает снимок вправо, а поджатые оставляют его на месте. */ .entry .pic{transition:transform .5s var(--ease)} .entries .entry:hover .pic{transform:translateX(-44%)} .entries:hover .entry:not(:hover) .pic{transform:translateX(-50%)} .entry .orn{transition:opacity .35s ease} .entries:hover .entry:not(:hover) .orn{opacity:.5} } /* ---------- бегущая строка (макет: 1985×73, наклон 1,72°) ---------- */ .ticker-wrap{overflow:hidden;margin-top:44px;padding:16px 0} /* Наклон и вылет за края — из макета, а не на глаз. Frame 215 стоит на x=-315 при холсте 1440 и имеет размер 1986×107,63. Отсюда: ширина 137,91 % холста, сдвиг влево 21,88 %, а угол считается из габаритов — верхняя грань поднимается к правому краю на 0,975°. Толщина самой ленты при этом 73,8. Стояло −1,72° и 124 % — лента была круче и уже. */ /* Заливку и рваные края рисует wavy.js — как у верхней полосы. */ .ticker{background:none !important;color:#fff;height:calc(74 * var(--u)); display:flex;align-items:center;overflow:hidden; width:137.91%;margin-left:-21.88%;transform:rotate(-0.975deg)} .ticker-t{position:relative;z-index:1;display:flex;white-space:nowrap;width:max-content;animation:tick 38s linear infinite} .ticker-t span{font-family:var(--font);font-weight:900;font-size:calc(24 * var(--u));text-transform:uppercase;padding:0 20px} /* Звёздочки-разделители в макете жёлтые, а не белые. */ .ticker-t i{color:#fdb913;font-style:normal} @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}} /* ---------- ХИТЫ ОБЖАРКИ ---------- В макете заголовок слева, кнопка «Весь каталог» справа: H1 40 с зелёным вторым словом, подпись 14 под ним, кнопка 224×54 фирменной формы. */ .hits{padding-top:70px;padding-bottom:20px} .hits-head{display:flex;align-items:center;justify-content:space-between; gap:calc(32 * var(--u));flex-wrap:wrap;margin-bottom:calc(44 * var(--u))} .hits-ttl{flex:1 1 auto;min-width:calc(325 * var(--u))} .hits-ttl h2{font-family:var(--font);font-weight:900;text-transform:uppercase; font-size:calc(40 * var(--u));line-height:1.1;letter-spacing:0} .hits-ttl h2 em{font-style:normal;color:var(--green-brand)} .hits-ttl p{margin-top:calc(12 * var(--u));font-family:var(--font-ui);font-weight:400; font-size:calc(14 * var(--u));line-height:1.3;color:#000;max-width:calc(325 * var(--u))} /* Кнопка отличается от прочих .pbtn-green только ростом и кеглем: в макете это H3 Medium 20 в фигуре высотой 54, а не жирный 16 в фигуре 52. */ .hits-all{--btn-h:calc(54 * var(--u));font-weight:500;font-size:calc(20 * var(--u)); gap:calc(10 * var(--u));text-transform:none} /* Уголок из макета: нарисован от руки, поэтому картинкой, а не бордерами. В макете он повёрнут на 90°, файл лежит остриём вверх. */ .btn-arr{flex:none;width:calc(22 * var(--u));height:calc(22 * var(--u)); background:url(img/arr-white.svg) no-repeat center/100% 100%;transform:rotate(90deg)} @media(max-width:820px){.hits-ttl h2{font-size:calc(30 * var(--u))}.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}} /* Край карточки — сам рисованный контур, а не линия внутри прямоугольника: элемент обрезан по силуэту (подложка вместе со штрихами), поэтому белое поле кончается ровно там же, где кончается зелёная линия. Так же сделан рваный верх подвала. */ /* Карточка товара собрана одним блоком в конце файла, в единицах макета. */ /* ---------- ТЕСТ «Подберём кофе за минуту» ---------- Перенос 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} /* декор за карточками */ /* Декор теста описан в конце файла, в блоке про «Подберём кофе». */ /* сетка блока: 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} /* Раньше варианты стояли в три колонки и тянулись на всю высоту блока. Теперь это столбик карточек по 191 px — высоту задаёт содержимое, иначе сетка растягивала строки и рисованный контур смазывало. */ .qcards{display:grid;gap:calc(20 * var(--u));align-content:start;grid-auto-rows:min-content; 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} /* В макете варианты идут столбиком, а не в три колонки. */ /* Карточка ответа по макету (907×191): белая, в столбик, рисованный зелёный контур. Прежняя была цветной плиткой 325×400 с узором, номером и белой дугой — от этого не осталось ничего, поэтому блок переписан целиком, а лишние части разметки просто спрятаны. */ .qc{position:relative;display:flex;align-items:center;justify-content:space-between; gap:calc(20 * var(--u));text-align:left;width:100%; padding:calc(16 * var(--u)) calc(40 * var(--u)); min-height:calc(191 * var(--u));border-radius:calc(32 * var(--u));border:0; background:#fff; transition:transform .35s var(--ease)} .qc:hover{transform:translateY(-3px)} /* Узор, белая дуга и номер варианта — в макете их нет. */ .qc .qc-pat,.qc .qc-panel,.qc .qc-num{display:none} .qc .qc-ico{position:static;transform:none;width:calc(117 * var(--u));height:calc(117 * var(--u)); object-fit:contain;flex:none;z-index:2;transition:transform .45s var(--ease)} .qc:hover .qc-ico{transform:scale(1.06)} .qc .qc-txt{position:static;display:flex;flex-direction:column;justify-content:center; gap:calc(8 * var(--u));width:calc(178 * var(--u));flex:1 1 auto;z-index:5} .qc .qc-t{display:block;font-family:var(--font);font-weight:900;font-size:calc(24 * var(--u)); line-height:1.1;text-transform:uppercase;color:var(--green-brand)} .qc .qc-d{display:block;margin-top:0;font-family:var(--font-ui);font-weight:400; font-size:calc(14 * var(--u));line-height:1.3;color:#000} .qc .qc-go{position:static;flex:none;width:calc(52 * var(--u));height:calc(52 * var(--u)); border-radius:0;background:url(img/btn-arrow-green.svg) no-repeat center/100% 100%; display:block;z-index:5;transition:transform .25s var(--ease)} .qc .qc-go img{display:none} .qc:hover .qc-go{transform:translateX(4px)} .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}} /* Прежние мобильные правила подгоняли высокую цветную плитку: фиксировали высоту 348 и раскладывали номер, текст и стрелку по абсолютным отступам. Карточка теперь горизонтальная и высоту берёт из содержимого, поэтому от старых правил осталось только то, что к ней не относится. */ @media(max-width:759px){ .qc{padding:calc(14 * var(--u)) calc(18 * var(--u));gap:calc(14 * var(--u))} .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 («△ высота» и обработка) больше нет: высоту заказчик 15.09.2026 убрал со всего сайта, обработка стоит строкой .pdp-sub сразу под названием. Её правила удалены вместе с разметкой. Кегль описания — не меньше 15px, на широком экране растёт с макетом: «и всё сделать крупнее» (15.09.2026); все размеры «было / стало» — у правила .pdp-sub ниже. */ .pdp-desc{margin-top:calc(18 * var(--u));font-size:max(15px, calc(17 * var(--mp)));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:700;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))} /* «Вес пачки», «Помол»: было 15px, стало не меньше 15 и 17 · --mp (крупнее по просьбе заказчика 15.09.2026, см. .pdp-sub). */ .buy-cap{display:block;font-weight:500;font-size:max(15px, calc(17 * var(--mp)));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} /* Сноски под кнопкой: было 11px, стало 14 · --mp, не меньше 13px (15.09.2026). Порог 13, а не 12: на 1024–1366 --mp стоит на пороге, и без него сноски там были бы мельче, чем на телефоне и планшете (там 13px). */ .buy-note li{font-style:italic;font-size:max(13px, calc(14 * var(--mp)));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} } /* --- выравнивание карточек «Хитов обжарки» --- Товары в каталоге заполнены по-разному: у кого-то нет фото, у кого-то описания или шкал. Чтобы карточки не разъезжались, место под картинку держим постоянным, а блок с ценой прижимаем к низу. */ /* Карточка покупки на детальной: кнопка вылезала за пределы зелёной плашки, потому что строка с количеством и кнопкой не переносилась. */ .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)} } /* Кнопка покупки на детальной — той же рисованной формы. */ .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)} /* ---------- страницы документов (политика, оферта) ---------- Текст приходит из Битрикса обычными

,

,