Danny Arty

Раз можно вводить только цифры, то используйте input[type="number"], а не input[type="text"].

Потому что в js у вас data - это якобы массив, хотя с обработчика вы возвращаете всегда строку.
Как вариант в обработчике измените код на следующий везде, где возвращаете результат:

$result = array();
if (!$stmt->rowCount()) {
    $result['error_login'] = "Пользователь с такими данными не зарегистрирован";
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
}
...
$_SESSION['user_id'] = $user['id'];
$result['us3r_id'] = $_SESSION['user_id'];
echo json_encode($result, JSON_UNESCAPED_UNICODE);

И добавьте в AJAX-запрос параметр dataType: "json"

p.s отслеживайте, что передается и что возвращается в DevTools во вкладке Network, а не Console

Ну дык flex-контейнер у вас div.server-header, а его дочерние элементы - это div без класса и div.server-item.
Так вот Nomad List и стрелка находятся внутри div-а без класса. Каким образом к ним должен применяться flex, если у их родителя нет таких стилей?
Научитесь пользоваться DevTools - смотрите исходный код и стили и все встанет на свои места.

Имхо это можно реализовать на чем угодно, просто выберите, что больше по душе, ибо сомневаюсь, что нужен какой-то ультра-функционал. А самый минимум, требуемый для сайта-фотоальбома, потянет любая нормальная CMS.
Если говорить именно о нишевых, то я как-то давно работал с фотографом из Германии, у которого был сделан сайт на Coppermine Gallery - это опенсорсовая CMS как раз для фотогалерей. Посмотрел сейчас, проект на гите живой, даже новую версию выпустили недавно.
В принципе, наверное, и на любых конструкторах можно тоже самое сделать, причем есть как раз один такого направления - Zenfolio.

У вас же уже написан скрипт для переключения класса у кнопки .uk, так добавьте туда переключение класса для блок .cardC

$(document).ready(function() {
  $('.uk').click(function() {
    $(this).toggleClass('open');
    $('.cardC').toggleClass('shown'); //например класс shown будет отвечать за состояние показан-скрыт
  });
});

И соответственно в стилях у cardC нужно убрать анимацию, но добавить transition. Также добавить стиль для .cardC.shown с нужным для вас значением translateY.

Учитывая, что они все являются дочерними элементами одного блока, и например дефолтный цвет фона div-ов background: #eee;, можно сделать так:

.grid a:hover ~ div { 
  background: #444;
}
.grid a:hover ~ a ~ div  {
  background: #eee;
}

Т.е. получается мы меняем фон всех родственных div-ов находящихся после тега a. Но родственными для него будут и div-ы относящиеся к другой неделе, поэтому вторым стилем мы возвращаем дефолтный фон всем div-ам, следующим после следующих родственных тегов a.

Вот наглядный пример

Условие вы можете писать где угодно - как в чанках, так и в шаблонах.
Если включен fenom, то можно так:

{if $_modx->resource.id == id_главной_страницы}
//тут ваш доп.блок с версткой
{/if}

Если fenom отключен, то так

[[*id:is=`id_главной_страницы`:then=`блок_с_версткой`]]

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

document.addEventListener('click', function (e) {
    if (e.target.classList.contains('js--btn-delete')) {
        //тут пишешь что нужно делать по клику
    };
});

Можете почитать про разницу между var и let тут