/* ===================================================================== Мобильный слой интерфейса — применяется ТОЛЬКО на ширинах <=900px. Подключается в обеих страниц отдельным тегом: Единый брейкпоинт «мобильное / монитор» = 900px; внутри файла — под-брейкпоинты 700/560/480px. База и десктоп (>900px) живут в css/styles.css и css/pages.css — сюда выносите компактные отступы, тач-цели, бургер-меню и прочие настройки «под палец». Новый мобильный блок пишем здесь, а не в styles.css. ===================================================================== */ /* --- Навигация становится бургер-меню только на телефоне (<=700px). Кнопка-бургер и её базовые стили — в css/styles.css (.nav-toggle); здесь — переключение «ссылки/бургер» и выпадающая панель. --- */ @media (max-width: 700px) { nav { display: none; } .nav-toggle { display: inline-flex; } /* Выпадающая панель меню (показывается по body.menu-open из js/mobile-nav.js). Тёплый «глиняный» фон в гамме сайта с золотистой кромкой. */ body.menu-open nav { display: block; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30; padding: 8px; background: linear-gradient(180deg, rgba(212, 160, 74, 0.08), rgba(196, 92, 38, 0.03) 30%, rgba(12, 10, 8, 0) 100%), #1d1711; border: 1px solid rgba(212, 160, 74, 0.35); border-radius: 16px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(240, 198, 116, 0.12); max-height: calc(100dvh - 120px); max-height: calc(100vh - 120px); overflow-y: auto; animation: menu-in 0.18s ease; } body.menu-open nav a { display: block; margin: 0; padding: 13px 16px; border-radius: 12px; font-size: 15px; color: var(--sand); } body.menu-open nav a + a { border-top: 1px solid rgba(232, 213, 181, 0.1); } body.menu-open nav a:hover, body.menu-open nav a:focus-visible, body.menu-open nav a:active { background: rgba(212, 160, 74, 0.12); color: var(--gold-2); } } /* Группы в выпадающем меню: «Классические → Каталог, Карта» и «Другие страны → Каталог» — дочерние пункты с отступом под родителем */ @media (max-width: 700px) { body.menu-open nav > a, body.menu-open nav > .nav-group { border-top: 1px solid rgba(232, 213, 181, 0.1); margin-top: 6px; padding-top: 4px; } body.menu-open nav > :first-child { border-top: none; margin-top: 0; padding-top: 0; } body.menu-open nav .nav-group .nav-parent { color: var(--gold-2); font-weight: 700; } body.menu-open nav .nav-children { display: block; margin: 0 0 4px 18px; padding-left: 12px; border-left: 1px solid rgba(212, 160, 74, 0.3); } body.menu-open nav .nav-children a { padding: 11px 14px; font-size: 14px; } } /* Крупнее тач-цели: фильтры каталога и «пины»-ссылки под картой */ .filter { padding: 10px 16px; font-size: 14px; } .filter:active { transform: scale(0.96); } .pin-link { padding: 9px 14px 9px 8px; font-size: 14px; } .pin-link:active { transform: none; } .to-top { right: 16px; bottom: 18px; } @keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } } @media (prefers-reduced-motion: reduce) { body.menu-open nav { animation: none; } } /* --- <=700px: компактные отступы, страницы памятников (dossier) — тоже компактнее --- */ @media (max-width: 700px) { .hero { padding: 44px 0 24px; gap: 10px; } .hero-visual { /* зиккурат .zig высотой ~208px стоит на bottom:24px — нужно >=232px, иначе его верхушка вылезает за контейнер и наезжает на текст выше */ min-height: 250px; } .section { padding: 20px 0 44px; } .section-head p { margin-bottom: 22px; } .stats { gap: 16px 26px; } th, td { padding: 10px 12px; } /* страница памятника: шапка досье и навигация пред/след */ .crumbs { padding: 12px 0 0; font-size: 13px; } .dossier-hero { padding: 16px 0 4px; } .dossier-hero h1 { margin: 6px 0 12px; } .dossier-hero .lead { font-size: 16px; margin-bottom: 14px; } .statline { gap: 10px; margin-top: 16px; } .prevnext { gap: 10px; } .prevnext a { padding: 11px 14px; } } /* --- <=560px: узкие телефоны — таблица размеров и статы досье --- */ @media (max-width: 560px) { /* статы героя: по два в ряд, без вылезания за экран */ .statline .stat { flex: 1 1 calc(50% - 5px); min-width: 0; padding: 10px 12px; } .statline .stat b { font-size: 19px; } /* «Размеры и конструкция»: строка таблицы = метка над значением (иначе колонка значений на узком экране схлопывается и обрезается) */ table.dimtable { font-size: 14.5px; } table.dimtable td { display: block; width: 100%; padding: 2px 16px; border-top: 0; } table.dimtable tr { display: block; padding: 12px 0; border-top: 1px solid var(--line); } table.dimtable tr:first-child { border-top: 0; } table.dimtable td:first-child { width: auto; padding-bottom: 2px; white-space: normal; color: var(--gold); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; } /* «пред/след»: друг под другом, во всю ширину */ .prevnext { flex-direction: column; align-items: stretch; } .prevnext a, .prevnext .next { max-width: 100%; margin-left: 0; text-align: left; } /* обложка-фото на узких экранах не слишком высокая */ .fig.site-photo .photo-open { height: clamp(200px, 60vw, 340px); } } /* --- <=480px: самые узкие экраны --- */ @media (max-width: 480px) { /* чуть уже поля контейнера */ .wrap { width: min(1180px, calc(100% - 28px)); } .stat b { font-size: 28px; } .headline .headlink { font-size: 27px; } .map-box { height: 320px; } .world-map { height: 220px; } } /* --- <=700px: кнопка «наверх» (меч) — вверху справа, под липкой шапкой. Появляется после прокрутки (см. .to-top.show в styles.css). --- */ @media (max-width: 700px) { .to-top { top: 84px; bottom: auto; } /* при открытом бургер-меню панель не перекрывается мечом */ body.menu-open .to-top { opacity: 0; visibility: hidden; pointer-events: none; } } /* ===== Лента времени на телефонах (страницы памятников) ===== Компактные шрифты и переносы, чтобы записи событий не налезали друг на друга на узком экране. */ @media (max-width: 700px) { .era-strip { padding: 12px 10px 6px; } .era-strip h3 { font-size: 17px; } .era-strip .era-cap { font-size: 11px; margin-bottom: 10px; } .era-zero-l, .era-zero-r { top: 8px; font-size: 10px; } .era-zero-l { right: 4px; } .era-zero-r { left: 4px; } .era-end-l, .era-end-r { top: 8px; font-size: 9px; } .era-ev b { font-size: 10px; } .era-ev span { font-size: 9px; max-width: 92px; white-space: normal; line-height: 1.15; } .era-ev::before { height: 16px; } .era-ev.up::before { margin-top: 3px; } .era-here b { font-size: 10.5px; white-space: normal; } .era-here .era-zig { width: 14px; height: 12px; margin-top: 3px; } .era-now { width: 8px; height: 8px; } } @media (max-width: 480px) { .era-ev span { max-width: 74px; font-size: 8.5px; } .era-track { height: 132px; } }