За единицу (1em) берется 16 пикселей.
Чтобы указать размер в 12 пикселей, нужно соответственно, указать .75em.
Но нужно учитывать всех родителей последнего блока.
Вообще тут уже подробно разжевали.
https://jsfiddle.net/webirus/yw6pfpva/3/
Радиус закругления не приводил к оригинальному виду, просто как пример.
Через width и height для before можно сделать pixel perfect.
При клике на Войти, открывать не только форму, но и див с прозрачным фоном.
Уровни z-index, для примера, у прозрачного дива 9, у самой формы 10, чтобы была выше.
Тогда и при клике на этот див, назовем его к примеру .form__transparent уже закрывать.
Собственно, ты все правильно говоришь-то. https://jsfiddle.net/webirus/qf52o3qL/
Не понимаю, в чем заключается проблема.
Вариант 1) При наведении на блок1, меняем афтер блока2, который стоит после блока1.
Вариант 2) При наведении на блок3, меняем афтер блока 4, который является вложенным в блок3.
Просто задать для MAIN margin-left равный ширине красного блока.
Можно физически на CSS, а можно динамически на JS или jQuery, не важно.
Просто набросок https://jsfiddle.net/webirus/9vg3pud0/1/
Если на 1 инпуте, то Maskedinput для "перепрыгивания", а сам input просто оформить фоновой картинкой.
Желательно использовать моноширинный шрифт.
Но лучше разбить на 4 инпута https://jsfiddle.net/webirus/vhsq6jah/
