/* ========================================================================== theme-cyber.css Overlay de tema inspirado en el estilo "hacker / blue-team". Solo cambia la PALETA y la TIPOGRAFIA — no toca el layout ni el contenido. Cargar SIEMPRE al final de los en index.html para que gane. Revertir = quitar el y borrar este archivo. ========================================================================== */ @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&display=swap"); :root { --cy-bg: #04070d; /* negro azulado de fondo */ --cy-bg-2: #070b13; /* paneles ligeramente mas claros */ --cy-panel: #0a0f18; /* superficie de tarjetas */ --cy-line: #1b2737; /* lineas/bordes tenues */ --cy-green: #2bf58f; /* acento primario (verde) */ --cy-cyan: #19d9ff; /* acento secundario (cyan) */ --cy-pink: #ff2e88; /* acento de alerta */ --cy-amber: #ffcf3a; /* acento calido */ --cy-text: #e6f1f5; /* texto principal */ --cy-muted: #8499a8; /* texto tenue */ /* RGB para usar en rgba() */ --cy-green-rgb: 43, 245, 143; --cy-cyan-rgb: 25, 217, 255; --cy-pink-rgb: 255, 46, 136; } /* ----------------------------------------------------------------- Fondo -- */ html, body { background-color: var(--cy-bg) !important; } /* Fondo: negro cyber + grid sutil + glow verde/cyan en las esquinas */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(900px 500px at 12% -8%, rgba(var(--cy-green-rgb), 0.10), transparent 60%), radial-gradient(800px 480px at 100% 110%, rgba(var(--cy-cyan-rgb), 0.08), transparent 60%), linear-gradient(rgba(var(--cy-cyan-rgb), 0.035) 1px, transparent 1px) 0 0 / 44px 44px, linear-gradient(90deg, rgba(var(--cy-cyan-rgb), 0.035) 1px, transparent 1px) 0 0 / 44px 44px, var(--cy-bg); } /* Atenuar el carrusel de imagenes de fondo del template para que no compita */ #bg { opacity: 0.16 !important; filter: saturate(0.7) brightness(0.8) hue-rotate(-12deg); } /* El template ya pone los hijos de en z-index:2 (regla `body > *`), asi que NO tocamos `position` aqui — hacerlo rompia el header, que el template coloca con position:absolute; bottom:8em. Solo aseguramos que quede por encima del nuevo fondo sin alterar su posicion original. */ #header { z-index: 2; } /* -------------------------------------------------------------- Cursor -- */ /* Cursor crosshair verde estilo "hacker/terminal". SVG inline, sin JS: siempre visible y sin riesgo de quedarte sin puntero. */ html, body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='%232bf58f' stroke-width='1.3' opacity='0.55'/%3E%3Cpath d='M12 1V6M12 18V23M1 12H6M18 12H23' stroke='%232bf58f' stroke-width='1.3'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='%232bf58f'/%3E%3C/svg%3E") 12 12, auto; } /* Variante "clickeable": anillo cyan relleno tenue sobre links/botones */ a, button, .boton-portafolio, .repo-link, .tarjetas-grid .card, [role="button"] { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='rgba(43,245,143,0.12)' stroke='%2319d9ff' stroke-width='1.4'/%3E%3Ccircle cx='12' cy='12' r='2' fill='%2319d9ff'/%3E%3C/svg%3E") 12 12, pointer; } /* ----------------------------------------------------------- Tipografia -- */ body, input, select, textarea, .boton-portafolio, .repo-link, .card-desc, .airsend-desc { font-family: "JetBrains Mono", "Courier New", ui-monospace, monospace !important; } body { color: var(--cy-text); } /* ------------------------------------------------------- Botones de menu -- */ /* Re-tematizar los acentos de cada boton sobre las variables que ya existen */ .boton-portafolio { --accent-color: var(--cy-green-rgb); background: linear-gradient(180deg, rgba(var(--cy-green-rgb), 0.06), rgba(255, 255, 255, 0.015)), rgba(7, 11, 19, 0.86) !important; color: var(--cy-text) !important; border-color: rgba(var(--cy-green-rgb), 0.22) !important; letter-spacing: 0.04em; } .boton-portafolio:hover { border-color: rgba(var(--cy-green-rgb), 0.6) !important; box-shadow: 0 0 18px rgba(var(--cy-green-rgb), 0.18), 0 14px 26px rgba(0, 0, 0, 0.3) !important; } #btn-portafolio { --accent-color: var(--cy-green-rgb); border-color: rgba(var(--cy-green-rgb), 0.24) !important; } #btn-portafolio.activo { border-color: rgba(var(--cy-green-rgb), 0.9) !important; color: var(--cy-green) !important; box-shadow: 0 0 18px rgba(var(--cy-green-rgb), 0.28), inset 0 0 10px rgba(var(--cy-green-rgb), 0.07) !important; } #btn-techstack { --accent-color: var(--cy-cyan-rgb); border-color: rgba(var(--cy-cyan-rgb), 0.24) !important; box-shadow: 0 0 8px rgba(var(--cy-cyan-rgb), 0.08), 0 8px 20px rgba(0, 0, 0, 0.16) !important; } #btn-techstack:hover { border-color: rgba(var(--cy-cyan-rgb), 0.6) !important; box-shadow: 0 0 18px rgba(var(--cy-cyan-rgb), 0.18), 0 14px 26px rgba(0, 0, 0, 0.2) !important; } #btn-techstack.activo { border-color: rgba(var(--cy-cyan-rgb), 0.9) !important; color: var(--cy-cyan) !important; box-shadow: 0 0 18px rgba(var(--cy-cyan-rgb), 0.28), inset 0 0 10px rgba(var(--cy-cyan-rgb), 0.07) !important; } #btn-docs { --accent-color: var(--cy-pink-rgb); border-color: rgba(var(--cy-pink-rgb), 0.32) !important; background: linear-gradient(135deg, rgba(var(--cy-pink-rgb), 0.10), rgba(var(--cy-green-rgb), 0.04)), rgba(7, 11, 19, 0.86) !important; } #btn-docs:hover { border-color: rgba(var(--cy-pink-rgb), 0.6) !important; box-shadow: 0 0 18px rgba(var(--cy-pink-rgb), 0.18), 0 14px 26px rgba(0, 0, 0, 0.2) !important; } /* ------------------------------------------------- Tarjetas de perfil -- */ .tarjetas .card-awards { --accent-rgb: var(--cy-green-rgb); } .tarjetas .card-degrees { --accent-rgb: var(--cy-cyan-rgb); } .tarjetas .card-certs { --accent-rgb: var(--cy-amber-rgb, 255, 207, 58); } .tarjetas .card-badges { --accent-rgb: var(--cy-pink-rgb); } .tarjetas .profile-card { background: linear-gradient(180deg, rgba(10, 15, 24, 0.92), rgba(4, 7, 13, 0.92)) !important; border: 1px solid var(--cy-line) !important; border-radius: 14px !important; } /* Esquinas HUD estilo cyber en las tarjetas de perfil */ .tarjetas .profile-card .profile-card-icon::before, .tarjetas .profile-card .profile-card-icon::after { content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none; } .tarjetas .profile-card { position: relative; } .tarjetas .profile-card > .profile-card-links::before { content: ""; position: absolute; top: -1px; left: -1px; width: 14px; height: 14px; border-top: 2px solid rgb(var(--accent-rgb)); border-left: 2px solid rgb(var(--accent-rgb)); pointer-events: none; } .tarjetas .profile-card > .profile-card-links::after { content: ""; position: absolute; bottom: -1px; right: -1px; width: 14px; height: 14px; border-bottom: 2px solid rgb(var(--accent-rgb)); border-right: 2px solid rgb(var(--accent-rgb)); pointer-events: none; } .repo-link { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)), rgba(7, 11, 19, 0.6) !important; border: 1px solid var(--cy-line) !important; border-radius: 8px !important; color: var(--cy-text) !important; } .repo-link:hover { border-color: rgba(var(--accent-rgb), 0.55) !important; color: #fff !important; } /* ---------------------------------------------- Grid de portafolio -- */ .tarjetas-grid .card { border: 1px solid var(--cy-line) !important; border-radius: 12px !important; background-color: var(--cy-panel); } .tarjetas-grid .card:hover { border-color: rgba(var(--cy-green-rgb), 0.5) !important; box-shadow: 0 8px 32px rgba(var(--cy-green-rgb), 0.12) !important; } .card-desc, .airsend-desc { color: var(--cy-muted) !important; } /* ------------------------------------------------------ Terminal card -- */ .code-editor { background: linear-gradient(145deg, #070b13, #0a0f18) !important; border: 1px solid var(--cy-line) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--cy-green-rgb), 0.06) !important; } /* Barra superior de colores -> verde/cyan/pink cyber */ .code-editor::before { background: linear-gradient(90deg, var(--cy-green), var(--cy-cyan), var(--cy-pink), var(--cy-green)) !important; } .code-editor .header { background: rgba(4, 7, 13, 0.6) !important; } .code-editor .title-text { color: var(--cy-muted) !important; } .code-editor .editor-content { background: rgba(4, 7, 13, 0.35) !important; } /* Numeros de linea / cursor */ .code-editor .cmd { border-color: var(--cy-green) !important; } /* Paleta de comandos del whoami -> tonos cyber */ .color-0 { color: var(--cy-green) !important; } /* Name */ .color-1 { color: var(--cy-cyan) !important; } /* Languages */ .color-2 { color: #9fb4c4 !important; } /* Email (tenue) */ .color-3 { color: var(--cy-amber) !important; } /* Security Clearance */ .color-4 { color: var(--cy-pink) !important; } /* Role */ /* ------------------------------------------------------------- Footer -- */ /* Bajar un poco el footer (mail / X / GitHub) respecto al borde inferior */ #footer { bottom: 1.75em !important; } #footer .icons a, #footer .icons button, #footer .copyright { color: var(--cy-muted) !important; } #footer .icons a:hover, #footer .icons button:hover { color: var(--cy-green) !important; } #footer .sound-toggle.activo { color: var(--cy-green) !important; } /* ----------------------------------------------- Seleccion de texto -- */ ::selection { background: rgba(var(--cy-green-rgb), 0.3); color: #fff; }