/* ===================================================================== FindCert — Design System v2 (ФУНДАМЕНТ) Акцент — графит (монохром). Шрифт Onest. Токены из бренд-бука. Подключается ПОСЛЕДНИМ в (после style.css / header-styles.css), чтобы переопределять базу. Ничего в PHP-логике не меняет. ===================================================================== */ :root{ /* Нейтральные */ --ink:#17171A; --ink-plus:#0A0A0C; --muted:#5B5B63; --muted-2:#8A8A93; --border:#DADADE; --border-soft:#E9E9EC; --canvas:#F1F1F3; --surface:#FFFFFF; /* Акцент — графит */ --tint:#EFEFF2; --soft:#CDCDD3; --accent:#3F3F46; --deep:#1D1D22; /* Радиусы */ --r-xs:6px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px; /* Тени */ --sh-xs:0 1px 3px rgba(0,0,0,.08); --sh-sm:0 4px 16px rgba(23,23,26,.06); --sh-md:0 12px 32px rgba(23,23,26,.10); --sh-lg:0 18px 40px rgba(0,0,0,.18); --fc-font:'Onest',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --fc-wrap:1200px; } /* ---------- База ---------- */ body{ font-family:var(--fc-font); background:var(--canvas); color:var(--ink); -webkit-font-smoothing:antialiased; } body,.container,.main-content{scroll-behavior:smooth} .main-content h1,.main-content h2,.main-content h3,.main-content h4, .fc-header,.footer{font-family:var(--fc-font)} h1,h2,h3,h4{letter-spacing:-.02em} .container{max-width:var(--fc-wrap); margin:0 auto; padding:0 24px} /* ===================================================================== КНОПКИ — единый графитовый стиль для всех вариантов сайта ===================================================================== */ .fc-btn,.btn-enhanced,.btn,.quick-action-btn{ font-family:var(--fc-font); transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; } /* fc-* кнопки (шапка) */ .fc-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:1px solid transparent; border-radius:var(--r-md); font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none} .fc-btn--primary{background:var(--deep); color:#fff; box-shadow:var(--sh-sm)} .fc-btn--primary:hover{background:var(--ink); transform:translateY(-1px); box-shadow:var(--sh-md); color:#fff} .fc-btn--dark{background:var(--ink); color:#fff} .fc-btn--dark:hover{background:var(--ink-plus); transform:translateY(-1px); color:#fff} .fc-btn--secondary{background:var(--surface); color:var(--ink); border-color:var(--border)} .fc-btn--secondary:hover{border-color:var(--soft); background:var(--tint); color:var(--ink); transform:translateY(-1px)} .fc-btn--small{padding:8px 14px; font-size:13px; border-radius:var(--r-sm)} /* .btn-enhanced (контент-страницы) → графит */ .btn-enhanced{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 22px; border-radius:var(--r-md); font-weight:600; font-size:14px; text-decoration:none; border:1px solid transparent; cursor:pointer} .btn-primary-enhanced{background:var(--deep); color:#fff; box-shadow:var(--sh-sm)} .btn-primary-enhanced:hover{background:var(--ink); color:#fff; transform:translateY(-1px); box-shadow:var(--sh-md)} .btn-secondary-enhanced{background:var(--surface); color:var(--ink); border:1px solid var(--border)} .btn-secondary-enhanced:hover{background:var(--tint); color:var(--ink); border-color:var(--soft)} .btn-large-enhanced{padding:15px 30px; font-size:15px; border-radius:var(--r-md)} .btn-cta-primary{background:#fff; color:var(--ink)} .btn-cta-primary:hover{background:rgba(255,255,255,.9); color:var(--ink); transform:translateY(-1px)} .btn-cta-secondary{background:transparent; color:#fff; border:1px solid rgba(255,255,255,.35)} .btn-cta-secondary:hover{background:rgba(255,255,255,.1); color:#fff} .quick-action-btn{border-radius:var(--r-md); font-weight:600} /* ===================================================================== ШАПКА (классы боевого сайта, стиль v2) ===================================================================== */ .fc-header{background:var(--surface); border-bottom:1px solid var(--border-soft); box-shadow:0 1px 0 rgba(23,23,26,.02); font-family:var(--fc-font)} .fc-header .fc-header__container{max-width:var(--fc-wrap); padding:0 24px} .fc-header .fc-header__top{background:transparent; border-bottom:1px solid var(--border-soft); padding:9px 0; font-size:13px} .fc-header .fc-header__top-inner{justify-content:flex-end; gap:8px} .fc-header .fc-header__main{padding:14px 0; gap:24px} /* лого — строкой: [F] + (название/подзаголовок). Перебиваем column из header-styles.css */ .fc-header .fc-logo{flex-direction:row; align-items:center; gap:12px; text-decoration:none} .fc-header .fc-logo:hover{transform:none} .fc-header .fc-logo__mark{flex:none; width:40px; height:40px; border-radius:11px; background:var(--ink); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:18px} .fc-header .fc-logo__text{display:flex; flex-direction:column; line-height:1.1} .fc-header .fc-logo__title{font-weight:800; font-size:19px; letter-spacing:-.02em; color:var(--ink); line-height:1.15} .fc-header .fc-logo__subtitle{font-size:12px; color:var(--muted-2); font-weight:500; text-transform:none; letter-spacing:0; margin-top:1px} .fc-header .fc-nav__list{gap:4px} .fc-header .fc-nav__link{padding:9px 13px; border-radius:var(--r-sm); font-size:15px; font-weight:500; color:var(--muted)} .fc-header .fc-nav__link::after{display:none} .fc-header .fc-nav__link:hover{color:var(--ink); background:var(--tint)} .fc-header .fc-nav__link--active{background:var(--tint); color:var(--ink); font-weight:600} .fc-header .fc-search__form{width:240px; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md); overflow:hidden} .fc-header .fc-search__form:focus-within{border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,23,26,.08)} .fc-header .fc-search__input{background:transparent; font-family:var(--fc-font); font-size:14px; color:var(--ink)} .fc-header .fc-search__button{color:var(--muted)} .fc-header .fc-search__button:hover{color:var(--ink)} /* ===================================================================== ФУТЕР (классы боевого сайта, стиль v2) ===================================================================== */ .footer{background:var(--ink); color:#fff; margin-top:64px; border:0} .footer .container{max-width:var(--fc-wrap)} .footer-content{grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding:56px 0 36px; border-bottom:1px solid rgba(255,255,255,.1)} .footer-brand h3{font-size:20px; font-weight:800; color:#fff} .footer-brand p{color:rgba(255,255,255,.55); font-size:14px; margin-top:12px} .footer-stats{gap:28px; margin-top:22px} .footer-stat .stat-number{font-size:26px; font-weight:800; color:#fff} .footer-stat .stat-label{font-size:12px; color:rgba(255,255,255,.5)} .footer-column h4{font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:16px} .footer-column ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px} .footer-column a{color:rgba(255,255,255,.8); font-size:14px; text-decoration:none} .footer-column a:hover{color:#fff} .footer-contacts .contact-type{color:rgba(255,255,255,.45); font-size:12px; letter-spacing:.06em} .footer-bottom{border:0; padding:22px 0; display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap} .footer-bottom p{color:rgba(255,255,255,.5); font-size:13px; margin:0} .footer-links{display:flex; gap:20px; flex-wrap:wrap} .footer-links a{color:rgba(255,255,255,.5); font-size:13px} .footer-links a:hover{color:#fff} .footer .footer-cta{background:transparent!important; color:#fff!important; border:1px solid rgba(255,255,255,.25); border-radius:var(--r-sm); padding:8px 14px; font-size:13px; font-weight:600} .footer .footer-cta:hover{background:rgba(255,255,255,.1)!important} /* ===================================================================== ПЕРЕИСПОЛЬЗУЕМЫЕ КОМПОНЕНТЫ (для перевёрстанных страниц) ===================================================================== */ .ds-breadcrumbs,.breadcrumbs{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted-2); font-size:14px; padding:18px 0} .ds-breadcrumbs a,.breadcrumbs a{color:var(--muted); text-decoration:none} .ds-breadcrumbs a:hover,.breadcrumbs a:hover{color:var(--ink)} .ds-page-head{padding:12px 0 8px} .ds-title{font-size:clamp(30px,4vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.04; color:var(--ink); margin:0} .ds-subtitle{color:var(--muted); font-size:17px; margin:14px 0 0; max-width:60ch} .ds-subtitle b{color:var(--ink)} .ds-eyebrow{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)} .ds-section-num{font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2); margin-bottom:16px} .ds-card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-xs); transition:box-shadow .2s ease, border-color .2s ease} .ds-card:hover{box-shadow:var(--sh-md); border-color:var(--soft)} .ds-card--pad{padding:24px} .ds-badge{display:inline-flex; align-items:center; gap:6px; padding:6px 12px; border-radius:var(--r-sm); font-size:12px; font-weight:600} .ds-badge--tint{background:var(--tint); color:var(--muted)} .ds-badge--caps{background:var(--tint); color:var(--muted-2); text-transform:uppercase; letter-spacing:.1em} .ds-badge--outline{background:var(--surface); border:1px solid var(--border); color:var(--ink)} .ds-badge--dark{background:var(--deep); color:#fff} .ds-badge--dot::before{content:""; width:7px; height:7px; border-radius:50%; background:#22a06b} .ds-tag{display:inline-flex; padding:7px 14px; border-radius:var(--r-pill); background:var(--tint); color:var(--ink); font-size:13px; font-weight:500; text-decoration:none} .ds-tag:hover{background:var(--soft)} .ds-price{font-size:22px; font-weight:800; letter-spacing:-.02em; color:var(--ink)} .ds-price__from{font-size:12px; font-weight:600; color:var(--muted-2); text-transform:uppercase; letter-spacing:.06em} .ds-stars{color:var(--ink); letter-spacing:1px; font-size:14px} .ds-stat{padding:22px 24px; border-radius:var(--r-lg)} .ds-stat--light{background:var(--surface); border:1px solid var(--border)} .ds-stat--dark{background:var(--deep); color:#fff} .ds-stat__num{font-size:32px; font-weight:800; letter-spacing:-.02em; line-height:1} .ds-stat__label{font-size:13px; color:var(--muted); margin-top:6px} .ds-stat--dark .ds-stat__label{color:rgba(255,255,255,.6)} .ds-table{width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden} .ds-table th{text-align:left; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); padding:15px 20px; background:var(--tint)} .ds-table td{padding:15px 20px; border-top:1px solid var(--border-soft); font-weight:600; color:var(--ink)} .ds-table td.ds-num{text-align:center; color:var(--muted); font-weight:500} .ds-table td.ds-pr{text-align:right} /* ===================================================================== HERO-АНИМАЦИЯ (джентльмен с лупой) — keyframes из бренд-бука Разметка фигуры (inline-styled) вставляется в index.php. ===================================================================== */ .fc-hero-anim{position:relative; width:100%; max-width:600px; height:520px; margin-left:auto} .fc-hero-anim__bg1{position:absolute; top:-80px; right:-60px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(23,23,26,.06), transparent 62%)} .fc-hero-anim__bg2{position:absolute; bottom:-60px; left:0; width:360px; height:360px; border-radius:50%; background:radial-gradient(circle, rgba(23,23,26,.04), transparent 60%)} .fc-hero-anim__dots{position:absolute; inset:0; background-image:radial-gradient(rgba(23,23,26,.05) 1px, transparent 1px); background-size:34px 34px} @keyframes fcaBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes fcaShoulder{0%{transform:rotate(-18deg)}16%{transform:rotate(-58deg)}38%{transform:rotate(-20deg)}56%{transform:rotate(-46deg)}74%,90%{transform:rotate(-46deg)}100%{transform:rotate(-18deg)}} @keyframes fcaElbow{0%{transform:rotate(-8deg)}16%{transform:rotate(-38deg)}38%{transform:rotate(-6deg)}56%{transform:rotate(-28deg)}74%,90%{transform:rotate(-28deg)}100%{transform:rotate(-8deg)}} @keyframes fcaFloatA{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}} @keyframes fcaFloatB{0%,100%{transform:translateY(-4px)}50%{transform:translateY(-14px)}} @keyframes fcaFloatC{0%,100%{transform:translateY(2px)}50%{transform:translateY(-8px)}} @keyframes fcaFound{0%,52%{background:#fff;border-color:#E4E4E7;box-shadow:0 8px 22px rgba(0,0,0,.12)}64%,94%{background:#F2F2F4;border-color:#17171A;box-shadow:0 18px 40px rgba(0,0,0,.22)}100%{background:#fff;border-color:#E4E4E7;box-shadow:0 8px 22px rgba(0,0,0,.12)}} @keyframes fcaCheckPop{0%,55%{transform:scale(.4);opacity:0}65%{transform:scale(1.25);opacity:1}74%,92%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}} @keyframes fcaCheckDraw{0%,58%{stroke-dashoffset:30}72%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:30}} @keyframes fcaRing{0%,55%{opacity:0;transform:scale(.6)}66%{opacity:.55;transform:scale(1)}80%,100%{opacity:0;transform:scale(1.5)}} @keyframes fcaGlint{0%,100%{opacity:.12;transform:translateY(0)}50%{opacity:.4;transform:translateY(-14px)}} @keyframes fcaWink{0%,40%{transform:scaleY(1)}45%{transform:scaleY(.08)}52%,100%{transform:scaleY(1)}} @keyframes fcaStacheL{0%,100%{transform:rotate(-24deg)}30%,60%{transform:rotate(-11deg)}} @keyframes fcaStacheR{0%,100%{transform:rotate(24deg)}30%,60%{transform:rotate(11deg)}} @keyframes fcaStacheC{0%,100%{transform:scaleX(1)}45%{transform:scaleX(.82)}} .fc-gentleman-stage{position:absolute;left:-16px;bottom:-1px;width:430px;height:466px;z-index:2;pointer-events:none} .fc-gentleman{display:block;width:100%;height:100%;overflow:visible;animation:fcpBob 4.8s ease-in-out infinite;transform-origin:50% 100%} .fc-gentleman__arm{transform-origin:200px 185px;animation:fcpArmScan 6s cubic-bezier(.45,0,.22,1) infinite} .fc-gentleman__forearm{transform-origin:247px 229px;animation:fcpForearm 6s cubic-bezier(.45,0,.22,1) infinite} .fc-gentleman__wink{transform-origin:167px 106px;animation:fcpWink 6.4s ease-in-out infinite} .fc-gentleman__moustache{transform-origin:149px 132px;animation:fcpMoustache 5.2s ease-in-out infinite} .fc-gentleman__lens-glint{animation:fcpLensGlint 3.2s ease-in-out infinite;transform-origin:350px 244px} @keyframes fcpBob{0%,100%{transform:translateY(0) rotate(-.25deg)}50%{transform:translateY(-7px) rotate(.35deg)}} @keyframes fcpArmScan{0%,12%,100%{transform:rotate(2deg)}32%{transform:rotate(-8deg)}52%{transform:rotate(1deg)}68%,86%{transform:rotate(-5deg)}} @keyframes fcpForearm{0%,12%,100%{transform:rotate(1deg)}32%{transform:rotate(-4deg)}52%{transform:rotate(2deg)}68%,86%{transform:rotate(-2deg)}} @keyframes fcpWink{0%,42%,49%,100%{transform:scaleY(1)}45%,47%{transform:scaleY(.08)}} @keyframes fcpMoustache{0%,100%{transform:scaleX(1)}45%,58%{transform:scaleX(.92)}} @keyframes fcpLensGlint{0%,28%,100%{opacity:.1;transform:translate(-34px,-20px)}52%,68%{opacity:.85;transform:translate(34px,20px)}} @media (prefers-reduced-motion: reduce){ .fc-hero-anim *,.fc-gentleman,.fc-gentleman *{animation:none!important} } /* ===================================================================== КОНТЕНТ-СТРАНИЦЫ v2 — scope .main-content даёт приоритет над постраничными одноклассовыми inline-стилями (специфичность 0,2,x). Каталог / Услуга / Компании / Компания / Прайс / О нас. ===================================================================== */ .main-content{background:var(--canvas)} /* Заголовок страницы (page-header / hero контент-страниц) */ .main-content .page-header{background:transparent; padding:16px 0 6px; border:0; color:var(--ink)} .main-content .page-header h1{font-size:clamp(30px,4vw,46px); font-weight:800; letter-spacing:-.03em; line-height:1.05; color:var(--ink); margin:0} .main-content .page-description{color:var(--muted); font-size:17px; margin:14px 0 0; max-width:64ch} .main-content .page-description strong{color:var(--ink)} .main-content .selected-category-banner{background:var(--tint); border:1px solid var(--border); border-radius:var(--r-md); padding:10px 14px; color:var(--muted); margin-top:14px} .main-content .selected-category-banner strong{color:var(--ink)} .main-content .section-title,.main-content .seo-section-title,.main-content .fc-h2{font-weight:800; letter-spacing:-.02em; color:var(--ink)} .main-content .fc-kicker,.main-content .seo-kicker{font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2)} /* Кнопки-варианты, встречающиеся на контент-страницах */ .main-content .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:11px 20px; border:1px solid transparent; border-radius:var(--r-md); font-weight:600; font-size:14px; text-decoration:none; cursor:pointer; font-family:var(--fc-font)} .main-content .btn-primary{background:var(--deep); color:#fff} .main-content .btn-primary:hover{background:var(--ink); color:#fff} .main-content .btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--border)} .main-content .btn-secondary:hover{background:var(--tint); color:var(--ink)} .main-content .btn-sm{padding:8px 14px; font-size:13px} /* Поля ввода */ .main-content input[type="text"],.main-content input[type="search"],.main-content input[type="email"], .main-content input[type="tel"],.main-content select,.main-content textarea,.main-content .filters-form input{ border:1px solid var(--border); border-radius:var(--r-md); padding:11px 14px; font-family:var(--fc-font); font-size:15px; background:var(--surface); color:var(--ink)} .main-content .filter-group label,.main-content .filter-label{font-size:13px; font-weight:600; color:var(--muted)} /* Карточки (каталоги, услуги, о нас) */ .main-content .document-item,.main-content .filters-section,.main-content .advantage-card, .main-content .step-card,.main-content .mission-card,.main-content .faq-item,.main-content .seo-benefit-card, .main-content .seo-faq-item,.main-content .stat-box,.main-content .about-stat-item,.main-content .contact-item, .main-content .similar-card,.main-content .geo-stat-card,.main-content .fc-stat,.main-content .price-table-wrapper{ background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--sh-xs)} .main-content .document-item{padding:20px; transition:box-shadow .2s ease, border-color .2s ease} .main-content .document-item:hover,.main-content .similar-card:hover{box-shadow:var(--sh-md); border-color:var(--soft)} .main-content .document-title a,.main-content .similar-card-title{color:var(--ink); font-weight:700} .main-content .document-description{color:var(--muted)} /* Категории / фильтры / чипы */ .main-content .category-chip,.main-content .filter-item{border:1px solid var(--border); border-radius:var(--r-pill); padding:7px 12px; color:var(--muted); background:var(--surface); text-decoration:none} .main-content .category-chip.active,.main-content .filter-item.active{background:var(--deep); color:#fff; border-color:var(--deep)} .main-content .category-count,.main-content .filter-count,.main-content .offers-count{background:var(--tint); color:var(--muted); border-radius:var(--r-pill); padding:1px 8px; font-weight:600; font-size:12px} .main-content .category-chip.active .category-count{background:rgba(255,255,255,.18); color:#fff} .main-content .document-category-tag{background:var(--tint)!important; color:var(--muted)!important; border-radius:var(--r-sm); font-size:12px; font-weight:600} .main-content .category-color{background:var(--soft)!important} /* Переключатель вида */ .main-content .view-btn{border:1px solid var(--border); background:var(--surface); color:var(--muted); border-radius:var(--r-sm)} .main-content .view-btn.active{background:var(--deep); color:#fff; border-color:var(--deep)} /* Цены */ .main-content .price-from,.main-content .offer-price-badge,.main-content .similar-price-tag,.main-content .price-table__right{color:var(--ink); font-weight:800} .main-content .price-to{color:var(--muted); font-weight:500} /* Прайс-таблица */ .main-content .price-table{width:100%; border-collapse:collapse; background:var(--surface)} .main-content .price-table th{text-align:left; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); padding:15px 20px; background:var(--tint)} .main-content .price-table td{padding:15px 20px; border-top:1px solid var(--border-soft); color:var(--ink)} .main-content .price-table__center{text-align:center; color:var(--muted)} .main-content .price-table__right{text-align:right} .main-content .price-category__heading{font-weight:800; color:var(--ink)} .main-content .price-category__count{color:var(--muted); font-weight:500} /* Звёзды / рейтинг (в т.ч. company.php fc-stars) */ .main-content .fc-stars{color:var(--ink)} /* Статистика */ .main-content .stat-number,.main-content .stat-num,.main-content .geo-stat-value,.main-content .fc-stat-num, .main-content .advantage-num,.main-content .step-num{color:var(--ink); font-weight:800} .main-content .stat-text,.main-content .geo-stat-label,.main-content .fc-stat-sub{color:var(--muted)} /* Пагинация */ .main-content .pagination-btn{border:1px solid var(--border); background:var(--surface); color:var(--ink); border-radius:var(--r-sm); font-weight:600} .main-content .pagination-btn.active{background:var(--deep); color:#fff; border-color:var(--deep)} /* Бейджи релевантности → графит */ .main-content .relevance-badge,.main-content .ml-relevance-score{background:var(--tint); color:var(--muted)} /* ===================================================================== ГЛОБАЛЬНЫЙ МОНОХРОМ — гасим цветные акценты v1 на всех страницах. !important нужен, т.к. постраничные inline-стили идут позже в . ===================================================================== */ .stars{color:var(--ink)!important} .price-badge,.new-badge,.offers-badge-enhanced{background:var(--deep)!important; color:#fff!important} .budget-badge{background:var(--accent)!important; color:#fff!important} /* ===================================================================== Адаптив ===================================================================== */ @media (max-width:960px){ .fc-hero-anim{display:none} } /* ===================================================================== Атомарные классы из дизайн-дока Claude Design (u-*, fc-*) ===================================================================== */ .u-card{transition:all .2s ease} .u-card:hover{box-shadow:0 12px 32px rgba(23,23,26,.10)!important;transform:translateY(-3px)!important;border-color:#DADADE!important} .u-btn-primary{background:#3F3F46;color:#fff} .u-btn-primary:hover{background:#1D1D22!important;color:#fff!important} .u-btn-outline:hover{background:#17171A!important;color:#fff!important;border-color:#17171A!important} .u-btn-ghost:hover{background:#EFEFF2!important;color:#1D1D22!important} .u-tag:hover{background:#EFEFF2!important;border-color:#CDCDD3!important;color:#1D1D22!important} .u-navlink:hover{color:#17171A!important} .u-doc:hover .u-doc-title{color:#3F3F46!important} .u-input:focus{outline:none;border-color:#3F3F46!important;box-shadow:0 0 0 4px #EFEFF2!important} .u-input:focus-within{border-color:#3F3F46!important;box-shadow:0 0 0 4px #EFEFF2} .u-swatch{transition:transform .15s ease} .u-swatch:hover{transform:scale(1.03)} .u-prow{transition:background .15s ease} .u-prow:hover{background:#FAFAFB} .u-prow:hover .u-doc-title{color:#3F3F46} .u-foot-link{transition:color .15s ease} .u-foot-link:hover{color:#fff!important} .u-foot-cta:hover{background:#3F3F46!important;color:#fff!important;border-color:#3F3F46!important} .fc-plogo{filter:grayscale(1);opacity:.6;transition:filter .25s ease,opacity .25s ease} .fc-plogo:hover{filter:grayscale(0);opacity:1} @keyframes fcUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}} @keyframes fcFade{from{opacity:0}to{opacity:1}} @keyframes fcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} @keyframes fcPulse{0%,100%{opacity:1}50%{opacity:.35}} .fc-hero-el{opacity:0;animation:fcUp .8s cubic-bezier(.22,.61,.36,1) forwards} .fc-marquee{display:flex;gap:14px;width:max-content;animation:fcMarquee 32s linear infinite} .fc-marquee-wrap:hover .fc-marquee{animation-play-state:paused} .fc-live{width:7px;height:7px;border-radius:50%;background:#17171A;animation:fcPulse 2s ease-in-out infinite} @media(max-width:900px){ .fc-hero-grid{grid-template-columns:1fr!important} .fc-hero-illus{display:none} } @media(max-width:820px){ .fc-foot-grid{grid-template-columns:1fr 1fr!important; gap:32px!important} } @media(max-width:520px){ .fc-foot-grid{grid-template-columns:1fr!important} } /* Табы популярных документов (белая активная пилюля на треке #F1F1F3) */ .fc-doctabs .tab-btn{background:transparent!important;color:#5B5B63!important;border:none!important} .fc-doctabs .tab-btn.active{background:#fff!important;color:#17171A!important;box-shadow:0 1px 3px rgba(0,0,0,.08)!important} .fc-doctabs .tab-btn:hover{color:#17171A!important} /* Сетки главной */ @media(max-width:1000px){ .fc-qa-grid,.fc-doc-grid{grid-template-columns:repeat(2,1fr)!important} } @media(max-width:560px){ .fc-qa-grid,.fc-doc-grid{grid-template-columns:1fr!important} } @media(max-width:820px){ .fc-serv-hero{grid-template-columns:1fr!important; gap:28px!important} } @media(max-width:820px){ .fc-cta-grid{grid-template-columns:1fr!important; gap:28px!important; padding:32px!important} } /* ===================================================================== ГЛАВНАЯ: графическая система «сигналы рынка» Атмосфера строится без растровых картинок: SVG, сетка, узлы, линии. ===================================================================== */ .fc-home-sprite{position:absolute!important;inline-size:0!important;block-size:0!important;overflow:hidden!important} .fc-home-hero,.fc-home-docs,.fc-home-trust,.fc-home-companies,.fc-home-why,.fc-home-flow,.fc-home-reviews,.fc-home-faq,.fc-home-cta{position:relative;isolation:isolate;overflow:hidden} .fc-home-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 82% 24%,rgba(63,63,70,.09),transparent 29%),radial-gradient(circle at 10% 70%,rgba(23,23,26,.035),transparent 24%),radial-gradient(circle,rgba(23,23,26,.075) 1px,transparent 1.2px);background-size:auto,auto,26px 26px;mask-image:linear-gradient(90deg,transparent 0,#000 40%,#000 100%);opacity:.75} .fc-home-hero::after{content:"FIND / COMPARE / VERIFY";position:absolute;right:-34px;bottom:235px;z-index:-1;color:#17171a;font-size:11px;font-weight:700;letter-spacing:.24em;transform:rotate(90deg);opacity:.16} .fc-home-shell{position:relative;z-index:1} .fc-hero-orbit{position:absolute;inset:-4px -18px 0 -18px;width:calc(100% + 36px);height:100%;color:#3f3f46;z-index:0;pointer-events:none} .fc-orbit-nodes circle{transform-box:fill-box;transform-origin:center;animation:fcNodePulse 3.8s ease-in-out infinite} .fc-orbit-nodes circle:nth-child(2){animation-delay:.7s}.fc-orbit-nodes circle:nth-child(3){animation-delay:1.4s}.fc-orbit-nodes circle:nth-child(4){animation-delay:2.1s}.fc-orbit-nodes circle:nth-child(5){animation-delay:2.8s} .fc-orbit-scan{transform-origin:264px 232px;animation:fcOrbitScan 9s linear infinite} .fc-hero-illus>div{z-index:2}.fc-gentleman-stage{z-index:3} @keyframes fcNodePulse{0%,100%{opacity:.25;transform:scale(.75)}50%{opacity:.9;transform:scale(1.35)}} @keyframes fcOrbitScan{to{transform:rotate(360deg)}} .fc-home-stats{display:grid!important;grid-template-columns:repeat(3,max-content) minmax(220px,1fr);align-items:end;gap:28px!important} .fc-home-stat{position:relative;padding-right:28px} .fc-home-stat:not(:nth-child(3))::after{content:"";position:absolute;right:0;top:4px;width:1px;height:50px;background:#ededf0} .fc-market-pulse{min-width:220px;margin-left:auto;padding:13px 16px 10px;border:1px solid #e4e4e7;border-radius:14px;background:rgba(255,255,255,.76);backdrop-filter:blur(12px);box-shadow:0 10px 32px rgba(23,23,26,.055)} .fc-market-pulse__label{display:flex;align-items:center;gap:8px;margin-bottom:7px;color:#5b5b63;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase} .fc-market-pulse svg{display:block;width:100%;height:42px;overflow:visible} .fc-market-pulse__grid{fill:none;stroke:#dadaDE;stroke-width:1;opacity:.42} .fc-market-pulse__line{fill:none;stroke:#3f3f46;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:270;animation:fcLineDraw 4.8s ease-in-out infinite} .fc-market-pulse__dots{fill:#17171a}.fc-market-pulse__dots circle{animation:fcNodePulse 2.4s ease-in-out infinite} @keyframes fcLineDraw{0%,12%{stroke-dashoffset:270;opacity:.3}48%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-270;opacity:.25}} .fc-home-quick::before{content:"";position:absolute;left:50%;top:28px;width:min(1120px,calc(100% - 48px));height:1px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,#dadaDE 15%,#dadaDE 85%,transparent);opacity:.6} .fc-quick-card{position:relative;min-height:190px;overflow:hidden} .fc-quick-card::after{content:"";position:absolute;inset:auto -38px -52px auto;width:120px;height:120px;border:1px solid #ededf0;border-radius:50%;transition:transform .35s ease,border-color .35s ease} .fc-quick-card:hover::after{transform:scale(1.28);border-color:#c7c7cd} .fc-quick-card__top,.fc-why-card__top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:26px;color:#cdCDD3;font-size:13px;font-weight:700;letter-spacing:.04em} .fc-quick-card__top svg{width:54px;height:54px;color:#3f3f46;opacity:.88;transition:transform .3s ease} .fc-quick-card:hover .fc-quick-card__top svg{transform:translateY(-3px) rotate(-2deg)} .fc-quick-card--dark::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 86% 16%,rgba(255,255,255,.15),transparent 26%),linear-gradient(135deg,transparent 44%,rgba(255,255,255,.045) 44% 45%,transparent 45%);pointer-events:none} .fc-quick-card--dark .fc-quick-card__top svg{color:#fff}.fc-quick-card--dark::after{border-color:rgba(255,255,255,.16)} .fc-home-docs{background:linear-gradient(180deg,#f8f8fa 0,#fff 22%,#fff 100%)!important;border-top:1px solid #ededf0} .fc-home-docs::before{content:"";position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(23,23,26,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(23,23,26,.025) 1px,transparent 1px);background-size:32px 32px;mask-image:linear-gradient(#000,transparent 46%)} .fc-home-docs::after{content:"INDEX / 01";position:absolute;right:max(40px,calc((100% - 1200px)/2 + 40px));top:52px;color:#17171a;font-size:11px;font-weight:700;letter-spacing:.2em;opacity:.16} .fc-home-docs .u-doc{box-shadow:0 10px 35px rgba(23,23,26,.035)} .fc-home-trust::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 0 33%,rgba(23,23,26,.025) 33% 33.15%,transparent 33.15% 66%,rgba(23,23,26,.025) 66% 66.15%,transparent 66.15%)} .fc-home-companies::before{content:"";position:absolute;right:-180px;top:40px;width:520px;height:520px;border:1px solid rgba(23,23,26,.06);border-radius:50%;box-shadow:0 0 0 64px rgba(23,23,26,.018),0 0 0 128px rgba(23,23,26,.012);z-index:-1} .fc-company-card-home{position:relative;overflow:hidden} .fc-company-card-home::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#17171a 0 32%,#dadaDE 32%);transform:scaleX(.18);transform-origin:left;transition:transform .3s ease} .fc-company-card-home:hover::before{transform:scaleX(1)} .fc-home-why{background:#17171a!important;color:#fff} .fc-home-why::before{content:"";position:absolute;right:-120px;top:-150px;width:560px;height:560px;border:1px solid rgba(255,255,255,.1);border-radius:50%;box-shadow:0 0 0 76px rgba(255,255,255,.028),0 0 0 152px rgba(255,255,255,.018);z-index:-1} .fc-home-why::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(255,255,255,.12) 1px,transparent 1.3px);background-size:30px 30px;mask-image:linear-gradient(90deg,transparent,#000);opacity:.25} .fc-home-why h2{color:#fff!important}.fc-home-why>div>div>p{color:#a9a9b0!important} .fc-why-card{position:relative;min-height:250px;background:rgba(255,255,255,.055)!important;border-color:rgba(255,255,255,.13)!important;backdrop-filter:blur(10px);overflow:hidden;transition:transform .25s ease,background .25s ease,border-color .25s ease} .fc-why-card:hover{transform:translateY(-5px);background:rgba(255,255,255,.085)!important;border-color:rgba(255,255,255,.25)!important} .fc-why-card h3{color:#fff!important}.fc-why-card p{color:#b8b8c0!important}.fc-why-card>span:last-child{background:rgba(255,255,255,.11)!important;color:#fff!important} .fc-why-card__top{color:#777983}.fc-why-card__top svg{width:56px;height:56px;color:#f2f2f4;opacity:.88} .fc-why-card::after{content:"";position:absolute;left:26px;right:26px;bottom:0;height:2px;background:linear-gradient(90deg,#fff,transparent);opacity:.18} .fc-home-flow::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle at 20% 50%,rgba(23,23,26,.05),transparent 26%),radial-gradient(circle at 80% 50%,rgba(23,23,26,.04),transparent 24%)} .fc-flow-grid{position:relative;gap:34px!important} .fc-flow-grid::before{content:"";position:absolute;left:20px;right:20px;top:20px;height:2px;background:linear-gradient(90deg,#17171a 0 25%,#8a8a93 25% 50%,#3f3f46 50% 75%,#17171a 75%);opacity:.22} .fc-flow-step{position:relative;padding:0 18px 0 0} .fc-flow-step:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:10px;color:#8a8a93;font-size:15px} .fc-flow-step__num{position:relative;z-index:1;box-shadow:0 0 0 8px #fafafb} .fc-home-reviews::before{content:"“";position:absolute;right:4%;top:-88px;color:#17171a;font-family:Georgia,serif;font-size:420px;line-height:1;opacity:.025;z-index:-1} .fc-review-card{position:relative;overflow:hidden;box-shadow:0 10px 32px rgba(23,23,26,.035)} .fc-review-card::before{content:"“";position:absolute;right:18px;top:8px;color:#17171a;font-family:Georgia,serif;font-size:72px;line-height:1;opacity:.055} .fc-home-faq{background:linear-gradient(135deg,#f5f5f7,#fafafb 60%,#f0f0f3)!important} .fc-faq-layout{display:grid;grid-template-columns:minmax(280px,.75fr) minmax(0,1.35fr);gap:72px;align-items:start} .fc-faq-intro{position:sticky;top:110px} .fc-faq-radar{margin-top:18px;width:min(360px,100%);color:#3f3f46} .fc-faq-radar svg{display:block;width:100%;height:auto;overflow:visible} .fc-faq-radar__beam{transform-origin:130px 125px;animation:fcRadarSweep 7s linear infinite} .fc-faq-bubbles rect{filter:drop-shadow(0 8px 16px rgba(23,23,26,.07))} @keyframes fcRadarSweep{to{transform:rotate(360deg)}} .fc-faq-item{position:relative;padding-left:28px!important;box-shadow:0 8px 24px rgba(23,23,26,.03);transition:transform .2s ease,border-color .2s ease} .fc-faq-item::before{content:"";position:absolute;left:13px;top:26px;width:5px;height:5px;border-radius:50%;background:#17171a} .fc-faq-item:hover{transform:translateX(4px);border-color:#c7c7cd!important} .fc-cta-panel{position:relative;overflow:hidden;isolation:isolate;background:linear-gradient(135deg,#19191d,#101012)!important;box-shadow:0 24px 70px rgba(23,23,26,.16)} .fc-cta-panel::before{content:"";position:absolute;inset:0;z-index:-2;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:30px 30px;mask-image:linear-gradient(90deg,transparent 20%,#000)} .fc-cta-panel::after{content:"F";position:absolute;right:20%;top:50%;z-index:-1;color:#fff;font-size:230px;font-weight:800;line-height:1;transform:translate(50%,-50%);opacity:.035} .fc-cta-network{position:absolute;right:25px;top:18px;width:260px;height:150px;z-index:-1;opacity:.35} .fc-cta-network::before,.fc-cta-network::after{content:"";position:absolute;inset:30px;border:1px solid rgba(255,255,255,.18);border-radius:50%;transform:rotate(-16deg)} .fc-cta-network::after{inset:52px 8px 8px 60px;transform:rotate(22deg)} .fc-cta-network span{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 7px rgba(255,255,255,.06);animation:fcNodePulse 3s ease-in-out infinite} .fc-cta-network span:nth-child(1){left:30px;top:70px}.fc-cta-network span:nth-child(2){left:92px;top:30px;animation-delay:.5s}.fc-cta-network span:nth-child(3){left:155px;top:85px;animation-delay:1s}.fc-cta-network span:nth-child(4){right:25px;top:42px;animation-delay:1.5s}.fc-cta-network span:nth-child(5){right:58px;bottom:10px;animation-delay:2s} @media(max-width:1100px){ .fc-home-stats{grid-template-columns:repeat(3,1fr)!important}.fc-market-pulse{grid-column:1/-1;width:100%;margin:0} .fc-home-hero::after{display:none} } @media(max-width:900px){ .fc-home-hero::before{mask-image:none;opacity:.42}.fc-home-stats{grid-template-columns:repeat(3,1fr)!important} .fc-faq-layout{grid-template-columns:1fr;gap:28px}.fc-faq-intro{position:static}.fc-faq-radar{display:none} } @media(max-width:700px){ .fc-home-stats{grid-template-columns:1fr 1fr!important}.fc-home-stat{padding-right:0}.fc-home-stat::after{display:none}.fc-market-pulse{grid-column:1/-1} .fc-flow-grid::before,.fc-flow-step::after{display:none}.fc-flow-step{padding:0} .fc-home-docs::after{display:none}.fc-cta-network{opacity:.18} } @media(max-width:560px){ .fc-home-stats{grid-template-columns:1fr!important}.fc-home-stat{display:flex;align-items:baseline;justify-content:space-between;gap:20px;border-bottom:1px solid #ededf0;padding-bottom:12px} .fc-quick-card,.fc-why-card{min-height:0}.fc-faq-layout{padding:48px 20px!important}.fc-cta-network{display:none} } @media(prefers-reduced-motion:reduce){ .fc-orbit-nodes circle,.fc-orbit-scan,.fc-market-pulse__line,.fc-market-pulse__dots circle,.fc-faq-radar__beam,.fc-cta-network span{animation:none!important} }