/* --------------------------------------------------------------------------- La técnica del recreo — hoja de estilos del sitio. El sitio es un lienzo de tamaño fijo que se escala al ancho de la ventana, igual que hacía el viewer de Readymag: desktop lienzo de 1024px, escalado con `zoom` hasta un máximo de 3600px mobile lienzo de 320px, escalado con `transform: scale()` Los widgets van posicionados en absoluto dentro del lienzo, en coordenadas del lienzo (no de la pantalla). Por eso nunca hay que tocar sus medidas: el escalado se encarga de todo. --------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; color: #282828; font-family: 'Saans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-x: hidden; } /* --------------------------------------------------------------- el lienzo */ .stage { position: relative; width: 100%; /* lo calcula js/site.js: alto del lienzo ya escalado */ height: var(--stage-h, 100vh); overflow: hidden; } .canvas { position: absolute; left: 0; /* centrado vertical cuando la página entra entera en la ventana */ top: var(--canvas-top, 0); transform-origin: 0 0; } /* Desktop usa `zoom`: escala también el layout, así el texto queda nítido y las coordenadas siguen siendo las del lienzo. */ .canvas--desktop { zoom: var(--scale, 1); } /* Mobile usa `transform`, que es lo que hacía Readymag en teléfono. */ .canvas--phone { transform: scale(var(--scale, 1)); } /* Sólo se muestra el lienzo que corresponde al viewport actual. El breakpoint lo decide js/site.js y lo marca en . */ .canvas--phone { display: none; } html[data-viewport='phone'] .canvas--desktop { display: none; } html[data-viewport='phone'] .canvas--phone { display: block; } /* ------------------------------------------------------------- los widgets */ .w-picture, .w-shape, .w-text, .w-video { position: absolute; transform: rotate(var(--rot, 0deg)); } .w-picture { overflow: hidden; pointer-events: auto; } .w-picture img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; } .w-video { overflow: hidden; pointer-events: none; } .w-video video { display: block; border: 0; } /* El es sólo un envoltorio: el hijo conserva su posición absoluta. */ .w-link { display: contents; color: inherit; } /* --------------------------------------------------------------- el texto */ .w-text p { margin: 0; white-space: pre-wrap; } .a-left { text-align: left; } .a-center { text-align: center; } .a-right { text-align: right; } .a-justify { text-align: justify; } /* Subrayado que aparece al pasar el mouse, como los links del original. */ .t-link { color: inherit; text-decoration: none; padding-bottom: 1px; background-image: linear-gradient(currentColor, currentColor); background-position: 0 100%; background-repeat: repeat-x; background-size: 0 1px; transition: background-size .2s ease, opacity .2s ease; } .t-link:hover { background-size: 100% 1px; opacity: .8; } .t-link.is-current { background-size: 100% 1px; } /* ---------------------------------------------------------- animaciones -- */ /* Los widgets animados arrancan en su estado inicial (normalmente invisibles) y pasan al final mientras el mouse está sobre su disparador. `will-change` le pide al navegador que ponga cada uno en su propia capa y que rasterice la imagen de antemano. Sin eso el primer hover tiene que decodificar un PNG grande en el medio del fundido y se nota el tirón: las piezas del catálogo pesan hasta 4 MB. */ .anim { opacity: var(--a-opacity, 1); transform: rotate(var(--rot, 0deg)) scale(var(--a-scale, 1)); transition: opacity var(--a-duration, .5s) ease-in-out, transform var(--a-duration, .5s) ease-in-out; will-change: opacity, transform; } .anim.is-on { opacity: var(--a-opacity-on, 1); transform: rotate(var(--rot, 0deg)) scale(var(--a-scale-on, 1)); } /* Acá el fundido no es decoración: es cómo se lee la página — cada pieza del catálogo y cada escuela se muestran apareciendo sobre su contorno. Por eso no se desactiva con "reducir movimiento", igual que en el sitio original. Lo que sí se apaga es el subrayado de los links, que es puro adorno. */ @media (prefers-reduced-motion: reduce) { .t-link { transition-duration: 1ms; } }