@font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jbmono-400-cyrillic.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jbmono-400-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jbmono-500-cyrillic.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jbmono-500-latin.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jbmono-700-cyrillic.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'JetBrains Mono'; src: url('../fonts/jbmono-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; src: url('../fonts/unbounded-600-cyrillic.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; src: url('../fonts/unbounded-600-latin.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Unbounded'; src: url('../fonts/unbounded-700-cyrillic.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Unbounded'; src: url('../fonts/unbounded-700-latin.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* =========================================================================== Лендинг «Досье» — самодостаточные стили главной страницы. Темы: тёмная — по умолчанию (как во всём продукте), светлая — через :root[data-theme="light"]; атрибут ставит синхронный скрипт в . Палитра — фирменная (#057889 / #0EB8D2), светлая тема согласована с личным кабинетом (root.css). Компонентные токены --dc-* локальны для этого файла: root.css остаётся общим для SEO-страниц. =========================================================================== */ :root { --dc-font-display: 'Unbounded', 'Inter', system-ui, sans-serif; --dc-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace; --dc-font-body: 'Inter', system-ui, sans-serif; --dc-bg: #141414; --dc-text: #FDFEFF; --dc-muted: rgba(253, 254, 255, 0.68); --dc-faint: rgba(253, 254, 255, 0.45); --dc-line: rgba(253, 254, 255, 0.15); --dc-line-soft: rgba(253, 254, 255, 0.07); --dc-accent: #0EB8D2; --dc-accent-deep: #057889; --dc-accent-soft: rgba(14, 184, 210, 0.07); --dc-accent-border: rgba(14, 184, 210, 0.45); --dc-card: rgba(253, 254, 255, 0.03); --dc-card-solid: #1A1A1A; --dc-card-back: #1E1E1E; --dc-glass: linear-gradient(117deg, rgba(20, 20, 20, 0.3) 0%, rgba(14, 184, 210, 0.14) 55%, rgba(28, 56, 73, 0.25) 100%); --dc-btn-glow: 0 8px 24px rgba(14, 184, 210, 0.35); --dc-card-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(14, 184, 210, 0.12); --dc-ok: #4ADE80; --dc-warn: #FFC53D; --dc-warn-bg: rgba(255, 184, 0, 0.12); --dc-warn-border: rgba(255, 184, 0, 0.5); --dc-marquee-bg: rgba(14, 184, 210, 0.05); --dc-on-accent: #FDFEFF; } :root[data-theme="light"] { --dc-bg: #F1F4F8; --dc-text: #101828; --dc-muted: #4A5567; --dc-faint: #7A8598; --dc-line: #D6DDE5; --dc-line-soft: #E4E9EF; --dc-accent: #07697A; --dc-accent-deep: #057889; --dc-accent-soft: rgba(14, 184, 210, 0.10); --dc-accent-border: rgba(5, 120, 137, 0.45); --dc-card: #FFFFFF; --dc-card-solid: #FFFFFF; --dc-card-back: #E7ECF2; --dc-glass: linear-gradient(117deg, rgba(255, 255, 255, 0.92) 0%, rgba(14, 184, 210, 0.12) 55%, rgba(5, 120, 137, 0.10) 100%); --dc-btn-glow: 0 8px 20px rgba(14, 184, 210, 0.45); --dc-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 20px 44px rgba(16, 24, 40, 0.14); --dc-ok: #15803D; --dc-warn: #B45309; --dc-warn-bg: rgba(180, 83, 9, 0.10); --dc-warn-border: rgba(180, 83, 9, 0.45); --dc-marquee-bg: rgba(5, 120, 137, 0.06); --dc-on-accent: #FFFFFF; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body.dossier { margin: 0; background: var(--dc-bg); color: var(--dc-text); font-family: var(--dc-font-body); font-size: 16px; line-height: 1.5; overflow-x: hidden; -webkit-font-smoothing: antialiased; } .dossier a { color: var(--dc-accent); text-decoration: none; } .dossier a:hover { color: var(--dc-accent-deep); } .dossier h1, .dossier h2, .dossier h3, .dossier p, .dossier ul { margin: 0; padding: 0; } .dossier ul { list-style: none; } .dossier img, .dossier svg { max-width: 100%; } .dc-wrap { max-width: 1440px; margin: 0 auto; position: relative; } .dc-pad { padding-left: 56px; padding-right: 56px; } .dc-mono { font-family: var(--dc-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-accent); } .dc-mono_faint { color: var(--dc-faint); } .dc-h2 { font-family: var(--dc-font-display); font-weight: 600; font-size: 40px; line-height: 1.15; } /* Кнопки */ .dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; border: 0; cursor: pointer; border-radius: 100px; padding: 18px 40px; font-size: 17px; font-weight: 600; font-family: var(--dc-font-body); color: var(--dc-on-accent); background: var(--dc-accent-deep); box-shadow: var(--dc-btn-glow); white-space: nowrap; transition: transform 0.15s ease, box-shadow 0.2s ease; } .dc-btn:hover { transform: translateY(-1px); color: var(--dc-on-accent); } /* .dossier a специфичнее .dc-btn — возвращаем кнопкам-ссылкам их цвет. */ .dossier a.dc-btn, .dossier a.dc-btn:hover { color: var(--dc-on-accent); } .dossier a.dc-btn_ghost, .dossier a.dc-btn_ghost:hover { color: var(--dc-text); } .dc-btn:active { transform: translateY(0) scale(0.99); } .dc-btn_ghost { background: transparent; box-shadow: none; border: 1px solid var(--dc-line); color: var(--dc-text); font-weight: 500; } .dc-btn_ghost:hover { color: var(--dc-text); border-color: var(--dc-accent-border); transform: translateY(-1px); } .dc-btn_sm { padding: 13px 30px; font-size: 15px; } /* ------------------------------- Хедер ------------------------------- */ .dc-header { position: relative; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--dc-line); } .dc-header__brand { flex: none; display: flex; align-items: baseline; gap: 16px; color: var(--dc-text); } .dc-header__brand:hover { color: var(--dc-text); } .dc-logo { font-family: var(--dc-font-display); font-weight: 700; font-size: 20px; letter-spacing: 0.04em; white-space: nowrap; } .dc-header__tag { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-faint); white-space: nowrap; } .dc-nav { display: flex; align-items: center; gap: 22px; } .dc-nav a { white-space: nowrap; font-size: 14px; color: var(--dc-muted); } .dc-nav a:hover { color: var(--dc-accent); } .dc-header__side { flex: none; display: flex; align-items: center; gap: 12px; } .dc-header__login { padding: 10px 26px; font-size: 14px; box-shadow: none; } /* Переключатели темы/языка: контракт с js/ui-prefs.js (.header__prefs + _ready, [data-toggle-*]) сохранён, оформление своё. */ .header__prefs { display: none; align-items: center; gap: 8px; } .header__prefs.header__prefs_ready { display: inline-flex; } .header__prefs__btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 100px; border: 1px solid var(--dc-line); background: transparent; color: var(--dc-muted); font-size: 12px; font-weight: 600; font-family: var(--dc-font-body); cursor: pointer; } .header__prefs__btn:hover { border-color: var(--dc-accent-border); color: var(--dc-text); } .header__prefs__icon { width: 18px; height: 18px; } :root[data-theme="dark"] .header__prefs__icon_moon { display: none; } :root:not([data-theme="light"]) .header__prefs__icon_moon { display: none; } :root[data-theme="light"] .header__prefs__icon_sun { display: none; } /* Бургер и мобильное меню */ .dc-burger { display: none; width: 42px; height: 42px; border: 1px solid var(--dc-line); border-radius: 12px; background: transparent; color: var(--dc-text); cursor: pointer; align-items: center; justify-content: center; } .dc-mobnav { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; gap: 8px; padding: 24px; background: var(--dc-bg); } .dc-mobnav.dc-mobnav_open { display: flex; } .dc-mobnav__close { align-self: flex-end; } .dc-mobnav a { font-size: 22px; font-weight: 600; color: var(--dc-text); padding: 12px 4px; border-bottom: 1px solid var(--dc-line-soft); } /* -------------------------------- Hero -------------------------------- */ .dc-hero { position: relative; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 48px; padding-top: 88px; padding-bottom: 72px; align-items: center; } .dc-hero__glow { position: absolute; top: -200px; right: -160px; width: 760px; height: 760px; background: radial-gradient(circle at center, rgba(14, 184, 210, 0.16) 0%, rgba(20, 20, 20, 0) 65%); pointer-events: none; } :root[data-theme="light"] .dc-hero__glow { background: radial-gradient(circle at center, rgba(14, 184, 210, 0.18) 0%, rgba(241, 244, 248, 0) 65%); } .dc-hero__copy { position: relative; display: flex; flex-direction: column; gap: 30px; } .dc-hero__title { font-family: var(--dc-font-display); font-weight: 700; font-size: 64px; line-height: 1.04; letter-spacing: -0.01em; } .dc-hero__title .dc-dot { color: var(--dc-accent); } .dc-hero__descr { max-width: 540px; font-size: 19px; line-height: 1.55; color: var(--dc-muted); } .dc-hero__cta { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } .dc-hero__chips { display: flex; gap: 14px; flex-wrap: wrap; font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-faint); } .dc-hero__chips span { padding: 7px 14px; border: 1px dashed var(--dc-line); border-radius: 6px; white-space: nowrap; } /* Карточка-досье */ .dc-case { position: relative; height: 560px; } .dc-case__back { position: absolute; top: 44px; left: 44px; width: 460px; height: 470px; background: var(--dc-card-back); border: 1px solid var(--dc-line-soft); border-radius: 16px; transform: rotate(4deg); } .dc-case__card { position: absolute; top: 8px; left: 8px; width: 480px; background: var(--dc-card-solid); border: 1px solid var(--dc-accent-border); border-radius: 16px; transform: rotate(-2deg); box-shadow: var(--dc-card-shadow); overflow: hidden; } .dc-case__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px dashed var(--dc-line); font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.08em; color: var(--dc-faint); } .dc-case__body { padding: 24px; display: flex; flex-direction: column; gap: 18px; } .dc-case__subject { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .dc-case__name { font-size: 18px; font-weight: 700; } .dc-case__meta { font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-faint); } .dc-case__verdict { padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 600; background: var(--dc-warn-bg); border: 1px solid var(--dc-warn-border); color: var(--dc-warn); white-space: nowrap; } .dc-case__rows { display: flex; flex-direction: column; border-top: 1px solid var(--dc-line-soft); } .dc-case__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--dc-line-soft); font-size: 14px; } .dc-case__row:last-child { border-bottom: 0; } .dc-case__factor { color: var(--dc-muted); } .dc-case__status { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; white-space: nowrap; } .dc-case__status_ok { color: var(--dc-ok); } .dc-case__status_warn { color: var(--dc-warn); } .dc-stamp { position: absolute; bottom: 30px; right: 12px; padding: 12px 20px; border: 2px solid var(--dc-accent-border); border-radius: 8px; transform: rotate(-8deg); font-family: var(--dc-font-mono); font-size: 14px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--dc-accent); background: var(--dc-bg); box-shadow: 0 0 24px rgba(14, 184, 210, 0.25); } /* ---------------------------- Бегущая строка ---------------------------- */ .dc-marquee { overflow: hidden; border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); background: var(--dc-marquee-bg); } .dc-marquee__track { display: flex; width: max-content; animation: dc-marquee 40s linear infinite; } .dc-marquee__group { display: flex; align-items: center; gap: 28px; padding: 14px; font-family: var(--dc-font-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-muted); white-space: nowrap; } .dc-marquee__group i { font-style: normal; color: var(--dc-accent); } @keyframes dc-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .dc-marquee__track { animation: none; } } /* Секции */ .dc-section { position: relative; padding-top: 96px; } .dc-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 44px; } /* ------------------------------- Отличие ------------------------------- */ .dc-diff { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; align-items: stretch; } .dc-diff__base { display: flex; flex-direction: column; gap: 20px; padding: 36px; border-radius: 16px; background: var(--dc-card); border: 1px solid var(--dc-line-soft); } :root[data-theme="light"] .dc-diff__base { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-diff__base ul { display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--dc-faint); } .dc-diff__base li { padding-bottom: 12px; border-bottom: 1px solid var(--dc-line-soft); } .dc-diff__base li:last-child { border-bottom: 0; padding-bottom: 0; } .dc-diff__note { margin-top: auto; font-size: 13px; color: var(--dc-faint); } .dc-diff__ours { display: flex; flex-direction: column; gap: 20px; padding: 36px; border-radius: 16px; background: var(--dc-glass); border: 1px solid var(--dc-accent-border); box-shadow: 0 8px 40px rgba(14, 184, 210, 0.15); } .dc-diff__items { display: flex; flex-direction: column; gap: 16px; } .dc-diff__item { display: flex; gap: 14px; align-items: flex-start; } .dc-diff__item svg { flex: none; margin-top: 2px; } .dc-diff__item b { display: block; font-size: 17px; } .dc-diff__item span { font-size: 14px; line-height: 1.5; color: var(--dc-muted); } /* ------------------------------- Методика ------------------------------- */ .dc-method { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; } .dc-method__intro { display: flex; flex-direction: column; gap: 20px; } .dc-method__intro p { font-size: 16px; line-height: 1.6; color: var(--dc-muted); } .dc-clause { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding: 28px 0; border-top: 1px solid var(--dc-line); } .dc-clause:last-child { border-bottom: 1px solid var(--dc-line); } .dc-clause__num { font-family: var(--dc-font-mono); font-size: 20px; color: var(--dc-accent); } .dc-clause h3 { font-size: 21px; font-weight: 700; margin-bottom: 8px; } .dc-clause p { font-size: 15px; line-height: 1.6; color: var(--dc-muted); } /* ------------------------------- Функции ------------------------------- */ .dc-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--dc-line); border-left: 1px solid var(--dc-line); } .dc-feature { display: flex; gap: 20px; padding: 32px; border-right: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); } .dc-feature__num { font-family: var(--dc-font-mono); font-size: 13px; color: var(--dc-accent); flex: none; } .dc-feature h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; } .dc-feature p { font-size: 15px; line-height: 1.55; color: var(--dc-muted); } /* -------------------------------- Тарифы -------------------------------- */ .dossier .dc-pricing__note { font-size: 15px; line-height: 1.6; color: var(--dc-muted); max-width: 900px; margin-top: 12px; } .dc-plans { display: flex; flex-direction: column; border-top: 1px solid var(--dc-line); margin-top: 44px; } .dc-plan { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 3fr) minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--dc-line); } .dc-plan__name { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; flex-wrap: wrap; } .dc-plan__badge { padding: 4px 12px; background: var(--dc-accent-deep); color: var(--dc-on-accent); border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; } .dc-plan__price { font-family: var(--dc-font-display); font-size: 34px; font-weight: 600; white-space: nowrap; } .dc-plan__terms { font-size: 14px; line-height: 1.5; color: var(--dc-muted); } .dc-plan__btn { justify-self: end; } .dc-plan_hot { padding-left: 24px; padding-right: 24px; margin: 0 -24px; border-top: 1px solid var(--dc-accent-border); border-bottom: 1px solid var(--dc-accent-border); background: var(--dc-accent-soft); } .dc-plan_hot .dc-plan__price { color: var(--dc-accent); } /* ----------------------------- Преимущества ----------------------------- */ .dc-adv { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: flex-start; } .dc-adv__intro { display: flex; flex-direction: column; gap: 20px; } .dc-adv__intro p { font-size: 16px; line-height: 1.6; color: var(--dc-muted); } .dc-adv__list { display: flex; flex-direction: column; gap: 14px; } .dc-adv__card { display: flex; gap: 18px; padding: 24px 28px; background: var(--dc-card); border: 1px solid var(--dc-line-soft); border-radius: 14px; } :root[data-theme="light"] .dc-adv__card { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-adv__num { font-family: var(--dc-font-mono); font-size: 13px; color: var(--dc-accent); flex: none; padding-top: 3px; } .dc-adv__card h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .dc-adv__card p { font-size: 14px; line-height: 1.55; color: var(--dc-muted); } /* --------------------------------- CTA --------------------------------- */ .dc-cta { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 44px 56px; border: 1px solid var(--dc-accent-border); border-radius: 20px; background: var(--dc-glass); flex-wrap: wrap; } .dc-cta h2 { font-family: var(--dc-font-display); font-weight: 600; font-size: 32px; line-height: 1.2; } .dc-cta__btns { display: flex; gap: 12px; flex: none; flex-wrap: wrap; } /* --------------------------------- Цели --------------------------------- */ .dc-goals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--dc-line); border-left: 1px solid var(--dc-line); } .dc-goal { display: flex; flex-direction: column; gap: 14px; padding: 32px; border-right: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); } .dc-goal h3 { font-size: 19px; font-weight: 700; } .dc-goal div { display: flex; flex-direction: column; gap: 8px; font-size: 14px; line-height: 1.55; color: var(--dc-muted); } /* -------------------------------- Футер -------------------------------- */ .dc-footer { margin-top: 56px; border-top: 1px solid var(--dc-line); padding-top: 56px; padding-bottom: 56px; } .dc-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; } .dc-footer__col { display: flex; flex-direction: column; gap: 12px; font-size: 14px; color: var(--dc-muted); } .dc-footer__col .dc-logo { font-size: 18px; } .dc-footer__about { color: var(--dc-muted); line-height: 1.55; } .dc-footer__title { font-family: var(--dc-font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dc-muted); } .dc-footer__col_mono { font-family: var(--dc-font-mono); font-size: 13px; line-height: 1.65; color: var(--dc-muted); } .dc-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--dc-line-soft); font-family: var(--dc-font-mono); font-size: 12px; color: var(--dc-faint); } /* ------------------------------- Адаптив ------------------------------- */ @media (max-width: 1180px) { .dc-hero { grid-template-columns: minmax(0, 1fr); } .dc-case { height: 600px; max-width: 560px; } .dc-nav { display: none; } .dc-burger { display: inline-flex; } .dc-header__tag { display: none; } } @media (max-width: 900px) { .dc-pad { padding-left: 20px; padding-right: 20px; } .dc-hero { padding-top: 56px; padding-bottom: 48px; } .dc-hero__title { font-size: 42px; } .dc-h2 { font-size: 30px; } .dc-section { padding-top: 64px; } .dc-section__head { flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 32px; } .dc-diff { grid-template-columns: minmax(0, 1fr); } .dc-method { grid-template-columns: minmax(0, 1fr); gap: 24px; } .dc-clause { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 22px 0; } .dc-features { grid-template-columns: minmax(0, 1fr); } .dc-adv { grid-template-columns: minmax(0, 1fr); gap: 24px; } .dc-plan { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); row-gap: 12px; } .dc-plan__terms { grid-column: 1 / -1; } .dc-plan__btn { grid-column: 1 / -1; justify-self: stretch; } .dc-plan_hot { margin: 0; padding-left: 16px; padding-right: 16px; } .dc-goals { grid-template-columns: minmax(0, 1fr); } .dc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc-cta { padding: 32px 24px; } .dc-cta h2 { font-size: 24px; } } @media (max-width: 600px) { .dc-hero__title { font-size: 34px; } .dc-hero__cta .dc-btn { width: 100%; } .dc-case { height: auto; max-width: 100%; } .dc-case__back { display: none; } .dc-case__card { position: static; width: 100%; transform: none; } .dc-stamp { position: static; display: inline-block; margin-top: 16px; transform: rotate(-3deg); } .dc-plan__price { font-size: 28px; } } /* --------------------- SEO-перелинковка перед футером --------------------- */ .dc-seo { padding-top: 72px; } .dossier .dc-seo__title { font-family: var(--dc-font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-faint); margin-bottom: 18px; font-weight: 500; } .dc-seo__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 28px; } .dc-seo__list a { display: block; padding: 10px 0; font-size: 14px; line-height: 1.5; color: var(--dc-muted); border-bottom: 1px solid var(--dc-line-soft); } .dc-seo__list a:hover { color: var(--dc-accent); } /* --------------------- SEO-страницы: статья в стиле «Досье» --------------------- */ .dc-article-wrap { padding-top: 48px; padding-bottom: 8px; } .dc-article { max-width: 880px; } .dc-article h1 { font-family: var(--dc-font-display); font-weight: 600; font-size: 38px; line-height: 1.18; margin: 0 0 24px; } .dc-article h2 { font-family: var(--dc-font-display); font-weight: 600; font-size: 25px; line-height: 1.25; margin: 40px 0 14px; } .dc-article h3 { font-size: 20px; font-weight: 700; margin: 24px 0 10px; } .dc-article p { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--dc-muted); } .dc-article ul, .dc-article ol { margin: 0 0 16px; padding-left: 22px; color: var(--dc-muted); } .dc-article ul li { list-style: disc; margin: 6px 0; font-size: 16px; line-height: 1.6; } .dc-article ol li { list-style: decimal; margin: 6px 0; font-size: 16px; line-height: 1.6; } .dc-article a { text-decoration: underline; text-underline-offset: 3px; } /* Кнопки-ссылки внутри статей (страница тарифов, 404). */ .dc-article .button { display: inline-flex; align-items: center; padding: 14px 32px; border-radius: 100px; background: var(--dc-accent-deep); color: var(--dc-on-accent); font-size: 15px; font-weight: 600; text-decoration: none; box-shadow: var(--dc-btn-glow); } .dc-article .button:hover { color: var(--dc-on-accent); } /* Карточки пакетов на странице тарифов: разметка старая, вид — «Досье». */ .dc-article .row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dc-article .card__content { height: 100%; padding: 28px; border-radius: 16px; background: var(--dc-card); border: 1px solid var(--dc-line-soft); } :root[data-theme="light"] .dc-article .card__content { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-article .card__content h3 { margin-top: 0; } .dc-article .accent { color: var(--dc-accent); font-family: var(--dc-font-display); } .dc-article .pricing-includes { padding-left: 18px; } .dc-article .pricing-includes li { font-size: 14px; } .dc-seo__hint { font-size: 13px; color: var(--dc-faint); margin: -6px 0 16px; } /* 404: инлайновые стили страницы опираются на переменные root.css — оставлены. */ .dc-404 { padding-top: 80px; padding-bottom: 100px; text-align: center; } @media (max-width: 900px) { .dc-article h1 { font-size: 28px; } .dc-article h2 { font-size: 21px; } .dc-article .row { grid-template-columns: minmax(0, 1fr); } } /* ------------------------- Промо: бесплатные проверки ------------------------- */ .dc-promo { align-self: flex-start; font-size: 14px; line-height: 1.5; font-weight: 500; color: var(--dc-muted); } .dossier .dc-pricing__promo { margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--dc-accent); } /* ================== Динамика и «плёночный» фон расследования ================== */ /* Светлая тема — бумажно-серый кинофон дела. */ :root[data-theme="light"] { --dc-bg: #E9EBEE; } /* Зерно плёнки + виньетка. Слои фиксированы и не ловят клики. */ body.dossier::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.05; } :root[data-theme="light"] body.dossier::before { opacity: 0.07; } body.dossier::after { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0.28) 100%); } :root[data-theme="light"] body.dossier::after { background: radial-gradient(ellipse 120% 90% at 50% 40%, rgba(0, 0, 0, 0) 55%, rgba(16, 24, 40, 0.10) 100%); } /* Контент — над плёнкой. */ /* :where() обнуляет специфичность: иначе это правило перебивало position:fixed у cookie-баннера (.tm-cc) и фонарика — баннер уезжал со скроллом. */ :where(body.dossier > *) { position: relative; z-index: 1; } /* Водяной знак дела в hero. */ .dc-watermark { position: absolute; top: 40px; left: 0; right: 0; overflow: hidden; font-family: var(--dc-font-mono); font-size: 84px; font-weight: 700; letter-spacing: 0.18em; white-space: nowrap; color: var(--dc-text); opacity: 0.028; transform: rotate(-4deg); pointer-events: none; user-select: none; } :root[data-theme="light"] .dc-watermark { opacity: 0.045; } /* Мигающий курсор у моно-меток секций — терминальный пульс. */ .dc-mono::after { content: '_'; margin-left: 2px; animation: dc-caret 1.2s steps(1) infinite; } @keyframes dc-caret { 50% { opacity: 0; } } /* Появление секций при прокрутке. */ .dc-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s ease; } .dc-reveal.dc-reveal_in { opacity: 1; transform: none; } /* Карточка-досье дышит и выпрямляется под курсором. */ .dc-case__card { transition: transform 0.35s ease, box-shadow 0.35s ease; } .dc-case:hover .dc-case__card { transform: rotate(0deg) translateY(-4px); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 56px rgba(14, 184, 210, 0.2); } .dc-stamp { animation: dc-stamp-glow 3.2s ease-in-out infinite; } @keyframes dc-stamp-glow { 0%, 100% { box-shadow: 0 0 18px rgba(14, 184, 210, 0.18); } 50% { box-shadow: 0 0 34px rgba(14, 184, 210, 0.4); } } /* ---- Сравнительная табличка: равные колонки, ряды на одном уровне ---- */ .dc-diff { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc-diff__label { margin: 0 0 6px; font-family: var(--dc-font-display); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--dc-accent); text-shadow: 0 0 24px rgba(14, 184, 210, 0.35); } .dc-diff__label_muted { color: var(--dc-faint); text-shadow: none; font-weight: 600; } .dc-diff__base ul { gap: 0; } .dc-diff__base li { display: flex; align-items: center; min-height: 74px; padding: 0; border-bottom: 1px solid var(--dc-line-soft); } .dc-diff__base li:last-child { border-bottom: 0; } .dc-diff__rows { display: flex; flex-direction: column; } .dc-diff__row { display: flex; gap: 14px; align-items: center; min-height: 74px; border-bottom: 1px solid rgba(14, 184, 210, 0.18); } .dc-diff__row:last-child { border-bottom: 0; } .dc-diff__row svg { flex: none; } .dc-diff__row b { display: block; font-size: 16px; } .dc-diff__row span { font-size: 13px; line-height: 1.45; color: var(--dc-muted); } .dc-diff__base .dc-diff__note { display: none; } /* ---- «Что умеет сервис»: живые ячейки ---- */ .dc-feature { position: relative; overflow: hidden; transition: background 0.25s ease; cursor: default; } .dc-feature::before { content: attr(data-num); position: absolute; right: 10px; bottom: -18px; font-family: var(--dc-font-mono); font-size: 88px; font-weight: 700; color: var(--dc-accent); opacity: 0.06; transition: transform 0.35s ease, opacity 0.35s ease; pointer-events: none; } .dc-feature:hover { background: var(--dc-accent-soft); } .dc-feature:hover::before { transform: translateY(-8px) scale(1.08); opacity: 0.14; } .dc-feature h3 { transition: color 0.25s ease; } .dc-feature:hover h3 { color: var(--dc-accent); } .dc-feature__num { transition: transform 0.25s ease; } .dc-feature:hover .dc-feature__num { transform: translateY(-2px) scale(1.15); } /* Карточки преимуществ и тарифные строки тоже отзываются. */ .dc-adv__card { transition: transform 0.25s ease, border-color 0.25s ease; } .dc-adv__card:hover { transform: translateY(-3px); border-color: var(--dc-accent-border); } .dc-plan { transition: background 0.25s ease; } .dc-plan:hover { background: var(--dc-accent-soft); } @media (prefers-reduced-motion: reduce) { .dc-mono::after { animation: none; } .dc-stamp { animation: none; } .dc-reveal { opacity: 1; transform: none; transition: none; } .dc-case:hover .dc-case__card { transform: none; } } @media (max-width: 900px) { .dc-watermark { font-size: 44px; top: 16px; } .dc-diff__base li, .dc-diff__row { min-height: 64px; } } /* ================= OSINT-редизайн: терминал, глубина, доска ================= */ /* --- Фонарик следователя --- */ .dc-torch { position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(circle 340px at var(--mx, 50%) var(--my, 30%), rgba(14, 184, 210, 0.07), transparent 65%); } .dc-torch.dc-torch_on { opacity: 1; } :root[data-theme="light"] .dc-torch { background: radial-gradient(circle 340px at var(--mx, 50%) var(--my, 30%), rgba(255, 255, 255, 0.55), transparent 65%); mix-blend-mode: soft-light; } /* --- Терминал расследования --- */ .dc-termwrap { position: relative; } .dc-terminal { position: relative; border: 1px solid var(--dc-accent-border); border-radius: 14px; background: var(--dc-card-solid); box-shadow: var(--dc-card-shadow); overflow: hidden; font-family: var(--dc-font-mono); } :root[data-theme="light"] .dc-terminal { background: #101418; border-color: rgba(14, 184, 210, 0.5); } .dc-terminal__bar { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px dashed rgba(253, 254, 255, 0.2); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(253, 254, 255, 0.55); } .dc-terminal__dots { display: inline-flex; gap: 6px; } .dc-terminal__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(253, 254, 255, 0.18); } .dc-terminal__dots i:first-child { background: rgba(255, 95, 86, 0.8); } .dc-terminal__dots i:nth-child(2) { background: rgba(255, 189, 46, 0.8); } .dc-terminal__dots i:last-child { background: rgba(39, 201, 63, 0.8); } .dc-terminal__note { margin-left: auto; color: rgba(253, 254, 255, 0.35); } .dc-terminal__log { margin: 0; padding: 20px 22px 22px; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.45; color: rgba(253, 254, 255, 0.88); } .dc-term__ln { display: flex; align-items: baseline; gap: 12px; } .dc-term__ln_cmd { color: #5ED4E6; } .dc-term__src { color: rgba(253, 254, 255, 0.45); flex: none; min-width: 205px; } .dc-term__val { flex: 1; } .dc-term__ok { color: #4ADE80; font-weight: 700; } .dc-term__warn { color: #FFC53D; font-weight: 700; } .dc-term__verdict { display: inline-flex; padding: 6px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; background: rgba(255, 184, 0, 0.14); border: 1px solid rgba(255, 184, 0, 0.55); color: #FFC53D; } /* Мигающий курсор после последней видимой строки. */ .dc-terminal__log_anim .dc-term__ln { opacity: 0; transform: translateY(5px); } .dc-terminal__log_anim .dc-term__ln.dc-term__ln_on { opacity: 1; transform: none; transition: opacity 0.24s ease, transform 0.24s ease; } .dc-terminal__log_anim .dc-term__ln_verdict.dc-term__ln_on .dc-term__verdict { animation: dc-stampin 0.4s cubic-bezier(0.2, 1.4, 0.4, 1); } @keyframes dc-stampin { from { transform: scale(1.7) rotate(-4deg); opacity: 0; } to { transform: none; opacity: 1; } } .dc-termwrap .dc-stamp { position: absolute; bottom: -18px; right: 16px; } /* --- Разрез глубины --- */ .dc-compare { overflow: hidden; border: 1px solid var(--dc-line); border-radius: 22px; background: var(--dc-card-solid); } .dc-compare table { width: 100%; border-collapse: collapse; table-layout: fixed; } .dc-compare__caption { text-align: left; padding: 22px 28px; font-size: 15px; color: var(--dc-muted); border-bottom: 1px solid var(--dc-line); } .dc-compare__criteria { width: 54%; } .dc-compare th, .dc-compare td { padding: 22px 28px; border-bottom: 1px solid var(--dc-line); vertical-align: middle; } .dc-compare th { text-align: left; font-weight: 500; } .dc-compare td, .dc-compare thead th:not(:first-child) { text-align: center; } .dc-compare thead th { height: 86px; font-size: 15px; color: var(--dc-muted); } .dc-compare .dc-compare__ours { background: var(--dc-accent-soft); border-left: 1px solid var(--dc-accent-border); color: var(--dc-accent); } .dc-compare thead .dc-compare__ours { box-shadow: inset 0 3px var(--dc-accent); } .dc-compare__brand { font-family: var(--dc-font-display); font-size: 20px; font-weight: 700; white-space: nowrap; } .dc-compare__name { display: block; font-size: 18px; font-weight: 600; line-height: 1.4; } .dc-compare__desc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.55; font-weight: 400; color: var(--dc-muted); } .dc-compare__check { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; color: var(--dc-muted); background: var(--dc-line-soft); } .dc-compare__ours .dc-compare__check { color: var(--dc-on-accent); background: var(--dc-accent-deep); } .dc-compare__missing { color: var(--dc-muted); font-size: 22px; } .dc-compare tfoot th, .dc-compare tfoot td { height: 86px; } .dc-compare tfoot strong { font-family: var(--dc-font-display); font-size: 20px; font-weight: 600; } .dc-compare__result { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: 24px; align-items: center; padding: 24px 28px; font-size: 14px; line-height: 1.6; color: var(--dc-muted); } .dc-compare__result-title { font-family: var(--dc-font-display); font-size: 17px; font-weight: 600; color: var(--dc-accent); } .dossier .dc-compare__note { margin-top: 16px; max-width: 860px; font-size: 13px; line-height: 1.6; color: var(--dc-muted); } @media (max-width: 600px) { .dc-compare { border-radius: 16px; } .dc-compare__criteria { width: 46%; } .dc-compare__caption { padding: 18px 16px; font-size: 14px; } .dc-compare th, .dc-compare td { padding: 18px 10px; } .dc-compare th:first-child { padding-left: 16px; } .dc-compare thead th { height: 76px; font-size: 12px; line-height: 1.5; } .dc-compare__brand { font-family: var(--dc-font-body); font-size: 13px; white-space: nowrap; } .dc-compare__name { font-size: 14px; line-height: 1.5; } .dc-compare__desc { display: none; } .dc-compare__check { width: 28px; height: 28px; } .dc-compare tfoot th { font-size: 13px; } .dc-compare tfoot strong { font-family: var(--dc-font-body); font-size: 16px; white-space: nowrap; } .dc-compare__result { grid-template-columns: minmax(0,1fr); gap: 8px; padding: 20px 16px; } } /* --- Доска расследования --- */ .dc-board { position: relative; padding-top: 8px; } .dc-board__strings { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .dc-board__string { fill: none; stroke: var(--dc-accent); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: 0.4; } .dc-board__pin { position: relative; } .dc-board__pin::before { /* канцелярская кнопка */ content: ''; position: absolute; top: -7px; left: 50%; margin-left: -7px; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5ED4E6, var(--dc-accent-deep) 70%); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); z-index: 2; } .dc-board__target { position: relative; z-index: 1; width: 340px; max-width: 100%; margin: 0 auto 56px; padding: 22px 24px; border-radius: 12px; background: var(--dc-card-solid); border: 1px solid var(--dc-accent-border); box-shadow: var(--dc-card-shadow); transform: rotate(1.6deg); display: flex; flex-direction: column; gap: 6px; text-align: left; } .dc-board__target-label { font-family: var(--dc-font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-accent); } .dc-board__target b { font-size: 19px; } .dc-board__target-sub { font-size: 13px; line-height: 1.5; color: var(--dc-muted); } .dc-board__grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; } .dc-board__card { z-index: 1; border: 1px solid var(--dc-line-soft); border-radius: 12px; background: var(--dc-card-solid); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } :root[data-theme="light"] .dc-board__card { box-shadow: 0 8px 22px rgba(16, 24, 40, 0.12); } .dc-board__card:nth-child(1) { transform: rotate(-1.3deg); } .dc-board__card:nth-child(2) { transform: rotate(0.9deg); } .dc-board__card:nth-child(3) { transform: rotate(-0.7deg); } .dc-board__card:nth-child(4) { transform: rotate(1.2deg); } .dc-board__card:nth-child(5) { transform: rotate(-1deg); } .dc-board__card:nth-child(6) { transform: rotate(0.8deg); } .dc-board__card:nth-child(7) { transform: rotate(-0.9deg); } .dc-board__card:hover { transform: rotate(0deg) translateY(-5px); border-color: var(--dc-accent-border); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4), 0 0 24px rgba(14, 184, 210, 0.18); } .dc-board__card_center { grid-column: 2; } /* Ячейки доски не в общей «сетке описи» — рамки описи убираем. */ .dc-board .dc-feature { border-right: 1px solid var(--dc-line-soft); border-bottom: 1px solid var(--dc-line-soft); } @media (prefers-reduced-motion: reduce) { .dc-strata__core { animation: none; } .dc-redact { transition: none; transform: scaleX(0); } .dc-torch { display: none; } } @media (max-width: 900px) { .dc-term__src { min-width: 0; } .dc-term__ln { flex-wrap: wrap; gap: 6px 10px; } .dc-board__strings { display: none; } .dc-board__grid { grid-template-columns: minmax(0, 1fr); } .dc-board__card, .dc-board__card:nth-child(n) { transform: none; } .dc-board__card_center { grid-column: auto; } .dc-board__target { margin-bottom: 28px; transform: rotate(0.8deg); } } /* ============ v4 «Intelligence»: радар, стат-строка, чистая сетка ============ */ /* Спокойнее: мигающий курсор у меток — долой (слишком «айтишно»). */ .dc-mono::after { content: none; } /* --- Стат-строка в hero (по мотивам крупных стат-рядов intelligence-платформ) --- */ .dc-stats { display: flex; gap: 44px; flex-wrap: wrap; margin-top: 26px; padding-top: 30px; border-top: 1px solid var(--dc-line-soft); } .dc-stat { display: flex; flex-direction: column; gap: 6px; } .dc-stat b { font-family: var(--dc-font-display); font-weight: 600; font-size: 28px; color: var(--dc-accent); white-space: nowrap; } .dc-stat span { font-size: 13px; line-height: 1.45; color: var(--dc-muted); max-width: 190px; } /* --- Радар источников --- */ .dc-radarwrap { display: flex; flex-direction: column; align-items: center; gap: 20px; } .dc-radar { position: relative; width: min(100%, 540px); aspect-ratio: 1; } .dc-radar__ring { position: absolute; left: 50%; top: 50%; width: calc(17.5% * var(--k) + 7.5%); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid var(--dc-line-soft); border-radius: 50%; } .dc-radar__ring:nth-child(odd) { border-style: dashed; } .dc-radar__beam { position: absolute; inset: 2.5%; border-radius: 50%; background: conic-gradient(from 0deg, rgba(14, 184, 210, 0.22), rgba(14, 184, 210, 0.04) 55deg, transparent 65deg); animation: dc-spin 14s linear infinite; } @keyframes dc-spin { to { transform: rotate(360deg); } } .dc-radar__node { position: absolute; left: calc(50% + cos(var(--a)) * var(--r)); top: calc(50% + sin(var(--a)) * var(--r)); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 7px; z-index: 2; } .dc-radar__node i { width: 9px; height: 9px; border-radius: 50%; background: var(--dc-accent); box-shadow: 0 0 0 0 rgba(14, 184, 210, 0.5); animation: dc-node-pulse 3.6s ease-out infinite; animation-delay: var(--d, 0s); } @keyframes dc-node-pulse { 0% { box-shadow: 0 0 0 0 rgba(14, 184, 210, 0.45); } 45% { box-shadow: 0 0 0 12px rgba(14, 184, 210, 0); } 100% { box-shadow: 0 0 0 0 rgba(14, 184, 210, 0); } } .dc-radar__node em { font-family: var(--dc-font-mono); font-style: normal; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-muted); white-space: nowrap; background: var(--dc-bg); padding: 2px 7px; border-radius: 6px; } .dc-radar__target { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 3; display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; padding: 16px 20px; border-radius: 14px; background: var(--dc-card-solid); border: 1px solid var(--dc-accent-border); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35), 0 0 34px rgba(14, 184, 210, 0.18); } .dc-radar__target-label { font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-accent); } .dc-radar__target b { font-size: 15px; white-space: nowrap; } .dc-radar__target-inn { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-faint); } .dc-radar__verdict { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; } .dc-radar__verdict > span:first-child { font-family: var(--dc-font-mono); font-size: 13px; color: var(--dc-faint); } .dc-radar__verdict b { padding: 8px 18px; border-radius: 100px; font-size: 13.5px; font-weight: 700; background: var(--dc-warn-bg); border: 1px solid var(--dc-warn-border); color: var(--dc-warn); white-space: nowrap; } .dc-radar__verdict-note { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-faint); } /* --- Ряд первоисточников --- */ .dc-sources { border-top: 1px solid var(--dc-line-soft); border-bottom: 1px solid var(--dc-line-soft); } .dc-sources__inner { display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 24px; padding-bottom: 24px; text-align: center; } .dc-sources__label { font-family: var(--dc-font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dc-faint); } .dc-sources__list { font-size: 13.5px; letter-spacing: 0.03em; line-height: 1.9; color: var(--dc-muted); max-width: 980px; } /* --- Центрированная секция инструментов --- */ .dc-center-head { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; max-width: 760px; margin: 0 auto 52px; } .dc-center-sub { font-size: 16px; line-height: 1.6; color: var(--dc-muted); max-width: 560px; } .dc-tools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .dc-tool { display: flex; flex-direction: column; gap: 13px; padding: 26px 24px; border-radius: 16px; background: var(--dc-card); border: 1px solid var(--dc-line-soft); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } :root[data-theme="light"] .dc-tool { background: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-tool:hover { transform: translateY(-4px); border-color: var(--dc-accent-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), 0 0 22px rgba(14, 184, 210, 0.12); } .dc-tool__icon { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 14px; color: var(--dc-accent); background: var(--dc-accent-soft); border: 1px solid var(--dc-accent-border); } .dc-tool h3 { font-size: 16.5px; font-weight: 700; line-height: 1.3; } .dc-tool p { font-size: 13.5px; line-height: 1.55; color: var(--dc-muted); } @media (max-width: 1180px) { .dc-radarwrap { max-width: 520px; margin: 0 auto; } } @media (max-width: 900px) { .dc-stats { gap: 24px; } .dc-stat b { font-size: 23px; } .dc-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dc-radar__node em { font-size: 9px; padding: 1px 5px; } .dc-radar__target { padding: 12px 14px; } .dc-radar__target b { font-size: 13px; } .dc-sources__list { font-size: 12.5px; } } @media (max-width: 640px) { .dc-tools { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .dc-radar__beam { animation: none; opacity: 0.5; } .dc-radar__node i { animation: none; } } /* ============== v5: продуктовое окно отчёта + конвейер методики ============== */ /* --- Окно отчёта --- */ .dc-appwrap { position: relative; perspective: 1400px; } .dc-app { position: relative; border-radius: 16px; background: var(--dc-card-solid); border: 1px solid var(--dc-line); box-shadow: var(--dc-card-shadow); overflow: hidden; transform: rotateY(-7deg) rotateX(2.5deg); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .dc-appwrap:hover .dc-app { transform: rotateY(0deg) rotateX(0deg); } :root[data-theme="light"] .dc-app { background: #FFFFFF; } .dc-app__bar { display: flex; align-items: center; gap: 14px; padding: 11px 16px; border-bottom: 1px solid var(--dc-line-soft); background: rgba(253, 254, 255, 0.02); } :root[data-theme="light"] .dc-app__bar { background: rgba(16, 24, 40, 0.025); } .dc-app__dots { display: inline-flex; gap: 6px; } .dc-app__dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--dc-line); } .dc-app__addr { flex: 1; text-align: center; font-family: var(--dc-font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-app__note { font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--dc-faint); white-space: nowrap; } .dc-app__body { display: grid; grid-template-columns: minmax(0, 1fr); } .dc-app__main { padding: 20px 22px 14px; min-width: 0; } .dc-app__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .dc-app__title b { display: block; font-size: 17px; } .dc-app__meta { font-family: var(--dc-font-mono); font-size: 11px; color: var(--dc-faint); } .dc-app__status { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #4ADE80; background: rgba(74, 222, 128, 0.1); border: 1px solid rgba(74, 222, 128, 0.35); padding: 4px 10px; border-radius: 100px; white-space: nowrap; } :root[data-theme="light"] .dc-app__status { color: #15803D; background: rgba(21, 128, 61, 0.08); border-color: rgba(21, 128, 61, 0.3); } .dc-app__score { display: flex; align-items: center; gap: 18px; margin: 16px 0 6px; flex-wrap: wrap; } .dc-gauge { position: relative; width: 132px; flex: none; } .dc-gauge svg { display: block; width: 100%; } .dc-gauge__track { fill: none; stroke: var(--dc-line-soft); stroke-width: 9; stroke-linecap: round; } .dc-gauge__value { fill: none; stroke: var(--dc-warn); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; animation: dc-gauge-fill 1.4s cubic-bezier(0.3, 0.9, 0.3, 1) 0.5s forwards; } @keyframes dc-gauge-fill { to { stroke-dashoffset: 46; } } .dc-gauge__val { position: absolute; left: 0; right: 0; bottom: 2px; display: flex; flex-direction: column; align-items: center; gap: 0; } .dc-gauge__val b { font-family: var(--dc-font-display); font-size: 21px; line-height: 1; } .dc-gauge__val span { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-faint); } .dc-app__verdict { padding: 8px 16px; border-radius: 100px; font-size: 13px; font-weight: 700; background: var(--dc-warn-bg); border: 1px solid var(--dc-warn-border); color: var(--dc-warn); white-space: nowrap; } .dc-app__rows { display: flex; flex-direction: column; margin-top: 10px; } .dc-app__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9.5px 0; border-top: 1px solid var(--dc-line-soft); font-size: 13.5px; color: var(--dc-muted); opacity: 0; animation: dc-row-in 0.45s ease forwards; animation-delay: calc(0.55s + var(--i) * 0.22s); } @keyframes dc-row-in { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } } .dc-st { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; white-space: nowrap; } .dc-st em { font-style: normal; } .dc-st_ok { color: #4ADE80; } :root[data-theme="light"] .dc-st_ok { color: #15803D; } .dc-st_warn { color: var(--dc-warn); } .dc-app__side { display: flex; flex-direction: column; gap: 10px; padding: 20px 18px 16px; min-width: 0; } .dc-app__side-title { font-family: var(--dc-font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dc-faint); } .dc-graph { width: 100%; } .dc-graph__edge { stroke: var(--dc-accent); stroke-width: 1.3; opacity: 0.5; stroke-dasharray: 160; stroke-dashoffset: 160; animation: dc-edge-draw 0.9s ease forwards; animation-delay: calc(0.7s + var(--i) * 0.25s); } @keyframes dc-edge-draw { to { stroke-dashoffset: 0; } } .dc-graph__hub { fill: var(--dc-accent); } .dc-graph__dot { fill: var(--dc-card-solid); stroke: var(--dc-accent); stroke-width: 1.6; opacity: 0; animation: dc-dot-in 0.4s ease forwards; animation-delay: calc(1.1s + var(--i) * 0.25s); } :root[data-theme="light"] .dc-graph__dot { fill: #FFFFFF; } @keyframes dc-dot-in { to { opacity: 1; } } .dc-graph__legend { display: flex; flex-direction: column; gap: 5px; } .dc-graph__legend li { font-size: 11.5px; color: var(--dc-muted); padding-left: 14px; position: relative; opacity: 0; animation: dc-row-in 0.4s ease forwards; animation-delay: calc(1.2s + var(--i) * 0.2s); } .dc-graph__legend li::before { content: ''; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid var(--dc-accent); } .dc-app__src { display: flex; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--dc-line-soft); font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--dc-faint); } .dc-app__layers { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--dc-line-soft); } .dc-layer { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dc-layer em { font-family: var(--dc-font-mono); font-style: normal; font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dc-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .dc-layer i { display: block; height: 3px; border-radius: 3px; background: var(--dc-line-soft); position: relative; overflow: hidden; } .dc-layer i::after { content: ''; position: absolute; inset: 0; transform: scaleX(0); transform-origin: left; background: var(--dc-accent); animation: dc-layer-fill 0.7s ease forwards; animation-delay: calc(0.4s + var(--i) * 0.35s); } @keyframes dc-layer-fill { to { transform: scaleX(1); } } /* Плавающие уведомления вокруг окна */ .dc-float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 12px; background: var(--dc-card-solid); border: 1px solid var(--dc-accent-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35); font-size: 12.5px; color: var(--dc-muted); white-space: nowrap; animation: dc-float-bob 6s ease-in-out infinite alternate; } :root[data-theme="light"] .dc-float { background: #FFFFFF; box-shadow: 0 14px 30px rgba(16, 24, 40, 0.16); } .dc-float svg { color: var(--dc-accent); flex: none; } .dc-float b { color: var(--dc-text); } .dc-float_tg { top: -26px; right: -14px; } .dc-float_arb { bottom: -16px; left: -14px; animation-delay: 1.6s; } .dc-float_arb svg { color: var(--dc-warn); } @keyframes dc-float-bob { from { transform: translateY(-4px); } to { transform: translateY(5px); } } /* --- Методика: конвейер правил --- */ .dc-rules { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dc-rules__rail { position: absolute; top: 50%; left: 2%; right: 2%; height: 2px; background-image: linear-gradient(90deg, var(--dc-accent) 0 55%, transparent 55% 100%); background-size: 22px 2px; opacity: 0.35; animation: dc-rail-flow 1.6s linear infinite; } @keyframes dc-rail-flow { to { background-position: 22px 0; } } .dc-rule { position: relative; z-index: 1; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px 26px; border-radius: 18px; background: var(--dc-card-solid); border: 1px solid var(--dc-line-soft); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } :root[data-theme="light"] .dc-rule { background: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-rule:hover { transform: translateY(-5px); border-color: var(--dc-accent-border); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28), 0 0 24px rgba(14, 184, 210, 0.12); } .dc-rule__ghost { position: absolute; top: -26px; right: 6px; font-family: var(--dc-font-display); font-size: 110px; font-weight: 700; line-height: 1; color: var(--dc-accent); opacity: 0.07; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .dc-rule:hover .dc-rule__ghost { opacity: 0.14; transform: translateY(-4px); } .dc-rule__step { font-family: var(--dc-font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: none; color: var(--dc-accent); } .dc-rule h3 { font-size: 20px; font-weight: 700; line-height: 1.25; } .dc-rule p { font-size: 14.5px; line-height: 1.6; color: var(--dc-muted); flex: 1; } .dc-rule__ex { display: flex; flex-direction: column; gap: 7px; padding-top: 14px; border-top: 1px dashed var(--dc-line-soft); } .dc-rule__ex-label { font-size: 12px; line-height: 1.5; color: var(--dc-muted); } .dc-rule__chip { align-self: flex-start; font-size: 12.5px; font-weight: 600; padding: 7px 13px; border-radius: 9px; line-height: 1.4; } .dc-rule__chip_warn { color: var(--dc-warn); background: var(--dc-warn-bg); border: 1px solid var(--dc-warn-border); } .dc-rule__chip_ok { color: #4ADE80; background: rgba(74, 222, 128, 0.08); border: 1px solid rgba(74, 222, 128, 0.3); } :root[data-theme="light"] .dc-rule__chip_ok { color: #15803D; background: rgba(21, 128, 61, 0.07); border-color: rgba(21, 128, 61, 0.28); } @media (max-width: 1180px) { .dc-appwrap { max-width: 640px; margin: 0 auto; } .dc-app { transform: none; } } @media (max-width: 900px) { .dc-app__body { grid-template-columns: minmax(0, 1fr); } .dc-app__main { border-right: 0; border-bottom: 1px solid var(--dc-line-soft); } /* Граф на всю ширину колонки раздувал пустую простыню — ограничиваем. */ .dc-graph { max-width: 250px; margin: 0 auto; } .dc-float_tg { top: -30px; right: 4px; } .dc-float_arb { left: 0; bottom: -14px; } .dc-rules { grid-template-columns: minmax(0, 1fr); } .dc-rules__rail { display: none; } .dc-rule__ghost { font-size: 84px; } } @media (prefers-reduced-motion: reduce) { .dc-app { transform: none; transition: none; } .dc-gauge__value { animation: none; stroke-dashoffset: 46; } .dc-app__rows li, .dc-graph__dot, .dc-graph__legend li { animation: none; opacity: 1; } .dc-graph__edge { animation: none; stroke-dashoffset: 0; } .dc-layer i::after { animation: none; transform: scaleX(1); } .dc-float { animation: none; } .dc-rules__rail { animation: none; } } /* ================== v6: преимущества, манифест целей, CTA-саб ================== */ .dc-benefits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .dc-benefit { display: flex; gap: 18px; align-items: flex-start; padding: 26px 26px; border-radius: 16px; background: var(--dc-card); border: 1px solid var(--dc-line-soft); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } :root[data-theme="light"] .dc-benefit { background: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-benefit:hover { transform: translateY(-4px); border-color: var(--dc-accent-border); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25), 0 0 22px rgba(14, 184, 210, 0.12); } .dc-benefit .dc-tool__icon { flex: none; } .dc-benefit h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 7px; } .dc-benefit p { font-size: 14px; line-height: 1.55; color: var(--dc-muted); } .dc-cta__copy { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .dc-cta__sub { font-size: 14.5px; color: var(--dc-muted); } .dc-cta__sub::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--dc-accent); margin-right: 9px; vertical-align: 1px; box-shadow: 0 0 8px var(--dc-accent); } .dossier .dc-manifesto { max-width: 800px; margin: 0 auto 40px; text-align: center; font-family: var(--dc-font-display); font-weight: 500; font-size: 22px; line-height: 1.6; color: var(--dc-text); } .dc-manifesto::before, .dc-manifesto::after { content: none; } .dc-goals2 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .dc-goal2 { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 30px 28px; border-radius: 18px; background: var(--dc-card-solid); border: 1px solid var(--dc-line-soft); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } :root[data-theme="light"] .dc-goal2 { background: #FFFFFF; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05); } .dc-goal2:hover { border-color: var(--dc-accent-border); } .dc-goal2 .dc-rule__ghost { position: static; align-self: flex-start; font-family: var(--dc-font-mono); font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: 0.04em; color: var(--dc-accent); opacity: 1; transform: none; margin-bottom: 6px; } .dc-goal2:hover .dc-rule__ghost { opacity: 1; transform: none; } .dc-goal2 h3 { font-size: 19px; font-weight: 700; } .dc-goal2 p { font-size: 14.5px; line-height: 1.62; color: var(--dc-muted); } @media (max-width: 900px) { .dc-benefits { grid-template-columns: minmax(0, 1fr); } .dc-goals2 { grid-template-columns: minmax(0, 1fr); } .dossier .dc-manifesto { font-size: 19px; margin-bottom: 34px; } .dc-manifesto::before, .dc-manifesto::after { content: none; } } /* ================= v7: окно без «Связей», мобильные страховки ================= */ .dc-app__foot { display: flex; justify-content: flex-start; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--dc-line-soft); font-family: var(--dc-font-mono); font-size: 10px; letter-spacing: 0.04em; color: var(--dc-faint); } /* Длинные слова нигде не распирают контейнеры на узких экранах. */ .dc-cta h2, .dc-h2, .dc-hero__title { overflow-wrap: anywhere; } @media (max-width: 600px) { .dc-cta { padding: 26px 18px; } .dc-cta h2 { font-size: 20px; } .dc-cta__btns { width: 100%; } .dc-cta__btns .dc-btn { flex: 1 1 100%; } .dc-app__verdict { white-space: normal; text-align: center; } .dc-stats { gap: 18px; } .dc-sources__list { font-size: 12px; letter-spacing: 0.02em; } } /* ============== v7.1: добив мобильного переполнения (проба 390) ============== */ /* Грид-итемы hero не имеют права распирать колонку своим min-content. */ .dc-hero > * { min-width: 0; } .dc-app { max-width: 100%; } @media (max-width: 600px) { /* Шапка: на 390px сумма «лого + EN + тема + Войти + бургер» не влезала (+33px). */ .dc-pad { padding-left: 16px; padding-right: 16px; } .dc-logo { font-size: 17px; } .dc-header__side { gap: 8px; } .dc-header__login { padding: 9px 16px; font-size: 13px; } .header__prefs { gap: 6px; } .header__prefs__btn { width: 34px; height: 34px; } .dc-burger { width: 38px; height: 38px; } /* Окно отчёта: статусы и шапка окна не задают несжимаемую ширину. */ .dc-app__bar { gap: 8px; padding: 10px 12px; } .dc-app__note { display: none; } .dc-app__main { padding: 16px 14px 12px; } .dc-app__rows li { flex-wrap: wrap; gap: 4px 10px; } .dc-st { white-space: normal; text-align: left; } .dc-app__layers { flex-wrap: wrap; padding: 10px 12px; } .dc-layer { flex: 1 1 30%; } .dc-float { font-size: 11.5px; padding: 8px 12px; } .dc-float_tg { right: 0; } } /* ========= v7.2: тарифы на мобиле — столбиком, бейдж не вылезает ========= */ @media (max-width: 600px) { .dc-plan { grid-template-columns: minmax(0, 1fr); row-gap: 10px; padding: 22px 0; } .dc-plan__name { font-size: 18px; } .dc-plan__badge { font-size: 10px; letter-spacing: 0.04em; padding: 4px 10px; } .dc-plan__price { font-size: 30px; } .dc-plan__terms { grid-column: auto; } .dc-plan__btn { grid-column: auto; justify-self: stretch; } .dc-plan_hot { padding-left: 14px; padding-right: 14px; } } /* ============== v7.3: добив по внутренней пробе на 360px ============== */ .dc-strata__name { overflow-wrap: anywhere; } @media (max-width: 600px) { } /* Подпись входа остаётся одной строкой. */ .dc-header__login { white-space: nowrap; } /* Нижняя навигация остаётся читаемой на промежуточных ширинах. */ @media (max-width: 900px) { .dc-seo__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .dc-seo__list, .dc-footer__grid { grid-template-columns: minmax(0, 1fr); } .dc-footer { margin-top: 40px; padding-top: 32px; padding-bottom: 32px; } } .dc-seo__details { border-top: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line); } .dc-seo__details summary { cursor: pointer; padding: 20px 0; color: var(--dc-muted); } .dossier .dc-seo__details .dc-seo__title { display: inline; margin: 0 0 0 8px; font-size: 13px; color: var(--dc-muted); } .dc-seo__details[open] .dc-seo__list { padding-bottom: 20px; } /* Единый ритм секций на узком экране. */ .dc-mobnav__prefs { display: none; } @media (max-width: 600px) { .dc-header { gap: 12px; padding-top: 16px; padding-bottom: 16px; } .dc-logo { font-size: 17px; } .dc-header__side { gap: 8px; } .dc-header__side > .header__prefs { display: none; } .dc-header__login { min-height: 44px; padding: 10px 14px; font-size: 13px; } .dc-burger { width: 44px; height: 44px; flex: none; } .dc-mobnav__prefs { display: flex; gap: 12px; margin-top: 16px; } .dc-mobnav__prefs .header__prefs__btn { width: 44px; height: 44px; font-size: 13px; } .dc-mobnav__prefs .header__prefs__icon { width: 20px; height: 20px; } .dc-h2 { font-size: 26px; line-height: 1.25; } .dc-center-head { align-items: flex-start; text-align: left; gap: 12px; margin-bottom: 28px; } .dc-center-sub { font-size: 15px; } .dossier .dc-manifesto { font-family: var(--dc-font-body); font-size: 18px; font-weight: 500; line-height: 1.65; text-align: left; margin-bottom: 28px; } .dc-hero { padding-top: 36px; } .dc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 16px; margin-top: 0; padding-top: 20px; } .dc-stat b { font-size: 14px; line-height: 1.4; min-height: 2.8em; white-space: normal; } .dc-stat span { font-size: 12px; } .dc-btn { box-shadow: none; } .dc-hero__descr { font-size: 16px; line-height: 1.65; } .dc-rule, .dc-goal2 { padding: 22px; } .dc-rule h3 { font-size: 18px; line-height: 1.4; } .dc-benefit { padding: 20px; gap: 14px; } .dc-benefit .dc-tool__icon { width: 36px; height: 36px; border: 0; border-radius: 10px; } .dc-tools { gap: 12px; } .dc-tool { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 8px 14px; padding: 20px; } .dc-tool .dc-tool__icon { grid-row: 1 / 3; width: 36px; height: 36px; border: 0; border-radius: 10px; } .dc-tool__icon svg { width: 22px; height: 22px; } .dc-tool h3, .dc-tool p { grid-column: 2; } .dc-tool p { font-size: 14px; line-height: 1.6; } .dc-rule:hover, .dc-tool:hover, .dc-benefit:hover { transform: none; box-shadow: none; } .dc-reveal, .dc-reveal.dc-reveal_in { opacity: 1; transform: none; transition: none; } } /* Полная навигация появляется только при достаточной ширине контейнера. */ .dc-header__tag { display: none; } @media (max-width: 1279px) { .dc-nav { display: none; } .dc-burger { display: inline-flex; } } /* Переключаемый пример отчёта и пояснения к источникам. */ [data-preview-panel][hidden] { display: none; } .dc-preview-nav { display: flex; gap: 20px; border-bottom: 1px solid var(--dc-line); margin-top: 18px; } .dc-preview-nav button { font: inherit; cursor: pointer; } .dc-preview-nav button { border: 0; border-bottom: 2px solid transparent; background: none; padding: 12px 0; font-size: 13px; color: var(--dc-muted); } .dc-preview-nav button[aria-pressed="true"] { color: var(--dc-accent); border-bottom-color: var(--dc-accent); } .dc-preview-nav button:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 4px; } .dc-demo-panel { min-height: 262px; } .dc-demo-explanation { padding-top: 18px; display: flex; flex-direction: column; gap: 16px; font-size: 13px; line-height: 1.6; } .dc-demo-explanation > b { font-size: 15px; } .dc-demo-explanation p { color: var(--dc-muted); } .dc-demo-evidence { display: flex; flex-direction: column; gap: 4px; border-left: 2px solid var(--dc-accent-border); padding-left: 12px; } .dc-demo-evidence span { color: var(--dc-muted); font-size: 12px; } .dc-demo-evidence strong { font-weight: 500; } .dc-sources__inner { gap: 18px; padding-top: 28px; padding-bottom: 28px; } .dc-sources__label { font-family: var(--dc-font-body); font-size: 15px; letter-spacing: 0; color: var(--dc-muted); } .dc-source-strip { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); width: 100%; } .dc-source-strip li { display: flex; flex-direction: column; align-items: center; gap: 14px; min-width: 0; padding: 10px 12px; border-left: 1px solid var(--dc-line); } .dc-source-strip li:first-child { border-left: 0; } .dc-source-strip svg { width: 28px; height: 28px; color: var(--dc-accent); } .dc-source-strip span { font-size: 14px; line-height: 1.5; color: var(--dc-muted); } .dc-logo-animated { display: inline-flex; align-items: center; } .dc-logo-char { position: relative; display: inline-grid; line-height: 1.2; } .dc-logo-letter { display: block; } .dc-logo-char svg { position: absolute; width: 1em; height: 1em; top: 50%; left: 50%; opacity: 0; transform: translate(-50%,30%) scale(.7); } .dc-logo-animated.is-playing .dc-logo-letter { animation: dc-letter-swap 1.05s both; animation-delay: calc(var(--letter) * 35ms); } .dc-logo-animated.is-playing svg { animation: dc-symbol-swap 1.05s both; animation-delay: calc(var(--letter) * 35ms); } @keyframes dc-letter-swap { 0%,100% { opacity: 1; transform: translateY(0); } 22%,65% { opacity: 0; transform: translateY(-65%); } } @keyframes dc-symbol-swap { 0%,100% { opacity: 0; transform: translate(-50%,30%) scale(.7); } 25%,60% { opacity: 1; transform: translate(-50%,-50%) scale(1); } } .dc-header__brand:focus-visible { outline: 2px solid var(--dc-accent); outline-offset: 6px; border-radius: 2px; } @media (max-width: 900px) { .dc-source-strip { grid-template-columns: repeat(4,minmax(0,1fr)); row-gap: 24px; } .dc-source-strip li:nth-child(5) { border-left: 0; } } @media (max-width: 600px) { .dc-preview-nav { gap: 16px; } .dc-source-strip { grid-template-columns: repeat(2,minmax(0,1fr)); row-gap: 12px; } .dc-source-strip li { flex-direction: row; gap: 10px; padding: 8px; text-align: left; } .dc-source-strip li:nth-child(odd) { border-left: 0; } .dc-source-strip span { font-size: 12px; } .dc-source-strip svg { width: 24px; height: 24px; flex: none; } } @media (prefers-reduced-motion: reduce) { .dc-logo-animated.is-playing .dc-logo-letter, .dc-logo-animated.is-playing svg { animation: none; } }