Как добавить класс при клике?

const sub_contacts = document.querySelector('header_sub_cms_contacts');

Потеряли точку.
header_sub_cms_contacts это класс, а не тег.
block тоже.

Как сверстать этот элемент?

Bohdan Bilous, написала в ответы

Как сверстать этот элемент?

Флекс/грид и псевдоэлемент.
Или бордер и отриц margin для текстов с белым фоном.
Первый вариант лучше.

Как исправить обрезание текста через css?

https://codepen.io/AnnaSummer/pen/poVEXmy

Как совместить overflow: hidden; и position: sticky?

wakenbyWork,

Тоже так захотел, но на фоне этой секции тоже есть этот круг.

Ну и почему нельзя ей тоже задать overflow?

Ну либо наложить блок со sticky поверх блока с фоном

Как совместить overflow: hidden; и position: sticky?

Напрашивается идея обернуть во wrapper всё кроме sticky

Как убрать белые скругления?

Anton, тогда варианты:
1. задать еще + тень, которая перекрое белый фон
2. убрать белый фон у обертки и задавать его контенту ниже
3. задать border-radius обертке с белым фоном
4. заменить белый фон на градиент с верхней голубой полоской

что-то ещё в том же духе

Оцените верстку, плиз?

В современном мире верстка без адаптива это вообще не верстка.

А так.. обертки лишние, иконки вставлены как контентные img, семантика местами подхрамывает, названия классов можно сократить...
Дальше сами читайте https://habr.com/ru/company/htmlacademy/blog/566244/

Как убрать белые скругления?

bg color голубой для first-img

Почему не удается выдвинуть блок выше другого с z index?

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

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

Почему не удается выдвинуть блок выше другого с z index?

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

Так что придется вам читать самостоятельно: контекст наложения

Почему не удается выдвинуть блок выше другого с z index?

Почему не удается выдвинуть блок выше другого с z index?

Потому что нужно менять z-index не корзины, а её родителя, лежащего в одном контексте наложения с уведомлением.

Сайт не открылся.

Почему анимация выполняется так?

wakenbyWork, атрибуты cx и cy отвечают за координаты центра.
У ваших орбит центры в разных местах.
Поставьте их в одну точку.

Почему не работает justify-content: center?

Оно работает.

Просто вы задали ширину 100% для header__menu, вот оно и растягивается на всё что может.

Как изменить переход по ссылке с браузеров?

Goggle "как настроить переадресацию"?
Про поисковики читать разделы помощи "переезд сайта".
https://yandex.ru/support/webmaster/yandex-indexin...
У гугла аналогично

Почему анимация выполняется так?

wakenbyWork, посмотрите на координаты центра орбит. Видите, что они в разных точках? Зачем?

Почему анимация выполняется так?

Сергей Сергей,

а мой взгляд это будет достаточно наглядно.

Да, это разумно

Откуда непонятные символы вместо иконочного шрифта?

vahromeevilya-widestudio, довольно часто делаю так:
в :root определяются кастомные свойства со всем иконками
--icon-search: url(data:image/svg+xml, и т.д.)

пример

--icon-search: url("data:image/svg+xml,%3Csvg width='36' height='36' viewBox='0 0 36 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.171 20.8154H22.0189L21.6106 20.4217C23.0397 18.7592 23.9002 16.6008 23.9002 14.2529C23.9002 9.01749 19.6564 4.77374 14.421 4.77374C9.18557 4.77374 4.94182 9.01749 4.94182 14.2529C4.94182 19.4883 9.18557 23.7321 14.421 23.7321C16.7689 23.7321 18.9272 22.8717 20.5897 21.4425L20.9835 21.8508V23.0029L28.2752 30.28L30.4481 28.1071L23.171 20.8154ZM14.421 20.8154C10.7897 20.8154 7.85848 17.8842 7.85848 14.2529C7.85848 10.6217 10.7897 7.69041 14.421 7.69041C18.0522 7.69041 20.9835 10.6217 20.9835 14.2529C20.9835 17.8842 18.0522 20.8154 14.421 20.8154Z' fill='%23BEDEF5'/%3E%3C/svg%3E%0A");

И дальше в bg

background: var(--icon-search) no-repeat ... и что там ещё нужно

Если нужно менять цвет, то не в bg, а в mask.

Почему анимация выполняется так?

Сергей Сергей, лучше сначала совместить центры орбит. А потом попадать по ним шариками.
А то я очень сомневаюсь, что они должны быть смещены по задумке.

Откуда непонятные символы вместо иконочного шрифта?

vahromeevilya-widestudio,
Не получилось воспроизвести проблему.
Раз вы собирали шрифт, значит, есть исходные svg.
Так что можно взять и выкинуть шрифт.