Оптимизировать изображения и загрузку страницы

fragments/hero.php

@@ -1,5 +1,3 @@
-<body>
-
 <div class="site-bubbles" aria-hidden="true">
 <i style="--x:87%;--s:3px;--dur:30.3s;--delay:-14.4s;--drift:23px;--blur:0px;--op:0.35;--grow:1.28"></i>
 <i style="--x:38%;--s:12px;--dur:19.5s;--delay:-22.2s;--drift:-9px;--blur:0.3px;--op:0.33;--grow:1.11"></i>
@@ -33,10 +31,6 @@
 <i style="--x:58%;--s:3px;--dur:25.9s;--delay:-29.2s;--drift:-14px;--blur:0.8px;--op:0.33;--grow:1.11"></i>
 </div>
 
-<header class="baikal-header" id="top">
-
-
-
 <div class="baikal-nav-wrap">
 <a aria-label="Иркутск" class="baikal-brand" href="#top">
 <svg aria-hidden="true" class="brand-window" viewbox="0 0 42 42">
@@ -44,7 +38,8 @@
 </svg>
 <span><b>ИРКУТСК</b><small>ГОРОД БОЛЬШИХ ИСТОРИЙ</small></span>
 </a>
-<nav aria-label="Навигация" class="baikal-nav">
+<button class="menu-toggle" type="button" aria-expanded="false" aria-controls="mobile-menu" aria-label="Открыть меню"><span></span><span></span><span></span></button>
+<nav id="mobile-menu" aria-label="Навигация" class="baikal-nav">
 <a href="#architecture">О городе</a>
 <a href="#route">Маршруты</a>
 <a href="#architecture">Достопримечательности</a>
@@ -53,11 +48,9 @@
 <a href="#regional-food">Кухня Приангарья</a>
 <a href="#contacts">Полезное</a>
 </nav>
-<div class="baikal-nav-actions">
-<a aria-label="Карта" class="nav-circle" href="#route">⌖</a>
-<a class="nav-save" href="#food">♡ <span>Сохранить</span></a>
-</div>
 </div>
+
+<header class="baikal-header" id="top">
 <!-- Крупный резной наличник слева -->
 
 <!-- Резные углы справа -->
@@ -68,7 +61,7 @@
 <h2>ЧТО МЫ МОЖЕМ РАССКАЗАТЬ<br/>О ГОРОДЕ</h2>
 <p>Памятка для гостей города: маршруты, архитектура, музеи, кухня и места, которые помогают почувствовать характер Иркутска.</p>
 <div class="hero-actions">
-<a class="hero-primary" href="#architecture">Погрузиться <b>↓</b></a>
+<a class="hero-primary" href="#architecture">Погрузиться <svg class="hero-primary-arrow" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 3v15M6.5 12.5 12 18l5.5-5.5"/></svg></a>
 </div>
 </div>
 <!-- Байкальские горы и лед -->
@@ -210,4 +203,27 @@
 </svg>
 </div>
 </header>
-
+<script>
+(() => {
+  const button = document.querySelector('.menu-toggle');
+  const menu = document.getElementById('mobile-menu');
+  if (!button || !menu) return;
+  const close = () => {
+    button.setAttribute('aria-expanded', 'false');
+    button.setAttribute('aria-label', 'Открыть меню');
+    menu.classList.remove('is-open');
+    document.body.classList.remove('menu-open');
+  };
+  button.addEventListener('click', () => {
+    const open = button.getAttribute('aria-expanded') === 'true';
+    button.setAttribute('aria-expanded', String(!open));
+    button.setAttribute('aria-label', open ? 'Открыть меню' : 'Закрыть меню');
+    menu.classList.toggle('is-open', !open);
+    document.body.classList.toggle('menu-open', !open);
+  });
+  menu.querySelectorAll('a').forEach(link => link.addEventListener('click', close));
+  document.addEventListener('keydown', event => {
+    if (event.key === 'Escape') close();
+  });
+})();
+</script>