421 lines
8.7 KiB
CSS
421 lines
8.7 KiB
CSS
:root {
|
|
color-scheme: dark;
|
|
--bg: #000000;
|
|
--panel-bg: rgba(0, 8, 16, 0.45);
|
|
--panel-border: rgba(0, 229, 255, 0.15);
|
|
--cyan: #00e5ff;
|
|
--blue: #0a369d;
|
|
--text: #e0f7fa;
|
|
--muted: #5c8a9e;
|
|
--dark-cyan: rgba(0, 229, 255, 0.1);
|
|
--font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
--font-mono: "Fira Code", "Courier New", Consolas, monospace;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
html {
|
|
min-height: 100vh;
|
|
background-color: var(--bg);
|
|
color: var(--text);
|
|
font-family: var(--font-sans);
|
|
overflow: hidden;
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
background: transparent;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
/* Background Canvas for the 3D Brain Grid */
|
|
#brain-canvas {
|
|
position: fixed;
|
|
inset: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -3;
|
|
pointer-events: none;
|
|
opacity: 0.58; /* Subtle and mysterious presence */
|
|
transition: opacity 1s ease;
|
|
}
|
|
|
|
/* Technological Grid Overlay */
|
|
body::before {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -2;
|
|
content: "";
|
|
background-image:
|
|
linear-gradient(rgba(0, 229, 255, 0.02) 1px, transparent 1px),
|
|
linear-gradient(90deg, rgba(0, 229, 255, 0.02) 1px, transparent 1px);
|
|
background-size: 40px 48px;
|
|
pointer-events: none;
|
|
mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0.4) 100%);
|
|
}
|
|
|
|
/* Retro Scanlines Filter */
|
|
body::after {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: -1;
|
|
pointer-events: none;
|
|
content: "";
|
|
background: linear-gradient(
|
|
rgba(18, 16, 16, 0) 50%,
|
|
rgba(0, 0, 0, 0.28) 50%
|
|
);
|
|
background-size: 100% 4px;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
/* HUD Interface Layout Container */
|
|
.hud-interface {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
padding: 12px;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Top & Bottom Technical Bars */
|
|
.hud-header, .hud-footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 8px 16px;
|
|
border: 1px solid var(--panel-border);
|
|
background: var(--panel-bg);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
letter-spacing: 0.05em;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.hud-logo {
|
|
color: var(--cyan);
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Dynamic ticker line */
|
|
.hud-ticker {
|
|
font-weight: 500;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
/* Workspace Panels Grid */
|
|
.hud-grid {
|
|
display: grid;
|
|
grid-template-columns: 300px 1fr 280px;
|
|
gap: 12px;
|
|
flex: 1;
|
|
min-height: 0; /* Ensures inner overflow scrolls work correctly */
|
|
}
|
|
|
|
/* Standard HUD Panels */
|
|
.hud-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--panel-border);
|
|
background: var(--panel-bg);
|
|
overflow: hidden;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.panel-header {
|
|
padding: 8px 14px;
|
|
background: rgba(0, 229, 255, 0.04);
|
|
border-bottom: 1px solid var(--panel-border);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
font-weight: bold;
|
|
letter-spacing: 0.08em;
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.panel-content {
|
|
padding: 16px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.78rem;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Diagnostics telemetry fields */
|
|
.telemetry-item {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px dashed rgba(0, 229, 255, 0.08);
|
|
padding-bottom: 6px;
|
|
}
|
|
|
|
.telemetry-item .label {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.telemetry-item .value {
|
|
color: #fff;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.telemetry-item .value.cyan {
|
|
color: var(--cyan);
|
|
}
|
|
|
|
/* Dynamic logs terminal */
|
|
.log-terminal {
|
|
flex: 1;
|
|
overflow-y: auto;
|
|
font-size: 0.7rem;
|
|
line-height: 1.45;
|
|
color: var(--muted);
|
|
gap: 4px !important;
|
|
padding: 12px;
|
|
border: 1px solid rgba(0, 229, 255, 0.05);
|
|
background: rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.log-terminal div {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.log-terminal .info { color: #88c0d0; }
|
|
.log-terminal .success { color: var(--cyan); }
|
|
.log-terminal .warn { color: #ebcb8b; }
|
|
|
|
/* Main focal core workspace */
|
|
.main-core {
|
|
background: transparent;
|
|
border: none;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 12px;
|
|
}
|
|
|
|
.core-box {
|
|
position: relative;
|
|
width: min(860px, 100%);
|
|
padding: clamp(28px, 6vw, 68px);
|
|
border: 1px solid var(--panel-border);
|
|
background: var(--panel-bg);
|
|
box-shadow: 0 0 50px rgba(0, 229, 255, 0.03);
|
|
backdrop-filter: blur(14px);
|
|
-webkit-backdrop-filter: blur(14px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* HUD bracket corners decoration */
|
|
.corner {
|
|
position: absolute;
|
|
width: 16px;
|
|
height: 16px;
|
|
border: 2px solid var(--cyan);
|
|
}
|
|
.corner-tl { top: -2px; left: -2px; border-right: none; border-bottom: none; }
|
|
.corner-tr { top: -2px; right: -2px; border-left: none; border-bottom: none; }
|
|
.corner-bl { bottom: -2px; left: -2px; border-right: none; border-top: none; }
|
|
.corner-br { bottom: -2px; right: -2px; border-left: none; border-top: none; }
|
|
|
|
.eyebrow {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
color: var(--cyan);
|
|
letter-spacing: 0.18em;
|
|
margin-bottom: 24px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
h1 {
|
|
font-size: clamp(2.2rem, 5.2vw, 4.2rem); /* Más grande y monolítico */
|
|
line-height: 1.12;
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
color: #b2d8e4; /* Tono cian-gris-plata suave y de bajo contraste, súper agradable a la vista */
|
|
/* Eliminamos text-transform: uppercase para que conserve su estilo original de mayúsculas/minúsculas y sea legible */
|
|
letter-spacing: -0.015em;
|
|
text-shadow: 0 0 30px rgba(0, 229, 255, 0.22); /* Brillo cian suave */
|
|
}
|
|
|
|
.intro {
|
|
color: var(--muted);
|
|
font-size: clamp(0.92rem, 1.8vw, 1.15rem);
|
|
line-height: 1.62;
|
|
text-align: center;
|
|
max-width: 580px;
|
|
margin-bottom: 38px;
|
|
}
|
|
|
|
/* Interactive technical terminal prompt */
|
|
.contact-terminal {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
border: 1px solid var(--panel-border);
|
|
padding: 12px 20px;
|
|
font-family: var(--font-mono);
|
|
font-size: clamp(0.82rem, 1.6vw, 0.95rem);
|
|
transition: border-color 0.25s ease;
|
|
}
|
|
|
|
.contact-terminal:hover {
|
|
border-color: var(--cyan);
|
|
}
|
|
|
|
.prompt-symbol {
|
|
color: var(--cyan);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.command-text {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.contact-link {
|
|
color: var(--cyan);
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.contact-link:hover {
|
|
text-shadow: 0 0 10px var(--cyan);
|
|
}
|
|
|
|
.terminal-cursor {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 15px;
|
|
background: var(--cyan);
|
|
animation: blink 1s step-end infinite;
|
|
}
|
|
|
|
/* Right Sidebar Selector / Buttons */
|
|
.language-switcher {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.language-switcher button {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border: 1px solid var(--panel-border);
|
|
color: var(--muted);
|
|
padding: 10px 14px;
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
font-weight: bold;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.switch-indicator {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: #222;
|
|
box-shadow: inset 0 0 3px #000;
|
|
}
|
|
|
|
.language-switcher button:hover {
|
|
border-color: var(--cyan);
|
|
color: #fff;
|
|
background: rgba(0, 229, 255, 0.02);
|
|
}
|
|
|
|
.language-switcher button.active {
|
|
border-color: var(--cyan);
|
|
background: rgba(0, 229, 255, 0.05);
|
|
color: var(--cyan);
|
|
}
|
|
|
|
.language-switcher button.active .switch-indicator {
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 8px var(--cyan);
|
|
}
|
|
|
|
/* Network map styles */
|
|
.net-map-content {
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.ascii-art {
|
|
font-family: var(--font-mono);
|
|
font-size: 0.72rem;
|
|
line-height: 1.25;
|
|
color: var(--muted);
|
|
background: rgba(0, 0, 0, 0.25);
|
|
padding: 12px 20px;
|
|
border: 1px dashed rgba(0, 229, 255, 0.1);
|
|
letter-spacing: 0.35em;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.net-status {
|
|
font-size: 0.65rem;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--muted);
|
|
letter-spacing: 0.05em;
|
|
font-family: var(--font-mono);
|
|
}
|
|
|
|
.pulse-dot {
|
|
display: inline-block;
|
|
width: 6px;
|
|
height: 6px;
|
|
border-radius: 50%;
|
|
background: var(--cyan);
|
|
box-shadow: 0 0 8px var(--cyan);
|
|
animation: pulse-glow 1.5s ease-in-out infinite;
|
|
}
|
|
|
|
/* Animations */
|
|
@keyframes blink {
|
|
50% { opacity: 0; }
|
|
}
|
|
|
|
@keyframes pulse-glow {
|
|
0%, 100% { transform: scale(1); opacity: 0.5; box-shadow: 0 0 2px var(--cyan); }
|
|
50% { transform: scale(1.2); opacity: 1; box-shadow: 0 0 10px var(--cyan); }
|
|
}
|
|
|
|
/* Responsive HUD rules */
|
|
@media (max-width: 980px) {
|
|
.hud-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sidebar-left, .sidebar-right {
|
|
display: none; /* Hide sidebars on smaller screens to prioritize center text & 3D brain */
|
|
}
|
|
|
|
.hud-header .hud-ticker {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.terminal-cursor, .pulse-dot {
|
|
animation: none !important;
|
|
}
|
|
}
|