/* login — aus templates/registration/login.html ausgelagert */
:root {
--accent: #4ca77e;
--accent-dim: rgba(76,167,126,0.45);
--accent-faint: rgba(76,167,126,0.12);
--text: rgba(255,255,255,1);
--text-dim: rgba(255,255,255,0.70);
--font-heading: 'Orbitron', 'Courier New', monospace;
--font-body: 'Courier New', monospace;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #000; }
body {
background: transparent;
font-family: var(--font-body);
color: var(--text);
overflow: hidden;
height: 100vh;
width: 100vw;
}
#three-bg { position: fixed; inset: 0; z-index: 0; }
#three-bg canvas { display: block; width: 100% !important; height: 100% !important; }
.ui {
position: fixed; inset: 0; z-index: 10;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
}
.eyebrow {
font-family: 'Dune Rise', var(--font-heading);
font-size: 10px; letter-spacing: 7px;
color: var(--accent-dim); margin-bottom: 22px;
text-transform: uppercase;
}
.title {
font-family: 'Dune Rise', var(--font-heading);
font-size: clamp(44px, 8vw, 80px); font-weight: 900;
letter-spacing: 10px; color: var(--text);
text-shadow: 0 0 18px rgba(76,167,126,0.55), 0 0 55px rgba(76,167,126,0.20);
margin-bottom: 10px;
}
/* ── HUD Panel ── */
.hud-panel {
position: relative;
padding: 32px 40px 28px;
background-color: rgba(2, 8, 18, 0.84);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(76, 167, 126, 0.28);
box-shadow:
inset 0 0 0 1px rgba(76, 167, 126, 0.05),
inset 0 0 40px rgba(76, 167, 126, 0.04),
0 0 60px rgba(0, 0, 0, 0.55);
background-image: repeating-linear-gradient(
0deg,
rgba(0,0,0,0.0) 0px, rgba(0,0,0,0.0) 2px,
rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 3px
);
width: 100%;
max-width: 400px;
}
.hud-corner {
position: absolute; width: 18px; height: 18px; pointer-events: none;
}
.hud-corner.tl { top: -1px; left: -1px;
border-top: 1.5px solid rgba(76,167,126,0.85);
border-left: 1.5px solid rgba(76,167,126,0.85); }
.hud-corner.tr { top: -1px; right: -1px;
border-top: 1.5px solid rgba(76,167,126,0.85);
border-right: 1.5px solid rgba(76,167,126,0.85); }
.hud-corner.bl { bottom: -1px; left: -1px;
border-bottom: 1.5px solid rgba(76,167,126,0.85);
border-left: 1.5px solid rgba(76,167,126,0.85); }
.hud-corner.br { bottom: -1px; right: -1px;
border-bottom: 1.5px solid rgba(76,167,126,0.85);
border-right: 1.5px solid rgba(76,167,126,0.85); }
.hud-tag {
position: absolute; top: -9px; left: 22px;
font-family: 'Courier New', monospace;
font-size: 9px; letter-spacing: 3px;
color: rgba(76, 167, 126, 0.7);
background: rgba(2, 8, 18, 1);
padding: 0 6px; text-transform: uppercase;
}
.hud-status {
margin-top: 22px; padding-top: 14px;
border-top: 1px solid rgba(76, 167, 126, 0.12);
font-family: 'Courier New', monospace;
font-size: 9px; letter-spacing: 2px;
color: rgba(76, 167, 126, 0.38);
display: flex; justify-content: space-between;
}
@keyframes blink {
0%, 100% { opacity: 1; } 50% { opacity: 0.2; }
}
.hud-blink { animation: blink 1.8s ease infinite; }
/* ── Form fields ── */
.field { margin-bottom: 18px; text-align: left; }
.field-label {
display: block;
font-family: var(--font-heading);
font-size: 9px; letter-spacing: 3px;
color: var(--accent-dim); text-transform: uppercase;
margin-bottom: 10px;
}
.field-input {
width: 100%;
background: rgba(76,167,126,0.04);
border: 1px solid rgba(76,167,126,0.22);
border-radius: 0;
padding: 13px 18px;
font-family: 'Courier New', monospace;
font-size: 16px; letter-spacing: 2px;
color: var(--text); outline: none;
transition: border-color .25s, box-shadow .25s;
caret-color: var(--accent);
}
.field-input::placeholder { color: rgba(255,255,255,0.18); font-size: 13px; }
.field-input:focus {
border-color: var(--accent-dim);
box-shadow: 0 0 0 3px rgba(76,167,126,0.12);
}
.error-msg {
background: rgba(239,68,68,0.08);
border: 1px solid rgba(239,68,68,0.3);
padding: 10px 14px; margin-bottom: 18px;
font-size: 11px; letter-spacing: 1px;
color: rgba(239,68,68,0.85);
}
.btn-login {
margin-top: 8px; width: 100%;
background: rgba(76,167,126,0.06);
border: 1px solid rgba(76,167,126,0.22);
color: rgba(255,255,255,0.50);
font-family: 'Dune Rise', var(--font-heading);
font-size: 13px; letter-spacing: 2px;
padding: 13px; border-radius: 0; cursor: pointer;
transition: color .2s, border-color .2s, background .2s;
}
.btn-login:hover {
color: #fff; border-color: var(--accent);
background: rgba(76,167,126,0.12);
}
/* ── Register prompt (below panel) ── */
.register-prompt {
margin-top: 16px;
display: flex;
align-items: center;
gap: 12px;
font-family: 'Courier New', monospace;
font-size: 10px; letter-spacing: 2px;
color: rgba(255,255,255,0.30);
}
.register-prompt a {
display: inline-flex; align-items: center; gap: 6px;
color: var(--accent);
font-family: 'Dune Rise', var(--font-heading);
font-size: 11px; letter-spacing: 3px;
text-decoration: none; text-transform: uppercase;
border-bottom: 1px solid rgba(76,167,126,0.3);
padding-bottom: 1px;
transition: color .2s, border-color .2s;
}
.register-prompt a:hover {
color: #fff; border-color: var(--accent);
}
.register-prompt a::after { content: ''; }
/* ── Misc ── */
.corner-tag {
position: fixed; top: 18px; left: 22px; z-index: 20;
font-family: 'Dune Rise', var(--font-heading);
font-size: 8px; letter-spacing: 3px;
color: rgba(76,167,126,0.35); text-transform: uppercase;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeUp .6s ease both; }
.delay-1 { animation-delay: .15s; }
.delay-2 { animation-delay: .3s; }
.delay-3 { animation-delay: .45s; }