Aleksey Solovyev

А в чем проблема?
transform: rotate(9999999deg)
https://developer.mozilla.org/en-US/docs/Web/Event...
https://developer.mozilla.org/en-US/docs/Web/API/T...

ps можно по :focus, :active

Ну и я свою кину - https://codepen.io/janeRivas/pen/zEdBNW

Зачем создавать разные страницы? У Вас простой SPA. Ну и посмотрите в сторону Veu, React, Angular...
ну а если очень надо, то браузеры изначально дают Вам возможность сохранять данные. Для этого используйте localStorage\sessionStorage\cookie. Выберите что будет для Вас удобней и что Вам нужно в конечном итоге. После используйте их на какой угодно странице.
На первой сохранили значение кнопки
На второй проверили какое значение было у кнопки -> добавили класс

https://developer.mozilla.org/en-US/docs/Web/API/W...

Ничего сложного не вижу в верстке. Запарная, но вполне реализуемая. Чего в комментариях ноет народ? Или Вам интересно 3 блока в ряд flex'ом закидать - "Ху*к-ху*к, и в продакшн"?
Делим на три блока: светлый, текст по центру, темный блок. Текст через shapes форматируем, форму каждого блок через clip-path, svg... Позиционируем чуть-чуть(много). Получаем итог. Ну a с нижней все понятно - transparent: skew, clip-path...

Вот хороший пример shapes - https://www.sarasoueidan.com/blog/css-shapes/
clip-path - https://developer.mozilla.org/en-US/docs/Web/CSS/c...

А мобильную пусть кидает макет дизайнер. Или он на полпути оставил Вас?

ps с поддержкой надо поиграть, но тоже ничего такого....
psps скинь макет. Ночью будет свободное время - сделаю.

Пусть будет https://developer.mozilla.org/en-US/docs/Web/API/H...
Но через какой-то extension ( Screencastify - Screen Video Recorder для chrome ) будет проще

Ээээ...дайте им высоту и ширину фиксированную.

.space{
  height: 20px;
  width: 100%;
}

В порядку бреда

@keyframes anim {
  0% {
    transform: translate(-30px, 90px);
  }
  10% {
    transform: translate(-24px, 57.6px);
  }
  20% {
    transform: translate(-18px, 32.4px);
  }
  30% {
    transform: translate(-12px, 14.4px);
  }
  40% {
    transform: translate(-6px, 3.6px);
  }
  50% {
    transform: translate(0px, 0px);
  }
  60% {
    transform: translate(6px, 3.6px);
  }
  70% {
    transform: translate(12px, 14.4px);
  }
  80% {
    transform: translate(18px, 32.4px);
  }
  90% {
    transform: translate(24px, 57.6px);
  }
  100% {
    transform: translate(30px, 90px);
  }
}

А так через JS( requestAnimationFrame и sin/cos )
www.the-art-of-web.com/javascript/animate-curved-path

Покажите Ваш js код, который отвечает за навигацию?

Добавим поверх всего элемент a

<a href="#id-price" style="position: fixed; top: 0; left:0; z-index: 2000">some text</a>

Проверим его - работает.
Видимо у Вас какой-то элемент перекрывает ссылки в меню и событие 'click' не происходит. Проверяйте верстку

Если не брать в расчет готовые библиотеки(Robert Bl ее упомянул), то тут нужно просто найти какое-то значение, которое будет изменяться при событии

В данном примере событие - скролл
window.onscroll
А переменная - pageYOffset (сколько пикселей проскроллено)
window.pageYOffset
При каждом window.onscroll получаем новую pageYOffset и изменяем x, y, z элемента

el.style.translate = transform3d(x, y + window.pageYOffset, z)

где x - по горизонтали, y - по вертикали

или любое другое свойство

В Вашем примере в исходно коде именно это мы и наблюдаем. Этот код изменяется при прокрутке:

<div class="path__cursor" style="transform: translate3d(756.21px, 2968px, 0.001px);"></div>

Примерно так это и работает)