/* ========================================================================== Посадочная «Весовая. Интеграция 2.0» — nais.ru/software/vesovaya-integratsiya-2-0/ Все правила ограничены корневым классом .nvi2.nvi2-scope, кроме блока «Обвес сайта», который работает только на этой странице. Источник макета: согласованный клиентом прототип (палитра, сетки, типографика). Версия файла меняется через имя (nvi2.v2.css и т.д.) — query-строки закрыты robots.txt. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Обвес сайта. 27.08.2026 по просьбе клиента страница переведена на штатные шапку и подвал nais.ru: собственные .nav и .footer из вёрстки удалены, header.header и footer.footer шаблона больше не гасятся, отступ body под фиксированную шапку не сбрасывается. Гасим только то, что мешает полноширинному лендингу: боковой баннер (position:absolute поверх контента) и крошки. Класс html.nvi2-html ставит скрипт из ; ветка :has() — страховка на случай отключённого JS. -------------------------------------------------------------------------- */ html.nvi2-html > body .side-banner-wrapper, html.nvi2-html > body > .bx-breadcrumb, html.nvi2-html > body .main > .bx-breadcrumb, body:has(> main.main .nvi2.nvi2-scope) .side-banner-wrapper, body:has(> main.main .nvi2.nvi2-scope) .bx-breadcrumb { display: none !important; } /* main шаблона держит внешние отступы под обычные страницы — лендинг идёт от края до края. Отступ body под фиксированную шапку НЕ трогаем. */ html.nvi2-html > body > main.main, body:has(> main.main .nvi2.nvi2-scope) > main.main { margin: 0 !important; padding: 0 !important; } /* overflow-x: clip, а не hidden. hidden на body делает вьюпорт скролл-контейнером и в Chrome ломает плавную прокрутку по якорям; clip только обрезает. Фон белый: тёмный фон шаблона просвечивал бы в местах, где секции лендинга не смыкаются вплотную. */ html.nvi2-html > body, body:has(> main.main .nvi2.nvi2-scope) { overflow-x: hidden; overflow-x: clip; background: #fff; } /* Переход по якорю без JS (ссылка с хешем извне): секции отступают от фиксированной шапки. Клик внутри страницы обрабатывает nvi2.v5.js, он снимает фактическую высоту шапки. */ .nvi2.nvi2-scope [id] { scroll-margin-top: 132px; } @media (max-width: 1699px) and (min-width: 1080px) { .nvi2.nvi2-scope [id] { scroll-margin-top: 102px; } } @media (max-width: 1079px) { .nvi2.nvi2-scope [id] { scroll-margin-top: 126px; } } /* scroll-behavior здесь намеренно НЕ задаётся: часть сборок Chrome при нём игнорирует переход по якорю целиком. Плавность делает assets/nvi2.v1.js, у него есть мгновенный запасной переход и учёт prefers-reduced-motion. */ /* -------------------------------------------------------------------------- 2. Локальный preflight. Прототип собран на Tailwind-сбросе; повторяем его внутри своего слоя, чтобы общий main.min.css не протекал в макет. -------------------------------------------------------------------------- */ .nvi2.nvi2-scope, .nvi2.nvi2-scope *, .nvi2.nvi2-scope *::before, .nvi2.nvi2-scope *::after { box-sizing: border-box; border: 0 solid; margin: 0; padding: 0; } .nvi2.nvi2-scope { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; line-height: 1.5; } .nvi2.nvi2-scope h1, .nvi2.nvi2-scope h2, .nvi2.nvi2-scope h3, .nvi2.nvi2-scope h4 { font-size: inherit; font-weight: inherit; } .nvi2.nvi2-scope b, .nvi2.nvi2-scope strong { font-weight: bolder; } .nvi2.nvi2-scope small { font-size: 80%; } .nvi2.nvi2-scope ul, .nvi2.nvi2-scope ol { list-style: none; } .nvi2.nvi2-scope img, .nvi2.nvi2-scope svg { display: block; vertical-align: middle; } .nvi2.nvi2-scope img { max-width: 100%; height: auto; } .nvi2.nvi2-scope button, .nvi2.nvi2-scope input, .nvi2.nvi2-scope select, .nvi2.nvi2-scope textarea { font: inherit; color: inherit; letter-spacing: inherit; background-color: transparent; border-radius: 0; opacity: 1; } .nvi2.nvi2-scope button { appearance: button; -webkit-appearance: button; } .nvi2.nvi2-scope textarea { resize: vertical; } .nvi2.nvi2-scope ::placeholder { color: #9aa48c; opacity: 1; } /* -------------------------------------------------------------------------- 3. Макет прототипа: состав, сетки, палитра и типографика без изменений. Блок получен из CSS утверждённого прототипа, каждому селектору добавлен корневой класс; медиазапросы переведены с range-синтаксиса на max-width. -------------------------------------------------------------------------- */ .nvi2.nvi2-scope * { box-sizing:border-box } .nvi2.nvi2-scope { color:var(--ink); margin:0; font-family:Arial,sans-serif } .nvi2.nvi2-scope a { color:inherit; text-decoration:none } .nvi2.nvi2-scope .shell { width:min(1180px,100% - 48px); margin:auto } .nvi2.nvi2-scope .btn { background:var(--red); color:#fff; cursor:pointer; border:0; justify-content:space-between; align-items:center; gap:28px; padding:17px 21px; font-size:15px; font-weight:700; transition:all .2s; display:inline-flex } .nvi2.nvi2-scope .btn:hover { background:#cb3527; transform:translateY(-1px) } .nvi2.nvi2-scope .btn.small { gap:10px; padding:12px 16px; font-size:14px } .nvi2.nvi2-scope .hero { background:linear-gradient(120deg,#f8fafb,#e5eef3); border-top:1px solid #e4e9ed; overflow:hidden } .nvi2.nvi2-scope .heroGrid { grid-template-columns:1.1fr .9fr; align-items:center; gap:70px; min-height:655px; display:grid } .nvi2.nvi2-scope .eyebrow,.nvi2.nvi2-scope .num { letter-spacing:.17em; color:var(--blue); font-size:13px; font-weight:700 } .nvi2.nvi2-scope .eyebrow:before { content:""; background:var(--red); vertical-align:middle; width:26px; height:2px; margin-right:9px; display:inline-block } .nvi2.nvi2-scope h1,.nvi2.nvi2-scope h2 { color:var(--deep); letter-spacing:-.045em; margin:0; font-weight:500 } .nvi2.nvi2-scope h1 { font-size:61px; line-height:1.03 } .nvi2.nvi2-scope h1 em,.nvi2.nvi2-scope h2 em { color:var(--cyan); font-style:normal } .nvi2.nvi2-scope .lead { color:#526177; max-width:650px; margin:25px 0 30px; font-size:20px; line-height:1.55 } .nvi2.nvi2-scope .actions { align-items:center; gap:30px; display:flex } .nvi2.nvi2-scope .actions>a:last-child { font-size:15px; font-weight:700 } .nvi2.nvi2-scope .proof { border-top:1px solid #c9d4dd; grid-template-columns:repeat(3,1fr); margin-top:55px; display:grid } .nvi2.nvi2-scope .proof p { margin:0; padding:18px 17px 0 0 } .nvi2.nvi2-scope .proof p+p { border-left:1px solid #c9d4dd; padding-left:17px } .nvi2.nvi2-scope .proof b,.nvi2.nvi2-scope .proof span { display:block } .nvi2.nvi2-scope .proof b { font-size:14px } .nvi2.nvi2-scope .proof span { color:#6f7c8b; margin-top:6px; font-size:13px; line-height:1.5 } .nvi2.nvi2-scope .system { background:#fff; padding:24px; box-shadow:0 25px 60px #092a6229 } .nvi2.nvi2-scope .sysHead { letter-spacing:.1em; justify-content:space-between; margin-bottom:20px; font-size:12px; display:flex } .nvi2.nvi2-scope .sys { border:1px solid var(--line); align-items:center; gap:15px; height:82px; padding:13px; display:flex } .nvi2.nvi2-scope .sys>i { width:48px; height:48px; color:var(--blue); background:#e8f6f8; place-items:center; font-style:normal; font-weight:900; display:grid } .nvi2.nvi2-scope .sys p,.nvi2.nvi2-scope .sys b,.nvi2.nvi2-scope .sys small { margin:0; display:block } .nvi2.nvi2-scope .sys b { font-size:15px } .nvi2.nvi2-scope .sys small { color:#84909d; margin-top:6px; font-size:12px } .nvi2.nvi2-scope .arrow { align-items:center; height:40px; margin-left:37px; display:flex } .nvi2.nvi2-scope .arrow i { background:var(--cyan); width:1px; height:100% } .nvi2.nvi2-scope .arrow span { color:#7d8996; margin-left:10px; font-size:12px } .nvi2.nvi2-scope .sync { background:var(--deep); color:#fff; gap:12px; margin-top:14px; padding:13px 16px; display:flex } .nvi2.nvi2-scope .sync>span,.nvi2.nvi2-scope .sync b,.nvi2.nvi2-scope .sync small { display:block } .nvi2.nvi2-scope .sync small { color:#93a7bf; margin-top:4px; font-size:12px } .nvi2.nvi2-scope .sync b { font-size:13px } .nvi2.nvi2-scope .section { padding-top:105px; padding-bottom:110px } .nvi2.nvi2-scope .num { color:var(--red); margin:0 0 30px } .nvi2.nvi2-scope .title { grid-template-columns:2fr 1fr; align-items:end; gap:80px; margin-bottom:55px; display:grid } .nvi2.nvi2-scope .title h2,.nvi2.nvi2-scope .epd h2,.nvi2.nvi2-scope .contact h2 { font-size:42px; line-height:1.12 } .nvi2.nvi2-scope .title>p { color:var(--muted); margin:0; font-size:15px; line-height:1.7 } .nvi2.nvi2-scope .problemGrid { border:1px solid var(--line); grid-template-columns:repeat(4,1fr); display:grid } .nvi2.nvi2-scope .problemGrid article { border-right:1px solid var(--line); min-height:235px; padding:27px } .nvi2.nvi2-scope .problemGrid article:last-child { border:0 } .nvi2.nvi2-scope .problemGrid span { color:var(--red); font-size:12px } .nvi2.nvi2-scope .problemGrid h3 { margin:65px 0 12px; font-size:18px } .nvi2.nvi2-scope .problemGrid p,.nvi2.nvi2-scope .feature p,.nvi2.nvi2-scope .impl p { color:var(--muted); font-size:15px; line-height:1.65 } .nvi2.nvi2-scope .workflow { background:var(--deep); color:#fff; padding:100px 0 } .nvi2.nvi2-scope .workflow .title h2 { color:#fff } .nvi2.nvi2-scope .workflow .title>p { color:#9cafc5 } .nvi2.nvi2-scope .cyan { color:var(--cyan) } .nvi2.nvi2-scope .flow { border-top:1px solid #365071; grid-template-columns:repeat(5,1fr); display:grid } .nvi2.nvi2-scope .flow article { padding:28px 20px 0 0; position:relative } .nvi2.nvi2-scope .flow article:before { content:""; background:var(--cyan); width:7px; height:7px; box-shadow:0 0 0 5px var(--deep); border-radius:50%; position:absolute; top:-4px } .nvi2.nvi2-scope .flow span { color:#667c98; font-size:12px } .nvi2.nvi2-scope .flow i { color:#68cde2; border:1px solid #3e5878; place-items:center; width:42px; height:42px; margin:20px 0; font-style:normal; display:grid } .nvi2.nvi2-scope .flow h3 { font-size:15px } .nvi2.nvi2-scope .flow p { color:#91a2b7; font-size:13px; line-height:1.6 } .nvi2.nvi2-scope .quote { border-left:3px solid var(--red); background:#0b2852; grid-template-columns:180px 1fr; align-items:center; margin-top:60px; padding:22px 28px; display:grid } .nvi2.nvi2-scope .quote b { color:#64cde4; letter-spacing:.1em; font-size:13px } .nvi2.nvi2-scope .quote p { margin:0; font-size:17px; line-height:1.55 } .nvi2.nvi2-scope .features { grid-template-columns:repeat(3,1fr); gap:16px; display:grid } .nvi2.nvi2-scope .feature { border:1px solid var(--line); flex-direction:column; min-height:285px; padding:29px; display:flex } .nvi2.nvi2-scope .feature.wide { grid-column:span 2 } .nvi2.nvi2-scope .feature.dark { background:var(--deep); color:#fff } .nvi2.nvi2-scope .feature>i { width:48px; height:48px; color:var(--blue); background:#e8f6f8; place-items:center; font-style:normal; font-weight:900; display:grid } .nvi2.nvi2-scope .feature h3 { margin:auto 0 10px; font-size:20px; line-height:1.4 } .nvi2.nvi2-scope .feature.dark p { color:#9cafc5 } .nvi2.nvi2-scope .epd { background:#edf4f6; padding:95px 0 } .nvi2.nvi2-scope .epdGrid { grid-template-columns:1fr 440px; align-items:center; gap:100px; display:grid } .nvi2.nvi2-scope .epd h2 { margin:25px 0; font-size:45px } .nvi2.nvi2-scope .epdGrid>div>p:not(.eyebrow) { color:var(--muted); max-width:580px; font-size:15px; line-height:1.7 } .nvi2.nvi2-scope .traffic { color:#d9dfe4; word-spacing:7px; margin-top:28px } .nvi2.nvi2-scope .traffic b { color:#18ac73; text-shadow:0 0 12px #53cfa0 } .nvi2.nvi2-scope .traffic span { color:#168c62; letter-spacing:.12em; margin-left:18px; font-size:12px } .nvi2.nvi2-scope .statuses { background:#fff; padding:18px; box-shadow:0 18px 45px #07234e1a } .nvi2.nvi2-scope .statuses p { border-bottom:1px solid #edf1f3; grid-template-columns:30px 1fr auto; align-items:center; gap:13px; margin:0; padding:15px; display:grid } .nvi2.nvi2-scope .statuses p:last-child { border:0 } .nvi2.nvi2-scope .statuses i { width:28px; height:28px; color:var(--cyan); border:1px solid #b9dce3; border-radius:50%; place-items:center; font-style:normal; display:grid } .nvi2.nvi2-scope .statuses b { font-size:14px } .nvi2.nvi2-scope .statuses small { color:#9aa4af; font-size:12px } .nvi2.nvi2-scope .statuses .active i { color:#fff; background:#16aa70; border-color:#16aa70 } .nvi2.nvi2-scope .enterprise { grid-template-columns:1fr 1fr; gap:80px; display:grid } .nvi2.nvi2-scope .enterprise article { border-top:1px solid var(--line); gap:23px; padding:23px 0; display:flex } .nvi2.nvi2-scope .enterprise article>span { color:var(--red); font-size:12px } .nvi2.nvi2-scope .enterprise p,.nvi2.nvi2-scope .enterprise b,.nvi2.nvi2-scope .enterprise small { margin:0; display:block } .nvi2.nvi2-scope .enterprise b { font-size:16px } .nvi2.nvi2-scope .enterprise small { color:var(--muted); margin-top:8px; font-size:14px; line-height:1.6 } .nvi2.nvi2-scope .network { background:var(--paper); flex-direction:column; align-items:center; padding:45px; display:flex } .nvi2.nvi2-scope .hub { background:var(--blue); color:#fff; text-align:center; width:190px; padding:18px; font-weight:900 } .nvi2.nvi2-scope .hub small { color:#9db2ca; margin-top:5px; font-size:12px; display:block } .nvi2.nvi2-scope .nodes { border-top:1px solid #8fb8c5; grid-template-columns:repeat(3,1fr); gap:8px; width:100%; margin-top:55px; padding-top:23px; display:grid } .nvi2.nvi2-scope .nodes p { text-align:center; background:#fff; margin:0; padding:15px; font-size:13px } .nvi2.nvi2-scope .nodes small { color:#1aa06e; margin-top:6px; font-size:12px; display:block } .nvi2.nvi2-scope .architecture { padding-bottom:100px } .nvi2.nvi2-scope .architecture details { border:1px solid var(--line) } .nvi2.nvi2-scope .architecture summary { cursor:pointer; justify-content:space-between; padding:24px 28px; list-style:none; display:flex } .nvi2.nvi2-scope .architecture summary span,.nvi2.nvi2-scope .architecture summary b,.nvi2.nvi2-scope .architecture summary small { display:block } .nvi2.nvi2-scope .architecture summary small { color:var(--muted); margin-top:7px; font-size:13px } .nvi2.nvi2-scope .architecture summary i { color:var(--red); font-size:22px; font-style:normal } .nvi2.nvi2-scope .architecture img { border-top:1px solid var(--line); width:100%; display:block } .nvi2.nvi2-scope .impl { grid-template-columns:repeat(4,1fr); gap:15px; display:grid } .nvi2.nvi2-scope .impl article { background:#fff; min-height:195px; padding:25px } .nvi2.nvi2-scope .impl span { background:var(--deep); color:#fff; place-items:center; width:30px; height:30px; font-size:12px; display:grid } .nvi2.nvi2-scope .impl h3 { margin:48px 0 10px; font-size:17px } .nvi2.nvi2-scope .contact { background:var(--deep); color:#fff; padding:100px 0 } .nvi2.nvi2-scope .contactGrid { grid-template-columns:1fr 470px; gap:110px; display:grid } .nvi2.nvi2-scope .contact h2 { color:#fff; margin:25px 0; font-size:48px } .nvi2.nvi2-scope .contactGrid>div>p { color:#9cafc5; font-size:15px; line-height:1.7 } .nvi2.nvi2-scope .company { border-top:1px solid #304969; margin-top:40px; padding-top:20px } .nvi2.nvi2-scope .company b,.nvi2.nvi2-scope .company small { display:block } .nvi2.nvi2-scope .company small { color:#7d93ac; margin-top:7px; font-size:12px } .nvi2.nvi2-scope .contact form,.nvi2.nvi2-scope .thanks { color:var(--ink); background:#fff; padding:34px } .nvi2.nvi2-scope .contact label { margin-bottom:16px; font-size:13px; font-weight:700; display:block } .nvi2.nvi2-scope .contact input,.nvi2.nvi2-scope .contact textarea { border:0; border-bottom:1px solid #cbd4dc; outline:0; width:100%; padding:10px 0; font:15px Arial; display:block } .nvi2.nvi2-scope .contact textarea { height:65px } .nvi2.nvi2-scope .contact .agree { color:#7e8998; align-items:center; gap:8px; font-weight:400; display:flex } .nvi2.nvi2-scope .contact .agree input { width:auto; margin:0 } .nvi2.nvi2-scope .contact form .btn { width:100% } .nvi2.nvi2-scope .thanks { text-align:center; flex-direction:column; justify-content:center; display:flex } .nvi2.nvi2-scope .thanks>i { color:#17a770; background:#e4f7ef; border-radius:50%; place-items:center; width:55px; height:55px; margin:auto; font-style:normal; display:grid } .nvi2.nvi2-scope .thanks button { color:var(--red); cursor:pointer; background:0 0; border:0; font-weight:700 } @media (max-width:900px) { .nvi2.nvi2-scope .heroGrid,.nvi2.nvi2-scope .title,.nvi2.nvi2-scope .epdGrid,.nvi2.nvi2-scope .enterprise,.nvi2.nvi2-scope .contactGrid { grid-template-columns:1fr } .nvi2.nvi2-scope .heroGrid { padding:70px 0 } .nvi2.nvi2-scope .problemGrid,.nvi2.nvi2-scope .flow,.nvi2.nvi2-scope .features,.nvi2.nvi2-scope .impl { grid-template-columns:1fr 1fr } .nvi2.nvi2-scope .title,.nvi2.nvi2-scope .epdGrid,.nvi2.nvi2-scope .enterprise,.nvi2.nvi2-scope .contactGrid { gap:40px } } @media (max-width:600px) { .nvi2.nvi2-scope .shell { width:calc(100% - 30px) } .nvi2.nvi2-scope h1 { font-size:42px } .nvi2.nvi2-scope .heroGrid { gap:45px; padding:55px 0 } .nvi2.nvi2-scope .lead { font-size:18px } .nvi2.nvi2-scope .actions { flex-direction:column; align-items:flex-start } .nvi2.nvi2-scope .proof { grid-template-columns:1fr } .nvi2.nvi2-scope .proof p+p { border-left:0; padding-left:0 } .nvi2.nvi2-scope .section { padding:70px 0 } .nvi2.nvi2-scope .title { gap:18px; margin-bottom:35px } .nvi2.nvi2-scope .title h2,.nvi2.nvi2-scope .epd h2,.nvi2.nvi2-scope .contact h2 { font-size:32px } .nvi2.nvi2-scope .problemGrid,.nvi2.nvi2-scope .features,.nvi2.nvi2-scope .impl { grid-template-columns:1fr } .nvi2.nvi2-scope .problemGrid article { border-right:0; border-bottom:1px solid var(--line) } .nvi2.nvi2-scope .feature.wide { grid-column:auto } .nvi2.nvi2-scope .workflow { padding:70px 0 } .nvi2.nvi2-scope .flow { border:0; grid-template-columns:1fr } .nvi2.nvi2-scope .flow article { border-top:1px solid #365071; padding-bottom:18px } .nvi2.nvi2-scope .quote { grid-template-columns:1fr; gap:12px } .nvi2.nvi2-scope .epd,.nvi2.nvi2-scope .contact { padding:70px 0 } .nvi2.nvi2-scope .contact form,.nvi2.nvi2-scope .thanks { padding:24px } .nvi2.nvi2-scope .nodes { grid-template-columns:1fr } .nvi2.nvi2-scope .network { padding:25px } } .nvi2.nvi2-scope { --blue:#3d4919; --deep:#27310e; --cyan:#809921; --red:#b9d500; --ink:#303526; --muted:#6f7563; --line:#dfe3d5; --paper:#f5f6f0 } .nvi2.nvi2-scope { color:var(--ink); background:#fff } .nvi2.nvi2-scope .btn { color:#fff; background:#3d4919 } .nvi2.nvi2-scope .btn:hover { background:#2b350f } .nvi2.nvi2-scope .btn b { color:#c8e400 } .nvi2.nvi2-scope .hero { background:linear-gradient(120deg,#fff 0%,#f7f8f3 55%,#edf0e3 100%); border-color:#e4e7dc; position:relative } .nvi2.nvi2-scope .hero:after { content:""; pointer-events:none; background:repeating-linear-gradient(135deg,#0000 0 28px,#3d491909 28px 34px); width:620px; height:620px; position:absolute; top:-160px; right:-100px; transform:rotate(-8deg) } .nvi2.nvi2-scope .heroGrid { z-index:1; position:relative } .nvi2.nvi2-scope .eyebrow:before { background:#a9c400 } .nvi2.nvi2-scope .lead { color:#626b55 } .nvi2.nvi2-scope .proof,.nvi2.nvi2-scope .proof p+p { border-color:#d8ddcd } .nvi2.nvi2-scope .proof span { color:#767d6b } .nvi2.nvi2-scope .system { border-top:5px solid #3d4919; box-shadow:0 25px 60px #3d491924 } .nvi2.nvi2-scope .sysHead b { color:#738c17 } .nvi2.nvi2-scope .sys>i,.nvi2.nvi2-scope .feature>i { color:#3d4919; background:#eef2df } .nvi2.nvi2-scope .arrow i { background:#95ae31 } .nvi2.nvi2-scope .sync { background:#3d4919; border-left:6px solid #bdd900 } .nvi2.nvi2-scope .num,.nvi2.nvi2-scope .problemGrid span,.nvi2.nvi2-scope .enterprise article>span { color:#829b20 } .nvi2.nvi2-scope .workflow,.nvi2.nvi2-scope .contact { background:#303b12 } .nvi2.nvi2-scope .workflow .title>p,.nvi2.nvi2-scope .feature.dark p,.nvi2.nvi2-scope .contactGrid>div>p { color:#b8bea9 } .nvi2.nvi2-scope .flow { border-color:#667541 } .nvi2.nvi2-scope .flow article:before { background:#bfdc00; box-shadow:0 0 0 5px #303b12 } .nvi2.nvi2-scope .flow span { color:#9ca783 } .nvi2.nvi2-scope .flow i { color:#c1dc21; border-color:#647340 } .nvi2.nvi2-scope .flow p { color:#b0b7a3 } .nvi2.nvi2-scope .quote { background:#3c4819; border-color:#bfdc00 } .nvi2.nvi2-scope .quote b { color:#c7e32a } .nvi2.nvi2-scope .feature.dark { background:#3d4919 } .nvi2.nvi2-scope .epd { background:#f1f3ea } .nvi2.nvi2-scope .traffic b,.nvi2.nvi2-scope .traffic span { color:#718c13 } .nvi2.nvi2-scope .statuses { box-shadow:0 18px 45px #3d49191c } .nvi2.nvi2-scope .statuses .active { background:#f1f6df } .nvi2.nvi2-scope .statuses .active i { background:#829b20; border-color:#829b20 } .nvi2.nvi2-scope .hub { background:#3d4919 } .nvi2.nvi2-scope .hub small { color:#c4cbb1 } .nvi2.nvi2-scope .nodes { border-color:#9ba979 } .nvi2.nvi2-scope .nodes small { color:#738c17 } .nvi2.nvi2-scope .implementation { background:#f4f5ef } .nvi2.nvi2-scope .company { border-color:#657343 } .nvi2.nvi2-scope .company small { color:#aab39a } .nvi2.nvi2-scope .contact .eyebrow { color:#c5e029 } .nvi2.nvi2-scope .contact form .btn { background:#3d4919 } .nvi2.nvi2-scope .thanks>i { color:#758d18; background:#eff4df } @media (max-width:600px) { .nvi2.nvi2-scope .hero:after { opacity:.5 } } /* -------------------------------------------------------------------------- 4. Состояния реальной формы NAIS. В прототипе формы-заглушки не было, поэтому здесь только состояния (загрузка, ошибка, успех) и доступность. Ни один цвет, отступ или размер из макета в этом блоке не переопределяется. -------------------------------------------------------------------------- */ /* Логотип берём из штатного спрайта сайта: вектор, без новых файлов. Размеры и цвет — как в макете (в прототипе лежал PNG того же знака). */ .nvi2.nvi2-scope .contact form { position: relative; } .nvi2.nvi2-scope .nvi2-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .nvi2.nvi2-scope .contact input:focus, .nvi2.nvi2-scope .contact textarea:focus { border-bottom-color: #829b20; } .nvi2.nvi2-scope .contact .is-invalid input, .nvi2.nvi2-scope .contact .is-invalid textarea { border-bottom-color: #b9422f; } .nvi2.nvi2-scope .contact .err { display: block; margin-top: 6px; font-size: 13px; font-weight: 400; line-height: 1.4; color: #b9422f; } .nvi2.nvi2-scope .contact .err:empty { display: none; } .nvi2.nvi2-scope .contact .formError { margin-bottom: 16px; padding: 11px 13px; background: #fdecea; border-left: 3px solid #b9422f; color: #8c2f20; font-size: 14px; line-height: 1.5; } .nvi2.nvi2-scope .contact .formError:empty { display: none; } .nvi2.nvi2-scope .contact form .btn[disabled] { cursor: progress; opacity: .72; transform: none; } .nvi2.nvi2-scope .contact form .btn[disabled]:hover { background: #3d4919; transform: none; } .nvi2.nvi2-scope .contact .captchaBox { margin-bottom: 16px; } .nvi2.nvi2-scope .contact .captchaBox:empty { display: none; } .nvi2.nvi2-scope .contact .js-nais-smartcaptcha-error { margin-top: 6px; font-size: 13px; color: #b9422f; } .nvi2.nvi2-scope .contact .policy { display: block; margin-top: 14px; color: #7e8998; font-size: 13px; font-weight: 400; line-height: 1.6; } .nvi2.nvi2-scope .contact .policy a, .nvi2.nvi2-scope .contact .agree a { text-decoration: underline; } .nvi2.nvi2-scope .thanks b { font-size: 18px; margin: 18px 0 10px; display: block; } .nvi2.nvi2-scope .thanks p { color: var(--muted); font-size: 15px; line-height: 1.6; } .nvi2.nvi2-scope .thanks button { margin-top: 18px; font-size: 14px; } /* Доступность: видимый фокус и корректная клавиатурная навигация. */ .nvi2.nvi2-scope a:focus-visible, .nvi2.nvi2-scope button:focus-visible, .nvi2.nvi2-scope input:focus-visible, .nvi2.nvi2-scope textarea:focus-visible { outline: 2px solid #829b20; outline-offset: 2px; } .nvi2.nvi2-scope .contact a:focus-visible, .nvi2.nvi2-scope .workflow a:focus-visible { outline-color: #c8e400; } /* Схемы собраны семантическим HTML: экранному диктору лишние глифы не нужны. */ .nvi2.nvi2-scope .sys > i, .nvi2.nvi2-scope .flow i, .nvi2.nvi2-scope .feature > i, .nvi2.nvi2-scope .statuses i, .nvi2.nvi2-scope .arrow i { user-select: none; } @media (prefers-reduced-motion: reduce) { .nvi2.nvi2-scope .btn { transition: none; } .nvi2.nvi2-scope .btn:hover { transform: none; } } /* -------------------------------------------------------------------------- N. Нейтрализация протечек из CSS шаблона сайта. Блок вёрстки переиспользует имена классов прототипа, и часть из них совпала с классами шаблона nais_main_copy: .quote, а также атрибутный селектор [name="AGREE_PROCESSING"]. Свойства, которые мы не объявили явно, приходили из общего main-стиля сайта — на локальном стенде этого не было видно, потому что там боевой CSS не подключался. Эталон — согласованный прототип, значения сняты с него на живой странице (1280 px). Правила намеренно стоят последними: специфичность у них та же 0-3-0, что и у основных правил блока, поэтому решает порядок. -------------------------------------------------------------------------- */ /* .quote сайта задаёт color: var(--white), который в нашем окружении разрешается в тёмный #252924, и текст «ключевого принципа» тонул в плашке. В прототипе цвет наследуется от .workflow и равен #fff. width/margin-left — из медиазапроса сайта (max-width:1079px), где .quote растягивается на calc(100% + 30px) и вылезает за контейнер. */ .nvi2.nvi2-scope .quote { color: #fff; width: auto; margin-left: 0; } .nvi2.nvi2-scope .quote p { color: #fff; } /* Чекбокс согласия. Шаблон сайта прячет нативные чекбоксы ([name="AGREE_PROCESSING"] + appearance:none у button,input), потому что рисует свои. У нашей формы своей отрисовки нет, и поле схлопывалось в 0 px — посетитель не видел ни самого чекбокса, ни того, отмечен ли он. Согласие на обработку ПДн должно быть видимым и осознанным, поэтому возвращаем нативный вид. */ .nvi2.nvi2-scope .contact .agree input[type="checkbox"] { -webkit-appearance: checkbox; appearance: auto; opacity: 1; position: static; top: auto; z-index: auto; flex: none; width: 14px; height: 14px; margin: 0; accent-color: #3d4919; }