/* * Раздел «Инструменты» — общий слой поверх темы. * Всё скоуплено под .tools-scope (класс на для путей /tools*), * поэтому правила не задевают остальной сайт. */ /* --- Видно без JavaScript -------------------------------------------------- * Тема анимирует блоки через .wow (visibility:hidden до срабатывания wow.js). * Без JS контент оставался бы скрытым навсегда — держим его видимым. */ .no-js .wow { visibility: visible !important; animation: none !important; opacity: 1 !important; } /* --- Контейнер ------------------------------------------------------------ * Дефолтные 1500px растягивают формы с двумя полями на всю ширину экрана. * Инструментам нужна колонка поуже, чтобы поля читались как единый блок. */ .tools-scope section.sec-pad-3 > .auto-container, .tools-scope .tool-canvas { max-width: 1160px; } /* --- Иерархия заголовков -------------------------------------------------- * H1 страницы (36px в теме) должен доминировать над заголовком секции. */ .tools-scope .sec-title h2 { font-size: 30px; line-height: 1.25; } /* Вступление на хабе: тема делает

внутри .sec-title капсом с разрядкой — * для абзаца в 60 слов это нечитаемо. Возвращаем обычный текст. */ .tools-scope .sec-title p.tools-lead { text-transform: none; letter-spacing: normal; font-size: 16px; line-height: 1.7; color: #6c757d; font-weight: 400; } .tools-scope .sec-title p.tools-lead code { text-transform: none; letter-spacing: normal; } /* --- Карточки инструментов на хабе ---------------------------------------- */ .tools-scope .chooseus-section .inner-column { margin-bottom: 28px; } .tools-scope .chooseus-section .inner-box { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e6e9ef; border-radius: 14px; padding: 28px 26px; box-shadow: 0 1px 2px rgba(30, 45, 90, .04); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .tools-scope .chooseus-section .inner-box:hover { border-color: #adbdf7; box-shadow: 0 14px 34px rgba(40, 60, 120, .10); transform: translateY(-3px); } .tools-scope .chooseus-section .inner-box h3 { margin: 0 0 12px; font-size: 20px; line-height: 1.3; } .tools-scope .chooseus-section .inner-box h3 a { color: #2b2b2b; } .tools-scope .chooseus-section .inner-box h3 a:hover { color: #2f6bff; } .tools-scope .chooseus-section .inner-box > p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; } .tools-scope .chooseus-section .inner-box .proj-role { margin: auto 0 0; padding-top: 8px; font-weight: 600; } .tools-scope .chooseus-section .inner-box .proj-role a { color: #2f6bff; } /* Малый указатель на посадочные пары внутри карточки конвертера */ .tools-scope .chooseus-section .inner-box .card-subpairs { font-size: 13.5px; line-height: 1.55; color: #7a8394; } /* --- Формы: единый вид select / input / textarea -------------------------- */ .tools-scope select, .tools-scope input[type="text"], .tools-scope input[type="number"], .tools-scope input[type="search"], .tools-scope textarea { width: 100%; border: 1px solid #d7dce3; border-radius: 8px; background-color: #fff; color: #2b2b2b; font-family: inherit; font-size: 15px; line-height: 1.4; padding: 10px 13px; transition: border-color .15s ease, box-shadow .15s ease; } .tools-scope textarea { font-family: "JetBrains Mono", "Fira Code", Consolas, Menlo, monospace; font-size: 14px; line-height: 1.55; } .tools-scope select { height: 44px; appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; } .tools-scope select:focus, .tools-scope input[type="text"]:focus, .tools-scope input[type="number"]:focus, .tools-scope input[type="search"]:focus, .tools-scope textarea:focus { outline: none; border-color: #6c8cff; box-shadow: 0 0 0 3px rgba(90, 120, 255, .16); } /* Подпись/подсказка под полем */ .tools-scope .field-label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: #55606e; } /* Видимый фокус на клавиатуре — базовый уровень доступности */ .tools-scope a:focus-visible, .tools-scope button:focus-visible, .tools-scope select:focus-visible, .tools-scope input:focus-visible, .tools-scope textarea:focus-visible { outline: 2px solid #2f6bff; outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .tools-scope .chooseus-section .inner-box { transition: none; } .tools-scope .chooseus-section .inner-box:hover { transform: none; } } /* Кликабельность всей карточки инструмента (тап-таргет ≥44px). «Открыть инструмент →» растягивается на всю карточку через ::after, заголовок и ссылки на под-пары остаются кликабельными поверх оверлея. */ .tools-scope .chooseus-section .inner-box { position: relative; } .tools-scope .chooseus-section .inner-box .proj-role a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .tools-scope .chooseus-section .inner-box h3 a, .tools-scope .chooseus-section .inner-box .card-subpairs a { position: relative; z-index: 2; }