Как сделать расплывчатый градиент для фона сайта, как на изображении ниже?

Ну вы даете, какой же это сложный вопрос.
Во-первых, ответ есть прямо на сайте про который вы спрашиваете. Во-вторых, вариантов много.

Градиент делается очень банально радиальным градиентом.
Альтернативы:
svg + blur
svg и blur внутри
псевдо + blur
Но это может давать тормоза. Если таких штук много. Если не много, то и норм.

Поэтому, часто сохраняют в png (webp, avif) и вставляют фоном.

Как скрывать дочерние элементы?

От родителя.
Кликаем на заголовок, получаем его родителя. Внутри родителя ищем всё, что нужно скрыть.

Достаточно дать класс родителю кликнутого элемента. А потом в css дочерними селекторами.

Как лучше всего сверстать такие блоки?

Sergey Semenov,

Речь про дизайн, когда они в строку в этом есть логика а когда в столбец соберутся (тут уже на мой вкус)

Логично.
Но речь не про дизайн, а про то как сверстать такое расположение.

А пока оно в строку ничего никуда не полетит, если использовать подходящие единицы измерения. Возможно, + кастомки, в зависимости от реализации.

Как называется плагин в гугл хроме который позволяет записывать все изменения css в файл?

Nentra, бывает, но можно же загуглить куда она делась или во что переименовалась.
Или читать в первоисточнике
https://developer.chrome.com/docs/devtools/workspa...

Как лучше всего сверстать такие блоки?

Blondguy
Гриды, флексы..
Для скруглений псевдо либо с радиальными градиентами или svg.
Я неоднократно отвечала на подобный вопрос, можете поискать. Мне сегодня лень собирать ссылки.

Со скруглениями тут какая-то немножко беда. Правда, если это стиль макета такой и другие элементы поддерживают эту кривизну, то ок.

Как лучше всего сверстать такие блоки?

Sergey Semenov,

Начнешь менять размер экрана и полетит все хрен соберешь из за этих хвостов, в мобильной версии вообще странно будет выглядеть.

Почему оно должно куда-то полететь?
И кто сказал, что на мобилках оно не перестраивается?

Как называется плагин в гугл хроме который позволяет записывать все изменения css в файл?

Dev Tools позволяют делать это без плагинов.

На вкладке Filesystem, нажать + и выбрать корневую папку.
После этого манипуляции в Devtools будут вноситься в исходники.

Или livestyle.io

Как правильно прописать в less?

rootnoroot, уберите обертку menu-topmenuua-container, не ясно зачем он нужен, стили пишите от .topmenu, а не от .nav
Если от .nav, то через & > ul
Иначе у вас выбирались все первые li внутри любого из ul, а не только первого уровня.

Сначала нужно решить задачу на css и правильно сформировать селектор. А потом можно перевести на less. Если не получается в уме, пишите в коде.

В идеале хорошо бы сократить вложенность, благо у внутренних элементов есть классы.

Как правильно прописать в less?

rootnoroot, да мне бы тоже понять что именно вас не устраивает в вашем коде.
У поля CSS на codepen есть шестереночка, если её нажать, будут настройки, в том числе и less

Как правильно прописать в less?

Сделайте песочницу с видимой проблемой на codepen.io
Судя по коду оно должно нормально компилироваться.

Плюс песочницы в том, что пока делаете обычно становится понятно в чем дело. Например, перебивается другими стилями.

Гугл хром как отключить запрос на разрешение вставки стилей когда вставляешь их в inspector-stylesheet?

Оно вроде только один раз спрашивает.

https://stackoverflow.com/questions/77587864/disab...

Как сделать рамку вокруг сайта с помощью css?

Высота всего сайта точно 200?

Как наложить друг на друга два элемента с ::before?

derasoft, всё получится. Приходите ещё.

Как наложить друг на друга два элемента с ::before?

derasoft, всё страньше и страньше ©️

У самой формы псевдиков нет чтоль?

Как сделать рамку вокруг сайта с помощью css?

Покажите, что именно у вас не получилось в песочнице на codepen.io или jsfiddle.net или типа того.

При сборке проекта GULP плодится вот эта ошибка, как понять какой плагин устарел?

xxvxx, замените пакет на современный gulp-stacksvg. Символьные спрайты устарели.
svgmin оставьте.

svg4everybody давно не нужен, если только вы не поддерживаете ие.

При сборке проекта GULP плодится вот эта ошибка, как понять какой плагин устарел?

А если удалить эту конкретную свгшку, то соберется?
Я бы попробовала выяснить чем она отличается от всех остальных.
Например, внутри на самом деле растр.

Почему нет нормальной работы с svg в css?

pixal, ну и ещё один вариант это использование кастомных свойств. Принцип аналогичный.

Почему нет нормальной работы с svg в css?

pixal,

<svg>
  <circle fill="currentColor">
</svg>

svg {
  color: red;
  
&:hover {
    color: green;
  }
}

Естественно, свойство color наследуется, так что выбирайте селектор как удобно.

Что не так с safari?

Я бы задала для инпута display в явном виде.