trushka

По событию onscroll проверяете scrollTop, и в зависимости от него задаются координаты кубика с position: fixed. Предварительно для body задать высоту, бОльшую, чем высота экрана.

Можно вместо simbol использовать svg, но только с размерами, равными размерам "верхнего" svg. Так же добавить в него style с правилом svg>svg:not(:target) {display: none} Тогда по идее отобразится только нужный символ, если указать адрес с его id в качестве хэша. Но надо тогда ещё background-size указывать, соответствующий вьюпорту символа

netrenderer.com

Вариант 1: background-origin: padding-box
Вариант 2: делаешь обводку с помощью box-shadow: 0 0 0 10px rgba(...)
Сеточку можно linear-gradient'ами, типа

background:
 linear-gradient(to left, #000, #000 1px, transparent 1px) center/10px 10px repeat,
 linear-gradient(to top, #000, #000 1px, transparent 1px) center/10px 10px repeat #aaa

Делайте обводку через box-shadow: inset - тогда точно таких глюков не должно быть

Можно задать некликабельным элементам onclick="return false"

<span class=" type-of-work__item-price"  onclick="return false">

Ну, или скриптом лучше задать, на body, например, повесить

Да, всё зависит от того, какая у вас именно логика, так сказать, смены кадров. Вообще, тут, мне кажется, только transition нужен.. И лучше не left/top анимировать, а transform - будет плавнее и менее ресурсоёмко, без перерисовок экрана. Только надо will-change: transform задать

делаем фоновый рисунок, совпадающий по размерам с логотипом, чтоб всё совпадало. Если логотип по центру, пишем что-то типа

body {background url(bg.png) center repeat}
#logo {position: absolute; left:0; top:0; right:0; bottom:0; margin:auto}

- должны, по идее, совпасть)) Ну, логотип через img вставить, или размеры задать

Ну, я вот стараюсь всегда максимально упростить (писал в коменте выше, почему), тут бы вполне можно было бы вот так:

<header class="header page__header justify">
          <a href="../index.html" class="header__logo logo__link">
            <img src="../img/big-logo.png" class="logo__pic">
            <img src="../img/logo.png" class="logo__pic-small">
          </a>
      <nav class="nav">
        <button class="toggl-menu"><span></span></button>
        <a href="#" class="nav__link">О нас</a>
        <a href="#" class="nav__link">Абонементы</a>
        <a href="#" class="nav__link">Контакты</a>
      </nav>
</header>

Отступы в header'e можно сделать с помощью padding: 0 20px (а box-sizing: border-box уже и так для всех элементов у вас задан). Вот нащот списков внутри nav вроде довольно много копий уже сломано, но я вот считаю, что nav по определению уже список и можно тупо прямо в него ссылки лепить, без зазрения совести) В общем, как-то так)) А, да, и для раскрытия меню (да ивообще интерактивных элементов, не предполагающих переход по ссылке) лучше кнопку или просто span ставить.. Хотя, в последнем случае могут быть всякие сюрпризы в ойфонах

Ящетаю, что ссылками должно быть только то, что можно корректно открыть в новой вкладке. Если такое не подразумевается - то button в лучшем случае - ну, чтоб всяких неприятных сюрпризов от ойпадов всяких не было.. Хотя, где-то читал, что многие проблемы с несрабатывающим в iOs кликом решаются заданием для кликабельного элемента cursor: pointer

Может, сделать ссылку прозрачной или visibility: hidden, а под неё уже подложить текст ссылки

В связи с постоянным развитием технологий, не хочется тратить время на то, что может не пригодиться

Ну, здесь основной фактор, не является ли данная технология "костылём". Например, та же анимация в jQuery - сейчас есть нативные способы задать анимации с помощью css, а ещё и animation api, если не ошибаюсь в названии, разрабатывается.. Хотя некоторые вещи всё же лучше делать с использованием jquery-анимации.. Или же многие фишки разрабатывались для ИЕ, но в современном вёбе не прижились. Обычно в руководствах по этим делам прямо сказано - работает только в ИЕ.. Хотя многие из изначально чисто ИЕшных фишечек вошли в HTML5. В общем, тут лучше перебдеть, чем недобдеть, ящетаю))