/* ========================================================== EL FONDO DE EFECTO MARIPOSA — UN SOLO FICHERO ---------------------------------------------------------- La rampa de negro a blanco, las manchas que derivan por detrás, el vidrio de las cajas y la entrada de las piezas. Era el lenguaje de la portada y solo vivía allí; esto es lo que lo hace aplicable a una página cualquiera. Las páginas se van pasando UNA A UNA: la que carga este fichero y fondo-em.js pasa a comportarse como la portada. La que no, se queda como estaba. Así se puede ver el cambio en un sitio antes de llevarlo a los demás. Los valores de partida van aquí para que la página ya sea oscura antes de que corra el JavaScript. En cuanto corre, manda él: escribe estas mismas variables en el según el scroll. ========================================================== */ /* LA PALETA DE LAS PÁGINAS DE DENTRO: CLARA. ---------------------------------------------------------- La portada NO carga este fichero —tiene la suya dentro— así que estos valores no la tocan. Aquí se declaran para las páginas de dentro, que son blancas. Los nombres son los mismos que usa la portada a propósito: el menú, el pie, los botones y el vidrio están escritos contra --fondo y --texto, así que la misma pieza funciona en las dos sin una sola condición. Lo único que cambia es qué valen. El blanco es #fdfdfd y no #ffffff porque es el tono con el que arranca el cielo de la ilustración del pie: donde se tocan, son el mismo color y no hay línea. */ :root{ --fondo:#fdfdfd; --fondo-2:#f4f2ed; --texto:#0e0d0b; --texto-2:#6a6a6a; /* Las manchas, en negro y muy bajas: sobre blanco es sombra donde sobre negro era luz. Sin ellas la página es un cartón. */ --n1:rgba(14,13,11,.030); --n2:rgba(14,13,11,.022); --n3:rgba(14,13,11,.026); /* El vidrio, al revés que sobre negro: velo claro y borde oscuro, que es lo que separa una caja clara de un fondo claro. */ --velo:rgba(255,255,255,.55); --velo-borde:rgba(14,13,11,.10); /* Los iconos de la cabecera son dibujos negros: sobre blanco ya se ven, así que no se invierten. */ --tinta-iconos:0; --entrada-y:22px; --entrada-dur:.8s; --r-rect:clamp(18px, 2.6vw, 30px); } /* LAS MANCHAS, EN SU PROPIA CAPA. ---------------------------------------------------------- Estaban en el mismo elemento que el color de fondo, y eso las hacía imposibles de apagar: son un "background-image", no algo con opacidad propia. Y había que poder apagarlas. Medido: justo encima del pie, la página valía 248 y el cielo de la ilustración 252. Cuatro tonos no se ven como color, pero dos superficies planas casi iguales que se tocan dibujan una LÍNEA a lo ancho de la pantalla, y esa sí se ve. Era el mismo problema que la portada tuvo con la rampa, por el mismo motivo, y se arregla igual: que las manchas se vayan antes de llegar al pie. Separadas en una capa hija, apagarlas es bajar una opacidad, y eso sí sabe hacerlo el navegador barato. */ .fondo{ position:fixed; inset:0; z-index:-1; pointer-events:none; background-color:var(--fondo); } .fondo::after{ content:""; position:absolute; inset:0; background-image: radial-gradient(58% 52% at 22% 26%, var(--n1) 0%, transparent 62%), radial-gradient(52% 58% at 78% 64%, var(--n2) 0%, transparent 60%), radial-gradient(72% 48% at 48% 96%, var(--n3) 0%, transparent 66%); background-size:190% 190%, 210% 210%, 230% 230%; background-repeat:no-repeat; animation:deriva 44s ease-in-out infinite alternate; /* 1 casi toda la página, 0 al llegar al pie. Lo mueve el JavaScript; sin él vale 1 y la página se ve como siempre. */ opacity:var(--manchas, 1); } @keyframes deriva{ from{ background-position: 0% 0%, 100% 0%, 50% 100% } to { background-position: 42% 28%, 56% 46%, 12% 58% } } .fondo::after{ animation:none } .acto__pieza{ /* La misma entrada que las demás piezas: 22 px, 0,8 s, ease-out. Traía 20 px, dos curvas y dos duraciones distintas, que sobre el papel es casi igual y en la pantalla es otra cosa. */ opacity:0; transform:translate3d(0, var(--entrada-y), 0); transition:opacity var(--entrada-dur) var(--ease-out), transform var(--entrada-dur) var(--ease-out); transition-delay:var(--d, 0s); } .surge{ opacity:0; transform:translate3d(0, var(--entrada-y), 0); transition:opacity var(--entrada-dur) var(--ease-out), transform var(--entrada-dur) var(--ease-out); transition-delay:var(--d, 0s); } .vidrio{ background:var(--velo); border:1px solid var(--velo-borde); border-radius:var(--r-rect); backdrop-filter:blur(18px) saturate(0); -webkit-backdrop-filter:blur(18px) saturate(0); box-shadow:0 20px 60px -30px rgba(0,0,0,.6); } .entra-arriba, .entra-abajo, .entra-izq, .entra-der, .entra-zoom{ opacity:0; /* Una sola curva y una sola duración para toda la web. Y las dos propiedades acaban a la vez: antes el fundido tardaba 0,75 s y el movimiento 0,95, así que la pieza terminaba de aparecer y seguía colocándose doscientos milisegundos más — se veía como un asentamiento, no como una llegada. */ transition:opacity var(--entrada-dur) var(--ease-out), transform var(--entrada-dur) var(--ease-out); transition-delay:var(--d, 0s); will-change:transform, opacity; } .entra-arriba, .entra-abajo, .entra-izq, .entra-der, .entra-zoom{ transform:translate3d(0, var(--entrada-y), 0) } .es-visible .entra-arriba, .es-visible .entra-abajo, .es-visible .entra-izq, .es-visible .entra-der, .es-visible .entra-zoom{ opacity:1; transform:none } .entra-arriba, .entra-abajo, .entra-izq, .entra-der, .entra-zoom{ opacity:1 !important; transform:none !important; transition:none !important; }