/* * Egholm — мобильные дополнения. * Developer: Site Done · https://sitedone.tech * * В исходной статике меню на узком экране просто скрывалось * (`.topnav ul{display:none}`) и попасть в разделы было невозможно. * Здесь добавлены бургер и выезжающая панель — на скрытом чекбоксе, * без JavaScript. * * Правило, которое легко забыть: всё, что показывается только внутри * медиазапроса, обязано быть скрыто базовым правилом — иначе вылезет * на десктопе. */ /* ---- базовое состояние: на десктопе ничего этого нет ---- */ .burger, .nav-close, .nav-drawer, .nav-overlay { display: none; } /* ---- переключатель языка ---- Активный язык выводится как , неактивный — как , и правило .topnav a{text-transform:uppercase} доставалось только ссылке: надписи выходили разного регистра и разной ширины, переключатель дёргался при каждом переходе. Оба состояния описаны здесь одинаково, ширина ячейки фиксирована, активный язык отмечен подложкой, а не размером букв. Специфичность взята с запасом: .topnav a и .topnav.on-light a из base.css и home.css иначе перебивают одиночный класс. */ .lang-switch__item { text-decoration: none; } .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(20,35,28,.06); } .topnav .nav-right .lang-switch__item { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 46px; height: 28px; padding: 0 10px; border-radius: 999px; text-decoration: none; font-family: 'Inter', system-ui, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; opacity: 1; background: transparent; color: var(--muted-dark); transition: background .18s, color .18s; } .topnav .nav-right .lang-switch__item:hover { color: var(--text-dark); background: rgba(20,35,28,.07); } .topnav .nav-right .lang-switch__item.is-active, .topnav .nav-right .lang-switch__item.is-active:hover { color: var(--text-dark); background: #fff; box-shadow: 0 1px 2px rgba(20,35,28,.14); } /* Тёмная шапка бывает только над первым экраном главной: на внутренних страницах класса on-light нет, но шапка там светлая всегда. */ body.home .topnav:not(.on-light) .nav-right .lang-switch { background: rgba(255,255,255,.14); } body.home .topnav:not(.on-light) .nav-right .lang-switch__item { color: rgba(246,244,238,.72); } body.home .topnav:not(.on-light) .nav-right .lang-switch__item:hover { color: var(--text-light); background: rgba(255,255,255,.16); } body.home .topnav:not(.on-light) .nav-right .lang-switch__item.is-active, body.home .topnav:not(.on-light) .nav-right .lang-switch__item.is-active:hover { color: var(--text-dark); background: var(--text-light); box-shadow: none; } .nav-right { display: flex; align-items: center; gap: 10px; } @media (max-width: 860px) { /* ---- бургер ---- */ .burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 9px 8px; cursor: pointer; border-radius: 10px; transition: background .18s; } /* Полоски рисуются currentColor, а label цвет ниоткуда не получает: правила шапки заданы для ссылок. Задаём явно — тёмный на светлой шапке, светлый над первым экраном главной. */ .topnav .burger { color: var(--text-dark); } .topnav .burger:hover { background: rgba(20,35,28,.07); } body.home .topnav:not(.on-light) .burger { color: var(--text-light); } body.home .topnav:not(.on-light) .burger:hover { background: rgba(255,255,255,.12); } .burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: currentColor; transition: transform .22s ease, opacity .18s ease; } /* Крестик живёт в самой панели: бургер в шапке ею закрыт, и превращать его в крестик бессмысленно — его не видно. */ .nav-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 14px; right: 18px; width: 40px; height: 40px; border-radius: 10px; cursor: pointer; color: #F6F4EE; transition: background .18s; } .nav-close:hover { background: rgba(255,255,255,.1); } .nav-close span { position: absolute; width: 20px; height: 2px; border-radius: 2px; background: currentColor; } .nav-close span:nth-child(1) { transform: rotate(45deg); } .nav-close span:nth-child(2) { transform: rotate(-45deg); } /* ---- панель ---- */ .nav-drawer { display: flex; flex-direction: column; gap: 2px; position: fixed; top: 0; right: 0; z-index: 70; width: min(78vw, 320px); height: 100dvh; padding: 84px 22px 28px; background: #12291A; box-shadow: -12px 0 40px rgba(0,0,0,.35); /* * Закрытая панель НЕ висит за правым краем: position:fixed не * обрезается overflow-ом у body, и страница получала лишние * 300+ пикселей прокрутки вбок. Обрезать это на уровне html * нельзя — overflow ломает «липкую» шапку. Поэтому закрытая * панель просто не выводится, а открытая выезжает анимацией. */ display: none; overflow-y: auto; } .nav-drawer a { padding: 14px 12px; border-radius: 10px; color: #F6F4EE; text-decoration: none; font-size: 16px; font-weight: 600; letter-spacing: .01em; transition: background .18s; } .nav-drawer a:hover, .nav-drawer a:focus { background: rgba(255,255,255,.08); } /* ---- затемнение позади ---- */ .nav-overlay { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(10,18,14,.55); opacity: 0; visibility: hidden; transition: opacity .22s ease, visibility .22s; } /* закрытие по нажатию мимо панели — оверлей и есть