AngReload

Знаю что уже сейчас css переменные успешно используются на pikabu для смены палитры сайта и тёмной темы. Не без фолбэков, разумеется.

body {
  background-color: #f4f4f4;
  background-color: var(--color--app__bg);
  color: #212121;
  color: var(--color--app__text);
}

Ты вставил код до того места, где подключается jQuery.

<script type="text/javascript">

		$(document).ready(function() {
		    let mainBlock = $('.navbar-collapse');

			mainBlock.find('ul').on('click', function() {
			  mainBlock.removeClass('in');
			});
		});

	</script>






    <!--Vendor-JS-->
    <script src="js/vendor/jquery-1.12.4.min.js"></script>
    <script src="js/vendor/bootstrap.min.js"></script>
    <!--Plugin-JS-->
    <script src="js/owl.carousel.min.js"></script>
    <script src="js/contact-form.js"></script>
    <script src="js/jquery.parallax-1.1.3.js"></script>
    <script src="js/scrollUp.min.js"></script>
    <script src="js/magnific-popup.min.js"></script>
    <script src="js/wow.min.js"></script>
    <!--Main-active-JS-->
    <script src="js/main.js"></script>
</body>

</html>

Magnific Popup создаёт iframe у которого для gmaps указан url
https://maps.google.com/ и так далее

а для vimeo и youtube url имеет вид //youtube.com/..., где вначале пропущен протокол. В этом случае браузер должен установить такой же протокол как у текущей страницы, будь то http или https. Но при когда страница загружена с диска, у неё адрес типа такого file:///C:/temp/index.html и, соответственно, ютуб и вимео с таким протоколом не загрузятся.

Но, лучше не использовать градиенты как вы просите, а сделать SVG.

Что-то такое можно делать с помощью transform rotate или transform skew, применяя их на родителе и противоположный эффект на дочерних блоках.
https://jsfiddle.net/AngReload/fzs3Lmx7/
Но у вас же там просто статичный фон, зачем эти заморочки, проще нарисовать одну картинку-коллаж и всё.

https://jsfiddle.net/k4d07rv9/

/* помимо тех стилей что уже есть */
.hiding {
  height: 0;
}

var burger = document.querySelector(".burger");
var menu = document.querySelector(".menu");

burger.addEventListener("click", function(evt) {
  evt.preventDefault();
  if (menu.classList.contains("show") && !menu.classList.contains("hiding")) {
    menu.classList.add("hiding");
    var cb = function () {
      menu.classList.remove("show");
      menu.classList.remove("hiding");
      menu.removeEventListener("transitionend", cb, false);
    };
    menu.addEventListener("transitionend", cb, false);
  } else {
    menu.classList.add("show");
    menu.classList.remove("hiding");
  }
})

Там ты забыл подключить jQuery и чтобы проверить состояние чекбокса - checkbox.checked

$(document).ready(function() {
        $('input[type="checkbox"]').click(function() {
            if($(this).attr('id') == 'watch') {
              if (this.checked) {
                $('#switch_seo').show();
              } else {
                $('#switch_seo').hide();
              }
            }
        });
    });

Если добавить стиль

body {
  overflow: hidden;
}

то всё нормально становится. Видимо что-то не влазит.

Наверное Fluid Design
https://medium.com/@space.alpaca/so-what-exactly-i...

PS, ещё видел Viewport Sized Typography

Первый результат в поиске https://codepen.io/simoberny/pen/dYPNXb

SVG

Это кривые безье, генерируй их и вставляй в SVG таким кодом:

function makePath(x1, y1, x2, y2) {
  const weight = 0.3;
  const dx = (x2 - x1) * weight;
  const c1 = x1 + dx;
  const c2 = x2 - dx;
  return `<path d="M${x1},${y1} C${c1},${y1} ${c2},${y2} ${x2},${y2}" stroke="black" fill="transparent"/>`;
}

x1, y1 - начальная точка
x2, y2 - конечная точка
weight - жёсткость

Добавьте строчку в ваш js

var containerEl = document.querySelector('.project__bloks');
var mixer = mixitup(containerEl);

$('.project__nav-item').on('click', function(event) {
  if ( parseFloat( $('.project__bloks').css('height') ) > 810 ) {
    console.log('lol');
  }
  console.log( $('.project__bloks').css('height') );
  setTimeout(() => console.log( $('.project__bloks').css('height') ), 2000); // <= вот эту строчку
});

И тогда увидите, что когда вы кликнули по кнопке размер один, а через две секунды уже другой. Это так из-за анимации.

Я думаю, вам нужно просто к контейнеру применить стиль типа: max-height: 600px; overflow: hidden; и при клике на кнопку убирать этот стиль. Что-то другое будет слишком сложным.