Максим

Решением будет закрепление меню при помощи той же библиотеки GSAP

ScrollTrigger.create({
  trigger: ".catsecmenu",
  pin: true,
  pinSpacing: false,
  markers: true,
  end: () => ScrollTrigger.maxScroll(document.body),
  invlidateOnRefresh: true
})

const title = document.getElementById("title");
const itemtitle = document.getElementById("itemtitle");

function onInput() {
  if (!title) return;
  const value = title.value;  
  itemtitle.textContent = value === '' ? 'test' : value;
}

Разобрался. Может кому-то пригодится.
mask: url(../images/mask.png) - это фотография png на которой вырезаны круги
mask-repeat: no-repeat
mask-size: auto 100%

Способ определения оставленного комментария на ваше усмотрение, сократить можно так

const { hash, href } = window.location;
const urlc = href.replace(hash, '');

if (hash && decodeURIComponent(readCookie('commentadd')) === urlc) {
  alert("Комментарий оставлен");
}

или так

const { hash, href } = window.location;

if (hash && href.includes(decodeURIComponent(readCookie('commentadd')))) {
  alert("Комментарий оставлен");
}

Спецификаций CSS занимается рабочая группа в составе W3C. Там же есть и информация о том, как принять участие / предложить свою идею.

К примеру вы можете создать issue в репозитории рабочей группы.

Однако вам стоит понимать, что работа над спецификацией уровня CSS Grid - это многолетний труд сотен людей для того, чтобы довести её до реального использования. Если вы предполагаете что за всё это время никто из них не додумался до этой идеи - то вам стоит подумать ещё раз.

Важно помнить, что в отличие от каких-то конкретный use cases которые были бы интересны для пользователей создатели спецификации сосредоточены на совершенно других вещах. Их цель - создание по возможности полного и непротиворечивого механизма, который при этом будет реалистичным в реализации и использовании.

За примерами далеко ходить не нужно: parent selector - мечта уже нескольких поколений разработчиков и тема постоянных вопросов. Однако его нет в спецификации (хотя он был в первых драфтах CSS 3 насколько я помню) и скорее всего не будет. Причину, если интересно, попробуйте поискать сами.

Или, к примеру, такое очевидное, казалось бы, опущение как отсутствие аналога :hover для "stuck" состояния элемента с position: sticky. Ведь его явно не хватает почти любому кто использовал этот стиль. Однако его не будет, о причинах (логичных, но далеко неочевидных) можно почитать в соответствующем issue.

Конечно, если вы внимательно и детально изучите все спецификации и проработаете и напишете своё предложение - оно, вероятно, будет рассмотрено. Но более вероятна ситуация что где-то здесь вы найдёте аналогичную или близкую идею.

Можно как-то так нашаманить:

Идея в том, что просто фильтр с feColorMatrix будет применяться вообще ко всему, нужно сначала выбрать область с конкретным цветом, там его заменить и наложить на оригинальное изображение.

Но важно понимать, что любые такие штуки с частичными наложениями изображения на само себя могут влететь в проблемы с размерами в нецелое количество пикселей и будут появляться артефакты в 1px по краям замененного цвета. Иногда это не важно, задачи разные бывают, но если вам нужно, чтобы было красиво и надежно, то лучше это делать на канвасе (а еще лучше - сразу в WebGL контексте) - там можно пройти по всем пикселям своими руками и заменить цвета без накладывания слоев. Это будет более замороченное решение, учитывая необходимость конвертировать SVG в изображение на канвасе, но по надежности его не превзойти.

Не использовать eval, а парсить уравнение самостоятельно или при помощи какой-нибудь готовой библиотеки.
Например вот: https://nerdamer.com/ или https://mathjs.org/
PS: серьезно. Не используйте eval. Никогда

Надо же вернуть массив всех, содержащих поисковую фразу?

computed: {
  filteredOffer() {
    const search = this.searchVacancyName.toUpperCase();
    if (0 === search.length) return this.info;

    return this.info
      .filter((item) => item.fieldTypes.vacancyName.toUpperCase().includes(search));
  }
}

Один спанчик поверх другого.
Переключайте значение ширины в зависимости от условия.
Удобно через кастомные свойства.

В теории даже на чистом CSS можно сотворить на основании :valid и/или :placeholder-showen

check

document.getElementById("checkbox").checked = true;

не check

document.getElementById("checkbox").checked = false;

let input = document.querySelector('.input')
input.checked = true

P.S. Если не принципиально, то можете просто в атрибутом поставить checked в html

может, вдохновит «цепочка преследования»: за мышкой тянется точка А – каждый кадр её смещение равно расстоянию до цели (мышки) делёному на некий коэффициент. Так что она запаздывает и замедляется по мере приближения.

К точке А тянется такой же логикой точка Б. И ещё несколько можно накинуть для совсем плавного подтягивания к цели. Fiddle без мышки: новые цели случайно выставляются на поле.

На сайте из вашего примера, кажется, только одно звено. А наклон зависит от расстояния до цели.

Upd. Немного экспериментов:

Таймеры в JS не точны, поэтому лучше вызывать tick() почаще. Скажем, 10 раз в секунду.
Мигание лучше сделать полный цикл за секунду: чтобы и появлялось и гасло двоеточие каждую секунду:
Замедленный вариант через секунду закомменчен.

id в рамках страницы должны быть уникальны.
Значит, нужно обращаться по классу, использовать querySelectorAll

const result = arr.flat();

// или

const result = Array.prototype.concat.apply([], arr);

// или

const result = arr.reduce((acc, n) => (acc.push(...n), acc), []);

// или

const result = [];

for (const n of arr) {
  for (const m of n) {
    result[result.length] = m;
  }
}