/* Full-screen login gate, shared by both pages. Sits above everything and is not affected by the board's scaled stage (it lives at level). */ .login { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 24px; background: #06102b url("../assets/img/bg-set.jpg") center/cover no-repeat; font-family: "Helvetica Neue", -apple-system, Arial, sans-serif; } .login[hidden] { display: none; } .login::before { content: ""; position: absolute; inset: 0; background: rgba(4,10,30,.8); } .login__card { position: relative; width: 100%; max-width: 380px; padding: 28px 26px 24px; background: #101a3d; border: 2px solid var(--gold, #ffc000); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.7); color: #e6edff; text-align: center; } .login__title { font: 800 34px/1 "Arial Black", Impact, sans-serif; letter-spacing: .04em; color: var(--gold, #ffc000); } .login__sub { color: #9fb2d8; margin: 6px 0 22px; letter-spacing: .12em; text-transform: uppercase; font-size: 12px; } .login__label { display: block; text-align: left; font-size: 13px; color: #8fb2f0; margin: 12px 0 6px; letter-spacing: .06em; } .login__select, .login__input { width: 100%; padding: 13px 12px; font-size: 16px; color: #fff; background: #111c44; border: 2px solid #2b62c9; border-radius: 8px; } .login__select:focus, .login__input:focus { outline: 0; border-color: var(--gold, #ffc000); } .login__go { width: 100%; margin-top: 20px; padding: 15px; font: 800 18px/1 "Arial Black", Impact, sans-serif; letter-spacing: .1em; color: #10204d; background: var(--gold, #ffc000); border: 0; border-radius: 8px; cursor: pointer; } .login__go:hover:not(:disabled) { filter: brightness(1.06); } .login__go:disabled { opacity: .6; cursor: default; } .login__err { min-height: 20px; margin-top: 12px; color: #ff9a9a; font-size: 14px; } /* Small "signed in as / sign out" affordance in the editor bar */ .whoami { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #9fb2d8; } .whoami b { color: #cfe0ff; } .whoami button { padding: 6px 10px; font: 700 12px/1 "Arial Black", sans-serif; letter-spacing: .06em; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); border-radius: 5px; cursor: pointer; } .whoami button:hover { background: rgba(255,255,255,.24); }