Destell

html-webpack-inline-source-plugin

$('body').on('click', function(event){
		if (!$(event.target).closest('.menu').length) {
			$('.menu').removeClass('menu-opened')
		}
	});

min < window.innerWidth < max

Что вы понимаете под "создавать кучу модальных окон"? "Информация" для нескольких модальных окон так или иначе является кучей модальных окон. Создаете требуемые и вызываете через magnific popup, например.

Там используется не тень, а блок с градиентом и filter: blur.

Советую попробовать самостоятельно предложенные варианты и определить, что именно окажется более удобным.
Лично я предпочитаю использовать "свои" сетки, имхо, они делают код чище, чем при использовании бутстрапа.

Уберите margin: auto; у блока .grwf2-wrapper.wf2-embedded, лежит в form > p этой формы.

Получаете позиции элементов, позицию фиксированного блока, при скролле сравниваете их.

if ( $(window).scrollTop() > block && $(window).scrollTop() < block + block.height()) {
....

Копаете как раз туда

Как вариант - получать координаты центра нужных сторон блоков и задавать их концам "линии".

manos.malihu.gr/jquery-custom-content-scroller

<svg>
    <script>
         Код
    </script>
</svg>

Попробуйте таким образом (вставив код в конец svg и добавив картинку через object) либо вставлять svg напрямую в html.

setInterval