Ragtime Kitty

Типа вот так должно быть?

insertAdjacentHTML()
insertAdjacentElement()

Есть еще такой вариант

Как вам подсказали в комментариях: перенесите сами инпуты в начало общей обертки и немного измените селекторы:


И в дальнейшем выкладывайте, пожалуйста, весь код в песочницу.

Если карта динамичная, то backdrop-filter, который, увы, работает только в сафари или вебките с флагами.

Вот тут пара приемов чтобы его имитировать: https://iamvdo.me/en/blog/css-element-function#fak...
А вот тут общая инфа: https://iamvdo.me/en/blog/advanced-css-filters

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

При открытии меню вешается класс на body

.nonScroll {
    overflow: hidden;
}

Т.е. при открытом меню у body просто отключен скролл.

Я бы как-то так делала.

Появление через обычные @keyframes и forwards
Чтобы перестраивалась шапка, как уже сказали, отслеживайте скролл и добавляйте класс. Там пара строчек. С чем именно трудности?

E.g.

Через SVG, можно инлайн, можно просто картинкой:


Размеры рамки через stroke-dasharray='length gap' stroke-width='3'

Можно еще через маску, если фон будет не сплошным цветом.

Вы можете поменять их местами в разметке и использовать обертку с column-reverse:


Только саму обертку таким образом скрыть не получится. Тут только скрипты.

Вот такое на ум приходит. Ну под шрифт подогнать там если что

Я бы делала как-то так:

Как организовать точечное применение стиля на конкретной странице?

if (document.location.href === "нужная страница") {
	document.querySelector(".category-sub-menu > li[data-depth='0']:nth-child(12)").style.cssText = "border-bottom: 8px double #630335;";
}

Жесть какая-то, ну это на вашей совести.

Никак, только эмитировать высоту через padding-bottom, да и зачем вам это? В инпут текст одна строка.
Может вам лучше <textarea> подойдет?

Можно сделать две секции: в одной из них большой блок, в другой маленький. По клику на кнопку менять их местами.


Анимации, чтобы "уходил", это уже jQuery либо ручками.

Вы можете расположить все инпуты где и как вам угодно, а потом передавать их в форму через атрибут form

<form id='form1' action=""></form>
<form id='form2' action=""></form>

<div class="inputs">
  <input form="form1" type="text">
  <input form="form2" type="text">
  <textarea form="form1"></textarea>
  <input form="form1" type="text">
</div>

Можно упороться и сделать без скриптов и с упоротой разметкой

Если у переключателя только два состояния, то проще будет сделать это через один класс и транзишены, а не анимации:

Тут недавно кто-то скидывал вот этот:


Mozilla, Chrome, Opera, Safari, Edge - во всех работает.