/* catalog.css — публичная витрина каталога (модуль catalog). Дизайн-система KON (Inter, navy/blue/sky). Все акценты — через CSS-переменные; primary переопределяется из админки (settings primary_color). Деобфускация: НИКАКОЙ привязки к конкретному клиенту/бренду; гео/валюта — из настроек (см. catalog.js). */ :root { /* KOKUA · «Немецкий салон» — крем-бумага, натуральное дерево, один глубокий зелёный. primary переопределяется из админки (settings primary_color). */ --primary: #2f5233; /* глубокий зелёный — кнопки/ссылки/активное меню */ --primary-d: #24402a; /* hover/нажатие */ --primary-dd: #1b301f; /* самый тёмный зелёный: топбар, CTA-полоса */ --green-deep: #2f5233; --green-deep2: #3f6b4a; --wood: #b98a52; /* натуральное дерево (LIKEaBIKE) */ --wood-d: #8a6a3f; /* тёмное дерево: eyebrow, подписи, статусы */ --wood-l: #d9b98a; /* светлое дерево: акценты на тёмном фоне */ --ink: #3b382f; --ink2: #5c564a; --head: #232b1c; /* заголовки: глубже прежнего #29321f */ --muted: #8d8677; --line: #eae4d6; --line2: #dcd3bf; --hairline: rgba(59,50,32,.12); /* тонкие линии-паспарту */ --bg: #faf7f0; /* тёплый крем страницы */ --bg2: #f4efe3; --soft: #f1ebdc; /* подиум под картинки */ --paper: #fffdf7; /* тёплый белый карточек вместо холодного #fff */ --dark: #161d12; /* еловый чёрный: футер, оверлей модалки */ --cream-text: #efe9d8; /* текст на тёмном/зелёном */ --radius: 20px; --radius-sm: 13px; --radius-pill: 999px; /* пилюльные кнопки/капсулы */ --shadow-sm: 0 2px 10px rgba(59,50,32,.05); --shadow: 0 10px 30px rgba(59,50,32,.08); --shadow-lg: 0 22px 56px rgba(59,50,32,.12); --shadow-h: 0 14px 34px rgba(41,50,31,.12); /* hover-тень тише и теплее прежней */ --ring: 0 0 0 3px rgba(47,82,51,.14); /* focus-кольцо полей (графт из К2) */ --maxw: 1220px; /* Подложка карточки «шлифованный алюминий» под цвет рам KOKUA (17.07.2026, слово владельца). Тёплый champagne-silver (не холодный сине-серый) — вписан в кремово-древесную палитру. Слои: тёплый световой блик сверху → тонкое вертикальное «шлифованное» зерно → анизотропный диагональный отблеск листа металла. Средний тон: контраст и с тёмными (чёрные рамы), и со светлыми (серебристый алюминий) рамами — «инверсия субъекта». Фото кладём mix-blend-mode:multiply → белый/студийный фон растворяется, велосипед «стоит на алюминии». */ --metal: radial-gradient(140% 84% at 50% -12%, rgba(255,255,255,.55), rgba(255,255,255,0) 56%), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, rgba(92,86,74,.055) 1px 2px), linear-gradient(104deg, #d9d6ce 0%, #edece6 12%, #d2cfc6 27%, #e8e6df 41%, #cecabf 56%, #ecebe4 71%, #d5d2c9 85%, #e3e1d9 100%); --metal-edge: rgba(59,50,32,.10); --metal-hi: rgba(255,255,255,.55); /* ФОН ВСЕЙ СТРАНИЦЫ «алюминий под цвет рамы» (уточнение владельца 17.07: стрелка была на ОСНОВНОЙ фон сайта, а не подложку товара). Тише карточного --metal: то же тёплое серебро champagne, но низкоконтрастное вертикальное «шлифование», чтобы контент не спорил с текстурой. */ --pagebg-base: #e3e0d8; --pagebg: radial-gradient(130% 60% at 50% 0%, rgba(255,255,255,.42), rgba(255,255,255,0) 62%), repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, rgba(92,86,74,.04) 1px 2px), linear-gradient(180deg, #e7e4dc 0%, #e0ddd4 38%, #e5e2da 70%, #dedbd2 100%); } /* ── ТЁМНАЯ ТЕМА «графит-алюминий» (сравнительный вариант по слову владельца 17.07). Включение: (антифликер-скрипт в читает localStorage kokua-bg; серверный дефолт задаётся атрибутом в index.html). Откат: убрать атрибут — светлый алюминий; вернуть .bak-двойники — исходный кремовый. Подложки фото товара НАРОЧНО остаются светлым металлом (--metal не переопределяется): multiply-фото живут только на светлом. ── */ html[data-bg="dark"] { /* «JUMPER-BLACK» (слово владельца 18.07 ночь): стиль велосипеда jumper-black — угольно-чёрная рама + фирменный оранж KOKUA #f07c23 (снят пикселями с декалей фото) + серебро-алюминий в подложках товаров. Светлой темы НЕ касается. */ --bg: #161616; --bg2: #1c1c1c; --soft: #222220; --paper: #1b1b1a; --ink: #d9d4c8; --ink2: #b3ada1; --head: #f5892e; --muted: #8f887b; --line: #2b2b29; --line2: #3a3a37; --hairline: rgba(255,255,255,.09); --primary: #f07c23; --primary-d: #d96a15; --primary-dd: #191919; --green-deep: #f07c23; --green-deep2: #ff9a4d; --dark: #121212; --cream-text: #efe6d8; --wood: #b98a52; --wood-d: #f08a3a; --wood-l: #ffab66; --shadow-sm: 0 2px 10px rgba(0,0,0,.4); --shadow: 0 10px 30px rgba(0,0,0,.48); --shadow-lg: 0 22px 56px rgba(0,0,0,.55); --shadow-h: 0 14px 34px rgba(240,124,35,.16); --ring: 0 0 0 3px rgba(240,124,35,.3); --pagebg-base: #171717; --pagebg: radial-gradient(130% 60% at 50% 0%, rgba(255,255,255,.06), rgba(255,255,255,0) 60%), repeating-linear-gradient(90deg, rgba(255,255,255,.026) 0 1px, rgba(0,0,0,.16) 1px 2px), linear-gradient(180deg, #1d1d1d 0%, #151515 40%, #1a1a1a 75%, #131313 100%); } html[data-bg="dark"] a { color: var(--green-deep2); } html[data-bg="dark"] a:hover { color: #ffb87e; } /* панели/карточки на тёмном: чуть светлее фона, кромка светлая */ html[data-bg="dark"] .pcard, html[data-bg="dark"] .tile, html[data-bg="dark"] .uspcard, html[data-bg="dark"] .hero__panel { border-color: var(--line2); } /* hero-сцена: холмы и небо арки в сумерки, солнце → луна без multiply */ html[data-bg="dark"] .hero__arch::before { mix-blend-mode: normal; opacity: .88; background: #f07c23; } html[data-bg="dark"] .hero__hills path:nth-child(1) { fill: #262624; } html[data-bg="dark"] .hero__hills path:nth-child(2) { fill: #1f1f1d; opacity: .85; } html[data-bg="dark"] .hero__hills path:nth-child(3) { fill: #0f0f0e; opacity: .95; } html[data-bg="dark"] .hero__rail-mark, html[data-bg="dark"] .hero__rail-note { color: var(--wood-l); } /* бейджи/кнопки: зелёный оставляем фирменным — на тёмном он читается, текст кремовый */ html[data-bg="dark"] .agechip { background: #262a23; color: var(--ink); } html[data-bg="dark"] ::selection { background: #f07c23; color: #131313; } /* шапка: тёмное стекло вместо светлого (hardcoded rgba в .hdr) */ html[data-bg="dark"] .hdr { background: rgba(19,19,19,.92); border-bottom: 1px solid var(--line); } /* лесенка роста: фото-multiply живут только на светлом → на тёмном каждой ступени светлый алюминиевый «лайтбокс» */ html[data-bg="dark"] .ladder__ph { background: var(--metal); border-radius: 10px; padding: 8px; box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -1px 0 var(--metal-edge); } /* тёмная тема: подложки товаров — «шлифованный алюминий» (владелец 18.07: в тёмной металл ОСТАВИТЬ) */ html[data-bg="dark"] .pcard__imgwrap, html[data-bg="dark"] .tile__imgwrap, html[data-bg="dark"] [class*="pcard__imgwrap--"], html[data-bg="dark"] .pgal__main, html[data-bg="dark"] .pgal__th { background: var(--metal); box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -1px 0 var(--metal-edge); } /* топбар/CTA/футер: уголь вместо зелени, оранжевая кромка */ html[data-bg="dark"] .topbar { background: #151515; } html[data-bg="dark"] .cta-band { background: #1c1c1c; border-top: 2px solid rgba(240,124,35,.6); } html[data-bg="dark"] .ftr { background: #121212; border-top-color: #f07c23; } /* growthbar: риски и бегунок — оранж */ html[data-bg="dark"] .growthbar__tick { background: #f07c23; } html[data-bg="dark"] .growthbar__mark { color: #c9c2b4; } html[data-bg="dark"] .growthbar__mark.lit .growthbar__lbl, html[data-bg="dark"] .growthbar__mark:hover { color: #ff9a4d; } html[data-bg="dark"] .growthbar__rider svg, html[data-bg="dark"] .growthbar__rider .ic { stroke: #f07c23; } html[data-bg="dark"] .growthbar__note { color: #f0a35e; } html[data-bg="dark"] .agechip:hover { border-color: #f07c23; box-shadow: 0 0 0 1px #f07c23, var(--shadow-sm); color: #ff9a4d; } html[data-bg="dark"] .klogo__tagline { color: #ff9a4d; } html[data-bg="dark"] .badge .ic { stroke: #fff; } html[data-bg="dark"] .ftr__giant { -webkit-text-stroke-color: rgba(240,124,35,.28); } * { box-sizing: border-box; } html, body { margin: 0; } body { font-family: 'Rubik', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; color: var(--ink); background: var(--pagebg) var(--pagebg-base); /* алюминий страницы (слово владельца 17.07); фолбэк-цвет под градиентами */ line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--primary-d); text-decoration: none; transition: color .15s; } a:hover { color: var(--primary); } h1, h2, h3, h4 { color: var(--head); font-family: 'Cormorant', Georgia, serif; font-weight: 700; letter-spacing: -0.005em; } img { max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } .loading { padding: 90px 0; text-align: center; color: var(--muted); } /* ── Топ-полоса с контактами ───────────────────────────────────────────── */ .topbar { background: var(--primary-dd); color: var(--cream-text); font-size: 12.5px; letter-spacing: .02em; } /* 🌗 переключатель светлый/тёмный алюминий (сравнение вариантов фона, 17.07.2026) */ .bg-toggle { background: none; border: 1px solid rgba(239,233,216,.35); color: var(--cream-text); border-radius: 999px; font-size: 13px; line-height: 1; padding: 3px 9px; margin-left: 12px; cursor: pointer; transition: border-color .15s, transform .12s; } .bg-toggle:hover { border-color: rgba(239,233,216,.8); transform: translateY(-1px); } .topbar__in { display: flex; align-items: center; gap: 18px; min-height: 38px; flex-wrap: wrap; } .topbar a { color: #f2ecd9; } .topbar a:hover { color: #fff; } .topbar__sp { flex: 1; } /* ── Header (17.07.2026: одна аккуратная строка на всех ширинах) ───────── Десктоп: логотип · меню (nowrap) · лупа-поиск (раскрывается панелью) · телефон · RU-RO-EN · CTA. ≤1140 телефон прячется, ≤900 — бургер. */ .hdr { background: rgba(250,247,240,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; } .hdr__in { display: flex; align-items: center; gap: 14px; min-height: 72px; } .hdr__brand { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 22px; color: var(--head); flex-shrink: 0; } .hdr__brand:hover { color: var(--head); } .hdr__logo { display: block; height: 52px; width: auto; max-width: 170px; object-fit: contain; } .hdr__logo[hidden] { display: none; } .hdr__name { color: var(--head); font-family: 'Cormorant', Georgia, serif; font-weight: 600; font-size: 22px; letter-spacing: .01em; white-space: nowrap; } .nav { display: flex; gap: 2px; margin-left: 2px; flex: 1; min-width: 0; } .nav a { color: var(--ink); font-weight: 600; font-size: 14.5px; padding: 9px 11px; border-radius: 10px; white-space: nowrap; transition: background .15s, color .15s; position: relative; } .nav a:hover { color: var(--primary-d); background: var(--soft); } .nav a.on { color: var(--primary-d); font-weight: 700; } .nav a.on::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px; border-radius: 2px; background: var(--primary); } .hdr__phone { font-weight: 800; font-size: 15.5px; white-space: nowrap; color: var(--head); flex-shrink: 0; } .hdr__phone:hover { color: var(--primary-d); } .hdr__cta { display: inline-flex; align-items: center; background: var(--primary); color: #fff; font-weight: 600; font-size: 13.5px; padding: 10px 16px; border-radius: var(--radius-pill); white-space: nowrap; border: 0; cursor: pointer; letter-spacing: .02em; flex-shrink: 0; box-shadow: 0 4px 14px rgba(47,82,51,.22); transition: background .15s, transform .12s, box-shadow .15s; } .hdr__cta:hover { background: var(--primary-d); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px rgba(47,82,51,.34); } .hdr__burger { display: none; background: none; border: 0; font-size: 26px; cursor: pointer; color: var(--primary-d); } /* переключатель языков RU-RO-EN */ .lang-sw { display: inline-flex; align-items: center; gap: 1px; white-space: nowrap; flex-shrink: 0; } .lang-sw a { padding: 5px 7px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; color: var(--ink2); border-radius: 8px; } .lang-sw a:hover { background: var(--soft); color: var(--primary-d); } .lang-sw a[aria-current] { color: var(--primary-d); font-weight: 800; background: var(--soft); } /* мобильный «хвост» бургер-меню: телефон + CTA + языки (на десктопе скрыт) */ .nav__extra { display: none; } /* ── Поиск в шапке: всегда лупа, форма раскрывается панелью ─────────────── */ .search { position: relative; display: flex; align-items: center; flex-shrink: 0; } .search__toggle { display: flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--primary-d); padding: 8px; border-radius: 10px; transition: background .15s; } .search__toggle:hover { background: var(--soft); } .search__form { display: none; position: absolute; top: calc(100% + 16px); right: -6px; width: min(360px, calc(100vw - 40px)); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 10px; box-shadow: var(--shadow-lg); z-index: 55; align-items: center; } .search.open .search__form { display: flex; } .search__input { width: 100%; padding: 10px 38px 10px 14px; border: 1px solid var(--line2); border-radius: var(--radius-pill); font: inherit; font-size: 14px; background: var(--paper); transition: border-color .15s, box-shadow .15s, background .15s; } .search__input:focus { outline: none; background: var(--paper); border-color: var(--primary); box-shadow: var(--ring); } .search__submit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); background: none; border: 0; cursor: pointer; color: var(--muted); padding: 4px 6px; display: flex; align-items: center; } .search__submit:hover { color: var(--primary-d); } /* подсказки (autocomplete) */ .search__sugg { position: absolute; top: calc(100% + 8px); right: 0; left: 0; min-width: 300px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 50; overflow: hidden; max-height: 70vh; overflow-y: auto; } .search__sugg[hidden] { display: none; } .sugg__group-h { font-size: 11px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); font-weight: 700; padding: 9px 14px 4px; } .sugg__item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; color: var(--ink); border: 0; background: none; width: 100%; text-align: left; font: inherit; } .sugg__item:hover, .sugg__item.active { background: var(--soft); } .sugg__item img { width: 34px; height: 34px; object-fit: contain; border-radius: 7px; background: var(--soft); flex: 0 0 34px; } .sugg__item-ic { width: 34px; height: 34px; flex: 0 0 34px; display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--soft); border-radius: 7px; } .sugg__item-t { flex: 1; min-width: 0; font-size: 14px; } .sugg__item-t b { color: var(--head); display: block; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sugg__item-t small { color: var(--muted); font-size: 12px; } .sugg__item-p { font-weight: 800; color: var(--green-deep); font-size: 13.5px; white-space: nowrap; } .sugg__all { display: block; text-align: center; padding: 10px; font-weight: 700; color: var(--primary-d); border-top: 1px solid var(--line); background: var(--bg2); cursor: pointer; width: 100%; border: 0; font: inherit; } .sugg__all:hover { background: var(--soft); } .sugg__empty { padding: 16px 14px; color: var(--muted); font-size: 14px; } /* ── Кнопка корзины в шапке ─────────────────────────────────────────────── */ .hdr__cart { position: relative; background: none; border: 0; font-size: 23px; cursor: pointer; color: var(--green-deep); padding: 4px 6px; transition: transform .12s; } .hdr__cart:hover { transform: translateY(-1px); color: var(--primary-d); } .hdr__cart-cnt { position: absolute; top: -2px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(47,82,51,.4); } .hdr__cart-cnt[hidden] { display: none; } /* кнопка «В корзину» на карточках (компактная, в ряд с ценой/заказать) */ .pcard__buy { display: flex; gap: 6px; } .btn--cart { background: var(--soft); color: var(--primary-d); box-shadow: none; padding: 9px 12px; font-size: 13.5px; } .btn--cart:hover { background: #e9e0c9; color: var(--primary-dd); transform: none; box-shadow: none; } .btn--cart.added { background: var(--primary); color: #fff; } /* ── Страница/модалка корзины ──────────────────────────────────────────── */ /* box ограничен по высоте экрана, заголовок сверху, список товаров скроллится, «Итого» + форма + кнопки всегда видимы внизу (flex-колонка с min-height:0). */ .cartmodal__box { max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; } .cartmodal__box > h3 { flex: 0 0 auto; } #cartBody { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .cart-list { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; flex: 1 1 auto; min-height: 0; max-height: min(45vh, 360px); overflow-y: auto; padding-right: 4px; } .cart-total, #cartForm, .cart-empty { flex: 0 0 auto; } .cart-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); } .cart-item__img { width: 56px; height: 56px; object-fit: contain; border-radius: 9px; background: var(--soft); border: 1px solid var(--line); } .cart-item__noimg { width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--soft); border-radius: 9px; font-size: 22px; } .cart-item__main { min-width: 0; } .cart-item__name { font-weight: 700; font-size: 14px; color: var(--head); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-item__price { color: var(--green-deep); font-weight: 800; font-size: 13.5px; margin-top: 3px; } .cart-item__r { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .qty { display: flex; align-items: center; gap: 0; border: 1px solid var(--line2); border-radius: 9px; overflow: hidden; } .qty button { width: 30px; height: 30px; border: 0; background: var(--soft); cursor: pointer; font-size: 17px; color: var(--head); line-height: 1; } .qty button:hover { background: #ece4cf; color: var(--primary-d); } .qty input { width: 42px; height: 30px; border: 0; border-left: 1px solid var(--line2); border-right: 1px solid var(--line2); text-align: center; font: inherit; font-weight: 700; } .cart-item__del { background: none; border: 0; cursor: pointer; color: var(--muted); font-size: 16px; } .cart-item__del:hover { color: #c0392b; } .cart-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 4px; border-top: 1px solid var(--line); font-size: 16px; } .cart-total b { font-size: 22px; color: var(--green-deep); font-weight: 900; } .cart-empty { text-align: center; padding: 30px 10px; color: var(--muted); } .cart-empty .btn { margin-top: 14px; } /* ── Кнопки ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; border: 0; border-radius: var(--radius-pill); padding: 13px 26px; font-weight: 600; letter-spacing: .01em; cursor: pointer; font-size: 15px; transition: background .15s, transform .12s, box-shadow .15s, border-color .15s, color .15s; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--primary); color: #fff; box-shadow: 0 8px 20px rgba(47,82,51,.22); } .btn--primary:hover { background: var(--primary-d); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(47,82,51,.26); } .btn--light { background: #fff; color: var(--green-deep); } .btn--light:hover { background: var(--bg2); color: var(--green-deep); transform: translateY(-2px); } .btn--ghost { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.5); color: #fff; } .btn--ghost:hover { background: rgba(255,255,255,.24); color: #fff; } .btn--outline { background: #fff; border: 1px solid var(--line2); color: var(--ink); } .btn--outline:hover { border-color: var(--primary); color: var(--primary-d); } /* ── HERO (общий отступ; варианты — .hero--brand ниже, .hero--salon в конце файла) ── */ .hero { margin: 26px 0 8px; } /* ── Полоса доверия (преимущества) ─────────────────────────────────────── */ .feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .feat { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 20px; transition: transform .18s, box-shadow .18s, border-color .18s; } .feat:hover { transform: none; box-shadow: var(--shadow-sm); border-color: var(--line2); } .feat__i { width: 46px; height: 46px; border-radius: 999px; display: flex; align-items: center; justify-content: center; background: var(--soft); border: 1px solid var(--line2); margin-bottom: 12px; } .feat__i svg { width: 24px; height: 24px; stroke: var(--wood-d); } .feat__t { font-weight: 800; margin: 4px 0 5px; color: var(--head); font-size: 16px; } .feat__d { font-size: 13.5px; color: var(--ink2); } /* ── Section ────────────────────────────────────────────────────────────── */ .sec { margin: 56px 0; } .sec--tint { background: var(--bg2); padding: 56px 0; margin: 56px 0; } .sec--tint .wrap { padding: 0 20px; } .sec__h { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 26px; gap: 14px; flex-wrap: wrap; position: relative; padding-bottom: 18px; } /* вместо голого border — «след колёс» (.track из catalog.js) */ .sec__h h2 { margin: 0; font-size: clamp(26px, 3.2vw, 36px); position: relative; padding-left: 0; line-height: 1.15; } .sec__h h2::before { content: none; } .sec__h a { font-size: 14px; font-weight: 700; white-space: nowrap; } .sec__sub { color: var(--muted); margin: -12px 0 26px; max-width: 720px; font-size: 15.5px; } .crumbs { color: var(--muted); font-size: 14px; margin: 22px 0 10px; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--primary-d); } /* ── Сетки ──────────────────────────────────────────────────────────────── */ .grid { display: grid; gap: 18px; } .grid--cats { grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); } .grid--brands { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); } .grid--prods { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); } .grid--rel { grid-template-columns: repeat(4, 1fr); } /* ── Плитка категории ──────────────────────────────────────────────────── */ .tile { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: block; color: var(--ink); transition: box-shadow .2s, transform .2s, border-color .2s; } .tile:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); border-color: rgba(47,82,51,.30); color: var(--ink); } .tile__imgwrap { height: 170px; background: #fff; box-shadow: inset 0 -1px 0 var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; } .tile__img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; } .tile:hover .tile__img { transform: scale(1.04); } .tile__ph { font-size: 40px; color: #d8cbae; } .tile__b { padding: 15px 17px; } .tile__t { font-family: 'Cormorant', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--head); } .tile__d { color: var(--muted); font-size: 13px; margin-top: 5px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tile__go { color: var(--primary-d); font-size: 13px; font-weight: 700; margin-top: 9px; display: inline-flex; gap: 4px; transition: gap .15s; } .tile:hover .tile__go { gap: 8px; } /* ── Плитка бренда ─────────────────────────────────────────────────────── */ .brand-tile { position: relative; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; color: var(--head); display: flex; flex-direction: column; min-height: 140px; background: var(--paper); transition: box-shadow .2s, transform .2s, border-color .2s; } .brand-tile:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); border-color: rgba(47,82,51,.30); color: var(--head); } .brand-tile__media { flex: 1; display: flex; align-items: center; justify-content: center; padding: 18px 14px; min-height: 92px; background: linear-gradient(135deg, var(--paper), var(--soft)); } .brand-tile__logo { max-height: 56px; max-width: 90%; object-fit: contain; } .brand-tile__ph { width: 60px; height: 60px; border-radius: 16px; color: #fff; font-weight: 900; font-size: 26px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary), var(--green-deep)); box-shadow: 0 6px 14px rgba(47,82,51,.3); } .brand-tile__name { font-weight: 700; font-size: 14.5px; line-height: 1.2; text-align: center; padding: 11px 8px; border-top: 1px solid var(--line); background: var(--paper); } /* ── Карточка товара ───────────────────────────────────────────────────── */ .pcard { position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s, border-color .2s; } .pcard:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); border-color: rgba(47,82,51,.30); } .pcard__imgwrap { position: relative; height: 256px; background: #fff; box-shadow: inset 0 -1px 0 var(--line); display: flex; align-items: center; justify-content: center; padding: 12px; overflow: hidden; } /* «взлёт с постамента» (графт из К3): тень-пол под товаром/капсулой */ .pcard__imgwrap::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 13px; height: 12px; border-radius: 50%; background: radial-gradient(50% 100% at 50% 50%, rgba(59,50,32,.18), transparent 72%); transition: transform .45s cubic-bezier(.2,.6,.2,1), opacity .45s; } .pcard__img { max-width: 100%; max-height: 100%; object-fit: contain; position: relative; z-index: 1; transition: transform .45s cubic-bezier(.2,.6,.2,1); } .pcard:hover .pcard__imgwrap::after { transform: scaleX(.88); opacity: .7; } /* hover «ловит баланс»: лёгкое покачивание от заднего колеса (только при полном motion) */ @media (prefers-reduced-motion: no-preference) { @keyframes rock { from { transform: rotate(-1.2deg); } to { transform: rotate(.8deg); } } .pcard:hover .pcard__img { animation: rock .6s ease-in-out 2 alternate; transform-origin: 50% 100%; } } .pcard__noimg { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--wood-d); background: var(--paper); border: 1px solid var(--line2); border-radius: 999px; padding: 9px 16px; } .pcard__b { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; } .pcard__name { font-family: 'Cormorant', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--head); line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 44px; } .pcard__brand { color: var(--wood-d); font-size: 11px; font-weight: 600; margin: 7px 0 0; letter-spacing: .14em; text-transform: uppercase; } .pcard__descr { color: var(--muted); font-size: 12.5px; margin: 6px 0 0; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pcard__row { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; gap: 8px; } .pcard__price { font-weight: 900; font-size: 18px; color: var(--green-deep); white-space: nowrap; } .pcard__price small { color: var(--muted); font-weight: 600; font-size: 12px; } .pcard__nostock { color: var(--wood-d); font-size: 13px; font-weight: 700; } .pcard .btn { padding: 9px 16px; font-size: 13.5px; box-shadow: none; } .pcard .btn:hover { transform: none; } /* Бейджи хит/акция + старая цена */ .pcard__badges { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; flex-direction: column; gap: 5px; } .badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 800; padding: 5px 10px; border-radius: 30px; color: #fff; box-shadow: none; letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(250,247,240,.25); } .badge--hit { background: var(--primary-dd); } .badge--sale { background: #9c4a2f; } /* «под заказ» на карточке: спокойный деревянный, не тревожный */ .badge--order { background: #f4ead4; color: var(--wood-d); border-color: var(--line2); } .pcard__old { color: #9aa39a; text-decoration: line-through; font-size: 13px; margin-right: 2px; } /* ── Страница товара ───────────────────────────────────────────────────── */ .pview { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow); } .pview__info { min-width: 0; } /* галерея: главное фото (клик → лайтбокс) + миниатюры */ .pgal { min-width: 0; } .pgal__main { position: relative; background: #fff; border-radius: var(--radius-sm); height: 480px; display: flex; align-items: center; justify-content: center; padding: 24px; cursor: zoom-in; overflow: hidden; border: 1px solid var(--line); } .pgal__img { max-width: 100%; max-height: 100%; object-fit: contain; transition: opacity .16s ease, transform .5s cubic-bezier(.2,.6,.2,1); } .pgal__main:hover .pgal__img { transform: scale(1.03); } .pgal__thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; } .pgal__th { width: 74px; height: 74px; border-radius: 12px; border: 1px solid var(--line2); background: #fff; padding: 6px; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s; } .pgal__th:hover { transform: translateY(-2px); border-color: var(--primary); } .pgal__th.on { border-color: var(--primary); box-shadow: var(--ring); } .pgal__th img { width: 100%; height: 100%; object-fit: contain; display: block; } /* свотчи цветов модели */ .pswatch { margin: 12px 0 2px; } .pswatch__lbl { font-size: 13px; color: var(--muted); } .pswatch__lbl b { color: var(--head); font-weight: 700; text-transform: capitalize; } .pswatch__row { display: flex; gap: 10px; margin-top: 8px; flex-wrap: wrap; } .pswatch__dot { width: 36px; height: 36px; border-radius: 999px; border: 2px solid transparent; display: flex; align-items: center; justify-content: center; transition: transform .12s, border-color .15s; } .pswatch__dot span { width: 25px; height: 25px; border-radius: 999px; display: block; border: 1px solid rgba(35,43,28,.18); } .pswatch__dot:hover { transform: translateY(-2px); border-color: var(--line2); } .pswatch__dot.on { border-color: var(--primary); } /* «привезём под заказ» — тёплая деревянная плашка, без тревожности */ .pview__stock { margin: 8px 0 4px; } .pview__ordernote { margin: 4px 0 8px; font-size: 13.5px; color: var(--wood-d); background: #f6efdd; border: 1px solid var(--line2); border-radius: 10px; padding: 9px 13px; display: inline-block; } .pview h1 { margin: 0 0 10px; font-size: clamp(24px, 3vw, 30px); line-height: 1.2; } .pview__price { font-size: clamp(28px, 4vw, 34px); font-weight: 900; color: var(--green-deep); margin: 16px 0; } .pview__price s { color: var(--muted); font-size: 20px; font-weight: 600; margin-right: 10px; } .pview__desc { color: var(--ink2); white-space: pre-wrap; margin: 18px 0; font-size: 15.5px; } .pview__specs { width: 100%; border-collapse: collapse; margin: 16px 0; } .pview__specs td { padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--head); } .pview__specs td:first-child { width: 42%; color: var(--muted); } .pview__meta { color: var(--muted); font-size: 14px; margin: 5px 0; } .pview__badge { display: inline-block; font-size: 13px; font-weight: 700; padding: 5px 14px; border-radius: 30px; } .pview__badge.ok { background: #e9efe2; color: var(--primary-d); } .pview__badge.no { background: #f2ead7; color: var(--wood-d); } .pview__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; } .pview__actions .btn { padding: 14px 28px; } /* ── Статическая страница ──────────────────────────────────────────────── */ .page { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 38px; box-shadow: var(--shadow); } .page h1 { margin-top: 0; font-size: clamp(26px, 3.4vw, 34px); } .page p { margin: 0 0 14px; font-size: 15.5px; color: var(--ink2); } .page b { color: var(--head); } .page ul { padding-left: 22px; } .page li { margin-bottom: 8px; } /* ── Контакты ──────────────────────────────────────────────────────────── */ .contacts-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 30px; align-items: start; } .contact-cards { display: grid; gap: 14px; } .contact-card { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); transition: transform .18s, border-color .18s, box-shadow .18s; } .contact-card:hover { border-color: rgba(47,82,51,.45); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .cc-ic { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 22px; background: linear-gradient(135deg, rgba(47,82,51,.14), rgba(59,50,32,.10)); border: 1px solid rgba(47,82,51,.22); } .cc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .cc-h { font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); font-weight: 600; } .cc-v { font-size: 16.5px; color: var(--head); font-weight: 700; word-break: break-word; } .cc-v a { color: var(--head); } .cc-v a:hover { color: var(--primary-d); } .contact-map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); min-height: 440px; position: relative; display: flex; flex-direction: column; } .contact-map iframe { display: block; width: 100%; flex: 1; min-height: 380px; border: 0; } .contact-map__cap { padding: 14px 18px; background: var(--green-deep); color: var(--cream-text); font-size: 13.5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .contact-map__cap b { color: #fff; } .contact-map__pano { display: inline-flex; margin-top: 14px; } /* реквизиты */ .requisites { margin-top: 20px; padding: 18px 22px; background: linear-gradient(180deg, var(--bg2), #fff); border: 1px solid var(--line); border-radius: var(--radius); } .requisites h3 { margin: 0 0 8px; color: var(--green-deep); font-size: 16px; } .requisites p { margin: 0; font-size: 14px; color: var(--ink2); line-height: 1.7; } /* ── Контент-блок «фото + текст» (на главной) ──────────────────────────── */ .feature-rows { display: grid; gap: 22px; } .frow { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); } .frow.rev .frow__media { order: 2; } .frow__media { min-height: 280px; background-size: cover; background-position: center; background-color: var(--soft); } .frow__body { padding: 36px 40px; display: flex; flex-direction: column; justify-content: center; } .frow__eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--wood-d); margin-bottom: 10px; } .frow__body h3 { margin: 0 0 12px; font-size: clamp(21px, 2.6vw, 27px); line-height: 1.18; } .frow__body p { margin: 0 0 16px; color: var(--ink2); font-size: 15.5px; } .frow__body .btn { align-self: flex-start; } /* ── Инфо-блоки (оплата/доставка кратко) ───────────────────────────────── */ .cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .infobox { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); transition: transform .18s, box-shadow .18s, border-color .18s; } .infobox:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: rgba(47,82,51,.35); } .infobox h3 { margin: 0 0 12px; font-size: 20px; display: flex; align-items: center; gap: 10px; } .infobox p { margin: 0 0 8px; color: var(--ink2); font-size: 14.5px; } .infobox > a { font-weight: 700; font-size: 14px; display: inline-block; margin-top: 6px; } /* ── CTA-полоса ────────────────────────────────────────────────────────── */ .cta-band { position: relative; overflow: hidden; background: var(--primary-dd); color: #fff; border-radius: var(--radius); padding: 48px 40px; text-align: center; box-shadow: var(--shadow-lg); } .cta-band::before { content: ""; position: absolute; right: -60px; top: -70px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(185,138,82,.22), transparent 70%); } .cta-band h3 { color: #fff; margin: 0 0 10px; font-size: clamp(22px, 3vw, 28px); position: relative; } .cta-band p { color: var(--cream-text); margin: 0 0 22px; max-width: 640px; margin-left: auto; margin-right: auto; position: relative; } /* ── Footer ────────────────────────────────────────────────────────────── */ .ftr { background: var(--dark); color: #c9c3b1; margin-top: 64px; padding: 52px 0 24px; border-top: 6px solid var(--wood); } .ftr__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 38px; } .ftr h4 { color: var(--cream-text); margin: 0 0 14px; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; } .ftr a { color: #c9c3b1; display: block; margin: 6px 0; } .ftr a:hover { color: var(--wood-l); } .ftr__logo { height: 64px; width: auto; margin-bottom: 10px; background: #fff; padding: 8px 12px; border-radius: 12px; } .ftr__brand { color: #fff; font-weight: 900; font-size: 21px; margin-bottom: 12px; } .ftr__about { font-size: 13.5px; color: #a8a291; line-height: 1.65; } .ftr__contacts div { margin: 6px 0; font-size: 14px; } .ftr__req { margin-top: 10px; opacity: .7; font-size: 12px; line-height: 1.5; } .ftr__copy { text-align: center; color: #8b8675; font-size: 13px; margin-top: 30px; border-top: 1px solid rgba(234,228,214,.12); padding-top: 20px; } /* ── Модалка ───────────────────────────────────────────────────────────── */ .modal { position: fixed; inset: 0; background: rgba(22,29,18,.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 16px; } .modal[hidden] { display: none; } .modal__box { background: var(--paper); border-radius: var(--radius); padding: 30px; max-width: 460px; width: 100%; position: relative; box-shadow: var(--shadow-lg); } .modal__x { position: absolute; top: 14px; right: 18px; border: 0; background: none; font-size: 26px; cursor: pointer; color: var(--muted); } .modal__x:hover { color: var(--head); } .modal h3 { margin: 0 0 6px; font-size: 23px; } .modal__hint { color: var(--muted); margin: 0 0 18px; font-size: 14px; } .modal__item { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 12px; } .modal__item img { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 9px; object-fit: contain; background: #fff; border: 1px solid var(--line); } .modal__item b { font-size: 14px; color: var(--head); line-height: 1.3; } .oform { display: flex; flex-direction: column; gap: 12px; } .oform input, .oform textarea { padding: 13px 15px; border: 1px solid var(--line2); border-radius: 11px; font: inherit; transition: border-color .15s, box-shadow .15s; } .oform input:focus, .oform textarea:focus { outline: none; border-color: var(--primary); box-shadow: var(--ring); } .oform textarea { min-height: 84px; resize: vertical; } .oform__msg { margin: 0; font-size: 14px; min-height: 18px; } .oform__msg.ok { color: var(--green-deep); font-weight: 600; } .oform__msg.err { color: #c0392b; } /* ── reveal-анимации ───────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.6,.2,1); } .reveal.in { opacity: 1; transform: none; } /* ── Адаптив ───────────────────────────────────────────────────────────── */ @media (max-width: 1140px) { /* телефон уходит из строки (остаётся в топбаре часов нет — он живёт в бургере на мобиле) */ .hdr__in > .hdr__phone { display: none; } .nav a { font-size: 14px; padding: 8px 9px; } } @media (max-width: 1000px) { .grid--rel { grid-template-columns: repeat(2, 1fr); } .frow { grid-template-columns: 1fr; } .frow.rev .frow__media { order: 0; } .frow__media { min-height: 220px; } .contacts-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { /* бургер: панель со ВСЕМИ пунктами + телефон + CTA + языки (.nav__extra) */ .nav { position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); flex-direction: column; padding: 10px 16px 16px; border-bottom: 1px solid var(--line); display: none; box-shadow: var(--shadow); max-height: calc(100vh - 110px); overflow-y: auto; } .nav.open { display: flex; } .nav > a { padding: 13px 10px; font-size: 15.5px; } .hdr__burger { display: block; } .hdr__in > .hdr__cta, .hdr__in > .lang-sw { display: none; } .nav__extra { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--line); } .nav__phone { font-weight: 800; font-size: 17px; color: var(--head); } .nav__cta { display: inline-flex; } .lang-sw--nav a { font-size: 14px; padding: 7px 12px; border: 1px solid var(--line2); margin-right: 6px; } .lang-sw--nav a[aria-current] { border-color: var(--primary); } /* поиск: лупа справа, при открытии — полноширинная панель под шапкой */ .search { position: static; margin-left: auto; } .search__form { top: 100%; left: 0; right: 0; width: auto; border-radius: 0; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line); } .search__sugg { left: 16px; right: 16px; min-width: 0; } .feats { grid-template-columns: 1fr 1fr; } .pview { grid-template-columns: 1fr; gap: 26px; padding: 20px; } .pgal__main { height: 340px; } .cols2 { grid-template-columns: 1fr; } .ftr__in { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .hdr__logo { height: 44px; max-width: 140px; } .hdr__in { gap: 10px; min-height: 60px; } .topbar__in { gap: 10px; font-size: 11.5px; min-height: 34px; } .topbar #tbMail { display: none; } /* почта не влезает — есть в подвале и контактах */ .pgal__main { height: 280px; padding: 16px; } .pgal__th { width: 60px; height: 60px; } .feats { grid-template-columns: 1fr 1fr; gap: 12px; } .feat { padding: 16px 14px; } .sec { margin: 42px 0; } .sec--tint { padding: 42px 0; margin: 42px 0; } .ftr__in { grid-template-columns: 1fr; } .grid--cats { grid-template-columns: 1fr 1fr; gap: 12px; } .grid--brands { grid-template-columns: 1fr 1fr; gap: 12px; } .grid--prods { grid-template-columns: 1fr 1fr; gap: 12px; } .grid--rel { grid-template-columns: 1fr 1fr; gap: 12px; } .tile__imgwrap { height: 124px; } .pcard__imgwrap { height: 172px; } .pcard .btn { padding: 8px 12px; font-size: 12.5px; } .pcard__row { flex-wrap: wrap; } /* цена и кнопка не давят друг друга на узкой карточке */ .frow__body { padding: 26px 22px; } .page { padding: 26px 20px; } .cta-band { padding: 36px 22px; } } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .tile__img, .pcard__img { transition: none; } } /* Медиа товара: видео/YouTube/PDF на карточке */ .pmedia__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start} .pmedia__yt{position:relative;grid-column:1/-1;max-width:760px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;box-shadow:var(--shadow-md,0 6px 20px rgba(59,50,32,.12))} .pmedia__yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .pmedia__vid{width:100%;max-width:520px;border-radius:14px;background:#000;box-shadow:var(--shadow-md,0 6px 20px rgba(59,50,32,.12))} .pmedia__pdf{align-self:center} @media(max-width:700px){.pmedia__grid{grid-template-columns:1fr}} /* ═══ KOKUA: фирменный слой (16.07.2026) — премиальный детский: дерево + крем + глубокий зелёный. База выше — дизайн-система KON; здесь только новые классы витрины бренда. ═══ */ .hero--brand { position: relative; overflow: hidden; border-radius: var(--radius); margin-top: 22px; background: linear-gradient(135deg, #2f5233 0%, #3f6b4a 55%, #56805f 100%); color: #f6f1e5; } .hero--brand .hero__bg { position: absolute; inset: 0; opacity: .18; pointer-events: none; background: radial-gradient(600px 300px at 85% 20%, #f0e0c0 0%, transparent 60%), radial-gradient(420px 260px at 10% 90%, #b98a52 0%, transparent 55%); } .hero--brand .hero__in { position: relative; padding: clamp(48px, 8vw, 96px) clamp(22px, 6vw, 72px); max-width: 780px; } .hero__eyebrow { display: inline-block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #e6d9ba; border: 1px solid rgba(240,224,192,.45); border-radius: 999px; padding: 6px 14px; margin-bottom: 18px; } .hero--brand h1 { font-family: 'Cormorant', Georgia, serif; font-size: clamp(38px, 6vw, 64px); line-height: 1.06; margin: 0 0 14px; color: #faf7f0; } .hero--brand p { font-size: clamp(16px, 2.2vw, 20px); line-height: 1.55; color: #ece5d2; margin: 0 0 26px; max-width: 580px; } .hero__btns { display: flex; gap: 12px; flex-wrap: wrap; } .btn--ghost { background: transparent; color: #f4efe0; border: 1px solid rgba(244,239,224,.55); } .btn--ghost:hover { background: rgba(244,239,224,.14); color: #fff; } .cta-band--boutique { text-align: left; background: #6e5233; } .cta-band--boutique h3 { color: #fdfaf2; } .cta-band__tag { display: inline-block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--wood-l); background: rgba(250,247,240,.12); border-radius: 999px; padding: 5px 12px; margin-bottom: 10px; } .search-found { margin-bottom: 8px; } @media (max-width: 640px) { .hero--brand .hero__in { padding: 40px 20px; } } @media (prefers-reduced-motion: reduce) { .reveal { transition: none !important; transform: none !important; opacity: 1 !important; } } /* ═══ KOKUA · «Немецкий салон» (16.07.2026) — hero-салон: крем-паспарту + арка-витрина. .hero--brand выше оставлен как fallback; актуальный hero главной — .hero--salon. ═══ */ .hero--salon { margin: 30px 0 10px; } .hero__card { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 60px); align-items: center; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(34px, 5.5vw, 68px); box-shadow: var(--shadow-sm); } .hero--salon .hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; border: 0; padding: 0; font-size: 11.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--wood-d); margin-bottom: 20px; } .hero--salon .hero__eyebrow::before { content: ""; width: 36px; height: 1px; background: var(--wood); } .hero--salon h1 { font-size: clamp(40px, 5.5vw, 66px); line-height: 1.04; letter-spacing: -.015em; margin: 0 0 16px; } .hero--salon p { font-size: clamp(16px, 2vw, 19px); line-height: 1.6; color: var(--ink2); max-width: 52ch; margin: 0 0 26px; } /* факты под текстом hero */ .hero__facts { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(18px, 3vw, 40px); margin: 32px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); } .hero__facts b { display: block; font-family: 'Cormorant', Georgia, serif; font-weight: 600; font-size: 17px; color: var(--head); } .hero__facts span { font-size: 12.5px; color: var(--muted); } /* арка-витрина: рама-паспарту под будущее фото (фото — одной строкой style="background-image:url(...)") */ .hero__stage { position: relative; min-height: clamp(300px, 40vw, 460px); } .hero__arch { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); background: radial-gradient(130% 95% at 50% 8%, #f8f2e3 0%, var(--soft) 75%); background-size: cover; background-position: center; border: 1px solid var(--line2); box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--line); } .hero__mono { font-family: 'Cormorant', Georgia, serif; font-weight: 700; font-size: clamp(96px, 11vw, 160px); line-height: 1; color: rgba(185,138,82,.30); user-select: none; } .hero__caption { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--wood-d); background: var(--paper); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px; } @media (max-width: 960px) { .hero__card { grid-template-columns: 1fr; } .hero__stage { min-height: 240px; } .hero__arch { box-shadow: inset 0 0 0 7px var(--paper), inset 0 0 0 8px var(--line); } } /* ═══ ЛАЙТБОКС галереи товара (17.07.2026): тёмный оверлей, стрелки, счётчик. Анимации только transform/opacity; элемент создаётся из catalog.js один раз. ═══ */ .lbox { position: fixed; inset: 0; z-index: 90; background: rgba(16,22,13,.93); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .lbox.open { opacity: 1; pointer-events: auto; } .lbox__fig { margin: 0; max-width: calc(100vw - 130px); max-height: calc(100vh - 90px); display: flex; align-items: center; justify-content: center; } .lbox__img { max-width: 100%; max-height: calc(100vh - 90px); object-fit: contain; border-radius: 10px; opacity: .35; transform: scale(.965); } .lbox__img.zoom { opacity: 1; transform: scale(1); transition: opacity .28s ease, transform .3s cubic-bezier(.2,.6,.2,1); } .lbox__x { position: absolute; top: 12px; right: 16px; font-size: 38px; color: #efe9d8; background: none; border: 0; cursor: pointer; line-height: 1; z-index: 2; padding: 6px 10px; transition: transform .15s, color .15s; } .lbox__x:hover { color: #fff; transform: scale(1.1); } .lbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px; border-radius: 999px; border: 1px solid rgba(239,233,216,.3); background: rgba(239,233,216,.08); color: #efe9d8; font-size: 30px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 1; padding-bottom: 4px; transition: background .15s, color .15s; z-index: 2; } .lbox__nav:hover { background: rgba(239,233,216,.2); color: #fff; } .lbox__prev { left: 18px; } .lbox__next { right: 18px; } .lbox__cnt { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #cfc8b8; font-size: 13px; letter-spacing: .1em; } @media (max-width: 700px) { .lbox__fig { max-width: 100vw; padding: 0 6px; } .lbox__nav { width: 42px; height: 42px; font-size: 24px; } .lbox__prev { left: 8px; } .lbox__next { right: 8px; } } /* люкс-доступность (графт из К2+К3): фокус и выделение */ .btn:focus-visible, a:focus-visible { outline: 3px solid rgba(47,82,51,.35); outline-offset: 2px; } .search__input:focus, .oform input:focus, .oform textarea:focus { box-shadow: var(--ring); } ::selection { background: var(--wood); color: #fff; } ::-moz-selection { background: var(--wood); color: #fff; } /* ═══ KOKUA · WOW-2 «РОСТОМЕР» (17.07.2026) — метки роста на дверном косяке. Концепт-победитель дизайн-совета: модели = ступени роста ребёнка. Один тяжёлый эффект — .growthbar (фиксированная рейка, translateY по rAF-lerp). Всё остальное — transform/opacity, штампы-спрайт вместо emoji-тофу. ═══ */ /* ── штампы мастерской (спрайт в index.html) ── */ .ic { width: 24px; height: 24px; stroke: var(--wood-d); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; } .topbar .ic, .ftr__contacts .ic { width: 15px; height: 15px; vertical-align: -3px; stroke: var(--wood-l); } .topbar .ic { stroke: #e6d9ba; } .btn .ic { width: 17px; height: 17px; stroke: currentColor; } .badge .ic { width: 12px; height: 12px; stroke: #fff; } .cc-ic .ic { width: 22px; height: 22px; stroke: var(--primary-d); } .contact-map__cap .ic { width: 15px; height: 15px; vertical-align: -3px; stroke: var(--cream-text); } .sugg__item-ic .ic { width: 19px; height: 19px; stroke: var(--wood-d); } .tile__ph .ic { width: 48px; height: 30px; stroke: #d8cbae; } /* ── HERO: солнце в арке + холмы, беговел стоит на ближнем холме ── */ .hero__stage { overflow: hidden; border-radius: var(--radius-sm); } .hero__arch { inset: 0 0 52px 0; } .hero__arch::before { content: ""; position: absolute; top: 9%; right: 14%; width: clamp(56px, 8vw, 96px); height: clamp(56px, 8vw, 96px); border-radius: 50%; background: #E9B44C; opacity: .9; mix-blend-mode: multiply; } .hero__hills { position: absolute; left: -4%; right: -4%; bottom: 0; width: 108%; height: 104px; display: block; } /* короткая деревянная рейка — начало ростомера: первая риска «86 см» на косяке */ .hero__rail { position: absolute; left: 14px; top: 8%; bottom: 88px; width: 12px; border-radius: 7px; background-color: var(--wood); background-image: repeating-linear-gradient(180deg, rgba(217,185,138,.4) 0 2px, transparent 2px 7px); box-shadow: inset -2px 0 3px rgba(59,50,32,.25), 0 2px 6px rgba(59,50,32,.18); } .hero__rail-mark { position: absolute; left: 12px; bottom: 14%; display: flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--wood-d); white-space: nowrap; } .hero__rail-mark::before { content: ""; width: 16px; height: 2px; background: #b59a63; border-radius: 2px; } .hero__rail-note { position: absolute; left: 30px; top: 12%; bottom: auto; font-family: 'Caveat', cursive; font-size: 18px; line-height: 1.15; color: var(--wood-d); transform: rotate(-3deg); max-width: 128px; text-shadow: 0 1px 0 rgba(255,255,255,.5); } /* подпись-от-руки уведена в верх рейки (над велосипедом и плашкой showroom) — без наложений */ @media (max-width: 560px) { .hero__rail-note { display: none; } } /* ── AGECHIPS: четыре капсулы-возраста сразу под hero ── */ .agechips { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 4px; } .agechip { display: inline-flex; align-items: center; border-radius: var(--radius-pill); background: var(--soft); border: 1px solid var(--line2); color: var(--head); font-weight: 600; font-size: 13.5px; padding: 9px 18px; white-space: nowrap; transition: border-color .18s, box-shadow .18s, transform .15s, color .15s; } .agechip:hover { border-color: #b59a63; box-shadow: 0 0 0 1px #b59a63, var(--shadow-sm); color: var(--primary-d); transform: translateY(-1px); } @media (max-width: 768px) { .agechips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -20px; padding-right: 20px; scrollbar-width: none; -ms-overflow-style: none; } .agechips::-webkit-scrollbar { display: none; } } /* ── ЛЕСЕНКА РОСТА: 6 ступеней-подиумов нарастающей высоты ── */ .ladder { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; align-items: end; margin: 4px 0 34px; } .ladder__step { display: flex; flex-direction: column; align-items: center; text-align: center; color: var(--ink); border-radius: var(--radius-sm); padding: 8px 6px 0; transition: transform .18s, background .18s; } .ladder__step:hover { transform: translateY(-4px); background: rgba(241,235,220,.5); color: var(--ink); } .ladder__ph { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 120px; margin-bottom: 8px; } .ladder__ph img { max-width: 100%; max-height: 100%; object-fit: contain; } .ladder__age { font-size: 13px; color: var(--head); line-height: 1.3; } .ladder__age b { font-weight: 700; } .ladder__seat { font-size: 11.5px; color: var(--muted); margin: 2px 0 8px; line-height: 1.3; } .ladder__podium { width: 100%; border-radius: 8px 8px 0 0; background: var(--soft); border: 1px solid var(--line2); border-bottom: 6px solid var(--wood); } @media (max-width: 768px) { .ladder { display: flex; overflow-x: auto; align-items: flex-end; margin-right: -20px; padding: 0 20px 6px 0; scrollbar-width: none; -ms-overflow-style: none; } .ladder::-webkit-scrollbar { display: none; } .ladder__step { flex: 0 0 132px; } } /* ── GROWTHBAR — единственный тяжёлый эффект: рейка-«бук» с бегунком ── */ .growthbar { position: fixed; left: calc((100vw - var(--maxw)) / 2 - 74px); width: 56px; top: 0; bottom: 0; z-index: 20; pointer-events: none; } .growthbar::before { content: ""; position: absolute; left: 8px; top: 24px; bottom: 24px; width: 13px; border-radius: 8px; background-color: var(--wood); background-image: repeating-linear-gradient(180deg, rgba(217,185,138,.38) 0 2px, transparent 2px 7px), linear-gradient(90deg, rgba(255,255,255,.22), transparent 45%, rgba(59,50,32,.2)); box-shadow: inset -2px 0 3px rgba(59,50,32,.28), 0 2px 8px rgba(59,50,32,.2); } .growthbar__mark { position: absolute; left: 4px; display: flex; align-items: center; gap: 7px; pointer-events: auto; color: var(--wood-d); opacity: .35; transition: opacity .45s ease; text-decoration: none; } .growthbar__mark.lit { opacity: 1; } .growthbar__mark:hover { opacity: 1; color: var(--primary-d); } .growthbar__tick { width: 21px; height: 2px; border-radius: 2px; background: #b59a63; flex-shrink: 0; box-shadow: 0 1px 1px rgba(59,50,32,.25); } .growthbar__lbl { font-size: 11px; font-weight: 600; letter-spacing: .05em; white-space: nowrap; } .growthbar__note { position: absolute; left: 22px; top: 13px; font-family: 'Caveat', cursive; font-size: 15px; max-width: 112px; white-space: normal; line-height: 1.05; color: var(--wood-d); white-space: nowrap; transform: rotate(-4deg); } .growthbar__rider { position: absolute; left: 6px; top: 0; will-change: transform; pointer-events: none; filter: drop-shadow(0 2px 2px rgba(59,50,32,.3)); } @media (max-width: 1360px) { .growthbar { display: none; } } @media (prefers-reduced-motion: reduce) { .growthbar__rider { display: none; } .growthbar__mark { opacity: 1; } } /* ── появление карточек: один IntersectionObserver (.rv → .on) ── */ .rv { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.2,.6,.2,1); } .rv.on { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .rv { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Единый «шлифованный алюминий» вместо прежних пастельных подложек по имени краски (слово владельца 17.07.2026): под цвет алюминиевых рам KOKUA, вписан в палитру сайта. Цвет рамы отражается тонкой каёмкой снизу-справа — намёк без пестроты. multiply — на базовом .pcard__img. */ [class*="pcard__imgwrap--"] { background: #fff; } .pcard__imgwrap--ocean { box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -3px 0 -1px #6f97a6; } .pcard__imgwrap--moon { box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -3px 0 -1px #8f8ea6; } .pcard__imgwrap--fire { box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -3px 0 -1px #d08a5a; } .pcard__imgwrap--rose { box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -3px 0 -1px #c98a92; } .pcard__imgwrap--black { box-shadow: inset 0 1px 0 var(--metal-hi), inset 0 -3px 0 -1px #4a463f; } /* SMART-BLEND (17.07.2026): JS-детектор фона фото (кайма 24×24 canvas). Белофонное студийное → .img-blend (multiply, растворяется в алюминии); lifestyle/цветной/чёрный фон → .img-photo («фотокарточка»: белая подложка-полароид, без бленда — фото не мутнеет ни на светлом, ни на тёмном). */ .img-blend { mix-blend-mode: multiply; } .img-photo { background: #fff; border-radius: 12px; box-shadow: 0 4px 16px rgba(30,30,20,.14); } .pcard__img.img-photo { padding: 6px; } .pgal__img.img-photo { padding: 10px; } .pgal__th img.img-photo { border-radius: 8px; } .ladder__ph img.img-photo { border-radius: 8px; padding: 3px; } /* «крашеные деревянные кружки» цвета модели */ .pcard__dots { display: flex; gap: 6px; margin-top: 7px; } .pcard__dot { width: 15px; height: 15px; border-radius: 999px; display: inline-block; border: 1px solid rgba(59,50,32,.25); box-shadow: inset 0 -2px 3px rgba(59,50,32,.22), inset 0 1px 2px rgba(255,255,255,.4); } .pview__dotrow { display: flex; align-items: center; gap: 9px; margin: 10px 0 2px; font-size: 13px; color: var(--muted); } .pview__dotrow b { color: var(--head); text-transform: capitalize; } .pview__dotrow .pcard__dot { width: 19px; height: 19px; } /* ── разделитель «след колёс»: заднее колесо ровно, переднее чуть виляет ── */ .track { display: block; width: 100%; height: 12px; } .sec__h .track { position: absolute; left: 0; right: 0; bottom: 0; } .track-div { grid-column: 1 / -1; padding: 2px 24px; } /* ── FROW: пара «переход» (беговел → велосипед с педалями) ── */ .frow__media--pair { display: flex; align-items: flex-end; justify-content: center; gap: 4px; background: radial-gradient(120% 100% at 50% 0%, #f8f2e3 0%, var(--soft) 78%); padding: 26px 18px 30px; } .frow__media--pair img { max-width: 46%; max-height: 205px; object-fit: contain; } .frow__media--pair img + img { transform: translateY(-14px); } /* каждое следующее — чуть выше: рост без слов */ /* ── CTA-полоса: волокна дерева + латунная кромка + рукописная риска ── */ .cta-band { border-top: 2px solid var(--wood-l); } .cta-band::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .06; background: repeating-linear-gradient(0deg, #fff 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, #000 0 1px, transparent 1px 3px); } .cta-band > * { position: relative; z-index: 1; } .cta-band__note { display: inline-flex; align-items: center; gap: 8px; font-family: 'Caveat', cursive; font-size: 20px; color: var(--wood-l); margin-bottom: 6px; transform: rotate(-2deg); } .cta-band__note::before { content: ""; width: 20px; height: 2px; background: var(--wood-l); border-radius: 2px; } /* ── Footer: последняя риска ростомера, подпись, гигантское KOKUA ── */ .ftr { position: relative; overflow: hidden; } .ftr__mark { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; color: var(--wood-l); } .ftr__mark-line { width: 26px; height: 2px; border-radius: 2px; background: #b59a63; flex-shrink: 0; } .ftr__mark-t { font-size: 13px; letter-spacing: .08em; } .ftr__note { text-align: center; font-family: 'Caveat', cursive; font-size: 21px; color: var(--cream-text); margin-top: 26px; transform: rotate(-1.5deg); } .ftr__giant { font-family: 'Cormorant', Georgia, serif; font-weight: 700; text-align: center; font-size: clamp(120px, 18vw, 320px); line-height: .8; transform: translateY(24%); color: transparent; -webkit-text-stroke: 1.5px rgba(214,192,150,.35); user-select: none; pointer-events: none; margin-top: 8px; white-space: nowrap; } .ftr__in, .ftr__copy, .ftr__note, .ftr__mark { position: relative; z-index: 1; } /* ── типографика: Cormorant тонкий — ценам и кнопкам строгий вес ── */ .pcard__price, .pview__price { font-weight: 700; } .btn, .hdr__cta { font-weight: 700; } .hero--salon h1 { font-weight: 700; } /* ── СОВМЕСТИМОСТЬ АКСЕССУАРОВ (17.07.2026): велосипеду — его аксессуары, аксессуару — чипы моделей ── */ .compat { margin-top: 34px; } .acc-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 236px; gap: 14px; overflow-x: auto; padding: 4px 2px 12px; scrollbar-width: thin; } .acc-strip .pcard__imgwrap { height: 168px; } .acc-strip .pcard__t { font-size: 14.5px; } .fitchips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 18px; } .fitchips__lbl { font-weight: 600; color: var(--ink2); font-size: 13.5px; } .fitchip { display: inline-flex; border-radius: var(--radius-pill); border: 1px solid var(--line2); background: var(--soft); padding: 5px 13px; font-size: 13px; font-weight: 600; color: var(--head); } .fitchip:hover { border-color: #b59a63; color: var(--primary-d); } .fituniv { display: flex; gap: 8px; align-items: center; color: var(--ink2); font-size: 14px; margin: 16px 0 0; } /* ── ВИДЕО-РАЗДЕЛ: сетка YouTube + компактные промо-клипы («не на всю страницу») ── */ .vidgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .vidgrid__yt { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: #000; box-shadow: var(--shadow-sm); } .vidgrid__yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .clipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; max-width: 900px; } .clipgrid__v { width: 100%; border-radius: var(--radius-sm); background: #000; box-shadow: var(--shadow-sm); display: block; } /* ── ЛОГОТИП «KOKUA Moldova» (17.07.2026): хром-металл по мотивам исторического logo_KOKUA_Moldova.png (sportkids.md 2012–2022) + исторический слоган «Элитные детские велосипеды». Baloo 2 — округлый, ближайший к фирменному начертанию KOKUA. ── */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .hero__logo { margin: 0 0 16px; } .klogo { display: block; width: min(460px, 88%); height: auto; } .klogo__main { font-family: 'Baloo 2', 'Rubik', sans-serif; font-weight: 800; font-size: 104px; letter-spacing: 2px; stroke: #6d6f6b; stroke-width: 1.4; paint-order: stroke fill; } .klogo__sub { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 25px; letter-spacing: 10px; } .klogo__tagline { display: block; margin-top: 10px; font-family: 'Rubik', sans-serif; font-weight: 600; font-size: clamp(13px, 1.6vw, 16.5px); letter-spacing: .14em; text-transform: uppercase; color: var(--wood-d); } html[data-bg="dark"] .klogo__main { stroke: #3c3e3a; } html[data-bg="dark"] .klogo__tagline { color: var(--wood-l); } @media (max-width: 768px) { .klogo { width: min(340px, 92%); } } /* лента промо-клипов на главной: компактно, hover-play */ .clipband { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 300px)); gap: 14px; } .clipband__v { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); background: #000; box-shadow: var(--shadow-sm); cursor: pointer; display: block; transition: transform .2s, box-shadow .2s; } .clipband__v:hover { transform: translateY(-3px); box-shadow: var(--shadow-h); } /* мелкий хром-локап в шапке/футере (как на главной, но компактный) */ .klogo-sm { display: block; width: 148px; height: auto; } .klogo-sm__main { font-family: 'Baloo 2', 'Rubik', sans-serif; font-weight: 800; font-size: 54px; letter-spacing: 1px; stroke: #6d6f6b; stroke-width: .9; paint-order: stroke fill; } .klogo-sm__sub { font-family: 'Rubik', sans-serif; font-weight: 600; font-size: 14px; letter-spacing: 6px; } .klogo-sm--ftr { width: 168px; } @media (max-width: 560px) { .klogo-sm { width: 122px; } } /* ── КАЛЬКУЛЯТОР РОСТА + ФИЛЬТРЫ КАТАЛОГА (18.07.2026) ── */ .fitcalc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; margin: 0 0 24px; box-shadow: var(--shadow-sm); } .fitcalc__head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; } .fitcalc__head .ic { width: 30px; height: 30px; } .fitcalc__head h3 { margin: 0; font-size: 20px; } .fitcalc__head p { margin: 2px 0 0; color: var(--ink2); font-size: 13.5px; } .fitcalc__row { display: inline-flex; align-items: center; gap: 8px; } .fitcalc__row input { width: 150px; border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; font: inherit; font-size: 16px; background: var(--bg); color: var(--ink); } .fitcalc__row input:focus { outline: none; box-shadow: var(--ring); border-color: var(--primary); } .fitcalc__unit { color: var(--muted); font-weight: 600; } .fitcalc__res { margin-top: 12px; display: flex; gap: 14px; flex-wrap: wrap; align-items: center; } .fitcalc__hit { font-weight: 700; font-size: 16px; } .fitcalc__also { color: var(--ink2); font-size: 13.5px; } .fitcalc__none { color: var(--ink2); margin: 0; } .fltbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 18px; } .fltchip { border: 1px solid var(--line2); background: var(--paper); color: var(--ink); border-radius: var(--radius-pill); padding: 7px 15px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; } .fltchip:hover { border-color: var(--primary); } .fltchip.on { border-color: var(--primary); color: var(--primary-d); box-shadow: 0 0 0 1px var(--primary); } .fltbar__colors { display: inline-flex; gap: 6px; margin-left: 4px; } .fltdot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent; background: none; padding: 2px; cursor: pointer; } .fltdot span { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); } .fltdot.on { border-color: var(--primary); } .fltbar__n { color: var(--muted); font-size: 13px; margin-left: auto; } /* ── промо-лента «Открытие в сентябре · 500 леев» + переключатель валют (18.07.2026) ── */ .promobar { background: linear-gradient(100deg, #f07c23, #d96a15); color: #fff; font-weight: 600; font-size: 14px; text-align: center; } .promobar .wrap { padding: 9px 20px; } html[data-bg="dark"] .promobar { background: linear-gradient(100deg, #f07c23, #b85a10); color: #131313; } .cur-sw { display: inline-flex; gap: 2px; margin-left: 10px; } .cur-sw__b { border: 1px solid var(--line2); background: none; color: var(--ink2); font: inherit; font-size: 11.5px; font-weight: 700; padding: 4px 8px; cursor: pointer; border-radius: 8px; letter-spacing: .03em; } .cur-sw__b.on { color: var(--primary-d); border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); } @media (max-width: 900px) { .cur-sw { display: none; } } /* на мобиле — в бургер не тащим, MDL дефолт */ .vidgrid__ext { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; } /* ── язык в верхней панели, рядом с почтой (слово владельца 18.07) ── */ .lang-sw--top { display: inline-flex; gap: 2px; margin-left: 14px; } .lang-sw--top a, .lang-sw--top .on { color: var(--cream-text); opacity: .75; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; padding: 3px 8px; border-radius: 999px; border: 1px solid transparent; text-decoration: none; } .lang-sw--top a:hover { opacity: 1; color: #fff; } .lang-sw--top .on { opacity: 1; border-color: rgba(239,233,216,.5); background: rgba(255,255,255,.08); } html[data-bg="dark"] .lang-sw--top .on { border-color: rgba(240,124,35,.65); color: #ff9a4d; background: rgba(240,124,35,.1); } @media (max-width: 640px) { .lang-sw--top { display: none; } } /* на мобиле — язык в бургер-меню (#navLangs) */ /* ── КИНО-БЭНД на главной + «живые» видео-плитки (18.07.2026, «оживить сайт») ── */ .cineband { position: relative; margin: 46px 0; overflow: hidden; } .cineband__v { display: block; width: 100%; height: clamp(300px, 46vw, 520px); object-fit: cover; } .cineband__ov { position: absolute; inset: 0; display: flex; align-items: center; background: linear-gradient(90deg, rgba(10,10,8,.72) 0%, rgba(10,10,8,.35) 46%, rgba(10,10,8,.05) 75%); } .cineband__ov h2 { color: #fff; font-size: clamp(26px, 3.6vw, 44px); margin: 0 0 10px; } .cineband__ov p { color: #efe6d8; font-size: clamp(14px, 1.6vw, 18px); margin: 0 0 22px; max-width: 46ch; } .clipgrid__v, .clipband__v { cursor: pointer; transition: transform .35s cubic-bezier(.2,.6,.2,1), box-shadow .35s; } .clipgrid__v:hover, .clipband__v:hover { transform: scale(1.035) rotate(.6deg); box-shadow: var(--shadow-h); } @media (prefers-reduced-motion: reduce) { .clipgrid__v:hover, .clipband__v:hover { transform: none; } } /* ── ОПТ −20% (18.07.2026): бейджи, калькулятор партии, подсказка на товаре ── */ .nav__opt { color: var(--primary-d); font-weight: 700; } html[data-bg="dark"] .nav__opt { color: #ff9a4d; } .optbadges { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 4px; } .optbadge { border: 1.5px solid var(--primary); color: var(--primary-d); border-radius: var(--radius-pill); padding: 7px 16px; font-weight: 700; font-size: 14px; } html[data-bg="dark"] .optbadge { color: #ff9a4d; } .optex { font-weight: 600; color: var(--head); } .optcalc { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px 22px; margin-top: 8px; box-shadow: var(--shadow-sm); } .optrow { display: flex; gap: 10px; margin: 0 0 10px; align-items: center; } .optrow__m { flex: 1; min-width: 0; border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--bg); color: var(--ink); } .optrow__q { width: 86px; border: 1px solid var(--line2); border-radius: 10px; padding: 10px 12px; font: inherit; background: var(--bg); color: var(--ink); } .optrow__x { border: none; background: none; color: var(--muted); font-size: 20px; cursor: pointer; padding: 4px 8px; } .optrow__x:hover { color: #c0392b; } .opttotal { margin: 16px 0; } .opttotal__q { color: var(--ink2); font-size: 14px; margin-bottom: 6px; } .opttotal__row { font-size: 18px; } .opttotal__row s { color: var(--muted); } .opttotal__sum { font-size: 26px; color: var(--green-deep); } .opttotal__save { margin-left: 10px; color: var(--primary-d); font-weight: 700; font-size: 14px; } html[data-bg="dark"] .opttotal__save { color: #ff9a4d; } .optnote { display: inline-block; margin: 4px 0 10px; font-size: 13.5px; font-weight: 600; border: 1px dashed var(--primary); border-radius: 10px; padding: 6px 12px; } @media (max-width: 640px) { .optrow { flex-wrap: wrap; } .optrow__m { flex-basis: 100%; } } /* UDS-бейдж на карточке товара (21.07.2026) */ .pview__uds{margin:10px 0 2px;padding:9px 14px;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink2);font-size:.92rem} .oform__note{margin-top:6px;font-size:.86rem;color:var(--wood-d)} /* UDS-полоса на главной (21.07.2026) */ .udsband{background:linear-gradient(135deg,var(--primary-dd),var(--primary) 70%,var(--green-deep2));padding:44px 0;margin:34px 0} .udsband__in{display:flex;align-items:center;gap:28px;flex-wrap:wrap} .udsband__star{font-size:56px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.25))} .udsband__txt{flex:1;min-width:260px} .udsband__txt h2{color:#fff;margin:0 0 6px;font-family:Cormorant,serif} .udsband__txt p{color:var(--cream-text);margin:0 0 10px} .udsband__txt ul{margin:0;padding:0;list-style:none;display:flex;gap:18px;flex-wrap:wrap} .udsband__txt li{color:var(--wood-l);font-weight:600} .udsband__txt li::before{content:'✦ ';color:var(--cream-text)} .udsband__cta{text-align:center} .udsband__promo{margin-top:8px;color:var(--cream-text);font-size:.9rem;opacity:.9} /* honeypot формы заявки — ловушка для ботов, живым не видна (22.07.2026: правило потерялось, поле торчало в модалке) */ .oform .hp{position:absolute !important;left:-9999px !important;top:-9999px !important;width:1px;height:1px;opacity:0;pointer-events:none} /* ── КОМПЛЕКТ «велосипед + аксессуары» + корзина (21.07.2026) ────────────────── Аксессуары на странице велосипеда получают кнопку «+ В комплект»; липкая планка .kitbar внизу показывает итог и кладёт ВСЁ разом в корзину. Цвета — через переменные, тёмная тема подхватывает автоматически. */ .kitcell { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .kitcell .pcard { flex: 1 1 auto; } .kitcell.on .pcard { outline: 2px solid var(--primary); outline-offset: 2px; } .kitpick { border: 1.6px dashed var(--wood-d); background: none; color: var(--wood-d); border-radius: var(--radius-pill); padding: 8px 12px; font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .kitpick:hover { border-color: var(--primary); color: var(--primary); } .kitpick.on { border-style: solid; border-color: var(--primary); background: var(--primary); color: #fff; } .kitbar { position: sticky; bottom: 12px; z-index: 60; margin: 18px 0 6px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--paper); border: 1px solid var(--line2); border-radius: var(--radius-pill); padding: 10px 12px 10px 20px; box-shadow: var(--shadow-lg); } .kitbar__info { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .kitbar__info b { font-size: 18px; color: var(--green-deep); font-weight: 900; } .kitbar__info span { font-size: 12.5px; color: var(--muted); } .cart-item__prechip { font-size: 11.5px; color: var(--wood-d); white-space: nowrap; } .btn--cart .ic, #pAddCart .ic, #kitBarBtn .ic { width: 19px; height: 19px; stroke: currentColor; } .hdr__cart .ic { width: 22px; height: 22px; stroke: currentColor; } @media (max-width: 560px) { .kitbar { padding: 8px 10px 8px 14px; bottom: 8px; } .kitbar .btn { padding: 10px 14px; font-size: 14px; } .kitbar__info b { font-size: 16px; } }