TSM.ID
346 lines
8.7 KiB
CSS
346 lines
8.7 KiB
CSS
/* ========================================================
|
|
XCU: COSMIC MILITARY GATEWAY STYLES
|
|
======================================================== */
|
|
|
|
.login-gateway-container {
|
|
position: relative;
|
|
width: 100vw;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: #020108;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Deep Space Matrix Canvas */
|
|
.quantum-canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* HUD Overlay Layer */
|
|
.hud-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(circle at center, transparent 40%, rgba(0, 0, 0, 0.8) 100%),
|
|
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 243, 255, 0.03) 3px, transparent 4px);
|
|
box-shadow: inset 0 0 100px rgba(0, 243, 255, 0.1);
|
|
}
|
|
|
|
.radar-ring {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: 80vh;
|
|
height: 80vh;
|
|
border: 1px dashed rgba(0, 243, 255, 0.1);
|
|
border-radius: 50%;
|
|
animation: radarSpin 60s linear infinite;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.radar-ring::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px; left: 50%;
|
|
width: 20px; height: 20px;
|
|
background: rgba(0, 243, 255, 0.3);
|
|
box-shadow: 0 0 15px rgba(0, 243, 255, 0.8);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
@keyframes radarSpin {
|
|
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
|
}
|
|
|
|
/* Monolith Terminal */
|
|
.aegis-monolith {
|
|
position: relative;
|
|
z-index: 10;
|
|
margin: auto;
|
|
width: 90%;
|
|
max-width: 500px;
|
|
background: rgba(5, 5, 10, 0.85);
|
|
-webkit-backdrop-filter: blur(20px);
|
|
backdrop-filter: blur(20px);
|
|
border: 1px solid rgba(0, 243, 255, 0.2);
|
|
border-radius: 4px;
|
|
box-shadow: 0 0 50px rgba(0, 0, 0, 0.9), inset 0 0 20px rgba(0, 243, 255, 0.05);
|
|
padding: 40px;
|
|
overflow: hidden;
|
|
animation: monolithActivate 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
|
}
|
|
|
|
.aegis-monolith::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0; left: 0; right: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, transparent, var(--accent-cyan), transparent);
|
|
animation: scanningBeam 3s linear infinite;
|
|
}
|
|
|
|
@keyframes scanningBeam {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@keyframes monolithActivate {
|
|
0% { transform: scale(0.95) translateY(20px); opacity: 0; filter: blur(10px); }
|
|
100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
|
|
}
|
|
|
|
/* Military Title */
|
|
.supreme-title {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 2.5rem;
|
|
font-weight: 800;
|
|
color: #fff;
|
|
text-align: center;
|
|
letter-spacing: 10px;
|
|
margin: 0 0 10px 0;
|
|
text-shadow: 0 0 15px rgba(0, 243, 255, 0.5);
|
|
}
|
|
|
|
.supreme-subtitle {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
color: var(--accent-red);
|
|
text-align: center;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 5px;
|
|
margin-bottom: 40px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
/* Kinetic Glitch Text */
|
|
.kinetic-glitch {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
position: relative;
|
|
color: var(--text-main);
|
|
}
|
|
.kinetic-glitch::before, .kinetic-glitch::after {
|
|
content: attr(data-text);
|
|
position: absolute;
|
|
top: 0; left: 0;
|
|
width: 100%; height: 100%;
|
|
background: transparent;
|
|
}
|
|
.kinetic-glitch::before {
|
|
left: 2px;
|
|
text-shadow: -1px 0 red;
|
|
clip: rect(24px, 550px, 90px, 0);
|
|
animation: glitch-anim-2 3s infinite linear alternate-reverse;
|
|
}
|
|
.kinetic-glitch::after {
|
|
left: -2px;
|
|
text-shadow: -1px 0 blue;
|
|
clip: rect(85px, 550px, 140px, 0);
|
|
animation: glitch-anim 2.5s infinite linear alternate-reverse;
|
|
}
|
|
@keyframes glitch-anim {
|
|
0% { clip: rect(4px, 9999px, 58px, 0); }
|
|
20% { clip: rect(79px, 9999px, 83px, 0); }
|
|
40% { clip: rect(10px, 9999px, 35px, 0); }
|
|
60% { clip: rect(98px, 9999px, 4px, 0); }
|
|
80% { clip: rect(56px, 9999px, 15px, 0); }
|
|
100% { clip: rect(24px, 9999px, 90px, 0); }
|
|
}
|
|
|
|
/* Biometric Sonar Button */
|
|
.biometric-sonar-btn {
|
|
position: relative;
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: rgba(0, 255, 128, 0.05);
|
|
border: 1px solid var(--accent-green);
|
|
border-radius: 4px;
|
|
color: var(--accent-green);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 1rem;
|
|
font-weight: bold;
|
|
letter-spacing: 2px;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
margin-bottom: 20px;
|
|
}
|
|
.biometric-sonar-btn:hover {
|
|
background: rgba(0, 255, 128, 0.15);
|
|
box-shadow: 0 0 20px rgba(0, 255, 128, 0.4);
|
|
}
|
|
.biometric-sonar-btn::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%; left: 50%;
|
|
width: 10px; height: 10px;
|
|
background: transparent;
|
|
border: 1px solid var(--accent-green);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
animation: sonarPulse 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
|
|
}
|
|
@keyframes sonarPulse {
|
|
0% { width: 10px; height: 10px; opacity: 1; }
|
|
100% { width: 300px; height: 300px; opacity: 0; }
|
|
}
|
|
|
|
/* Sniper Reticle QR */
|
|
.sniper-qr-container {
|
|
position: relative;
|
|
width: fit-content;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
background: rgba(0, 243, 255, 0.05);
|
|
}
|
|
.sniper-qr-container::before, .sniper-qr-container::after,
|
|
.sniper-qr-container .corners::before, .sniper-qr-container .corners::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 20px; height: 20px;
|
|
border-color: var(--accent-cyan);
|
|
border-style: solid;
|
|
}
|
|
.sniper-qr-container::before { top: 0; left: 0; border-width: 2px 0 0 2px; }
|
|
.sniper-qr-container::after { top: 0; right: 0; border-width: 2px 2px 0 0; }
|
|
.sniper-qr-container .corners::before { bottom: 0; left: 0; border-width: 0 0 2px 2px; }
|
|
.sniper-qr-container .corners::after { bottom: 0; right: 0; border-width: 0 2px 2px 0; }
|
|
|
|
.cipher-text {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
font-size: 0.75rem;
|
|
color: var(--accent-cyan);
|
|
margin-top: 15px;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
/* Dropzone Reactor */
|
|
.reactor-dropzone {
|
|
border: 1px dashed var(--accent-yellow);
|
|
background: rgba(255, 234, 0, 0.02);
|
|
padding: 30px;
|
|
border-radius: 4px;
|
|
text-align: center;
|
|
color: var(--accent-yellow);
|
|
font-family: 'JetBrains Mono', monospace;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
/* Active Drag State */
|
|
.reactor-active {
|
|
position: fixed;
|
|
top: 0; left: 0; right: 0; bottom: 0;
|
|
background: rgba(255, 0, 60, 0.1) !important;
|
|
border: 10px solid var(--accent-red) !important;
|
|
z-index: 9999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: inset 0 0 100px rgba(255, 0, 60, 0.5);
|
|
animation: reactorBreathing 1s alternate infinite;
|
|
}
|
|
|
|
@keyframes reactorBreathing {
|
|
0% { background: rgba(255, 0, 60, 0.1); }
|
|
100% { background: rgba(255, 0, 60, 0.2); box-shadow: inset 0 0 200px rgba(255, 0, 60, 0.8); }
|
|
}
|
|
|
|
.typewriter-text {
|
|
overflow: hidden;
|
|
border-right: .15em solid var(--accent-red);
|
|
white-space: nowrap;
|
|
margin: 0 auto;
|
|
letter-spacing: .1em;
|
|
animation: typing 2s steps(40, end), blink-caret .75s step-end infinite;
|
|
}
|
|
|
|
@keyframes typing {
|
|
from { width: 0 }
|
|
to { width: 100% }
|
|
}
|
|
|
|
@keyframes blink-caret {
|
|
from, to { border-color: transparent }
|
|
50% { border-color: var(--accent-red); }
|
|
}
|
|
|
|
/* ========================================================
|
|
LIGHT THEME OVERRIDES (FASAD CAHAYA)
|
|
======================================================== */
|
|
|
|
.light-theme .login-gateway-container {
|
|
background-color: #f0f4f8;
|
|
}
|
|
|
|
.light-theme .hud-overlay {
|
|
background:
|
|
radial-gradient(circle at center, transparent 40%, rgba(255, 255, 255, 0.8) 100%),
|
|
repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 100, 255, 0.05) 3px, transparent 4px);
|
|
box-shadow: inset 0 0 100px rgba(0, 100, 255, 0.1);
|
|
}
|
|
|
|
.light-theme .radar-ring {
|
|
border: 1px dashed rgba(0, 100, 255, 0.2);
|
|
}
|
|
|
|
.light-theme .radar-ring::before {
|
|
background: rgba(0, 100, 255, 0.5);
|
|
box-shadow: 0 0 15px rgba(0, 100, 255, 0.8);
|
|
}
|
|
|
|
.light-theme .aegis-monolith {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
border: 1px solid rgba(0, 100, 255, 0.2);
|
|
box-shadow: 0 0 50px rgba(0, 0, 0, 0.1), inset 0 0 20px rgba(0, 100, 255, 0.05);
|
|
}
|
|
|
|
.light-theme .supreme-title {
|
|
color: #111;
|
|
text-shadow: 0 0 15px rgba(0, 100, 255, 0.3);
|
|
}
|
|
|
|
.light-theme .kinetic-glitch::before,
|
|
.light-theme .kinetic-glitch::after {
|
|
background: transparent;
|
|
}
|
|
|
|
.light-theme .biometric-sonar-btn {
|
|
background: rgba(0, 150, 100, 0.1);
|
|
border: 1px solid #009664;
|
|
color: #009664;
|
|
}
|
|
|
|
.light-theme .biometric-sonar-btn:hover {
|
|
background: rgba(0, 150, 100, 0.2);
|
|
box-shadow: 0 0 20px rgba(0, 150, 100, 0.4);
|
|
}
|
|
|
|
.light-theme .biometric-sonar-btn::after {
|
|
border: 1px solid #009664;
|
|
}
|
|
|
|
.light-theme .reactor-dropzone {
|
|
border: 1px dashed #d97706;
|
|
background: rgba(217, 119, 6, 0.05);
|
|
color: #d97706;
|
|
}
|
|
|
|
.light-theme .reactor-active {
|
|
background: rgba(220, 38, 38, 0.1) !important;
|
|
border: 10px solid #dc2626 !important;
|
|
box-shadow: inset 0 0 100px rgba(220, 38, 38, 0.3);
|
|
}
|