/* Serikov Coffee 2026 — шапка и подвал. Выборка из прототипа: переменные масштаба, шрифты, контейнер .mac, шапка .site-head/.hd-* и подвал .site-foot/.ft-*. Общих селекторов по тегам, кроме html/body, здесь нет — Bootstrap сайта не задевается. */ @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} :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; --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; /* Единый масштаб макета. Крупнее/мельче — меняется здесь одним числом. */ --u: clamp(.70px, min(.0576vw, .1005vh), 1.085px); /* Ширина контентной колонки. Хотите уже поля по бокам — увеличьте число. 1640 при масштабе .8 даёт колонку 1312px. */ --wrap-w: calc(1640 * var(--u)); } 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} @keyframes mmIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}} /* --- совместимость с Bootstrap рабочего сайта --- */ .site-head a,.site-foot a,.hd-drop a,.fab{text-decoration:none} .site-head a:hover,.site-foot a:hover,.hd-drop a:hover{text-decoration:none} .hd-cat{border:0;cursor:pointer;padding:0;-webkit-appearance:none;appearance:none} .ft-col{padding-left:0;margin-bottom:0} .site-head *,.site-foot *,.hd-drop *{box-sizing:border-box} .site-foot p{margin:0} /* --- шапка --- */ #site-header{position:sticky;top:0;z-index:100} /* В макете шапка — простая белая полоса высотой 83: ряд стоит на 19-й строке и сам высотой 64. Ни скругления, ни рамки, ни тени, ни матового стекла — всё это было отсебятиной. */ .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{box-shadow:0 6px 18px rgba(20,40,20,.10)} .site-head.is-stuck .head-inner::before{background:rgba(255,255,255,.78)} @media(prefers-reduced-motion:reduce){.site-head{transition:none}} .head-plate{max-width:var(--wrap-w);margin:0 auto;padding:0 calc(40 * 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} /* Матовое стекло — отдельным слоем под плашкой, а не на ней самой. Если backdrop-filter стоит на родителе выпадающего меню, Chrome рисует это меню полупрозрачным и сквозь него видно баннер. */ .head-inner::before{content:none;position:absolute;inset:0;z-index:-1;border-radius:inherit; background:rgba(255,255,255,.62);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%)} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.head-inner::before{background:#fff}} @media(max-width:1100px){.head-plate{padding:0 16px}.head-inner{height:auto;padding:10px 14px;flex-wrap:wrap}} .hd-logo{flex-shrink:0;display:block;line-height:0;margin-right:0} .hd-logo img{width:calc(152 * var(--u));height:auto;max-height:calc(77 * 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(178 * var(--u));height:calc(54 * var(--u));background:url(img/hd-shape-btn.svg?v=2) no-repeat center/100% 100%; color:#fff;font-family:var(--font);font-weight:500;font-size:calc(20 * var(--u));letter-spacing:0; 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;margin-right:calc(20 * var(--u))} .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)} .hd-drop[hidden]{display:none} /* ---- Меню «Каталог»: выпадающие списки (17.09.2026) ---- Герман: «некрасиво расположено всё; сделай выпадающие списки, и чтобы первый список был открыт при нажатии, сворачивался при переходе на другой». Раньше группы стояли плоскими колонками во всю ширину шапки. Теперь группа — кнопка-заголовок со стрелкой и пункты под ней; открыта одна, при открытии меню — первая («Кофе»). Разметка — шаблон sc2026.mega и header.php, поведение — site-hf.js. Кадра этого меню в макете нет (слово «Каталог» в Figma только на кнопке в шапках кадров), поэтому вид собран из того, что на сайте уже есть: заголовок со стрелкой — как у аккордеона мобильного подвала, шрифт и цвета — как у прежних колонок меню. РАСКЛАДКА — одна колонка в компактной панели под кнопкой. Не колонки во всю шапку и не «заголовки слева, пункты справа», потому что: • так и выглядит выпадающий список: пункты открываются под своим заголовком, как просил Герман; • раскладка и поведение одни на 1440, на 1024 и в бургере телефона; • «слева заголовки — справа пункты» на десктопе переключают наведением, и курсор, идущий по диагонали к пунктам, цепляет соседнюю группу; • узкая панель не закрывает баннеры во всю ширину и помещается по высоте: пять заголовков и самая длинная группа (5 пунктов) — около 500px. Если окно ниже, у панели своя прокрутка (--hd-drop-max считает site-hf.js). Правила прежних колонок (.hd-drop-in, .hd-cat-cols, .hd-drop-side, .hd-drop-cap) остались в site.css, но таких классов в разметке больше нет. Размеры: кегли на --d (site.css) с нижней границей в пикселях — на 1024 --d упирается в минимум .68, и без границы пункты вышли бы по 11–12px. */ /* Приставка hd-dd-, а не hd-acc-: .hd-acc на сайте уже занят ссылкой «Войти / Кабинет» в шапке, и mobile/nav.js переносит в нижнюю панель первый .hd-acc на странице — при общем имени на телефоне туда уезжал весь список меню (поймано проверкой 17.09). */ .hd-dd{display:flex;flex-direction:column;padding:8px 0} /* Тонкая линия между группами, с полями как у текста. «~», а не «+»: между группами шаблона и группами из header.php стоит