/* * Cyberxia Arcade theme — estética Space Invaders 8-bit aplicada a Xphish. * Verde neón sobre fondo negro absoluto, font pixelada, glow y starfield animado. * * No reemplaza Bootstrap por completo: convive con cyberxia.css y solo se * carga en pantallas que activan la clase .arcade en o en pantallas * arcade-only (login, splash). Mantenerlo aislado para que el resto del * panel siga funcionando hasta que migremos pantalla por pantalla. */ @import url('/fonts/pressstart2p.css'); :root { /* Verde arcade calmado: ni lima fosforito ni verde oscuro. Tono medio CRT 80s, glow sutil sin agresividad. */ --arc-green: #4dd864; --arc-green-bright: #6fea7e; --arc-green-dim: #2aa84a; --arc-green-glow: rgba(110, 234, 130, 0.35); --arc-bg: #000000; --arc-bg-soft: #060a07; --arc-text: #c8e9c8; --arc-text-dim: #5a8a5a; --arc-red: #ff5050; --arc-yellow: #ffe600; } /* === Pantalla arcade completa (login/splash) ============================ */ body.arcade { margin: 0; padding: 0; min-height: 100vh; background: var(--arc-bg); color: var(--arc-text); font-family: 'Press Start 2P', ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; line-height: 1.6; letter-spacing: 0.5px; overflow-x: hidden; position: relative; image-rendering: pixelated; } /* Starfield: dos capas de gradientes radiales con parallax suave. Solo en .arcade (login). En .arcade-admin queda estático. */ body.arcade::before, body.arcade::after { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(1px 1px at 20px 30px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1px 1px at 60px 80px, rgba(255,255,255,0.6) 50%, transparent 51%), radial-gradient(1px 1px at 130px 50px, rgba(255,255,255,0.7) 50%, transparent 51%), radial-gradient(1px 1px at 200px 100px, rgba(255,255,255,0.5) 50%, transparent 51%), radial-gradient(2px 2px at 280px 30px, rgba(255,255,255,0.8) 50%, transparent 51%), radial-gradient(1px 1px at 50px 200px, rgba(255,255,255,0.6) 50%, transparent 51%), radial-gradient(1px 1px at 150px 250px, rgba(255,255,255,0.5) 50%, transparent 51%), radial-gradient(1px 1px at 320px 220px, rgba(255,255,255,0.6) 50%, transparent 51%); background-size: 360px 300px; background-repeat: repeat; animation: arc-stars 90s linear infinite; } body.arcade::after { background-size: 500px 400px; opacity: 0.55; animation-duration: 180s; animation-direction: reverse; } @keyframes arc-stars { from { transform: translateY(0); } to { transform: translateY(-300px); } } /* Scanlines estáticas sobre contenido — efecto CRT pasivo, sin parpadeo. */ body.arcade > .arc-scanlines { position: fixed; inset: 0; z-index: 1000; pointer-events: none; background: repeating-linear-gradient( to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(77, 216, 100, 0.02) 3px, rgba(0,0,0,0) 4px ); } /* === Header arcade (logo + brand centrada + nav + lives) ================ */ .arc-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding: 24px 40px; border-bottom: 1px solid rgba(93, 255, 93, 0.15); } .arc-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 36px; } /* Brand central — el "Xphish" grande tipo cartel arcade. */ .arc-brand { font-family: 'Press Start 2P', monospace; font-size: 22px; color: var(--arc-green-bright); text-shadow: 0 0 8px var(--arc-green-glow); letter-spacing: 5px; text-align: center; user-select: none; } .arc-logo { font-family: 'Press Start 2P', monospace; font-size: 18px; color: var(--arc-text); text-shadow: 0 0 8px var(--arc-green-glow); letter-spacing: 2px; line-height: 1.1; text-decoration: none; } .arc-logo .arc-logo-x { display: inline-block; width: 14px; height: 14px; background: var(--arc-green-bright); box-shadow: 0 0 12px var(--arc-green-glow); vertical-align: middle; margin: 0 1px; /* Pixel art space invader simplificado vía clip-path. */ clip-path: polygon( 20% 0%, 80% 0%, 80% 20%, 100% 20%, 100% 60%, 80% 60%, 80% 80%, 60% 80%, 60% 100%, 40% 100%, 40% 80%, 20% 80%, 20% 60%, 0% 60%, 0% 20%, 20% 20% ); } .arc-logo-sub { display: block; font-size: 8px; color: var(--arc-green-dim); letter-spacing: 6px; margin-top: 6px; padding-left: 4px; } .arc-nav { display: flex; gap: 56px; } .arc-nav a { font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--arc-green); text-decoration: none; text-shadow: 0 0 6px var(--arc-green-glow); letter-spacing: 2px; } .arc-nav a:hover { color: var(--arc-green-bright); } .arc-lives { display: flex; align-items: center; gap: 8px; color: var(--arc-text); font-size: 11px; letter-spacing: 2px; } .arc-lang-btn-login { font-family: 'Press Start 2P', monospace; font-size: 10px; letter-spacing: 2px; color: var(--arc-green); background: transparent; border: 1px solid var(--arc-green-dim); padding: 8px 14px; cursor: pointer; min-width: 44px; } .arc-lang-btn-login:hover { background: rgba(120, 255, 120, 0.08); color: var(--arc-green-bright); border-color: var(--arc-green); } .arc-lives .arc-life { display: inline-block; width: 14px; height: 14px; background: var(--arc-green-bright); box-shadow: 0 0 8px var(--arc-green-glow); clip-path: polygon( 20% 0%, 80% 0%, 80% 20%, 100% 20%, 100% 60%, 80% 60%, 80% 80%, 60% 80%, 60% 100%, 40% 100%, 40% 80%, 20% 80%, 20% 60%, 0% 60%, 0% 20%, 20% 20% ); } /* === Ticker / marquee de eventos ======================================== */ .arc-ticker { overflow: hidden; padding: 14px 0; border-top: 1px solid rgba(21, 201, 112, 0.25); border-bottom: 1px solid rgba(21, 201, 112, 0.25); background: rgba(10, 30, 18, 0.4); } .arc-ticker-track { display: inline-flex; gap: 80px; white-space: nowrap; animation: arc-ticker-scroll 60s linear infinite; color: var(--arc-green); font-size: 11px; text-shadow: 0 0 4px var(--arc-green-glow); letter-spacing: 1px; } .arc-ticker-track span::before { content: " · "; margin-right: 80px; color: var(--arc-green-dim); } @keyframes arc-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* === Inputs / botones arcade ============================================ */ .arc-form { width: 100%; max-width: 380px; margin: 0 auto; } .arc-label { display: block; font-size: 10px; color: var(--arc-green); letter-spacing: 3px; margin: 18px 0 8px; text-shadow: 0 0 4px var(--arc-green-glow); } .arc-input { display: block; width: 100%; box-sizing: border-box; padding: 14px 16px; background: var(--arc-bg-soft); color: var(--arc-text); border: 1px solid var(--arc-green-dim); border-radius: 0; font-family: 'Press Start 2P', monospace; font-size: 12px; letter-spacing: 1px; outline: none; transition: border-color .2s, box-shadow .2s; caret-color: var(--arc-green-bright); } .arc-input::placeholder { color: var(--arc-text-dim); letter-spacing: 2px; font-size: 10px; } .arc-input:focus { border-color: var(--arc-green-bright); box-shadow: 0 0 12px var(--arc-green-glow), inset 0 0 4px rgba(45,255,138,0.15); } .arc-btn { display: inline-block; padding: 16px 32px; background: var(--arc-green); color: #000; font-family: 'Press Start 2P', monospace; font-size: 14px; letter-spacing: 3px; border: 2px solid var(--arc-green-bright); cursor: pointer; text-decoration: none; text-transform: uppercase; box-shadow: 0 0 16px var(--arc-green-glow); transition: transform .1s, box-shadow .2s, background .2s; } .arc-btn:hover, .arc-btn:focus { background: var(--arc-green-bright); box-shadow: 0 0 28px var(--arc-green-glow), 0 0 8px var(--arc-green-bright); transform: translateY(-1px); color: #000; } .arc-btn:active { transform: translateY(1px); box-shadow: 0 0 8px var(--arc-green-glow); } .arc-btn-block { display: block; width: 100%; text-align: center; } /* Flicker tipo CRT — solo activo en .arcade (login). En .arcade-admin se neutraliza al final del CSS para que no parpadee nada en el panel. */ .arc-flicker { animation: arc-flicker 4s infinite; } @keyframes arc-flicker { 0%, 92%, 100% { opacity: 1; } 93% { opacity: 0.75; } 94% { opacity: 1; } 95% { opacity: 0.88; } 96% { opacity: 1; } } /* En el admin (post-login) anulamos cualquier movimiento heredado. */ body.arcade-admin::before, body.arcade-admin::after { animation: none !important; } body.arcade-admin .arc-ticker-track, body.arcade-admin .arc-flicker { animation: none !important; } /* === Cajas / paneles arcade ============================================= */ .arc-panel { border: 1px solid var(--arc-green-dim); background: rgba(10, 25, 15, 0.4); padding: 28px 32px; box-shadow: 0 0 24px rgba(21, 201, 112, 0.15), inset 0 0 4px rgba(21, 201, 112, 0.05); } .arc-panel-title { font-size: 14px; color: var(--arc-green-bright); text-shadow: 0 0 8px var(--arc-green-glow); letter-spacing: 3px; text-align: center; margin: 0 0 24px; } .arc-panel-title::before { content: "// "; color: var(--arc-green); } .arc-panel-title::after { content: " //"; color: var(--arc-green); } /* === Footer ============================================================= */ .arc-footer { text-align: center; padding: 40px 20px 30px; color: var(--arc-text-dim); font-size: 10px; letter-spacing: 2px; line-height: 1.8; } .arc-footer-tagline { color: var(--arc-green); text-shadow: 0 0 6px var(--arc-green-glow); margin-bottom: 18px; } .arc-footer-links a { color: var(--arc-green-dim); text-decoration: none; margin: 0 12px; } .arc-footer-links a:hover { color: var(--arc-green); } /* === Mensajes de error / estado ========================================= */ .arc-flash { border: 1px solid var(--arc-red); background: rgba(255, 59, 59, 0.08); color: var(--arc-red); padding: 12px 16px; font-size: 10px; letter-spacing: 1px; margin: 16px 0; text-shadow: 0 0 4px rgba(255,59,59,0.4); } .arc-flash-success { border-color: var(--arc-green); background: rgba(21, 201, 112, 0.08); color: var(--arc-green-bright); text-shadow: 0 0 4px var(--arc-green-glow); } /* === Responsive =========================================================== */ @media (max-width: 720px) { .arc-header { grid-template-columns: 1fr; gap: 12px; text-align: center; padding: 18px 20px; } .arc-header-right { justify-content: center; gap: 22px; flex-wrap: wrap; } .arc-nav { gap: 28px; } .arc-logo { font-size: 14px; } .arc-brand { font-size: 16px; letter-spacing: 3px; } .arc-panel { padding: 20px; } .arc-btn { font-size: 12px; padding: 14px 20px; letter-spacing: 2px; } }