Сергей delphinpro

<span class="rules-intro__text">
    <?=$rulesCategoryOne['content']?>
</span>

$rulesCategoryAll = $queryCategoryOne->fetch_all();
// Я не знаю как у вас называется такой метод!!!


<?php foreach($rulesCategoryAll as $rule): ?>
<span class="rules-intro__text">
    <?=$rule['content']?>
</span>
<?php endforeach; ?>

window.onload = () => {

  const popUp = document.getElementById('cookiePopup');

  function showPopup() {
    popUp.classList.add('show');
    popUp.classList.remove('hide');
  }

  function hidePopup() {
    popUp.classList.add('hide');
    popUp.classList.remove('show');
  }

  document.getElementById('acceptCookie').addEventListener('click', () => {
    localStorage.setItem('cookieAccepted', '1');
    hidePopup();
  });

  if (localStorage.getItem('cookieAccepted') === '1') {
    hidePopup();
  } else {
    showPopup();
  }

};

Как сверстать такой каталог?

<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>
<a class="menu">Menu item</a>

.menu {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 0.5s ease;
}

.menu.ready {
  transform: translateX(0);
  opacity: 1;
}

const delay = 300;
[...document.querySelectorAll('.menu')].reverse().forEach((menu, index) => {
    setTimeout(() => {
        menu.classList.add('ready');
    }, delay * (index + 1))
});

ul {
  text-align: center;
  list-style-position: inside;
}

// Добавить
document.body.style.overflow = 'hidden';

// Убрать
document.body.style.overflow = '';

.vskrytiye__ot:has(.vskrytiye__btn:not(.blue):hover) .vskrytiye__btn.blue {
  /* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__btn.blue:hover) .vskrytiye__btn:not(.blue) {
  /* Стили для первой кнопки при наведении на вторую */
}

.vskrytiye__ot:has(.vskrytiye__ot__b:first-child .vskrytiye__btn:hover) .vskrytiye__ot__b:last-child .vskrytiye__btn {
  /* Стили для последней кнопки при наведении на первую */
}
.vskrytiye__ot:has(.vskrytiye__ot__b:last-child .vskrytiye__btn:hover) .vskrytiye__ot__b:first-child .vskrytiye__btn {
  /* Стили для первой кнопки при наведении на последнюю */
}

.vskrytiye__ot:has(.first-btn:hover) .second-btn {
  /* Стили для второй кнопки при наведении на первую */
}
.vskrytiye__ot:has(.second-btn:hover) .first-btn {
  /* Стили для первой кнопки при наведении на вторую */
}

html, body {
  height: 100%;
}