/* ========================================================================== SITE REDESIGN v1.1 — «Диагностическая консоль» Тёмная тема, палитра откалибрована пипеткой по логотипу ТГ-канала. Меняет только оформление (цвет/шрифт/форму поверхностей), контент, тексты и JS-логику не затрагивает. Подключается последним файлом в . ========================================================================== */ /* ---- 1. Шрифтовые роли --------------------------------------------------- Golos Text (родной шрифт сайта) остаётся для основного текста. Заголовки — serif (акт/заключение), метки и номера — monospace (бланк). */ :root{ --f-display: ui-serif, Georgia, "Times New Roman", "PT Serif", serif; --f-mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, "Liberation Mono", monospace; /* ---- 2. Палитра, взятая пипеткой из логотипа ------------------------- чёрный фон логотипа + весь его цветовой спектр слева направо: циан → синий → фиолетовый → малиновый → красный → оранжевый → жёлтый → зелёный */ --bg: #050608; --panel: #0C0E13; --panel-strong: #10131A; --line: rgba(255,255,255,.12); --line-soft: rgba(255,255,255,.07); --ink: #F4F6FA; --text: #F4F6FA; --muted: #9BA3B4; --cyan: #17C7EC; /* основной акцент сайта — циан из логотипа */ --blue: #1163CE; --violet: #9C32F2; --pink: #E31EAD; --red: #DB1943; --orange: #FF7E00; --gold: #F0C23A; --green: #3FCB7A; --signal: var(--cyan); --radius: 14px; --shadow: 0 24px 60px #00000066; --shell: min(1240px, calc(100vw - 48px)); } /* ---- 3. Базовая поверхность: тёмная, с лёгким свечением циан→оранж, как в самом логотипе (спектр слева, рост/тепло справа) ------- */ html{ scroll-behavior:smooth; } body{ background: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px) 0 0/100% 44px, linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px) 0 0/44px 100%, radial-gradient(ellipse 900px 620px at 4% 0%, color-mix(in srgb, var(--cyan) 16%, transparent), transparent 60%), radial-gradient(ellipse 780px 560px at 82% 6%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 60%), radial-gradient(ellipse 900px 700px at 100% 100%, color-mix(in srgb, var(--orange) 14%, transparent), transparent 60%), linear-gradient(var(--bg), #07080B 40%, var(--bg)) !important; background-attachment: fixed, fixed, fixed, fixed, fixed, fixed; color: var(--text) !important; } body:before{ display:none !important; } ::selection{ background: var(--cyan); color:#050608; } h1, h2, h3{ font-family: var(--f-display); font-weight: 700 !important; letter-spacing: -0.01em !important; color: var(--ink); } /* фирменный градиентный акцент — циан к оранжу, как переход "спектр данных → рост" в самом логотипе */ .hero h1 em{ background: linear-gradient(100deg, var(--cyan), var(--violet) 45%, var(--orange) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } .eyebrow, .tool-kicker, .article-kicker, .contact-direct-label, .report-copy > span, .real-case-kicker, .method-label, .tool-card-type, .route-question, .route-output-label, .detail-label, .form-note, .footer p{ font-family: var(--f-mono) !important; text-transform: uppercase; } /* ---- 4. Шапка сайта ----------------------------------------------------- */ .site-header{ background: color-mix(in srgb, var(--panel) 88%, transparent) !important; border: 1px solid var(--line) !important; border-radius: 12px !important; box-shadow: 0 1px 0 var(--line-soft) !important; } .brand-mark{ border: 1px solid var(--line) !important; border-radius: 8px !important; box-shadow:none !important; } .brand-copy strong{ color: var(--ink); } .brand-copy small{ font-family: var(--f-mono); color: var(--muted); } .nav a{ color: var(--text); } .nav a:hover{ color: var(--cyan); } .nav-channel{ color: var(--orange) !important; } .nav-cta{ background: var(--cyan) !important; color: #06121A !important; border-radius: 8px !important; font-weight:800 !important; } .nav .nav-cta:hover{ background: var(--gold) !important; color:#06121A !important; } .menu-button{ background: var(--panel) !important; border:1px solid var(--line) !important; border-radius:8px !important; } .menu-button span{ background: var(--ink) !important; } /* ---- 5. Кнопки ------------------------------------------------------------ */ .button, .tool-button{ border-radius: 8px !important; font-family: var(--f-mono); text-transform: uppercase; font-size: 12px !important; letter-spacing: .04em; } .button-light, .button-submit, .button-primary, .button-channel, .tool-button-primary{ background: var(--cyan) !important; color: #06121A !important; box-shadow: 0 12px 30px color-mix(in srgb, var(--cyan) 35%, transparent) !important; } .button-light:hover, .button-submit:hover, .button-primary:hover, .button-channel:hover, .tool-button-primary:hover{ background: var(--orange) !important; color: #1A0E00 !important; transform:none !important; } .tool-button{ background: var(--panel) !important; color: var(--ink) !important; border: 1px solid var(--line) !important; } .show-more{ background: var(--panel) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--ink) !important; } /* ---- 6. Карточки: тёмная приборная поверхность вместо стекла -------------- */ .method-card, .route-card, .report-card, .real-case-card, .article-card, .outcome-grid article, .loss-tab, .loss-detail, .tool-card, .symptom-grid article, .control-card, .contact-form{ background: var(--panel) !important; border: 1px solid var(--line) !important; box-shadow: none !important; border-radius: 14px !important; } .route-card, .report-card, .real-case-card, .article-card, .outcome-grid article, .loss-tab{ border-top: 3px solid color-mix(in srgb, var(--route, var(--report-accent, var(--case-card-accent, var(--article-accent, var(--outcome, var(--stage, var(--cyan))))))) 85%, transparent) !important; } .symptom-grid article{ border-top: 3px solid color-mix(in srgb, var(--symptom-accent) 85%, transparent) !important; } .control-card{ background: linear-gradient(155deg, color-mix(in srgb, var(--cyan) 10%, var(--panel)), var(--panel-strong)) !important; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--line)) !important; } .control-list span{ color: var(--cyan) !important; font-family: var(--f-mono); } .loss-tab.is-active{ background: color-mix(in srgb, var(--stage) 16%, var(--panel)) !important; border-color: var(--stage) !important; } .loss-tabs{ border-bottom: 1px solid var(--line); } .loss-detail{ background: var(--panel-strong) !important; border: 1px solid var(--line) !important; } .tool-card:hover, .route-card:hover, .report-card:hover, .real-case-card:hover, .article-card:hover{ border-color: var(--cyan) !important; transform:none !important; } /* ---- 7. Номера/индексы — стиль "пункт акта" ------------------------------ */ .method-number{ font-family: var(--f-mono) !important; color: var(--cyan) !important; font-size: 30px !important; font-weight: 700 !important; } .symptom-grid span, .outcome-grid span, .route-step, .contact-promise span, .faq-item button > span, .real-case-index, .report-index{ font-family: var(--f-mono) !important; } .route-step{ background: none !important; color: var(--cyan) !important; border: 1px solid var(--cyan) !important; border-radius: 6px !important; font-weight: 700 !important; } .symptom-grid span, .outcome-grid span{ color: var(--cyan) !important; } .faq-item button > span{ color: var(--cyan) !important; } .faq-item button i{ border-radius: 6px !important; color: var(--cyan) !important; border-color: var(--line) !important; } /* ---- 8. Инструменты (диагностики/калькуляторы) --------------------------- Собственная переменная-система страницы — переопределяем её напрямую, чтобы текст и фон совпадали (это и был источник бага на скриншоте). */ :root{ --tool-bg: var(--bg); --tool-panel: var(--panel); --tool-panel-strong: var(--panel-strong); --tool-border: var(--line); --tool-text: var(--ink); --tool-muted: var(--muted); --tool-cyan: var(--cyan); --tool-blue: var(--blue); --tool-violet: var(--violet); --tool-orange: var(--orange); --tool-green: var(--green); --tool-red: var(--red); } .tool-option{ border-radius: 12px !important; } .tool-option.is-selected, .tool-option:hover, .tool-option:focus-visible{ border-color: var(--cyan) !important; background: color-mix(in srgb, var(--cyan) 12%, var(--panel)) !important; } /* ---- 9. Формы / контакты -------------------------------------------------- */ .contact-form input, .contact-form textarea{ background: var(--panel-strong) !important; border: 1px solid var(--line) !important; border-radius: 8px !important; color: var(--ink) !important; } /* ---- 10. Футер ------------------------------------------------------------ */ .footer{ border-top: 1px solid var(--line); } .footer > a{ color: var(--cyan) !important; } /* ---- 11. Фирменный элемент: штамп "диагностика" на главной ---------------- */ .hero-heading{ position: relative; } .hero-heading::after{ content: "УПРАВЛЯЕМАЯ ЯСНОСТЬ"; position: absolute; top: -6px; right: 8px; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--cyan); border: 1.5px solid var(--cyan); border-radius: 999px; padding: 6px 12px; transform: rotate(4deg); opacity: .9; } @media (max-width: 860px){ .hero-heading::after{ display:none; } } /* ---- 12. Точечные фиксы ---------------------------------------------------- */ .editorial-hero .eyebrow{ color: var(--gold) !important; } .article-back{ color: var(--cyan) !important; } .is-current{ color: var(--cyan) !important; } /* ---- 13. Точечные фиксы декоративных подложек (были захардкожены в старой неоновой палитре в исходном бандле, минуя переменные) --- */ .hero:before{ background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 14%, transparent), color-mix(in srgb, var(--violet) 10%, transparent) 48%, transparent 72%) !important; } .symptom-grid .symptom-accent{ background: radial-gradient(circle at 100% 0, color-mix(in srgb, var(--pink) 15%, transparent), transparent 48%), linear-gradient(145deg, color-mix(in srgb, var(--cyan) 12%, transparent), color-mix(in srgb, var(--violet) 10%, transparent)) !important; } .clarity-principle-card, .case-study{ background: var(--panel) !important; border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)) !important; } .system, .solutions{ background: radial-gradient(circle at 8% 40%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 24%), radial-gradient(circle at 90% 50%, color-mix(in srgb, var(--orange) 7%, transparent), transparent 25%) !important; } .competency-principle{ background: linear-gradient(100deg, color-mix(in srgb, var(--cyan) 12%, transparent), color-mix(in srgb, var(--violet) 10%, transparent), color-mix(in srgb, var(--orange) 10%, transparent)) !important; border-color: var(--line) !important; } .case-situation{ background: linear-gradient(120deg, color-mix(in srgb, var(--violet) 12%, transparent), color-mix(in srgb, var(--cyan) 8%, transparent)) !important; border-color: color-mix(in srgb, var(--violet) 35%, var(--line)) !important; } .channel-band{ background: linear-gradient(110deg, color-mix(in srgb, var(--cyan) 14%, transparent), color-mix(in srgb, var(--violet) 10%, transparent)) !important; border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)) !important; } .contact{ background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 32%), radial-gradient(circle at 90% 30%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 34%), var(--panel-strong) !important; border-top-color: var(--line) !important; } .proof-strip{ background: linear-gradient(110deg, color-mix(in srgb, var(--cyan) 8%, transparent), color-mix(in srgb, var(--violet) 8%, transparent) 55%, color-mix(in srgb, var(--orange) 8%, transparent)) !important; } .back-to-top{ background: var(--cyan) !important; border-color: color-mix(in srgb, var(--cyan) 40%, transparent) !important; color: #06121A !important; } .back-to-top:hover, .back-to-top:focus-visible{ background: var(--orange) !important; } .editorial-cta{ background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 40%), radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--violet) 12%, transparent), transparent 40%), var(--panel) !important; border-color: color-mix(in srgb, var(--cyan) 30%, var(--line)) !important; } /* ---- 14. Финальная калибровка: единая типографика и два акцента --------- Сохраняет фирменный темный фон, но убирает визуальную пестроту. */ :root{ --f-display: "Golos Text Variable", "Golos Text", "Segoe UI", Arial, sans-serif; --f-mono: "Golos Text Variable", "Golos Text", "Segoe UI", Arial, sans-serif; --blue: #17C7EC; --violet: #17C7EC; --pink: #FF8A2A; --red: #FF8A2A; --orange: #FF8A2A; --gold: #FFB052; --green: #17C7EC; } body{ background: radial-gradient(ellipse 900px 620px at 2% 0%, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 62%), radial-gradient(ellipse 860px 650px at 100% 100%, color-mix(in srgb, var(--orange) 10%, transparent), transparent 64%), linear-gradient(var(--bg), #080A0F 48%, var(--bg)) !important; background-attachment: fixed, fixed, fixed; } h1, h2, h3{ font-family: var(--f-display) !important; font-weight: 760 !important; letter-spacing: -.03em !important; } .hero h1 em, .clarity-principle-title h2 em, .competencies-heading h2 em{ background: linear-gradient(100deg, var(--cyan), var(--orange)) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; } .eyebrow, .tool-kicker, .article-kicker, .contact-direct-label, .report-copy > span, .real-case-kicker, .method-label, .tool-card-type, .route-question, .route-output-label, .detail-label, .form-note, .footer p{ font-family: var(--f-display) !important; text-transform: none !important; letter-spacing: .025em !important; } .button, .tool-button{ font-family: var(--f-display) !important; text-transform: none !important; letter-spacing: 0 !important; font-size: 13px !important; } .brand-copy small{ font-family: var(--f-display) !important; font-size: 12px !important; } .hero-heading::after{ display:none !important; } .hero:before{ background: radial-gradient(circle, color-mix(in srgb, var(--cyan) 12%, transparent), transparent 70%) !important; } .symptom-grid .symptom-accent, .competency-principle, .case-situation, .channel-band, .proof-strip{ background: linear-gradient(120deg, color-mix(in srgb, var(--cyan) 9%, transparent), color-mix(in srgb, var(--orange) 7%, transparent)) !important; } .contact, .editorial-cta{ background: radial-gradient(circle at 8% 20%, color-mix(in srgb, var(--cyan) 8%, transparent), transparent 36%), radial-gradient(circle at 92% 80%, color-mix(in srgb, var(--orange) 7%, transparent), transparent 38%), var(--panel-strong) !important; } .report-card, .real-case-card, .article-card, .route-card, .method-card, .competency-grid article, .outcome-grid article, .tool-card{ --report-accent: var(--cyan) !important; --case-card-accent: var(--cyan) !important; --article-accent: var(--cyan) !important; --route: var(--cyan) !important; --accent: var(--cyan) !important; --competency: var(--cyan) !important; --outcome: var(--cyan) !important; } .report-card:nth-child(even), .real-case-card:nth-child(even), .article-card:nth-child(even), .route-card:nth-child(3n), .method-card:nth-child(3n), .tool-card:nth-child(2){ --report-accent: var(--orange) !important; --case-card-accent: var(--orange) !important; --article-accent: var(--orange) !important; --route: var(--orange) !important; --accent: var(--orange) !important; } .section-space{ padding-top: 82px; } .section-heading > p, .method-body > p:last-child, .route-card > p:not(.route-question):not(.route-output-label), .report-copy p, .real-case-card > p{ line-height: 1.68 !important; } .report-card, .real-case-card{ padding: 26px !important; } .report-copy{ gap: 13px; } .report-preview-sdo{ min-height: 260px; padding: 0; display: block; overflow: hidden; background: radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--cyan) 15%, transparent), transparent 42%), #080B12 !important; } .report-preview-sdo img{ width: 100%; height: 100%; min-height: 260px; display: block; object-fit: cover; object-position: center; } .sdo-preview-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .sdo-preview-top i{ width:66px; height:7px; border-radius:999px; background:var(--cyan); } .sdo-preview-top span{ color:#8E98AA; font-size:10px; font-weight:750; } .sdo-preview-flow{ display:grid; grid-template-columns:repeat(4,1fr); gap:7px; align-items:center; } .sdo-preview-flow span{ min-height:58px; padding:8px 5px; border:1px solid var(--line); border-radius:9px; display:grid; place-items:center; text-align:center; color:#D6DCE7; font-size:9px; font-weight:760; background:color-mix(in srgb, var(--cyan) 7%, var(--panel)); } .sdo-preview-result{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } .sdo-preview-result span{ border:1px solid var(--line); border-radius:9px; padding:9px; color:#AEB7C7; font-size:9px; line-height:1.35; } .sdo-preview-result strong{ display:block; margin-bottom:3px; color:var(--cyan); font-size:14px; } @media (max-width: 720px){ .section-space{ padding-top: 58px; } .brand-copy small{ font-size: 12px !important; } .report-card, .real-case-card{ padding: 20px !important; } } /* Typography calibration: keep the final contact screen on the same scale as the other content sections, regardless of legacy stylesheet order. */ .contact-copy h2, .contact-direct h3{ font-family: var(--f-display) !important; font-weight: 760 !important; letter-spacing: -.03em !important; } .contact-copy h2{ font-size: clamp(34px, 3vw, 44px) !important; line-height: 1.1 !important; } .contact-direct h3{ font-size: clamp(28px, 2.5vw, 38px) !important; line-height: 1.12 !important; } .contact-copy > p, .contact-direct > p:not(.contact-direct-label, .form-note){ font-size: 15px !important; line-height: 1.62 !important; } @media (max-width: 720px){ .contact-copy h2{ font-size: 32px !important; } .contact-direct h3{ font-size: 27px !important; } } .real-case-card.violet { --case-card-accent: var(--violet); } .real-case-card.green { --case-card-accent: var(--green); } .case-detail-page.violet .case-detail-kicker, .case-detail-page.violet .case-detail-intro strong, .case-detail-page.violet .case-situation span, .case-detail-page.violet .case-owner-result > span, .case-detail-page.violet .case-step-heading > span { color: var(--violet); } .case-detail-page.violet .case-detail-intro { border-color: var(--violet); } .case-detail-page.violet .real-case-facts strong { color: var(--violet); } .case-detail-page.violet .case-step li::before { background: var(--violet); } .case-detail-page.violet .case-detail-nav a:hover { color: var(--violet); } .case-detail-page.green .case-detail-kicker, .case-detail-page.green .case-detail-intro strong, .case-detail-page.green .case-situation span, .case-detail-page.green .case-owner-result > span, .case-detail-page.green .case-step-heading > span { color: var(--green); } .case-detail-page.green .case-detail-intro { border-color: var(--green); } .case-detail-page.green .real-case-facts strong { color: var(--green); } .case-detail-page.green .case-step li::before { background: var(--green); } .case-detail-page.green .case-detail-nav a:hover { color: var(--green); }