Виталий Першин

[data-color="grey"] {
color: grey;
}

А почему нет? Это по сути те же самые модальные окна, которых на сайтах полно. Вот если вы решите весь сайт реализовать с кучей информации, то это может быть проблема из-за большого кол-ва информации, которая будет долго грузится.

1. Не надо вешать свои стили на слайдер и на слайды, делайте для слайда пустой div и в него помещайте свой блок
2. Подключите стили самого slick

Думаю что-то вроде этого:

Для этого есть fontello
Можно подключить свои собственные иконки, загружать в формате svg

Ищите по названию "before and after slider"

https://github.com/zurb/twentytwenty
https://github.com/koenoe/cocoen
https://github.com/jotform/before-after.js
https://github.com/pehaa/beerslider

Подскажите в какую сторону вообще копать.
В сторону LocalStorage, sessionStorage или cookie

Вот так:

quickcheckout это у вас какой мод. либо отключите его, либо залейте шаблон этого мода.

Не совсем понял в чем именно проблема. Сделал вот такой вариант, остальное можно стилями подогнать как надо:

Если стараться максимально придерживаться БЭМ, то такой конструкции .page-y .services-section лучше избежать. Вот такого точно не должно быть .page-x .services section
Вот так тоже не правильно .page-x-services-section / .page-y-services-section вы косвенно уже привязались к какой-то из страниц.

Вы можете использовать микс:
page-x__services-section services-section
Либо модификатор:
services-section services-section_type_1

Такая конструкция .page-y .services-section имеет место быть, но лучше избегать или хотя бы не увлекаться

Либо убрать centerMode или поставить ему false

Либо добавить centerPadding: '0px',

focusOnSelect: true

Дать side-bar z-index больше wrapp

Как вариант сделать угол при помощи clip-path и применить drop-shadow:

Не совсем понятно что в итоге вы хотите получить и что именно у вас является логотипом (картинка или все содержимое logo), такие примеры желательно рассматривать с макетом, а не гадать на кофейной гуще, но тем не менее обычно логотип это отдельный блок, который можно миксовать в зависимости от окружения, как вариант так:

<aside class="aside">
    <div class="aside__logo logo">
        <div class="logo__pic">
            <img src="logo.png" alt="logo" class="logo__img" />
        </div>
        <div class="logo__title">Заголовок</div>
        <div class="logo__ico">Иконка</div>
    </div>
</aside>

Квадратные накладки, которые вы сделали чтобы имитировать угол, в данном случае не подойдет. Поэкспериментируйте с filter: drop-shadow() и clip-path

Конечно имеет, у вас сейчас никакой защиты, даже не ботом можно заспамить. Чтобы спамить через капчу нужны как минимум ресурсы чтобы её разгадать, так что от вас скорее всего отстанут.

path {
   fill:inherit;
}

svg:hover{
  fill:#ffff;
  background: red;
}