Егор Огурцов

На самом деле это отличный эксперимент. Я бы попробовал и поделился результатами бенчмарка

https://css-tricks.com/the-notch-and-css/
https://webkit.org/blog/7929/designing-websites-fo...

Как-то так можно - https://jsfiddle.net/9pe4njcs/

Я когда-то шутки шутил с typed-js

Вот тут отвечал - Как сделать фиксированное меню которое фиксируется не сразу, но по ходу прокрутки?

Самый простой способ

<script type="text/javascript">
$(document).ready(function () {
    if(window.location.href.indexOf("utm_source") > -1) {
       $('.block-phone').hide();
    }
});
</script>

А ты не используй бездумно, а возьми тот же bootstrap, разберись в нем (там все очень просто, на самом деле), и посмотри как там реализованы сетка, размеры, и брейкпоинты. Там найдешь ответы на первые три вопроса.

4. Это уже, скорее всего, больше типографика.
5. Grid Layout in CSS: Interface Layout for the Web, Building Responsive Data Visualization for the Web

У тебя проблемы с версткой, горизонтального скрола у адаптивной страницы быть не должно при любой ширине. Ищи блок, который вылезает за пределы по ширине.

Прикрути валидацию на стороне клиента
https://habrahabr.ru/post/180279/

А почему position: absolute, если там position: fixed должно быть?

В бутстрапе это - affix, а вообще, вот - leafo.net/sticky-kit

Конечно!
https://help.yandex.ru/webmaster/controlling-robot...

>конкретный дизайн в PSD
>требование использовать именно bootstrap

Если макет нарисован по сетке bootstrap'а, тогда все просто и легко.
А если от балды - то проще самому делать сетку и писать плагины, чем допиливать bootstrap под дизайн.

Похожее на что? Ничего не понятно в вопросе.

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

О каких хаках и костылях идет речь? Я только для border-radius и box-shadow прописываю параметры для старых мозил и вебкитов, остальное и так отлично.