/* sitio.css — Gran Danés LM ───────────────────────────────────────────────────────────────────────────── El sitio vive en negro a propósito y no tiene tema claro: la pieza es una fotografía de las siete de la tarde disolviéndose en negro, y sobre blanco no existe. Por eso `color-scheme: dark` está declarado en el y todos los colores se pintan explícitos — nada se hereda del navegador. */ :root{ --negro: #000; /* el ground. La foto se disuelve EN él, no sobre él */ --tinta: #e8ddc8; /* crema cálida: el mismo tono que la luz de la foto */ /* DOS tokens, no uno: el texto y el filete pedían cosas opuestas. El tostado viejo (#5d5346) sobre negro da 2.79:1 — bajo el mínimo 4.5:1 de WCAG AA para texto normal, y aquí es el peor caso (cuerpo chico, versales, tracking alto). Subirlo a secas dejaba los filetes de 1 px como un subrayado grueso. Por eso se parten: --tenue pinta texto (5.11:1 contra negro, mismo matiz cálido); --filete conserva el susurro de 1 px. Medido, no a ojo. */ --tenue: #8a7b68; /* texto: 5.11:1 contra --negro */ --filete: #5d5346; /* trazo de 1 px: el tostado de siempre */ --brasa: #c8a06a; } *{ box-sizing:border-box; margin:0; padding:0 } html,body{ min-height:100%; background:var(--negro); color:var(--tinta); /* `clip`, NO `hidden`, Y ES LA DIFERENCIA ENTRE QUE LA SECCIÓN DE CONCURSOS FUNCIONE O NO. `overflow-x:hidden` obliga a que `overflow-y` compute a `auto`, y eso convierte al en un contenedor de scroll propio: un `position:sticky` de dentro deja de pegarse a la ventana y se va hacia arriba con la página. Medido: el top de la vista bajaba a −540, −1620, −2700… o sea que el relevo cambiaba de pieza mientras el usuario ya estaba mirando negro vacío. `clip` recorta igual y NO crea contenedor de scroll, así que el sticky vuelve a pegarse a la ventana. */ overflow-x:clip; } body{ -webkit-font-smoothing:antialiased; } /* ── EL HERO ───────────────────────────────────────────────────────────────── El hero está CLAVADO siempre. En tríptico caben las tres escenas a lo ancho y el riel le da UNA pantalla de altura al documento: el hero se queda quieto esa pantalla y luego los concursos sube por encima de él. En relevo cabe una escena sola, el riel estira el documento a N pantallas y el scroll —el de verdad, el del sistema, sin secuestrar nada— sólo mueve un número que decide qué escena se ve. La página nunca baja: las escenas se reemplazan en su sitio. */ .hero{ position:fixed; inset:0; z-index:0; } .hero__riel{ height:0; pointer-events:none; } /* El documento SCROLLEA SIEMPRE desde que existe los concursos, así que el `overflow:hidden` y el `height:100%` que tenía el body se fueron: con ellos el riel no podía estirar nada y no había nada que scrollear —que es exactamente el bug que costó el relevo de móvil, sólo que ahora en las dos formas—. La clase `relevo` se sigue poniendo desde hero.js y queda como gancho. */ .hero__lienzo{ position:absolute; inset:0; /* la pieza entra desde el negro: mientras la fuente carga y las texturas suben, no se ve un canvas a medio dibujar */ opacity:0; transition:opacity 700ms ease-out 40ms; } body.listo .hero__lienzo{ opacity:1; } .hero__lienzo canvas{ display:block; width:100%; height:100%; } /* La marca existe como TEXTO, no sólo como píxeles en un canvas. Se oculta a la vista, nunca a la accesibilidad: nada de display:none ni de visibility. */ .hero__marca{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; font:400 1rem/1 Georgia, serif; } /* Banco de pruebas. Sólo aparece con ?hud — no es parte de la página. */ .hero__medidas{ position:absolute; right:12px; bottom:10px; display:none; font:10.5px/1.6 ui-monospace,"SF Mono",Menlo,monospace; letter-spacing:.14em; text-transform:uppercase; color:var(--tenue); font-variant-numeric:tabular-nums; } body.hud .hero__medidas{ display:block; } /* Foco visible: el hero no tiene controles todavía, pero el sitio sí los tendrá y esto es el default del que van a heredar. */ :focus-visible{ outline:2px solid var(--brasa); outline-offset:3px; } @media (prefers-reduced-motion: reduce){ .hero__lienzo{ transition-duration:200ms; } } /* ══ LAS DOS PORTADAS ══════════════════════════════════════════════════════════ Esto vivió un rato en un `CSS/portada.css` aparte y volvió aquí POR UNA MEDIDA: sobre HTTP/1.1 con 150 ms de ida y vuelta, un archivo más en la primera pantalla le quita al `three.js` de 143 KB —de quien cuelga que la pieza se destape— unos 95 ms, medidos con un control (HEAD más un archivo cualquiera: 3 478 → 3 573 ms en Fast 3G con CPU ×4). Dos reglas de riel y un menú no valen eso. Y además es su sitio: el alto del riel es hermano de `.hero` y `.hero__riel`, que están veinte líneas más arriba, y el menú es cromo de la página entera. */ /* ── EL ALTO DEL RIEL, QUE ES LA FRONTERA DE CADA PORTADA ───────────────────── `.hero__riel` es lo único que le da altura al documento —el hero es `fixed` y no ocupa flujo— así que este número decide DÓNDE empieza la sección de concursos y, con ella, si `loading="lazy"` sirve de algo. EL BUCLE MIDE UNA PANTALLA, en todas las ventanas. No cuelga del scroll: gira con su reloj y no tiene recorrido interno que agotar, así que está agotado desde el primer píxel y `HERO_FIN()` vale 0 igual en un escritorio que en un teléfono. El tríptico no lleva regla aquí: `medios.js` le pone la suya en el —una pantalla en tríptico, N en relevo— y `hero.js` la reescribe inline con su propio encuadre. Por eso ésta cuelga de `html.portada-bucle`: gana por especificidad a la de `medios.js` venga en el orden que venga, y está decidida ANTES del primer layout porque `portada.js` marca el desde el . `svh` ANTES QUE `vh`, y no es un detalle: `100vh` en un teléfono es la ventana GRANDE —con la barra del navegador escondida— mientras `innerHeight` es la de ahora, más pequeña. La resta de `HERO_FIN()` daría sesenta u ochenta píxeles de recorrido muerto antes de que el salto a concursos se dispare. `100svh` es la ventana pequeña, que nunca es mayor que `innerHeight`: la frontera queda clavada en 0 y además no salta cuando la barra se esconde. El `100vh` de delante es el respaldo para quien no conozca `svh`. */ html.portada-bucle .hero__riel{ height:100vh; height:100svh; } /* ── EL MENÚ DEL CLICK DERECHO ──────────────────────────────────────────────── Tiene que parecer de esta página y no de un plugin: la didona del cintillo sobre negro, un filete de un píxel y nada más. Sin sombra de sistema operativo, sin esquinas redondas, sin degradado — la página entera está hecha de eso. `position:fixed` porque las coordenadas del click son de la ventana, y z-index por encima de la sección de concursos, que va en 1: el menú se abre con el click derecho EN CUALQUIER SITIO, también sobre una fotografía. */ .portada-menu{ position:fixed; z-index:50; min-width:13.5rem; padding:.35rem 0; background:rgba(0,0,0,.92); border:1px solid var(--filete); /* El desenfoque de detrás es lo único que delata que hay algo vivo debajo. Es un adorno de verdad: si el navegador no lo sabe hacer, el menú sigue siendo negro opaco y legible. */ backdrop-filter:blur(6px); } /* Un menú no se anima: aparece donde se pulsó. Cualquier transición aquí lo convierte en un widget, y esta página no tiene widgets. */ /* LOS DOS SELECTORES DE ABAJO LLEVAN `.cintillo` PEGADO, y no es adorno: la didona del cintillo se declara en `concursos.css`, que se enlaza DESPUÉS de esta hoja, así que con un selector de una sola clase su `font-size`, su `letter-spacing` y su `color` ganarían por orden y el menú saldría con el tracking de un cintillo —.34em— en vez del suyo. Con las dos clases este bloque tiene más peso y manda venga en el orden que venga. */ .portada-menu__titulo.cintillo{ padding:.3rem 1rem .45rem; color:var(--filete); font-size:.58rem; letter-spacing:.30em; border-bottom:1px solid var(--filete); margin-bottom:.3rem; } .portada-menu__item.cintillo{ display:block; width:100%; /* un