/* * Информационные страницы (макеты Service Page.dc.html и Info Pages.dc.html, README §13): услуги, хаб «Услуги», прайс; * контакты, вопросы и ответы, бренды, вакансии, документы добавляют свои разделы ниже. Разметка — template/information/ivanko_service*.twig * и template/ivanko/info/*.twig, поведение — js/ivanko-info.js, сервер — controller/information/ivanko_service.php. * * Корень #ii, свои токены (набор тот же, что у #iac в ivanko-cabinet.css). blue.css и responsive.css темы грузятся ПОСЛЕ addStyle, * и только id-специфичность надёжно их перебивает. blue.css прячет все svg правилом body svg { display: none } — у каждой иконки * display задан явно (.ii-i). * * Раскладка: поля 64 (>= 1280), 32 (768-1279), 16 (< 768) — как в кабинете. Страница услуги: колонка + карточка контактов 360 * (gap 48, карточка липкая, top 24) с 1024; уже — одна колонка, карточка после контента, на телефоне ещё и липкий бар 52. */ #ii { --ink: #15181C; --ink-2: #2E343B; --muted: #454B53; --muted-2: #656B74; --border: #E2E5E9; --border-input: #D5DAE0; --bg-subtle: #F3F5F7; --bg-panel: #F5F7F9; --brand: #1B6FB3; --brand-hover: #124F82; --brand-tint: #EEF4FA; --brand-line: #C9DCEE; --cta: #FFB224; --cta-hover: #F5A00F; --ok: #1D9A55; --ok-text: #1D7A45; --ok-tint: #E8F5EE; --warn: #8A5300; --warn-tint: #FFF4DE; --ii-pad: 64px; font-family: 'Golos Text', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; font-size: 15px; line-height: 1.4; color: var(--ink); text-align: left; -webkit-font-smoothing: antialiased; } #ii *, #ii *::before, #ii *::after { box-sizing: border-box; } #ii [hidden] { display: none !important; } #ii a { color: var(--brand); text-decoration: none; background: none; } #ii a:hover { color: var(--brand-hover); text-decoration: underline; } #ii button { font-family: inherit; margin: 0; letter-spacing: normal; text-transform: none; cursor: pointer; } #ii h1, #ii h2, #ii h3, #ii p, #ii ol, #ii ul, #ii table { margin: 0; padding: 0; text-transform: none; } #ii ol, #ii ul { list-style: none; } #ii .ii-i { display: block; flex: none; width: 1em; height: 1em; font-size: 20px; fill: currentColor; } #ii a:focus-visible, #ii button:focus-visible { outline: 3px solid rgba(27, 111, 179, .45); outline-offset: 2px; } /* ============================== Каркас страницы ============================== */ #ii .ii-wrap { max-width: 1440px; margin: 0 auto; padding: 20px var(--ii-pad) 80px; display: flex; flex-direction: column; gap: 32px; } #ii .ii-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--muted-2); } #ii .ii-crumbs a { color: var(--muted); } #ii .ii-crumbs a:hover { color: var(--brand); } #ii .ii-sep { color: #B5BBC3; } /* Заголовок страницы: текст слева, необязательное фото 16:10 справа (520 / 380) */ #ii .ii-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; } #ii .ii-hero.has-photo { grid-template-columns: minmax(0, 1fr) 520px; gap: 48px; } #ii .ii-hero-t { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #ii .ii-h1 { font-size: 30px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; } #ii .ii-lead { max-width: 720px; font-size: 17px; line-height: 1.5; color: var(--muted); } #ii .ii-photo { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--bg-subtle); } #ii .ii-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } #ii .ii-h2 { font-size: 22px; font-weight: 700; line-height: 1.25; } /* Кнопки */ #ii .ii-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; } #ii .ii-btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border: 0; border-radius: 10px; font-size: 17px; font-weight: 700; line-height: 1.1; text-decoration: none; text-align: center; } #ii .ii-btn:hover { text-decoration: none; } #ii .ii-btn--cta { background: var(--cta); color: var(--ink); } #ii .ii-btn--cta:hover { background: var(--cta-hover); color: var(--ink); } #ii .ii-btn--outline { padding: 0 20px; border: 1.5px solid var(--brand); background: #fff; font-size: 16px; font-weight: 600; color: var(--brand); } #ii .ii-btn--outline:hover { background: var(--brand-tint); color: var(--brand); } #ii .ii-btn--outline .ii-i { font-size: 20px; } /* Страница услуги: основная колонка и карточка контактов */ #ii .ii-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 48px; align-items: start; } #ii .ii-main { display: flex; flex-direction: column; gap: 48px; min-width: 0; } #ii .ii-block { display: flex; flex-direction: column; gap: 16px; min-width: 0; } /* ============================== Блоки ============================== */ /* Текст */ #ii .ii-text { display: flex; flex-direction: column; gap: 14px; max-width: 720px; } #ii .ii-text p { font-size: 16px; line-height: 1.6; } #ii .ii-text b, #ii .ii-text strong { font-weight: 700; } /* Цифры */ #ii .ii-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; padding: 24px; border-radius: 16px; background: var(--bg-subtle); } #ii .ii-num { display: flex; flex-direction: column; gap: 4px; } #ii .ii-num-v { font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.01em; } #ii .ii-num-l { font-size: 13px; line-height: 1.4; color: var(--muted); } /* Крупная цифра («100 рублей») */ #ii .ii-big { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 24px; border-radius: 16px; background: var(--bg-subtle); } #ii .ii-big-v { font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.02em; } #ii .ii-big-l { flex: 1 1 240px; font-size: 16px; line-height: 1.5; color: var(--ink-2); } /* Преимущества: 4 карточки — 2 колонки, 6 — 3, на узкой колонке 2, на телефоне 1 */ #ii .ii-adv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #ii .ii-adv--1 { grid-template-columns: minmax(0, 1fr); } #ii .ii-adv--2, #ii .ii-adv--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-adv-i { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; } #ii .ii-adv-ic { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } #ii .ii-adv-ic .ii-i { font-size: 24px; } #ii .ii-adv-t { font-size: 16px; font-weight: 600; line-height: 1.3; } #ii .ii-adv-d { font-size: 14px; line-height: 1.5; color: var(--muted); } /* «Что входит»: галочки в две колонки */ #ii .ii-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; } #ii .ii-incl li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; } #ii .ii-incl-ic { margin-top: 2px; font-size: 22px; color: var(--ok); } /* Шаги: горизонтально с линией (до 4 в ряд, иначе 3), на телефоне — вертикальный рельс */ #ii .ii-steps { display: grid; gap: 24px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); } #ii .ii-steps--c1 { grid-template-columns: minmax(0, 1fr); } #ii .ii-steps--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-steps--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } #ii .ii-step { display: flex; flex-direction: column; gap: 12px; min-width: 0; } #ii .ii-step-rail { display: flex; align-items: center; gap: 8px; } #ii .ii-step-n { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand); font-size: 15px; font-weight: 700; color: #fff; } #ii .ii-step-line { flex: 1; min-width: 2px; height: 2px; background: var(--brand-line); } #ii .ii-steps--c3 .ii-step:nth-child(3n) .ii-step-line, #ii .ii-steps--c4 .ii-step:nth-child(4n) .ii-step-line, #ii .ii-steps--c2 .ii-step:nth-child(2n) .ii-step-line, #ii .ii-step:last-child .ii-step-line { visibility: hidden; } #ii .ii-step-body { display: flex; flex-direction: column; gap: 4px; } #ii .ii-step-t { font-size: 16px; font-weight: 600; line-height: 1.35; } #ii .ii-step-d { font-size: 14px; line-height: 1.5; color: var(--muted); } /* «Важно»: info (brand-tint) и warn */ #ii .ii-note { display: flex; align-items: flex-start; gap: 12px; max-width: 720px; padding: 16px; border-radius: 12px; } #ii .ii-note--info { background: var(--brand-tint); } #ii .ii-note--warn { background: var(--warn-tint); } #ii .ii-note-ic { font-size: 24px; } #ii .ii-note--info .ii-note-ic { color: var(--brand); } #ii .ii-note--warn .ii-note-ic { color: var(--warn); } #ii .ii-note-b { display: flex; flex-direction: column; gap: 6px; min-width: 0; font-size: 14px; line-height: 1.5; } #ii .ii-note-t { font-size: 15px; font-weight: 600; } #ii .ii-note-l { display: flex; flex-direction: column; gap: 4px; padding-left: 18px; list-style: disc; } /* Плашки марок: чип 36 высотой, со ссылкой — brand-tint и стрелка */ #ii .ii-chips-wrap { display: flex; flex-direction: column; gap: 8px; } #ii .ii-chips-g { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); } #ii .ii-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #9AA2AC; } #ii .ii-dot--ok { background: var(--ok); } #ii .ii-chips { display: flex; flex-wrap: wrap; gap: 8px; } #ii .ii-chip { display: flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 14px; font-weight: 600; color: var(--ink-2); } #ii .ii-chip--link { gap: 4px; padding: 0 10px 0 14px; border-color: #D6E4F1; background: var(--brand-tint); color: var(--brand); } #ii .ii-chip--link:hover { border-color: var(--brand); text-decoration: none; } #ii .ii-chip-ic { font-size: 16px; } #ii .ii-chips-hint { margin-top: 8px; font-size: 13px; color: var(--muted-2); } /* Вопросы: аккордеон, все ответы в разметке, первый открыт */ #ii .ii-faq { max-width: 720px; border-top: 1px solid var(--border); } #ii .ii-faq-i { border-bottom: 1px solid var(--border); } #ii .ii-faq-h { font-size: 16px; font-weight: 600; } #ii .ii-faq-b { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 14px 0; border: 0; background: none; text-align: left; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); } #ii .ii-faq-b span { flex: 1; } #ii .ii-faq-ic { font-size: 24px; color: var(--muted); transition: transform .2s; } #ii .ii-faq-b[aria-expanded="true"] .ii-faq-ic { transform: rotate(180deg); } #ii .ii-faq-a { padding: 0 32px 16px 0; font-size: 15px; line-height: 1.6; color: var(--ink-2); } #ii .ii-faq-a ul { margin: 8px 0; padding-left: 20px; list-style: disc; } #ii .ii-faq-a li + li { margin-top: 4px; } /* Призыв */ #ii .ii-cta { display: flex; flex-direction: column; gap: 8px; padding: 32px; border-radius: 16px; background: var(--bg-subtle); } #ii .ii-cta-t { font-size: 22px; font-weight: 700; line-height: 1.25; } #ii .ii-cta-d { font-size: 15px; line-height: 1.5; color: var(--muted); } #ii .ii-cta .ii-actions { margin-top: 10px; } /* Другие услуги */ #ii .ii-other { display: flex; flex-direction: column; gap: 16px; } #ii .ii-other-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } #ii .ii-other-c { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); } #ii .ii-other-c:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; } #ii .ii-other-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } #ii .ii-other-ic .ii-i { font-size: 22px; } #ii .ii-other-b { display: flex; flex-direction: column; gap: 4px; min-width: 0; } #ii .ii-other-t { font-size: 15px; font-weight: 600; line-height: 1.3; } #ii .ii-other-s { font-size: 13px; line-height: 1.45; color: var(--muted); } #ii .ii-more { display: flex; align-items: center; align-self: flex-start; gap: 4px; min-height: 44px; font-size: 15px; font-weight: 600; } #ii .ii-more .ii-i { font-size: 18px; } /* ============================== Прайс ============================== */ #ii .ii-price { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #ii .ii-ptabs { display: flex; flex-wrap: wrap; gap: 4px; align-self: flex-start; max-width: 100%; padding: 4px; border-radius: 10px; background: var(--bg-subtle); } #ii .ii-ptab { min-height: 40px; padding: 8px 12px; border: 0; border-radius: 7px; background: transparent; text-align: left; font-size: 14px; font-weight: 500; color: var(--ink); } #ii .ii-ptab[aria-selected="true"] { background: #fff; font-weight: 600; box-shadow: 0 1px 3px rgba(20, 30, 40, .12); } #ii .ii-ppanel { display: flex; flex-direction: column; gap: 14px; min-width: 0; } #ii .ii-pcap { font-size: 14px; color: var(--muted); } /* Таблица: первая колонка липкая, цифры табличные, горизонтальный скролл внутри рамки */ #ii .ii-pscroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } #ii .ii-ptable { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; } #ii .ii-ptable th, #ii .ii-ptable td { padding: 12px; border-bottom: 1px solid #F0F2F4; background: #fff; text-align: right; white-space: nowrap; } #ii .ii-ptable thead th { border-bottom-color: var(--border); background: var(--bg-panel); font-weight: 600; color: var(--muted); } #ii .ii-ptable .ii-pname { position: sticky; left: 0; z-index: 1; min-width: 220px; padding-left: 16px; text-align: left; white-space: normal; } #ii .ii-ptable tbody .ii-pname { font-weight: 500; box-shadow: 1px 0 0 var(--border); } #ii .ii-ptable tbody tr:last-child th, #ii .ii-ptable tbody tr:last-child td { border-bottom: 0; } #ii .ii-ptable td.ii-pspan { text-align: center; } #ii .ii-ptable .ii-pgroup th { position: static; background: var(--bg-panel); text-align: center; font-weight: 600; box-shadow: none; } /* Телефон: сегменты диаметра (5 в ряд) и список «услуга — цена» без горизонтального скролла */ #ii .ii-pmob { display: none; flex-direction: column; gap: 12px; } #ii .ii-pseg-wrap { display: flex; flex-direction: column; gap: 8px; } #ii .ii-pseg-l { font-size: 14px; font-weight: 600; } #ii .ii-pseg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 10px; background: var(--bg-subtle); } #ii .ii-pseg-b { height: 44px; padding: 0 2px; border: 0; border-radius: 7px; background: transparent; font-size: 14px; font-weight: 500; color: var(--ink); } #ii .ii-pseg-b[aria-checked="true"] { background: #fff; font-weight: 700; box-shadow: 0 1px 3px rgba(20, 30, 40, .12); } #ii .ii-plist { display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: 12px; } #ii .ii-plist-r { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 14px; border-top: 1px solid #F0F2F4; font-size: 15px; } #ii .ii-plist-r:first-child, #ii .ii-plist-g:first-child { border-top: 0; } #ii .ii-plist-g { padding: 10px 14px 8px; border-top: 1px solid #F0F2F4; background: var(--bg-panel); font-size: 13px; font-weight: 600; color: var(--muted); } #ii .ii-plist-n { line-height: 1.4; } #ii .ii-plist-v { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; } #ii .ii-pnotes-t { margin-top: 2px; font-size: 13px; font-weight: 600; color: var(--muted); } #ii .ii-pnotes { display: flex; flex-direction: column; gap: 2px; padding-left: 18px; list-style: disc; font-size: 13px; line-height: 1.5; color: var(--muted); } /* ============================== Карточка контактов и липкий бар ============================== */ #ii .ii-card { position: sticky; top: calc(var(--ih-h, 60px) + 24px); display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; background: #fff; box-shadow: 0 2px 12px rgba(20, 30, 40, .06); } #ii .ii-card-h { display: none; font-size: 20px; font-weight: 700; } #ii .ii-card-city { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); } #ii .ii-card-city b { color: var(--ink); } #ii .ii-card-city .ii-i { font-size: 18px; } #ii .ii-linkbtn { min-height: 32px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--brand); } #ii .ii-linkbtn:hover { color: var(--brand-hover); text-decoration: underline; } #ii .ii-card-dept { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--border); } #ii .ii-card-dept.is-fixed { padding-top: 0; border-top: 0; } #ii .ii-card-dn { font-size: 14px; font-weight: 600; line-height: 1.35; } #ii .ii-status { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted-2); } #ii .ii-status.is-open { color: var(--ok-text); } #ii .ii-status.is-open .ii-dot { background: var(--ok); } #ii .ii-card-tel { margin-top: 4px; font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } #ii .ii-card-tel:hover { color: var(--brand); } #ii .ii-card-tel2 { display: flex; align-items: center; min-height: 28px; font-size: 15px; color: var(--ink); font-variant-numeric: tabular-nums; } #ii .ii-card-tel2:hover { color: var(--brand); } #ii .ii-card-info { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-2); } #ii .ii-card-info > span, #ii .ii-card-info > a { display: flex; gap: 8px; color: var(--ink-2); } #ii .ii-card-info .ii-i { margin-top: 1px; font-size: 18px; color: var(--muted-2); } #ii .ii-card-d2 { display: flex; flex-direction: column; gap: 4px; padding-top: 12px; border-top: 1px solid var(--border); } #ii .ii-card-d2n { font-size: 13px; color: var(--muted); } #ii .ii-card-d2r { display: flex; align-items: center; justify-content: space-between; gap: 8px; } #ii .ii-card-d2t { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } #ii .ii-card-d2s { font-size: 12px; color: var(--muted-2); } #ii .ii-card-d2s.is-open { color: var(--ok-text); } #ii .ii-card-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; border-radius: 10px; background: var(--bg-subtle); font-size: 14px; font-weight: 600; color: var(--ink); } #ii .ii-card-link:hover { color: var(--ink); text-decoration: none; background: #E9EDF1; } #ii .ii-brand { color: var(--brand); } #ii .ii-card-req { width: 100%; } #ii .ii-bar { display: none; } /* ============================== Хаб «Услуги» ============================== */ #ii .ii-hub { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #ii .ii-hub-c { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: var(--ink); } #ii .ii-hub-c:hover { border-color: var(--brand); box-shadow: 0 2px 12px rgba(20, 30, 40, .06); color: var(--ink); text-decoration: none; } #ii .ii-hub-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } #ii .ii-hub-ic .ii-i { font-size: 24px; } #ii .ii-hub-b { display: flex; flex: 1; flex-direction: column; gap: 6px; min-width: 0; } #ii .ii-hub-t { font-size: 18px; font-weight: 600; line-height: 1.3; } #ii .ii-hub-s { font-size: 14px; line-height: 1.5; color: var(--muted); } #ii .ii-hub-m { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; color: var(--brand); } #ii .ii-hub-m .ii-i { font-size: 18px; } /* ============================== Контакты (пакет B) ============================== */ /* Выбор города: 15 кнопок 44h, 5 в ряд; на телефоне — горизонтальная лента на всю ширину экрана */ #ii .ii-ct-pick { display: flex; flex-direction: column; gap: 10px; } #ii .ii-ct-pick-l { font-size: 14px; font-weight: 600; } #ii .ii-ct-cities { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; } #ii .ii-ct-city { display: flex; align-items: center; height: 44px; padding: 0 14px; border: 1.5px solid var(--border-input); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 500; line-height: 1.1; white-space: nowrap; color: var(--ink); } #ii .ii-ct-city:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; } #ii .ii-ct-city[aria-current="true"] { border-color: var(--brand); background: var(--brand-tint); font-weight: 700; color: var(--brand); } #ii .ii-ct-city[aria-current="true"]:hover { color: var(--brand); } #ii .ii-ct-hint { font-size: 13px; color: var(--muted-2); } /* Левая колонка и карта */ #ii .ii-ct-body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: stretch; } #ii .ii-ct-left { display: flex; flex-direction: column; gap: 16px; min-width: 0; } #ii .ii-ct-place { display: flex; flex-direction: column; gap: 12px; } #ii .ii-ct-addr { display: flex; gap: 8px; font-size: 17px; font-weight: 600; line-height: 1.4; } #ii .ii-ct-addr .ii-i { flex: none; margin-top: 1px; font-size: 22px; } #ii .ii-ct-routes { display: flex; flex-wrap: wrap; gap: 8px; } #ii .ii-ct-route { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border: 1.5px solid var(--border-input); border-radius: 10px; font-size: 15px; font-weight: 600; color: var(--ink); } #ii .ii-ct-route:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; } #ii .ii-ct-route .ii-i { font-size: 20px; } /* Карточка отдела: слева название, статус и номера, справа часы и e-mail (от 1280) */ #ii .ii-ct-dept { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; padding: 20px; border: 1px solid var(--border); border-radius: 16px; } #ii .ii-ct-dmain { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #ii .ii-ct-dn { font-size: 16px; font-weight: 700; line-height: 1.35; } #ii .ii-ct-tel { margin-top: 4px; font-size: 22px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; } #ii .ii-ct-tel:hover { color: var(--brand); } #ii .ii-ct-link { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 16px; border-radius: 12px; background: var(--bg-subtle); font-size: 15px; font-weight: 600; color: var(--ink); } #ii .ii-ct-link:hover { background: #E9EDF1; color: var(--ink); text-decoration: none; } #ii .ii-ct-link .ii-i { font-size: 22px; } #ii .ii-ct-link-n { margin-left: auto; font-size: 14px; font-weight: 400; color: var(--muted-2); text-align: right; } /* Карта: заглушка, iframe подставляет js/ivanko-info.js */ #ii .ii-ct-map { position: relative; display: flex; align-items: center; justify-content: center; min-height: 480px; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: var(--bg-panel); } #ii .ii-ct-map-ph { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px; text-align: center; } #ii .ii-ct-map-ic { font-size: 40px; color: var(--brand); } #ii .ii-ct-map-a { max-width: 320px; font-size: 16px; font-weight: 600; } #ii .ii-ct-map-h { font-size: 13px; color: var(--muted-2); } #ii .ii-ct-map-b { height: 44px; padding: 0 18px; border: 1.5px solid var(--brand); border-radius: 10px; background: #fff; font-size: 15px; font-weight: 600; color: var(--brand); } #ii .ii-ct-map-b:hover { background: var(--brand-tint); } #ii .ii-ct-map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } #ii .ii-ct-map.is-on .ii-ct-map-ph { display: none; } /* Форма и реквизиты */ #ii .ii-ct-lower { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: start; } #ii .ii-ct-form { display: flex; flex-direction: column; gap: 16px; min-width: 0; max-width: 720px; } #ii .ii-form { display: flex; flex-direction: column; gap: 14px; margin: 0; } #ii .ii-form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; } #ii .ii-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } #ii .ii-field-l { margin: 0; font-size: 14px; font-weight: 600; } #ii .ii-input { display: block; width: 100%; height: 48px; margin: 0; padding: 0 14px; border: 1.5px solid var(--border-input); border-radius: 10px; background: #fff; box-shadow: none; font-family: inherit; font-size: 16px; line-height: 1.4; color: var(--ink); } #ii textarea.ii-input { height: auto; min-height: 112px; padding: 12px 14px; resize: vertical; } #ii .ii-input:focus { border-color: var(--brand); outline: 0; box-shadow: 0 0 0 3px rgba(27, 111, 179, .2); } #ii .ii-input.is-err { border-color: #E5322D; } #ii .ii-err { font-size: 13px; line-height: 1.4; color: #C42B26; } #ii .ii-err--form { font-size: 14px; } #ii .ii-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } #ii .ii-form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; } #ii .ii-form-btn { padding: 0 28px; } #ii .ii-form-btn[disabled] { opacity: .65; cursor: default; } #ii .ii-form-note { flex: 1 1 200px; font-size: 12px; line-height: 1.4; color: var(--muted-2); } #ii .ii-ok { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-radius: 12px; background: var(--ok-tint); font-size: 15px; line-height: 1.5; } #ii .ii-ok-ic { flex: none; font-size: 24px; color: var(--ok); } @media (min-width: 1280px) { #ii .ii-ct-dept { grid-template-columns: minmax(0, 1fr) minmax(0, 220px); } } @media (max-width: 767px) { #ii .ii-ct-cities { display: flex; margin: 0 calc(-1 * var(--ii-pad)); padding: 0 var(--ii-pad) 4px; overflow-x: auto; scrollbar-width: none; } #ii .ii-ct-cities::-webkit-scrollbar { display: none; } #ii .ii-ct-city { flex: none; } #ii .ii-ct-body { grid-template-columns: minmax(0, 1fr); } #ii .ii-ct-map { min-height: 240px; } #ii .ii-form-row { grid-template-columns: minmax(0, 1fr); } #ii .ii-form-btn { flex: 1 1 100%; } #ii .ii-ct-lower { gap: 32px; } } /* ============================== Вопросы и ответы (пакет B) ============================== */ #ii .ii-col { display: flex; flex-direction: column; gap: 48px; min-width: 0; max-width: 720px; } #ii .ii-fchips { display: flex; flex-wrap: wrap; gap: 8px; } #ii .ii-fchip { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--border); border-radius: 20px; font-size: 14px; font-weight: 600; color: var(--ink); } #ii .ii-fchip:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; } #ii .ii-fchip .ii-i { font-size: 18px; color: var(--brand); } #ii .ii-fsec { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: calc(var(--ih-h, 60px) + 24px); } #ii .ii-fsec-h { display: flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 700; line-height: 1.25; } #ii .ii-fsec-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } #ii .ii-fsec-ic .ii-i { font-size: 22px; } #ii .ii-faq-tbl { margin-top: 12px; border-collapse: collapse; font-size: 14px; min-width: 280px; } #ii .ii-faq-tbl th { padding: 8px 24px 8px 0; border-bottom: 1px solid var(--border); text-align: left; font-weight: 600; color: var(--muted); } #ii .ii-faq-tbl td { padding: 8px 24px 8px 0; border-bottom: 1px solid #F0F2F4; } #ii .ii-faq-tbl td + td { font-weight: 700; } #ii .ii-faq-a .ii-note { margin-top: 12px; } #ii .ii-faq-a .ii-faq-tbl + ul { margin-top: 12px; } @media (max-width: 767px) { #ii .ii-col { gap: 32px; } #ii .ii-fsec-h { font-size: 20px; } #ii .ii-fsec { scroll-margin-top: 68px; } } /* ============================== Бренды (пакет C) ============================== */ #ii .ii-h3 { font-size: 18px; font-weight: 600; line-height: 1.3; } #ii .ii-tags { display: flex; flex-wrap: wrap; gap: 8px; } #ii .ii-tag { display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--bg-subtle); font-size: 13px; font-weight: 600; color: var(--ink-2); } /* Список: карточки 4 / 3 / 2. Логотипы — jpg на белом, поэтому multiply: белое сливается с панелью */ #ii .ii-brands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } #ii .ii-bcard { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border); border-radius: 16px; background: #fff; color: var(--ink); } #ii .ii-bcard:hover { border-color: var(--brand); box-shadow: 0 2px 12px rgba(20, 30, 40, .06); color: var(--ink); text-decoration: none; } #ii .ii-bcard-logo { display: flex; align-items: center; justify-content: center; height: 120px; padding: 12px 16px; background: var(--bg-panel); } #ii .ii-bcard-logo img, #ii .ii-bhead-logo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; } #ii .ii-bcard-b { display: flex; flex-direction: column; gap: 2px; padding: 16px; } #ii .ii-bcard-n { font-size: 16px; font-weight: 600; line-height: 1.3; } #ii .ii-bcard-c { font-size: 12px; color: var(--muted-2); } #ii .ii-bcard-t { display: -webkit-box; margin-top: 6px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; line-height: 1.5; color: var(--muted); } /* Страница бренда: логотип 160x80 слева от h1 */ #ii .ii-bhead { display: flex; align-items: center; gap: 24px; } #ii .ii-bhead-logo { display: flex; align-items: center; justify-content: center; flex: none; width: 160px; height: 80px; padding: 8px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-panel); } #ii .ii-bhead-t { display: flex; flex-direction: column; gap: 10px; min-width: 0; } /* Блок «Стёкла бренда в каталоге» */ #ii .ii-bcat { display: flex; flex-direction: column; gap: 16px; } #ii .ii-bcat-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; } #ii .ii-bcat-count { font-size: 14px; color: var(--muted-2); } #ii .ii-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } #ii .ii-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink); } #ii .ii-tile:hover { border-color: var(--brand); color: var(--ink); text-decoration: none; } #ii .ii-tile-img { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: var(--bg-panel); } #ii .ii-tile-img img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; } #ii .ii-tile-n { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 14px; font-weight: 600; line-height: 1.35; } #ii .ii-tile-c { font: 500 12px 'JetBrains Mono', ui-monospace, Consolas, monospace; color: var(--muted); overflow-wrap: anywhere; } #ii .ii-tile-p { font-size: 16px; font-weight: 700; } #ii .ii-tile-p.is-req { font-size: 14px; font-weight: 600; color: var(--muted); } #ii .ii-tile-s { font-size: 12px; color: var(--muted-2); } #ii .ii-tile-s.is-ok { color: var(--ok-text); } #ii .ii-bcat-btn { align-self: flex-start; } #ii .ii-bother { display: flex; flex-direction: column; gap: 12px; } #ii .ii-bother-l { display: flex; flex-wrap: wrap; gap: 8px; } #ii .ii-bother-i { display: flex; align-items: center; justify-content: center; min-width: 120px; height: 56px; padding: 0 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-panel); font-size: 14px; font-weight: 700; text-align: center; color: var(--ink-2); } #ii .ii-bother-i:hover { border-color: var(--brand); color: var(--ink-2); text-decoration: none; } @media (max-width: 1279px) { #ii .ii-brands { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 767px) { #ii .ii-brands { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } #ii .ii-bcard-logo { height: 80px; padding: 8px 12px; } #ii .ii-bcard-b { padding: 12px; } #ii .ii-bcard-n { font-size: 14px; } #ii .ii-bcard-t { display: none; } #ii .ii-bhead { gap: 16px; } #ii .ii-bhead-logo { width: 120px; height: 60px; padding: 6px; border-radius: 10px; } #ii .ii-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-bcat-btn { align-self: stretch; } #ii .ii-bother-l { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-bother-i { min-width: 0; } } /* ============================== Вакансии (пакет D) ============================== */ #ii .ii-vlist { display: flex; flex-direction: column; max-width: 960px; border-top: 1px solid var(--border); } #ii .ii-vrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; padding: 20px 0; border-bottom: 1px solid var(--border); color: var(--ink); } #ii .ii-vrow:hover { background: #FAFBFC; color: var(--ink); text-decoration: none; } #ii .ii-vrow-b { display: flex; flex: 1 1 320px; flex-direction: column; gap: 8px; min-width: 0; } #ii .ii-vrow-t { font-size: 18px; font-weight: 700; line-height: 1.3; } #ii .ii-vrow-c { display: flex; flex-wrap: wrap; gap: 6px; } #ii .ii-vchip { display: flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 6px; background: var(--bg-subtle); font-size: 13px; font-weight: 600; color: var(--ink-2); } #ii .ii-vchip.is-ok { background: var(--ok-tint); color: var(--ok-text); } #ii .ii-vrow-m { display: flex; align-items: center; gap: 4px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--brand); } #ii .ii-vrow-m .ii-i { font-size: 18px; } #ii .ii-vempty { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; max-width: 720px; padding: 32px; border: 1px dashed var(--border-input); border-radius: 16px; } #ii .ii-vempty-ic { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); } #ii .ii-vempty-ic .ii-i { font-size: 24px; } #ii .ii-vempty-t { font-size: 18px; font-weight: 700; } #ii .ii-vempty-x { font-size: 15px; line-height: 1.5; color: var(--muted); } /* Страница вакансии: факты, разделы списками, карточка отклика справа */ #ii .ii-grid--one { grid-template-columns: minmax(0, 1fr); } #ii .ii-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; } #ii .ii-fact { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px; border-radius: 12px; background: var(--bg-subtle); } #ii .ii-fact dt { margin: 0; font-size: 13px; color: var(--muted); } #ii .ii-fact dd { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; } #ii .ii-fact.is-hi { background: var(--ok-tint); } #ii .ii-fact.is-hi dd { font-size: 20px; } #ii .ii-vsec { display: flex; flex-direction: column; gap: 12px; max-width: 720px; } #ii .ii-vlist-i { display: flex; flex-direction: column; gap: 8px; } #ii .ii-vlist-i li { display: flex; gap: 10px; font-size: 16px; line-height: 1.5; } #ii .ii-vlist-i li::before { content: ''; flex: none; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--brand); } #ii .ii-vcard-h { font-size: 20px; font-weight: 700; } #ii .ii-vcard-call { width: 100%; } @media (max-width: 1279px) { #ii .ii-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #ii .ii-vrow { padding: 16px 0; } #ii .ii-vrow-t { font-size: 17px; } #ii .ii-vempty { padding: 20px; } } /* ============================== Документы (пакет C) ============================== */ #ii .ii-doc { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 48px; align-items: start; } #ii .ii-toc { position: sticky; top: calc(var(--ih-h, 60px) + 24px); display: flex; flex-direction: column; gap: 2px; } #ii .ii-toc-b { display: none; } #ii .ii-toc-t { padding: 0 12px 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } #ii .ii-toc-l { display: flex; flex-direction: column; gap: 2px; } #ii .ii-toc-a { display: flex; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 8px; font-size: 14px; line-height: 1.35; color: var(--ink); } #ii .ii-toc-a:hover { background: var(--bg-subtle); color: var(--ink); text-decoration: none; } #ii .ii-toc-a[aria-current="true"] { background: var(--brand-tint); font-weight: 600; color: var(--brand); } #ii .ii-toc-n { flex: none; color: var(--muted-2); font-variant-numeric: tabular-nums; } #ii .ii-doc-a { display: flex; flex-direction: column; gap: 32px; min-width: 0; } #ii .ii-doc-intro { font-size: 16px; line-height: 1.6; } #ii .ii-doc-s { display: flex; flex-direction: column; gap: 12px; min-width: 0; scroll-margin-top: calc(var(--ih-h, 60px) + 24px); } #ii .ii-doc-h { font-size: 22px; font-weight: 700; line-height: 1.3; } #ii .ii-doc-p { display: flex; flex-direction: column; gap: 12px; min-width: 0; font-size: 16px; line-height: 1.6; } #ii .ii-doc-p ul { padding-left: 22px; list-style: disc; } #ii .ii-doc-p li + li { margin-top: 8px; } #ii .ii-doc-p code { padding: 1px 6px; border-radius: 4px; background: var(--bg-subtle); font: 500 14px 'JetBrains Mono', ui-monospace, Consolas, monospace; } #ii .ii-tscroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 12px; } #ii .ii-doc-tbl { width: 100%; min-width: 480px; border-collapse: collapse; font-size: 14px; line-height: 1.45; } #ii .ii-doc-tbl th { padding: 10px 14px; background: var(--bg-panel); text-align: left; font-weight: 600; color: var(--muted); } #ii .ii-doc-tbl td { padding: 12px 14px; border-top: 1px solid #F0F2F4; vertical-align: top; } #ii .ii-doc-tbl td:first-child { font-weight: 600; } #ii .ii-doc-s .ii-note { max-width: none; } #ii .ii-doc-other { display: flex; flex-direction: column; gap: 6px; padding-top: 24px; border-top: 1px solid var(--border); font-size: 15px; } #ii .ii-doc-other-t { margin-bottom: 4px; font-weight: 600; } #ii .ii-doc-other a { display: flex; align-items: center; min-height: 32px; } @media (max-width: 767px) { #ii .ii-doc { grid-template-columns: minmax(0, 1fr); gap: 24px; } #ii .ii-toc { position: static; padding: 4px 8px; border: 1px solid var(--border); border-radius: 12px; } #ii .ii-toc-t { display: none; } #ii .ii-toc.is-js .ii-toc-b { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 48px; padding: 0 4px; border: 0; background: none; font-size: 15px; font-weight: 600; color: var(--ink); } #ii .ii-toc-ic { font-size: 24px; transition: transform .2s; } #ii .ii-toc.is-open .ii-toc-ic { transform: rotate(180deg); } #ii .ii-toc.is-js:not(.is-open) .ii-toc-l { display: none; } #ii .ii-doc-a { gap: 24px; } #ii .ii-doc-h { font-size: 20px; } #ii .ii-doc-s { scroll-margin-top: 68px; } #ii .ii-doc-tbl { min-width: 0; } } /* ============================== Адаптив ============================== */ @media (max-width: 1279px) { #ii { --ii-pad: 32px; } #ii .ii-hero.has-photo { grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; } #ii .ii-hub { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1199px) { #ii .ii-adv, #ii .ii-adv--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-steps--c3, #ii .ii-steps--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-steps--c3 .ii-step:nth-child(3n) .ii-step-line, #ii .ii-steps--c4 .ii-step:nth-child(4n) .ii-step-line { visibility: visible; } #ii .ii-steps--c3 .ii-step:nth-child(2n) .ii-step-line, #ii .ii-steps--c4 .ii-step:nth-child(2n) .ii-step-line { visibility: hidden; } } @media (max-width: 1023px) { #ii .ii-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } #ii .ii-card { position: static; max-width: 520px; } #ii .ii-hub { grid-template-columns: repeat(2, minmax(0, 1fr)); } #ii .ii-other-g { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #ii { --ii-pad: 16px; } html:has(#ii .ii-bar) { --page-bar-h: 68px; } #ii .ii-wrap { gap: 24px; padding-bottom: 96px; } #ii .ii-hero.has-photo { grid-template-columns: minmax(0, 1fr); gap: 20px; } #ii .ii-h1 { font-size: 22px; } #ii .ii-lead { font-size: 16px; } #ii .ii-main { gap: 32px; } #ii .ii-actions .ii-btn { flex: 1 1 100%; } #ii .ii-nums, #ii .ii-big { padding: 16px; } #ii .ii-adv, #ii .ii-adv--2, #ii .ii-adv--4 { grid-template-columns: minmax(0, 1fr); } #ii .ii-incl { grid-template-columns: minmax(0, 1fr); } #ii .ii-big-v { font-size: 34px; } /* Шаги: вертикальный рельс */ #ii .ii-steps, #ii .ii-steps--c2, #ii .ii-steps--c3, #ii .ii-steps--c4 { grid-template-columns: minmax(0, 1fr); gap: 0; } #ii .ii-step { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; } #ii .ii-step-rail { flex-direction: column; align-self: stretch; } #ii .ii-step-line { flex: 1; width: 2px; min-height: 12px; height: auto; margin-bottom: 4px; } #ii .ii-steps .ii-step .ii-step-line { visibility: visible; } #ii .ii-steps .ii-step:last-child .ii-step-line { visibility: hidden; } #ii .ii-step-body { padding-bottom: 16px; } #ii .ii-cta { padding: 20px; } #ii .ii-cta-t { font-size: 20px; } #ii .ii-other-g { grid-template-columns: minmax(0, 1fr); } #ii .ii-faq-a { padding-right: 8px; } /* Прайс */ #ii .ii-pdesk { display: none; } #ii .ii-pmob { display: flex; } /* Хаб: строкой, иконка слева, без «Подробнее» */ #ii .ii-hub { grid-template-columns: minmax(0, 1fr); gap: 10px; } #ii .ii-hub-c { flex-direction: row; align-items: center; padding: 14px 16px; } #ii .ii-hub-t { font-size: 16px; } #ii .ii-hub-m { display: none; } /* Карточка контактов — после контента, с заголовком; липкий бар снизу */ #ii .ii-card { max-width: none; } #ii .ii-card-h { display: block; } #ii .ii-bar { position: fixed; left: 0; right: 0; bottom: var(--cookie-h, 0px); z-index: 1040; display: flex; gap: 8px; padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(20, 30, 40, .08); } #ii .ii-bar-call { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; height: 52px; border: 1.5px solid var(--brand); border-radius: 10px; line-height: 1.2; color: var(--brand); } #ii .ii-bar-call:hover { text-decoration: none; color: var(--brand); } #ii .ii-bar-t { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; } #ii .ii-bar-t .ii-i { font-size: 18px; } #ii .ii-bar-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } #ii .ii-bar-req { flex: 1; height: 52px; border: 0; border-radius: 10px; background: var(--cta); font-size: 16px; font-weight: 700; color: var(--ink); } } @media (prefers-reduced-motion: reduce) { #ii .ii-faq-ic { transition: none; } } /* ============================== Печать ============================== */ @media print { #ii .ii-bar, #ii .ii-actions, #ii .ii-other, #ii .ii-ptabs, #ii .ii-linkbtn { display: none !important; } #ii .ii-grid { grid-template-columns: minmax(0, 1fr); } #ii .ii-card { position: static; box-shadow: none; } #ii .ii-faq-a[hidden], #ii .ii-ppanel[hidden] { display: flex !important; } #ii .ii-faq-a[hidden] { display: block !important; } #ii .ii-wrap { padding: 0; } /* Документы: без шапки, футера, оглавления и призыва; текст на всю страницу */ #ih, #if, #ii .ii-toc, #ii .ii-doc-other, #ii.ii--doc .ii-cta { display: none !important; } #ii .ii-doc { display: block; } #ii .ii-doc-a { gap: 16px; } #ii .ii-doc-s, #ii .ii-tscroll, #ii .ii-note { break-inside: avoid; } #ii .ii-tscroll { overflow: visible; } } /* ============================== Карта сайта (/karta-sajta) ============================== */ #ii.ii--sitemap .ii-sm-sec { display: flex; flex-direction: column; gap: 16px; } #ii.ii--sitemap .ii-h2 a { color: var(--ink); } #ii.ii--sitemap .ii-h2 a:hover { color: var(--brand); } #ii.ii--sitemap .ii-sm-brands { columns: 5 180px; column-gap: 24px; } #ii.ii--sitemap .ii-sm-brand { break-inside: avoid; padding: 4px 0; font-size: 15px; line-height: 1.4; } #ii.ii--sitemap .ii-sm-models { margin: 2px 0 6px 12px; padding-left: 10px; border-left: 2px solid var(--border); font-size: 14px; } #ii.ii--sitemap .ii-sm-models li { padding: 2px 0; } #ii.ii--sitemap .ii-sm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; } #ii.ii--sitemap .ii-sm-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: #fff; min-width: 0; } #ii.ii--sitemap .ii-sm-t { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; } #ii.ii--sitemap .ii-sm-t a { color: var(--ink); } #ii.ii--sitemap .ii-sm-t a:hover { color: var(--brand); } #ii.ii--sitemap .ii-sm-list { display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.4; } @media (max-width: 1023px) { #ii.ii--sitemap .ii-sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { #ii.ii--sitemap .ii-sm-grid { grid-template-columns: minmax(0, 1fr); } #ii.ii--sitemap .ii-sm-brands { columns: 2 140px; column-gap: 16px; } #ii.ii--sitemap .ii-sm-card { padding: 16px; } }