Евгений

Где-то встречал комментарий - за это зарплату платят :)
Если в популярных фреймворках этого нет - значит и в менее популярных шаблонах это вряд ли встретите.
Обычный изврат дизайнера - головная боль верстака. Много аналогичного встречалось и было в работе. Псевдоэлементы, радиусы, активные табы, z-index-ы - всё богатство css к вашим услугам :)

Это очень похоже на vue. Если это он и это код вашего компонента, то все и так должно работать.
Если это не он, то просто замените this на app.data(), т.к. this в данном случае указывает на methods.

Безопасно, только у всех нормальных хостингов у вас есть панель управления где вы сами назначаете IP, добавляете новые, а внутри виртуалки сами же поднимаете нужные сервисы.

element.setAttribute(name, value);
Кнопке ставите onclick="changeHref();"

function changeHref(){
var b = document.querySelector("button"); 

b.setAttribute("disabled", "disabled")
} // пример

Вот

ul {column-count:3;}

Плагин ACF

Документация

Видеоурок

вот, погугли за вас

Я бы сделал один input (для основного номера) и собрал шрифт с двумя начертаниями, одно без заливки, а другое с заливкой. И для placeholder задал бы тот который без заливки, а для поля в фокусе с заливкой. И прикрутил бы какой-нибудь jquery.mask, чтобы бред не писали.

На icomoon можно такое сделать. Вам понадобятся все необходимые буквы и цифры от 0 до 9 в svg, в двух вариантах с заливкой и без.

Canvas, если хочется быть уверенным в кроссбраузерности.
Степень геморности примерно такая же.

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

С другой стороны, вы потеряете всех, у кого отключён JS в браузере (на вашем сайте).

Например,
https://github.com/drien/jquery-flipster

Можешь вынести букву в отдельный div, а затем сверстать для него стиль.
Либо вложить букву в тег форматирования текста, указать class и добавить в стили необходимые значения для отображения.

Вопросы 3-5 это полностью по верстке, вот пример:
https://codepen.io/verkhoturov/pen/NZZvwM

Контейнер с карточками имеет "display: flex" и "flex-wrap: wrap" (тогда карточки не влезающие в строку, переносятся на следующую).

По пункту 1.
Если карточке задать определенный "order" (почитать о свойстве можно тут), то карточка займет определенную позицию в списке. (в примере я это указал).

По пункту 2.
Проще всего сделать отдельный список.
Т.е. есть вертикальный блок с карточками справа и такойже вертикальный блок с остальными карточками слева.