Никита Михайлов

Слишком сложно для CSS. Поддерживать такое — настоящее мучение. Любое добавление пункта меню превратится в полное переделывание. Лучше уж действительно хранить 2 разных меню а на стороне бекэнда объеденить их

Посмотри в эту сторону https://docs.elementor.com/article/57-entrance-ani...

Можно использовать готовые плагины fancyapps.com/fancybox/3

Ну ведь уже есть по похожему принципу. Для span при открытом состоянии меню можно отходить от пседокласса checked

#menu__toggle:checked ~ .menu__btn > span,
#menu__toggle:checked ~ .menu__btn > span::before,
#menu__toggle:checked ~ .menu__btn > span::after {
  background-color: blue;
 }

Да таких стандартов никто не даст. Если хочется увидеть лучшие практики создания, то стоит посмотреть на то, как устроены современные фреймворки для вёрстки. Тот же Bootstrap. Его сетку зачастую и берут для создания адаптива. Можно целиком её и использовать отдельно. Достаточно подключить bootstrap-grid.min.css или sass, если удобнее

https://codepen.io/Psixodelik/pen/KKMwyQj

@media (min-width: 1000px)
.c-home-header__fixed {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

Не похоже на z-index: 3

А пример изображений можно? Тут всё настолько разваливается, что искать в этих дебрях мало кому захочется. И поправьте ошибку в myscript.js

@media (max-width: 1499px)

Вот корень всех проблем. Выносите эти стили отдельно, либо измените запрос на min-width, начиная с нужной ширины

Тут надо смириться. Хоть стандарт и говорит, что active «активируется» при клике основной клавишей мыши, но хрому видимо пофиг.

On systems with more than one mouse button, :active applies only to the primary or primary activation button (typically the "left" mouse button), and any aliases thereof.

https://www.w3.org/TR/selectors/#the-active-pseudo

Само меню у вас изначально не скрыто. Можете при адаптиве попробовать скролить вбок. Дайте меню display: none, а уже при клике открывайте

как вы считаете, как лучше фиксировать обучающий материал?

Практика. Нет особого смысла вести конспекты, так как различных технологий, параметров, функций настолько много, что это невозможно держать в голове. Получил новую информацию? Попробуй использовать. В этом плане курсы обычно и не плохи, так как за теорией следует практика. Со временем получения практики ты уже сам выучишь весь необходимый синтаксис из того, что сам и используешь. А что не помнишь можно посмотреть в гугле. Ничего зазорного в этом нет. Все разработчики так делают

Что вы имеете в виду под корректной перестановкой? Перенос? И чем justify-content не подошёл? В вашем примере можно сделать так:

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 160px;
  .item {
    border-radius: 10px;
    width: 50px;
    height: 50px;
    margin-bottom: 5px;
    display: block;
    background: #ffcfa6;
  }
}

Создайте функцию открытия модального окна и через setInterval просто выполняйте её раз в час

Можешь посмотреть разные варианты на CSS Tricks

Тут проще всего использовать JS. Если они не связаны друг с другом, то нет надежды связать их средствами CSS, если только один из блоков не имеет фиксированную высоту. В этом случае можно использовать переменные.

:root {
  --section-form-height: 300px;
}

.section-form {
  height: var(--section-form-height);
}

.header {
  height: calc(var(--section-form-height) / 3);
}