archelon

Используйте компоненты.
https://vc.ru/design/396584-chto-takoe-komponenty-...

tldr: подключайте svg и не мучайтесь.

а) Трудозатраты
Подключить картинку быстрее и проще.
б) Надежность
Изображение будет гарантированно отображаться как надо на всех устройствах. Если где-то вдруг не загрузится шрифт, или не успеют прогрузиться стили, вы потеряете оформление.
в) Индексация
Теоретически может оказаться полезным то, что текст будет прочитан и учтен поисковиками, хотя обычно это не дает каких-то преимуществ.
г) Оптимизация
В разных случаях меньше будет весить картинка или оформленный текст.
Если для текстового логотипа надо прилинковать пару нестандартных шрифтов, это значительно увеличит количество кБайтов. Если нет, текст будет немного меньше весить, но выигрыш будет несущественным.
д) Особенности дизайна
В некоторых случаях может быть нестандартный дизайн, где текстовый логотип — необходимость.
е) Действительно простой логотип
Ну и конечно, если логотип — это банально название компании / марки, набранное уже подключенным шрифтом, и никаких дополнительных итераций (интерлиньяж, трекинг и т.п.) не требуется, тогда, действительно, проще набрать текстом.

Добавить в acf поле типа Да / Нет (True / False).
В шаблоне проверяем. Если да — выводим нужный класс.
Примерно так:

<div class="element<?php if( get_field('glow') ):?> element--glow<?php endif; ?>">

с градиентом, как и с фоновым изображением, transition не работает.
можно попробовать с помощью псевдоэлементов.
https://codepen.io/archelon/pen/XWEMVGW

Если дизайнер проявил небрежность, пиксел-перфект (это вообще достаточно условное понятие) не нужен. Требуется сверстать аккуратно, а не точно.

IE10 и страше — нет, кроме возможных очень редких кейсов, которые должны быть специально оговорены.
IE11 — нет, максимум самый базовый функционал, чтобы пользователь мог что-то открыть и прочитать.

Заказчик требует:

Если заказчик компетентен и понимает, зачем нужна поддержка IE (например, значимый процент ЦА в учреждениях со старыми компами без обновлений), значит надо делать.

Но часто в ТЗ просто копипастят давно не имеющие смысла требования, навроде поддержки IE8+, устаревших кодировок и т.п. В таком случае нужно обсудить это и скорректировать ТЗ.

Помимо решения с position: absolute, картинке можно задать такие свойства:
1. transform: translateY(-50px)
или
2. margin-top:-50px

Потому что алгоритмы сочли текст страницы более информативным и релевантным.
Сниппет может быть сформирован даже на основе данных из сторонних источников.
https://yandex.ru/support/webmaster/search-results...

приблизительно так

<header>
  <div class="container d-flex">
    <img class="col-1" src="logo.svg">
    <div class="col-11">
      <div class="container d-flex flex-wrap justify-content-right">
        <form class="col-12 col-lg-auto mb-3 mb-lg-0 poisk_form">
          <input type="search" class="form-control" placeholder="ПОИСК..." aria-label="Поиск">
        </form>
        <ul class="nav justify-content-right">
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector.svg"></a></li>
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="Vector2.svg"></a></li>
          <li class="nav-item-number nav-link link-dark">8 (381) 233-50-35</li>
          <li class="nav-item-vector"><a href="#" class="nav-link link-dark px-2" aria-current="page"><img src="корзина.svg"></a></li>
        </ul>
      </div>
      <nav class="container flex-wrap">
        <ul class="nav justify-content-right">
          <li class="nav-item-burger"><img src="burger.svg"></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2" aria-current="page">Каталог</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2 active">Новинки</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Акции</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Доставка</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">О нас</a></li>
          <li class="nav-item"><a href="#" class="nav-link link-dark px-2">Контакты</a></li>
        </ul>
      </nav>
    </div>
  </div>
</header>

вариантов несколько, но с текущей разметкой не получится.
кроме того, двигать разноцветные прямоугольники — это абстрактная задача. на практике нужно учитывать контент.
самое простое:

<div class="one"></div>
  <div class="two"><div class="pocket"></div></div>

body {
  display: flex;
}
.one {
  width: 200px;
  height: 200px;
  background-color: pink;
}

.pocket {
  position: absolute;
  left: -50px;
  height: 100px;
  width: 100px;
  border: 1px solid;
}

.two {
  position: relative;
  overflow:hidden;
  width: 200px;
  height: 200px;
  background-color: blue;
}

кнопка абсолютом поверх input
https://jsfiddle.net/ntf05zsp/

Всегда зависит от ситуации. В вашем случае — для a задать display: block;