/* ============================================================================ РеалСтат · styles.css «Редакционная обсерватория»: тёплая бумага, сериф-заголовки, моно-метаданные, щедрый воздух. UI почти бесцветный — вся цветовая энергия уходит в карту. Свет — основная тема; тёмная — не инверсия (карта «светится»). ========================================================================== */ /* -------------------- ТОКЕНЫ -------------------- */ :root { /* светлая палитра */ --canvas: #FAF9F6; --surface: #FFFFFF; --surface-2:#F4F2ED; --hairline: #E6E4DE; --ink: #14181F; /* ~15:1 */ --ink-2: #5B6470; /* AA */ --navy: #15355E; --link: #1A5FA0; /* AA */ --ochre: #C2762A; /* НЕ-текст */ --ochre-tx: #9A5A1E; /* охра как текст */ --slate: #5F6770; /* «официальное» — ТЕКСТ, AA (≥4.5:1 на canvas/surface-2) */ --slate-line:#8A93A1; /* прежний тон сланца для НЕ-текста (линии/маркеры/swatch) */ --good: #2E8F86; /* зелёная заливка/стрелка дельты (НЕ-текст) */ --good-tx: #1E7A6E; /* зелёная дельта как ТЕКСТ, AA (≥4.5:1 на surface) */ --bad: #9A5A1E; /* типографика — гарнитуры */ --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; /* типографика — строгая 9-токенная шкала (§B2, никаких размеров вне неё) */ --fs-hero: clamp(44px, 6vw, 76px); /* H1 serif 600 ls −.02em lh1.05 */ --fs-h2: clamp(28px, 3.5vw, 36px); /* H2 serif 600 lh1.15 */ --fs-h3: 22px; /* заголовок карточки serif 600 */ --fs-sub: 18px; /* подзаголовок sans 600 */ --fs-lede: clamp(18px, 2vw, 21px); /* лид sans 400 */ --fs-body: 16px; /* основной текст */ --fs-sm: 14px; /* мелкий текст / кнопки */ --fs-cap: 12.5px; /* мета / подписи */ --num-xl: clamp(40px, 5vw, 52px); /* крупное число serif 700 tnum */ --num-lg: 36px; /* число serif 700 tnum */ /* тематические hue (base = чип/маркер; ink = текст, AA на белом) */ --theme-population:#3D4EA8; --theme-population-ink:#3D4EA8; --theme-built:#B45A35; --theme-built-ink:#9A4A2A; --theme-green:#3C8A4E; --theme-green-ink:#226534; --theme-social:#C08A1E; --theme-social-ink:#8A6310; --theme-transport:#1F7A8C; --theme-transport-ink:#176577; --theme-commerce:#9A3F6B; --theme-commerce-ink:#9A3F6B; --theme-salary_div:#C2762A; --theme-salary_div-ink:#9A5A1E; --theme-safety:#5C6B7A; --theme-safety-ink:#3E4A57; --theme-health:#2E8A6E; --theme-health-ink:#136B4F; --theme-economy:#8A63AC; --theme-economy-ink:#653F88; --theme-environ:#7D8838; --theme-environ-ink:#586320; --theme-culture:#9A6B3A; --theme-culture-ink:#7A5326; --theme-fuel:#2E6CA4; --theme-fuel-ink:#15426E; --theme-banks:#1E8C57; --theme-banks-ink:#136B3F; --theme-retail:#9A3F6B; --theme-retail-ink:#7E2F55; --theme-sport:#1497A6; --theme-sport-ink:#0E7280; --theme-education:#3D5BCF; --theme-education-ink:#2C44A8; --theme-coffee:#6F4E37; --theme-coffee-ink:#5B3A29; --theme-pharmacy:#0E9E8F; --theme-pharmacy-ink:#0E7468; --theme-fastfood:#D6491F; --theme-fastfood-ink:#A83815; --theme-nightlife:#7A3FA0; --theme-nightlife-ink:#5C2D7C; --theme-fin:#7A6A52; --theme-fin-ink:#5C503D; --theme-underground:#4A5A86; --theme-underground-ink:#3A4670; --theme-livability:#2E8A78; --theme-livability-ink:#1B5F57; /* радиусы, тени, ритм 8px */ --r: 12px; --r-s: 8px; --shadow: 0 1px 2px rgba(20,24,31,.04), 0 8px 24px rgba(20,24,31,.06); --shadow-hi: 0 2px 4px rgba(20,24,31,.06), 0 16px 40px rgba(20,24,31,.10); --maxw: 1320px; --tnum: 'tnum' 1, 'lnum' 1; } [data-theme="dark"] { --canvas: #0E1217; --surface: #161B22; --surface-2:#1B212A; --hairline: #232A33; --ink: #E7EAEE; --ink-2: #9BA4B0; --navy: #BFD3EC; --link: #5B9BD8; --slate: #9BA4B0; /* ТЕКСТ-сланец на тёмном — AA (≥4.5:1 на surface) */ --slate-line:#6B7787; /* прежний тёмный тон для НЕ-текста (линии/маркеры) */ --good-tx: #3DA99D; /* зелёная дельта-текст на тёмном — AA */ --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.45); --shadow-hi: 0 2px 6px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.55); /* тематический текст на тёмном — поднимаем светлоту до читаемой (AA на surface) */ --theme-population-ink:#9E9BDE; --theme-built-ink:#DD9C7B; --theme-green-ink:#82C491; --theme-social-ink:#D9C16C; --theme-transport-ink:#86C2CB; --theme-commerce-ink:#D394B5; --theme-salary_div-ink:#E8B57E; --theme-safety-ink:#A2AFBA; --theme-health-ink:#82C7AC; --theme-economy-ink:#A98FCB; --theme-environ-ink:#AAB672; --theme-culture-ink:#C8A684; --theme-fuel-ink:#86B6DC; --theme-banks-ink:#6FC79A; --theme-retail-ink:#D08FB0; --theme-sport-ink:#7FCFD8; --theme-education-ink:#9DB0F2; --theme-coffee-ink:#C9A98B; --theme-pharmacy-ink:#6FCFC1; --theme-fastfood-ink:#E8896A; --theme-nightlife-ink:#B98FD0; --theme-fin-ink:#C2B49A; --theme-underground-ink:#A6B2D8; --theme-livability-ink:#83C6B6; } /* -------------------- БАЗА -------------------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--canvas); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mono { font-family: var(--mono); font-feature-settings: var(--tnum); } /* табличные цифры везде в статистике */ .fact-num, .hero-anchor, .src-badge, .legend, .map-tooltip, .det-num, .det-rank, .prof-v, .tt-val b, .cat-unit, .trust-num, .peek-val { font-feature-settings: var(--tnum); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* видимые фокус-стейты (доступность заложена в вёрстку) */ :focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; } .region:focus, .region:focus-visible { outline: none; } /* подсветка по ФОРМЕ региона (.is-selected/охра), не уродская bbox-рамка браузера при клике мышью */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--ink); } .demo-tag { font-family: var(--mono); font-size: .7em; letter-spacing: .02em; color: var(--ochre-tx); background: rgba(194,118,42,.12); padding: 1px 5px; border-radius: 4px; vertical-align: middle; white-space: nowrap; } /* РЕАЛЬНЫЕ ДАННЫЕ: вместо тега «демо» — источник+год (стальной «gov»-зелёно-синий) */ .real-tag { font-family: var(--mono); font-size: .7em; letter-spacing: .02em; color: #155e52; background: rgba(46,143,134,.13); padding: 1px 5px; border-radius: 4px; vertical-align: middle; white-space: nowrap; } [data-theme="dark"] .real-tag { color: #74d8cc; background: rgba(63,179,166,.16); } /* -------------------- БЕЙДЖ ТИРА ИСТОЧНИКА (провенанс на карте) -------------------- Честность подачи видна НА карте: иконка+короткий лейбл, цвет по тиру. Нейтральная палитра (не кислота), тёмный ink на светлом тинте → AA. */ .tier-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 10.5px; font-weight: 600; line-height: 1.45; letter-spacing: .005em; white-space: nowrap; vertical-align: middle; padding: 1px 7px 1px 6px; border-radius: 999px; color: var(--tier-tx, var(--ink-2)); background: var(--tier-bg, var(--surface-2)); border: 1px solid var(--tier-bd, var(--hairline)); } .tier-ico { font-size: 11px; line-height: 1; } /* gov — стальной синий (официальное) */ .tier-gov { --tier-bg:#E7EDF3; --tier-tx:#2C4660; --tier-bd:#C4D2E0; } /* acad — индиго (исследование) */ .tier-acad { --tier-bg:#ECEAF4; --tier-tx:#4A3173; --tier-bd:#D3C9E4; } /* media — тил (НКО/журналистика) */ .tier-media { --tier-bg:#E3F0F1; --tier-tx:#155562; --tier-bd:#C2DDE1; } /* comm — бронза (коммерческий) */ .tier-comm { --tier-bg:#F4ECE2; --tier-tx:#7A5326; --tier-bd:#E2D2BD; } /* proxy — охра-предупреждение (наша модель/прокси) */ .tier-proxy { --tier-bg:#F6ECE2; --tier-tx:#8C3D0F; --tier-bd:#E8C9AE; } /* model — брендовый тил (композит/наша модель из реальных данных) */ .tier-model { --tier-bg:#E4F0EE; --tier-tx:#1B5F57; --tier-bd:#C2DED8; } [data-theme="dark"] .tier-gov { --tier-bg:#1C2A38; --tier-tx:#AEC7E0; --tier-bd:#2E4252; } [data-theme="dark"] .tier-acad { --tier-bg:#241E33; --tier-tx:#C3B2E2; --tier-bd:#3B3055; } [data-theme="dark"] .tier-media { --tier-bg:#13282C; --tier-tx:#93CDD4; --tier-bd:#244249; } [data-theme="dark"] .tier-comm { --tier-bg:#2A2114; --tier-tx:#D7BD90; --tier-bd:#43341F; } [data-theme="dark"] .tier-proxy { --tier-bg:#2A1C12; --tier-tx:#E3AC80; --tier-bd:#43301F; } [data-theme="dark"] .tier-model { --tier-bg:#13231F; --tier-tx:#83C6B6; --tier-bd:#244841; } /* строка тира в панели детали — заметным блоком, не мелким шрифтом */ .det-tier { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; } .det-tier-note { font-size: 11px; color: var(--ink-2); letter-spacing: .01em; } /* -------------------- ШАПКА -------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--canvas) 88%, transparent); backdrop-filter: saturate(1.1) blur(8px); border-bottom: 1px solid var(--hairline); } .header-inner { display: flex; align-items: center; gap: 16px; height: 60px; } .brand { display: flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; } .brand:hover { text-decoration: none; } .brand-mark { color: var(--navy); font-size: 22px; line-height: 1; } .brand-name { font-family: var(--serif); font-size: var(--fs-sub); letter-spacing: -.01em; } .header-tools { margin-left: auto; display: flex; align-items: center; gap: 12px; } .crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); overflow: hidden; } .crumbs span { color: var(--hairline); } .crumb-cur { color: var(--ink); font-weight: 500; } .ctx-switch { display: inline-flex; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px; } .ctx-switch button { border: 0; background: none; color: var(--ink-2); font: 500 13px/1 var(--sans); padding: 7px 14px; border-radius: 999px; cursor: pointer; } .ctx-switch button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--shadow); } .theme-toggle { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; display: grid; place-items: center; position: relative; } .theme-ico { position: absolute; font-size: 17px; transition: opacity .2s, transform .2s; } .theme-ico--moon { opacity: 0; transform: scale(.6) rotate(-30deg); } .theme-ico--sun { opacity: 1; color: var(--ochre-tx); } [data-theme="dark"] .theme-ico--sun { opacity: 0; transform: scale(.6); } [data-theme="dark"] .theme-ico--moon { opacity: 1; transform: none; color: var(--navy); } /* -------------------- HERO -------------------- */ .hero { padding: 96px 0 56px; border-bottom: 1px solid var(--hairline); } .hero-kicker { font-family: var(--sans); color: var(--ochre-tx); font-size: var(--fs-cap); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 16px; } .hero-title { font-size: var(--fs-hero); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 20px; max-width: 18ch; } .hero-lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); max-width: 44ch; margin: 0 0 28px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .hero-anchor { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; } .hero-anchor b { color: var(--ink); } .hero-anchor .src { color: var(--slate); } /* кнопки */ .btn { display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-sm)/1 var(--sans); padding: 12px 20px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: .16s; } .btn-sm { font-size: var(--fs-cap); padding: 9px 13px; } .btn-primary { background: var(--link); color: #fff; } .btn-primary:hover { background: var(--navy); text-decoration: none; } .btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--hairline); } .btn-ghost:hover { border-color: var(--ink-2); text-decoration: none; } .btn-mine { background: var(--surface); color: var(--ink); border: 1px solid var(--hairline); font-size: 13px; padding: 9px 13px; border-radius: 10px; white-space: nowrap; } .btn-mine:hover { border-color: var(--ochre); } /* -------------------- СЕКЦИИ / BENTO -------------------- */ .section-h { font-size: var(--fs-h2); margin: 72px 0 18px; letter-spacing: -.01em; } .section-h-sub { display: none; } /* §D: убрана моно-приписка секции */ /* подзаголовок-лид секции (честная подпись атласа, напр. СПб) */ .section-lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); max-width: 62ch; margin: -6px 0 20px; } .card { --theme: var(--ochre); /* дефолт, переопределяется инлайн по теме карточки */ background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s, border-color .2s; cursor: pointer; display: block; color: inherit; overflow: hidden; } .card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hi); border-color: color-mix(in srgb, var(--theme) 45%, var(--hairline)); text-decoration: none; } .card:hover .card-open { opacity: 1; transform: none; } /* флагман во всю ширину */ .card-flag { display: grid; grid-template-columns: 1.15fr 1fr; } .card-flag-map { min-height: 360px; background: var(--surface-2); border-right: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; padding: 18px; } .card-flag-body { padding: 40px 44px; display: flex; flex-direction: column; } .card-eyebrow { font-family: var(--sans); color: var(--theme-ink, var(--ochre-tx)); font-size: var(--fs-cap); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin: 0 0 10px; } .card-title { font-size: 32px; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 10px; } .card-sub { color: var(--ink-2); margin: 0 0 16px; max-width: 42ch; } .card-fact { margin: 0 0 auto; font-size: var(--fs-sm); color: var(--ink-2); } .fact-num { font-family: var(--serif); font-weight: 700; font-size: 24px; color: var(--ink); margin-right: 4px; } .card-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; flex-wrap: wrap; } .src-badge { font-size: 11.5px; color: var(--slate); } .card-open { color: var(--link); font-weight: 600; font-size: 14px; opacity: .55; transform: translateX(-4px); transition: .18s; white-space: nowrap; } /* табы тем */ .theme-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; border-bottom: 1px solid var(--hairline); padding-bottom: 14px; } .theme-tab { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2); font: 500 14px var(--sans); padding: 8px 16px; border-radius: 999px; cursor: pointer; transition: .15s; } .theme-tab:hover { border-color: var(--ink-2); } .theme-tab.is-active { background: var(--navy); color: #fff; border-color: var(--navy); } [data-theme="dark"] .theme-tab.is-active { color: var(--canvas); } /* плитки */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .card-mini { display: flex; flex-direction: column; } .card-mini-map { height: 150px; background: var(--surface-2); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; padding: 12px; } .card-mini-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; } .card-mini .card-eyebrow { margin: 0 0 8px; } .card-mini-title { font-size: var(--fs-h3); margin: 0 0 4px; } .card-mini-sub { color: var(--ink-2); font-size: var(--fs-sm); margin: 0 0 12px; } .card-mini .card-fact { font-size: var(--fs-sm); } .card-mini .fact-num { font-size: 16px; } .card-mini .card-foot { margin-top: 14px; } /* мини-карты SVG */ .minisvg { max-width: 100%; height: auto; } .mini-region { stroke: var(--surface); stroke-width: .6; } [data-theme="dark"] .mini-region { stroke: var(--canvas); } /* -------------------- ПОЛОСА ДОВЕРИЯ -------------------- */ .trust { margin: 56px 0 24px; padding: 32px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--r); } .trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .trust-num { font-family: var(--serif); font-weight: 700; font-size: var(--num-lg); color: var(--navy); margin: 0; } .trust-cap { font-weight: 600; margin: 4px 0 6px; } .trust-txt { color: var(--ink-2); font-size: 14px; margin: 0; } .trust-demo { margin: 24px 0 0; font-size: 12.5px; color: var(--ochre-tx); } /* -------------------- ФУТЕР -------------------- */ .site-footer { border-top: 1px solid var(--hairline); margin-top: 64px; padding: 36px 0 28px; } .footer-inner { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footer-brand { font-size: 14px; color: var(--ink); margin: 0 0 6px; } .footer-note { color: var(--ink-2); font-size: 14px; margin: 0; max-width: 46ch; } .footer-nav { display: flex; gap: 20px; flex-wrap: wrap; } .footer-nav a { color: var(--ink-2); font-size: 14px; } .footer-demo { text-align: center; color: var(--slate); font-size: 12px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--hairline); } .on-map .site-footer { display: none; } /* на экране карты футер прячем */ /* ============================================================ ЭКРАН КАРТЫ ============================================================ */ .view-map { position: relative; } .demo-watermark { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); background: rgba(194,118,42,.14); color: #874A12; border: 1px solid rgba(194,118,42,.35); font-size: 11.5px; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; pointer-events: none; } /* на узких (≤960) и мобайле плашка уходит в поток над тулбаром/каталогом — больше не перекрывает .map-title / поиск / метрику (QA: наложение) */ @media (max-width: 960px) { .demo-watermark { position: static; transform: none; top: auto; left: auto; display: block; width: max-content; max-width: calc(100% - 24px); margin: 8px auto 0; } } [data-theme="dark"] .demo-watermark { background: rgba(216,154,90,.16); color: #E8B57E; border-color: rgba(216,154,90,.4); } /* честность: у показателей с реальными данными свой бейдж «Росстат · год» — глобальный демо-watermark прячем (специфичность бьёт мобильный display:block). */ .demo-watermark.is-hidden { display: none; } .map-shell { display: grid; grid-template-columns: 280px minmax(0, 1fr); /* ЖЁСТКАЯ высота (не min-height): длинный список показателей в .map-rail НЕ растягивает контейнер — рейл скроллится внутри (overflow-y:auto), карта = высота вьюпорта и не уезжает вниз. Мобайл (display:block) и immersive переопределяют ниже. */ gap: 0; height: calc(100vh - 60px); min-height: 0; position: relative; } .map-rail { border-right: 1px solid var(--hairline); padding: 28px 20px; background: var(--canvas); overflow-y: auto; } .rail-section + .rail-section { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hairline); } .rail-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); font-family: var(--sans); font-weight: 600; margin: 0 0 14px; } .rail-sub { font-size: 14px; margin: 0 0 10px; font-family: var(--sans); font-weight: 600; } /* группа темы: sans, не-uppercase, с цветным чипом темы (§C) */ .cat-group { display: flex; align-items: center; gap: 8px; font: 600 12px var(--sans); color: var(--ink-2); margin: 24px 0 8px; text-transform: none; } .cat-group:first-child { margin-top: 0; } /* цветной чип темы вместо emoji-глифа */ .cat-chip { width: 8px; height: 8px; border-radius: 3px; flex: none; background: var(--theme); } .cat-item { width: 100%; display: flex; align-items: center; gap: 10px; text-align: left; background: none; padding: 11px 12px; border-radius: var(--r-s); border-left: 3px solid transparent; cursor: pointer; color: var(--ink); margin-bottom: 2px; transition: .12s; font: 500 14px/1.35 var(--sans); } .cat-item:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--theme); } .cat-item.is-active { background: var(--surface); border-left-color: var(--theme); box-shadow: var(--shadow); } .cat-item.is-active .cat-name { font-weight: 600; } .cat-item.is-active .cat-unit { color: var(--theme-ink); } .cat-name { flex: 1; } .cat-unit { font-size: var(--fs-cap); color: var(--ink-2); } .seg { display: inline-flex; width: 100%; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 10px; padding: 3px; } .seg button { flex: 1; border: 0; background: none; color: var(--ink-2); font: 500 13px var(--sans); padding: 8px 6px; border-radius: 7px; cursor: pointer; } .seg button.is-active { background: var(--link); color: #fff; box-shadow: var(--shadow); } .seg button.is-disabled, .seg button:disabled { opacity: .42; cursor: not-allowed; text-decoration: line-through; } .metric-note { font-size: 12px; color: var(--ink-2); margin: 10px 0 0; line-height: 1.4; } /* центр */ .map-main { display: flex; flex-direction: column; min-width: 0; padding: 18px 20px 20px; } .map-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; } .map-title { font-size: 22px; margin: 0; white-space: nowrap; } .map-search { position: relative; margin-left: auto; min-width: 220px; } .map-search input { width: 100%; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; padding: 9px 12px; font: 400 14px var(--sans); color: var(--ink); } .map-search input::placeholder { color: var(--ink-2); } .search-list { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; right: 0; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--shadow-hi); max-height: 320px; overflow-y: auto; } .search-list li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 14px; } .search-list li:hover { background: var(--surface-2); } .search-list .mono { color: var(--ink-2); font-size: 12px; } .search-empty { color: var(--ink-2); cursor: default; font-size: 13px; } .search-empty:hover { background: none; } /* холст карты — тёплый радиальный подклад вместо плоского белого (арт-пасс §2A) */ .map-canvas { position: relative; flex: 1; min-height: 440px; background: radial-gradient(125% 110% at 50% 38%, #FFFFFF 0%, #FCFBF8 55%, #F6F4EE 100%); border: 1px solid var(--hairline); border-radius: var(--r); overflow: hidden; } [data-theme="dark"] .map-canvas { background: radial-gradient(125% 110% at 50% 38%, #1A2029 0%, #12171E 60%, #0E1217 100%); } .mapsvg { display: block; width: 100%; height: 100%; --k: 1; touch-action: none; } /* --k: компенсация stroke при зуме; touch-action none — пинч/пан §6.3 */ /* graticule — тонкий волосок ПОД полигонами (арт-пасс §2B; приглушён §4 — меньше шума под подписями) */ .graticule { fill: none; stroke: #E9E6DF; stroke-width: .5; opacity: .35; pointer-events: none; } [data-theme="dark"] .graticule { stroke: #1E242C; opacity: .4; } /* глубина: тень по силуэту группы регионов, не box-shadow (арт-пасс §1) */ .mapsvg .regions { filter: drop-shadow(0 1px 1px rgba(20,24,31,.05)) drop-shadow(0 10px 22px rgba(20,24,31,.07)); } [data-theme="dark"] .mapsvg .regions { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 14px 30px rgba(0,0,0,.40)); } /* внешний контур страны/города — чернила атласа, поверх заливок (арт-пасс §4) */ /* stroke-width делим на --k → линия визуально стабильна при зуме (§1.1) */ .map-outline { fill: none; stroke: #2A323C; stroke-width: calc(1.4px / var(--k, 1)); stroke-linejoin: round; opacity: .9; pointer-events: none; } [data-theme="dark"] .map-outline { stroke: #3A434E; opacity: .85; } .map-skeleton { position: absolute; inset: 0; background: radial-gradient(120px 80px at 35% 45%, var(--surface-2), transparent 70%), radial-gradient(160px 90px at 62% 55%, var(--surface-2), transparent 70%); display: none; animation: pulse 1.4s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:.5} 50%{opacity:.9} } /* полигоны — межрегиональные границы тоньше/мягче (арт-пасс §4); морф заливки §1.2. stroke-width / --k → не «жирнеет» при зуме (§1.1). fill морфим из JS (d3, Lab) — в CSS-transition его НЕТ, чтобы attrTween не дёргался кадрами. */ .region { stroke: #FFFFFF; stroke-width: calc(.6px / var(--k, 1)); cursor: pointer; transition: filter .15s, opacity .2s, stroke-width .18s; } [data-theme="dark"] .region { stroke: #0E1217; } /* §2.1 ховер-лифт: тёмная обводка 1.5px + мягкая БУМАЖНАЯ тень (без глоу), 120ms */ .region.is-hover { stroke: var(--ink); stroke-width: calc(1.5px / var(--k, 1)); filter: drop-shadow(0 2px 4px rgba(0,0,0,.12)); transition: filter .12s ease, stroke-width .12s ease; } [data-theme="dark"] .region.is-hover { stroke: #E7EAEE; filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); } .region.is-selected { stroke: var(--ochre); stroke-width: calc(2.5px / var(--k, 1)); filter: drop-shadow(0 6px 14px rgba(20,24,31,.18)); } [data-theme="dark"] .region.is-selected { filter: drop-shadow(0 6px 14px rgba(0,0,0,.5)); } .region.is-muted { opacity: .22; } /* §3.1 ховер по корзине легенды: вне квантиля гаснет (opacity .25, переход .2s выше) */ .region.is-bucket-dim { opacity: .25; } .region.is-bucket-pop { stroke: var(--ink); stroke-width: calc(1.2px / var(--k, 1)); } [data-theme="dark"] .region.is-bucket-pop { stroke: #E7EAEE; } /* §1.1/§8.2 плавающие контролы зума — СВЕТЛОЕ стекло (без глоу), «остров» справа-низу */ .map-zoomctl { position: absolute; z-index: 12; right: 16px; bottom: 16px; display: flex; flex-direction: column; padding: 4px; gap: 2px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(8px) saturate(112%); backdrop-filter: blur(8px) saturate(112%); border: 1px solid var(--hairline); border-radius: 14px; box-shadow: var(--shadow); } [data-theme="dark"] .map-zoomctl { background: rgba(22, 27, 34, .72); border-color: rgba(255, 255, 255, .08); box-shadow: 0 8px 24px rgba(0, 0, 0, .45); } .map-zoomctl .zc-btn { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font: 400 20px/1 var(--sans); border-radius: 10px; display: grid; place-items: center; transition: .15s; } .map-zoomctl .zc-btn:hover { color: var(--ink); background: var(--surface-2); } .map-zoomctl .zc-btn + .zc-btn { border-top: 1px solid var(--hairline); } [data-theme="dark"] .map-zoomctl .zc-btn:hover { background: rgba(255, 255, 255, .06); color: #E7EAEE; } [data-theme="dark"] .map-zoomctl .zc-btn + .zc-btn { border-top-color: rgba(255, 255, 255, .06); } /* «сброс» проявляется только при k>1 (fade-in) */ .map-zoomctl .zc-reset { font-size: 16px; opacity: 0; transform: scale(.85); pointer-events: none; max-height: 0; overflow: hidden; border-top: 0 !important; transition: opacity .2s ease, transform .2s ease, max-height .2s ease; } .map-zoomctl.k-gt1 .zc-reset { opacity: 1; transform: none; pointer-events: auto; max-height: 40px; border-top: 1px solid var(--hairline) !important; } [data-theme="dark"] .map-zoomctl.k-gt1 .zc-reset { border-top-color: rgba(255, 255, 255, .06) !important; } /* в режиме камер D3-контролы не нужны (D3-слой снят teardown'ом, но на всякий) */ body.cam-mode .map-zoomctl { display: none; } /* на мобайле уводим контролы в правый-ВЕРХ: низ занят peek/легендой/bottom-sheet (пинч/даблтап тоже работают) */ @media (max-width: 760px) { .map-zoomctl { top: 12px; right: 12px; bottom: auto; } } /* подписи на карте — иерархия видимости, гало = --surface (арт-пасс §3). Чистая читаемость: тонкая обводка (paint-order) + мягкая тень-подложка на ГРУППЕ подписей. Текст читается над любой заливкой, но «подсвет» не аляповатый. */ .map-labels, .map-active-labels { filter: drop-shadow(0 0 1.5px var(--surface)); } .map-label { paint-order: stroke; stroke: var(--surface); stroke-width: 1.4px; stroke-linejoin: round; pointer-events: none; } .map-label .lab-name { font: 500 11.5px var(--sans); fill: var(--ink); } .map-label .lab-val { font: 700 11.5px var(--mono); fill: var(--ink-2); font-feature-settings: var(--tnum); } [data-theme="dark"] .map-label { stroke-width: 1.6px; } [data-theme="dark"] .map-label .lab-name { fill: #E7EAEE; } [data-theme="dark"] .map-label .lab-val { fill: #9BA4B0; } /* активные подписи (ховер / выбранное) — крупнее, гало чуть плотнее, но всё ещё тонкое */ .map-label.is-hover-lab { stroke-width: 1.8px; } .map-label.is-hover-lab .lab-name { font: 600 13px var(--sans); } .map-label.is-selected-lab { stroke-width: 1.8px; } .map-label.is-selected-lab .lab-name { font: 700 13px var(--sans); } .map-label.is-hover-lab .lab-val, .map-label.is-selected-lab .lab-val { font: 700 13px var(--mono); } [data-theme="dark"] .map-label.is-hover-lab, [data-theme="dark"] .map-label.is-selected-lab { stroke-width: 1.8px; } /* тултип — surface с волоском, НЕ чёрная плашка */ .map-tooltip { position: absolute; z-index: 25; pointer-events: none; max-width: 260px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 10px; box-shadow: var(--shadow-hi); padding: 12px 13px; font-size: 13px; } .tt-name { font-weight: 600; margin-bottom: 6px; } .tt-val { font-size: 16px; display: flex; align-items: center; gap: 7px; } .tt-val b { font-family: var(--serif); } .tt-dot { width: 11px; height: 11px; border-radius: 3px; display: inline-block; } .tt-abs { color: var(--ink-2); font-size: 12px; margin-top: 2px; } .tt-rank { color: var(--ink-2); font-size: 11.5px; margin-top: 6px; } .tt-delta { font-size: 12.5px; font-weight: 500; margin-top: 3px; } .tt-delta.up { color: var(--good-tx); } .tt-delta.down { color: var(--bad); } .tt-src { color: var(--slate); font-size: 10.5px; margin-top: 7px; } .tt-hint { color: var(--link); font-size: 11.5px; margin-top: 6px; } /* ЖЁСТКАЯ пометка-плашка «оценка» в тултипе — заметно, не мелким шрифтом */ .tt-disc { margin-top: 9px; padding: 8px 9px; font-size: 12px; line-height: 1.45; color: var(--ink); background: rgba(194,118,42,.12); border-left: 3px solid var(--ochre); border-radius: 6px; } .tt-disc b { color: var(--ochre-tx); } .tt-dot.lg-nd { border: 1px solid var(--hairline); } /* легенда */ .legend { margin-top: 14px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); } .legend-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .legend-title { font-family: var(--serif); font-weight: 600; font-size: 15px; } .legend-unit { font-size: 11.5px; color: var(--ink-2); } .legend-buckets { display: flex; gap: 6px; flex-wrap: wrap; } .legend-bucket { display: flex; align-items: center; gap: 6px; border: 1px solid var(--hairline); background: var(--surface); padding: 5px 8px; border-radius: 8px; cursor: pointer; transition: .12s; } .legend-bucket:hover { border-color: var(--ink-2); } .legend-bucket.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .lg-sw { width: 14px; height: 14px; border-radius: 4px; flex: none; } .lg-rng { font-size: 11px; color: var(--ink-2); } .legend-nd { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--ink-2); } .lg-nd { background: repeating-linear-gradient(45deg, #DCDAD4 0 2px, #C4C1B8 2px 4px); border: 1px solid var(--hairline); } [data-theme="dark"] .lg-nd { background: repeating-linear-gradient(45deg, #262B31 0 2px, #3A424B 2px 4px); } .legend-scaletype { margin-top: 10px; font-size: 11px; color: var(--ink-2); letter-spacing: .01em; } .legend-foot { margin-top: 6px; font-size: 11px; color: var(--slate); } /* ЖЁСТКАЯ пометка-плашка «оценка» в легенде карты */ .legend-disc { margin-top: 10px; padding: 9px 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink); background: rgba(194,118,42,.12); border-left: 3px solid var(--ochre); border-radius: 6px; } .legend-disc b { color: var(--ochre-tx); } .legend-chip { position: absolute; z-index: 8; left: 12px; bottom: 12px; display: none; background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 14px; font-size: 12px; box-shadow: var(--shadow); cursor: pointer; } /* peek-плашка (мобайл) */ .peek { position: absolute; z-index: 9; left: 12px; right: 12px; bottom: 12px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r); box-shadow: var(--shadow-hi); padding: 12px 14px; cursor: pointer; } .peek-main { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .peek-main b { font-size: 15px; } .peek-val { font-size: 14px; color: var(--ink); } .peek-rank { font-size: 11.5px; color: var(--ink-2); margin-top: 4px; } /* ============================================================================ §1 ФИЛЬТР-ПАНЕЛЬ АТЛАСА — плавающий остров (светлое стекло, парный к легенде). Двуручка-слайдер по значению + мини-гистограмма + пресеты + чипы + счётчик. Только D3-картограммы. Бренд-синий #1A5FA0 (var(--link), AA). tnum на числах. ========================================================================== */ .filter-island { position: absolute; z-index: 12; top: 16px; left: 16px; width: 286px; display: flex; flex-direction: column; } .filter-island.is-collapsed { width: auto; } .filter-island.is-collapsed .fi-body { display: none; } /* чип-разворот «Фильтры» */ .fi-chip { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(10px) saturate(115%); backdrop-filter: blur(10px) saturate(115%); border: 1px solid var(--hairline); border-radius: 999px; padding: 9px 14px; min-height: 40px; box-shadow: var(--shadow); cursor: pointer; color: var(--ink); font: 600 13px var(--sans); margin-bottom: 8px; } .filter-island.is-collapsed .fi-chip { margin-bottom: 0; } .fi-chip:hover { border-color: var(--ink-2); } .fi-chip-ico { color: var(--link); font-size: 13px; line-height: 1; } .fi-chip-badge { background: var(--link); color: #fff; border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; } /* тело-остров — светлое стекло */ .fi-body { background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); border: 1px solid var(--hairline); border-radius: 16px; box-shadow: var(--shadow-hi); padding: 14px 16px 16px; } [data-theme="dark"] .fi-chip, [data-theme="dark"] .fi-body { background: rgba(22, 27, 34, .84); border-color: rgba(255, 255, 255, .08); } .fi-grip { display: none; } .fi-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } .fi-title { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--ink); } .fi-close { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 16px; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; } .fi-close:hover { background: var(--surface-2); color: var(--ink); } /* живой счётчик «N из M» — число Source Serif tnum */ .fi-counter { display: flex; align-items: baseline; gap: 7px; margin-bottom: 12px; } .fi-count-num { font-family: var(--serif); font-weight: 700; font-size: 26px; line-height: 1; color: var(--ink); font-feature-settings: var(--tnum); } .fi-count-of { font-size: 12px; color: var(--ink-2); } /* слайдер + гистограмма */ .fi-slider { margin-bottom: 12px; } .fi-hist { display: flex; align-items: flex-end; gap: 1px; height: 40px; margin-bottom: 6px; padding: 0 9px; } .fi-bar { flex: 1 1 0; min-width: 0; border-radius: 1px 1px 0 0; transition: opacity .15s; } .fi-bar.is-out { opacity: .2; } .fi-track { position: relative; height: 28px; margin: 0 9px; } .fi-rail { position: absolute; top: 12px; left: 0; right: 0; height: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); } .fi-fill { position: absolute; top: 12px; height: 4px; border-radius: 999px; background: var(--link); } .fi-thumb { position: absolute; top: 0; width: 18px; height: 18px; margin-top: 5px; transform: translateX(-50%); background: var(--surface); border: 2px solid var(--link); border-radius: 50%; cursor: grab; box-shadow: var(--shadow); padding: 0; touch-action: none; } .fi-thumb::before { content: ''; position: absolute; inset: -13px; } /* hit-зона ≥44px (тач) */ .fi-thumb:hover { border-color: var(--navy); } .fi-thumb:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; } .fi-thumb:active { cursor: grabbing; } .fi-bounds { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; } .fi-bound { font-size: 11.5px; color: var(--ink); font-feature-settings: var(--tnum); white-space: nowrap; } /* пресеты-квантили (активный = бренд-синий) */ .fi-presets { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 12px; } .fi-preset { border: 1px solid var(--hairline); background: var(--surface); color: var(--ink-2); font: 500 11.5px var(--sans); padding: 7px 9px; border-radius: 7px; cursor: pointer; transition: .12s; min-height: 30px; } .fi-preset:hover { border-color: var(--ink-2); color: var(--ink); } .fi-preset.is-active { background: var(--link); border-color: var(--link); color: #fff; box-shadow: var(--shadow); } /* чипы активных фильтров + «Сбросить всё» */ .fi-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .fi-chips-empty { font-size: 11px; color: var(--ink-2); } .fi-fchip { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 5px 3px 9px; font-size: 11.5px; color: var(--ink); } .fi-chip-sw { width: 10px; height: 10px; border-radius: 3px; flex: none; } .fi-fchip-tx { font-feature-settings: var(--tnum); } .fi-fchip-x { border: 0; background: none; color: var(--ink-2); cursor: pointer; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; } .fi-fchip-x:hover { background: var(--hairline); color: var(--ink); } .fi-reset { border: 0; background: none; color: var(--link); font: 600 11.5px var(--sans); cursor: pointer; padding: 4px 6px; } .fi-reset:hover { text-decoration: underline; } /* в detail-режиме (Leaflet) фильтр-остров не нужен */ body.cam-mode .filter-island { display: none; } /* мобайл: остров → bottom-sheet с грипом (2 снапа: peek-счётчик+чипы / full-слайдер) */ @media (max-width: 760px) { .filter-island { top: 12px; left: 12px; width: auto; } .filter-island:not(.is-collapsed) .fi-body { position: fixed; left: 0; right: 0; bottom: 0; width: auto; z-index: 48; border-radius: 16px 16px 0 0; max-height: 82vh; overflow-y: auto; padding-top: 2px; } .fi-grip { display: block; width: 44px; height: 4px; border-radius: 999px; background: var(--hairline); margin: 8px auto 8px; cursor: grab; } .fi-close { display: none; } /* закрытие — чипом / грипом */ /* снап «peek»: видны только счётчик и чипы; полный слайдер — по грипу */ .filter-island:not(.is-full) .fi-slider, .filter-island:not(.is-full) .fi-presets { display: none; } .fi-preset { min-height: 36px; padding: 9px 11px; } /* тач-цели крупнее */ } /* ============================================================================ §F ТАЙМЛАЙН-СКРАББЕР «показатель по годам» — светлое стекло-пилюля, снизу-центр карты. Только D3-картограммы с timeline. Охра — play/активный (единственный тёплый акцент, как в фильтре — синий). tnum на годах. ========================================================================== */ .timeline-scrubber { position: absolute; z-index: 13; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; width: min(520px, calc(100% - 160px)); padding: 8px 12px; background: rgba(255, 255, 255, .82); -webkit-backdrop-filter: blur(14px) saturate(120%); backdrop-filter: blur(14px) saturate(120%); border: 1px solid var(--hairline); border-radius: 999px; box-shadow: var(--shadow-hi); } [data-theme="dark"] .timeline-scrubber { background: rgba(22, 27, 34, .84); border-color: rgba(255, 255, 255, .08); } body.cam-mode .timeline-scrubber { display: none; } /* play / pause — охра-кольцо */ .ts-play { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--ochre) 45%, var(--hairline)); background: var(--surface); color: var(--ochre-tx); cursor: pointer; display: grid; place-items: center; font-size: 13px; line-height: 1; transition: .15s; } .ts-play:hover { border-color: var(--ochre); box-shadow: var(--shadow); } .ts-play:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; } .ts-play:disabled { opacity: .45; cursor: not-allowed; } .ts-play .ts-ico-pause { display: none; } .ts-play.is-playing .ts-ico-play { display: none; } .ts-play.is-playing .ts-ico-pause { display: inline; } /* трек + мета */ .ts-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ts-track { position: relative; height: 26px; cursor: pointer; touch-action: none; } .ts-track:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; border-radius: 8px; } .ts-rail { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--hairline); } .ts-progress { position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 999px; background: var(--ochre); } .ts-ticks { position: absolute; inset: 0; } .ts-tick { position: absolute; top: 0; transform: translateX(-50%); height: 100%; display: flex; align-items: center; justify-content: center; cursor: pointer; } .ts-tick::before { content: ''; position: absolute; inset: -9px -8px; } /* тач-цель */ .ts-tick-mark { width: 2px; height: 7px; border-radius: 1px; background: var(--hairline); } .ts-tick.is-active .ts-tick-mark { background: var(--ochre); } .ts-tick-lab { position: absolute; top: 0; font: 500 9.5px var(--mono); color: var(--ink-2); font-feature-settings: var(--tnum); white-space: nowrap; pointer-events: none; } .ts-thumb { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; transform: translateX(-50%); border-radius: 50%; background: var(--surface); border: 2px solid var(--ochre); box-shadow: var(--shadow); pointer-events: none; transition: left .25s ease; } .ts-meta { display: flex; align-items: baseline; gap: 8px; } .ts-year { font-family: var(--serif); font-weight: 700; font-size: 16px; line-height: 1; color: var(--ink); font-feature-settings: var(--tnum); } .ts-state { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* скорость 0,5 / 1 / 2× */ .ts-speed { flex: none; display: flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 999px; padding: 3px; } .ts-speed button { border: 0; background: none; color: var(--ink-2); cursor: pointer; font: 600 11px var(--sans); padding: 5px 8px; border-radius: 999px; min-width: 34px; transition: .12s; font-feature-settings: var(--tnum); } .ts-speed button:hover { color: var(--ink); } .ts-speed button.is-active { background: var(--surface); color: var(--ochre-tx); box-shadow: var(--shadow); } /* мобайл: компактнее, выше (над peek/легендой), тач-цели ≥44px */ @media (max-width: 760px) { .timeline-scrubber { bottom: 76px; width: calc(100% - 24px); gap: 8px; padding: 7px 9px; } .ts-play { width: 44px; height: 44px; } .ts-state { display: none; } /* «по состоянию на …» остаётся в легенде/детали */ .ts-tick-lab { display: none; } /* год крупно в ts-year; подписи тиков убираем */ .ts-speed button { padding: 10px 7px; min-width: 40px; } } /* ---------- ПАНЕЛЬ ДЕТАЛИ ---------- */ .detail { position: fixed; top: 60px; right: 0; bottom: 0; width: 372px; z-index: 40; background: var(--surface); border-left: 1px solid var(--hairline); box-shadow: var(--shadow-hi); transform: translateX(100%); transition: transform .25s ease; overflow-y: auto; } .detail.is-open { transform: none; } .detail-grip { display: none; } .detail-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--hairline); background: var(--surface); cursor: pointer; color: var(--ink-2); font-size: 14px; } .detail-close:hover { color: var(--ink); } .detail-body { padding: 24px 22px 40px; } .det-eyebrow { font: 600 var(--fs-cap) var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); margin: 0 0 6px; } .det-name { font-size: 24px; margin: 0 0 12px; max-width: 18ch; } .det-big { display: flex; align-items: baseline; gap: 8px; } .det-num { font-family: var(--serif); font-weight: 700; font-size: var(--num-xl); line-height: 1; color: var(--navy); } .det-unit { font-size: 16px; color: var(--ink-2); } .det-sub { color: var(--ink-2); font-size: 14px; margin: 8px 0 10px; } .det-anchor { font-size: 11.5px; color: var(--theme-ink, var(--ochre-tx)); margin: 0 0 16px; padding: 6px 10px; background: var(--surface-2); border-radius: var(--r-s); line-height: 1.45; } /* ЖЁСТКАЯ пометка-плашка «оценка» в панели детали — крупный заметный блок */ .det-disc { margin: 10px 0 14px; padding: 11px 13px; font-size: 13px; line-height: 1.5; color: var(--ink); background: rgba(194,118,42,.12); border: 1px solid rgba(194,118,42,.40); border-left: 4px solid var(--ochre); border-radius: 8px; } .det-disc b { color: var(--ochre-tx); } .det-nodata { font-size: 13px; color: var(--ink-2); line-height: 1.5; margin: 2px 0 12px; } .det-nd-num { color: var(--ink-2); font-size: clamp(28px, 6vw, 40px); } .det-rankrow { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-bottom: 18px; } .det-rank { font-size: 13px; color: var(--ink-2); } .det-rank b { color: var(--ink); } .det-delta { font-size: 13px; font-weight: 500; } .det-delta.up { color: var(--good-tx); } .det-delta.down { color: var(--bad); } .hist { display: flex; align-items: flex-end; gap: 2px; height: 44px; padding: 0; margin-bottom: 4px; } .hist-bar { flex: 1; background: var(--hairline); border-radius: 2px 2px 0 0; min-width: 2px; } .hist-bar.me { background: var(--ochre); } .hist-cap { font-size: 11px; color: var(--slate); margin: 0 0 18px; } .twolines { display: grid; gap: 8px; margin: 0 0 20px; } .tl { padding: 10px 12px; border-radius: 8px; border: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; } .tl-off { border-left: 3px solid var(--slate-line); } .tl-our { border-left: 3px solid var(--link); } .tl-k { font-size: 10.5px; color: var(--ink-2); } .tl-v { font-family: var(--serif); font-weight: 600; font-size: 16px; } .tl-s { font-size: 10px; color: var(--slate); } .det-h { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em; font-family: var(--sans); color: var(--ink-2); } .prof-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 20px; } .prof-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--hairline); background: none; padding: 10px 4px; cursor: pointer; color: var(--ink); } .prof-row:hover { background: var(--surface-2); } .prof-k { font-size: 14px; } .prof-v { font-size: 13px; color: var(--ink-2); } .det-share { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; } .det-share .btn { justify-content: center; width: 100%; } .det-lineage { font-size: 11px; color: var(--slate); line-height: 1.5; } /* тост */ .toast { position: fixed; z-index: 80; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: var(--ink); color: var(--canvas); padding: 11px 18px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .25s; max-width: 90vw; text-align: center; } .toast.show { opacity: 1; transform: translate(-50%, 0); } /* ============================================================ БАННЕР file:// — само-объясняющая плашка. Показывается ТОЛЬКО при открытии index.html напрямую (двойной клик), когда браузер блокирует fetch реальных данных (CORS на file://) и весь портал падает на демо-заглушки. Вставляется из app.js первым ребёнком (в нормальном потоке → НЕ перекрывает шапку/карту, мягко двигает контент вниз). На http(s)/localhost не создаётся вовсе. ============================================================ */ .file-banner { position: relative; z-index: 60; display: flex; align-items: flex-start; gap: 12px; padding: 11px clamp(14px, 4vw, 22px); background: linear-gradient(180deg, rgba(194,118,42,.14), rgba(194,118,42,.10)); border-bottom: 1px solid rgba(194,118,42,.42); color: var(--ink); font-family: var(--sans); box-shadow: 0 1px 0 rgba(194,118,42,.18); } .file-banner-ico { flex: 0 0 auto; font-size: 17px; line-height: 1.45; color: var(--ochre-tx); } .file-banner-body { flex: 1 1 auto; min-width: 0; } .file-banner-text { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); } .file-banner-text b { color: var(--ochre-tx); font-weight: 600; } .file-banner-how { margin: 7px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; } .file-banner-cmd { font-family: var(--mono); font-size: 12.5px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: 7px; padding: 3px 8px; white-space: nowrap; } .file-banner-url { font-family: var(--mono); font-size: 12.5px; color: var(--link); } .file-banner-copy { flex: 0 0 auto; cursor: pointer; font: 500 12px var(--sans); color: var(--ochre-tx); background: var(--surface); border: 1px solid rgba(194,118,42,.5); border-radius: 7px; padding: 4px 10px; transition: .14s; } .file-banner-copy:hover { background: rgba(194,118,42,.10); border-color: var(--ochre); } .file-banner-copy:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; } .file-banner-copy.is-done { color: var(--good-tx); border-color: var(--good); } .file-banner-close { flex: 0 0 auto; cursor: pointer; align-self: flex-start; width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; font-size: 15px; line-height: 1; color: var(--ink-2); background: none; border: 1px solid transparent; transition: .14s; } .file-banner-close:hover { color: var(--ink); background: rgba(0,0,0,.05); border-color: var(--hairline); } .file-banner-close:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; } [data-theme="dark"] .file-banner { background: linear-gradient(180deg, rgba(216,154,90,.16), rgba(216,154,90,.10)); border-bottom-color: rgba(216,154,90,.4); } [data-theme="dark"] .file-banner-ico, [data-theme="dark"] .file-banner-text b, [data-theme="dark"] .file-banner-copy { color: #E8B57E; } [data-theme="dark"] .file-banner-copy { border-color: rgba(216,154,90,.5); } [data-theme="dark"] .file-banner-close:hover { background: rgba(255,255,255,.06); } /* мобайл: компактнее, кнопка копирования на всю строку под текстом */ @media (max-width: 560px) { .file-banner { padding: 10px 14px; gap: 9px; } .file-banner-text { font-size: 12.5px; } .file-banner-how { font-size: 12px; gap: 6px 8px; } .file-banner-cmd, .file-banner-url { font-size: 11.5px; white-space: normal; word-break: break-all; } } @media (prefers-reduced-motion: reduce) { .file-banner-copy, .file-banner-close { transition: none; } } /* ============================================================ КАРТА КАМЕР — «ТЁМНЫЙ ПУЛЬТ» (индикатор cameras, Leaflet, по мотивам Windy) Всегда тёмная база, непрерывное светящееся стальное ПОЛЕ покрытия, плавающие стеклянные контролы. НЕ зависит от глобального тумблера темы. ============================================================ */ /* full-bleed: режим камер сворачивает редакционную шапку, карта = вся область */ body.cam-mode .map-main { padding: 0; } body.cam-mode .map-toolbar { display: none; } body.cam-mode .legend { display: none; } body.cam-mode .demo-watermark { display: none; } body.cam-mode .map-canvas { border: 0; border-radius: 0; background: #0E1217; min-height: calc(100vh - 60px); } /* ДЕТАЛЬНЫЙ РЕЖИМ — карта ДОЛЖНА быть ровно во весь экран. Без этого высокий список показателей (rail) растягивал grid-строку до высоты контента, и карта становилась в разы выше вьюпорта: Leaflet.invalidateSize читал её высоту, центрировал содержимое (fitBounds/heat) ниже видимой зоны → выглядело пусто. Фиксируем высоту grid под вьюпорт (десктоп), rail скроллится сам (overflow:auto), ячейка карты получает высоту вьюпорта. Мобильная раскладка (block) не трогается. */ @media (min-width: 861px) { body.cam-mode .map-shell { height: calc(100vh - 60px); min-height: 0; } body.cam-mode .map-canvas { min-height: 0; } } .cam-map { position: absolute; inset: 0; z-index: 2; background: #0E1217; } .cam-map .leaflet-container { background: #0E1217; font-family: var(--sans); outline: none; } /* гридовое KDE-ПОЛЕ (камеры, тёмная база): cyan-glow аддитивно (screen) поверх тёмных тайлов → свечение, не глухая заливка. Гладкость — из апскейла растра (canvas), не CSS. */ #camMap .cam-field { opacity: 0.9; mix-blend-mode: screen; } @media (prefers-reduced-motion: no-preference) { #camMap .cam-field { animation: camGlow 7s ease-in-out infinite; } /* пульс свечения */ #camMap.cam-morph .leaflet-marker-pane { animation: camMorph .34s ease; } /* морф при смене слоя */ } @keyframes camGlow { 0%, 100% { opacity: .85; } 50% { opacity: .95; } } @keyframes camMorph { from { opacity: .15; } to { opacity: 1; } } /* одиночная камера — точка #CFE9F0 r3 + гало */ .cam-dot { fill: #CFE9F0 !important; fill-opacity: .9; stroke: none !important; filter: drop-shadow(0 0 3px rgba(207,233,240,.65)); } /* кластер — тёмное стеклянное стекло, число Plex Mono tnum, кольцо 12% (не дефолтные сине-зелёные) */ .cam-cluster { display: grid; place-items: center; border-radius: 50%; background: rgba(22,27,34,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #E7EAEE; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 4px 14px rgba(0,0,0,.5); font: 600 12px/1 var(--mono); font-feature-settings: var(--tnum); } .cam-cluster span { pointer-events: none; } /* районы-контекст ПОД свечением; в режиме «Плотность» подсвечиваются */ .cam-district { fill: #7FCBDB; fill-opacity: 0; stroke: #3A4C5C; stroke-width: .8; stroke-opacity: .35; } #camMap.is-density .cam-district { stroke: #7FCBDB; stroke-opacity: .5; fill-opacity: .04; } /* --- общий стиль СТЕКЛА плавающих контролов --- */ #camMap .leaflet-control { margin: 12px; } .cam-pill, .cam-seg, .cam-stack, .cam-legend, .cam-chips, .cam-readout { background: rgba(22,27,34,.72); -webkit-backdrop-filter: blur(12px) saturate(115%); backdrop-filter: blur(12px) saturate(115%); border: 1px solid rgba(255,255,255,.08); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.5); color: #E7EAEE; } /* hover-readout (уголок снизу-справа): плотность под курсором в режиме поля */ .cam-readout { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border-radius: 10px; font: 500 12px var(--sans); line-height: 1; white-space: nowrap; transition: opacity .15s ease; } .cam-readout[hidden] { display: none; } .cam-readout-dot { align-self: center; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, #5E94C0, #5C1680); box-shadow: 0 0 0 3px rgba(94,148,192,.18); } .cam-readout-val { font-weight: 600; font-size: 13px; color: #E7EAEE; font-feature-settings: var(--tnum); } .cam-readout-unit { font-size: 10.5px; color: #9BA4B0; } /* инфо-пилюля top-left */ .cam-pill { padding: 10px 14px; max-width: 300px; } .cam-pill-title { font: 600 14px/1.25 var(--sans); color: #E7EAEE; } .cam-pill-sub { font: 400 12px/1.3 var(--sans); color: #9BA4B0; margin-top: 2px; } .cam-pill-demo { font-size: 10px; color: #C2762A; margin-top: 6px; letter-spacing: .01em; } /* переключатель слоёв (сегменты-стекло), активный — кольцо охрой */ .cam-seg { display: inline-flex; padding: 3px; gap: 2px; margin-top: 8px !important; } .cam-seg button { border: 0; background: none; cursor: pointer; color: #9BA4B0; font: 500 12.5px var(--sans); padding: 7px 12px; border-radius: 9px; transition: .15s; } .cam-seg button:hover { color: #E7EAEE; background: rgba(255,255,255,.05); } .cam-seg button.is-active { color: #E7EAEE; box-shadow: inset 0 0 0 1.5px #C2762A; } /* правый вертикальный стек 40×40, иконки моно #9BA4B0 → hover #E7EAEE, активный — охра-кольцо */ .cam-stack { display: flex; flex-direction: column; padding: 4px; gap: 2px; } .cam-stack button { width: 40px; height: 40px; border: 0; background: none; cursor: pointer; color: #9BA4B0; font: 400 18px/1 var(--sans); border-radius: 9px; display: grid; place-items: center; transition: .15s; } .cam-stack button:hover { color: #E7EAEE; background: rgba(255,255,255,.06); } .cam-stack button.is-active { color: #E7EAEE; box-shadow: inset 0 0 0 1.5px #C2762A; } .cam-stack button + button { border-top: 1px solid rgba(255,255,255,.06); } /* легенда — нижняя градиент-полоса (стальной градиент) + числовые стопы tnum + «нет данных» */ .cam-legend { padding: 10px 14px 11px; min-width: 280px; max-width: 360px; transition: opacity .2s, transform .2s; } #camMap.legend-hidden .cam-legend { opacity: 0; transform: translateY(10px); pointer-events: none; } .cam-legend-grad { height: 10px; border-radius: 5px; background: linear-gradient(90deg, #15355E, #1E5A8A, #2E84B8, #46A8CE, #7FCBDB, #CFE9F0); } .cam-legend-scale { display: flex; justify-content: space-between; font-size: 10px; color: #9BA4B0; margin-top: 4px; font-feature-settings: var(--tnum); } /* перцентильные метки под градиент-баром: позиция = доля ранга; значение+перцентиль */ .cam-legend-ticks { position: relative; height: 28px; margin-top: 3px; font-feature-settings: var(--tnum); } .cam-lg-tick { position: absolute; top: 0; display: flex; flex-direction: column; align-items: center; line-height: 1.05; white-space: nowrap; } .cam-lg-pin { width: 1px; height: 4px; background: rgba(255,255,255,.30); margin-bottom: 2px; } .cam-lg-val { font-size: 10.5px; color: #C7D0DA; font-weight: 600; } .cam-lg-pct { font-size: 8.5px; color: #6B7787; text-decoration: none; margin-top: 1px; } .cam-lg-scaletype { color: #7FB0C2; } .cam-legend-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; } .cam-legend-cap { font: 400 11px var(--sans); color: #9BA4B0; } .cam-nd { display: inline-flex; align-items: center; gap: 6px; font: 400 11px var(--sans); color: #9BA4B0; } /* «нет данных / summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; padding: 7px 0; font: 600 12.5px var(--sans); color: var(--ink-2); border-top: 1px solid var(--hairline); } .rank-bottom > summary::-webkit-details-marker { display: none; } .rank-bottom > summary::before { content: '▸'; color: var(--ink-2); font-size: 10px; } .rank-bottom[open] > summary::before { content: '▾'; } .rank-bottom > summary:hover { color: var(--ink); } .rank-cap { margin: 9px 2px 0; font-size: 10.5px; color: var(--ink-2); opacity: .8; line-height: 1.45; } @media (max-width: 760px) { .seg-presets button { padding: 12px 12px; font-size: 14px; } }