/* ========================================================================== ANDREI PRODUCER — LIVESTREAM Hoja propia: solo la carga livestream.html. El look de esta página (negro, violeta y cromo) se llevó a style.css y hoy es el de toda la web. Por eso aquí ya no hay paleta, ni botones, ni nav, ni footer: todo eso se hereda. Queda solo lo que no existe en ninguna otra página — la escena del rótulo, el reproductor y la rejilla de datos. Todo cuelga de .pagina-live: nada de aquí puede tocar el resto de la web. ========================================================================== */ /* Sin paleta propia: usa directamente las variables globales de style.css (mismos valores, un solo sitio donde cambiarlos). Sin background-color ni color aquí tampoco: .pagina-live vive en el , que ya los pone. */ /* ========== NAV ========== Fija, para que la escena arranque pegada al borde de la pantalla. Opaca a propósito, no degradada: con fondo translúcido los títulos de las secciones se transparentaban por debajo de la barra al hacer scroll. Y como la página entera es negra, una barra negra arriba no se ve: el efecto de "sin barra" en la escena se mantiene igual. Nada de backdrop-filter: crea containing block para los hijos position:fixed y encajonaría el menú de móvil (.nav__lista) dentro de la barra en vez de cubrir la pantalla. */ .pagina-live .nav { position: fixed; top: 0; left: 0; right: 0; background: var(--color-fondo); border-bottom: 1px solid rgba(168, 85, 247, 0.16); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ========================================================================== ESCENA — el rótulo del evento Antes esto era una placa enorme con el arte completo: casco grande, marco, roca y el hueco de la derecha donde se metía el HUD. Ocupaba una pantalla entera para decir una fecha. Ahora el rótulo es solo lo que importa — emblema, título, filigrana— recortado del mismo arte y apilado en el centro, con la cuenta atrás justo debajo. Mismo material, un tercio de altura. Las tres piezas van en mix-blend-mode: screen. Vienen recortadas sobre el fondo negro del arte original y en screen ese negro desaparece solo: no hace falta recortarlas con transparencia y encajan sobre cualquier fondo oscuro sin dejar el rectángulo a la vista. ========================================================================== */ .escena { position: relative; /* El nav de esta página es fijo: sin este colchón de arriba el emblema se metía debajo de la barra y se quedaba descabezado. */ padding: calc(4.5rem + clamp(0.9rem, 3.5vw, 2rem)) 0 clamp(1.6rem, 4vw, 2.4rem); overflow: hidden; background: var(--color-fondo); /* Encierra las mezclas: el screen de las piezas y de las brasas se funde con el cielo de la escena, no con el resto de la página. */ isolation: isolate; } /* Halo violeta de fondo, el mismo que envolvía la placa. */ .escena__cielo { position: absolute; inset: -20%; background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(120, 40, 200, 0.24) 0%, transparent 70%), radial-gradient(ellipse 40% 40% at 20% 85%, rgba(90, 20, 170, 0.18) 0%, transparent 70%); pointer-events: none; } .escena__brasas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; opacity: 0.75; } /* ========== EL RÓTULO ========== */ .escena__rotulo { position: relative; display: flex; flex-direction: column; align-items: center; /* Sin hueco: cada recorte ya trae su propio aire y las piezas se separan solas. Lo que hace falta es lo contrario, apretarlas — y eso va con márgenes negativos abajo, porque gap no admite valores negativos. */ gap: 0; /* Los recortes llegan casi al filo de la letra, así que el ancho del rótulo es el margen real del título: al 90% las puntas de la C y la N quedaban pegadas al borde de la pantalla. */ width: 84%; max-width: 640px; margin-inline: auto; } .escena__emblema, .escena__marca, .escena__filigrana { display: block; height: auto; mix-blend-mode: screen; /* Los recortes no traen transparencia: debajo del arte hay roca oscura, y en screen esa roca sigue sumando luz — se veía el rectángulo de cada pieza. Subir el contraste hunde la roca a negro puro (y en screen el negro no suma nada) mientras las letras y el cromo, que ya están muy por encima, aguantan. El brillo compensa lo que el contraste se lleva de los medios tonos. */ filter: contrast(1.55) brightness(1.1); } .escena__emblema { width: clamp(64px, 12vw, 96px); } /* El título es la pieza que manda: si algo tiene que verse grande en cuanto se abre la página, es el nombre del evento. Nada de drop-shadow: el PNG es opaco, así que la sombra dibujaba el contorno del rectángulo en vez del de las letras. El resplandor lo pone el cielo de la escena. */ .escena__marca { width: 100%; margin-top: clamp(-1rem, -2.2vw, -0.3rem); } .escena__filigrana { width: min(62%, 420px); margin-top: clamp(-1.2rem, -2.6vw, -0.4rem); opacity: 0.85; } /* El h1 real: lo cantan las imágenes, así que aquí solo existe para lectores de pantalla y buscadores. */ .escena__titulo { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========== HUD — logo, estado, cuenta atrás, fecha y botón ========== Ya no se superpone a nada: es la columna que sigue al rótulo. */ .escena__hud { position: relative; display: flex; flex-direction: column; align-items: center; gap: clamp(0.8rem, 2.4vw, 1.15rem); padding: clamp(0.7rem, 2.6vw, 1.2rem) 1rem 0; text-align: center; } /* El logo viene sobre negro con su propio resplandor: en screen el fondo desaparece y el halo se suma a la escena. El PNG es 1536×1024 con la marca centrada y mucho aire arriba y abajo. Se recorta con aspect-ratio + object-fit en vez de con márgenes negativos: los márgenes en % se calculan sobre el ANCHO del contenedor, así que el recorte se descuadraba y la píldora de estado se subía encima de la marca. */ .escena__logo { width: min(60%, 268px); aspect-ratio: 1536 / 470; height: auto; object-fit: cover; object-position: center; mix-blend-mode: screen; } .escena__panel { display: flex; flex-direction: column; align-items: center; gap: clamp(0.9rem, 3vw, 1.25rem); } .escena__estado { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 1rem; border: 1px solid var(--color-linea-viva); border-radius: 100px; background: rgba(168, 85, 247, 0.12); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--color-acento-claro); white-space: nowrap; } .escena__punto { width: 7px; height: 7px; border-radius: 50%; background: var(--color-acento); box-shadow: 0 0 10px var(--color-acento); animation: lv-pulso 2s ease-in-out infinite; } @keyframes lv-pulso { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.8); } } /* En directo el estado se vuelve rojo y late más rápido. Lo enciende live.js poniendo .en-directo en el . */ .pagina-live.en-directo .escena__estado { border-color: rgba(255, 59, 87, 0.8); background: rgba(255, 59, 87, 0.14); color: #ffd7dd; } .pagina-live.en-directo .escena__punto { background: var(--color-directo); box-shadow: 0 0 12px var(--color-directo); animation-duration: 1.1s; } .escena__estado-texto::after { content: "Próximo directo"; } .pagina-live.en-directo .escena__estado-texto::after { content: "En directo"; } .escena__meta { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-gris); } /* ========== CUENTA ATRÁS ========== La casilla (bisel, degradado, muescas) vive en style.css y es la misma en toda la web. Aquí solo se aprieta la fila: en la escena va dentro del rótulo y necesita menos aire que en una página normal. */ .pagina-live .cuenta-atras { display: flex; justify-content: center; gap: clamp(0.4rem, 1.6vw, 0.9rem); margin-bottom: 0; } .pagina-live .live__mensaje-directo { margin: 0; font-size: 0.9rem; letter-spacing: 0.06em; color: var(--color-acento-claro); } /* ========== BOTÓN DE LA ESCENA ========== Variante de .boton: el aspecto (degradado violeta, borde vivo, halo y el levantarse al pasar por encima) lo pone la hoja compartida. Aquí solo se encoge para caber en el rótulo y se le anima la flecha. */ .lv-boton { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1.6rem; font-size: 0.68rem; letter-spacing: 0.2em; } .lv-boton svg { width: 14px; height: 14px; animation: lv-flecha 2.4s ease-in-out infinite; } @keyframes lv-flecha { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* ========================================================================== SEÑAL — el reproductor ========================================================================== */ .senal { position: relative; padding: clamp(3.5rem, 9vw, 6rem) 0 clamp(2.5rem, 6vw, 4rem); /* El nav es fijo: sin esto el salto de "Ir al directo" dejaba la parte de arriba del reproductor escondida debajo de la barra. */ scroll-margin-top: 4.5rem; } .senal::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(90%, 700px); height: 1px; background: linear-gradient(90deg, transparent, var(--color-linea-viva), transparent); } .senal__etiqueta { text-align: center; margin-bottom: clamp(1.5rem, 4vw, 2.2rem); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--color-gris); } /* Se conserva .live__reproductor para que meter el iframe de WpStream siga siendo cambiar un solo div, como estaba. */ .pagina-live .live__reproductor { position: relative; max-width: 980px; border: 1px solid var(--color-linea); border-radius: 3px; background: #000; box-shadow: 0 0 60px rgba(120, 40, 200, 0.28), inset 0 0 40px rgba(0, 0, 0, 0.8); } /* Cuatro corchetes de esquina, el gesto del marco del rótulo traído al reproductor. Sin imágenes: dos bordes por esquina. */ .senal__esquina { position: absolute; width: clamp(18px, 4vw, 30px); height: clamp(18px, 4vw, 30px); border: 2px solid var(--color-acento-claro); box-shadow: 0 0 12px rgba(168, 85, 247, 0.7); pointer-events: none; z-index: 2; } .senal__esquina--tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; } .senal__esquina--tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; } .senal__esquina--bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; } .senal__esquina--br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; } .pagina-live .live__reproductor .placeholder { flex-direction: column; gap: 1.2rem; color: var(--color-gris); font-size: 0.72rem; letter-spacing: 0.16em; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(90, 30, 160, 0.28) 0%, transparent 70%), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.028) 0 1px, transparent 1px 3px); } /* Barras de nivel: la señal existe aunque todavía no haya vídeo. */ .senal__barras { display: flex; align-items: flex-end; gap: 4px; height: 26px; } .senal__barras i { display: block; width: 3px; height: 100%; background: linear-gradient(180deg, var(--color-acento-claro), var(--color-acento)); box-shadow: 0 0 8px rgba(168, 85, 247, 0.8); transform-origin: bottom; animation: lv-barra 1.1s ease-in-out infinite; } .senal__barras i:nth-child(1) { animation-delay: 0s; } .senal__barras i:nth-child(2) { animation-delay: 0.15s; } .senal__barras i:nth-child(3) { animation-delay: 0.3s; } .senal__barras i:nth-child(4) { animation-delay: 0.45s; } .senal__barras i:nth-child(5) { animation-delay: 0.6s; } @keyframes lv-barra { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } } /* ========================================================================== DATOS — tres líneas, nada más ========================================================================== */ .datos { padding: 0 0 clamp(3.5rem, 9vw, 5.5rem); } /* Rejilla de filamentos. Antes la línea la pintaba el fondo de la rejilla asomando por un gap de 1px; con tres datos y dos columnas quedaba un hueco sin tarjeta y ese hueco se veía como un bloque violeta macizo. Ahora la línea la pone cada celda con su propia sombra de 1px: donde no hay celda, no hay línea, y salen los mismos filamentos con cualquier número de datos. */ .datos__rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; max-width: 980px; } .datos__item { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1.3rem, 3.5vw, 1.8rem); background: var(--color-panel); box-shadow: 0 0 0 1px var(--color-linea); text-align: center; } .datos__clave { font-size: 0.58rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--color-acento); } .datos__valor { font-size: clamp(0.9rem, 2.4vw, 1.05rem); color: #ece7f5; letter-spacing: 0.03em; } /* ========== MOVIMIENTO REDUCIDO ========== Lo que queda animado en la escena es el pulso del estado y la flecha del botón. Con la preferencia activada se paran. Las brasas ni se dibujan: de eso se encarga main.js. */ @media (prefers-reduced-motion: reduce) { .pagina-live *, .pagina-live *::before, .pagina-live *::after { animation: none !important; transition: none !important; } }