/* style.css */
/* --------------------------
1. VARIABLES CSS (:root)
-------------------------- */
:root {
--color-neon-pink: #ff00ff;
--color-neon-purple: #cc00ff;
--color-neon-blue: #00ffff;
--color-text-faded: #bbbbbb;
--color-background-dark: #111;
--color-background-darker: #1a1a1a;
--font-header-nav: 'Bebas Neue', sans-serif; /* Asegúrate de que Bebas Neue esté importada en el HTML */
}
/* --------------------------
2. RESET & GENERAL STYLES
-------------------------- */
* {
box-sizing: border-box;
}
body {
background: black;
color: white;
font-family: var(--font-header-nav);
overflow-x: hidden;
margin: 0;
/* Asegúrate de que Bebas Neue esté cargada, por ejemplo, desde Google Fonts en el */
/* */
}
.hidden {
display: none !important; /* !important para forzar ocultamiento */
}
/* --------------------------
3. HEADER & NAVIGATION
-------------------------- */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
background: url('images/noir-texture.png'), rgba(0, 0, 0, 0.85);
background-blend-mode: overlay;
border-bottom: 2px solid var(--color-neon-pink);
box-shadow: 0 0 20px #ff00ff33;
position: sticky;
top: 0;
z-index: 1000;
}
.social-links a {
margin-right: 20px;
display: inline-block;
transition: transform 0.3s ease;
}
.social-links img {
width: 30px;
height: 30px;
filter: brightness(150%) grayscale(100%);
transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
}
.social-links img:hover {
transform: scale(1.4);
filter: brightness(100%) grayscale(0%);
box-shadow:
0 0 4px var(--color-neon-pink),
0 0 8px var(--color-neon-blue),
0 0 16px var(--color-neon-pink);
}
.social-icon {
width: 30px;
height: 30px;
filter: brightness(100%) saturate(120%);
animation: neonBlink 3s infinite ease-in-out alternate;
transition: transform 0.3s ease;
}
.social-icon:hover {
transform: scale(1.4);
filter: brightness(140%) saturate(200%);
box-shadow:
0 0 6px var(--color-neon-pink),
0 0 12px var(--color-neon-blue),
0 0 18px var(--color-neon-pink);
}
.main-nav ul {
list-style: none;
display: flex;
gap: 25px;
padding: 0;
margin: 0;
}
.main-nav ul li a {
font-family: var(--font-header-nav);
color: var(--color-text-faded);
font-size: 1.2em;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
position: relative;
transition: transform 0.3s ease, color 0.3s ease, text-shadow 0.3s ease;
padding-bottom: 4px;
}
.main-nav ul li a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
background: var(--color-neon-pink);
left: 0;
bottom: -5px;
transition: width 0.3s ease;
}
.main-nav ul li a:hover::after {
width: 100%;
}
.main-nav ul li a:hover {
transform: scale(1.2);
color: var(--color-neon-pink);
text-shadow:
0 0 6px var(--color-neon-pink),
0 0 12px var(--color-neon-blue),
0 0 20px var(--color-neon-pink);
}
/* Flickers únicos por ítem (definidos en el HTML) */
.flicker-1 { animation: flicker 4s infinite; }
.flicker-2 { animation: flicker 3.2s infinite; }
.flicker-3 { animation: flicker 5s infinite; }
.flicker-4 { animation: flicker 3.7s infinite; }
.flicker-5 { animation: flicker 4.5s infinite; }
.flicker-6 { animation: flicker 3.8s infinite; }
/* --------------------------
4. MAIN CONTENT - TITLE
-------------------------- */
.revival-container {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
width: 100%;
box-sizing: border-box;
/* Altura mínima para ocupar toda la ventana menos el header */
min-height: calc(100vh - 80px);
justify-content: center; /* Centra verticalmente el contenido */
}
.revival-title {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap; /* Evita que las letras se envuelvan */
gap: clamp(5px, 1vw, 15px); /* Espacio adaptable entre letras */
max-width: 95vw; /* Limita el ancho para evitar problemas con scrollbars */
width: fit-content; /* Se ajusta al contenido */
margin: 150px auto 40px auto; /* Centrado horizontal, margen top y bottom */
padding: 0 10px; /* Padding para evitar bordes */
box-sizing: border-box;
animation: logoFade 1.2s ease forwards; /* Animación de aparición */
}
.letter {
/* Tamaño adaptable pero controlado */
width: clamp(60px, 10vw, 120px);
height: calc(clamp(60px, 10vw, 120px) * 1.5); /* Altura proporcional */
box-sizing: border-box;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: transparent;
-webkit-text-stroke: clamp(1px, 0.3vw, 3px) #fff;
font-size: calc(clamp(60px, 10vw, 120px) * 0.8);
font-weight: bold;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
text-shadow: 0 0 clamp(2px, 0.5vw, 8px) #f0f, 0 0 clamp(4px, 1vw, 18px) #ff00ffcc;
cursor: pointer;
position: relative;
flex-shrink: 0; /* Impide que las letras se encojan */
margin: 0; /* Elimina margen potencial */
transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}
.letter:hover {
transform: scale(1.05);
filter: brightness(1.2);
box-shadow:
0 0 clamp(5px, 1vw, 15px) var(--color-neon-pink),
0 0 clamp(10px, 2vw, 30px) var(--color-neon-blue);
}
/* --- IMÁGENES DE FONDO PARA CADA LETRA ESPECÍFICA --- */
#letter-r { background-image: url('images/emmeth_eye.png'); }
#letter-e { background-image: url('images/fabio_eye.png'); }
#letter-v-maris { background-image: url('images/marisledy_eye.png'); }
#letter-i { background-image: url('images/romeo_eye.png'); }
#letter-v-debbie { background-image: url('images/deborah_eye.png'); }
#letter-a { background-image: url('images/diego_eye.png'); }
#letter-l {
background-color: var(--color-background-dark); /* Fallback */
/* background-image se establecerá dinámicamente por JS */
}
/* Variantes de estilo para letras específicas */
.v-pink {
text-shadow:
0 0 clamp(3px, 0.7vw, 5px) var(--color-neon-pink),
0 0 clamp(5px, 1.2vw, 10px) #ff1493,
0 0 clamp(10px, 2vw, 20px) var(--color-neon-pink),
0 0 clamp(20px, 4vw, 40px) #ff1493;
}
.v-blue {
text-shadow:
0 0 clamp(3px, 0.8vw, 6px) var(--color-neon-blue),
0 0 clamp(6px, 1.5vw, 12px) #00ccff,
0 0 clamp(10px, 2vw, 20px) var(--color-neon-blue);
animation: glitchV 2s infinite;
}
/* --- style.css --- */
/* (Mantén todo el CSS existente) */
/* --------------------------
5. EXPEDIENTE SECTION (EXPANDIDO)
-------------------------- */
.expediente-section {
margin: 40px auto;
padding: 30px;
background: var(--color-background-dark);
text-align: center;
width: 100%;
max-width: 900px; /* Un poco más ancho para acomodar mejor el contenido */
box-sizing: border-box;
}
.expediente-card {
display: flex;
flex-direction: column; /* En móviles, imagen arriba, datos abajo */
justify-content: center;
align-items: stretch; /* Que ambos elementos crezcan */
gap: 20px;
padding: 20px;
border: 2px solid var(--color-neon-pink);
background: var(--color-background-darker);
/* max-width: 600px; */ /* Eliminado, usamos el ancho del contenedor padre */
margin: 0 auto;
text-align: left; /* Alinear texto a la izquierda por defecto aquí */
color: white;
}
@media (min-width: 768px) {
.expediente-card {
flex-direction: row; /* En pantallas más grandes, lado a lado */
align-items: flex-start; /* Alinear elementos al inicio del eje transversal */
}
}
/* --- Imagen del Expediente --- */
.exp-full-img {
/* height: 200px; */ /* Altura fija puede no ser necesaria */
width: 100%;
max-width: 300px; /* Limitar el tamaño de la imagen */
height: auto; /* Mantener proporción */
object-fit: cover;
filter: grayscale(100%) contrast(1.3);
margin: 0 auto; /* Centrar en su contenedor si es necesario */
}
@media (min-width: 768px) {
.exp-full-img {
width: auto;
max-width: none; /* Eliminar el max-width en desktop */
height: 300px; /* Altura fija en desktop para mejor control */
}
}
/* --- Contenedor de Datos --- */
.exp-data-container {
display: flex;
flex-direction: column;
width: 100%;
max-width: 500px; /* Limitar el ancho del texto */
}
/* --- Cabecera del Expediente (Nombre y Código) --- */
.exp-data-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
border-bottom: 1px solid var(--color-neon-purple);
padding-bottom: 10px;
}
.exp-main-name {
margin: 0;
font-size: 1.8em;
color: white;
}
.exp-sello {
font-family: monospace;
font-size: 0.8em;
color: var(--color-neon-pink);
opacity: 0.7;
white-space: nowrap; /* Evitar que se rompa en varias líneas */
}
/* --- Detalles del Expediente --- */
.exp-data-details {
display: flex;
flex-direction: column;
gap: 12px; /* Espacio entre líneas de datos */
font-size: 0.95em; /* Tamaño de fuente ligeramente más pequeño */
}
.exp-data-details p {
margin: 0; /* Eliminar márgenes por defecto de */
line-height: 1.4; /* Mejorar legibilidad */
}
.exp-data-details strong {
color: var(--color-neon-blue); /* Resaltar las etiquetas */
}
/* --- Sección de Cita --- */
.exp-quote-section {
background: rgba(0, 0, 0, 0.3); /* Fondo sutil */
border-left: 3px solid var(--color-neon-pink); /* Borde izquierdo distintivo */
padding: 10px 15px;
margin: 10px 0;
font-style: italic;
position: relative; /* Para posicionar los símbolos */
}
.exp-quote-symbol {
font-size: 2em;
position: absolute;
opacity: 0.2;
color: var(--color-neon-pink);
}
.exp-quote-symbol:first-of-type { /* Primer símbolo (abrir comillas) */
top: -10px;
left: 5px;
}
/* .exp-quote-symbol:last-of-type { */ /* Si tuvieras un segundo símbolo (cerrar comillas) */
/* bottom: -20px; */
/* right: 5px; */
/* } */
.exp-quote-text {
margin: 0;
padding-left: 20px; /* Espacio para el símbolo */
color: var(--color-neon-blue);
}
/* ... (resto del CSS) ... */
/* --- Estilo para el detalle extra (OPCIONAL) --- */
.exp-extra-detail {
font-size: 0.85em;
color: var(--color-text-faded);
font-style: italic;
margin-bottom: 10px;
padding: 5px;
border-left: 2px solid var(--color-neon-blue);
padding-left: 10px;
}
.exp-sello {
font-family: monospace;
font-size: 0.9em;
color: var(--color-neon-pink);
opacity: 0.5;
margin-top: 10px;
}
/* --------------------------
6. INTRO ANIMATION
-------------------------- */
#intro {
position: fixed;
inset: 0;
background: black;
display: flex;
justify-content: center;
align-items: center;
z-index: 5000;
font-family: var(--font-header-nav);
flex-direction: column;
transition: opacity 0.8s ease;
padding: 40px;
}
#intro-text {
font-size: clamp(24px, 4vw, 52px);
color: white;
text-align: center;
letter-spacing: 1px;
line-height: 1.6;
text-shadow:
0 0 4px #ff00ffcc,
0 0 8px #00ffff99;
max-width: 90vw;
}
#intro-text p {
margin: 0.6em 0;
}
#intro-text p:last-child {
font-size: 1.3em;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow:
0 0 6px var(--color-neon-pink),
0 0 12px var(--color-neon-blue),
0 0 20px var(--color-neon-pink);
}
#intro-text span.even {
opacity: 1;
transition: opacity 0.6s ease 0.2s;
}
#intro-text span.odd {
opacity: 1;
transition: opacity 0.6s ease 0.6s;
}
.fade-even span.even {
opacity: 0;
}
.fade-odd span.odd {
opacity: 0;
}
/* --------------------------
7. KEYFRAMES ANIMATIONS
-------------------------- */
/* --- Animación para las letras del título --- */
@keyframes logoFade {
from { opacity: 0; transform: scale(0.8); }
to { opacity: 1; transform: scale(1); }
}
/* --- Animación de glitch para .v-blue --- */
@keyframes glitchV {
0% { transform: translate(0); }
20% { transform: translate(-3px, 3px); }
40% { transform: translate(-3px, -3px); }
60% { transform: translate(3px, 3px); }
80% { transform: translate(3px, -3px); }
100% { transform: translate(0); }
}
/* --- Animación de parpadeo para links de navegación --- */
@keyframes flicker {
0%, 18%, 22%, 25%, 53%, 57%, 100% {
opacity: 1;
}
20%, 24%, 55% {
opacity: 0.4;
}
}
/* --- Animación de chisporroteo para iconos sociales --- */
@keyframes neonBlink {
0%, 100% { opacity: 1; filter: brightness(100%); }
10% { opacity: 0.8; }
20% { opacity: 0.5; filter: brightness(80%); }
35% { opacity: 1; }
45% { opacity: 0.4; }
60% { opacity: 0.9; }
80% { opacity: 0.6; }
}
/* --- Animaciones definidas para uso en script.js (triggerTitleAnimation) --- */
@keyframes fadeInLetter {
from {
opacity: 0;
transform: translateY(20px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes glitchQuick {
0% { transform: translateX(0); }
25% { transform: translateX(-1px) translateY(1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px) translateY(1px); }
100% { transform: translateX(0); }
}