profesor08

1. В label не должно быть блочных элементов
2. В label не должно быть ссылок

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

Вывод: надо обновить требования, чтоб они соответствовали возможностям и спецификации HTML. Если потребуется доработать дизайн.

Вся сложность заключается в том, чтоб узнать именно высоту содержимого. Тут поможет scrollHeight. Но если растягивать постоянно, то и значение будет расти, а значит если удалить текст, то блок не уменьшится. Нужен какой-то трюк, чтоб сбросить его к нормальному, задав высоту 0. Юзер ничего не заметит и магия сработает.

const textarea = document.querySelector<HTMLTextAreaElement>("textarea");
const minHeight = 60;
const maxHeight = 260;

const constrain = (n: number, low: number, high: number) => {
  return Math.max(Math.min(n, high), low);
};

if (textarea !== null) {
  textarea.addEventListener("input", () => {
    textarea.style.setProperty("height", "0");
    textarea.style.setProperty(
      "height",
      constrain(textarea.scrollHeight, minHeight, maxHeight) + "px",
    );
  });
}

P.S. размеры внутренних отступов и рамок надо будет тоже учитывать, но там все просто.

Если файлов парочка, то значения не имеет. Если файлов много, то все зависит от браузера, сервера и того, сколько они могут передать файлов одновременно. Но не стоит на это сильно рассчитывать, обычно этого недостаточно.
Пихать все в один бандл тоже не совсем здравая идея, тогда будет загружаться весь код единоразово, и его объем будет не малым. Кроме того будет загружен код, который не нужен на данный странице сайта. Зачем грузить все, если нужен только клик по кнопки?
Из этого всего вытекает разумное решение, загружать маленькие кусочки только тогда, когда они нужны.

Никак, установи заранее z-index для букв, обернув каждую в свой тег.

svg элемент с дугой белого цвета и тенью.

Шрифты надо подключать в index.html, который лежит в проекте. А располагать их можешь где угодно, хоть в папке public, хоть просто с cdn подключать. В .jsx, .tsx файлах не надо подключать шрифты, это может привести к мерцанию, при обновлении некоторых компонентов или страницы.

Используй backdrop-filter. Где не поддерживается, ничего страшного не случится.

https://scrollmagic.io/
https://scrollmagic.io/examples/advanced/section_w...

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

Есть несколько вариантов:

1. Взять эту svg и вставить в свой html, поправить номера и все. На этом вся верстка этого блока окончена. В svg должны быть и правильный пунктир, и тени и цвета.
   
2. Попытаться сверстать кривое подобие на html и css. Результат как на картинке - недостижим. Примеры выше и вот этот (https://codepen.io/Profesor08/pen/XWedbmj), это прекрасно демонстрируют.
   
   
   

В девтулзах, в стилях отображается конкретно то, что прописано в .css файле или в теге <style>. Это, в первую очередь, важно для разработчиков сайта, чтоб понимать что будет на выходе. Во вторых, так как разработчики используют некую тему, то они не заморачиваются над кодами цветов, они просто используют --btn-color, не заморачиваясь над тем, какой там цвет кода. И браузер всеми силами, в меру своих возможностей, помогает им, предоставляя доступ к отладочной информации.

Ты же, будучи посторонним и непричастным к разработке сайта, не имеешь доступа к исходникам и всей отладочной информации. Более того, тебе этого и не надо. И разработчикам это тоже не надо. А это значит, что придется пользовать тем, что есть:

• наводишь на переменную и смотришь ее значение
  
• кликаешь на переменную и переходишь к ее объявлению
  

Если же такой расклад не устраивает, то есть еще варианты:

• Связаться с разработчиками сайта и попросить их убрать css переменные и заменить их на коды цветов. Скорее всего будешь послан xD в том или ином виде, если вообще ответят.
  
• Написать свое расширение для девтулзов, которое поставить финальные значения на место переменных.
  
• Если написать не в силах, то заплати кому-то за разработку.
  
• Если денег на себя жалко, то попроси кого-то написать такое расширение, авось повезет.
  
• Еще можно попытаться упросить разработчиков браузера, но это не просто. Но если получится, то через пару лет xD добавится галочка.
  

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

https://getbootstrap.com/docs/5.1/forms/input-group/

Контейнеру задай position: relative/absolute; и изолируй его isolation: isolate;, а псевдоэлементу задай фон градиентом из двух цветов и помести на нижний слой z-index: -1.

Круг это svg элемент. Сам элемент круга рисовать кривыми. Чтоб получилась капля, у одной из кривых смещать точку от центра. Все это сделать заранее и запомнить значения. При движении мышки подсчитывать некоторое значение ускорения и в зависимости от этого значения, смещать точку кривой от одного положения до другого. Для этого можно использовать svg анимацию и передавать в нее прогресс, либо вручную высчитывать положение точки Далее поворачивать всю svg на нужный угол, чтоб конец капли смотрел на курсор. И останется сделать плавное перемещение за курсором. Собственно все.