Ragtime Kitty

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

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

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

mix-blend-mode: difference;

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

.nonScroll {
    overflow: hidden;
}

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

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

Если правильно поняла, то как-то так можно

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

E.g.

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


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

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

var elements = document.querySelectorAll('#id, tag, .class');

У чекбокса есть два положения: отмечен и не отмечен.
Чтобы сделать разные стили для них, вам даже js не нужен, используйте псевдо-класс :checked.

Ну а если вот прям нужно через скрипты, то проверяйте свойство element.checked, а не стили.

Ну а если по каким-то причинам это не чекбокс, а замаскированный под него блок, то просто переключайте класс через element.classList.toggle();

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


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

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

По нажатию мышки на элементе начинаете отслеживать передвижение курсора, и в зависимости от его положения начинаете двигать блок. При отпускании мышки проверяете, дошёл ли ваш блок до вашего «условного места». Если да - делайте с ним, что душе угодно. Если нет - возвращаете в исходную позицию.

Простенький пример, топорный и на ванильном JS


Ну а можете просто воспользоваться готовым решением типа slick

Сделать рамку прозрачной, при hover менять цвет рамки на нужный.

Вам нужно слушать скролл на странице и передавать положение курсора в вашу функцию. Но т.к. определить координаты курсора при скроле невозможно, вам надо сохранять их и при скроле прибавлять/убавлять размер скрола.

Примерно так, на jquery:

Через псевдо и доп элемент.
Зависит от того, где это будет размещено, конечно, но примерно так:


Можно еще через обертку и флексы

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

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

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

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

Через JS, естессно.

document.querySelector('img').addEventListener('click', function() {
  var links = [];
  [].forEach.call(document.querySelectorAll('.random_link a'), function(el) {
    links.push(el.getAttribute("href"));
  });
  window.location.href = links[Math.floor(Math.random() * links.length)];
});

<input onblur="this.value=''" type="text">