Владислав Черненко

Для себя я решил эту проблему таким образом:

body {
  margin: 0;
  overflow: hidden;
}

body > .scroll-box {
    position: relative;
    left: 0;
    right: 0;
    height: 100%;
    max-height: 100vh;
    overflow-y: auto;
}

Таким образом блокируется прокрутка страницы, следовательно навигационная панель будет видна всегда. А также 1vh будет постоянным. Прокрутка же появляется, если внутри контейнера .scroll-box содержимое не помещается по вертикали. Прокрутка контейнера никак не повлияет на размеры body. Все лайтбоксы, модальные окна и выдвигающиеся меню помещаются в body для того, чтобы появление прокрутки никак не влияло на верстку этих окон.
PS. Для блокировки паразитной прокрутки основного контейнера во время прокрутки модального окна я добавил в JS:

$modal.on('show', () => $scrollBox.css({ 'pointer-events': 'none' }));
$modal.on('hide', () => $scrollBox.css({ 'pointer-events': 'auto' }));

Нету никаких уроков, нужно просто выставлять отступы так, что бы получилось как в макете. Браузер по своему рендерит макеты и просто брать значения из фигмы и вставлять не достаточно.

подскажите насколько актуальна сейчас в 2020 и в 2021

Это всегда актульно, НО!!! Без фанатизма. Нужно максимально стараться привести верстку к макету. Нет нужны и смысла мучить себя 1-2 пикселями. А так же, не забываем про особенности браузеров в отображении тех или иных стандартных тегов. select, button, input и т.п. Поэтому сначала нужно взять либо какой-то reset или normalize.css

В первую очередь всё зависит от дизайнера. На сколько он любит свою работу и на сколько он профессионален. Мне не попался ещё дизайнер, который нарисует всё на столько ровно и одинаково.
Чаще всего, дизайнер, рисуя кнопку, не понимает, что это за элемент и какие есть правила его применения в отрасли. На одной странице кнопка выглядит так, на другой так, на 3й так, и т.д. И так со многими повторяющимися элементами.

Я всегда списываю это и делаю так, что бы получилось одинаково везде. Пока никто никогда не жаловался.

Следствие чего, не имеет смысла для каждой страницы делать кнопку разной. Достаточно просто привести её к средним значениям.
Точно так же бывает с сетками. Либо её вообще нет, либо имитация.

P.S. Это не прописная истина, это мой подход в работе, который выработался за мою долгую практику. Я тоже пытался делать попиксельно, но это лишняя трата времени и своих сил.

На сайте который вы указали, сделано банальное выпадающее меню.
Js ваше всё в данной ситуации.

Для определения состояния поля используйте псевдоклассы:

:foucus
:invalid
:valid

Для установки иконок внутри поля справа, используйте абсолютное позиционирование на сами иконки и селекторы соседей, чтобы выводить те или иные иконки с опорой на состояние полей.

HTML+CSS+JQUERY

Тильда - такое говнище, жесть. Лучше на юкозе сделай.

Вы не понимаете главного: не важно какая cms или язык программирования. С одинаковым успехом можно сделать как хорошо, так и категорически плохо. Ваш вопрос звучит очень глупо, ничего там сверхъестественного нет и это под силу любому опытному разработчику.

какой здесь применен фильтр?

Третий глаз подсказывает, что здесь поиграли с filter: hue-rotate(150deg); или около того. Но вам бы стоило изучить, что делает каждый из возможных фильтров в CSS и что будет, если их начать комбинировать, чтобы в перспективе такие вопросы не возникали.

.menu-categories__link:before{
    content: attr(title);
    display: block;
    font-weight: bold;
    height: 0;
    opacity: 0;
    overflow: hidden;
}

<li class="menu-categories__item"> 
     <a class="menu-categories__link" title="Квадроциклы" href="#">Квадроциклы</a>
</li>

С помощью before можно "зарезервировать" место для fw:bold. Для этого в content=''; в before нужно чтобы передавался title из разметки HTML. И соответственно для каждой ссылки нужно добавить атрибут title, а в нем будет просто название ссылки.

В целом выглядит симпатично.
Все завернуто в тег main. это семантически неправильно.
Логотип внесен в общее меню, это вроде и не ошибка, но при интеграции с любой цмс будут проблемы.
Адаптив выглядит так, как будто мета тега viewport нет, хотя он есть.
Меню не прячется в бутерброд. Возможно вы скажете, что оно и так влазит, но это первый признак совсем начинающего, сам таким был.
Вы кое где используете сетку бутстрап, но не до конца понимаете как она работает, поэтому пишите лишние классы. например col-md-6 col-lg-6. В этом месте класс col-lg-6 лишний, так как делает ровно то же, что col-md-6, потому что бустстрап мобайл-фест. А там где одна колонка не нужен ни row ни col-12.
Не понял я смысл скроллов в карточках, выглядит намного хуже, как если бы где то было больше или меньше контента.
методАлогия))