/* =================================== НВС — слой поверх темы Crafto Основа: демо lawyer, переведённое в светлый вариант Подключать ПОСЛЕ style.min.css и responsive.min.css ====================================== */ /* шрифты подключены через в — см. шаблон страницы */ /* variable */ :root { --base-color: #8B2A3E; /* бордо — кнопки, ссылки, иконки, hover */ --dark-gray: #1B1C1F; /* основной текст и тёмные секции */ --medium-gray: #6E7178; /* вторичный текст */ --very-light-gray: #F4F1EF; /* фон светлых секций */ --nvs-rose: #C4526A; /* только тонкий акцент, не заливка */ --nvs-dark-soft: #2E3035; /* осветлённый тёмный — вторая тёмная плоскость */ --nvs-line: #E3DEDA; /* линии и рамки на светлом */ --alt-font: 'Prata', 'Times New Roman', serif; --primary-font: 'Golos Text', -apple-system, 'Segoe UI', Roboto, sans-serif; } body { font-size: 17px; line-height: 30px; } /* custom cursor */ .custom-cursor .circle-cursor-inner { background-color: var(--base-color); width: 10px; height: 10px; } .custom-cursor .circle-cursor-inner.cursor-link-hover { background-color: var(--base-color); } .custom-cursor .circle-cursor-outer { border: 1px solid transparent; } /* header */ header .navbar-brand img { max-height: 36px; } header .left-nav .navbar-nav:before { background-color: var(--white); opacity: 0.2; transform: translate(-28px, 0px); -webkit-transform: translate(-28px, 0px); transition: 0s; } header.sticky .left-nav .navbar-nav:before { transform: translate(-28px, 0px); -webkit-transform: translate(-28px, 0px); } .navbar .navbar-nav .nav-link { font-size: 18px; font-weight: 400; } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a { border-bottom: 1px solid var(--nvs-line); padding: 16px 20px; font-weight: 500; font-size: 16px; color: var(--dark-gray); } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover img { filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(288deg) brightness(502%) contrast(502%); } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover, .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a{ background-color: var(--base-color); color: var(--white); } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active > a { color: var(--medium-gray); } .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu { width: 330px; } .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a { color: var(--dark-gray); } .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a p { line-height: 22px; } .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a img { width: 65px; } .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li.active > a, .navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu li a:hover { color: var(--medium-gray); } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a img { width: 40px; margin-right: 10px; } /* pagination */ .pagination-style-01 .page-item.active .page-link, .pagination-style-01 .page-item .page-link:hover { background: var(--dark-gray); color: var(--white); } .pagination-style-01 .page-item:first-child .page-link, .pagination-style-01 .page-item:last-child .page-link { background: transparent; box-shadow: none !important; } .pagination-style-01 .page-item:first-child .page-link:hover, .pagination-style-01 .page-item:last-child .page-link:hover { color: var(--dark-gray); } /* input */ .input-small, .textarea-small { font-size: 14px; } /* bg color */ .bg-blue-whale { background-color: var(--dark-gray); } .bg-blue-licorice { background-color: var(--nvs-dark-soft); } /* bg gradient transparent */ .bg-gradient-dark-transparent { background: -webkit-gradient(linear, left bottom, left top, color-stop(7%, #121316), to(transparent)); background: linear-gradient(to top, #121316 7%, transparent 70%); } /* btn */ .btn.btn-blue-whale { background-color: var(--dark-gray); color: var(--white); } .btn.btn-blue-whale:hover { background-color: transparent; border-color: var(--dark-gray); color: var(--dark-gray); } .btn { font-family: var(--primary-font); font-weight:500; text-transform: inherit; letter-spacing: 0px; } .btn.btn-link { padding: 0 0 2px; } .btn.btn-rounded.btn-extra-large { padding: 18px 66px 18px 40px; font-size: 17px; } .btn.btn-rounded.btn-large { padding: 16px 55px 16px 38px; font-size: 16px; } .btn.btn-large { font-size: 15px; } /* number pagination style 01 */ .swiper-number-pagination-style-01 .swiper-number .swiper-pagination-bullet { font-size: 14px; } .process-step-style-02:hover .process-step-icon .number { color: var(--white); } /* page title */ .page-title-large h1 { font-size: 4rem; line-height: 3.9rem; } /* process step style 03 */ .process-step-style-03:hover .process-step-icon-box .progress-image { -webkit-transform: scale(1.3); transform: scale(1.3); } /* social icon style 02 */ .social-icon-style-02 .small-icon li { margin: 0; } /* opacity */ .opacity-05 { opacity: 0.05; } /* top right bottom left */ .top-minus-35px { top: -35px; } .left-minus-35px { left: -35px; } .bottom-minus-35px { bottom: -35px; } /* footer */ footer .footer-logo img { max-height: 36px; } .footer-dark { color: #768086; } .footer-dark p, .footer-dark a { color: #768086; } .is-touchable .cursor-page-inner { display: none !important; } /* media query responsive */ @media (max-width: 1400px) { .xl-min-h-270px { min-height: 270px !important; } } @media (max-width: 1300px) { .navbar .navbar-nav .nav-link { padding-left: 15px; padding-right: 15px; } } @media (max-width: 1199px) { header .left-nav .navbar-nav:before { transform: translate(-10px, 0px); -webkit-transform: translate(-10px, 0px); } header.sticky .left-nav .navbar-nav:before { transform: translate(-10px, 0px); -webkit-transform: translate(-10px, 0px); } .elements-social .large-icon li { margin: 0 5px; } footer .nav-link { padding-left: .6rem; padding-right: .6rem; } .navbar .navbar-nav .nav-link { padding-left: 10px; padding-right: 10px; } } @media (max-width: 1024px) { .navbar .navbar-nav .nav-link { padding-left: 8px; padding-right: 8px; } } @media (max-width: 991px) { header .widget-text { color: var(--dark-gray); } header .widget-text i { color: var(--white); } .md-bottom-minus-15px { bottom: -15px; } .elements-social.social-icon-style-04 .large-icon a { font-size: 21px; width: 50px; height: 50px; } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a { padding-left: 0; padding-right: 0; } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover, .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li:hover img{ background-color: transparent; color: var(--dark-gray); filter: inherit; } .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover, .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a { background-color: transparent; color: var(--medium-gray); } } @media (max-width: 767px) { .sm-top-minus-25px { top: -25px; } .process-step-style-02 .progress-step-separator, .process-step-style-03 .progress-step-separator, .process-step-style-04 .progress-step-separator { display: block; } } @media (max-width: 575px) { .process-step-style-02 .progress-step-separator, .process-step-style-03 .progress-step-separator, .process-step-style-04 .progress-step-separator { display: none; } } /* =================================== НВС — светлая тема ====================================== */ /* курсор демо lawyer убираем: на деловом сайте он мешает */ .custom-cursor .circle-cursor-inner, .custom-cursor .circle-cursor-outer { display: none; } /* шапка светлая, логотип тёмный */ header .navbar-brand img { max-height: 42px; } .navbar.header-light, .navbar.header-light.sticky { background-color: var(--white); } .navbar.header-light .navbar-nav .nav-link { color: var(--dark-gray); } .navbar.header-light .navbar-nav .nav-link:hover, .navbar.header-light .navbar-nav .nav-item.active .nav-link { color: var(--base-color); } header .left-nav .navbar-nav:before { background-color: var(--nvs-line); opacity: 1; } /* заголовки: Playfair на кириллице плотнее латиницы */ h1, h2, h3, h4, h5, h6 { letter-spacing: -0.01em; } h1, h2 { font-weight: 600; } /* акценты */ a { color: var(--base-color); } a:hover { color: var(--nvs-rose); } .text-base-color { color: var(--base-color) !important; } .bg-base-color { background-color: var(--base-color) !important; } .border-color-base-color { border-color: var(--base-color) !important; } /* тонкая розовая черта — единственная роль розового */ .nvs-rule { width: 40px; height: 2px; background-color: var(--nvs-rose); display: inline-block; } /* линии и рамки на светлом фоне */ .border-color-extra-medium-gray { border-color: var(--nvs-line) !important; } /* тёмная полоса призыва */ .nvs-cta { background-color: var(--dark-gray); color: var(--white); } .nvs-cta h1, .nvs-cta h2, .nvs-cta h3, .nvs-cta p { color: var(--white); } /* нумерованные карточки направлений */ .nvs-num { font-family: var(--primary-font); font-size: 14px; font-weight: 500; letter-spacing: 0.06em; font-variant-numeric: tabular-nums; color: var(--base-color); } /* перечни работ */ .nvs-list { list-style: none; padding-left: 0; margin-bottom: 0; } .nvs-list li { position: relative; padding-left: 22px; margin-bottom: 10px; } .nvs-list li:before { content: ""; position: absolute; left: 0; top: 13px; width: 8px; height: 1px; background-color: var(--base-color); } /* футер тёмный — там нужен белый логотип, которого нет в материалах: пока инвертируем тёмный SVG фильтром */ .footer-dark { background-color: var(--dark-gray); } /* логотип в подвале — отдельный файл, а не инверсия: инверсия убивала бордовый акцент */ .footer-dark p, .footer-dark a, .footer-dark span { color: rgba(255,255,255,0.72); } .footer-dark a:hover { color: var(--white); } /* =================================== НВС — мобильная адаптация ====================================== */ /* горизонтального скролла быть не должно ни при каких обстоятельствах */ html, body { overflow-x: hidden; max-width: 100%; } /* кнопка меню: на светлой шапке полоски должны быть тёмными */ .navbar.header-light .navbar-toggler-line { background-color: var(--dark-gray); } .navbar.header-light .navbar-toggler[aria-expanded="true"] .navbar-toggler-line { background-color: var(--base-color); } /* герой: на десктопе почти во весь экран, на мобильном — по содержимому */ .nvs-hero { min-height: 88vh; } .nvs-hero-inner { padding-top: 19vh; padding-bottom: 12vh; } @media (max-width: 991px) { .nvs-hero { min-height: 0; } .nvs-hero-inner { padding-top: 110px; padding-bottom: 80px; } } @media (max-width: 575px) { .nvs-hero-inner { padding-top: 90px; padding-bottom: 60px; } /* на узком экране проценты ширины только мешают */ .w-85, .w-80, .w-75, .w-90 { width: 100% !important; } /* большие внутренние отступы тёмных блоков режем */ .p-7, .p-6 { padding: 40px 25px !important; } } /* выпадающее мобильное меню на светлой шапке */ @media (max-width: 991px) { .navbar.header-light .navbar-collapse { background-color: var(--white); } .navbar.header-light .navbar-nav .nav-link { padding: 12px 0; } } /* на узком экране заголовок героя должен заметно отличаться от текста под ним */ @media (max-width: 575px) { .nvs-hero-inner h1 { font-size: 2.15rem !important; line-height: 1.14 !important; } .nvs-hero-inner p { font-size: 17px !important; line-height: 28px !important; } } /* =================================== НВС — карта морских портов В SVG заданы только классы, цвета приходят отсюда ====================================== */ .rusmap { display: block; width: 100%; height: auto; } .rusmap .land { fill: #E7E2DE; stroke: #D6CFC9; stroke-width: 0.6; } .rusmap .pt { fill: var(--base-color); r: 2.6; } .rusmap .pt.big { r: 4.2; } .rusmap .ping { fill: var(--nvs-rose); opacity: 0.18; } .rusmap .pl { fill: var(--dark-gray); font-family: var(--primary-font); font-size: 11px; font-weight: 500; } /* на тёмном фоне карта читается наоборот */ .nvs-cta .rusmap .land, .bg-dark-gray .rusmap .land { fill: #2E3035; stroke: #3A3D44; } .nvs-cta .rusmap .pl, .bg-dark-gray .rusmap .pl { fill: rgba(255,255,255,.8); } @media (max-width: 767px) { .rusmap .pl { font-size: 14px; } .rusmap .pt { r: 3.4; } .rusmap .pt.big { r: 5; } } /* карта портов: занимает всю ширину блока, на мобильном не мельчит */ .nvs-map { display: block; width: 100%; height: auto; } @media (max-width: 767px) { /* при узком экране карта России нечитаема — даём прокрутку по горизонтали */ .nvs-map-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nvs-map-scroll .nvs-map { min-width: 640px; } } /* схемы: рамка не нужна, но нужен воздух и прокрутка на узком экране */ .nvs-scheme { overflow-x: auto; -webkit-overflow-scrolling: touch; } .nvs-scheme img { min-width: 640px; } @media (min-width: 768px) { .nvs-scheme img { min-width: 0; } } /* =================================== НВС — первый экран прижат к низу ====================================== */ .nvs-hero-inner { min-height: 88vh; padding-top: 140px; padding-bottom: 9vh; } .nvs-pagehead-inner { min-height: 46vh; padding-top: 130px; padding-bottom: 62px; } @media (max-width: 991px) { .nvs-hero-inner { min-height: 0; padding-top: 120px; padding-bottom: 70px; } .nvs-pagehead-inner { min-height: 0; padding-top: 110px; padding-bottom: 48px; } } @media (max-width: 575px) { .nvs-hero-inner { padding-top: 100px; padding-bottom: 56px; } .nvs-pagehead-inner { padding-top: 96px; padding-bottom: 40px; } } /* =================================== НВС — кнопка возврата наверх ====================================== */ .nvs-totop { position: fixed; right: 28px; bottom: 28px; z-index: 90; width: 46px; height: 46px; border: 1px solid var(--nvs-line); background: var(--white); color: var(--dark-gray); font-size: 17px; line-height: 1; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease, visibility .25s; box-shadow: 0 4px 18px rgba(27, 28, 31, .10); } .nvs-totop.is-shown { opacity: 1; visibility: visible; transform: none; } .nvs-totop:hover { background: var(--base-color); border-color: var(--base-color); color: var(--white); } .nvs-totop:focus-visible { outline: 2px solid var(--base-color); outline-offset: 3px; } @media (max-width: 575px) { .nvs-totop { right: 16px; bottom: 16px; width: 42px; height: 42px; } } @media (prefers-reduced-motion: reduce) { .nvs-totop { transition: none; } } /* =================================== НВС — очевидная кликабельность ====================================== */ /* карточки-ссылки: подчёркивание и стрелка появляются при наведении */ a.nvs-card-link { position: relative; text-decoration: none; background-image: linear-gradient(var(--base-color), var(--base-color)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1px; transition: background-size .3s ease, color .2s ease; } a.nvs-card-link:hover { background-size: 100% 1px; color: var(--base-color); } a.nvs-card-link::after { content: " →"; opacity: 0; transition: opacity .2s ease, transform .2s ease; display: inline-block; transform: translateX(-4px); } a.nvs-card-link:hover::after { opacity: 1; transform: none; } /* вся карточка реагирует на курсор, чтобы было ясно: по ней можно щёлкнуть */ .nvs-clickable { transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .nvs-clickable:hover { border-color: var(--base-color) !important; transform: translateY(-3px); box-shadow: 0 10px 30px rgba(139, 42, 62, .10); } .nvs-clickable:hover .nvs-num { color: var(--nvs-rose); } /* обычные текстовые ссылки в тексте — с подчёркиванием, а не просто цветом */ .nvs-body a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } /* видимый фокус с клавиатуры — по всему сайту */ a:focus-visible, button:focus-visible, .accordion-header a:focus-visible { outline: 2px solid var(--base-color); outline-offset: 3px; } /* реестр строк: волосяная линия вместо карточки */ .nvs-row { border-top: 1px solid var(--nvs-line); } .nvs-row:last-child { border-bottom: 1px solid var(--nvs-line); } .pt-28px { padding-top: 28px; } .pb-28px { padding-bottom: 28px; } .sm-mb-8px { margin-bottom: 0; } @media (max-width: 767px) { .sm-mb-8px { margin-bottom: 8px; } } /* =================================== НВС — вертикальные вкладки «кто к нам обращается» ====================================== */ .nvs-tabs .nav-link { border: 0; border-left: 2px solid var(--nvs-line); border-radius: 0; background: none; padding: 14px 0 14px 20px; font-family: var(--alt-font); font-size: 17px; line-height: 1.35; color: var(--medium-gray); transition: color .2s ease, border-color .2s ease, padding-left .2s ease; cursor: pointer; } .nvs-tabs .nav-link:hover { color: var(--dark-gray); border-left-color: var(--nvs-rose); padding-left: 24px; } .nvs-tabs .nav-link.active { color: var(--dark-gray); border-left-color: var(--base-color); font-weight: 600; } .nvs-tabs .nav-link.active .nvs-num { color: var(--base-color); } .nvs-tabs .nav-link .nvs-num { font-size: 13px; } @media (max-width: 991px) { /* на узком экране вкладки идут лентой поперёк */ .nvs-tabs .nav { flex-direction: row !important; overflow-x: auto; flex-wrap: nowrap; } .nvs-tabs .nav-link { border-left: 0; border-bottom: 2px solid var(--nvs-line); padding: 10px 18px 10px 0; white-space: nowrap; font-size: 15px; } .nvs-tabs .nav-link:hover { padding-left: 0; } .nvs-tabs .nav-link.active { border-bottom-color: var(--base-color); } } /* =================================== НВС — карусель направлений ====================================== */ .nvs-carousel { position: relative; display: flex; align-items: stretch; gap: 10px; } .nvs-carousel-track { display: flex; gap: 10px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding-bottom: 6px; scrollbar-width: thin; } .nvs-carousel-track::-webkit-scrollbar { height: 3px; } .nvs-carousel-track::-webkit-scrollbar-thumb { background: var(--nvs-line); } .nvs-tile { flex: 0 0 210px; scroll-snap-align: start; text-align: left; background: var(--white); border: 1px solid var(--nvs-line); padding: 18px 18px 20px; cursor: pointer; transition: border-color .2s ease, background .2s ease, transform .2s ease; } .nvs-tile:hover { border-color: var(--base-color); transform: translateY(-2px); } .nvs-tile.is-current { border-color: var(--base-color); background: var(--white); box-shadow: inset 0 -3px 0 var(--base-color); } .nvs-tile.is-current .nvs-num { color: var(--nvs-rose); } .nvs-tile-name { display: block; font-family: var(--alt-font); font-size: 16px; line-height: 1.3; color: var(--dark-gray); font-weight: 600; } .nvs-carousel-arrow { flex: 0 0 40px; align-self: center; height: 40px; border: 1px solid var(--nvs-line); background: var(--white); color: var(--dark-gray); font-size: 19px; line-height: 1; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; } .nvs-carousel-arrow:hover { background: var(--base-color); border-color: var(--base-color); color: var(--white); } .nvs-carousel-arrow[disabled] { opacity: .3; cursor: default; } .nvs-carousel-arrow[disabled]:hover { background: var(--white); color: var(--dark-gray); border-color: var(--nvs-line); } @media (max-width: 575px) { .nvs-carousel-arrow { display: none; } .nvs-tile { flex-basis: 170px; } } @media (prefers-reduced-motion: reduce) { .nvs-carousel-track { scroll-behavior: auto; } } /* строка аккордеона должна выглядеть нажимаемой */ .nvs-acc .accordion-header a { display: block; padding: 20px 0; cursor: pointer; transition: color .2s ease; } .nvs-acc .accordion-header a:hover .alt-font { color: var(--base-color); } .nvs-acc .accordion-item.active-accordion .nvs-num { color: var(--nvs-rose); } /* =================================== НВС — карточка контактов ====================================== */ .nvs-contact-card { background: var(--very-light-gray); padding: 44px 40px; border-top: 3px solid var(--base-color); } .nvs-mail { display: inline-block; font-family: var(--alt-font); font-size: clamp(1.25rem, 2vw, 1.6rem); line-height: 1.2; color: var(--dark-gray); text-decoration: none; border-bottom: 2px solid var(--base-color); padding-bottom: 3px; transition: color .2s ease; word-break: break-all; } .nvs-mail:hover { color: var(--base-color); } .nvs-contact-sep { height: 1px; background: var(--nvs-line); margin: 28px 0; } .nvs-details summary { cursor: pointer; list-style: none; font-size: 15px; color: var(--dark-gray); display: flex; align-items: center; gap: 8px; } .nvs-details summary::-webkit-details-marker { display: none; } .nvs-details summary::before { content: "+"; color: var(--base-color); font-size: 17px; line-height: 1; transition: transform .2s ease; } .nvs-details[open] summary::before { content: "−"; } .nvs-details summary:hover { color: var(--base-color); } .pt-15px { padding-top: 15px; } @media (max-width: 575px) { .nvs-contact-card { padding: 32px 24px; } } /* иконка типа клиента: тонкая, в цвет акцента, без кружка-подложки */ .nvs-ico { flex: 0 0 auto; width: 42px; margin-right: 18px; padding-top: 2px; color: var(--base-color); font-size: 26px; line-height: 1; } .nvs-row { padding-top: 30px; padding-bottom: 30px; } .lh-27 { line-height: 27px; } .mb-6px { margin-bottom: 6px; } .sm-mb-12px { margin-bottom: 0; } @media (max-width: 767px) { .sm-mb-12px { margin-bottom: 14px; } .nvs-ico { width: 34px; margin-right: 14px; font-size: 22px; } } /* схема показывается один к одному: масштаб 1.0, кегль внутри совпадает с текстом сайта */ .nvs-scheme svg, .nvs-scheme-inline { width: 100%; max-width: 960px; height: auto; display: block; margin: 0 auto; } /* =================================== НВС — типографика Prata + Golos Text ====================================== */ /* у Prata одно начертание: жирный браузер подделывал бы искусственно */ h1, h2, h3, h4, h5, h6, .alt-font, .nvs-tile-name, .nvs-mail, .nvs-tabs .nav-link, .accordion-title span:last-child { font-weight: 400 !important; letter-spacing: 0; } /* Prata крупнее в очке — слегка сбавляем кегль заголовков и добавляем интерлиньяж */ h1 { line-height: 1.16; } h2 { line-height: 1.24; } h3 { line-height: 1.32; } /* акцент внутри заголовка делаем цветом, а не насыщенностью */ h1 .accent, h2 .accent, h3 .accent { color: var(--base-color); } /* активная вкладка выделяется цветом и линией, раз вес недоступен */ .nvs-tabs .nav-link.active { color: var(--base-color); } /* =================================== НВС — как устроена работа ====================================== */ .nvs-strength { padding: 30px 28px 32px; border-top: 2px solid var(--base-color); background: var(--very-light-gray); transition: transform .25s ease, box-shadow .25s ease; } .nvs-strength:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(139, 42, 62, .08); } .nvs-strength-ico { display: block; margin-bottom: 16px; color: var(--base-color); font-size: 26px; line-height: 1; } @media (max-width: 575px) { .nvs-strength { padding: 24px 22px 26px; } } /* =================================== НВС — расширенная анимация ====================================== */ /* =================================================================== НВС — система движения Дописывается в конец assets/css/nvs.css. Устройство: у каждого приёма три состояния. обычное — как будто анимации нет (видно всё); .nvs-armed — вешает скрипт, и только на то, что ниже кадра; .nvs-armed.is-in — проявление. Не отработал скрипт — на экране просто готовая страница. =================================================================== */ :root { --nvs-ease: cubic-bezier(.22, .61, .36, 1); --nvs-ease-veil: cubic-bezier(.76, 0, .24, 1); } /* ------------------------------------------------------------------- 1. Заголовок первого экрана проявляется построчно ------------------------------------------------------------------- */ .nvs-lines.nvs-hold { opacity: 0; } .nvs-lines .nvs-line { display: block; overflow: hidden; padding-bottom: .1em; /* чтобы маска не срезала «у», «р», «д» */ margin-bottom: -.1em; } .nvs-lines.nvs-done .nvs-line { overflow: visible; } .nvs-lines .nvs-line-i { display: block; } .nvs-lines.nvs-armed .nvs-line-i { transform: translateY(112%); opacity: 0; } .nvs-lines.nvs-armed.is-in .nvs-line-i { transform: none; opacity: 1; transition: transform .85s var(--nvs-ease), opacity .55s ease-out; transition-delay: calc(.18s + var(--i, 0) * .1s); } /* ------------------------------------------------------------------- 2. Первый экран: надзаголовок, текст и кнопка выходят лесенкой ------------------------------------------------------------------- */ .nvs-stair.nvs-armed > * { opacity: 0; transform: translateY(18px); } .nvs-stair.nvs-armed.is-in > * { opacity: 1; transform: none; transition: opacity .7s ease-out, transform .8s var(--nvs-ease); } .nvs-stair.nvs-armed.is-in > *:nth-child(1) { transition-delay: .06s; } .nvs-stair.nvs-armed.is-in > *:nth-child(2) { transition-delay: .16s; } .nvs-stair.nvs-armed.is-in > *:nth-child(3) { transition-delay: .50s; } .nvs-stair.nvs-armed.is-in > *:nth-child(4) { transition-delay: .62s; } .nvs-stair.nvs-armed.is-in > *:nth-child(5) { transition-delay: .74s; } /* заголовок внутри лесенки живёт по своим правилам — построчно */ .nvs-stair.nvs-armed > .nvs-lines { opacity: 1; transform: none; } /* ------------------------------------------------------------------- 3. Фотография открывается шторкой в фирменном цвете .nvs-veil — шторка уходит вправо (для фото слева) .nvs-veil-rl — шторка уходит влево (для фото справа) ------------------------------------------------------------------- */ .nvs-veil { position: relative; overflow: hidden; display: block; } .nvs-veil > picture, .nvs-veil > picture > img, .nvs-veil > img { display: block; width: 100%; } .nvs-veil::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--base-color); border-radius: inherit; transform: scaleX(0); transform-origin: right center; pointer-events: none; z-index: 2; } .nvs-veil-rl::after { transform-origin: left center; } .nvs-veil.nvs-armed::after { transform: scaleX(1); } .nvs-veil.nvs-armed img { transform: scale(1.05); } .nvs-veil.nvs-armed.is-in::after { transform: scaleX(0); transition: transform .95s var(--nvs-ease-veil) var(--d, 0s); } .nvs-veil.nvs-armed.is-in img { transform: none; transition: transform 1.5s var(--nvs-ease) var(--d, 0s); } /* ------------------------------------------------------------------- 4. Реестр строк: строки въезжают волной, наведение подчёркивает ------------------------------------------------------------------- */ .nvs-row { position: relative; } .nvs-row::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background-color: var(--base-color); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--nvs-ease); pointer-events: none; } .nvs-row:hover::before { transform: scaleX(1); } .nvs-row:hover .nvs-num { color: var(--nvs-rose); } .nvs-row .nvs-ico { transition: transform .3s var(--nvs-ease), color .25s ease; } .nvs-row:hover .nvs-ico { transform: translateX(4px); } .nvs-row .nvs-num { transition: color .25s ease; } .nvs-row.nvs-armed > * { opacity: 0; transform: translateY(14px); } .nvs-row.nvs-armed.is-in > * { opacity: 1; transform: none; transition: opacity .55s ease-out var(--d, 0s), transform .6s var(--nvs-ease) var(--d, 0s); } /* ------------------------------------------------------------------- 5. Перечни работ: чёрточка прочерчивается перед строкой ------------------------------------------------------------------- */ .nvs-list li:before { transform-origin: left center; } .nvs-list.nvs-armed li:before { transform: scaleX(0); } .nvs-list.nvs-armed.is-in li:before { transform: none; transition: transform .4s var(--nvs-ease); } .nvs-list.nvs-armed.is-in li:nth-child(1):before { transition-delay: .05s; } .nvs-list.nvs-armed.is-in li:nth-child(2):before { transition-delay: .11s; } .nvs-list.nvs-armed.is-in li:nth-child(3):before { transition-delay: .17s; } .nvs-list.nvs-armed.is-in li:nth-child(4):before { transition-delay: .23s; } .nvs-list.nvs-armed.is-in li:nth-child(5):before { transition-delay: .29s; } .nvs-list.nvs-armed.is-in li:nth-child(6):before { transition-delay: .35s; } .nvs-list.nvs-armed.is-in li:nth-child(7):before { transition-delay: .41s; } .nvs-list.nvs-armed.is-in li:nth-child(8):before { transition-delay: .47s; } .nvs-list.nvs-armed.is-in li:nth-child(n+9):before { transition-delay: .53s; } /* ------------------------------------------------------------------- 6. Раздел в фокусе: номер розовеет, слева вырастает бордовая черта (страница услуг, девять разделов подряд) ------------------------------------------------------------------- */ .nvs-service .nvs-service-head { position: relative; padding-left: 18px; } .nvs-service .nvs-service-head::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background-color: var(--base-color); transform: scaleY(0); transform-origin: top center; transition: transform .5s var(--nvs-ease); } .nvs-service.is-current .nvs-service-head::before { transform: scaleY(1); } .nvs-service .nvs-num { transition: color .35s ease; } .nvs-service.is-current .nvs-num { color: var(--nvs-rose); } .nvs-service.is-current .nvs-service-head h2 { color: var(--dark-gray); } @media (max-width: 991px) { .nvs-service .nvs-service-head { padding-left: 14px; } } /* плитка карусели — тот же язык: активный номер розовеет */ .nvs-tile .nvs-num, .nvs-tile .nvs-tile-name { transition: color .25s ease; } /* ------------------------------------------------------------------- 6a. Страховка для схемы цикла В cycle.svg шаги спрятаны безусловно. Возвращаем их на место и прячем только после того, как скрипт повесил .js-ready. ------------------------------------------------------------------- */ .nvs-scheme-inline .nvsd1-a { opacity: 1; } .nvs-scheme-inline.js-ready:not(.is-visible) .nvsd1-a { opacity: 0; } /* ------------------------------------------------------------------- 7. Тёмные полосы: фотография отстаёт от прокрутки ------------------------------------------------------------------- */ .nvs-parbox { overflow: hidden; } .nvs-par { transform: scale(1.12); will-change: transform; } /* ------------------------------------------------------------------- 8. Кромка тёмной панели: бордовая линия прочерчивается по верху ------------------------------------------------------------------- */ .nvs-edge { position: relative; } .nvs-edge::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background-color: var(--base-color); transform-origin: left center; z-index: 3; } .nvs-edge.nvs-armed::before { transform: scaleX(0); } .nvs-edge.nvs-armed.is-in::before { transform: scaleX(1); transition: transform .9s var(--nvs-ease) .12s; } /* ------------------------------------------------------------------- 9. Карта портов: одна волна вместо вечной пульсации, наведение на подпись подсвечивает бассейн ------------------------------------------------------------------- */ /* точка вспыхивает один раз и остаётся стоять */ .nvs-map.is-visible .pt { animation: ptIn .55s ease-out var(--d, 0s) 1 both !important; } .nvs-map.is-visible .pl { animation: nvsLblIn .5s ease-out calc(var(--d, 0s) + .3s) 1 both !important; } @keyframes nvsLblIn { from { opacity: 0; } to { opacity: 1; } } .nvs-map.is-visible .halo { animation: nvsHaloOnce 1.2s ease-out calc(var(--d, 0s) + .35s) 1 both !important; } @keyframes nvsHaloOnce { 0% { r: 2.6; opacity: .3; } 100% { r: 13; opacity: 0; } } /* волна прошла — карта отдаётся во власть курсора */ .nvs-map.nvs-settled .pt, .nvs-map.nvs-settled .halo, .nvs-map.nvs-settled .pl { animation: none !important; } /* волна отыграла — точки и подписи стоят и никуда не деваются */ .nvs-map.nvs-settled .pt, .nvs-map.nvs-settled .pl { opacity: 1 !important; } .nvs-map.nvs-settled .halo { opacity: 0 !important; } .nvs-map .pt { transition: fill .25s ease, opacity .25s ease; } .nvs-map .pl { transition: fill .2s ease, opacity .25s ease; cursor: default; } .nvs-map.nvs-settled .pt.is-hot { fill: var(--dark-gray); } .nvs-map.nvs-settled .pt.is-dim, .nvs-map.nvs-settled .pl.is-dim { opacity: .25; } .nvs-map .pl:hover { fill: var(--base-color); } /* ------------------------------------------------------------------- 10. Вкладки «кто к нам обращается»: черта вырастает, панель въезжает ------------------------------------------------------------------- */ .nvs-tabs .nav-link { position: relative; } .nvs-tabs .nav-link::before { content: ""; position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; background-color: var(--base-color); transform: scaleY(0); transform-origin: top center; transition: transform .4s var(--nvs-ease); } .nvs-tabs .nav-link.active::before { transform: scaleY(1); } .nvs-tabs .nav-link.active { border-left-color: var(--nvs-line); } .tab-content > .tab-pane { transition: opacity .35s ease-out, transform .5s var(--nvs-ease); } .tab-content > .tab-pane.fade:not(.show) { transform: translateY(12px); } .tab-content > .tab-pane.fade.show { transform: none; } @media (max-width: 991px) { .nvs-tabs .nav-link::before { left: 0; right: 0; top: auto; bottom: -2px; width: auto; height: 2px; transform: scaleX(0); transform-origin: left center; } .nvs-tabs .nav-link.active::before { transform: scaleX(1); } .nvs-tabs .nav-link.active { border-bottom-color: var(--nvs-line); } } /* ------------------------------------------------------------------- 11. Форма: поле в фокусе подчёркивается, подпись уходит в бордо ------------------------------------------------------------------- */ .form-control { transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease; } .form-control:focus { border-color: var(--base-color); box-shadow: inset 0 -2px 0 0 var(--base-color); outline: none; } form .mb-20px:focus-within .form-label { color: var(--base-color); } .form-label { transition: color .25s ease; } /* кнопки: заливка чуть подаётся вперёд, ссылка-стрелка выезжает */ .btn.btn-base-color, .btn.btn-white, .btn.btn-transparent-dark-gray { transition: background-color .3s ease, color .3s ease, border-color .3s ease, transform .3s var(--nvs-ease), box-shadow .3s ease; } .btn.btn-base-color:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(139, 42, 62, .22); } .btn.btn-link { position: relative; } .btn.btn-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background-color: var(--base-color); transform: scaleX(0); transform-origin: right center; transition: transform .35s var(--nvs-ease); } .btn.btn-link:hover::after { transform: scaleX(1); transform-origin: left center; } /* ------------------------------------------------------------------- 12. Тонкая полоса прочитанного под шапкой ------------------------------------------------------------------- */ .nvs-progress { position: fixed; left: 0; top: 0; width: 100%; height: 2px; z-index: 1035; pointer-events: none; opacity: 0; transition: opacity .3s ease; } .nvs-progress.is-shown { opacity: 1; } .nvs-progress i { display: block; height: 100%; width: 100%; background-color: var(--base-color); transform: scaleX(0); transform-origin: left center; } /* ------------------------------------------------------------------- 13. Паритет узких экранов Crafto выключает data-anime ниже 1200 px — там секции проявляются нашими силами. ------------------------------------------------------------------- */ .nvs-sec.nvs-armed { opacity: 0; transform: translateY(22px); } .nvs-sec.nvs-armed.is-in { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .65s var(--nvs-ease); } /* ------------------------------------------------------------------- 14. Полное отключение движения ------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .nvs-lines.nvs-hold { opacity: 1 !important; } .nvs-lines .nvs-line { overflow: visible !important; } .nvs-lines .nvs-line-i, .nvs-stair.nvs-armed > *, .nvs-row.nvs-armed > *, .nvs-sec.nvs-armed { opacity: 1 !important; transform: none !important; transition: none !important; } .nvs-veil::after, .nvs-veil.nvs-armed::after { display: none !important; } .nvs-veil img, .nvs-veil.nvs-armed img, .nvs-par { transform: none !important; transition: none !important; } .nvs-list li:before, .nvs-list.nvs-armed li:before, .nvs-edge::before, .nvs-edge.nvs-armed::before { transform: none !important; transition: none !important; } /* признак «раздел в фокусе» и активная вкладка остаются — движения нет, но состояние видно */ .nvs-service .nvs-service-head::before, .nvs-tabs .nav-link::before { transition: none !important; } .nvs-map .pt, .nvs-map .halo, .nvs-map .pl { animation: none !important; transition: none !important; } .nvs-map .pt, .nvs-map .pl { opacity: 1 !important; } .nvs-map .halo { opacity: 0 !important; } .tab-content > .tab-pane { transition: none !important; transform: none !important; } .nvs-progress { display: none !important; } .btn.btn-base-color:hover { transform: none !important; } .nvs-row::before, .btn.btn-link::after { transition: none !important; } } /* =================================== НВС — правки вёрстки ====================================== */ /* =================================== НВС — правки по замечаниям заказчицы Дописывается В КОНЕЦ nvs.css: правила ниже перекрывают то, что задано выше, поэтому порядок трогать нельзя. ====================================== */ /* --- отступы, которых в теме нет --------------------------------- Crafto объявляет только шаги по 5 пикселей: mb-5px, mb-10px, mb-15px… В разметке же стоят mb-8px, mb-12px, mb-14px и me-12px — эти классы не существовали и ничего не делали. Объявляем недостающие. */ .mb-8px { margin-bottom: 8px !important; } .mb-12px { margin-bottom: 12px !important; } .mb-14px { margin-bottom: 14px !important; } .mb-18px { margin-bottom: 18px !important; } .me-12px { margin-right: 12px !important; } /* =================================== 1. УСЛУГИ — крупные фотоврезки между направлениями Снимок занимает две трети экрана во всю его ширину, рядом тёмная плашка #1B1C1F с подписью — на всю высоту снимка. ====================================== */ .nvs-band { --band-h: clamp(380px, 44vw, 700px); } .nvs-band-photo picture { display: block; } .nvs-band-img { display: block; width: 100%; height: auto; } .nvs-band-note { background: var(--dark-gray); display: flex; align-items: center; padding: clamp(34px, 3.6vw, 70px); } .nvs-band-cap { font-family: var(--alt-font); font-size: clamp(1.25rem, 1.9vw, 1.85rem); line-height: 1.36; font-weight: 500; color: var(--white); margin: 0; } @media (min-width: 992px) { /* высота полосы задана явно: так снимок гарантированно крупный, а плашка ровно по нему, без «ступеньки» снизу */ .nvs-band-photo picture, .nvs-band-img { height: var(--band-h); } .nvs-band-img { object-fit: cover; object-position: center; } .nvs-band-note { min-height: var(--band-h); } } /* =================================== 2. УСЛУГИ — лента направлений: видно, что справа есть продолжение Четыре тихих признака вместо одного громкого: стрелки вынесены наверх и стали крупными, у правого края — затухание, обрезающее плитку (и пропадающее, когда лента домотана), ширина плитки подобрана так, что следующая всегда выглядывает краем, плюс видимая бордовая полоса прокрутки под лентой. ====================================== */ .nvs-carousel { position: relative; display: block; gap: 0; } .nvs-carousel-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; } .nvs-carousel-hint { font-family: var(--primary-font); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--medium-gray); } .nvs-carousel-nav { display: inline-flex; gap: 8px; flex: 0 0 auto; } .nvs-carousel-arrow { flex: 0 0 48px; width: 48px; height: 48px; align-self: auto; border: 1px solid var(--dark-gray); background: var(--dark-gray); color: var(--white); font-size: 24px; line-height: 1; padding: 0; } .nvs-carousel-arrow:hover { background: var(--base-color); border-color: var(--base-color); color: var(--white); } .nvs-carousel-arrow[disabled], .nvs-carousel-arrow[disabled]:hover { opacity: 1; background: transparent; border-color: var(--nvs-line); color: #B3A8A2; cursor: default; } /* затухание у краёв ленты: справа видно, пока лента не домотана, слева появляется, как только её сдвинули. Состояние берётся от стрелок — их [disabled] уже расставляет nvs.js */ .nvs-carousel-strip { position: relative; } .nvs-carousel-strip::before, .nvs-carousel-strip::after { content: ""; position: absolute; top: 0; bottom: 8px; width: clamp(48px, 7vw, 104px); pointer-events: none; transition: opacity .25s ease; } .nvs-carousel-strip::after { right: 0; opacity: 1; background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 58%, #fff 100%); } .nvs-carousel-strip::before { left: 0; opacity: 0; background: linear-gradient(270deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.88) 58%, #fff 100%); } .nvs-carousel:has(.nvs-carousel-arrow.next[disabled]) .nvs-carousel-strip::after { opacity: 0; } .nvs-carousel:has(.nvs-carousel-arrow.prev:not([disabled])) .nvs-carousel-strip::before { opacity: 1; } /* полоса прокрутки не прячется и красится в бордо: там, где браузер её рисует, она заодно показывает, какая часть ленты сейчас перед глазами */ .nvs-carousel-track { padding-bottom: 12px; scrollbar-width: thin; scrollbar-color: var(--base-color) var(--nvs-line); } .nvs-carousel-track::-webkit-scrollbar { height: 4px; } .nvs-carousel-track::-webkit-scrollbar-track { background: var(--nvs-line); } .nvs-carousel-track::-webkit-scrollbar-thumb { background: var(--base-color); } /* ширина плитки подобрана так, чтобы в ленту не помещалось целое число плиток: следующая всегда торчит краем. Сама плитка остаётся строгой. */ .nvs-tile { flex: 0 0 clamp(184px, calc((100% - 40px) / 4.5), 250px); /* кнопка по умолчанию центрует содержимое — из-за этого номера плиток стояли на разной высоте; выравниваем по верху */ display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } @media (max-width: 575px) { .nvs-carousel-arrow { display: none; } .nvs-carousel-head { justify-content: flex-start; margin-bottom: 14px; } .nvs-carousel-hint { font-size: 12px; } /* на телефоне плитка занимает три четверти экрана — следующая заведомо видна, и лента листается пальцем */ .nvs-tile { flex: 0 0 clamp(165px, 72%, 240px); } } @media (prefers-reduced-motion: reduce) { .nvs-carousel-strip::before, .nvs-carousel-strip::after { transition: none; } } /* =================================== 3. О КОМПАНИИ — номер и название клиента в разных колонках Номер больше не приклеен к тексту: у него своя колонка, а длинное название переносится под себя, а не под цифру. ====================================== */ .nvs-tabs .nav-link { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-items: baseline; } .nvs-tabs .nav-link .nvs-num { font-size: 13px; letter-spacing: 0.08em; } .nvs-tab-name { display: block; } @media (max-width: 991px) { .nvs-tabs .nav-link { column-gap: 12px; } } /* =================================== 4. О КОМПАНИИ — «что получает клиент» тёмной наборной плитой Пять пунктов лежат в сетке с волосяными линиями на тёмном поле: ни карточек, ни реестра строк, ни вкладок, ни аккордеона, ни карусели — такой формы на сайте больше нигде нет. Три пункта в верхнем ряду, два широких в нижнем; линии рисуются зазором сетки. ====================================== */ .nvs-value { background: var(--dark-gray); } .nvs-value-eyebrow { color: var(--nvs-rose); } .nvs-value-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px; background: rgba(255, 255, 255, .14); border-top: 1px solid rgba(255, 255, 255, .14); border-bottom: 1px solid rgba(255, 255, 255, .14); } .nvs-value-item { background: var(--dark-gray); padding: 40px 34px 42px; display: flex; flex-direction: column; } .nvs-value-item:nth-child(-n+3) { grid-column: span 2; } .nvs-value-item:nth-child(n+4) { grid-column: span 3; } .nvs-value-num { display: block; font-family: var(--alt-font); font-size: clamp(2.1rem, 3vw, 2.9rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--nvs-rose); margin-bottom: 20px; } .nvs-value-title { display: block; font-family: var(--alt-font); font-size: clamp(1.12rem, 1.5vw, 1.35rem); line-height: 1.32; font-weight: 600; color: var(--white); margin-bottom: 12px; } .nvs-value-text { font-size: 16px; line-height: 28px; color: rgba(255, 255, 255, .74); margin: 0; } @media (max-width: 1199px) { .nvs-value-item { padding: 32px 26px 34px; } } @media (max-width: 991px) { .nvs-value-grid { grid-template-columns: repeat(2, 1fr); } .nvs-value-item:nth-child(-n+3), .nvs-value-item:nth-child(n+4) { grid-column: span 1; } .nvs-value-item:last-child { grid-column: span 2; } } @media (max-width: 575px) { .nvs-value-grid { grid-template-columns: 1fr; } .nvs-value-item:nth-child(-n+3), .nvs-value-item:nth-child(n+4), .nvs-value-item:last-child { grid-column: span 1; } .nvs-value-item { padding: 30px 0 32px; } .nvs-value-num { margin-bottom: 14px; } } /* =================================== 5. ВСЕ ВНУТРЕННИЕ СТРАНИЦЫ — вводная плита под шапкой Абзац больше не висит один посреди пустого поля: он лежит на белой плите, которая заходит под тёмную шапку. Слева выносная первая фраза крупным кеглем, справа — остальной текст. ====================================== */ /* шапке добавлен запас снизу — ровно на тот кусок, который закрывает плита */ .nvs-pagehead-inner { padding-bottom: 132px; } .nvs-lead { position: relative; z-index: 3; } .nvs-lead-plate { position: relative; margin-top: -78px; background: var(--white); border-top: 3px solid var(--base-color); padding: clamp(34px, 3.4vw, 58px) clamp(26px, 3.2vw, 60px); box-shadow: 0 -14px 44px rgba(27, 28, 31, .13); } .nvs-lead-pull { font-family: var(--alt-font); font-size: clamp(1.18rem, 1.85vw, 1.6rem); line-height: 1.38; font-weight: 500; color: var(--dark-gray); margin: 0; } .nvs-lead-plate .nvs-lead-text p:last-child { margin-bottom: 0 !important; } /* одна фраза без продолжения (География) разворачивается во всю ширину плиты */ .nvs-lead-wide .nvs-lead-side { flex: 0 0 100%; max-width: 100%; } .nvs-lead-wide .nvs-lead-pull { max-width: 54ch; font-size: clamp(1.25rem, 2.1vw, 1.9rem); } @media (min-width: 992px) { /* волосяная линия делит выноску и текст */ .nvs-lead-plate .nvs-lead-side { padding-right: 42px; } .nvs-lead-plate .nvs-lead-text { padding-left: 42px; border-left: 1px solid var(--nvs-line); } .nvs-lead-wide .nvs-lead-side { padding-right: 15px; } } @media (max-width: 991px) { .nvs-pagehead-inner { padding-bottom: 106px; } .nvs-lead-plate { margin-top: -52px; } .nvs-lead-plate .nvs-lead-side { margin-bottom: 22px; } } @media (max-width: 767px) { /* на узком экране плита просто примыкает к шапке — накладывать нечего */ .nvs-pagehead-inner { padding-bottom: 48px; } .nvs-lead-plate { margin-top: 0; box-shadow: none; } } @media (max-width: 575px) { .nvs-pagehead-inner { padding-bottom: 40px; } .nvs-lead-plate { padding: 30px 22px 32px; } } /* фотоврезка между направлениями: кадр должен дышать во всю высоту полосы */ .nvs-shot { height: 100%; } .nvs-shot img, .nvs-shot picture { width: 100%; height: 100%; object-fit: cover; display: block; } @media (min-width: 992px) { .nvs-shot { min-height: 460px; } } .opacity-85 { opacity: .85; } /* три срочные ситуации: колонки на тёмном, разделённые тонкой линией */ .nvs-urgent > [class*="col-"] { position: relative; } @media (min-width: 768px) { .nvs-urgent > [class*="col-"]:not(:first-child)::before { content: ""; position: absolute; left: -1px; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, .16); } .nvs-urgent > [class*="col-"]:not(:first-child) { padding-left: 30px; } .nvs-urgent > [class*="col-"]:not(:last-child) { padding-right: 30px; } } .nvs-urgent .nvs-num { color: var(--nvs-rose); } .opacity-75 { opacity: .75; } /* =================================== НВС — исправления после сквозной проверки Дописано последним: перекрывает всё, что задано выше. ====================================== */ /* 1. У Prata единственное начертание. Любой вес выше 400 браузер подделывает обводкой, и тонкие штрихи антиквы разваливаются. */ h1, h2, h3, h4, h5, h6, .alt-font, .nvs-tile-name, .nvs-mail, .nvs-band-cap, .nvs-value-title, .nvs-value-num, .nvs-tabs .nav-link, .accordion-title span:last-child { font-weight: 400 !important; } /* 2. Заголовок первого экрана не должен ждать загрузки шрифта: при медленной сети посетитель видел бы пустое место. */ .nvs-lines.nvs-hold { opacity: 1; } .nvs-lines .nvs-line-inner { opacity: 1; } /* 3. Параллакс работает только на широком экране, а увеличение кадра стояло безусловно — на телефоне фото просто обрезалось. */ .nvs-par { transform: none; } @media (min-width: 992px) { .nvs-par { transform: scale(1.12); will-change: transform; } } /* 4. Вводная плита под шапкой не должна выезжать снизу: она частично заходит под шапку, и сдвиг ломает стык. */ .nvs-lead { transform: none !important; opacity: 1 !important; } /* =================================== НВС — правки по замечаниям 21.08 (вечер) ====================================== */ /* Схема цикла не должна зависеть от скрипта: без него шаги были невидимы. Прячем их только тогда, когда скрипт подтвердил, что готов анимировать. */ .nvsd1-a { opacity: 1 !important; } .nvs-scheme-inline.js-armed .nvsd1-a { opacity: 0 !important; } .nvs-scheme-inline.js-armed.is-visible .nvsd1-a { animation: nvsStepIn .5s ease-out both; opacity: 1 !important; } /* схема цикла прилегает к своему заголовку и к следующей секции */ /* сверху ноль — лента продолжает предыдущий блок; снизу бежевое поле, чтобы исходы не упирались в границу секции */ .nvs-cycle-sec { padding-top: 0 !important; padding-bottom: 96px !important; } @media (max-width: 767px) { .nvs-cycle-sec { padding-bottom: 62px !important; } } /* «Как устроена работа»: пять карточек не должны ломаться на 3 + 2 — центрируем ряд, чтобы нижние две стояли посередине */ .nvs-strengths-row { justify-content: center; } /* Клиенты: текст справа выравнивается по названию категории, а не по номеру над ним */ @media (min-width: 768px) { .nvs-row > [class*="col-"]:last-child { padding-top: 26px; } } /* =================================== НВС — суды и арбитражи: три группы в ряд ====================================== */ .nvs-forum-group { margin-bottom: 28px; } .nvs-forum-group:last-child { margin-bottom: 0; } .nvs-forum-label { display: block; font-family: var(--primary-font); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--base-color); margin-bottom: 14px; } .nvs-forum-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .nvs-forum { background: var(--white); border: 1px solid var(--nvs-line); border-radius: 10px; padding: 20px 18px; transition: border-color .3s var(--nvs-ease); } .nvs-forum:hover { border-color: var(--base-color); } .nvs-forum-name { display: block; font-family: var(--alt-font); font-size: 24px; line-height: 30px; color: var(--dark-gray); margin-bottom: 8px; } /* длинные русские названия набираем мельче, чтобы плитка не разъезжалась */ .nvs-forum-name.is-long { font-size: 17px; line-height: 24px; } .nvs-forum-note { display: block; font-size: 13px; line-height: 21px; color: var(--medium-gray); } @media (max-width: 991px) { .nvs-forum-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 479px) { .nvs-forum-tiles { grid-template-columns: 1fr; } } /* появление: плитки выходят волной внутри своей группы. Прячем только после .nvs-armed — его вешает скрипт; не отработал он, значит видно всё. */ .nvs-forum-tiles.nvs-armed .nvs-forum { opacity: 0; transform: translateY(14px); } .nvs-forum-tiles.nvs-armed.is-in .nvs-forum { opacity: 1; transform: none; transition: opacity .5s var(--nvs-ease), transform .5s var(--nvs-ease); } .nvs-forum-tiles.nvs-armed.is-in .nvs-forum:nth-child(2) { transition-delay: .07s; } .nvs-forum-tiles.nvs-armed.is-in .nvs-forum:nth-child(3) { transition-delay: .14s; } .nvs-forum-tiles.nvs-armed.is-in .nvs-forum:nth-child(4) { transition-delay: .21s; } @media (prefers-reduced-motion: reduce) { .nvs-forum-tiles.nvs-armed .nvs-forum { opacity: 1; transform: none; } } /* =================================== НВС — блок о компании на главной Без фотографии: вес держит крупная выносная строка. ====================================== */ .nvs-about { background: var(--white); padding: clamp(38px, 4.4vw, 70px); border-top: 3px solid var(--base-color); } .nvs-about-lead { font-family: var(--alt-font); font-size: clamp(1.15rem, 1.7vw, 1.5rem); line-height: 1.5; color: var(--dark-gray); margin: 0; } @media (min-width: 768px) { .nvs-about .col-md-5 { border-left: 1px solid var(--nvs-line); padding-left: 34px; } } /* =================================== НВС — контакты без формы ====================================== */ .nvs-mail-big { display: inline-block; font-family: var(--alt-font); font-size: clamp(1.6rem, 3.4vw, 2.8rem); line-height: 1.15; color: var(--dark-gray); text-decoration: none; border-bottom: 2px solid var(--base-color); padding-bottom: 6px; transition: color .2s ease; word-break: break-word; } .nvs-mail-big:hover { color: var(--base-color); } /* строка контакта: ключ отдельной строкой над значением */ .nvs-cline { margin-bottom: 22px; } .nvs-cline:last-of-type { margin-bottom: 0; } .nvs-cline-key { display: block; font-family: var(--primary-font); font-size: 12px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--medium-gray); margin-bottom: 6px; } .nvs-cline-val { display: block; font-size: 16px; line-height: 27px; color: var(--dark-gray); } /* =================================== НВС — цикл урегулирования вёрсткой Не картинка: текст копируется, блок тянется под экран, шаги появляются по очереди при прокрутке. ====================================== */ .nvs-flow { max-width: 940px; margin: 0 auto; } /* начало: событие, с которого всё стартует */ .nvs-flow-start { position: relative; padding-left: 90px; padding-bottom: 34px; min-height: 56px; } .nvs-flow-start-title { display: block; padding-top: 9px; font-family: var(--alt-font); font-size: 20px; line-height: 28px; color: var(--dark-gray); } .nvs-flow-start-note { display: block; font-size: 16px; line-height: 26px; color: var(--medium-gray); margin-top: 2px; } /* линия проходит через всю ленту шагов */ .nvs-steps { list-style: none; margin: 0; padding: 0; position: relative; } .nvs-steps::before { content: ""; position: absolute; left: 28px; top: -26px; bottom: 30px; width: 1px; background: var(--nvs-line); opacity: 1; } .nvs-step { position: relative; padding: 0 0 34px 90px; } .nvs-step:last-child { padding-bottom: 0; } /* номер живёт в крупном круге; маленькая точка больше не нужна */ .nvs-step-dot { display: none; } .nvs-step-num { position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid var(--nvs-line); font-family: var(--primary-font); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--medium-gray); z-index: 2; } .nvs-step-body { display: block; } .nvs-step-title { font-family: var(--alt-font); font-size: 21px; line-height: 30px; font-weight: 400; color: var(--dark-gray); margin: 0 0 6px; padding-top: 11px; } .nvs-step-text { font-size: 16px; line-height: 28px; color: #3A3C41; margin: 0; max-width: 720px; } /* начало ленты — такой же круг, только сплошной */ .nvs-flow-start .nvs-step-dot.is-start { display: flex; position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--base-color); border: 0; z-index: 2; } .nvs-flow-start .nvs-step-dot.is-start::after { content: ""; width: 12px; height: 12px; margin: auto; border-radius: 50%; background: var(--white); } /* исходы */ .nvs-flow-end { margin-top: 8px; } .nvs-flow-end-label { display: block; font-family: var(--alt-font); font-size: 17px; line-height: 26px; color: var(--base-color); padding: 30px 0 26px; border-top: 1px solid var(--nvs-line); margin-top: 14px; } .nvs-outcomes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .nvs-outcome { position: relative; background: var(--white); border: 1px solid var(--nvs-line); border-radius: 8px; padding: 26px 24px; text-align: left; transition: border-color .3s var(--nvs-ease), box-shadow .3s var(--nvs-ease); } /* короткий хвостик вверх — плитка прицеплена к подписи, а не висит сама по себе */ .nvs-outcome::before { content: ""; position: absolute; top: -9px; left: 26px; width: 1px; height: 9px; background: var(--nvs-line); } .nvs-outcome:hover { border-color: var(--base-color); box-shadow: 0 16px 34px -22px rgba(27, 28, 31, .3); } .nvs-outcome-text { display: block; font-family: var(--alt-font); font-size: 19px; line-height: 27px; color: var(--dark-gray); margin-bottom: 10px; } .nvs-outcome-note { display: block; font-size: 14px; line-height: 23px; color: var(--medium-gray); } @media (max-width: 767px) { .nvs-step { padding: 0 0 28px 64px; } .nvs-step-num { width: 44px; height: 44px; font-size: 15px; } .nvs-step-title { font-size: 19px; line-height: 27px; padding-top: 8px; } .nvs-steps::before { left: 22px; } .nvs-flow-start { padding-left: 64px; } .nvs-flow-start .nvs-step-dot.is-start { width: 44px; height: 44px; } .nvs-flow-start-title { padding-top: 7px; } .nvs-flow-start .nvs-step-dot.is-start { left: 15px; } .nvs-outcomes { grid-template-columns: 1fr; gap: 26px; } } /* появление по прокрутке: шаги выходят по очереди сверху вниз */ .nvs-flow.js-armed .nvs-step, .nvs-flow.js-armed .nvs-outcome, .nvs-flow.js-armed .nvs-flow-start { opacity: 0; transform: translateY(14px); } .nvs-flow.js-armed.is-visible .nvs-flow-start, .nvs-flow.js-armed.is-visible .nvs-step, .nvs-flow.js-armed.is-visible .nvs-outcome { opacity: 1; transform: none; transition: opacity .5s ease, transform .5s ease; } .nvs-flow.js-armed.is-visible .nvs-flow-start { transition-delay: 0s; } .nvs-flow.js-armed.is-visible .nvs-step { transition-delay: calc(.12s * var(--i)); } .nvs-flow.js-armed.is-visible .nvs-outcome { transition-delay: calc(.72s + .12s * var(--i)); } /* линия прочерчивается вместе с шагами */ .nvs-flow.js-armed .nvs-steps::before { transform: scaleY(0); transform-origin: top; } .nvs-flow.js-armed.is-visible .nvs-steps::before { transform: scaleY(1); transition: transform .9s ease-out; } @media (prefers-reduced-motion: reduce) { .nvs-flow.js-armed .nvs-step, .nvs-flow.js-armed .nvs-outcome, .nvs-flow.js-armed .nvs-flow-start { opacity: 1; transform: none; } .nvs-flow.js-armed .nvs-steps::before { transform: none; } } /* =================================== НВС — одно требование, две стороны ====================================== */ .nvs-sides { max-width: 1000px; margin: 0 auto; position: relative; } /* требование — отдельная плашка наверху: с неё начинается чтение схемы */ .nvs-sides-hub { text-align: center; } .nvs-sides-chip { display: inline-block; background: var(--base-color); color: var(--white); border-radius: 100px; padding: 12px 28px; font-family: var(--alt-font); font-size: 19px; line-height: 26px; } /* развилка: одна линия вниз, потом в стороны и к колонкам */ .nvs-sides-fork { display: block; width: 100%; height: 60px; } .nvs-sides-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; align-items: stretch; } .nvs-side { background: var(--white); border: 1px solid var(--nvs-line); border-radius: 10px; padding: 28px 28px 32px; } .nvs-side-label { display: block; font-family: var(--primary-font); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--base-color); margin-bottom: 12px; } .nvs-side-title { font-family: var(--alt-font); font-size: 21px; line-height: 30px; font-weight: 400; color: var(--dark-gray); margin: 0 0 8px; } .nvs-side-who { font-size: 15px; line-height: 25px; color: var(--medium-gray); margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--nvs-line); } .nvs-side-list { list-style: none; margin: 0; padding: 0; } .nvs-side-item { position: relative; font-size: 16px; line-height: 26px; color: #3A3C41; padding: 9px 0 9px 22px; } /* маркер одинаковый с обеих сторон: работа-то одна */ .nvs-side-item::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 1px; background: var(--base-color); } /* Узкий экран: колонки встают друг под друга, поэтому развилка в стороны теряет смысл — вместо неё короткий отрезок вниз от требования. */ @media (max-width: 820px) { .nvs-sides-grid { grid-template-columns: 1fr; gap: 16px; } .nvs-sides-chip { font-size: 17px; padding: 10px 22px; } .nvs-sides-fork { display: none; } .nvs-sides-hub { position: relative; padding-bottom: 34px; } .nvs-sides-hub::after { content: ""; position: absolute; left: 50%; bottom: 6px; width: 1px; height: 22px; background: var(--base-color); } .nvs-diagram.js-armed .nvs-sides-hub::after { transform: scaleY(0); transform-origin: top; } .nvs-diagram.js-armed.is-visible .nvs-sides-hub::after { transform: none; transition: transform .5s var(--nvs-ease) .28s; } } @media (max-width: 767px) { } /* Появление объясняет схему по порядку: сначала само требование, от него прочерчиваются ветви, затем приходят стороны и пункты. */ .nvs-diagram.js-armed .nvs-sides-chip { opacity: 0; transform: scale(.92); } .nvs-diagram.js-armed .nvs-sides-fork path { stroke-dasharray: 700; stroke-dashoffset: 700; } .nvs-diagram.js-armed .nvs-side { opacity: 0; transform: translateY(22px); } .nvs-diagram.js-armed .nvs-side-item { opacity: 0; } .nvs-diagram.js-armed.is-visible .nvs-sides-chip { opacity: 1; transform: none; transition: opacity .5s var(--nvs-ease), transform .6s var(--nvs-ease); } .nvs-diagram.js-armed.is-visible .nvs-sides-fork path { stroke-dashoffset: 0; transition: stroke-dashoffset .95s var(--nvs-ease) .28s; } .nvs-diagram.js-armed.is-visible .nvs-side { opacity: 1; transform: none; transition: opacity .6s var(--nvs-ease) .72s, transform .7s var(--nvs-ease) .72s; } .nvs-diagram.js-armed.is-visible .nvs-side:last-child { transition-delay: .86s; } .nvs-diagram.js-armed.is-visible .nvs-side-item { opacity: 1; transition: opacity .45s ease calc(1s + .09s * var(--i)); } @media (prefers-reduced-motion: reduce) { .nvs-diagram.js-armed .nvs-sides-chip, .nvs-diagram.js-armed .nvs-side, .nvs-diagram.js-armed .nvs-side-item, .nvs-diagram.js-armed .nvs-sides-fork path { stroke-dashoffset: 0; } } /* =================================== НВС — арест судна ====================================== */ .nvs-arrest { max-width: 1000px; margin: 0 auto; } /* строка срочности — единственное место на сайте, где счёт идёт на часы */ .nvs-arrest-alarm { display: block; margin: 0 0 26px; padding: 18px 24px; background: var(--dark-gray); border-radius: 10px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, .72); } .nvs-arrest-alarm strong { font-family: var(--alt-font); font-weight: 400; font-size: 19px; color: var(--white); margin-right: 8px; } /* два входа: человек в беде выбирает свой случай и читает только его */ .nvs-arr-doors { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; } .nvs-arr-door { display: block; width: 100%; text-align: left; background: var(--white); border: 1px solid var(--nvs-line); border-radius: 10px; padding: 22px 24px; font-family: var(--primary-font); cursor: pointer; transition: border-color .3s var(--nvs-ease), box-shadow .3s var(--nvs-ease); } .nvs-arr-door:hover { border-color: var(--base-color); } .nvs-arr-door.is-on { border-color: var(--base-color); box-shadow: 0 0 0 1px var(--base-color) inset; } .nvs-arr-door-title { display: block; font-family: var(--alt-font); font-size: 19px; line-height: 27px; color: var(--dark-gray); margin-bottom: 5px; } .nvs-arr-door-note { display: block; font-size: 14px; line-height: 22px; color: var(--medium-gray); } .nvs-arr-pane { background: var(--white); border: 1px solid var(--nvs-line); border-radius: 10px; padding: 26px 28px 30px; } .nvs-arr-label { display: block; font-family: var(--primary-font); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--base-color); margin-bottom: 10px; } .nvs-arr-title { font-family: var(--alt-font); font-size: 20px; line-height: 29px; font-weight: 400; color: var(--dark-gray); margin: 0 0 4px; } .nvs-arr-list { list-style: none; margin: 14px 0 0; padding: 0; counter-reset: nvsarr; } .nvs-arr-item { position: relative; padding: 10px 0 10px 40px; font-size: 16px; line-height: 26px; color: #3A3C41; } .nvs-arr-item::before { counter-increment: nvsarr; content: counter(nvsarr, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--base-color); font-variant-numeric: tabular-nums; } @media (max-width: 767px) { .nvs-arr-doors { grid-template-columns: 1fr; gap: 12px; } .nvs-arrest-alarm { padding: 16px 18px; } } /* появление: строка срочности, затем входы, затем шаги выбранного сценария */ .nvs-arrest.js-armed .nvs-arrest-alarm, .nvs-arrest.js-armed .nvs-arr-door, .nvs-arrest.js-armed .nvs-arr-pane { opacity: 0; transform: translateY(14px); } .nvs-arrest.js-armed.is-visible .nvs-arrest-alarm, .nvs-arrest.js-armed.is-visible .nvs-arr-door, .nvs-arrest.js-armed.is-visible .nvs-arr-pane { opacity: 1; transform: none; transition: opacity .55s var(--nvs-ease), transform .6s var(--nvs-ease); } .nvs-arrest.js-armed.is-visible .nvs-arr-door:nth-child(1) { transition-delay: .14s; } .nvs-arrest.js-armed.is-visible .nvs-arr-door:nth-child(2) { transition-delay: .24s; } .nvs-arrest.js-armed.is-visible .nvs-arr-pane { transition-delay: .36s; } /* шаги выходят по очереди — и при первом показе, и при переключении входа */ .nvs-arr-pane .nvs-arr-item { opacity: 0; transform: translateY(8px); } .nvs-arr-pane.is-shown .nvs-arr-item { opacity: 1; transform: none; transition: opacity .45s var(--nvs-ease) calc(.06s * var(--i)), transform .45s var(--nvs-ease) calc(.06s * var(--i)); } @media (prefers-reduced-motion: reduce) { .nvs-arrest.js-armed .nvs-arrest-alarm, .nvs-arrest.js-armed .nvs-arr-door, .nvs-arrest.js-armed .nvs-arr-pane, .nvs-arr-pane .nvs-arr-item { opacity: 1; transform: none; } } /* ═══════════════════════════════════════════════════════════════════ ДВИЖЕНИЕ — вторая очередь. Девять эффектов, отобранных заказчиком на странице animatsii.html (номера сохранены для сверки). Правило то же, что и выше: элемент прячется только после того, как скрипт лично повесил .nvs-armed. Не отработал скрипт — видно всё. ═══════════════════════════════════════════════════════════════════ */ /* ── 3. Ссылка «Подробнее»: стрелка улетает, приезжает вторая ─────── */ .nvs-ilink { position: relative; display: inline-flex; align-items: center; gap: 12px; padding-bottom: 8px; font-weight: 500; color: var(--dark-gray); text-decoration: none; transition: color .3s var(--nvs-ease); } .nvs-ilink::after, .nvs-ilink::before { content: ''; position: absolute; left: 0; bottom: 0; height: 1px; } .nvs-ilink::after { width: 100%; background: var(--nvs-line); } .nvs-ilink::before { width: 0; background: var(--base-color); z-index: 1; transition: width .5s var(--nvs-ease); } .nvs-ilink:hover { color: var(--base-color); } .nvs-ilink:hover::before { width: 100%; } .nvs-ilink-box { position: relative; flex: none; width: 20px; height: 14px; overflow: hidden; } .nvs-ilink-box svg { position: absolute; left: 0; top: 0; transition: transform .45s var(--nvs-ease); } .nvs-ilink-box svg + svg { transform: translateX(-130%); } .nvs-ilink:hover .nvs-ilink-box svg { transform: translateX(130%); } .nvs-ilink:hover .nvs-ilink-box svg + svg { transform: translateX(0); } /* на тёмной подложке */ .nvs-ilink.is-light { color: #fff; } .nvs-ilink.is-light::after { background: rgba(255,255,255,.24); } .nvs-ilink.is-light::before { background: #fff; } .nvs-ilink.is-light:hover { color: #fff; } /* ── 9. Встречный выезд: текст слева, фотография справа ───────────── */ .nvs-inleft.nvs-armed { opacity: 0; transform: translateX(-56px); } .nvs-inright.nvs-armed { opacity: 0; transform: translateX(56px); } .nvs-inleft.nvs-armed.is-in, .nvs-inright.nvs-armed.is-in { opacity: 1; transform: none; transition: opacity .85s var(--nvs-ease), transform .95s var(--nvs-ease); } /* ── 13. Горизонтальная лента шагов ──────────────────────────────── */ .nvs-rail { display: flex; } .nvs-rail-item { flex: 1; position: relative; padding: 0 30px; } .nvs-rail-item:first-child { padding-left: 0; } .nvs-rail-item:last-child { padding-right: 0; } .nvs-rail-item:not(:last-child)::after { content: ''; position: absolute; right: 0; top: 8px; bottom: 4px; width: 1px; background: var(--nvs-line); } .nvs-rail-num { display: block; font-family: var(--alt-font); font-size: clamp(1.9rem, 2.6vw, 2.4rem); line-height: 1; color: var(--base-color); font-variant-numeric: tabular-nums; margin-bottom: 18px; } .nvs-rail-title { display: block; font-family: var(--alt-font); font-size: 19px; line-height: 1.3; color: var(--dark-gray); margin-bottom: 8px; } .nvs-rail-text { font-size: 15px; line-height: 27px; color: var(--medium-gray); margin: 0; } @media (max-width: 991px) { .nvs-rail { flex-wrap: wrap; gap: 34px 0; } .nvs-rail-item { flex: 0 0 50%; padding: 0 26px 0 0; } .nvs-rail-item:nth-child(2n)::after { display: none; } } @media (max-width: 575px) { .nvs-rail-item { flex: 0 0 100%; padding: 0; } .nvs-rail-item::after { display: none; } } /* ── 14. Линия цикла растёт вместе с прокруткой ──────────────────── */ /* Дорожка остаётся серой, поверх неё тянется бордовая заливка. Высоту заливки ставит скрипт — ровно по прокрутке, без таймеров. */ .nvs-flow-fill { position: absolute; left: 28px; top: -26px; width: 1px; height: 0; background: var(--base-color); will-change: height; } /* дорожка становится нейтрально-серой: цвет теперь несёт заливка */ .nvs-steps.nvs-tracked::before { background: var(--nvs-line); opacity: 1; } /* прочерчивание по таймеру уступает место прокрутке */ .nvs-flow.js-armed .nvs-steps.nvs-tracked::before, .nvs-flow.js-armed.is-visible .nvs-steps.nvs-tracked::before { transform: none; transition: none; } @media (max-width: 767px) { .nvs-flow-fill { left: 20px; } } /* точка загорается, когда линия до неё дошла */ .nvs-steps.nvs-tracked .nvs-step .nvs-step-num { transition: background-color .45s var(--nvs-ease), border-color .45s var(--nvs-ease), color .45s var(--nvs-ease), box-shadow .45s var(--nvs-ease); } /* линия дошла до круга — он заливается бордовым и получает мягкий ореол */ .nvs-steps.nvs-tracked .nvs-step.is-passed .nvs-step-num { background: var(--base-color); border-color: var(--base-color); color: var(--white); box-shadow: 0 0 0 7px rgba(139, 42, 62, .09); } /* ── 16. Числа накручиваются ─────────────────────────────────────── */ .nvs-count-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; } .nvs-count-item { text-align: left; } .nvs-count-num { display: block; font-family: var(--alt-font); font-size: clamp(2.2rem, 3.4vw, 3.1rem); line-height: 1; color: var(--base-color); font-variant-numeric: tabular-nums; margin-bottom: 12px; } .nvs-count-label { display: block; font-size: 15px; line-height: 25px; color: var(--medium-gray); } .nvs-count-grid.is-light .nvs-count-num { color: #fff; } /* строка вместо числа: кегль мельче, иначе фраза не встаёт в колонку */ .nvs-count-num.is-word { font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.16; } .nvs-count-grid.is-light .nvs-count-label { color: rgba(255,255,255,.62); } @media (max-width: 991px) { .nvs-count-grid { grid-template-columns: repeat(2, 1fr); gap: 34px 24px; } } @media (max-width: 479px) { .nvs-count-grid { grid-template-columns: 1fr; } } /* ── 18. Карточка приподнимается при наведении ───────────────────── */ .nvs-lift { position: relative; overflow: hidden; transition: transform .45s var(--nvs-ease), box-shadow .45s var(--nvs-ease), border-color .45s var(--nvs-ease); } .nvs-lift::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--base-color); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--nvs-ease); } .nvs-lift:hover { transform: translateY(-8px); box-shadow: 0 22px 44px -20px rgba(27, 28, 31, .22); } .nvs-lift:hover::before { transform: scaleY(1); } .nvs-lift-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; font-size: 15px; font-weight: 500; color: var(--base-color); opacity: 0; transform: translateX(-8px); transition: opacity .45s var(--nvs-ease), transform .45s var(--nvs-ease); } .nvs-lift:hover .nvs-lift-more { opacity: 1; transform: none; } /* стрелка внутри карточки слушает наведение на всю карточку */ .nvs-lift:hover .nvs-ilink-box svg { transform: translateX(130%); } .nvs-lift:hover .nvs-ilink-box svg + svg { transform: translateX(0); } /* на устройствах без наведения ссылка видна сразу */ @media (hover: none) { .nvs-lift-more { opacity: 1; transform: none; } .nvs-lift::before { transform: scaleY(1); } } /* ── 19. Волна на границе тёмной и светлой секции ────────────────── */ .nvs-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 62px; line-height: 0; pointer-events: none; z-index: 2; } .nvs-wave svg { display: block; width: 100%; height: 100%; } @media (max-width: 767px) { .nvs-wave { height: 38px; } } /* ── общее: уважение к системной настройке «меньше движения» ─────── */ @media (prefers-reduced-motion: reduce) { .nvs-inleft.nvs-armed, .nvs-inright.nvs-armed { opacity: 1; transform: none; } .nvs-ilink-box svg + svg { display: none; } .nvs-wave svg animate { display: none; } } /* три исхода на узком экране: столбиком, без хвостиков */ @media (max-width: 767px) { .nvs-outcomes { grid-template-columns: 1fr; gap: 14px; } .nvs-outcome::before { display: none; } .nvs-outcome { padding: 22px 20px; } .nvs-outcome-text { font-size: 18px; line-height: 26px; } } /* линия по центру круга на узком экране */ @media (max-width: 767px) { .nvs-flow-fill { left: 22px; } .nvs-flow-start .nvs-step-dot.is-start::after { width: 10px; height: 10px; } } /* перечень внутри пункта: без него дефисы схлопывались в один абзац */ .nvs-sublist { list-style: none; margin: 10px 0 0; padding: 0; } .nvs-sublist li { position: relative; padding: 4px 0 4px 20px; font-size: 15px; line-height: 25px; } .nvs-sublist li::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 1px; background: currentColor; opacity: .5; } /* ── Клиенты: досье с постоянными рубриками ─────────────────────── */ .nvs-aud { background: var(--white); border: 1px solid var(--nvs-line); border-radius: 10px; margin-bottom: 14px; overflow: hidden; } .nvs-aud:last-child { margin-bottom: 0; } .nvs-aud-top { display: flex; gap: 20px; align-items: baseline; padding: 22px 26px 18px; border-bottom: 1px solid var(--nvs-line); } .nvs-aud-num { flex: none; font-size: 12px; font-weight: 600; color: var(--base-color); font-variant-numeric: tabular-nums; padding-top: 5px; } .nvs-aud-who { flex: 1; font-family: var(--alt-font); font-size: 20px; line-height: 28px; color: var(--dark-gray); } .nvs-aud-with { flex: none; max-width: 46%; font-size: 13px; line-height: 21px; color: var(--medium-gray); text-align: right; } .nvs-aud-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .nvs-aud-f { padding: 18px 26px; border-right: 1px solid var(--nvs-line); border-bottom: 1px solid var(--nvs-line); } .nvs-aud-f:nth-child(2n) { border-right: 0; } .nvs-aud-fields .nvs-aud-f:nth-last-child(-n+1) { border-bottom: 0; } .nvs-aud-fields.is-odd .nvs-aud-f:nth-last-child(-n+2) { border-bottom: 0; } .nvs-aud-lbl { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--base-color); margin-bottom: 5px; } .nvs-aud-txt { display: block; font-size: 15px; line-height: 25px; color: #3A3C41; } @media (max-width: 991px) { .nvs-aud-fields { grid-template-columns: 1fr; } .nvs-aud-f { border-right: 0; } .nvs-aud-top { flex-direction: column; gap: 6px; } .nvs-aud-with { max-width: 100%; text-align: left; } } /* появление — под защитой .nvs-armed, как и всё остальное движение */ .nvs-aud.nvs-armed { opacity: 0; transform: translateY(16px); } .nvs-aud.nvs-armed.is-in { opacity: 1; transform: none; transition: opacity .6s var(--nvs-ease), transform .6s var(--nvs-ease); } @media (prefers-reduced-motion: reduce) { .nvs-aud.nvs-armed { opacity: 1; transform: none; } } /* ── «Читать дальше»: три ссылки вглубь вместо призыва ──────────── */ .nvs-next-lbl { display: block; font-family: var(--primary-font); font-size: 12px; letter-spacing: .09em; text-transform: uppercase; color: var(--base-color); margin-bottom: 18px; } .nvs-next { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .nvs-next-link { display: block; background: var(--white); border: 1px solid var(--nvs-line); border-radius: 10px; padding: 22px 24px 24px; text-decoration: none; transition: border-color .3s var(--nvs-ease), transform .3s var(--nvs-ease), box-shadow .3s var(--nvs-ease); } .nvs-next-link:hover { border-color: var(--base-color); transform: translateY(-4px); box-shadow: 0 16px 32px -22px rgba(27, 28, 31, .28); } .nvs-next-name { display: block; font-family: var(--alt-font); font-size: 19px; line-height: 27px; color: var(--dark-gray); margin-bottom: 5px; } .nvs-next-note { display: block; font-size: 14px; line-height: 22px; color: var(--medium-gray); } @media (max-width: 767px) { .nvs-next { grid-template-columns: 1fr; gap: 10px; } } /* ── Длина строки ─────────────────────────────────────────────────── Комфортно читается 60–75 знаков в строке. На широком экране колонки растягивались до 99–125 знаков: глаз теряет начало следующей строки. Ограничиваем ширину самого текста, а не колонки, — сетка не меняется. */ .nvs-row p, .nvs-step-text, .nvs-arrest-alarm, .nvs-aud-txt, .nvs-side-item, .nvs-measure p { max-width: 66ch; } /* тёмная плашка срочности была самой длинной строкой на сайте (125 знаков) */ .nvs-arrest-alarm { max-width: 62ch; } @media (max-width: 991px) { .nvs-row p, .nvs-step-text, .nvs-arrest-alarm, .nvs-aud-txt, .nvs-side-item, .nvs-measure p { max-width: none; } }