ⓒⓢⓢ

для всех элементов, включая ".modal-all", будет примерно так:

.modal-all, .modal-all:before, .modal-all:after,
.modal-all *, .modal-all *:before, .modal-all *:after {
  box-sizing: border-box;
  transition: 0.4s;
}

быстро пролистал слайды, ничего такого критического нет
ps. на вашем сайте глаза хорошо тренировать, чередующийся ч\б контраст

1. можно ли использовать template в template во vue компоненте?

да

можно ли из дочернего компонента воздействовать на родительский?

да, например $emit('my-event') событий из дочернего, в родителе ловим на элементе тегом @my-event=""

Например, если использовать pug переменные и мне нужно изменить цвет фона. В родителе я указываю - var bgpage;, а само значение пишу в дочерних компонентах?

если у вас pug не выполняется в реалтайме - то нельзя.
Сначала выполняется pug и собирается html
Потом выполняется vue на Уже собранном html
(то есть в собранном HTML уже Не будет pug переменных и прочих объявлений)

никак, перерисуйте канвас без камня

любой элемент на странице имеет прямоугольную форму.
если смотреть ваш макет, то текст "не вылазит" за рамки картинки (цена по крайне мере)
да и что именно гуглить, если как такое сделать, то в основном это так:
или фоновое изображение
или абсолютное позиционирование картинки\текста
или отрицательные отступы

из вашей трактовки блок "socials" - это отдельная независимая единица, логично предположить, что нужен модификатор

если в футере используется всё же свой элемент "footer__socials", то тут пригодится миксин от блока "socials"
=> "socials footer__socials"
или даже так, если удобнее
=> "socials socials--white footer__socials"

возможно что-нибудь такое

a:visited .title {
  color:red !important;   
}

плюс\минус напильником под ваши задачи ...
https://jsfiddle.net/Ljptvz0g/

но от меня требуют чтобы псевдо закрывал только фон

если я правильно понял ваши формулировки и за что обычно бьют по рукам, так это у вас невозможно выделить текст в блоках, т.к. сверху перекрывает псевдоэлемент, добавьте стиля к псевдоэлементу:

.start__image:after {
  pointer-events: none;
  touch-action: none;
}

Если свойство имеет значение, отличное от none, будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов position: fixed; или position: absolute; которые он содержит.

https://developer.mozilla.org/ru/docs/Web/CSS/transform
лучше написать ответ, чем написано в документации я не могу

margin: 0 auto
на блочные элементы (display: block), применяется к "самому себе"

text-align: center
на строковые элементы (включая строковые блоки, inline-block), работает с дочерними элементами

если эти две строчки поменять местами - это не поможет? (последний пример)

{path: '/catalog/*', name:'funcGroup', component: catalog_category},
{path: '/catalog/*/:productId', component: catalog_product},

в тег img (аттрибут src или стиль для свойства фона) пишут путь по которому браузер будет загружать данные и обрабатывать эти данные как картинку.
- по пути необязательно может быть картинка
- как только браузер загрузит данные он определяет формат изображения по заголовкам

для примера ссылка:
https://picsum.photos/800/300/?random
в этой ссылке нет ничего, что указывает, на то что по этой ссылке находится изображение

<header>
  <div class="container">
    <a class="logo">
      <img src="">
    </a>
    <button class="close"/>
    <nav>
      <ul></ul>
    </nav>
  </div>
</header>

сбрасываем ширину у всех элементов шапки, тем самым растягиваем на весь экран
.container

display: flex; flex-flow: row wrap; justify-content: space-between;

nav
flex: 100%; text-align: center;

плюс\минус напильником под ваш случай

фоновая заливка и фоновая картинка - это единое свойство фона.
в вашем первом примере, вы назначаете заливку, потом эту заливку переопределяете картинкой.
но вы можете объединять фоновые слои в одно свойство и скорее всего ищете такой эффект:
https://jsfiddle.net/oycvqwkx/

Весь блок (например, section) имеет фон в 3 слоя (слой не путать с блоком)
1 слой покрываете линейным градиентом (linear-gradient)
2 слой покрываете радиальным градиентом (radial-gradient) с бирюзовым цветом (отблески)
3 слой наносите текстуру в виде шестиугольника

Блок по левой стороне
Делаете цельным вектором, обязательно с группировкой. - в дальнейшем будет удобно менять статус кнопки

Центральный блок
Делаете так же векторные элементы для кубиков.
Текст можно позиционировать отдельными блоками.
Рамки для полей ввода можно сделать только боковые (по левой и правой стороне), верх\низ соответственно будет border

Блок по правой стороне
Это отдельный aside блок с вкладками, а для фона делаете 2 слоя с линейным градиентом:
- Первый слой фона для верхней линии (разделяющую кнопки вкладок)
- Второй слой фона по левой стороне блока
Кнопки вкладок делаете с псевдоэлементами, красите с прозрачностью в зависимости от статуса "активная\неактивная" и сдвигаете друг на друга внешним отступом (отрицательный margin)

Совет: смотрите как сделаны слои в макете, очень часто можно определиться, как сделать тот или иной эффект - просто изучив макет

а так?

app.use(
  session({
    secret: process.env.SECRET_KEY,
    resave: false,
    cookie: { httpOnly: false },
    saveUninitialized: false,
    store: new MongoStore({ url: process.env.DB_CONNECTION })
  })
);

type = obj.budget > 0 ? 'inc' : 'exp';

ссылка - по умолчанию это строчный элемент. (display: inline)
А т.к. в разметке есть перенос строки, то он считается за один пробел
получается что промежуток - это пробел между ссылками

действительно не понятно, как планируется использовать данный блок.
вот несколько возможных вариантов
https://codepen.io/anon/pen/zVjBdX?editors=1100