Фоновая волна - clip-path и вообще легко гуглятся.
Волны наложения: тут классические варианты выбора bg size
Чтобы сломать пропорции SVG нужен атрибут preserveAspectRatio
Да и всё вроде
Может быть, можно достать из макета волны целиком, без обрывающихся линий по краям. Тогда ещё вариант просто расположить по центу и ок.
И да, обычно такие волны в растре весят заметно меньше, чем векторные. И тогда image-set и media.
1. https://developer.mozilla.org/en-US/docs/Web/CSS/p...
2. &::before:hover это дичь/ У псевдоэлементов нет состояний.
3. Нельзя писать текст ошибки в псевдоэлемент. Это контент, который должен быть доступен всем.
Начните вот отсюда https://learn.javascript.ru/introduction-browser-e...
Прочтение этой статьи, возможно, наведет вас на мысль как это вообще переделать. Пока логика скрипта выглядит очень странно и зачем там инпут в принципе.
И старайтесь давать названия нормальными английскими словами, чтобы другие люди могли понять о чем вообще идет речь.
Я потратила некоторое время, чтобы догадаться ху из pocup.
2. Грид родителю. И grid-template-columns: min-content 1fr
Если цель кнопка, то при гридах для неё не нужна обертка, просто поставить по центру ячейки.