/* * Стили публичной части. Вынесены из шаблона отдельным файлом: * раньше 23 килобайта повторялись в каждой странице, а посетитель * после толчка открывает подряд главную, карточку события и каталог. * Теперь браузер забирает их один раз и держит месяц. */ /* ────────────────────────────────────────────────────────────────────── Шрифт один на весь сайт — Golos Text. Его делали для государственных сервисов, кириллица в нём первична, и для сайта института это точнее антиквы: научная строгость здесь не от засечек, а от порядка в цифрах и заголовках. Раз гарнитура одна, иерархию держим весом и кеглем: заголовок страницы 700, разделы 600, подписи 500, текст 400. Цвет взят у старого сайта, а не придуман заново: #D1DFF7 — та самая голубая заливка шапок таблиц темы DeepBlue, с которой институт прожил двадцать лет, #0143BB — его же акцент. Синий здесь несущий, а не декоративный: полоса означает институт, ссылка — действие, заливка дорожки — силу толчка. Красный на странице ровно один — эпицентр. ────────────────────────────────────────────────────────────────────── */ :root{ --field:#EEF3FA; /* фон страницы — светлее старой шапки, но той же семьи */ --logo:#2A528D; /* цвет плашки логотипа (docs/v4/логотип.svg): подвал и лента самописца */ --band:#D1DFF7; /* заливка старого сайта: шапка, шапки таблиц, подвал */ --paper:#FFFFFF; --ink:#0E2136; /* чернила уходят в синеву, а не в серость */ --ink-soft:#4A6480; --water:#0143BB; /* ссылки и действия */ --deep:#1B4F86; /* графика: дорожки, баллы, маркеры */ --line:#CFDCEF; --chart-axis:#4A6480; /* оси графиков (институт, 23.10.2026, P253) */ --chart-grid:#9FB3CE; /* сетка графиков */ --edge:#A9C2E6; /* граница синих полос */ --epicenter:#C0392F; /* Единственный тёплый цвет в интерфейсе — призыв заполнить анкету. Синяя кнопка на синей странице терялась: вся палитра здесь одной семьи, и выделить действие можно только выходом из неё. Почему не красный. Красный на этом сайте занят и означает эпицентр, а на сайте о землетрясениях он вдобавок читается как тревога — ровно то, чего институт просил избегать. Янтарный зовёт к действию, не пугая. Контраст посчитан: 5.02 с белым текстом (нужно 4.5) и 4.50 с фоном страницы (для элементов управления нужно 3). */ --action:#B45309; --action-deep:#92400E; --shell:min(1080px,100%); /* совместимость со старыми именами в отдельных шаблонах */ --ice:var(--field); --ice-deep:#DCE7F7; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--field);color:var(--ink); font-family:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:17px;line-height:1.55;font-weight:400; } /* Цифры — тем же шрифтом, что и текст, с равной шириной знаков. Моноширинный IBM Plex Mono рисует ноль с точкой, и институт (02.10.2026) просил без неё. */ .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} a{color:var(--water);text-underline-offset:.18em;text-decoration-thickness:1px} a:hover{color:var(--ink)} :focus-visible{outline:2px solid var(--water);outline-offset:2px} .wrap{width:var(--shell);margin:0 auto;padding:0 20px} /* Шапка: институт, а не бренд. Голубая полоса — единственное, что переносится со старого сайта дословно. */ .top{background:var(--band);border-bottom:1px solid var(--edge)} .top .wrap{display:flex;gap:8px 20px;align-items:baseline;flex-wrap:wrap; padding-top:12px;padding-bottom:10px} .top .brand{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit} .top .brand:hover .name{color:var(--water)} .top .logo{flex:none;display:block;width:210px;height:auto;border-radius:3px} @media (max-width:560px){ .top .logo{width:165px} } .top b{font-weight:600;font-size:16px;letter-spacing:-.012em;line-height:1.3} .brand-text{display:block} .brand-text .name{display:block} /* Полное наименование по уставу: в шапке оно есть, но не спорит с названием филиала — им пользуются, а полное читают один раз. */ .brand-text .full{display:block;font-size:11.5px;line-height:1.25; color:var(--ink-soft);max-width:46ch;margin-top:2px} @media (max-width:560px){ .brand-text .full{display:none} } body.a11y .brand-text .full{font-size:inherit;color:inherit;max-width:none} .top .a11y-toggle{margin-left:auto} /* Шесть вкладок (институт, 23.09.2026). Встают в одну строку даже на телефоне шириной 360 — в две. Подразделы раскрываются списком под вкладкой на компьютере; на телефоне наведения нет, и их показывает столбец вверху страницы раздела. */ .top nav.tabs{display:flex;gap:2px 22px;flex-wrap:wrap;align-items:baseline; border-top:1px solid #BFD1EF;padding-top:8px;padding-bottom:9px} .tab{position:relative} .tab-link{display:block;font-size:15.5px;color:var(--ink);text-decoration:none; padding:5px 0 4px;border-bottom:2px solid transparent} .tab-link:hover{color:var(--water);border-bottom-color:var(--edge)} .tab-link[aria-current]{border-bottom-color:var(--deep);font-weight:600} .drop{display:none;position:absolute;left:-14px;top:100%;z-index:1000; min-width:220px;margin:0;padding:8px 0;list-style:none; background:var(--paper);border:1px solid var(--edge);border-radius:4px; box-shadow:0 6px 18px rgba(14,33,54,.12)} .drop a{display:block;padding:6px 14px;font-size:15px;color:var(--ink);text-decoration:none} .drop a:hover,.drop a:focus-visible{background:var(--field);color:var(--water)} @media (hover:hover) and (min-width:700px){ .tab:hover .drop,.tab:focus-within .drop{display:block} } /* Подразделы — столбиком вверху страницы, как на первом сайте: «Внутренние ссылки перечислять столбиком вверху страницы». Текущий пункт выделен и не ссылка. */ .section-nav{margin:0 0 24px} .section-nav ul{margin:0;padding:0 0 0 14px;list-style:none; border-left:3px solid var(--band)} .section-nav li{margin:0;padding:3px 0;font-size:16px;line-height:1.35} .section-nav a{text-decoration:none} .section-nav a:hover{text-decoration:underline} .section-nav span[aria-current]{font-weight:600;color:var(--ink)} /* Оглавление длинных страниц. На старом сайте оно было списком со стрелками-картинками; здесь — простой список без маркеров, потому что каждая строка и так начинается с названия землетрясения и года. */ .toc{margin:18px 0 30px;padding:14px 18px;background:var(--paper); border:1px solid var(--line);border-radius:4px} .toc ul{margin:0;padding:0;list-style:none; columns:2;column-gap:32px} .toc li{margin:0 0 6px;break-inside:avoid} .toc a{text-decoration:none;border-bottom:1px solid transparent} .toc a:hover{border-bottom-color:currentColor} @media (max-width:700px){ .toc ul{columns:1} } body.a11y .toc ul{columns:1} body.a11y .toc a{text-decoration:underline} main{padding:30px 0 64px} h1{font-weight:700;font-size:clamp(24px,3.6vw,30px);line-height:1.13; letter-spacing:-.028em;margin:0 0 8px} h2{font-weight:600;font-size:clamp(19px,2.6vw,22px);line-height:1.25; letter-spacing:-.018em;margin:46px 0 14px} h3{font-size:17px;font-weight:600;margin:26px 0 8px} p{margin:0 0 14px;max-width:none} /* Институт, 21.10.2026 (вопрос 15): абзацы идут на всю ширину таблиц и выровнены по ширине. */ .lead,.utc-note,.freq-note,.territory,.map-note,.zone-note,.jub-body p,.jub-body li{ text-align:justify;hyphens:auto;-webkit-hyphens:auto} /* Лид на карточке события несёт дату и время — это второй по важности ответ после силы толчка, поэтому он не приглушён. На остальных страницах лид остаётся вводным и тише. */ .lead{font-size:18.5px;line-height:1.45;color:var(--ink-soft);margin-bottom:28px} h1 + .lead{color:var(--ink);font-size:19px} .card{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:20px} /* Сводка события. Раньше это была решётка серых щелей и читалась как пустая таблица; теперь одна панель с волосяными перегородками и синей линией сверху — числа стоят на общей полке. */ .facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--deep); border-radius:0 0 4px 4px;overflow:hidden;margin:24px 0} .facts div{padding:15px 18px;border-left:1px solid var(--line)} .facts div:first-child{border-left:0} .facts dt{font-size:13px;color:var(--ink-soft);margin-bottom:4px;line-height:1.3} .facts dd{margin:0;font-size:25px;font-weight:500;line-height:1.15;color:var(--deep)} .facts dd small{font-size:14px;font-weight:400;color:var(--ink-soft)} /* Класс — число, но не крик: институт, 23.09.2026, «класс слишком крупно, уменьшите», а дату и время — крупнее. */ .facts dd.k{font-size:27px;letter-spacing:-.01em} .facts dd.felt{font-size:17px;font-weight:500;line-height:1.35;color:var(--ink)} .facts dd.coords{font-size:18px} /* Дата и время последнего события — главная строка первого экрана. */ .when{margin:6px 0 0;font-size:clamp(23px,3.4vw,30px);font-weight:600; line-height:1.2;color:var(--ink);letter-spacing:-.01em} .when .ago{margin-left:8px;font-size:.6em;font-weight:500;color:var(--ink-soft)} .utc-note{font-size:14.5px;line-height:1.5;color:var(--ink-soft);margin:-8px 0 26px} /* Режимы главной — столбцом над картой, кнопка «во весь экран» справа. */ .mode-row{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:0 0 10px} .mode-row .section-nav{margin:0} .map-full{font:inherit;font-size:14px;padding:6px 14px;cursor:pointer;color:var(--ink); background:var(--paper);border:1px solid var(--edge);border-radius:4px} body.a11y[data-noimg] .map-full{display:none} #map{height:min(58vh,460px);border:1px solid var(--edge);border-radius:4px; background:var(--ice-deep)} /* Leaflet приносит свой Helvetica в подписи, попапы и кнопки зума — на странице с одной гарнитурой это выпадает из набора. */ .leaflet-container,.leaflet-container .leaflet-control{font-family:inherit} .leaflet-popup-content{font-size:14px;line-height:1.5} .leaflet-control-attribution{font-size:11.5px} .map-note{font-size:14px;color:var(--ink-soft);margin-top:9px} .map-caption{font-size:14px;color:var(--ink-soft);align-self:center} /* Коды станций на карте сети — постоянные подписи без рамки. */ .leaflet-tooltip.st-code{background:rgba(255,255,255,.82);border:0;box-shadow:none;padding:0 3px; font:600 11px/1.3 "Golos Text",system-ui,sans-serif;font-variant-numeric:tabular-nums;color:var(--ink)} .leaflet-tooltip.st-code::before{display:none} /* Служебный раздел «***»: две формы входа рядом, как на первом сайте. */ .service-forms{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;max-width:720px} .service-forms h2{margin:0 0 12px;font-size:19px} .service-forms label{display:block;margin-bottom:10px} .service-forms input{width:100%} .service-links{font-size:18px;line-height:1.8} .rrv-lines{padding-left:20px;font-size:15px} /* Колонка «Теоретическая интенсивность»: значок-ссылка на схему изосейст. */ .izo-cell{text-align:center} .izo{display:inline-flex;color:var(--deep);padding:2px} .izo:hover{color:var(--water)} .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .izo-map{margin:18px 0 22px} .izo-map img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px} /* Форма отбора каталога — всегда раскрыта: без отбора таблица пуста. */ .filters-form{margin-bottom:18px} .filters-form .row{display:flex;gap:16px;flex-wrap:wrap;align-items:end} .filters-form .row + .row{margin-top:14px} .found{margin:0;font-size:16px;font-weight:500} .downloads{display:flex;gap:6px 20px;flex-wrap:wrap} .empty-row{text-align:center;padding:18px 10px} /* Заголовок таблицы и ссылка на выгрузку в одну строку. */ .table-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 18px;margin:46px 0 14px} .table-head h2{margin:0} .dl{font-size:15px;white-space:nowrap} .dl::before{content:"↓ ";} /* Ряд кнопок над картой каталога. */ .map-tabs{display:flex;gap:8px;margin-bottom:9px} body.a11y[data-noimg] .map-tabs{display:none} /* Запасной полноэкранный режим для браузеров без Fullscreen API на обычных элементах — Safari на iPhone такой. position — с !important: Leaflet при создании карты пишет #map встроенный style="position:relative" (Map._initLayout), и без !important правило не действовало — карта схлопывалась в полоску (институт, 28.10.2026, №13). top/right/bottom/left вместо inset — для Safari до 14.5. */ #map.map-fullscreen{position:fixed!important;top:0;right:0;bottom:0;left:0;width:auto;height:auto; z-index:1000;border-radius:0;margin:0;border:0} body.map-locked{overflow:hidden} /* Эпицентры повторяют старую карту: красная заливка, тёмный контур. Тень оттуда не перенесена: pic.php рисовал по тёмной картинке-подложке, где она отделяла кружок от фона, а на светлых тайлах контура хватает и без неё. Ссылка на саму библиотеку из атрибуции убрана в скриптах карт (setPrefix): лицензия Leaflet её не требует. Указание OpenStreetMap остаётся — вот его условия тайлов требуют. */ /* Легенда размеров. Диаметр кружка на старой карте задавался классом ступенями, эта шкала перенесена один в один. */ .map-key{display:flex;gap:8px 20px;flex-wrap:wrap;align-items:flex-end; margin-top:12px;font-size:13px;color:var(--ink-soft)} .map-key .k{display:flex;gap:7px;align-items:center} .map-key i{display:block;border-radius:50%;background:#FF0000; border:1.5px solid #111} .map-key .last i{background:#FFE000} /* Где ощущалось — единственное место, где страница позволяет себе голос. Дорожка читается как профиль расстояния: линия от эпицентра до пункта и засечка на конце. Балл растёт кеглем, заливка — насыщенностью. */ .felt{margin:20px 0 0} .felt-row{display:grid;grid-template-columns:minmax(96px,10.5rem) 1fr auto; gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)} .felt-head{padding:0 0 7px;font-size:13px;color:var(--ink-soft); border-bottom:1px solid var(--edge)} .felt-head:hover{background:none} .felt-row:hover{background:var(--paper)} .felt-name{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .felt-track{position:relative;display:block;height:2px;background:var(--ice-deep); margin-bottom:5px} .felt-track i{position:absolute;left:0;top:0;bottom:0;background:var(--deep);opacity:.55} .felt-track i::after{content:"";position:absolute;right:0;top:-4px; width:2px;height:10px;background:var(--deep)} .felt-km{font-size:13px;color:var(--ink-soft);white-space:nowrap} .felt-int{justify-self:end;min-width:3.6rem;text-align:right} .felt-int b{font-weight:500;color:var(--deep);letter-spacing:-.01em;line-height:1.1} /* Таблицы: шапка залита той же голубой, что и в старом каталоге. */ /* Часть данных в заголовке карточки дублирует колонку — на широком экране она не нужна. */ .card-only{display:none} /* Таблицы событий на телефоне разворачиваются в карточки. Шесть колонок в 390 пикселей не помещаются, и самое нужное — класс и строка «где ощущалось» — уезжало за правый край: человек видел только дату и координаты. Подписи колонок берутся из data-label. */ table.data{width:100%;border-collapse:collapse;font-size:15px;background:var(--paper)} /* Правила подачи чисел: единицы измерения стоят в заголовке колонки, а не повторяются в каждой строке; числовые столбцы выключены вправо, чтобы разряды стояли друг под другом; цифры табличные. */ table.data th{text-align:left;font-weight:500;color:var(--ink);font-size:13.5px; background:var(--band);padding:6px 8px;border-bottom:1px solid var(--edge); white-space:nowrap} table.data td.num{text-align:right;font-variant-numeric:tabular-nums} table.data th{vertical-align:bottom} /* Плотные строки и верх ячейки (институт, 14.10.2026: интервалы между строк слишком большие; подписи при длинной «Наблюдённой интенсивности» стояли посередине). */ table.data td{padding:5px 8px;vertical-align:top;line-height:1.3;border-bottom:1px solid var(--line);white-space:nowrap} /* Заголовок числовой колонки выравнивается по своим значениям. */ table.data:not(.st-table) tr:first-child th:nth-child(n+2):not(:last-child){text-align:right} table.data tr:first-child th:last-child{text-align:left} table.data td:last-child{white-space:normal} table.data tr:hover td{background:var(--field)} .scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px} .scroll table.data th:first-child,.scroll table.data td:first-child{padding-left:14px} /* ── Графики ─────────────────────────────────────────────────────────── Всё рисуется инлайновым SVG по тем же данным, что и таблицы рядом: ни одной библиотеки, ни одного запроса. Каждый график сопровождается текстом или таблицей, поэтому без картинки страница не теряет смысла. */ figure.chart{margin:22px 0;padding:0} figure.chart svg{display:block;width:100%;height:auto;overflow:visible} figure.chart img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px} figure.chart figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:9px} /* Институт, 23.10.2026 (P253): оси и сетка бледные — все графики: главная, «Каталог», «Как часто», «Сеть». */ .chart .axis{stroke:var(--chart-axis);stroke-width:1} .chart .tick{fill:var(--ink-soft);font-size:11px;font-variant-numeric:tabular-nums} .chart .bar{fill:var(--deep)} .chart .bar-em{fill:var(--epicenter)} /* Столбики гистограмм красные там, где значение переходит границу, о которой стоит знать: 4 балла на странице пункта (дребезжит посуда) и класс 11 на главной (срочная обработка, сообщение в канал). */ .chart .fit{stroke:var(--ink-soft);stroke-width:1.4;stroke-dasharray:5 4;fill:none} .chart .dot{fill:var(--deep)} .chart .dot-s{fill:none;stroke:var(--deep);stroke-width:1.4} .chart .grid{stroke:var(--chart-grid);stroke-width:1;stroke-dasharray:3 3} .chart .lbl{fill:var(--ink-soft);font-size:12.5px} .chart .tick.em{fill:var(--epicenter)} /* Точечный график сейсмичности: точка — событие; с 12 класса — красным. */ .chart.dots .dot{fill:var(--deep);fill-opacity:.8;stroke:#fff;stroke-width:1} .chart.dots .dot-em{fill:var(--epicenter);stroke:#fff;stroke-width:1} .chart .grid.v{stroke-dasharray:2 4} .chart .empty{font-size:15px} /* Гистограмма по месяцам (сеть станций): 240 столбиков; на узком экране — прокрутка вбок, а не месиво. */ .chart .mean{stroke:var(--epicenter);stroke-width:1.4;stroke-dasharray:6 4} .chart .mean-lbl{fill:var(--ink);font-size:12.5px;paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round} /* Три вида одного ряда (институт, 23.10.2026, P65–P66, P202): на компьютере 1:1 — столбик 3 px, зазор 1 px, по целым пикселям (раньше 940 растягивалось на 1040 и зазор схлопывался); в средней ширине — сплошным контуром без зазоров; на телефоне — отдельный рисунок по ширине экрана, без горизонтальной прокрутки. */ .monthly .m-dense,.monthly .m-compact{display:none} figure.chart.monthly .m-wide{width:1040px;max-width:none;height:auto} figure.chart.monthly .m-wide rect{shape-rendering:crispEdges} @media (max-width:1099px){.monthly .m-wide{display:none}.monthly .m-dense{display:block}} @media (max-width:699px){.monthly .m-dense{display:none}.monthly .m-compact{display:block}} figure.chart.monthly .tick{font-size:11px} figure.chart.monthly .m-compact .tick,figure.chart.monthly .m-compact .mean-lbl,figure.chart.monthly .m-compact .lbl{font-size:12px} figure.chart.monthly .m-compact .lbl{display:inline} figure.chart.monthly figcaption{text-align:left} body.a11y .chart .mean{stroke:var(--ink)} body.a11y .chart .dot-em{fill:var(--ink)} /* Версия для слабовидящих: цвета одинаковые, красные точки (К≥12) отличаем размером; пояснение — в подписи. Радиус — с единицами: Firefox отбрасывает безразмерное r в CSS (брал бы только атрибут r="4.5"). */ body.a11y .chart.dots .dot-em{r:7px} /* Подпись графика: обычная фраза (по цвету) и фраза для слабовидящих (по размеру). */ .cap-a11y{display:none} body.a11y .cap-std{display:none} body.a11y .cap-a11y{display:inline} body.a11y[data-noimg] .cap-a11y{display:none} /* Выбор периода над графиком. */ .period{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 6px;font-size:15px} .period input{font:inherit;font-size:15px;padding:5px 8px;border:1px solid var(--edge);border-radius:4px;background:var(--paper);color:var(--ink)} .period button{font:inherit;font-size:15px;padding:6px 16px;cursor:pointer;color:#fff; background:var(--deep);border:1px solid var(--deep);border-radius:4px} .period button:hover{background:var(--water);border-color:var(--water)} body.a11y .chart .bar,body.a11y .chart .dot{fill:var(--ink)} body.a11y .chart .axis,body.a11y .chart .grid{stroke:var(--ink)} body.a11y .chart .tick,body.a11y .chart .lbl{fill:var(--ink)} body.a11y .chart .fit,body.a11y .chart .dot-s{stroke:var(--ink)} /* Институт, 28.10.2026: в версии для слабовидящих графики и карты нужны. Контрастные цвета — правила выше (body.a11y .chart …). Прячем рисунок только при «Изображения: отключить», а подпись под ним остаётся — в ней те же числа словами. */ body.a11y[data-noimg] figure.chart svg{display:none} body.a11y figure.chart figcaption{margin-top:0} /* Формы: каталог и анкета живут на одних правилах, а не на умолчаниях браузера. */ label{font-size:14px} input[type=text],input[type=date],input[type=number],input[type=datetime-local], select,textarea{font:inherit;font-size:16px;padding:8px 10px;color:var(--ink); background:var(--paper);border:1px solid var(--edge);border-radius:4px} input:hover,select:hover{border-color:var(--deep)} button[type=submit]{font:inherit;font-size:15px;font-weight:500;padding:9px 22px; border:0;border-radius:4px;background:var(--water);color:#fff;cursor:pointer} button[type=submit]:hover{background:var(--deep)} body.a11y button[type=submit]{background:var(--ink);color:var(--paper); border:2px solid currentColor} .muted{color:var(--ink-soft)} .small{font-size:14px} /* Свёрнутый блок отбора. */ details.filters{margin-bottom:22px} details.filters > summary{display:inline-flex;align-items:center;gap:8px; cursor:pointer;font-size:15px;font-weight:500;color:var(--water); padding:9px 0;list-style:none} details.filters > summary::-webkit-details-marker{display:none} details.filters > summary::before{content:"";width:9px;height:9px;flex:none; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(45deg) translate(-2px,-2px)} details.filters[open] > summary::before{transform:rotate(-135deg) translate(-3px,-3px)} details.filters > summary:hover{color:var(--deep)} details.filters .card{margin-top:4px} /* Призыв к анкете стоит рядом с заголовком страницы. До правки он был внизу, куда очевидец не прокручивает: ответ на «что это было» он получает в первом экране и уходит. А его сообщение — единственный источник сведений о том, как толчок проявился на самом деле. Заголовок и кнопка делят строку: кнопка прижата вправо и не растёт, заголовок забирает остальное. На узком экране строка распадается, и кнопка встаёт под заголовком во всю ширину — на телефоне её ищут большим пальцем, а не глазами. */ .head-row{display:flex;gap:16px 28px;align-items:flex-start; flex-wrap:wrap;justify-content:space-between;margin-bottom:10px} .head-main{flex:1 1 22ch;min-width:0} .head-main h1{margin-bottom:6px} .head-main .lead{margin:0} .ask-go{display:inline-block;font-size:16px;font-weight:500;text-decoration:none; padding:10px 22px;border-radius:4px;color:#fff;background:var(--action); border:1px solid var(--action-deep); box-shadow:0 1px 2px rgba(14,33,54,.16)} .ask-go:hover{background:var(--action-deep);border-color:var(--action-deep);color:#fff} /* Кнопка у заголовка двухстрочная: вопрос и действие. Вопрос делает её понятной тому, кто не знает слова «макросейсмика», действие — тому, кто знает и ищет глазами «анкету». */ .ask-head{flex:0 0 auto;align-self:center;padding:12px 24px;line-height:1.25} .ask-head b{display:block;font-size:17px;font-weight:600} .ask-head span{display:block;font-size:14.5px} @media (max-width:620px){ .head-row{gap:14px} .ask-head{flex:1 1 100%;text-align:center;align-self:stretch} } body.a11y .ask-go{background:var(--paper);color:var(--ink); border:2px solid currentColor;text-decoration:underline} /* Наблюдённая интенсивность: короткая строка вида «Иркутск 2-3б», и она — главный ответ на вопрос «где тряхнуло». */ .felt-observed{font-size:19px;font-weight:500;margin:0 0 6px} /* Блок «возьмите карту себе». Не залит цветом, как призыв к анкете: тот обращён к очевидцу, а этот — к редакции, и спорить за внимание на одной странице им незачем. */ /* Синяя полоса слева осталась ровно у одного элемента — у записи месяца. Здесь её нет намеренно: блок обращён к редакциям, спорить за внимание с картой и анкетой ему незачем. */ .take{display:flex;gap:18px;align-items:center;flex-wrap:wrap; justify-content:space-between;margin:22px 0 8px;padding:14px 18px; background:var(--paper);border:1px solid var(--line);border-radius:4px} .take b{display:block;font-size:16px;margin-bottom:4px} .take p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:62ch} .take-go{flex:none;font-size:15px;font-weight:500;text-decoration:none; padding:8px 16px;border-radius:4px;color:var(--water); border:1px solid var(--edge);background:var(--field)} .take-go:hover{background:var(--water);border-color:var(--water);color:#fff} body.a11y .take-go{background:var(--paper);color:var(--ink); border:2px solid currentColor;text-decoration:underline} body.a11y .take{border-left:3px solid currentColor} .warn{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--epicenter); padding:12px 16px;border-radius:0 4px 4px 0;font-size:15px} /* Перенесённый научный текст: старая вёрстка была таблицами и , поэтому задаём разумные умолчания, а не полагаемся на разметку. */ .prose{max-width:none} /* Заготовки рубрик публикаций: пустой пункт списка — место для записи в редакторе, на странице его не видно. */ .prose li:empty{display:none} .ask-top{margin:6px 0 24px} .prose p{margin:0 0 15px} .prose h2{font-size:22px;margin:34px 0 12px;letter-spacing:-.015em} /* Синий подзаголовок «ГОСТ Р 57546–2017…» на странице шкалы (институт, 11.11.2026): у h2 своего цвета нет, прежний «ШКАЛА … MSK-64» синий лишь потому, что обёрнут в якорь, а a{color} красит и якорь без href. */ .prose h2.h-blue{color:var(--water)} .prose h3,.prose h4{font-size:17.5px;margin:26px 0 8px;font-weight:600} .prose img{max-width:100%;height:auto;border-radius:3px;margin:10px 0} .prose table{border-collapse:collapse;margin:16px 0;font-size:15px; display:block;overflow-x:auto;max-width:100%;background:var(--paper)} .prose td,.prose th{border:1px solid var(--line);padding:6px 10px;vertical-align:top} .prose th{background:var(--band)} .prose ul,.prose ol{padding-left:1.3em;margin:0 0 15px} .prose li{margin-bottom:5px} .prose a[href$=".pdf"]::after{content:" (PDF)";color:var(--ink-soft);font-size:.85em} /* Лента самописца, замыкающая страницу. Единственная линия на сайте, которая ничего не измеряет, — поэтому у неё нет ни осей, ни подписей. */ .tape{display:block;width:100%;height:28px;background:var(--logo);border-top:0} .tape path{fill:none;stroke:#fff;stroke-width:1.3;opacity:.85} body.a11y .tape{display:none} footer{background:var(--logo);padding:22px 0 24px;font-size:14px;color:#fff} footer a{color:#fff;text-decoration:underline} footer .wrap{display:flex;gap:8px 20px;flex-wrap:wrap} body.a11y footer{border-top:2px solid currentColor} @media (max-width:820px){ /* Подписи внутри SVG сжимаются вместе с viewBox: на телефоне 11 единиц превращаются в четыре пикселя. Тики укрупняем, названия осей убираем — их роль берёт на себя подпись под рисунком. */ .chart .tick{font-size:19px} .chart .tick.thin{display:none} /* делений на узком экране вдвое меньше */ .chart .lbl{display:none} .chart .dot,.chart .dot-s{r:6px} .chart .dot-em{r:6px} body.a11y .chart.dots .dot-em{r:8.5px} } @media (max-width:640px){ table.cards, table.cards tbody, table.cards tr, table.cards td{display:block;width:auto} table.cards thead, table.cards tr.head{display:none} table.cards tr{background:var(--paper);border:1px solid var(--line); border-radius:4px;padding:11px 13px;margin-bottom:9px} table.cards td{border:0;padding:3px 0;white-space:normal; display:flex;gap:12px;align-items:baseline;justify-content:space-between} table.cards td.num{text-align:right} table.cards td::before{content:attr(data-label);flex:none; font-size:13px;color:var(--ink-soft)} table.cards td:empty{display:none} table.cards td[data-label=""]{display:block} /* Первая ячейка — заголовок карточки: дата события крупнее и без подписи */ table.cards td:first-child{display:block;font-size:16px;padding-bottom:6px; margin-bottom:5px;border-bottom:1px solid var(--line)} table.cards td:first-child::before{display:none} /* Дата — единственная ссылка в карточке, и по ней переходят пальцем: растягиваем её на всю ширину и добавляем высоту до нормы касания. */ table.cards td:first-child a{display:block;padding:9px 0 11px;margin:-9px 0 -5px} .scroll.cards-wrap{border:0;overflow:visible} table.cards .card-only{display:inline} table.cards td:first-child a .card-only::before{content:", "} /* На телефоне в карточке остаётся то, за чем сюда приходят: когда, насколько сильно и где. Координаты — во всех таблицах: главная, «Каталог», автообработка, «Сеть» (институт, 21.10 и 23.10.2026, P252: нужны и на телефоне). Скрыты магнитуда, латиница, код. */ table.cards td[data-label="Магнитуда"], table.cards td[data-label="Латиницей"], table.cards td[data-label="Код"], table.cards td[data-label="Время, UTC"]{display:none} /* «Каталог»: времени нет в первой ячейке (у главной и автообработки оно продублировано как card-only), без этой строки на телефоне времени события не видно вовсе. */ table.cards.fit-cols td[data-label="Время, UTC"]{display:flex} } @media (max-width:560px){ body{font-size:16px} main{padding-top:18px} h2{margin-top:36px} p{margin-bottom:12px} .lead{font-size:17.5px;margin-bottom:20px} .felt-row{grid-template-columns:minmax(80px,8rem) 1fr auto} .facts{grid-template-columns:repeat(2,1fr);margin:20px 0} .facts div{padding:12px 14px} .facts div:nth-child(odd){border-left:0} .facts div:nth-child(n+3){border-top:1px solid var(--line)} /* Класс события — во всю ширину и крупно: это ответ на вопрос, с которым человек и открыл сайт. */ .facts div:first-child{grid-column:1 / -1;border-bottom:1px solid var(--line)} .facts div:first-child dd{font-size:28px} .facts div:nth-child(2),.facts div:nth-child(3){border-top:0} .take{padding:13px 15px;gap:12px} .take-go{width:100%;text-align:center} .ask{padding:14px 15px;margin:26px 0} #map{height:min(52vh,360px)} .map-key{gap:6px 14px;font-size:12.5px} .top .wrap{padding-bottom:6px} .top b{font-size:15px} .top nav.tabs{width:100%;gap:0 16px;padding-top:7px} .tab-link{font-size:15px} } /* ── Версия для слабовидящих (ГОСТ Р 52872-2019) ─────────────────────── Три размера шрифта, три цветовые схемы, отключение изображений. Реализовано подменой тех же переменных, что и в обычной версии, чтобы не держать вторую копию всех правил. */ body.a11y{--line:currentColor;--edge:currentColor} body.a11y .top,body.a11y footer,body.a11y .card,body.a11y .facts, body.a11y table.data,body.a11y table.data th{background:var(--paper)} body.a11y a,body.a11y .tab-link{color:var(--ink);text-decoration:underline} /* Карта в версии для слабовидящих (институт, 28.10.2026, №5): у Leaflet своя светлая подложка у кнопок «+/−», окошка и подписи — ссылки там всегда тёмные, иначе при «Белым по чёрному» белое выходит по белому. */ body.a11y .leaflet-bar a,body.a11y .leaflet-popup-content a,body.a11y .leaflet-control-attribution a{color:#000} body.a11y .leaflet-bar a{text-decoration:none} body.a11y .section-nav ul{border-left-color:var(--ink)} body.a11y .muted,body.a11y .lead,body.a11y .small,body.a11y .facts dd, body.a11y table.data th,body.a11y .felt-km,body.a11y .facts dt, body.a11y .felt-int b,body.a11y footer{color:var(--ink)} body.a11y .facts{border-top-color:var(--ink)} body.a11y .felt-track i,body.a11y .felt-track i::after{background:var(--ink);opacity:1} body.a11y .felt-track{background:transparent;border-top:1px solid var(--ink);height:0} body.a11y .felt-row:hover,body.a11y table.data tr:hover td{background:transparent} body.a11y[data-noimg] #map{display:none} /* Раскрывающийся список под вкладкой здесь ничего не прячет: всё, что в нём есть, повторяет столбец подразделов вверху страницы. */ body.a11y details.filters > summary{color:var(--ink)} body.a11y[data-noimg] .map-note::before{content:"Изображения отключены — карта не показывается. ";} /* Легенда размеров бессмысленна там, где карты нет (изображения отключены). */ body.a11y[data-noimg] .map-legend{display:none} body.a11y[data-scheme="bw"] {--paper:#fff;--field:#fff;--band:#fff;--ice-deep:#fff;--ink:#000;--ink-soft:#000;--water:#000;--deep:#000;--epicenter:#000} body.a11y[data-scheme="wb"] {--paper:#000;--field:#000;--band:#000;--ice-deep:#000;--ink:#fff;--ink-soft:#fff;--water:#fff;--deep:#fff;--epicenter:#fff} body.a11y[data-scheme="bb"] {--paper:#9DD1FF;--field:#9DD1FF;--band:#9DD1FF;--ice-deep:#9DD1FF;--ink:#063462;--ink-soft:#063462;--water:#063462;--deep:#063462;--epicenter:#063462} body.a11y[data-size="m"]{font-size:22px} body.a11y[data-size="l"]{font-size:28px} /* Кегль в этой версии задаёт только переключатель размера. Собственные размеры в пикселях его не слышали: «крупный шрифт» менял один body, а заголовки, таблицы, меню и подписи оставались прежними — переключатель почти ничего не делал. Поэтому здесь всё пересчитано долями от базового кегля: иерархия та же, что в обычной версии, но растёт вместе с выбором посетителя. */ body.a11y h1{font-size:clamp(1.7em,5.2vw,2.35em)} body.a11y h2{font-size:clamp(1.2em,3vw,1.47em)} body.a11y h3{font-size:1em} body.a11y .lead{font-size:1.09em} body.a11y h1 + .lead{font-size:1.12em} body.a11y .section-nav li{font-size:.94em} body.a11y .facts dt{font-size:.76em} body.a11y .facts dd{font-size:1.47em} body.a11y .facts div:first-child dd{font-size:1.6em} body.a11y .when{font-size:1.5em} body.a11y .utc-note{color:var(--ink)} body.a11y .facts dd small{font-size:.56em} body.a11y .map-note{font-size:.82em} body.a11y .map-key,body.a11y .felt-head,body.a11y .felt-km{font-size:.76em} body.a11y .felt-name{font-size:.91em} body.a11y table.data{font-size:.88em} body.a11y table.data th{font-size:.9em} body.a11y table.cards td::before{font-size:.86em} body.a11y table.cards td:first-child{font-size:1.07em} body.a11y figure.chart figcaption{font-size:.79em} body.a11y label,body.a11y .small,body.a11y footer, body.a11y .a11y-toggle{font-size:.82em} body.a11y input,body.a11y select,body.a11y textarea{font-size:.94em} body.a11y button[type=submit],body.a11y details.filters > summary, body.a11y .take-go,body.a11y .warn{font-size:.88em} body.a11y .take b{font-size:.94em} body.a11y .take p{font-size:.85em} body.a11y .prose h2{font-size:1.29em} body.a11y .prose h3,body.a11y .prose h4{font-size:1.03em} body.a11y .prose table{font-size:.88em} body.a11y .top b{font-size:.94em} body.a11y .tab-link{font-size:.91em} body.a11y .a11y-bar{font-size:.94em} /* На крупном кегле длинные слова научного текста («сейсмометрических», «представительности») шире экрана телефона — разрешаем перенос, иначе вся страница уезжает вбок. Свойство наследуемое, поэтому одного правила на body хватает. */ body.a11y{overflow-wrap:break-word} body.a11y[data-noimg] img{display:none} body.a11y[data-noimg] .prose img{display:none} .a11y-bar{display:none;border-bottom:2px solid currentColor;background:var(--paper); padding:10px 0;font-size:16px} body.a11y .a11y-bar{display:block} .a11y-bar .wrap{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center} /* Кнопки схем длинные («Чёрным по белому»), и в один ряд на телефоне они не влезали — панель настроек уезжала за край с боковой прокруткой. На крупном кегле тем более. Разрешаем переносить. */ .a11y-bar fieldset{border:0;margin:0;padding:0;display:flex;gap:8px; align-items:center;flex-wrap:wrap} .a11y-bar legend{float:left;margin-right:8px;padding:0} .a11y-bar button{font:inherit;background:var(--paper);color:var(--ink); border:2px solid currentColor;border-radius:3px;padding:4px 12px;cursor:pointer;line-height:1.2} .a11y-bar button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .a11y-toggle{font:inherit;font-size:14px;background:none;border:0;padding:0; color:var(--ink-soft);text-decoration:underline;cursor:pointer} .a11y-toggle:hover{color:var(--water)} .skip{position:absolute;left:-9999px} .skip:focus{position:static;display:inline-block;padding:8px 14px;background:var(--paper)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} /* === otvety-3: isoseist map === */ #izo-map{height:min(68vh,560px);border:1px solid var(--edge);border-radius:4px; background:var(--ice-deep);margin:12px 0} .izo-head{margin:0 0 4px;color:var(--ink-soft);font-size:15px} .izo-legend{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap; gap:6px 20px;font-size:14px;color:var(--ink-soft)} .izo-legend li{display:flex;align-items:center;gap:7px} .izo-legend i{display:block;width:14px;height:14px;border-radius:50%;border:1.5px solid #333} /* === /otvety-3: isoseist map === */ /* === otvety-3: главная, кнопки режимов, подписка === */ .modes{display:flex;flex-wrap:wrap;gap:10px} .mode-btn{display:inline-flex;flex-direction:column;align-items:center;justify-content:center; min-width:128px;padding:9px 18px;border:1px solid var(--edge);border-radius:6px;background:var(--paper); color:var(--water);font-size:16px;font-weight:500;line-height:1.2;text-decoration:none} .mode-btn small{display:block;margin-top:2px;font-size:12.5px;font-weight:400;color:var(--ink-soft)} .mode-btn:hover{border-color:var(--water)} .mode-btn[aria-current="page"]{background:var(--band);border-color:var(--deep);color:var(--ink);cursor:default} .facts dd.where{margin-top:5px;font-size:13px;font-weight:400;color:var(--ink-soft);line-height:1.3} .act-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:0 0 14px} .share{font:inherit;font-size:15px;padding:6px 16px;cursor:pointer;color:var(--water); background:var(--paper);border:1px solid var(--edge);border-radius:4px} .share:hover{border-color:var(--water)} .share[hidden]{display:none} .upd{font-size:13px;color:var(--ink-soft)} .subscribe{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin:18px 0;padding:16px 20px; background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--deep)} .subscribe b{display:block;font-size:16px;margin-bottom:4px} .subscribe p{margin:0;font-size:14.5px;color:var(--ink-soft);max-width:62ch} .subscribe-go{flex:none;font-size:15px;font-weight:500;text-decoration:none;padding:9px 18px; color:#fff;background:var(--water);border-radius:4px} .subscribe-go:hover{background:var(--deep);color:#fff} @media (max-width:640px){ .mode-btn{flex:1 1 30%;min-width:0;padding:8px 6px;font-size:14.5px} .subscribe-go{flex:1 1 100%;text-align:center} } /* === otvety-3: text pages === */ /* Единый вид текстовых страниц (Сеть, Сейсмичность, История и др.): выравнивание, заголовки, подписи к рисункам, таблицы. Область — только .prose, остальной сайт не затрагивается. */ .prose p,.prose li,.prose ol,.prose ul,.prose dd,.prose blockquote{text-align:justify;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word} /* Институт, 23.10.2026 (P259, P51: «не по всем разделам»). Шкала MSK-64: описания баллов лежат прямо в
    без
  1. и россыпью текста между и
      — выравниваем и саму страницу. Таблиц на ней нет. Вне .prose: абзацы прямо в колонке (СМИ, анкета, изосейсты, «Каталог»), «Что делать» на главной, юбилей, биографии на «Истории». */ .prose[data-page$="shkala-msk-64"]{text-align:justify;hyphens:auto;-webkit-hyphens:auto} .wrap>p,.take p,.jub-lead p,.jub-authors{text-align:justify;hyphens:auto;-webkit-hyphens:auto} .prose h2,.prose h3,.prose h4,.prose caption,.prose figcaption{text-align:left;hyphens:manual} .prose h2{font-size:22px;line-height:1.25;margin:34px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--line)} /* Институт, 23.10.2026 (P255): на «Сильных» большие отступы. Лишние
      убирает PageText::tidy (D1); здесь — остаток: отступ над заголовком 34 → 24 px и картинка-карта без «строчного» зазора под собой (было 49 px от карты до заголовка, стало 24). */ .prose[data-page="seysmichnost/silnye-zemletryaseniya"] h2{margin-top:24px} .prose[data-page="seysmichnost/silnye-zemletryaseniya"] p>img:only-child{display:block;margin:0 auto} .prose h3{font-size:18px;line-height:1.3;margin:22px 0 8px;font-weight:700;color:var(--ink)} .prose h4{font-size:16.5px;line-height:1.3;margin:22px 0 8px;font-weight:600;color:var(--ink-soft)} .prose>h2:first-child,.prose>h3:first-child{margin-top:0} /* Подписи к рисункам: figcaption, а в старой вёрстке — центрированный абзац под картинкой («Рис. 1. …»). */ .prose figure{margin:18px 0;text-align:center} .prose figure img{margin:0 auto} .prose figcaption,.prose .caption,.prose p[align=center],.prose center{ font-size:14px;line-height:1.4;color:var(--ink-soft);text-align:center;hyphens:manual} .prose p[align=center] img,.prose center img{display:inline-block} .prose img{max-width:100%;height:auto} /* Таблицы — как table.data: обёртка с прокруткой делается при показе страницы (PageText::wrapTables), широкая таблица не обрезается. */ .prose .scroll{margin:16px 0;background:var(--paper);-webkit-overflow-scrolling:touch} .prose .scroll table{display:table;margin:0;width:100%;border:0} .prose table{border-collapse:collapse;font-size:15px} .prose th,.prose td{text-align:left;hyphens:manual;padding:5px 8px;line-height:1.3;vertical-align:top; border:0;border-bottom:1px solid var(--line)} .prose th{background:var(--band);font-weight:500;font-size:13.5px;vertical-align:bottom} .prose tr:hover td{background:var(--field)} .prose td p,.prose td li{text-align:left;margin:0} @media (max-width:620px){ /* Телефон: таблица ужимается до ширины экрана — институт жаловался, что таблицы «Сильных» открываются неполными и их приходится листать бегунком. Прокрутка остаётся только для таблиц, которые иначе не помещаются. Таблицы-фотогалереи (фото с подписью в ячейках) встают в столбик. */ .prose .scroll table{min-width:0;font-size:13px} /* Числа, даты и время («104.07», «1:35:31») не рвутся посередине: класс nw ставит PageText::tidy. */ .prose .scroll td,.prose .scroll th{padding:4px 5px;overflow-wrap:break-word} .prose .scroll td p,.prose .scroll th p{margin:0;font-size:inherit;overflow-wrap:break-word;hyphens:manual} .prose td.nw{white-space:nowrap;overflow-wrap:normal} .prose table.with-img,.prose table.with-img tbody,.prose table.with-img tr, .prose table.with-img td{display:block;width:auto;border:0} .prose table.with-img td{text-align:center;padding:4px 0} } /* «История»: портреты учёных крупнее миниатюр старой вёрстки. Размеры из разметки сняты (pages:polish и PageText::relaxSizes), размер — здесь. */ .prose[data-page*="istori"] img{display:inline-block;min-width:160px;width:auto;max-width:100%; height:auto;margin:6px 14px 6px 0;border-radius:4px;vertical-align:top} .prose[data-page*="istori"] .scroll{border:0} @media (max-width:620px){ .prose[data-page*="istori"] img{display:block;width:100%;min-width:0;max-width:320px;margin:8px 0} /* Портрет в ячейке таблицы на телефоне уходит над текстом, а не в нулевую ширину колонки. */ .prose[data-page*="istori"] .scroll table{min-width:0} .prose[data-page*="istori"] table,.prose[data-page*="istori"] tbody, .prose[data-page*="istori"] tr,.prose[data-page*="istori"] td{display:block;width:auto;border:0} } /* «Публикации»: рубрикатор год → тип → ссылки на
      , без скриптов. */ .prose details.pub-year{border-bottom:1px solid var(--line);margin:0} .prose details.pub-year>summary{font-size:19px;font-weight:600} .prose details.pub-type{margin:0 0 4px 14px} .prose details.pub-type>summary{font-size:16px;font-weight:500;color:var(--ink)} .prose details>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px; min-height:44px;padding:8px 4px;border-radius:4px;text-align:left} .prose details>summary::-webkit-details-marker{display:none} .prose details>summary::before{content:"";flex:none;width:8px;height:8px; border-right:2px solid currentColor;border-bottom:2px solid currentColor; transform:rotate(-45deg);transition:transform .15s} .prose details[open]>summary::before{transform:rotate(45deg)} .prose details>summary:hover{background:var(--field)} .prose details>summary:focus-visible{outline:3px solid var(--deep);outline-offset:2px} .prose details>ul,.prose details>ol{margin:2px 0 14px} .prose details>ul:empty{display:none} @media (prefers-reduced-motion:reduce){.prose details>summary::before{transition:none}} /* === /otvety-3: text pages === */ /* === otvety-3: карта станций === */ @media (min-width:700px){ #map.map-stations{height:min(620px,72vh)} } /* Главная: выше, чтобы кадр с рамкой зоны целиком брал следующий масштаб (мельче подписи читаются хуже). */ /* Институт, 23.10.2026 (P43, P115, P250): зоне 48–60° с.ш. на масштабе 5 с отступами 28 px нужно ≈ 525 px высоты. При 80vh < 525 (ноутбук 1280×720) Leaflet брал масштаб 4, и рамка зоны уходила в центр кадра. Главная и «Каталог» — одной высоты. */ @media (min-width:700px){ #map.map-home:not(.map-fullscreen),#map.map-catalog:not(.map-fullscreen){height:clamp(530px,80vh,560px)} } /* === otvety-3: длинный перечень пунктов в «Наблюдённой интенсивности» === У сильных событий в клетку попадают десятки населённых пунктов; при nowrap таблица «С начала года» раздувалась до 3 700 px. */ table.data td.felt-cell{white-space:normal;min-width:13rem;max-width:34rem;line-height:1.35} table.data tr:first-child th.r{text-align:right} main a{overflow-wrap:break-word} table.data td.num.l{text-align:left} table.how-strong tr:first-child th{text-align:left!important} /* === otvety-3: «Ссылки» карточками === */ ul.link-cards{list-style:none;margin:20px 0;padding:0;display:grid;gap:12px; grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .link-cards li{margin:0} .link-cards a{display:flex;align-items:center;gap:16px;height:100%;padding:14px 16px; background:var(--paper);border:1px solid var(--line);border-radius:6px;text-decoration:none;color:var(--ink)} .link-cards a:hover{border-color:var(--water);box-shadow:0 1px 6px rgba(1,67,187,.12)} .lc-logo{flex:none;width:76px;height:76px;display:flex;align-items:center;justify-content:center} .lc-logo img{max-width:76px;max-height:76px;width:auto;height:auto;object-fit:contain} /* Широкий логотип (вектор .svg, институт, 11.11.2026: ИФЗ РАН, 212×46): в квадрате 76 px он был бы мелким. */ .lc-logo--wide{width:132px} .lc-logo--wide img{max-width:132px} .lc-text{display:flex;flex-direction:column;gap:3px;min-width:0} .lc-text b{font-weight:500;font-size:16px;line-height:1.3} .lc-text small{font-size:13px;color:var(--water);overflow-wrap:anywhere} @media (max-width:640px){ ul.link-cards{grid-template-columns:1fr} .lc-logo{width:84px;height:84px}.lc-logo img{max-width:84px;max-height:84px} .lc-logo--wide{width:108px}.lc-logo--wide img{max-width:108px} } /* === otvety-3: портреты в «Истории» === */ .prose .person{display:flex;gap:20px;align-items:flex-start;margin:22px 0;padding:16px; background:var(--paper);border:1px solid var(--line);border-radius:6px} .prose .person img{flex:none;width:170px;height:auto;margin:0;border-radius:3px} .prose .person-text{font-size:15.5px;line-height:1.5;min-width:0;text-align:justify;hyphens:auto;-webkit-hyphens:auto} @media (max-width:560px){ .prose .person{flex-direction:column;align-items:center;text-align:center} .prose .person img{width:min(240px,70%)} .prose .person-text{text-align:left} } /* заголовок и текст страницы — одной ширины */ .prose h2,.prose h3,.prose h4{max-width:100%} .prose>*{max-width:100%} /* === otvety-3: ряд режимов на телефоне — кнопки на всю ширину, «Во весь экран» ниже === */ @media (max-width:640px){ .mode-row{flex-direction:column;align-items:stretch;gap:10px} .mode-row .modes{flex-wrap:nowrap} .mode-row .mode-btn{flex:1 1 0;font-size:14px;padding:8px 4px} .mode-row .map-full{align-self:flex-end} } /* Выравнивание по ширине — и на телефоне, с переносами (институт, 14.10.2026: «на телефоне раздел «Сильные» — текст не выровнен по ширине»; отменяет решение 3-го круга: «реки» гасятся hyphens:auto + lang=ru). */ /* таблицы с текстовыми столбцами (справочники): всё слева */ table.data.txt tr:first-child th{text-align:left!important} table.data.txt td,table.data.txt td.num{text-align:left} /* «Seismic station» — текстовый столбец, заголовок слева (институт: «убежала») */ table.data tr:first-child th.th-text{text-align:left} .page-updated{margin:28px 0 0;font-size:13px;color:var(--ink-soft)} /* «Как часто» на телефоне: текстовые клетки переносятся, таблица — в ширину экрана */ @media (max-width:640px){ table.data.fit td,table.data.fit th{white-space:normal;padding:7px 8px} } /* Каталог: столбцы по ширине текста, а не на всю страницу (институт, 21.10.2026, вопрос 17). Карточки на телефоне остаются как были. */ @media (min-width:641px){ .scroll.fit-wrap{display:inline-block;max-width:100%} table.data.fit-cols{width:auto} } /* Автообработка: схема слева, бюллетень справа, как на прежнем AutoBykl.html */ .auto-grid{display:grid;gap:8px 28px;margin:6px 0 18px} .auto-pre{margin:0;overflow-x:auto;font-size:12px;line-height:1.25} @media (min-width:900px){ .auto-grid{grid-template-columns:minmax(260px,340px) minmax(0,1fr);align-items:start} } /* === четвёртый круг: таблицы и типографика === */ .nowrap{white-space:nowrap} .prose td.nw{white-space:nowrap} /* Таблицы станций: «Сейсмическая станция», «Seismic station», «Код» — слева, остальное — по центру, и в шапке, и в теле (институт, 14.10.2026). Явные классы, а не порядок столбцов: прежнее правило по nth-child перебивало заголовок «Seismic station» и уводило его вправо. */ table.data.st-table tr:first-child th.l,table.data.st-table td.l,table.data.st-table td.num.l{text-align:left} table.data.st-table tr:first-child th.c,table.data.st-table td.c,table.data.st-table td.num.c{text-align:center} table.data.st-table td[data-label="Seismic station"]{color:var(--ink-soft)} /* «Вверх» в «Сильных землетрясениях»: вправо и не занимает строку (PageText::tidy) */ .prose p.to-top{float:right;margin:-6px 0 0 10px;line-height:0;text-align:right;max-width:none} .prose p.to-top img{width:20px;height:auto;margin:0} /* «Вверх» в самом низу «125 лет…» и «Каталога», справа (институт, 11.11.2026). Ссылка — блок не меньше 44 px, чтобы попасть пальцем: у строчной ссылки при line-height:0 поля не работают. */ /* p.to-top-end, а не просто класс: правило .wrap>p выше выравнивает абзацы по ширине. */ p.to-top-end{margin:18px 0 0;text-align:right;line-height:0} .to-top-end a{display:inline-block;box-sizing:border-box;min-width:44px;min-height:44px;padding:10px; text-align:center;line-height:0;vertical-align:bottom} .to-top-end img{width:20px;height:auto;margin:0;border-radius:0;vertical-align:middle} /* Версия для слабовидящих без картинок: вместо скрытого значка — слово «Наверх». */ .to-top-text{display:none} body.a11y[data-noimg] .to-top-text{display:inline;font-size:16px;line-height:1.3} body.a11y[data-noimg] .to-top-end a{padding:10px 12px} /* «Каталог» на ширине от 641 px: таблица узкая (inline-block), поэтому кнопка встаёт в ту же строку справа от её нижнего края, а не уезжает к правому краю колонки. На телефоне (карточки) — блок справа под ними. */ @media (min-width:641px){ .scroll.fit-wrap{vertical-align:bottom} .fit-wrap + .to-top-end{display:inline-block;vertical-align:bottom;margin:0 0 0 8px} } /* Рисунок во всю ширину колонки с подписью, как у остальных (гистограмма по месяцам) */ .prose figure.wide{margin:18px 0} .prose figure.wide img{display:block;width:100%;height:auto;margin:0 auto} /* Карта эпицентров 1900–1949 той же ширины, что 1950–2025 (740 px), по центру колонки (институт, 9-й круг) */ .prose figure.map-740{max-width:740px;margin:18px auto} .prose figure.map-740 img{display:block;width:100%;height:auto;margin:0 auto} /* === контент (фаза 6) === */ /* Шапка: баннер филиала на всю ширину (четвёртый круг). Поля по бокам залиты цветом плашки, поэтому на широком экране баннер стоит по центру без шва, а высота не растёт: шире 1080 px он не становится. */ .top .banner{background:#2A528D} .top .banner .brand{display:block;max-width:1080px;margin:0 auto;line-height:0} .top .banner img{display:block;width:100%;height:auto} @media (max-width:759px){ .top .banner .brand{max-width:560px} } /* Текстовое название — только когда в версии для слабовидящих отключены изображения */ .top .brand-plain{display:none;width:var(--shell);margin:0 auto;padding:10px 20px 0; text-decoration:none;color:inherit} body.a11y[data-noimg] .top .banner{display:none} body.a11y[data-noimg] .top .brand-plain{display:block} .top .brand-plain .name{display:block} .top .brand-plain .full{display:block;font-size:.85em;line-height:1.3;margin-top:2px} .top nav.tabs .a11y-toggle{margin-left:auto;align-self:center} /* Памятка карточками: «До · Во время · После», под ними четыре места (2×2) */ .memo{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:6px 0 34px} .memo-card{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--deep); border-radius:4px;padding:16px 18px 14px;text-align:left} .memo-card .memo-ico{display:block;color:var(--deep);margin:0 0 6px} .memo-card h2,.memo-card h3{margin:0 0 8px;font-size:19px;line-height:1.25;letter-spacing:-.01em} .memo-card ul{margin:0;padding:0 0 0 1.15em} .memo-card li{margin:0 0 .45em;font-size:15.5px;line-height:1.45} .memo-card li:last-child{margin-bottom:0} .memo-during{background:var(--ice-deep)} .memo-rule{margin:0 0 12px;font-size:17px;font-weight:600;line-height:1.35} .memo-jump-label{margin:0 0 6px;font-size:15px;color:var(--ink-soft)} .memo-jump{list-style:none;padding:0!important} .memo-jump li{margin:0 0 .35em;font-size:16px} .memo-places{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;order:1} .memo-after{order:2} .memo-place{border-top-color:var(--edge)} .memo-place .memo-ico{width:34px;height:34px} .memo-kicker{display:block;font-size:12.5px;font-weight:500;letter-spacing:.02em; text-transform:uppercase;color:var(--ink-soft);margin-bottom:2px} .memo-full{margin:6px 0 14px;font-size:21px} @media (min-width:640px){ .memo-places{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (min-width:1000px){ .memo{grid-template-columns:repeat(3,minmax(0,1fr))} .memo-places{grid-column:1/-1;order:0} .memo-after{order:0} } /* === анкета и каналы (фаза 7) === */ .anketa-draft-note{margin:14px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-soft);max-width:52rem} .anketa .link-btn{display:inline;padding:0;margin-left:6px;border:0;border-radius:0;background:none; font:inherit;font-size:13.5px;color:var(--water);text-decoration:underline;cursor:pointer} .anketa .link-btn:hover{background:none;color:var(--ink)} /* «Определить моё местоположение» на форме анкеты */ .anketa .geo{margin:0 0 20px;padding:12px 14px;border:1px dashed var(--line);border-radius:4px;max-width:44rem} .anketa .geo-head{margin:0 0 6px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px} .anketa .geo .hint{display:block;margin:0 0 8px} .anketa .geo-btn{font-size:15px;padding:8px 16px;background:var(--paper);color:var(--water);border:1px solid var(--water)} .anketa .geo-btn:hover{background:var(--water);color:#fff} .anketa .geo-btn.is-off{color:var(--ink-soft);border-color:var(--line)} .anketa .geo-btn.is-off:hover{background:var(--paper);color:var(--ink-soft)} .anketa .geo-btn:disabled{opacity:.6;cursor:progress} .anketa .geo-status{margin:0 0 8px;min-height:1.2em;font-size:14px;color:var(--ink)} .anketa .geo-status.warn{color:var(--epicenter)} .geo-map{height:320px;max-width:44rem;margin:0 0 8px;border:1px solid var(--line);border-radius:4px} @media (max-width:640px){.geo-map{height:260px}} /* маркер, который можно сдвинуть: капля без графики, острием в точку */ .geo-pin span{display:block;width:22px;height:22px;margin:2px;border-radius:50% 50% 50% 0;transform:rotate(-45deg); background:var(--epicenter);border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.45);cursor:grab} .geo-tip.leaflet-tooltip{font-size:12px;padding:2px 6px;color:var(--ink)} /* две кнопки подписки (Telegram и MAX) — только когда канал MAX включён */ .subscribe-btns{display:flex;flex-wrap:wrap;gap:10px} @media (max-width:640px){ .subscribe-btns{flex:1 1 100%;flex-direction:column} } /* === по замечаниям проверки (14.10.2026) === */ /* автообработка на телефоне: pre бюллетеня шире экрана — сжимается ячейка сетки, прокручивается сам блок */ .auto-grid>*{min-width:0} /* «Сильнейшие»: шапка и числа — по центру, не «числа справа и далеко от шапки» */ table.how-strong tr:first-child th,table.how-strong td.num{text-align:center!important} table.how-strong td.num.l{text-align:left!important} /* текст «Сети» под таблицами станций: не вплотную к таблице */ .about-net{margin-top:30px} /* === юбилей (фаза 6) === */ /* Страница «125 лет сейсмической станции «Иркутск»»: шкала событий и плашка для главной. Размеры — в em, чтобы «Версия для слабовидящих» растила их вместе с кеглем. */ .jubilee{margin-top:6px} .jub-lead p{font-size:1.12em;line-height:1.55;max-width:62ch;margin:0 0 14px} .jub-years ol{list-style:none;margin:18px 0 8px;padding:0;display:flex;flex-wrap:wrap;gap:6px 8px} .jub-years a{display:inline-block;padding:3px 11px;border:1px solid var(--edge);border-radius:999px; background:var(--paper);color:var(--ink);font-size:.84em;line-height:1.5;text-decoration:none} .jub-years a:hover{border-color:var(--water);color:var(--water)} .jub-timeline{list-style:none;margin:30px 0 0;padding:0 0 0 24px;border-left:2px solid var(--edge)} .jub-event{position:relative;margin:0 0 44px;scroll-margin-top:16px} .jub-event::before{content:"";position:absolute;left:-32px;top:.45em;width:12px;height:12px; border-radius:50%;background:var(--water);border:2px solid var(--field)} .jub-event h2{margin:0 0 12px;line-height:1.25} .jub-date{display:block;margin-bottom:3px;color:var(--water);font-size:.62em;font-weight:600; letter-spacing:.02em;line-height:1.3;font-variant-numeric:tabular-nums} .jub-body p,.jub-body li{max-width:68ch;margin:0 0 12px} .jub-body ul{padding-left:1.25em;margin:0 0 12px} .jub-body h3{margin:22px 0 10px} .jub-figs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px 18px;margin:20px 0 4px} .jub-fig{margin:0;min-width:0} .jub-fig--wide{grid-column:span 6} .jub-fig--half{grid-column:span 3} .jub-fig--small{grid-column:span 2} .jub-fig--person{grid-column:span 6} .jub-fig--row{grid-column:span 6} .jub-fig--small img{max-width:260px} .jub-fig-imgs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:flex-start} .jub-fig img,.jub-person img{display:block;min-width:0;max-width:100%;height:auto;margin:0; border:1px solid var(--line);border-radius:3px;background:var(--paper)} .jub-fig-imgs--row{flex-wrap:nowrap} .jub-fig-imgs--row img{width:auto} .jub-fig figcaption,.jub-person figcaption{margin-top:8px;color:var(--ink-soft);font-size:.86em;line-height:1.45} .jub-fig--small figcaption{text-align:center} .jub-staff .jub-fig{max-width:760px} /* ряд снимков одной высоты со своими подписями (ширина ∝ форме кадра задаётся в style у .jub-row-item) */ .jub-row{display:flex;align-items:flex-start;gap:14px} .jub-row-line{display:contents} .jub-row-item{margin:0;min-width:0} .jub-row-item img{display:block;width:100%;height:auto;margin:0;border:1px solid var(--line);border-radius:3px;background:var(--paper)} .jub-row-item figcaption{margin-top:8px;color:var(--ink-soft);font-size:.86em;line-height:1.45;text-align:left} .jub-people{display:grid;gap:14px;margin:6px 0 4px} .jub-person{display:flex;gap:18px;align-items:flex-start;margin:0;padding:14px; background:var(--paper);border:1px solid var(--line);border-radius:6px} .jub-person .jub-fig-imgs{flex:none;width:200px} .jub-person img{width:100%;max-width:none} .jub-person figcaption{margin:0;color:var(--ink);font-size:.93em;line-height:1.5} .jub-person b{font-weight:600} .jub-scroll{position:relative;margin:16px 0 8px;overflow-x:auto;-webkit-overflow-scrolling:touch; background:var(--paper);border:1px solid var(--line)} .jub-table{border-collapse:collapse;width:100%;min-width:660px;font-size:.84em;line-height:1.35} .jub-table caption{padding:10px 10px 8px;text-align:left;font-weight:600;font-size:1.06em} .jub-table th,.jub-table td{padding:5px 9px;border:1px solid var(--line);text-align:left;white-space:nowrap} .jub-table thead th{background:var(--band);font-weight:500} .jub-table tbody th{font-weight:400} .jub-table td.code{font-weight:600;font-variant-numeric:tabular-nums} .jub-table td.on{background:#d6efdc} .vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} .jub-legend{display:flex;align-items:center;gap:8px;margin:6px 0 14px;font-size:.86em;color:var(--ink-soft)} .jub-swatch{flex:none;width:18px;height:12px;background:#d6efdc;border:1px solid var(--line)} /* в версии для слабовидящих заливка недоступна — отмечаем жирным и рамкой */ body.a11y .jub-table td.on,body.a11y .jub-swatch{background:transparent;font-weight:700} body.a11y .jub-table td.on{outline:2px solid currentColor;outline-offset:-3px} body.a11y .jub-swatch{border-width:3px;border-color:currentColor} .jub-staff{margin-top:12px;padding-top:6px;border-top:1px solid var(--line)} .jub-authors{margin:26px 0 0;max-width:70ch;color:var(--ink-soft);font-size:.88em} @media (max-width:720px){ .jub-fig--half{grid-column:span 6} .jub-fig--small{grid-column:span 3} } @media (max-width:560px){ .jub-row{display:block} .jub-row-line{display:flex;gap:10px;align-items:flex-start;margin:0 0 14px} .jub-row-line:last-child{margin-bottom:0} .jub-row-item figcaption{font-size:.8em} .jub-row--pair .jub-row-line{display:block} .jub-row--pair .jub-row-item{margin:0 0 14px} .jub-row--pair .jub-row-item figcaption{font-size:.86em} .jub-timeline{padding-left:16px} .jub-event::before{left:-24px} .jub-person{flex-direction:column;align-items:center} .jub-person .jub-fig-imgs{width:min(220px,70%)} .jub-person figcaption{text-align:left} } /* плашка со ссылкой на страницу юбилея (partials/jubilee-banner) */ .jub-banner{display:flex;align-items:center;gap:16px;margin:0 0 18px;padding:12px 16px; background:var(--paper);border:1px solid var(--edge);border-left:6px solid var(--water); border-radius:6px;color:var(--ink);text-decoration:none} .jub-banner:hover{border-color:var(--water);box-shadow:0 1px 6px rgba(1,67,187,.14)} .jub-banner-num{flex:none;color:var(--water);font-size:2.1em;font-weight:700;line-height:1; font-variant-numeric:tabular-nums} .jub-banner-text{flex:1;min-width:0} .jub-banner-text b{display:block;font-weight:600;line-height:1.3} .jub-banner-text span{display:block;margin-top:2px;color:var(--ink-soft);font-size:.86em;line-height:1.4} .jub-banner-go{flex:none;color:var(--water);font-weight:500;white-space:nowrap} @media (max-width:520px){ .jub-banner{gap:12px;padding:10px 12px} .jub-banner-go{display:none} } /* === восьмой круг, D: «Как часто», рисунок посещаемости сайта === */ figure.visits{margin:18px 0 8px} figure.visits img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:4px} figure.visits figcaption{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--ink-soft);text-align:justify;hyphens:auto;-webkit-hyphens:auto} body.a11y figure.visits figcaption{color:var(--ink)} /* === восьмой круг, правки проверок === */ /* Две ссылки после Хубсугульского жирным, как были до выноса из (№11). */ .prose p.felt-links{font-weight:700} /* Библиографическая ссылка с длинным DOI не растягивается пробелами при выравнивании по ширине. */ .prose p.ref-left{text-align:left;hyphens:manual;-webkit-hyphens:manual} /* === подпись создателя сайта в футере === */ footer .credit{flex-basis:100%;margin-top:6px;font-size:12px;opacity:.75} footer .credit a{text-decoration-thickness:1px;text-underline-offset:2px} footer .credit a:hover{opacity:1} body.a11y footer .credit{opacity:1;font-size:inherit} /* === девятый круг, C2: «Контакты» — текст слева, схема со входом справа (институт, 05.11.2026, Д9) === */ .contacts-grid{display:block;margin:0 0 18px} .contacts-text{min-width:0} .contacts-scheme{margin:6px 0 0;text-align:left} .contacts-scheme img{display:block;max-width:100%;height:auto;aspect-ratio:4/3;margin:0;border:1px solid var(--line);border-radius:4px} .contacts-scheme figcaption{margin-top:6px;font-size:13.5px;line-height:1.45;color:var(--ink-soft);text-align:left;hyphens:manual;-webkit-hyphens:manual} @media (min-width:720px){ .contacts-grid{display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:0 28px;align-items:start} .contacts-scheme{margin:0} } body.a11y .contacts-scheme figcaption{color:var(--ink)} body.a11y[data-noimg] .contacts-scheme{display:none} body.a11y[data-noimg] .contacts-grid{display:block}