Vertical misalignment of login box header

What does this MR do?

Refactor CSS for pages/login.scss (part of which was introduced mainly in !6328 (merged)):

• to remove CSS duplication for the login box
• to make the login box independent from Bootstrap 3's nav-tabs
• as a result, to eliminate 6 nested selectors (cf. #39584 (moved))

Are there points in the code the reviewer needs to double check?

n/a

Why was this MR needed?

• to eliminate vertical misalignment in the login box header
• to keep CSS code cleaned up

Screenshots (if relevant)

Does this MR meet the acceptance criteria?

• Changelog entry added, if necessary
• [n/a] Documentation created/updated
• [n/a] API support added
• [n/a] Tests added for this feature/bug
• Review
  • Has been reviewed by UX
  • Has been reviewed by Frontend
  • [n/a] Has been reviewed by Backend
  • [n/a] Has been reviewed by Database
• Conform by the merge request performance guides
• Conform by the style guides
• Squashed related commits together
• [n/a] Internationalization required/considered

What are the relevant issue numbers?

Closes #41748 (closed)

Blocked by !16271 (merged)