Página en Mantenimiento
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #0a0a0f;
--surface: #12121a;
--accent: #e8ff47;
--accent2: #47c8ff;
--text: #f0f0f0;
--muted: #555570;
--border: #1e1e2e;
}
body {
background: var(--bg);
color: var(--text);
font-family: 'DM Mono', monospace;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
}
/* Grid background */
body::before {
content: '';
position: fixed;
inset: 0;
background-image:
linear-gradient(rgba(232,255,71,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(232,255,71,0.04) 1px, transparent 1px);
background-size: 60px 60px;
pointer-events: none;
z-index: 0;
}
/* Glow blobs */
.blob {
position: fixed;
border-radius: 50%;
filter: blur(120px);
opacity: 0.18;
pointer-events: none;
z-index: 0;
}
.blob-1 {
width: 600px; height: 600px;
background: var(--accent);
top: -200px; left: -200px;
animation: drift 14s ease-in-out infinite alternate;
}
.blob-2 {
width: 500px; height: 500px;
background: var(--accent2);
bottom: -150px; right: -150px;
animation: drift 18s ease-in-out infinite alternate-reverse;
}
@keyframes drift {
from { transform: translate(0, 0) scale(1); }
to { transform: translate(40px, 30px) scale(1.08); }
}
/* Main card */
.card {
position: relative;
z-index: 1;
max-width: 640px;
width: 90%;
border: 1px solid var(--border);
border-radius: 2px;
background: var(--surface);
padding: 3rem 3.5rem;
animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
/* Top bar */
.topbar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 2.5rem;
}
.dot {
width: 10px; height: 10px;
border-radius: 50%;
}
.dot-1 { background: #ff5f57; }
.dot-2 { background: #febc2e; }
.dot-3 { background: #28c840; }
.status-tag {
margin-left: auto;
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--accent);
border: 1px solid var(--accent);
padding: 3px 10px;
border-radius: 2px;
animation: blink 2.2s step-end infinite;
}
@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* Gear icon */
.icon-wrap {
width: 64px; height: 64px;
margin-bottom: 1.8rem;
position: relative;
}
.gear {
width: 64px; height: 64px;
animation: spin 8s linear infinite;
}
.gear-inner {
animation: spin-reverse 5s linear infinite;
position: absolute;
width: 32px; height: 32px;
top: 16px; left: 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-reverse { to { transform: rotate(-360deg); } }
/* Heading */
h1 {
font-family: 'Syne', sans-serif;
font-weight: 800;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.05;
margin-bottom: 0.6rem;
letter-spacing: -0.02em;
}
h1 span { color: var(--accent); }
.subtitle {
font-size: 0.8rem;
color: var(--muted);
letter-spacing: 0.06em;
margin-bottom: 2rem;
}
/* Divider */
.divider {
height: 1px;
background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
margin-bottom: 2rem;
opacity: 0.4;
}
/* Message */
.message {
font-size: 0.85rem;
color: #888899;
line-height: 1.8;
margin-bottom: 2.2rem;
}
/* Progress bar */
.progress-label {
font-size: 0.65rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--muted);
margin-bottom: 0.5rem;
}
.progress-track {
height: 3px;
background: var(--border);
border-radius: 2px;
overflow: hidden;
margin-bottom: 2rem;
}
.progress-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, var(--accent), var(--accent2));
border-radius: 2px;
animation: load 3s ease-out 0.6s forwards;
}
@keyframes load {
from { width: 0%; }
to { width: 72%; }
}
.progress-pct {
font-size: 0.65rem;
color: var(--accent);
text-align: right;
margin-top: 0.3rem;
letter-spacing: 0.05em;
counter-reset: pct;
animation: countUp 3s ease-out 0.6s forwards;
}
@keyframes countUp {
from { --n: 0; }
to { --n: 72; }
}
/* Terminal block */
.terminal {
background: #0d0d14;
border: 1px solid var(--border);
border-radius: 2px;
padding: 1rem 1.2rem;
font-size: 0.72rem;
color: #44cc77;
line-height: 2;
}
.terminal .prompt { color: var(--muted); }
.terminal .cmd { color: var(--accent2); }
.terminal .ok { color: #44cc77; }
.terminal .warn { color: var(--accent); }
.cursor {
display: inline-block;
width: 7px; height: 13px;
background: var(--accent);
vertical-align: middle;
animation: blink 1s step-end infinite;
}
⬤ En mantenimiento
Estamos
mejorando
las cosas.
// sistema temporalmente fuera de servicio
Nuestro equipo está trabajando para ofrecerte una experiencia mejorada.
Volveremos pronto. Disculpa las molestias.
Progreso de actualización
72% completado
$ systemctl status web.service
✔ Respaldo completado
✔ Migrando base de datos...
⚡ Aplicando actualizaciones de seguridad
$