/* Open Sans лежит у нас файлом: страница не ждёт чужой сервер. Один файл на подмножество знаков, начертания 400, 600, 700 берутся из него же. */ @font-face{font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url(fonts/opensans-cyrillic.woff2) format('woff2'); unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116} @font-face{font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url(fonts/opensans-latin-ext.woff2) format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url(fonts/opensans-latin.woff2) format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD} @font-face{font-family:'Open Sans'; font-style:normal; font-weight:300 800; font-display:swap; src:url(fonts/opensans-math.woff2) format('woff2'); unicode-range:U+0302-0303, U+0305, U+0307-0308, U+0310, U+0312, U+0315, U+031A, U+0326-0327, U+032C, U+032F-0330, U+0332-0333, U+0338, U+033A, U+0346, U+034D, U+0391-03A1, U+03A3-03A9, U+03B1-03C9, U+03D1, U+03D5-03D6, U+03F0-03F1, U+03F4-03F5, U+2016-2017, U+2034-2038, U+203C, U+2040, U+2043, U+2047, U+2050, U+2057, U+205F, U+2070-2071, U+2074-209F, U+20D0-20DC, U+20E1, U+20E5-20EF, U+2100-2112, U+2114-2115, U+2117-2121, U+2123-214F, U+2190, U+2192, U+2194-21AE, U+21B0-21E5, U+21F1-21F2, U+21F4-2211, U+2213-2214, U+2216-22FF, U+2308-230B, U+2310, U+2319, U+231C-2321, U+2336-237A, U+237C, U+2395, U+239B-23B7, U+23D0, U+23DC-23E1, U+2474-2475, U+25AF, U+25B3, U+25B7, U+25BD, U+25C1, U+25CA, U+25CC, U+25FB, U+266D-266F, U+27C0-27FF, U+2900-2AFF, U+2B0E-2B11, U+2B30-2B4C, U+2BFE, U+3030, U+FF5B, U+FF5D, U+1D400-1D7FF, U+1EE00-1EEFF} /* УСТРОЙСТВО — С ВЫРЕЗКИ ВЛАДЕЛЬЦА (amayama, главная), ПОРЯДОК БЛОКОВ ЕГО: шапка со значками → заголовок и поиск → две карточки марок → последние поставки → предложение написать → оплата и доставка → как работает → товары → подвал тремя списками. ЧИСЛА СНЯТЫ С amayama.com, не на глаз: полоса 1100, основной текст 14, номер 16/700, подпись 12, марка 18, заголовок блока 20 на плашке #f4f4f4, заголовок страницы 32/400, поле поиска 60 высотой с кеглем 20, зазор между блоками 32, отступ внутри 24, скругление 5. ТЕКСТЫ ТОЛЬКО НАШИ: заголовок и лид — с главной partcn.pro, подписи шагов — из «Вопросов». Ничего не сочинено. ЗНАЧКИ — из набора, который уже стоит на сайте (SITE/public/index.html). */ :root{ --accent:#288bf0; --text:#2a2a2a; --muted:#6b7280; --dim:#98a1b0; --line:#e4e7ec; --plashka:#f4f4f4; --vopros:#e9f1f9; --ramka:#cdcdcd; } *{box-sizing:border-box} /* Кнопки и поля ввода по умолчанию берут системный шрифт — наследуем наш. */ button,input{font-family:inherit} body{margin:0; background:#fff; color:var(--text); font:13px/18px "Open Sans",Tahoma,Arial,Helvetica,sans-serif; font-variant-numeric:tabular-nums} a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline} .polosa{width:1100px; margin:0 auto} svg{display:block} /* ВЕРХНЯЯ СТРОКА — значками, как в образце */ .verh{background:#fff; box-shadow:0 1px 4px rgba(27,30,36,.12)} .verh .polosa{display:flex; align-items:center; height:48px} .znachki{display:flex; gap:16px; margin-left:26px} .znachki a{color:var(--dim); display:flex; align-items:center; padding:4px} .znachki a:hover{color:var(--accent)} /* ЗНАК И РАЗДЕЛЫ */ .shapka .polosa{display:flex; align-items:center} .znak a{color:inherit} .znak a:hover{text-decoration:none} .znak{height:51px; margin:17px 0; display:flex; align-items:center; font-size:30px; font-weight:600; letter-spacing:-.4px; color:var(--text)} .razdely{display:flex; gap:20px; margin-left:auto; font-size:13px} .razdely a{color:var(--text)} /* ЗОВ И ПОИСК */ .zov{padding:0; text-align:center} .zov h1{margin:0 0 7px; padding:0 0 10px; font-size:32px; line-height:32px; font-weight:400} .zov .lead{margin:0; font-size:20px; line-height:20px; color:var(--muted)} /* Поиск по центру, уже полосы: во всю ширину он спорил с рамкой каталогов под ним. Ширина подобрана владельцем 06.10.2026. */ .iskat{display:flex; gap:12px; width:860px; margin:17px auto 0; padding:15px 0; text-align:left} .iskat input{flex:1; height:52px; padding:13px 15px; font-size:16px; border:1px solid var(--ramka); border-radius:5px; outline:none} .iskat button{width:132px; height:52px; font-size:16px; color:#fff; background:var(--accent); border:0; border-radius:5px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px} /* КАТАЛОГИ — ЕДИНСТВЕННЫЙ блок в рамке и с плашкой. Так в образце: у «последних поставок», «как работает» и товаров рамки нет вовсе, заголовок там просто текст 20 высотой 18. */ /* Контейнер во всю полосу, как в образце. */ .katalogi{margin-top:32px; border:1px solid var(--line); border-radius:5px} .katalogi__imya{padding:15px; background:var(--plashka); font-size:20px; line-height:18px; border-radius:5px 5px 0 0} /* РАЗДЕЛ БЕЗ РАМКИ */ .razdel{margin-top:40px} .razdel__imya{font-size:20px; line-height:18px} .razdel__imya:empty{height:18px} /* заголовок без текста держит место */ /* над «Как мы работаем» такой же отступ, как над рядом служб доставки: 76 */ .razdel--kak{margin-top:76px} .razdel__telo{margin-top:18px} /* МАРКИ. Крупными они были только на вырезке владельца — там мобильная раскладка. На компьютере карточка 155×111, как в образце. */ .marki{padding:24px; display:grid; grid-template-columns:repeat(6,155px); gap:24px} .marka{height:111px; padding:6px 0 14px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; border:1px solid transparent; border-radius:5px; text-decoration:none; transition:border-color .15s, background .15s} .marka:hover{border-color:var(--line); background:#fafbfc} .marka:hover .marka__imya{text-decoration:underline} /* ЗНАК ЗАГОРАЕТСЯ ПРИ НАВЕДЕНИИ: серый — фирменный цвет марки. */ .marka__znak svg{transition:color .15s} .marka--toyota:hover .marka__znak{color:#EB0A1E} .marka--lexus:hover .marka__znak{color:#1a1a1a} .marka__znak{height:72px; display:flex; align-items:center; justify-content:center; color:#c9ced6} .marka__imya{margin-top:10px; font-size:18px; color:var(--accent)} .marka__znak{color:#c9ced6} .marka__skolko{margin-top:5px; font-size:12px; color:var(--muted)} /* ПОСЛЕДНИЕ ПОСТАВКИ */ .postavki{display:grid; grid-template-columns:repeat(5,1fr); gap:15px} .postavka{background:var(--plashka); border-radius:5px; padding:15px; min-height:99px} .postavka__nomer{font-size:16px; font-weight:700; color:var(--accent)} .postavka__imya{margin-top:7px; font-size:13px; line-height:20px} .postavka__cena{margin-top:7px; font-size:12px; color:var(--muted)} /* СЛУЖБЫ ДОСТАВКИ — шесть логотипов во всю полосу. Серые, при наведении загораются, как знаки марок в каталоге. Решение владельца 06.10.2026. Файлы лежат в docs/logo-tk/ и на сервере в /tk/. Байкал Сервис не ставим. */ .tk{display:grid; grid-template-columns:repeat(6,1fr); gap:15px} .tk a{height:78px; border:1px solid var(--line); border-radius:5px; display:flex; align-items:center; justify-content:center; padding:14px 18px} .tk img{max-width:100%; max-height:40px; filter:grayscale(1); opacity:.55; transition:filter .15s, opacity .15s} .tk a:hover img{filter:none; opacity:1} /* КАК РАБОТАЕТ */ /* КАК МЫ РАБОТАЕМ — числа блока process с amayama.com: карточка 190×141, отступ 10; значок 70×70 на 10 от верха; название 16/18 через 8 под значком; подпись 14/18 серым #878787, отступ 5; между карточками стрелка ⇢ кегль 32, высота 60, цвет бледный; заголовок 20/18, под ним 15. */ .shagi{display:flex; justify-content:space-between; align-items:flex-start} /* Русские названия длиннее английских: у образца карточка 190, у нас 250, иначе «Собираем и упаковываем» уходит на вторую строку. Высота — не меньше 141. */ .shag{flex:0 0 250px; min-height:141px; padding:10px 10px 14px; text-align:center} .shag__znak{display:flex; justify-content:center; color:#b9bec8} .shag__znak svg{width:70px; height:70px} .shag__imya{margin-top:8px; font-size:16px; line-height:22px} .shag__pod{margin-top:3px; font-size:14px; line-height:18px; color:#878787} .strelka{flex:0 0 32px; height:60px; margin-top:15px; font-size:32px; line-height:60px; text-align:center; color:#c9ced6} /* ПОДВАЛ — числа подвала amayama.com, снято 06.10.2026: высота 298, отступ 20 сверху и 30 снизу, линия сверху #e5e5e5, текст 12/18 серым #5f5f5f; таблица на две колонки по 550, отступ слева у второй 20; заголовок колонки 13/18, высота 38 (отступ 10 сверху и снизу); содержимое с отступом снизу 15; копирайт 13,56 с отступом снизу 20. */ .podval{margin-top:32px; padding:20px 0 30px; border-top:1px solid #e5e5e5; font-size:12px; line-height:18px; color:#5f5f5f} .podval__tablica{display:flex; justify-content:space-between; align-items:flex-start; margin-top:15px} .podval__levo{display:flex; gap:80px} .podval__kol--pravo{text-align:right} .podval__zag{padding:10px 0; font-size:13px; line-height:18px; color:var(--text)} .podval__tekst{padding:0 0 15px} .podval__niz{margin-top:20px; padding-bottom:20px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px} .podval__copy{flex:none; font-size:12px; line-height:18px; color:var(--text)} .podval__pravo{max-width:640px; color:var(--dim); font-size:12px; line-height:18px} /* ПОДВАЛ ВСЕГДА ВНИЗУ ОКНА. На коротких страницах (выбор кузова, две ссылки) он всплывал под содержимое на середину экрана — владелец 06.10.2026. Теперь страница тянется на всё окно, подвал прижат к низу, на длинных идёт сразу после текста. scrollbar-gutter держит ширину одной и той же с полосой прокрутки и без неё: иначе страница «сужалась» на пятнадцать пикселей при переходе на короткую. */ html{scrollbar-gutter:stable} body{min-height:100vh; display:flex; flex-direction:column} .polosa--tela{flex:1 0 auto; display:flex; flex-direction:column} .polosa--tela > .podval{margin-top:auto} .polosa--tela > :nth-last-child(2){margin-bottom:64px} /* ЗНАЧКИ В ОДНОМ РЯДУ С «ЗАПЧАСТИ», «ИНФОРМАЦИЯ» И «СВЯЗЬ»: верхние края на одной линии. Значок 56, расстояние между ячейками 24, подпись 12 серым. Образец — Мегазип: значки стоят вверху подвала, залитые, не как справка. Владелец 06.10.2026. */ .znachki4{display:flex; gap:22px} .zn4{width:112px; text-align:center} .zn4__i{height:56px; display:flex; justify-content:center; align-items:center; color:#4b5059} .zn4__t{margin-top:8px; font-size:12px; line-height:16px; color:var(--muted)} .zn4__oem{display:inline-flex; align-items:center; justify-content:center; width:56px; height:38px; border-radius:7px; background:#4b5059; color:#fff; font-size:16px; line-height:20px; font-weight:700} /* Значки — первым рядом подвала, справа, сразу под линией. Владелец 06.10.2026. */ .podval__verh{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px} /* Контакты — без заголовка, слева сверху, напротив значков. Позже сюда же ИНН и реквизиты. */ .podval__kontakty{font-size:14px; line-height:22px; padding-top:6px} /* ПОИСК В ШАПКЕ ВНУТРЕННИХ СТРАНИЦ. Решение владельца 06.10.2026: как у Амаямы — справа от знака, в полосе под тенью. Числа со скриншота (масштаб 1,5618): поле 400 шириной, высота 44, кнопка-квадрат 44. На главной поиск остаётся большим под заголовком. */ .poisk-shapka{margin-left:auto; display:flex; width:400px} .poisk-shapka input{flex:1; height:44px; padding:0 14px; font-size:16px; border:1px solid var(--ramka); border-right:0; border-radius:5px 0 0 5px; outline:none} .poisk-shapka button{width:44px; height:44px; border:0; background:var(--accent); color:#fff; border-radius:0 5px 5px 0; cursor:pointer; display:flex; align-items:center; justify-content:center} /* ЭКРАНЫ 3–5. Числа выведены со скриншотов владельца, масштаб 1,5618. */ .kroshki{margin-top:18px; padding-bottom:12px; border-bottom:1px solid #e5e5e5; font-size:14px; line-height:20px; color:var(--text)} .kroshki span{margin:0 12px; color:var(--dim)} .marka-h1{margin:30px 0 22px; font-size:32px; line-height:36px; font-weight:400} .h2-ekrana{margin:30px 0 22px; font-size:26px; line-height:30px; font-weight:400} .modeli{margin-bottom:8px} .mod{display:grid; grid-template-columns:repeat(5,1fr); grid-auto-flow:column; margin-bottom:32px} .mod a, .kuzova a{font-size:16px; line-height:29px; white-space:nowrap} .kuzova{display:grid; grid-template-columns:repeat(5,1fr); margin-bottom:60px} .gruppy{display:grid; grid-template-columns:repeat(5,1fr); gap:15px; margin-bottom:30px} .gr{border:1px solid var(--line); border-radius:5px; padding:14px; text-align:center} .gr__foto{height:116px; display:flex; align-items:center; justify-content:center; background:#fafbfc; border-radius:3px; color:#c9ced6} .gr__foto svg{width:64px; height:64px} .gr__imya{margin-top:10px; min-height:38px; font-size:14px; line-height:19px; color:var(--accent)} .detal-verh{display:flex; justify-content:space-between; align-items:flex-start; margin-top:26px} .detal-verh .marka-h1{margin:0} .podzag{margin-top:10px; font-size:16px; line-height:24px; color:var(--muted)} .nomer-box{width:355px; border:1px dashed #d3d7de; border-radius:3px; text-align:center; flex:none} .nomer-box__n{padding:14px 10px 10px; font-size:26px; line-height:32px} .nomer-box__z{padding:10px 10px 12px; font-size:14px; line-height:20px; color:var(--text)} .nomer-box__s{padding:7px 10px; background:#fbf6dd; font-size:14px; line-height:20px; color:var(--muted)} /* ВЕРХ КАРТОЧКИ: слева фото 300×200, справа предложение той же высоты. Внизу предложения — примечание слева и «Спросить» справа, по нижнему краю фото. */ .detal-teloh{display:flex; gap:30px; margin-top:34px; align-items:stretch} .foto-detal{width:300px; min-height:200px; flex:none; background:var(--plashka); border-radius:3px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:var(--dim); font-size:12px} .predl{flex:1; display:flex; flex-direction:column; justify-content:space-between} .predl__tab{border-radius:3px; overflow:hidden} .predl__sh, .predl__ry{display:grid; grid-template-columns:1.5fr 1.1fr 1.1fr auto; align-items:center; padding:0 22px; column-gap:16px} .predl__sh{height:50px; background:#f2f3f5; color:var(--muted); font-size:14px; border-bottom:1px solid #d8dbe0} .predl__ry{height:76px; font-size:14px; line-height:20px} .predl__cena{font-size:20px; line-height:24px} .predl__cena small{display:block; font-size:12px; line-height:16px; color:var(--muted)} .v-korzinu{width:40px; height:32px; border:0; border-radius:3px; background:var(--accent); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center} .predl__niz{display:flex; justify-content:space-between; align-items:flex-end; gap:30px} .predl__zamet{font-size:12px; line-height:17px; color:var(--muted); max-width:380px} .sprosit{height:34px; padding:0 18px; border:1px solid var(--accent); border-radius:3px; background:#fff; color:var(--accent); font-size:14px; cursor:pointer} /* ЧЕМ ОТЛИЧАЕТСЯ ОТ АМАЯМЫ: у них один ряд поставщиков, у нас одно предложение. */ /* НИЖНИЕ БЛОКИ КАРТОЧКИ — геометрия блока «может подойти для» у Амаямы (скриншот владельца, масштаб 1,5618): шапка 58 с линией под ней, отступ слева 20, колонка подписей 106, шаг строк 28. Линий между строками нет. */ .bl{margin-top:34px; border:1px solid var(--line); border-radius:5px} .bl__zag{display:flex; justify-content:space-between; align-items:center; height:58px; padding:0 20px; border-bottom:1px solid var(--line); font-size:16px; font-weight:700} .bl__zag span{font-size:14px; font-weight:400; color:var(--muted)} .bl__tel{padding:10px 20px 10px} .bl__ry{display:flex; padding:8px 0; font-size:14px; line-height:28px} .bl__ry > div:first-child{width:130px; flex:none; color:var(--muted)} .bl__ry > div:last-child{flex:1} .bl__ry a{margin-right:18px} .pohozhie{margin-top:34px} .pohozhie__setka{display:grid; grid-template-columns:repeat(3,1fr); gap:0 20px; padding:10px 20px 14px} .pohozhie__setka a{font-size:14px; line-height:28px} .seo-tekst{margin:34px 0 72px; font-size:14px; line-height:22px; color:var(--muted)} .razdel-g{margin-bottom:34px} .razdel-g__imya{margin-bottom:14px; font-size:20px; line-height:18px} .gtext{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-flow:column; column-gap:20px} .gtext a{font-size:16px; line-height:29px} .pokazat{border-bottom:1px dashed var(--accent)} .pohozhie__ryad{padding:14px 20px; font-size:14px; line-height:28px} .pohozhie__ryad .razd{margin:0 8px; color:var(--dim)} .bl__ry--tekst > div:first-child{width:auto; color:var(--text)} .bl__ry--tekst a{margin-right:0} /* СПИСОК ДЕТАЛЕЙ ГРУППЫ. Строка та же, что на живом сайте: имя и номер слева, цена справа. Размеры из шкалы: имя 16, номер 14, цена 16. */ .spisok{margin-bottom:30px; border-top:1px solid var(--line)} .spisok__r{display:flex; justify-content:space-between; align-items:center; gap:30px; padding:12px 4px; border-bottom:1px solid var(--line); color:var(--text)} .spisok__r:hover{background:#fafbfc; text-decoration:none} .spisok__imya{font-size:16px; line-height:24px; color:var(--accent)} .spisok__r:hover .spisok__imya{text-decoration:underline} .spisok__nomer{font-size:14px; line-height:20px; color:var(--muted)} .spisok__cena{font-size:16px; line-height:24px; white-space:nowrap} /* СТРАНИЦА ГРУППЫ (07.10.2026). Слева общая схема группы — ориентир, не точная под машину, без подсветки; справа список по видам детали. Блок лежит на странице как обычный текст и едет вместе с ней вверх и вниз (НЕ прилипает к окну: владелец 07.10.2026 «не должно зависать»); внутри себя прокручивается только таблица. ДВЕ РАВНЫЕ ПОЛОВИНЫ, как у Амаямы (замер 600 | 11 | 598 из 1210). ВЫСОТА БЛОКА ЗАДАНА ЧИСЛОМ, 462 (у Амаямы ~462, замер по скриншоту владельца), а не от окна: он целиком влезает в окно высотой 625 с запасом и видно, где он начинается и кончается. Где схемы нет, слева серая заглушка, раскладка та же. ЧИСЛА ТАБЛИЦЫ — С ЭКРАНА АМАЯМЫ (скриншот владельца, масштаб 1,5618, подтверждены по ширине строк): весь текст 12, строка в одну линию 33, в две 46, заголовок вида 30 (12/700), шапка 12/600, кнопка корзины 30×22, шаг строк в ячейке 18. */ .gstr{display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(0, 1fr); gap:11px; margin:22px 0 30px; align-items:start; height:462px} .gstr__shema{height:100%; border:1px solid var(--line); border-radius:5px; padding:10px; display:flex; align-items:center; justify-content:center} .gstr__shema img{display:block; max-width:100%; max-height:100%} .gstr__zaglushka{height:100%; border-radius:5px; background:var(--plashka); color:var(--dim); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; font-size:12px} .gstr__tabl{height:100%; border:1px solid var(--line); border-radius:5px; overflow-y:auto} .gstr__tabl table{width:100%; border-collapse:collapse} .gstr__tabl th{position:sticky; top:0; z-index:1; height:33px; padding:0 10px; background:var(--plashka); border-bottom:1px solid #e6e6e6; text-align:left; font-size:12px; line-height:18px; font-weight:600; color:var(--text)} .gstr__tabl td{height:33px; padding:5px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle; font-size:12px; line-height:18px} .gstr__tabl .poz td{height:29px; padding:5px 10px; background:var(--plashka); font-weight:700} .poz__n{float:right; font-weight:400; color:var(--muted)} .t-nomer a{white-space:nowrap} .t-cena{white-space:nowrap} .t-kor{width:50px; text-align:right} .gstr__tabl .v-korzinu{width:30px; height:22px} .gstr__tabl .v-korzinu svg{width:14px; height:14px} /* КАРТОЧКА НА ЖИВОМ САЙТЕ. Схема узла в рамке «фото»; «Показать все» — без скрипта, на
. */ .foto-detal img{max-width:100%; max-height:200px; object-fit:contain; background:#fff} .pokazat-vse{display:inline} .pokazat-vse summary{display:inline; list-style:none; cursor:pointer; color:var(--accent); border-bottom:1px dashed var(--accent)} .pokazat-vse summary::-webkit-details-marker{display:none} .pokazat-vse[open] summary{margin-right:18px} .pokazat-vse a, .pokazat-vse span{margin-right:18px} .bl__ry a, .bl__ry span{margin-right:18px; white-space:nowrap} /* «Показать ещё» в конце таблицы группы. */ .gstr__esche{padding:12px 10px; text-align:center} .esche{height:33px; padding:0 18px; border:1px solid var(--accent); border-radius:3px; background:#fff; color:var(--accent); font-size:12px; font-family:inherit; cursor:pointer} .esche:disabled{opacity:.5; cursor:default} .postavka__nomer a{color:inherit}