/* franbencosme.com v3 — la hoja del documento y de la UI del viaje. DOS LEYES QUE ESTA HOJA NO PUEDE ROMPER 1 · El fondo es el canvas. Ningún tramo, bloque ni caja lleva `background`. Lo único con color de fondo es `body`, y es el color base del cielo para cuando NO hay motor. 2 · La UI pertenece al mundo, no a la página. Con motor, el bloque de texto de cada mundo se queda quieto (`sticky`) mientras su tramo pasa, y su marginalia —el sello del cuaderno en Ouranos, la cartela de la lámina en Atlas— se queda abajo a la izquierda, como en los cuadros. No es una página que baja sobre un fondo. ATLAS ES EL CIELO PRINCIPAL (`[F]` 2.40 a): el `:root` es papel y tinta; Ouranos es la variante. */ :root{ /* Atlas · los valores son los de los cuadros: papel #E7EAEF, tinta #141A2E, el azul de Betel #1550A8 */ /* Fran, 17 sep: «que se pueda leer la UI, en especial en Atlas […] la tipografía más oscura […] el fondo podría ser blanco». El papel sube a #F4F5F8 y las tintas secundarias bajan: ink-2 pasa de 4,6:1 a 8,9:1 sobre el papel. */ --bg:#ffffff; --ink:#101526; --ink-2:#101526; --ink-3:#101526; /* 21 oct: el fondo de Atlas es blanco (Fran: «usa el #ffffff»); mismo valor que PAPEL en nucleo.js */ --line:#B6BBC6; --signal:#1550A8; --halo:var(--signal); /* 22 oct, Fran: «NO usemos dorado, sino azul o rojo»: el acento es el color de Betel en cada cielo */ /* 21 oct · LA LETRA EN TRES ESCALONES, los dos cielos (Fran: «grosor mayor en la tipografía de contenido […] aumentar el tamaño […] aplicable tanto en atlas como ouranos»). Cuerpo 16-18 px a 500 · apoyo 14 px a 500 · rótulo 12 px a 600. Nada de texto por debajo de 12 px. En Atlas las tres tintas son una (arriba). */ --t-cuerpo:clamp(16px,calc(9px + .6vw),18px); --t-apoyo:14px; --t-rotulo:12px; --display:"Space Grotesk","Segoe UI",system-ui,sans-serif; --body:"Instrument Sans","Segoe UI",system-ui,sans-serif; --pad:clamp(1.25rem,5vw,4.5rem); --banda:52px; /* LA COLUMNA ES TODO EL ANCHO, y el margen lo pone --pad, el mismo del marco. Era min(78rem,100%) = 1248 px centrados, y a 1440 —el ancho exacto de los cuadros— eso dejaba el texto en x 161 mientras el wordmark y la cartela del cuaderno caían en 72: los DOCE cuadros ponen las tres cosas en el mismo margen de 72. El desajuste sólo aparecía por encima de 1392 px (1248 + 2x72), que es por lo que no se había visto. Medido en UI-V3-DIFERENCIAS.md, punto 2. */ /* EL AREA SEGURA. Fran, 21 sep: *«if I open the website in an ultrawide screen, the ui breaks because of how wide the screen is»*. Medido a 3440 px: la barra de arriba medía 3425 —el wordmark y el conmutador de cielo a 3,4 m de distancia—, el bloque de texto 3281 y los casos vivían en la mitad derecha, en x 1736. Todo estaba anclado al BORDE DE LA PANTALLA en vez de a una composicion. El ancho seguro es 1440, que no es un numero redondo elegido a ojo: es el ancho de los cuadros del storyboard (CUADRO.esc 1440×900) y el mismo con el que la escena 3D compone a sus actores, asi que el documento y el espacio quedan registrados. Por debajo de 1440 no cambia nada; por encima, la pagina se centra y la pantalla de mas es cielo. --lado es el mismo margen medido desde el area segura y no desde el vidrio: lo usan las piezas FIJAS, que no cuelgan de .tramo y por eso no se enteraban del centrado. */ --col:min(100%, 1440px); --lado:calc((100vw - min(100vw, 1440px)) / 2 + var(--pad)); --cuadro:min(100vw, 1440px); /* el ANCHO DEL CUADRO: lo que antes era el viewport. Lo usa todo lo que mide en fracciones del encuadre. */ } html[data-cielo="ouranos"]{ --bg:#07080f; --ink:#F6F6FF; --ink-2:#D3D3EA; --ink-3:#D3D3EA; /* 23 oct (Fran: «Ok go», ANALISIS-FASE4.md): en Ouranos tampoco hay escalón por tinta más apagada (7.43); --ink-3 = --ink-2 */ --line:#23282F; --signal:#D83A2E; --halo:#ff7a6e; /* el rojo de Betel, el claro que ya llevan las flechas en Ouranos (3:1 sobre el morado); nada de dorado (Fran, 22 oct) */ } @font-face{font-family:"Space Grotesk";src:url("/assets/fonts/space-grotesk-var.woff2") format("woff2");font-weight:300 700;font-display:swap} @font-face{font-family:"Instrument Sans";src:url("/assets/fonts/instrument-sans.woff2") format("woff2");font-weight:400 600;font-display:swap} *,*::before,*::after{box-sizing:border-box} :focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--signal);border-radius:2px} /* el enlace de salto: fuera de pantalla hasta que recibe el foco, y entonces ocupa su sitio (no se superpone) */ .saltar{position:fixed;left:var(--pad);top:-4rem;z-index:40;padding:.6rem .9rem;background:var(--bg);color:var(--ink); border:1px solid var(--ink);border-radius:3px;font-size:.8rem;text-decoration:none;transition:top .2s} .saltar:focus{top:1rem} /* en modo de colores forzados, el punto es decorativo: no puede llevar el color de los enlaces */ @media (forced-colors:active){.punto,.punto-marca{forced-color-adjust:none}} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);line-height:1.5;font-weight:500;-webkit-font-smoothing:antialiased;overflow-x:hidden} a{color:inherit} img{max-width:100%;height:auto;display:block} h1,h2,h3{font-family:var(--display);letter-spacing:-.03em;line-height:1.02;margin:0} p{margin:0} /* el texto de cada cielo: el sello y la instrucción se dicen distinto en el territorio y en el mapa */ .at{display:none} html[data-cielo="atlas"] .ou{display:none} html[data-cielo="atlas"] .at{display:inline} /* ---------- el canvas: fijo, detrás de todo ---------- */ #cielo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none} /* ---------- EL ASIENTO: cómo el storyboard resuelve que la escena no estorbe la lectura ---------- Fran preguntó por Atlas: *«tenemos que ver que podemos hacer para que los elementos no sean un problema con la lectura del texto del frente»*. La respuesta ya estaba dibujada y no es apagar la escena, es SENTAR EL TEXTO. Los cuadros lo traen con nombre propio — `asiento · columna de texto` y `asiento · el pie` en `250:2`, `asiento · marco` y `asiento · sello` en `124:3`/`127:2` — y leyendo sus SVG sale lo bonito del asunto: OURANOS #05050F al 62 % → 0 % (t4 `281:2`) · #050817 al 76 % → 38 % → 0 (Rigel `250:378`) ATLAS #E8EBF0 al 80 % → 0 % (t4 `281:12`) No es un color nuevo: **es el suelo del propio cielo**. #05050F es el `--bg` de Ouranos (#07080f) y #E8EBF0 el de Atlas (#E7EAEF). Por eso en el territorio OSCURECE y en el mapa ACLARA, y por eso funciona en los dos sin una regla distinta para cada uno: siempre separa el texto del dibujo llevándolo hacia el fondo de su cielo. GEOMETRÍA, de los nodos. Los cuatro son elipses ancladas al borde izquierdo, donde vive la columna de texto: `250:378` 1240×960 en (−360,−140) → centro (260,340), radios 620×480 → 18 % / 38 %, 43 % / 53 % `250:379` 1840×640 en (−500, 580) → centro (420,900), radios 920×320 → 29 % / 100 %, 64 % / 36 % Se usan los de Rigel, que es el que los llama por su función («columna de texto», «el pie»); los de t4 son la misma idea más apretada. Van en dos pseudoelementos de un solo div: cero nodos nuevos en el documento. Y va DETRÁS del documento y DELANTE del cielo — no es un `background` de un tramo ni de un bloque, así que la ley 1 de esta hoja sigue en pie: el fondo lo sigue pintando el canvas. */ :root{--asiento-a:.90} /* Atlas: el papel, al 80 % (`281:12`) */ html[data-cielo="ouranos"]{--asiento-a:.62} /* Ouranos: el negro azulado, al 62 % (`281:2`) */ .asiento{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden} .asiento::before,.asiento::after{content:"";position:absolute;border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb,var(--bg) 100%,transparent) 0%, color-mix(in srgb,var(--bg) 52%,transparent) 46%, transparent 78%); opacity:var(--asiento-a)} /* la columna de texto: centro 18 % / 38 %, radios 43 % / 53 % */ .asiento::before{left:calc(18% - 43%);top:calc(38% - 53%);width:86%;height:106%} /* el pie: centro 29 % / 100 %, radios 64 % / 36 % */ .asiento::after{left:calc(29% - 64%);top:calc(100% - 36%);width:128%;height:72%} /* sin motor no hay escena que estorbe, y el asiento sobra */ html:not(.motor) .asiento{display:none} /* ---------- el marco: wordmark · switch · idioma · MAP. En el borde, nunca sobre el dibujo. ---------- */ .marco{position:fixed;inset:0 0 auto;z-index:9;display:flex;justify-content:space-between;align-items:baseline;gap:1rem; padding:1.5rem var(--lado);font-size:.8rem;letter-spacing:.02em;pointer-events:none} .marco a,.marco span,.marco ol,.marco button{pointer-events:auto} .marco .marca{font-family:var(--display);font-weight:500;letter-spacing:-.01em;text-decoration:none} /* el punto del wordmark: en el manual es azul señal; aquí es el color de Betel en el cielo que toque */ .punto-marca{display:inline-block;width:.3em;height:.3em;border-radius:50%;background:var(--signal);margin-left:.06em} .marco .der{display:flex;gap:1.75rem;align-items:baseline;color:var(--ink-3)} .marco .der a{text-decoration:none} .marco .correo{color:var(--ink-2)} /* EL MARCO SE TIÑE POR ESCENA. Medido: en Ouranos ningún cuadro usa un color global para el marco; cada uno le da el suyo. Sólo entran los tres cuyos nodos están medidos — los otros tres heredan el token hasta que se midan, que es mejor que inventarles un color. Betelgeuse 41:13 #f9f4f0 · 41:14 #9e8075 · 41:15 #d1b8ad t2 → Saiph 64:158 #ededf7 · 64:159 #807a9e · 64:160 #b8b8d1 Rigel #f2f2fc · #8c8ab2 · #bdbddb (los mismos de t0 y ∞) En Atlas los seis cuadros ponen tinta, así que el teñido sólo vive bajo [data-cielo=ouranos]. */ /* LA RAMPA DE TINTA ES DEL MUNDO ENTERO, NO DEL MARCO. Los tres hexes ya estaban aquí, pero encerrados en `.marco`: se habían leído bien del cuadro y se habían aplicado a tres palabras de la cabecera en vez de a la escena. Medido en UI-V3-DIFERENCIAS.md punto 3: el cuadro `41:3` pinta el titular en #f9f4f0, el lede en #d1b8ad y el cintillo en #9e8075 —la brasa— y la página los daba en lavanda global. Puestos en el elemento raíz valen para los dos: el marco los sigue cogiendo por sus `var(--marca, var(--ink))`, que ahora resuelven al mismo sitio. Cada terna sale del nodo, con `get_design_context`, no de la memoria: titular = --ink, lede = --ink-2, cintillo = --ink-3. En ATLAS no se toca: los seis cuadros ponen tinta sobre papel, una sola rampa (y por eso todo esto vive bajo [data-cielo=ouranos]). BELLATRIX Y EL CINTURÓN YA ESTÁN LEÍDOS (16 sep), y la respuesta es que no había nada que cambiar: los dos dan EXACTAMENTE la misma terna que Rigel. En `215:2`, «First I ask.» / «Everything else after.» a 52 px en #f2f2fc, el lede de las cinco paradas a 16 px en #bdbddb y el cintillo «THE METHOD» a 12 px en #8c8ab2. En `309:2` —que vuelve metadatos por tamaño, así que se piden los hijos— «Short sentences.» (`309:526`) en #f2f2fc, la biografía (`309:528`) en #bdbddb y «IUGULAE» (`309:525`) en #8c8ab2. Se escriben igualmente en vez de dejarlos heredando el token global: coinciden hoy por casualidad, y si el token global se mueve, estos dos mundos se despegarían de su cuadro sin que nadie se entere. Ahora los seis están anclados a su nodo. */ /* LA BRASA DE BETELGEUSE, MEDIA RAMPA MÁS ARRIBA — y es lo único que se movió de los tres hexes del cuadro. Medido el 16 sep componiendo de verdad la pila entera (píxeles del lienzo 3D leídos del framebuffer + las dos elipses del `asiento` replicadas con el mismo motor de degradados del navegador + la opacidad efectiva del texto), sobre 5.340 muestras por elemento y en cinco puntos del tramo: con #9e8075 el cintillo daba una mediana de 3.86–4.34 y la guía 4.02–4.62, contra los 4.5 que pide AA para 12 px. O sea que la brasa del cuadro `41:14` no sostiene texto pequeño sobre esta escena. ANTES SE PROBÓ NO TOCARLA, que era lo preferible: subir el `asiento`. NO LLEGA, y está medido — llevándolo de 0.62 a 1.00 el cintillo sólo pasa de 3.86 a 4.30, y la guía NO SE MUEVE (4.29 con cualquier valor, su p10 clavado en 2.23: cae fuera del alcance de las dos elipses). El asiento no es la palanca, así que la palanca es la tinta. No se inventa un color: se coge el punto medio entre --ink-3 y --ink-2, los dos del mismo cuadro, así que la tinta sigue siendo del storyboard y sólo sube medio escalón de su propia rampa. Con #b89c91 las medianas van a 5.63 y 6.13 y el percentil 10 a 4.40 y 5.43. Queda dicho lo que cuesta: la rampa se comprime un poco arriba (ink-3 se acerca a ink-2). Si Fran prefiere el hex del nodo intacto, la otra salida es el TAMAÑO — a 18.66 px en negrita el umbral baja a 3:1 y #9e8075 pasa sobrado; pero eso cambia el cuadro más que un medio escalón de tinta. */ html[data-cielo="ouranos"][data-escena="betelgeuse"]{--ink:#f9f4f0;--ink-2:#d1b8ad;--ink-3:#d1b8ad} html[data-cielo="ouranos"][data-escena="saiph"]{--ink:#ededf7;--ink-2:#b8b8d1;--ink-3:#b8b8d1} /* MEISSA, MEDIO ESCALÓN ARRIBA, por la misma razón medida que Betelgeuse y con el mismo método. Su lado DESCARTADO —el texto tachado de los cuatro pares y su pie— daba medianas de 3.25, 3.32, 4.27 y 4.47 a 13 px, y 4.17/4.29 a 10.5, todas por debajo de los 4.5 de AA. La jerarquía contra el lado CAZADO (16.5) es la tesis del mundo y no se toca: lo que se corrige es que el escalón flojo de la rampa no sostiene texto pequeño sobre esta nebulosa. #757a8c → punto medio con --ink-2, que sigue siendo tinta del cuadro y no un color inventado. */ html[data-cielo="ouranos"][data-escena="meissa"]{--ink:#f2f5fa;--ink-2:#adb2c2;--ink-3:#adb2c2} html[data-cielo="ouranos"][data-escena="rigel"]{--ink:#f2f2fc;--ink-2:#bdbddb;--ink-3:#bdbddb} html[data-cielo="ouranos"][data-escena="bellatrix"]{--ink:#f2f2fc;--ink-2:#bdbddb;--ink-3:#bdbddb} /* `215:2` */ html[data-cielo="ouranos"][data-escena="cinturon"]{--ink:#f2f2fc;--ink-2:#bdbddb;--ink-3:#bdbddb} /* `309:2` */ .marco .marca,.marco .der,.marco .correo,.marco .menu{transition:color .9s linear} /* Y LA TINTA DEL MARCO SE PASA, NO SALTA. `html[data-escena]` cambia en cuanto el reloj entra en el tramo, o sea al EMPEZAR el tránsito, y sin transición los tres textos del marco daban un salto de color en seco: el «shock» que Fran nombra en 2.43. 0,9 s es lo que tarda el iris en cerrar del todo, así que el color llega con el telón. */ .marco .marca{color:var(--marca,var(--ink));transition:color .9s ease} .marco .der{color:var(--idioma,var(--ink-3));transition:color .9s ease} .marco .correo,.marco .menu{color:var(--correo,var(--ink-2));transition:color .9s ease} /* el switch: el del lab, que Fran aprobó. Sólo existe con motor (sin JS no hay otro cielo al que ir). */ /* ── EL ASIENTO DEL MARCO, que los cuadros declaran desde el principio y nunca se montó. `124:3` y `250:2` traen un `asiento · marco` (⌀680 en −160,−290, o sea centrado en 180,50) junto al `asiento · columna de texto` y al `asiento · el pie`, que sí están en `.asiento`. Faltaba el de arriba, y se notaba: desplazando fuera del cinturón (u 0.744) el texto de los testimonios sube y pasa POR DEBAJO del conmutador, y se leen los dos a la vez y ninguno bien. El storyboard no apaga la escena para que se lea el marco: SIENTA el marco, que es lo que hace esto. Va en el `::before` del propio marco para no meter marcado de adorno, y se apaga sin motor: sin escena no hay nada que sentar. El conmutador, además, deja de ser transparente: es un CONTROL, y un control necesita superficie propia o el fondo se le mete dentro. */ .marco::before{content:"";position:absolute;inset:-1.4rem -.5rem auto;height:6rem;z-index:-1;pointer-events:none; /* dos capas: la ELIPSE del cuadro, a la izquierda y bajo el wordmark, que es la que `124:3` dibuja; y encima una banda que cruza todo el ancho, porque el choque medido está a la DERECHA —el texto pasando por debajo del conmutador— y una elipse al 13 % no llega allí. La banda es floja y muere a media altura del marco: no apaga la escena, sienta la franja del marco, que es la distinción que el storyboard hace. */ background: radial-gradient(130% 150% at 13% 0%, color-mix(in srgb,var(--bg) 92%,transparent) 0%, color-mix(in srgb,var(--bg) 44%,transparent) 52%, transparent 80%), linear-gradient(to bottom, color-mix(in srgb,var(--bg) 66%,transparent) 0%, color-mix(in srgb,var(--bg) 24%,transparent) 58%, transparent 100%); opacity:var(--asiento-a)} html:not(.motor) .marco::before{display:none} .switch{font:inherit;font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2); background:color-mix(in srgb,var(--bg) 62%,transparent); border:1px solid var(--line);border-radius:4px;padding:.4rem .7rem;min-height:2.1rem;cursor:pointer} .switch[aria-busy="true"]{opacity:.5;cursor:default} .switch{display:inline-flex;align-items:center;gap:.5rem} /* Y SE OCULTA DE VERDAD CUANDO LLEVA [hidden] (24 sep). El atributo pone display:none desde el navegador, con especificidad cero, asi que la linea de arriba lo pisaba: sin motor -- que es lo que pasa con movimiento reducido, o sin WebGL -- el interruptor de cielo se seguia PINTANDO, 108x34, pero no estaba cableado ni era alcanzable con el teclado. Un boton visible, muerto y fuera del arbol de accesibilidad: lo peor de los tres mundos. .idioma ya tenia esta misma guarda tres lineas mas abajo; a .switch le faltaba. */ .switch[hidden]{display:none} /* LA BARRA DE VOLUMEN del menu (Fran, 24 sep). Es un input type=range de serie: trae teclado, lector de pantalla y rueda sin escribir una linea. Solo se le da la forma de la casa -- la misma pildora que sus vecinos -- y se le pone [hidden] hasta que el motor la enciende, porque sin motor no hay musica que graduar. */ .volumen{box-sizing:border-box;display:inline-flex;align-items:center;min-height:2.1rem;background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);border-radius:4px;padding:.4rem .6rem} /* la misma pildora que el cielo, el sonido y el idioma: los cuatro mandos pesan igual (Fran ya corrigio esto una vez con el idioma) */ .volumen[hidden]{display:none} #volumen{-webkit-appearance:none;appearance:none;width:82px;height:1rem;display:block;background:none;cursor:pointer} #volumen::-webkit-slider-runnable-track{height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink-3) 55%,transparent)} #volumen::-moz-range-track{height:2px;border-radius:2px;background:color-mix(in srgb,var(--ink-3) 55%,transparent)} #volumen::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:11px;height:11px;border-radius:50%;background:var(--ink-2);margin-top:-4.5px} #volumen::-moz-range-thumb{width:11px;height:11px;border:0;border-radius:50%;background:var(--ink-2)} #volumen:focus-visible{outline:2px solid var(--ink-2);outline-offset:3px;border-radius:3px} .marco .marca,.marco .idioma,.marco .menu{background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);border-radius:4px;padding:.4rem .7rem;min-height:2.1rem;display:inline-flex;align-items:center} .marco .der{align-items:center} /* luna en Ouranos, sol en Atlas: dos SVG de línea; el motor sólo cambia `data-cielo`. Antes eran dos círculos de CSS que no se leían como sol ni luna (Fran, 17 sep: «falta el icono de sol y luna»). */ .cielo-icono{width:14px;height:14px;display:none;flex:none} html[data-cielo="ouranos"] .cielo-icono.luna,html[data-cielo="atlas"] .cielo-icono.sol{display:block} /* el boton de musica: misma forma que el de cielo (hereda .switch), y su icono dice el ESTADO EN QUE ESTA, igual que aquel */ .son-icono{width:14px;height:14px;display:none;flex:none} .sonido[aria-pressed="true"] .son-icono.on,.sonido[aria-pressed="false"] .son-icono.off{display:block} .idioma{font-size:var(--t-rotulo);letter-spacing:.1em} .idioma[hidden]{display:none} /* UN boton de idioma, con su bandera delante (Fran, 21 sep): enseña el idioma en el que estás y al tocarlo cambia. */ .idioma{gap:.34rem;padding:.4rem .6rem} .bandera{width:14px;height:auto;border-radius:1px;flex:none;box-shadow:0 0 0 .5px color-mix(in srgb,var(--ink) 35%,transparent)} /* el punto del nombre: el de Betel, rojo en Ouranos y azul en Atlas (es el mismo --signal que el punto de los titulares) */ .punto-marca{display:inline-block;width:.32em;height:.32em;border-radius:50%;background:var(--signal);margin-left:.08em;vertical-align:baseline} /* el icono de menú, en el sitio que dejó el correo. Sólo texto para lector de pantalla. */ /* el disparador del menú: el cinturón de Orión (siete puntos) y MAP, como en V2 (main.css:196). */ .menu{display:flex;align-items:center;gap:.5rem;padding:.25rem;color:var(--correo,var(--ink-2));background:none;border:0;cursor:pointer;font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase} .menu svg{width:13px;height:18px;fill:currentColor} .menu[hidden]{display:none} /* `display:grid` gana al [hidden] del navegador: hay que decirlo a mano */ /* el panel: se abre con el botón del marco. Sin cuadro que lo defina, hereda los tokens del cielo en que se abre. */ /* EL MENÚ, COMO ERA EN V2 (main.css:206-237), que es el que Fran prefiere: pantalla completa, centrado, cada sección en grande con su estrella debajo en versalitas, «The sky» arriba y el sello abajo. El fondo es el del cielo (`--bg`), casi opaco y desenfocado, así que las opciones no necesitan recuadro. Betel se queda al lado de la sección actual, y el cielo y el idioma viven dentro para el móvil (16 sep). */ .panel{border:0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(14px);color:var(--ink); padding:clamp(3rem,10vh,6rem) clamp(1.25rem,6vw,5rem);width:100vw;max-width:none;height:100svh;max-height:none;margin:0;border-radius:0; align-content:center;justify-items:center;gap:clamp(1.25rem,3.4vh,2.5rem)} .panel[open]{display:grid} /* EL JUEGO EN EL MENÚ (15 oct, DECISIONES 7.32). Fran: «porque no un boton simple?» y el miedo al scroll, que se midió: como fila propia el panel pasaba a hacer scroll en 1440×900, 1280×720 y 360×640. Es un mando más de `.panel-mandos`, con la ropa del idioma —el otro enlace de la fila— y la letra del switch; `.panel-mandos .panel-juego` pesa más que `.panel a`. */ .panel-mandos .panel-juego{background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);border-radius:4px;padding:.4rem .6rem;min-height:2.1rem;display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-2);text-decoration:none;transition:border-color .25s,color .25s} .panel-mandos .panel-juego span{margin:0;font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:inherit;white-space:nowrap} .panel-mandos .panel-juego svg{width:1.1rem;height:1.1rem;flex:none} .panel-mandos .panel-juego .corta,.panel-mandos .panel-juego .mini{display:none} .panel-mandos .panel-juego:hover,.panel-mandos .panel-juego:focus-visible{border-color:var(--ink-3);color:var(--ink)} @media (prefers-reduced-motion:reduce){.panel-mandos .panel-juego{transition:none}} /* EL PANEL YA HACÍA SCROLL en pantallas bajas antes del juego (medido el 15 oct sin motor: 1280×720 +29 px, 360×640 +13, 320×568 +34). En menos de 720 px de alto el aire de arriba y abajo baja de 10vh a 6vh; el ritmo entre filas no se toca. */ @media (max-height:720px){.panel{padding-block:clamp(2rem,6vh,6rem)}} /* y en los más estrechos (320) el nombre corto no cabe con sus vecinos: «Play» / «Jugar» */ @media (max-width:359px){.panel .panel-mandos .panel-juego .corta{display:none}.panel .panel-mandos .panel-juego .mini{display:inline}} /* una clase más que la regla de móvil, que va después */ .panel ol{list-style:none;padding:0;display:grid;margin:0;gap:clamp(.35rem,1.2vh,.8rem);justify-items:center;counter-reset:none} .panel li::before{content:none} .panel a{display:grid;justify-items:center;gap:.2rem;padding:.3rem 1rem;background:none;border:0;text-decoration:none} .panel b{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,1rem + 2vw,2.5rem);letter-spacing:-.032em;line-height:1;color:var(--ink)} .panel span{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .panel a:hover b{text-decoration:none;color:var(--ink)} /* el hover SOLO aclara. El color de senal --var(--signal)-- deja de usarse aqui: es el del elemento SELECCIONADO, y gastarlo en el hover dejaba la seleccion sin color propio (Fran, 24 sep). */ /* ── DONDE ESTAS, DICHO EN LA LENGUA DE LA CASA (24 sep) ──────────────────────────────────────────────────── Fran, tres veces: «no se entiende en que pagina estas ni que ese punto es betel», «te dije hacer una nueva de 0», y «que tal si en vez de inventar cosas, investigas como hacerlo que se vea bien?». Las tres tenia razon, y la tercera es la que cierra: mis dos intentos --resaltar la fila, y despues dibujar un camino-- eran APARATOS INVENTADOS. La investigacion estaba en casa. `TEMATICA-REFERENCIAS.md` midio ocho casas y puntuo como resuelven la ORIENTACION: resn con `2/7` (el contador del dial, 2-3 puntos), Olha con el porcentaje (2), silencio con `#01` (2), bruno con «Server connected» (2) -- y hellomonday, con hamburguesa y pin de mapa, se lleva un 1 con la etiqueta «funcion: interfaz generica». Las casas fuertes NO RESALTAN NADA: dicen donde estas con un contador en la lengua del lugar. Esta casa ya tiene esa lengua y la usa en cada seccion: «Uranometria Francifelly · plate III · λ Orionis». Es su `2/7`. Asi que la fila donde estas AÑADE esa voz: bajo el nombre de la estrella aparece la marginalia de la lamina. ASÍ NO ERA AL PRINCIPIO, Y ERA UN FALLO. La marginalia SUSTITUÍA al nombre (`a[aria-current] > span {display:none}`), con la idea de que la fila donde estas cambiara de voz en vez de llevar un indicador pegado. El efecto medido en pantalla es el contrario del que se buscaba: en Meissa, la unica fila que dejaba de decir «Meissa» era la de Meissa. Fran, 24 sep: *«hay un nombre mal en el menu, creo que es Meissa»* · *«deberia llamarse Meissa no Orionis»*. El nombre de la estrella no se negocia: es el subtitulo que pidio el 16 sep. La voz distinta se gana igual —otra caja, otro cuerpo, una linea que las demas filas no tienen— sin pagar con el nombre. El texto va en el HTML, no lo escribe el motor (LEY 3). */ .lamina-rotulo{display:none} .panel nav a b{color:var(--ink-3);transition:color .3s ease} .panel nav a[aria-current="true"] b{color:var(--signal)} /* la seleccion lleva el color de senal */ .panel nav a[aria-current="true"] .lamina-rotulo{display:block;font-style:normal; font-size:12px;letter-spacing:.11em;text-transform:none;color:var(--ink-2)} /* sin mayusculas: los sellos de la pagina van en minuscula y la lambda en caja alta sale como una A griega. Y de paso la caja distinta hace que se lea como OTRA VOZ entre sus vecinas, que es justo lo que se busca. */ .panel-titulo{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .panel-mandos{display:flex;gap:1.25rem;align-items:center} /* EL IDIOMA DENTRO DEL MENU, IGUAL QUE FUERA (Fran, 24 sep: «en el menu, que el idioma este hecho de la misma forma que afuera»). Lo rompia la regla .panel a {display:grid; background:none; border:0}, que existe para los seis destinos --titulo sobre subtitulo-- y se llevaba por delante al idioma, que es un enlace mas dentro del panel: perdia la pildora y partia bandera y «EN» en dos lineas. Medido: fuera 61x34 en flex y con borde; dentro 52x40 en grid y sin borde. Se le devuelven los mismos valores que usa en el marco, y gana por especificidad --dos clases contra clase + elemento--, no por orden. */ .panel-mandos .idioma{background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);border-radius:4px;padding:.4rem .6rem;min-height:2.1rem;display:inline-flex;align-items:center;gap:.34rem} .panel-mandos .idioma span{font-size:var(--t-rotulo);letter-spacing:.1em;text-transform:none;margin:0} /* sin color propio: hereda el var(--ink-3) de .panel span y pesa lo mismo que OURANOS y el sonido. Con color:inherit salia blanco y el idioma gritaba mas que sus dos vecinos. */ .panel-sello{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} /* CLOSE, CON LA ROPA DE LOS MANDOS (15 oct). Fran, ante la maqueta: «lo unico que no me gusta es ese cerrar». Eran dos reglas que se pisaban (texto suelto, 12 px y luego .75rem en gris) y, al abrir, el foco caía en él y le pintaba el anillo doble del :focus-visible general. Ahora es un mando más —borde de 1 px, 4 px, versales de .7rem— y el foco entra por el título. */ .panel-cerrar{position:absolute;top:1.25rem;right:1.25rem;display:inline-flex;align-items:center;min-height:2.1rem;padding:.4rem .7rem;font:inherit;font-size:var(--t-rotulo);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);background:color-mix(in srgb,var(--bg) 62%,transparent);border:1px solid var(--line);border-radius:4px;cursor:pointer;transition:border-color .25s,color .25s} .panel-cerrar:hover,.panel-cerrar:focus-visible{border-color:var(--ink-3);color:var(--ink)} .panel-cerrar:focus-visible,.panel-mandos .panel-juego:focus-visible{outline:2px solid var(--ink-3);outline-offset:3px;box-shadow:none} .panel-titulo:focus,.panel-titulo:focus-visible{outline:none;box-shadow:none} /* sólo recibe el foco al abrir; no es un mando */ .panel::backdrop{background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(3px)} .panel-correo{display:block;padding-top:1.2rem;border-top:1px solid var(--line);font-family:var(--display);font-size:1rem;text-decoration:none} .sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* ---------- el viaje ---------- */ #viaje{position:relative;z-index:1} /* EL CANTO DE ABAJO, DESVANECIDO (24 sep). Fran: «se ve el corte del screen, eso se ve mal, deberia haber como un transition o algo asi». Medido en la captura: la fila con el salto de luz mas fuerte de todo el cuadro estaba en el borde inferior, 107 sobre 255 -- la escena terminaba de golpe contra el papel liso. Se comprobo antes de tocar que ese canto lo dibuja el DOCUMENTO y no el lienzo: apagando el canvas seguia ahi. Un degradado fijo en el color del fondo, asi que cada cielo trae el suyo. Va en z-index 1 y ANTES de #viaje en el arbol, asi que queda por encima del lienzo (z 0) y por debajo del texto (#viaje, z 1) y del recuadro de la lamina (z 2): la escena se disuelve, el texto y el marco de la lamina siguen nitidos. */ body::before{content:"";position:fixed;left:0;right:0;bottom:0;height:22vh;z-index:1;pointer-events:none; background:linear-gradient(to top,var(--bg) 0%,var(--bg) 26%,color-mix(in srgb,var(--bg) 88%,transparent) 42%,color-mix(in srgb,var(--bg) 45%,transparent) 66%,transparent 100%)} /* llega OPACO antes del canto de la lamina (y 848 de 900): el objetivo no es aclarar, es que ningun objeto llegue vivo al filo y se vea partido */ .tramo{position:relative;width:var(--col);margin-inline:auto;padding-inline:var(--pad)} /* un mundo dura lo que dura leerlo; su bloque se queda quieto mientras pasa */ .mundo{min-height:190svh} .bloque{position:sticky;top:0;height:100svh;padding-block:min(16vh,9rem) min(16vh,9rem);display:grid;align-content:end;gap:0} .bloque.ancho{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem;align-content:center;align-items:center} /* LA ENTRADA DE CADA MUNDO = el tránsito que lleva hasta él. No hay secciones de tránsito ([F] 2.41 a): el tránsito es el camino, y su largo son los grados que separan de verdad a las dos estrellas (MUNDOS-V3.md §La medida del viaje). 45svh de arranque + 8,3svh por grado reproduce las duraciones que tenían las secciones (17,18° → 188svh · 19,85° → 210 · 4,37° → 81 · 8,04° → 112 · 8,85° → 118). */ .mundo{padding-top:calc(45svh + var(--grados,0) * 8.3svh)} /* Betelgeuse NO lleva entrada: su tránsito es la obertura, que corre antes de que el scroll exista. Dejarle los 45svh era dejar un hueco vacío arriba, que es lo primero que se veía al cargar ([F] 15 sep). */ #betelgeuse{padding-top:0} /* el regreso es la cola de Rigel, no una sección: 18,61°, el segundo tramo más largo del cielo */ #rigel{--vuelta:18.61;padding-bottom:calc(45svh + var(--vuelta) * 8.3svh)} /* ---------- LA UI ESPERA A LOS ACTORES ([F] 2.43) ---------- `--ui` la escribe `motor/viaje.js` con el fundido que el director ya calcula por mundo: 0 detrás del telón, 1 con la escena colocada, y con retraso, para que la letra entre DESPUÉS que los actores y se vaya ANTES. Es un número, no texto (LEY 3). Sin motor la variable no existe y `var(--ui, 1)` resuelve en 1: la página sin JS se lee entera. Son dos selectores porque son dos formas: cinco mundos llevan un `.bloque` colgando de la sección, y el cinturón lleva tres `.parada` dentro de sus `.paso`. El sello del mundo va DENTRO del bloque, así que entra solo. El de ENTRADA y el de VUELTA quedan fuera a propósito — son la marginalia del tránsito, y se leen mientras se viaja, que es justamente cuando el bloque del mundo no debe verse. */ html.motor .mundo > .bloque, html.motor .mundo > .tiempo > .bloque, html.motor .mundo > .paso > .parada, html.motor .mundo > .paso > .bloque{opacity:var(--ui,1)} /* Meissa: dos bloques, cada uno en su paso */ /* Y EL SELLO DE ENTRADA HACE LO CONTRARIO: es la marginalia del TRÁNSITO, se lee mientras se viaja y sobra en cuanto la escena está puesta. Hasta hoy se quedaba clavado al fondo del contenido de su seccion —el sticky no puede bajar mas alla de ahi— y el sello del mundo nacia justo en ese punto, asi que los dos acababan a 71 px del borde superior, uno encima del otro; partir la cartela en dos lineas lo convirtio en cuatro. Con `--ui` invertido el relevo es exacto: el del tránsito se va justo cuando entra el del mundo. Sin motor la variable no existe y `var(--ui,0)` deja el sello visible, que es lo que debe pasar sin JS. */ /* La opacidad ya no se deriva de `--ui` sino de `--transito`, que el motor escribe directamente: 1 mientras u está dentro de la ENTRADA de este tramo, 0 fuera. `1 - --ui` decía «la escena aún no está puesta», que NO es lo mismo que «su tránsito está pasando»: con la escena aún lejos, `--ui` vale 0 y el sello quedaba encendido para siempre, y como es `sticky`, al salir su sección por arriba subía hasta plantarse sobre el wordmark. Sin motor la variable no existe y `var(--transito,1)` lo deja visible, que es lo que debe pasar sin JS. */ /* la marginalia del cuadro: abajo a la izquierda, quieta mientras su tramo pasa */ /* LA CARTELA VA EN DOS LÍNEAS, que es como la ponen los doce cuadros: fecha arriba, objeto abajo (`41:22` en y 820 y `41:23` en y 840, veinte píxeles de separación). La página las tenía unidas por un guion largo y se leía como un pie de foto, no como la cartela de una lámina. El corte se hace por ese mismo guion, sin tocar una palabra. En ATLAS sigue en una línea: su segunda —«época 2026.0 · … Bencosme fecit», que `42:2` sí dibuja— es COPY que no existe todavía en el documento, y el copy es de Fran. */ .sello{font-size:var(--t-rotulo);letter-spacing:.09em;color:var(--ink-3);line-height:1.6;max-width:46ch} .sello .fecha,.sello .objeto{display:block} .mundo .sello{position:absolute;left:var(--pad);right:var(--pad);bottom:2.2rem} /* LA PUERTA DEL CINTURÓN (30 sep): el sello de esa lámina lleva dentro el enlace al juego. En reposo no se distingue del resto de la marginalia —ni color, ni subrayado, ni cursor— y sólo existe cuando el puntero o el tabulador llegan. Es el único enlace de la página que se esconde a propósito; el foco SÍ se ve, porque esconderlo del teclado sería esconderlo de quien no puede usar el ratón. */ .sello a.puerta{color:inherit;text-decoration:none;transition:color .35s} .sello a.puerta:hover{color:var(--signal)} .sello a.puerta:focus-visible{outline:1px solid var(--signal);outline-offset:.35em;color:var(--signal)} .sello.entrada,.sello.vuelta{position:sticky;top:calc(100svh - 3.4rem);margin-bottom:-1.6rem;z-index:1} /* ══ EL MARGEN DE LA LAMINA, Y EL SELLO IMPRESO EN EL ═══════════════════════════════════════════════ Fran, 21 sep: *«hay como unas marcas de pantalla o algo asi que se estan sobreponiendo sobre otra ui»*. CINCO INTENTOS antes de este, todos medidos y todos revertidos, y lo que ensenaron: el sello del mundo iba `absolute` dentro de `.bloque`, que es `sticky` y mide un encuadre, asi que al salir el bloque por arriba el sello BARRIA la pantalla y cruzaba el wordmark; y fijarlo a una esquina tampoco vale, porque **los paneles miden un encuadre entero y su texto pasa por las CUATRO esquinas** al deslizarse: con el sello clavado abajo a la izquierda quedaban 16 choques medidos. No hay esquina libre DENTRO del cuadro. Asi que el sello sale del cuadro: la lamina reserva abajo una banda de papel, el contenido TERMINA encima de ella —los paneles miden un encuadre menos la banda— y el sello se imprime dentro. Una banda que tapa media linea no es un margen, es un recorte: por eso se acorta el panel y no solo se pinta la banda. Y el relevo se escribe entero, que es lo que fallaba antes: `data-escena` tiene UN solo valor, asi que solo la pareja del mundo actual puede encenderse, y dentro de esa pareja el sello del mundo y el del transito son complementarios por `--transito`. Dos sellos a la vez dejan de ser posibles. Sin motor no aplica nada: el sello se queda en su bloque, que es lo correcto sin JS. ══ */ html.motor .bloque,html.motor .parada{height:calc(100svh - var(--banda))} /* LA LÁMINA ENMARCA LA PANTALLA ENTERA, no la columna de 1440 (Fran, 7 oct: «en ultra wide screen el enmarco no se está adaptando y se está viendo mal»): la escena llena el ancho, así que el marco también; el contenido sigue en su columna. */ html.motor .lamina{inset:16px 16px var(--banda);z-index:5} html.motor #viaje::after{content:"";position:fixed;left:0;right:0;bottom:0;height:calc(var(--banda) + 46px);z-index:3;pointer-events:none;background:linear-gradient(to top, var(--bg) var(--banda), transparent calc(var(--banda) + 46px))} /* EL SELLO FIJO ES DE ESCRITORIO. Solo aqui la banda esta vacia por construccion (cada mundo mide 100svh - var(--banda)), asi que la cartela puede vivir en ella. En movil el contenido manda el alto, la banda deja de estar vacia, y el sello sale de ella: ver el bloque de movil mas abajo. */ @media (min-width:821px){ html.motor .mundo .sello{position:fixed;left:var(--lado);right:auto;top:auto;bottom:calc((var(--banda) - 1.1rem) / 2);margin:0;z-index:4; max-width:70ch;font-size:var(--t-rotulo);letter-spacing:.13em;opacity:0;transition:opacity .35s ease} html.motor[data-escena="betelgeuse"] #betelgeuse .sello:not(.entrada):not(.vuelta), html.motor[data-escena="saiph"] #saiph .sello:not(.entrada):not(.vuelta), html.motor[data-escena="meissa"] #meissa .sello:not(.entrada):not(.vuelta), html.motor[data-escena="bellatrix"] #bellatrix .sello:not(.entrada):not(.vuelta), html.motor[data-escena="cinturon"] #cinturon .sello:not(.entrada):not(.vuelta), html.motor[data-escena="rigel"] #rigel .sello:not(.entrada):not(.vuelta){opacity:calc(1 - var(--transito,0))} html.motor[data-escena="betelgeuse"] #betelgeuse .sello.entrada, html.motor[data-escena="saiph"] #saiph .sello.entrada, html.motor[data-escena="meissa"] #meissa .sello.entrada, html.motor[data-escena="bellatrix"] #bellatrix .sello.entrada, html.motor[data-escena="cinturon"] #cinturon .sello.entrada, html.motor[data-escena="rigel"] #rigel .sello.entrada{opacity:var(--transito,0)} } @media (max-width:760px){:root{--banda:38px}} /* la línea de la llegada: se lee durante la obertura, junto a Betel, y se va cuando el viaje empieza */ /* VERSALITAS: Instrument Sans MEDIUM 12 / 2.2, medido en el nodo `41:16` con get_design_context. Estaban en Regular 11.2 / 2.016 y salían un 7-11 % estrechas (444 px del nodo contra 413 medidos en la pagina). */ .cintillo{font-size:.75rem;letter-spacing:.1833em;font-weight:600;text-transform:uppercase;color:var(--ink-3);margin:0 0 1.25rem} #meissa .cintillo{font-size:var(--t-rotulo);letter-spacing:0} /* 185:136 · ls PERCENT 0 */ .titular{font-weight:300;font-size:clamp(1.9rem,3.61vw,52px);line-height:1.269;letter-spacing:-.03em;margin:0 0 1.6rem;max-width:24ch} #betelgeuse .titular{font-size:clamp(2rem,5.83vw,84px);line-height:1.0476;letter-spacing:-.0333em} /* 41:17/41:18 · 84/88 · ls −2.8 */ #saiph .titular{font-size:clamp(1.9rem,4.03vw,58px);line-height:1.069;letter-spacing:-.0414em} /* 60:6 · 58/62 · ls −2.4 */ #rigel .titular{font-size:clamp(1.9rem,4.03vw,58px);line-height:1.2759;letter-spacing:-.0414em} /* 250:403 · 58, lh AUTO 74 */ #meissa .titular{letter-spacing:0} /* 185:137/138 · ls PERCENT 0 */ .titular b{display:block;font-weight:500} .nb{white-space:nowrap} /* el punto: sin motor lo pinta el CSS; con motor es Betel quien se posa en él */ #betelgeuse .punto{width:.238em;height:.238em} /* 41:19 ⌀20 / 84 */ #saiph .punto{width:.293em;height:.293em} /* 60:8 ⌀17 / 58 */ #bellatrix .punto{width:.269em;height:.269em} /* 230:16 ⌀14 / 52 */ #rigel .punto{width:.241em;height:.241em} /* 250:405 ⌀14 / 58 */ #meissa .punto{width:.346em;height:.346em;background:radial-gradient(circle,#fff7eb 0%,#fc9e4d 50%,#db3d29 100%)} /* 185:140 ⌀18 / 52, y no es plano */ .punto{display:inline-block;width:.26em;height:.26em;border-radius:50%;background:var(--signal);margin-left:.1em;vertical-align:baseline} html[data-cielo="ouranos"] .punto{box-shadow:0 0 .5em var(--signal)} html.motor .punto{opacity:0} .lede{color:var(--ink-2);font-size:var(--t-cuerpo);line-height:1.706;max-width:560px} /* 41:20 · 17/29 · w 560 */ #saiph .lede,#bellatrix .lede{font-size:var(--t-cuerpo);line-height:1.6875} #saiph .lede{max-width:470px} /* 59:3 · el nodo mide 470 */ /* 60:9 · 16/27 */ #meissa .lede{font-size:var(--t-cuerpo);line-height:1.185;max-width:600px} /* 185:141 · 13.5 · w 600 */ #rigel .lede{font-size:var(--t-cuerpo)} /* 250:392 */ .guia{display:inline-block;margin-top:2.5rem;font-size:.75rem;letter-spacing:.1833em;font-weight:600;text-transform:uppercase;color:var(--ink-3);text-decoration:none} .pendiente{font-size:var(--t-rotulo);color:var(--halo);margin-top:.9rem} /* Saiph: los cinco casos */ /* SAIPH · el cuadro `59:3`. El texto a la izquierda (x=72) y las cinco portadas a la derecha, ALTERNANDO x=652 y x=892 —los 240 px de diferencia son el 16,7 % del cuadro— cada 145 px de alto. Cada portada es una IMAGE de 172×97 con trazo de 1,2, su título de 15 y su línea de 13 en `#f5822a`, que es naranja y no gris: es la cifra comprobable, y por eso brilla. */ #saiph .cuerpo{grid-template-columns:minmax(0,38fr) minmax(0,62fr);align-items:start} /* BELLATRIX · LA RUTA DE VUELO (13 oct; Figma `580:3`/`580:5`/`580:7`/`580:9`, fila «UI A»). Sustituye a la escala del mapa de 7.12: aquella resolvía la letra pequeña con una caja de cinco columnas encima de la escena —una tabla pegada al cielo—. Aquí no hay caja. El punto rojo del titular ES Ask, la primera parada (Q4), y de él sale una ruta que baja por las otras cuatro. Ask es el tramo largo (con marcas en la línea): el lede dice que es el que más tarda y la forma lo dice también. Con el scroll la línea se llena de punto a punto y cada parada se enciende al cruzar la línea de lectura; la que está activa lleva detrás una lámina de lectura —nace en su hito, filete y marcas de esquina—, idea de Fran (un halo de sombra se leía como un arreglo nuestro). Cada parada lleva su hoja (20 oct, ver «las hojas de las paradas» abajo); ninguna se atenúa. El fondo no se toca: todo esto es UI. La línea y el encendido los pone `ruta.js`; sin él la sección se lee entera, con todas las paradas encendidas y sin línea. */ .bloque.metodo{position:relative;display:grid;grid-template-columns:minmax(0,19.5rem) minmax(0,1fr);column-gap:clamp(1.5rem,3vw,3rem);align-items:start} .metodo .dicho{grid-column:1;max-width:19.5rem} .metodo .sello{grid-column:1/-1} .rv{grid-column:2;list-style:none;margin:clamp(4.8rem,10vh,6.6rem) 0 0;padding:0 0 0 2.2rem;max-width:26rem;position:relative;z-index:1} .rv-etapa{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;margin:0 0 2rem} .rv-etapa:nth-child(1){margin-bottom:clamp(3.6rem,8vh,5.2rem)} /* el tramo largo: Ask */ .rv-etapa{margin-left:1rem} /* un solo carril: las cinco paradas en columna, como en el teléfono */ .rv-etapa .num{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)} .rv-etapa b{font-family:var(--display);font-weight:500;font-size:clamp(1.45rem,2vw,1.7rem);letter-spacing:-.02em;line-height:1.1;color:var(--ink)} .rv-etapa:first-child b{font-size:clamp(1.8rem,2.6vw,2.15rem)} .rv-etapa .que{font-size:var(--t-cuerpo);line-height:1.5;color:var(--ink-2);max-width:25rem} .rv-etapa .que,.rv-etapa b,.rv-etapa .num,.metodo .dicho{text-shadow:0 1px 14px color-mix(in srgb,var(--bg) 70%,transparent),0 0 2px color-mix(in srgb,var(--bg) 55%,transparent)} .rv-etapa .caso{font-size:var(--t-apoyo);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--signal);margin-left:.35em} .rv-etapa .caso:hover,.rv-etapa .caso:focus-visible{border-bottom-width:2px} .rv-etapa .caso .flecha{display:inline-block;color:var(--signal);transition:transform .3s} html[data-cielo="ouranos"] .rv-etapa .caso{border-bottom-color:#ff7a6e} html[data-cielo="ouranos"] .rv-etapa .caso .flecha{color:#ff7a6e} .rv-etapa .caso:hover .flecha,.rv-etapa .caso:focus-visible .flecha{transform:translateX(.25em)} /* el hito de cada parada: hueco si falta, lleno si ya se pasó, con anillos si es la activa. Ask no lleva: su hito es el punto */ .rv-etapa .rv-hito{position:absolute;left:-1.55rem;top:1.55rem;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%; border:1.2px solid color-mix(in srgb,var(--ink) 60%,transparent);background:transparent;transition:background .4s,box-shadow .4s} .rv-etapa:first-child .rv-hito{display:none} .rv:not(.rv-viva) .rv-hito,.rv-etapa.rv-on .rv-hito{background:var(--ink);border-color:var(--ink)} .rv-etapa.rv-ahora .rv-hito{box-shadow:0 0 0 4px color-mix(in srgb,var(--bg) 40%,transparent),0 0 0 5px color-mix(in srgb,var(--ink) 70%,transparent),0 0 0 13px color-mix(in srgb,var(--ink) 18%,transparent)} .rv-etapa.rv-ahora:not(:first-child) .num::after{content:" · now"} :lang(es) .rv-etapa.rv-ahora:not(:first-child) .num::after{content:" · ahora"} /* las hojas de las paradas (20 oct, AUDITORIA-ATLAS.html P1·1). Antes sólo la activa llevaba lámina y las que faltaban bajaban al 66 %: en Atlas los arcos del globo pasaban detrás y el párrafo quedaba a 4,0:1 —y Ask, ya pasada, a 1,4:1—. Ahora cada parada tiene su hoja de papel (vidrio en Ouranos) y el estado lo dice el filete, con la gramática de la propia ruta: la que falta, discontinuo como el tramo que no se ha volado; la pasada, filete fino y continuo —Betel la deja encendida al partir—; la activa, la lámina de Fran (13 oct: «poner un cuadro, que se ponga por detrás, como si fuera parte de la ui»), más papel, filete de tinta y marcas de esquina. Nace en su hito —el borde izquierdo sale del punto de la ruta— y las marcas viajan de parada en parada, bajando un poco. La tinta del texto no cambia nunca. */ .rv-etapa::before,.rv-etapa::after{content:"";position:absolute;inset:-.6rem -1.3rem -.65rem calc(-1.55rem + 9px);pointer-events:none} .rv-etapa::before{z-index:-1;background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .45s ease,border-color .45s ease} .rv.rv-viva .rv-etapa:not(.rv-on)::before{border-style:dashed;border-color:color-mix(in srgb,var(--ink) 30%,transparent)} .rv-etapa.rv-ahora::before{border-color:color-mix(in srgb,var(--ink) 40%,transparent)} html[data-cielo="atlas"] .rv-etapa::before{background:color-mix(in srgb,var(--bg) 84%,transparent)} html[data-cielo="atlas"] .rv-etapa.rv-ahora::before{background:color-mix(in srgb,var(--bg) 90%,transparent);border-color:color-mix(in srgb,var(--ink) 45%,transparent)} .rv-etapa::after{opacity:0;transform:translateY(-8px);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1);z-index:-1;background:linear-gradient(var(--ink),var(--ink)) top left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/1.5px 10px no-repeat} .rv-etapa.rv-ahora::after{opacity:.7;transform:none} /* la línea (la dibuja ruta.js dentro del bloque) */ .rv-linea{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0} .rv-linea .rv-base{fill:none;stroke:var(--ink);stroke-opacity:.42;stroke-width:1.2;stroke-dasharray:3 6} .rv-linea .rv-lleno{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round} .rv-linea .rv-lleno.rv-ask,.rv-linea .rv-marca{stroke:var(--signal)} .rv-linea .rv-marca{stroke-width:1;stroke-opacity:.7} @media (prefers-reduced-motion:reduce){.rv-etapa,.rv-etapa .rv-hito,.rv-etapa::before,.rv-etapa::after,.rv-etapa .caso .flecha{transition:none}} @media (max-width:820px){ .bloque.metodo{grid-template-columns:minmax(0,1fr)} .rv{grid-column:1;margin-top:1.4rem;max-width:none;padding:0 .75rem 0 0} /* el aire de la derecha: las hojas no pisan el marco */ .metodo .dicho{max-width:none}.metodo .lede{max-width:calc(100% - 4.2rem)} /* el carril de la derecha queda libre para la S */ .rv-etapa:nth-child(1){max-width:calc(100% - 4.2rem);margin-bottom:3.4rem} .rv-etapa:first-child{margin-left:.75rem} .rv-etapa:nth-child(n+2){margin-left:2.4rem} .rv-etapa .rv-hito{left:-1.45rem} .rv-etapa b{font-size:1.4rem}.rv-etapa:first-child b{font-size:1.8rem} .rv-etapa::before,.rv-etapa::after{inset:-.6rem -.6rem -.65rem calc(-1.45rem + 9px)} .rv-etapa:first-child::before,.rv-etapa:first-child::after{left:-.6rem} } #bellatrix-texto .cintillo{color:var(--ink-2)} /* ── EL HERO, LEGIBLE SOBRE EL PLANETA: UN SCRIM, NO UN HALO (24 sep) ─────────────────────────────────────── Primero puse halo de text-shadow alrededor de cada letra. Fran, mirandolo: «ese glow que le pusiste a la tipografia no ayuda en nada, mas que nada es un error porque crea ruido y no permite leer bien, te sugiero que mejor busquen en internet como arreglar eso». Tenia razon en las dos cosas. Buscado (Smashing Magazine, «Designing Accessible Text Over Images», y WebAIM): la tecnica para texto sobre imagen es el SCRIM --una capa semitransparente en degradado detras del texto-- y el text-shadow es un apano secundario que ademas los verificadores de accesibilidad NO CUENTAN, porque miden color contra color y no saben de sombras. O sea que el halo ni se leia bien ni contaba: lo peor de los dos lados. El scrim va sobre el bloque de texto del hero, que ya tiene id propio. Es un degradado radial muy abierto que nace en el centro de la columna y muere antes del borde: controla el fondo REAL que hay detras de las letras, que es lo unico que sube el contraste de verdad, y no deja canto visible. No llega a tapar del todo --se queda en un 92 %-- para que el planeta siga ahi detras, que es lo que pide la escena. Se pinta con var(--bg), asi que cada cielo trae el suyo: papel en Atlas, campo en Ouranos. */ /* NO se le pone position aqui: `.bloque` ya es position:sticky --se queda pegado mientras pasa su trozo de scroll-- y escribir relative encima lo rompia. Sticky ya crea el contexto que el ::before necesita. */ #betelgeuse-texto>*{position:relative;z-index:1} /* LA CAJA SE CINE AL TEXTO, NO AL BLOQUE (24 sep). `.bloque` mide 100svh, asi que un ::before con inset negativo cubria la pantalla ENTERA y el degradado llegaba al borde sin haber muerto: eso era la linea recta que Fran veia cruzando el cuadro. Medido apagando candidatos uno a uno: sin este scrim el corte desaparece (salto 13.4 -> nada); sin el desvanecido de abajo, sin la lamina, sin el marco y sin el velo, el corte SEGUIA. Era este. Ahora la elipse se centra donde esta el texto --abajo a la izquierda-- y llega a transparente MUY dentro de la caja, asi que no toca ningun borde y no hay canto que ver. */ #betelgeuse-texto::before{content:"";position:absolute;inset:0 0 0 -9rem;z-index:0;pointer-events:none; /* LA ELIPSE VA SOBRE EL TEXTO, con numeros medidos y no a ojo (24 sep). Fran, senalando el velo en Atlas: «se ve que el filtro que pusiste atras esta mal puesto a diferencia de ouranos; solo quiero que tengan el mismo ancho y posicion». Medido en la escena: el bloque es 1296x1098 y el texto ocupa del 0 al 100 % de su ancho y del 49 al 87 % de su alto -- o sea centro en 50 %, 68 %. Mi elipse estaba en 27 %, 76 % y con radio 62 %: descentrada a la izquierda y ademas SALIENDOSE del bloque, que la recortaba. Eso era el manchon. En Ouranos no cantaba porque es velo oscuro sobre fondo oscuro; en Atlas es papel sobre gris y se ve todo. Ahora cae donde esta el texto y cabe entera dentro de su caja, asi que se comporta igual en los dos cielos. */ /* LA FORMA DEL VELO ES LA DEL TEXTO, no una elipse (24 sep). El texto es un rectangulo ANCHO Y BAJO --ocupa del 0 al 57 % del ancho y del 49 al 87 % del alto-- y una elipse no lo cubre sin salirse de la caja: con radio grande se desbordaba por la izquierda (el manchon que vio Fran) y con radio pequeno dejaba fuera el lede y la guia (medido: 14.2 % y 26.2 % por debajo del minimo). Asi que el degradado se separa en dos ejes: el HORIZONTAL lo pinta el fondo, el VERTICAL lo recorta la mascara. Los dos mueren en cero antes de cualquier borde, y la caja se estira 9rem a la izquierda para que tambien muera antes del margen de la pagina. */ background:linear-gradient(to right,transparent 0%,color-mix(in srgb,var(--bg) 72%,transparent) 10%,color-mix(in srgb,var(--bg) 92%,transparent) 24%,color-mix(in srgb,var(--bg) 78%,transparent) 48%,color-mix(in srgb,var(--bg) 30%,transparent) 66%,transparent 82%); /* 46% -> 32% en X: el texto ocupa del 0 al 57 % del ancho del bloque, no del 50 %. Centrarla en la caja la sacaba de encima del lede y de la guia, y el contraste se perdia otra vez (lede 0.0 -> 14.2 %, guia 0.1 -> 26.2 %). El radio baja a 34 % para que siga cabiendo entera. */ /* Y LA MASCARA, QUE ES LO QUE PIDIO FRAN: «un degradado a 0% para abajo para que no se vea el corte». El scrim se apaga hacia abajo hasta cero, asi que no puede tener canto: donde termina ya no hay nada que cortar. Es una mascara, no otro degradado de color -- lo que se desvanece es el propio scrim, no lo que pinta. */ /* LA MASCARA VA EN TODAS LAS DIRECCIONES, no solo hacia abajo. Con la lineal el velo moria por abajo pero salia entero por la IZQUIERDA del bloque, y ahi el canto medido era de 113 sobre 255 -- peor que el corte original. Radial: el velo llega a cero antes de tocar ningun borde de su caja, asi que no hay canto por ningun lado. */ /* la mascara va un poco mas ancha que la pintura, para que no la recorte: su unico trabajo es garantizar el cero */ /* dos mascaras que se cruzan: la primera recorta el velo en vertical; la segunda le abre el agujero de Betel, cuyo centro publica el motor en --betel-x / --betel-y. Sin motor las variables no existen y el valor por defecto manda el agujero fuera de cuadro, asi que el velo queda entero. */ -webkit-mask-image:linear-gradient(to bottom,transparent 38%,#000 50%,#000 90%,transparent 99%),radial-gradient(circle at var(--betel-x,-9999px) var(--betel-y,-9999px),transparent 0 2.1rem,#000 4.8rem); mask-image:linear-gradient(to bottom,transparent 38%,#000 50%,#000 90%,transparent 99%),radial-gradient(circle at var(--betel-x,-9999px) var(--betel-y,-9999px),transparent 0 2.1rem,#000 4.8rem); -webkit-mask-composite:source-in;mask-composite:intersect} /* EXPERIMENTO (4 oct): sin el scrim, con `?sinvelo=1` (`motor/viaje.js`). Se borra cuando Fran decida. */ html.sin-velo #betelgeuse-texto::before{display:none} /* …y el ASIENTO (arriba, `.asiento`): las dos elipses del color del cielo —la columna de texto a la izquierda y el pie abajo— que eran el «borrón» y la «barra» de Fran en los dos cielos. También aclaraban el planeta del hero en Atlas cuando estaba a la izquierda (lo lavaban al 90 % de papel): su tono real es el gris plano que se ve a la derecha. */ html.sin-velo .asiento{display:none} /* Y LA TINTA MAS CLARA, CON MARGEN. --ink-3 da 4.68-5.09 sobre papel limpio contra el 4.5 exigido: pasa por un pelo, y cualquier objeto detras lo tumba. En el hero, cintillo, guia y sello suben a --ink-2. No se toca el token global: la rampa de Atlas es una sola para los seis cuadros, y no se inventa un color -- se usa el que la propia rampa ya tiene, que es lo que hace el lede. */ html[data-cielo="atlas"] #betelgeuse .cintillo,html[data-cielo="atlas"] #betelgeuse .guia,html[data-cielo="atlas"] #betelgeuse .sello{color:var(--ink-2)} /* EL CINTURÓN: TRES PARADAS, CADA UNA SU PANTALLA — y cada una QUIETA mientras pasa. Era la única sección del viaje que no se quedaba quieta: sus tres paradas bajaban con el scroll, y como el marco es `position:fixed` y aquí NADA lleva fondo (ley 1 de esta hoja), el texto pasaba por DEBAJO del wordmark. Se ve en el cuadro de u 0.653: «Long story» encima de «franbencosme». El arreglo es el patrón que ya usa todo lo demás —`position:sticky`— pero un sticky sólo se queda dentro de SU padre: tres hermanos pegados a top:0 en el mismo padre se pisan entre ellos. Por eso cada parada va envuelta en su propio `.paso`, que es el trozo de scroll durante el cual esa parada manda. */ .paso{position:relative;min-height:128svh} .parada{position:sticky;top:0;height:100svh;padding-block:min(14vh,7.5rem) min(10vh,5rem);display:grid;gap:2.5rem;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center} .ancla{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;color:var(--ink-2);margin:0 0 1rem} /* MINTAKA · LA BIOGRAFÍA, DEL CUADRO DE FRAN (7 oct). Figma `545:536`: Fran la diseñó y pidió *«adaptarás a nuestro estilo […] no es para que crees un 1-1 es para que puedas seguir lo más fiel posible pero usando nuestro sistema de diseño»*. Medidas, orden y composición son las del cuadro (escritorio 1440 · tablet 834 · teléfono 390); las fuentes, las nuestras (Poppins → la display, Instrument Sans → la de texto) y los colores, los de cada cielo: en Ouranos los suyos sobre la capa negra; en Atlas, tinta sobre la capa de papel (Fran, 7 oct: «atlas, that's a good idea you could try it»). La sección mide unas dos pantallas («length yes»). Sin el pie «Reportero / from the archive» («forget the reportero photo»). */ html[data-cielo="ouranos"] #mintaka{--bio-1:#f4f1e9;--bio-2:#b4b9c7;--bio-acento:#ff7a6e; /* el rojo claro de Betel: el oscuro no llega a 4,5 sobre negro (23 oct, ANALISIS-FASE4.md) */--bio-linea:#343743} html[data-cielo="atlas"] #mintaka{--bio-1:var(--ink);--bio-2:var(--ink-2);--bio-acento:var(--signal); /* 22 oct, Fran: «color de betel (rojo o azul depende de modo), no usemos el bronze»; */ --bio-linea:color-mix(in srgb,var(--ink) 22%,transparent)} /* LA CAPA (bio.js pone --bio-capa de 0 a 1 según dónde está la sección): delante del lienzo, detrás de todo el texto */ /* BETEL ENCIMA DE TODO (betelcapa.js): su lienzo va sobre la página, bajo la barra (9) y el velo de carga (20) */ html.motor .betel-capa{position:fixed;inset:0;width:100%;height:100%;z-index:8;pointer-events:none} .bio-capa{position:fixed;inset:0;z-index:0;pointer-events:none;background:#000;opacity:calc(var(--bio-capa,0) * .72);transition:opacity .45s linear} html[data-cielo="atlas"] .bio-capa{background:var(--bg);opacity:calc(var(--bio-capa,0) * .86)} html.motor #mintaka,#mintaka{height:auto;min-height:100svh;display:block;padding-block:clamp(1.5rem,3.2vw,2.9rem) clamp(3rem,6vw,5.5rem)} .bio{color:var(--bio-1);font-family:var(--body)} .bio p{margin:0} .bio-ceja{font-size:12px;line-height:18px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;color:var(--bio-2)} .bio-dos{color:var(--bio-2)} /* ── la cabeza: rótulo, inscripción, el nombre enorme que entra en el retrato, y debajo oficio y ficha ── */ /* el retrato vive en la rejilla (no flota): ocupa la columna derecha de las tres primeras filas, y el nombre baja hasta su pie; así nada de lo que va debajo (oficio, ficha) puede quedar tapado por la foto */ .bio-cabeza{--foto-w:min(30.5vw,440px);--foto-m:calc(80 / 1440 * 100vw);position:relative;display:grid;grid-template-columns:minmax(0,1fr) calc(var(--foto-w) + var(--foto-m));column-gap:0} /* 22 oct, Fran: «que el texto no se sobreponga en la foto, dale padding y en móvil que la foto se ponga arriba del texto». El nombre vive en la columna izquierda, con aire antes del retrato, y su tamaño cabe ahí; en el teléfono va debajo de la foto. */ .bio-nombre{grid-column:1;padding-right:2rem} /* «Biography», con el rótulo de las demás secciones (Fran, 7 oct: «puedes usar el texto de biography y quitar mintaka») */ .bio-etiqueta{grid-column:1;grid-row:1;margin:0;color:var(--bio-2)} /* LA INSCRIPCIÓN, como la de una placa: una sola línea en vertical que sube pegada al canto izquierdo del retrato, como la firma de un grabado o el rótulo lateral de una lámina (Fran, 7 oct: «el MMVIII Artifex Stellerum lo podrías poner de otra forma que sea interesante»). El año en el acento. */ .bio .bio-inscripcion{grid-column:2;grid-row:1 / 4;align-self:start;justify-self:start;margin:clamp(2.5rem,3.75vw,3.4rem) 0 0 -1.9rem; writing-mode:vertical-rl;transform:rotate(180deg);font-size:12px;line-height:1;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--bio-2);white-space:nowrap} .bio-inscripcion span{color:var(--bio-acento)} /* el retrato y su pie (13 oct): la ficha ES el pie de la foto (figcaption, regla D5 de probe.js); la figura no ocupa caja propia (display:contents), así que foto y ficha siguen colocadas en la rejilla como antes */ .bio-foto{display:contents} .bio-foto > img{grid-column:2;grid-row:1 / 4;align-self:start;width:var(--foto-w);margin:clamp(2.5rem,3.75vw,3.4rem) var(--foto-m) 0 0;justify-self:end;z-index:0} .bio-foto > img{display:block;height:auto;aspect-ratio:4/5;object-fit:cover} .bio-nombre{grid-row:3;align-self:end;position:relative;z-index:1;margin:clamp(2rem,4.2vw,3.8rem) 0 0;font-family:var(--display);font-weight:600; font-size:clamp(4.5rem,9.8vw,9rem);line-height:.96;letter-spacing:-.041em;color:var(--bio-1);margin-left:-.055em} .bio-nombre span{display:block} /* la parte del nombre que cruza el retrato va en blanco (en el cuadro el nombre es claro sobre la foto; en Atlas la tinta se perdía) */ .bio-nombre .punto{-webkit-text-fill-color:initial} /* el punto va tras «Fran», en cielo abierto: tras «Bencosme» caía sobre el retrato y la foto tapaba a Betel (Fran, 7 oct: «betel nunca debe desaparecer») */ .bio-nombre .punto{width:.11em;height:.11em} .bio-intro{grid-column:1;grid-row:4;margin-top:clamp(2rem,5vw,4.5rem);display:grid;gap:8px;max-width:60rem} .bio-lema{font-size:clamp(21px,2.08vw,30px);line-height:1.35;font-weight:500;color:var(--bio-1)} .bio-intro .bio-dos{font-size:clamp(14px,1.32vw,19px);line-height:1.35} /* oficio y lugar, alineados con el canto izquierdo del retrato (Fran, 7 oct) */ .bio-ficha{grid-column:2;grid-row:4;justify-self:end;margin:clamp(2rem,5vw,4.5rem) var(--foto-m) 0 0;width:var(--foto-w);display:grid;gap:7px;align-self:start} .bio-oficio{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.4;color:var(--bio-1)} .bio-ficha > span{display:block} .bio-ficha .bio-dos{font-size:15px;line-height:1.5} .bio-linea{border:0;height:1px;background:var(--bio-linea);margin:clamp(2.5rem,5vw,4.5rem) 0} /* ── la historia: el rótulo, la estatua con «How I got here.» encima, y la columna de lectura a la derecha ── */ .bio-historia{display:grid;grid-template-columns:minmax(0,1fr) min(41vw,590px);column-gap:2rem;align-items:start} .bio-historia .bio-ceja{grid-column:1 / -1;margin-bottom:clamp(1rem,1.7vw,1.5rem)} .bio-estatua{grid-column:1;grid-row:2 / 4;width:min(31.6vw,455px);aspect-ratio:455/577;position:relative} .bio-estatua canvas{width:100%;height:100%;display:block} /* la estatua se toca y se gira (bio.js, «LA MANO DEL VISITANTE»): en teléfono el deslizar vertical sigue siendo scroll */ .bio-estatua canvas{cursor:grab;touch-action:pan-y;-webkit-tap-highlight-color:transparent} .bio-estatua canvas.agarrado{cursor:grabbing} /* «How I got here.» va CENTRADO SOBRE LA ESTATUA (Fran, 12 oct: «que el "how I got here" esté centralizada a la estatua […] poner el texto invertido sobre la estatua para que se pueda leer sin problemas»): una caja del ancho de la estatua con el texto centrado por flex, que se desborda por igual a los dos lados si es más ancho. Color: blanco en Ouranos y negro en Atlas (Fran, 12 oct: «en atlas debería ser negro y blanco en ouranos»; el invertido se probó y se leía mal). Para leerse sobre la estatua lleva un HALO del color del cielo (Fran eligió la opción 1): una sombra ancha y muy difusa que oscurece en Ouranos —o aclara en Atlas— sólo alrededor de las letras, sin caja. La copia blanca invertida sobre la estatua (12 oct) se quitó el 22 oct (Fran: «en la estatua en atlas, pon el texto negro»). */ #mintaka{--bio-halo:rgba(5,6,13,.9)} html[data-cielo="atlas"] #mintaka{--bio-halo:rgba(244,245,248,.95)} /* el título va encima de la estatua: los toques lo atraviesan para llegar a ella */ .bio-titulo{grid-column:1;grid-row:2;align-self:start;pointer-events:none;margin-top:calc(min(31.6vw,455px) * 1.27 * .41);position:relative;z-index:1; width:min(31.6vw,455px);display:flex;justify-content:center;white-space:nowrap;color:var(--bio-1); text-shadow:0 0 14px var(--bio-halo),0 0 30px var(--bio-halo),0 0 56px var(--bio-halo); font-family:var(--display);font-weight:600;font-size:clamp(2.4rem,5vw,4.5rem);line-height:1.35;letter-spacing:-.042em} .bio-titulo .punto{flex:none} /* el punto de Betel al final del título (13 oct): en el flex se encogía a cero */ .bio-columna{grid-column:2;grid-row:2 / 4;display:grid;gap:28px;padding-top:clamp(1rem,2.5vw,3.6rem)} .bio-columna p{font-size:clamp(16px,1.46vw,21px);line-height:1.52;color:var(--bio-2)} /* el enlace de Redviver (7.68): el mismo subrayado de señal que los casos de Meissa y Bellatrix */ .bio-columna p a{color:var(--bio-1);text-decoration:none;border-bottom:1px solid var(--signal)} html[data-cielo="ouranos"] .bio-columna p a{border-bottom-color:#ff7a6e} .bio-columna .bio-abre{font-size:clamp(23px,1.94vw,28px);line-height:1.29;font-weight:500;color:var(--bio-1)} .bio-columna .bio-frase{font-family:var(--display);font-weight:300;font-size:clamp(26px,2.36vw,34px);line-height:1.35;letter-spacing:-.02em;color:var(--bio-1)} /* ── el cierre, centrado ── */ .bio-cierre{text-align:center;display:grid;gap:clamp(1rem,1.6vw,1.5rem)} .bio-cierre .bio-dos{font-size:clamp(14px,1.53vw,22px);line-height:1.45} .bio-final{font-family:var(--display);font-weight:600;font-size:clamp(2rem,4.72vw,4.25rem);line-height:1.13;letter-spacing:-.037em;color:var(--bio-1)} /* TABLET (cuadro 545:784): la foto más estrecha, el nombre a 96, la ficha a la derecha del oficio, la columna a la derecha */ @media (max-width:1100px) and (min-width:821px){ .bio-cabeza{--foto-w:38.8vw;--foto-m:0px} .bio-nombre{font-size:clamp(3.5rem,9vw,5.5rem);margin-top:clamp(3rem,10vw,5.5rem)} .bio-historia{grid-template-columns:minmax(0,1fr) 43vw} .bio-estatua{width:36vw} .bio-titulo{font-size:clamp(2rem,4.8vw,2.5rem);margin-top:calc(36vw * 1.27 * .4);width:36vw} } /* TELÉFONO (cuadro 545:662; 22 oct, Fran: «cuando digo que se ponga arriba es que también se alinee a la izquierda y no se quede a la derecha»): retrato arriba a la IZQUIERDA, la inscripción a su derecha, el nombre en dos líneas montado sobre su pie, oficio y ficha uno bajo otro, la estatua centrada con el título encima, y la columna debajo */ @media (max-width:820px){ .bio-cabeza{--foto-w:55%;--foto-m:0px;grid-template-columns:55% minmax(0,1fr)} .bio .bio-inscripcion{grid-column:2;grid-row:2;align-self:start;margin:69px 0 0 .9rem;letter-spacing:.2em} /* de pie, como en escritorio, con su tope en el de la foto (22 oct, Fran: «que el artifex esté más parado, alineado con el tope de la foto de perfil, porque ahora se ve tirado») */ .bio-foto > img{grid-column:1;grid-row:2;justify-self:start;width:100%;margin:69px 0 0} /* la foto arriba a la izquierda; el nombre, en la fila de abajo */ .bio-nombre{grid-column:1 / -1;padding-right:0;font-size:clamp(3rem,15.6vw,4.4rem);line-height:1.15;margin-top:1.5rem} .bio-intro{margin-top:43px} .bio-lema{font-size:21px} .bio-intro{grid-column:1 / -1} .bio-ficha{grid-column:1 / -1;grid-row:5;justify-self:start;margin-top:18px;width:auto;gap:4px} .bio-oficio,.bio-ficha .bio-dos{font-size:var(--t-apoyo);line-height:18px} .bio-linea{margin:3rem 0 2rem} .bio-historia{grid-template-columns:minmax(0,1fr)} .bio-estatua{grid-row:2;width:68%;justify-self:center} .bio-titulo{grid-row:2;align-self:center;margin-top:0;font-size:39px;line-height:1.25;width:68%;justify-self:center} .bio-columna{grid-column:1;grid-row:3;padding-top:2.5rem;gap:20px} .bio-columna p{font-size:16px;line-height:25px} .bio-columna .bio-abre{font-size:23px;line-height:31px} .bio-columna .bio-frase{font-size:26px;line-height:35px} .bio-cierre .bio-dos{font-size:14px} .bio-final{font-size:32px;line-height:40px} } /* ALNILAM · LO ESCRITO — LA PÁGINA ABIERTA (15 oct, BACKLOG-CINTURON.md parte 3, DECISIONES 7.30). Fran: «creo que deberías trabajar la ui de esa sección de 0, aun si ocupas el espacio de la derecha sin restrains», y «B» entre tres maquetas. Sale del contenido y no de un molde: cada ensayo abre con dos o tres frases que ya son el gancho, y tiene tres subtítulos que lo resumen. Así que la parada deja de enseñar una tarjeta SOBRE el ensayo y enseña el ensayo: a la izquierda los tres títulos como índice; a la derecha, sobre la lámina de Bellatrix, la página del elegido abierta —su título, sus dos primeros párrafos a tamaño de lectura, desvaneciéndose, lo que hay dentro y «Keep reading →»—. Es el mismo elegir → ver de Saiph y Meissa (ensayos.js). Sin ensayos.js, una lista: cada título con su apertura debajo. En el teléfono, acordeón: la apertura del elegido se abre bajo su título. */ .ensayos{grid-column:1/-1;align-self:start;width:100%} /* el titular en una línea, como en la maqueta B: deja el alto para la página */ @media (min-width:821px){#alnilam .titular{white-space:nowrap;margin:0}#alnilam .titular b{display:inline}} /* el hueco entre «Essays» y «on how I work» es el espacio del HTML (24 oct): con el margen eran dos */ .ens-cabeza .lede{margin:.7rem 0 0;max-width:34rem;font-size:var(--t-cuerpo);color:var(--ink-2)} .ens-cabeza,.ens-tit{text-shadow:0 1px 14px color-mix(in srgb,var(--bg) 70%,transparent),0 0 2px color-mix(in srgb,var(--bg) 55%,transparent)} .ens-lista{list-style:none;margin:clamp(1rem,3vh,2.5rem) 0 0;padding:0} .ens>.ens-tit{margin:0;font:inherit;display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:.6rem;row-gap:.2rem;align-items:baseline;padding:clamp(.75rem,1.8vh,1.1rem) 0;border-top:1px solid color-mix(in srgb,var(--ink) 22%,transparent)} .ens:last-child>.ens-tit{border-bottom:1px solid color-mix(in srgb,var(--ink) 22%,transparent)} .ens-tit .n{font-family:var(--display);font-weight:300;font-size:1.75rem;line-height:1;color:var(--ink-2);grid-row:1/span 2} .ens-tit .t{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.2;letter-spacing:-.01em;color:var(--ink);transition:color .3s} .ens-tit .meta,.ens-ap .rot{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} /* la página: la lámina de Bellatrix (filete, marcas de esquina, vidrio en Ouranos, papel en Atlas) */ .ens-ap{position:relative;isolation:isolate;padding:clamp(1.25rem,3vh,2.5rem) clamp(1.25rem,3vw,3rem)} .ens-ap::before,.ens-ap::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1} .ens-ap::before{background:color-mix(in srgb,var(--bg) 82%,transparent);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} html[data-cielo="atlas"] .ens-ap::before{background:color-mix(in srgb,var(--bg) 92%,transparent);border-color:color-mix(in srgb,var(--ink) 45%,transparent)} .ens-ap::after{opacity:.7;background:linear-gradient(var(--ink),var(--ink)) top left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/1.5px 10px no-repeat} .ens-ap>p{margin:0 0 .9em;max-width:38em;font-size:var(--t-cuerpo);line-height:1.62;color:var(--ink)} /* el segundo párrafo se desvanece: la página sigue, y para leerla hay que entrar */ .ens-ap>p.desvanece{max-height:4.86em;overflow:hidden;color:var(--ink-2);-webkit-mask-image:linear-gradient(#000 15%,transparent 95%);mask-image:linear-gradient(#000 15%,transparent 95%)} .ens-pagina-tit{display:none} .ens-pie{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 2rem} .ens-dentro ul{list-style:none;margin:.35rem 0 0;padding:0;font-size:var(--t-apoyo);line-height:1.6;color:var(--ink-2)} .ens-dentro li::before{content:"— ";color:var(--ink-3)} .ens-ap .leer{font-size:.9375rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--sel);padding-bottom:2px;white-space:nowrap} .ens-ap .flecha{display:inline-block;color:var(--sel);transition:transform .3s} .ens-ap .leer:hover .flecha{transform:translateX(.25em)} /* sin ensayos.js: la lista con su apertura bajo cada título */ .ensayos:not(.vivo) .ens-ap{margin:.5rem 0 1.25rem} /* — con ensayos.js — el título de la página es el enlace; el botón del índice elige */ .vivo .ens-pagina-tit{display:block;margin:0 0 .9rem;font-family:var(--display);font-weight:500;font-size:clamp(1.5rem,min(2.3vw,4vh),2.125rem);line-height:1.15;letter-spacing:-.02em;color:var(--ink);text-decoration:none} .vivo .ens-pagina-tit:hover{text-decoration:underline;text-decoration-color:var(--sel);text-underline-offset:.15em} /* el botón es una caja de verdad (con display:contents Chrome no lo deja enfocar con el teclado) y lleva la rejilla de la fila */ .vivo .ens>.ens-tit{display:block} .vivo .ens-tit button{all:unset;box-sizing:border-box;width:100%;cursor:pointer;display:grid;grid-template-columns:3.2rem minmax(0,1fr);column-gap:.6rem;row-gap:.2rem;align-items:baseline} .vivo .ens-tit:hover .t,.vivo .ens.on .ens-tit .t,.vivo .ens.on .ens-tit .n{color:var(--sel)} html[data-cielo="atlas"] .vivo .ens.on .ens-tit .t{color:var(--ink)} /* 22 oct (fase 2, punto 4): en Atlas el título activo va en tinta —el color de selección sobre un dibujo gris daba 2,9:1—; el número sigue marcando cuál es */ .vivo .ens-tit button:focus-visible{outline:2px solid var(--sel);outline-offset:4px} .vivo .ens:not(.on) .ens-ap{display:none} @media (min-width:821px){ /* la parada empieza bajo la cápsula, no centrada: el alto es para la página (en español las aperturas son más largas) */ #alnilam{padding-top:max(76px,9vh)} /* el índice a la izquierda, la página a la derecha y a la altura del índice */ /* la cuarta fila es flexible y la página la cruza: así su alto no reparte espacio en las filas del índice, que no se mueven al cambiar de ensayo (si se movían, bajo un ratón quieto se elegía otro título) */ .vivo .ens-lista{display:grid;grid-template-columns:minmax(0,26rem) minmax(0,1fr);grid-template-rows:auto auto auto 1fr;column-gap:clamp(2rem,4vw,4rem);align-items:start} .vivo .ens{display:contents} .vivo .ens>.ens-tit{grid-column:1} .vivo .ens-ap{grid-column:2;grid-row:1/-1;align-self:start} } @media (max-width:820px){ #alnilam{height:auto;min-height:100svh} .ens-tit .t{font-size:1.15rem} .ens-tit .n{font-size:1.4rem} .ens>.ens-tit,.vivo .ens-tit button{grid-template-columns:2.4rem minmax(0,1fr)} .vivo .ens.on .ens-ap{margin:0 0 .75rem} /* en el teléfono la página se abre justo bajo su título: no lo repite */ .vivo .ens-pagina-tit{display:none} .ens-ap{padding:1.1rem 1rem} .ens-ap>p{font-size:var(--t-cuerpo)} } /* pantallas bajas: el párrafo que se desvanece, en dos líneas */ @media (min-width:821px) and (max-height:800px){.ens-ap>p.desvanece{max-height:3.24em}} @media (prefers-reduced-motion:reduce){.ens-ap .flecha,.ens-tit .t{transition:none}} /* ALNITAK · QUIÉN LO CONFIRMA (14 oct, FICHA-ALNITAK.md; DECISIONES 7.29). Bloque escrito de una vez, con todo lo decidido: · las voces son la confirmación del cinturón y la mitad izquierda es de la nave (el cuadro `321:2`; Fran: «tenemos la vista de la nave ahí»). El titular y la cuenta encabezan la columna derecha («se ve extraviado» a la izquierda). · cada voz pone primero lo que se puede comprobar —foto, nombre y su LinkedIn, cargo y empresa, relación y fecha— y debajo la cita entera, con su frase clave en tinta llena. · en escritorio, con voces.js, la parada es un escenario quieto (~2,7 pantallas): la voz de turno se abre sobre la lámina de Bellatrix y las otras dos esperan plegadas a su firma sobre una lámina tenue. En el último tramo el texto se va hacia arriba antes de que la nave arranque (--salida, que pone voces.js): la nave sale por un cielo vacío. · abajo, a todo el ancho, la franja de las ocho instituciones (Fran, su boceto: «para darle espacio a las recomendaciones y tener espacio para los logos»), recortadas sin margen y en el mismo blanco; bajo las cuatro que comparten el sello del Gobierno, su nombre en texto, porque en el logo va en letra que no se lee; y bajo las otras cuatro, qué son (Fran, 14 oct: «ogtic public services · lid laboratory of innovation · DGCine Dominican Film Commission · SDE City Hall»). · sin voces.js, o sin movimiento, las tres voces van abiertas y la parada crece con su texto. En el teléfono, las tres abiertas una debajo de otra y la franja al final. */ .solo-ancla{align-self:start} .respaldo{display:grid;gap:clamp(.9rem,2vh,1.3rem);max-width:39rem} #alnitak .solo-ancla,.voz,.respaldo .todas{text-shadow:0 1px 14px color-mix(in srgb,var(--bg) 70%,transparent),0 0 2px color-mix(in srgb,var(--bg) 55%,transparent)} /* — la lámina de Bellatrix (estilo.css, «la lámina de lectura»): vidrio oscuro en Ouranos, papel con filete en Atlas — */ .voz::before,.voz::after,.confiaron::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:0;transition:opacity .45s ease} .voz::before{background:color-mix(in srgb,var(--bg) 80%,transparent);border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} html[data-cielo="atlas"] .voz::before{background:color-mix(in srgb,var(--bg) 90%,transparent);border-color:color-mix(in srgb,var(--ink) 45%,transparent)} .voz::after{background:linear-gradient(var(--ink),var(--ink)) top left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/1.5px 10px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/1.5px 10px no-repeat} /* — la voz — */ .voces{display:grid;gap:clamp(.4rem,1vh,.7rem);margin:0} .voz{position:relative;isolation:isolate;margin:0;padding:clamp(.85rem,2vh,1.25rem) clamp(1rem,1.6vw,1.5rem)} .voz.on{text-shadow:none} .voz.on::before{opacity:1}.voz.on::after{opacity:.7} /* la firma: dos líneas; la relación arriba y la fecha debajo, a la derecha, partidas a mano (nunca «2026» sola) */ .firma{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;font-style:normal} /* Fran, 17 sep: «ponle un icono de persona que lo dijo y cada recomendación linkee a LinkedIn» */ .firma a{display:flex;align-items:center;gap:.8rem;color:var(--ink);text-decoration:none;min-width:0} .voces .persona{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;border:1px solid color-mix(in srgb,var(--ink) 30%,transparent)} html[data-cielo="atlas"] .voces .persona{filter:grayscale(1) contrast(1.1)} .voces .quien-es{display:grid;line-height:1.3} .voces .quien-es b{font-family:var(--display);font-weight:600;font-size:1rem;white-space:nowrap;transition:color .35s} .voces .quien-es .li{margin-left:.5rem;font-family:var(--body);font-size:var(--t-rotulo);font-weight:600;letter-spacing:.08em;color:var(--ink-2);border-bottom:1px solid color-mix(in srgb,var(--ink) 30%,transparent)} html[data-cielo="ouranos"] .voces .quien-es .li{color:var(--ink)} /* 24 oct: en el teléfono pasa sobre una roca clara; en la tinta plena lee (era 4,2:1) */ .firma a:hover .li,.firma a:focus-visible .li{color:var(--sel);border-bottom-color:var(--sel)} .voces .quien-es>span{font-size:var(--t-apoyo);color:var(--ink-2);white-space:nowrap} .voces .relacion{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.12em;line-height:1.5;text-transform:uppercase;text-align:right;color:var(--ink-2)} .voces .relacion>span{display:block;white-space:nowrap} .voz.on .quien-es b{color:var(--sel)} /* la cita: entera, grande; la comilla de apertura cuelga fuera del margen (el pliegue recorta: margen a la izquierda) */ .dicho{display:grid;grid-template-rows:1fr;transition:grid-template-rows .5s cubic-bezier(.2,.7,.2,1),opacity .4s ease} .dicho>div{overflow:hidden;min-height:0;margin-left:-1rem;padding-left:1rem} .dicho p{margin:clamp(.7rem,1.6vh,1rem) 0 0;text-indent:-.42em;font-family:var(--display);font-weight:400;letter-spacing:-.015em;font-size:clamp(1.0625rem,min(1.7vw,2.75vh),1.5rem);line-height:1.36;color:color-mix(in srgb,var(--ink) 84%,transparent)} html[data-cielo="atlas"] .dicho p{color:var(--ink)} /* 21 oct · en Atlas ningún texto se atenúa: la jerarquía es tamaño, peso y caja, no tinta más clara (Fran). */ .dicho p strong{font-weight:500;color:var(--ink)} .voces .nota{display:block;font-size:var(--t-apoyo);color:var(--ink-2);margin-top:.5rem} .respaldo .todas{justify-self:start;font-size:.875rem;font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1.5px solid var(--sel);padding-bottom:2px} /* — la cuenta, siempre debajo del titular — */ .voces-cuenta{display:flex;align-items:center;gap:.5rem;margin:.6rem 0 0;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)} .voces-cuenta i{display:inline-block;width:16px;height:3px;border-radius:2px;background:color-mix(in srgb,var(--ink) 25%,transparent);margin-right:4px;transition:background .35s} .voces-cuenta i.on{background:var(--sel)} /* — la franja de las instituciones: un filete arriba, sin esquinas; las ocho en el mismo blanco, de alto por su forma — */ #alnitak .confiaron{position:relative;isolation:isolate;display:flex;align-items:center;gap:clamp(1rem,2.4vw,2.5rem);padding:clamp(.6rem,1.4vh,.9rem) clamp(1rem,1.6vw,1.5rem)} #alnitak .confiaron::before{opacity:1;background:color-mix(in srgb,var(--bg) 62%,transparent);border-top:1px solid color-mix(in srgb,var(--ink) 26%,transparent)} html[data-cielo="atlas"] #alnitak .confiaron::before{background:color-mix(in srgb,var(--bg) 80%,transparent);border-top-color:color-mix(in srgb,var(--ink) 40%,transparent)} .confiaron .rotulo{margin:0;flex:none;max-width:7.5rem;font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;line-height:1.5;text-transform:uppercase;color:var(--ink-2)} /* CARRILES (Fran, 27 oct: «deberia estar cada uno en su propio carril … que no se deforme asi por alturas de logo y textos de lineas»). Ocho carriles iguales, separados por un filete; en cada uno, la caja del logo tiene el mismo alto para todos y el logo va centrado dentro, así que el rótulo empieza siempre a la misma altura, lleve una línea o dos. */ .marcas{--caja-logo:clamp(30px,4.4vh,40px);--filete:color-mix(in srgb,var(--ink) 16%,transparent);list-style:none;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));flex:1 1 auto;min-width:0;padding:0;margin:0} html[data-cielo="atlas"] .marcas{--filete:color-mix(in srgb,var(--ink) 28%,transparent)} .marcas li{display:grid;grid-template-rows:var(--caja-logo) auto;justify-items:center;align-content:start;row-gap:.5rem;min-width:0;padding:.1rem clamp(.5rem,.8vw,.75rem);border-left:1px solid var(--filete)} /* el alto de cada una por su forma, para que pesen parejo: las altas más altas, las anchas más bajas */ .marcas img{display:block;align-self:center;width:auto;max-width:100%;height:var(--h,28px);object-fit:contain} .m-bhd,.m-ludo,.m-phnx{--h:clamp(30px,4.4vh,40px)} .m-salvador{--h:clamp(27px,3.9vh,36px)} .m-gob,.m-sde{--h:clamp(22px,3.2vh,30px)} .m-hmc,.m-stemeria{--h:clamp(20px,2.8vh,26px)} .marcas li span{max-width:100%;font-size:var(--t-rotulo);line-height:1.25;color:var(--ink-2);text-align:center;text-wrap:balance;hyphens:auto} /* PNG blancos: en Atlas, tinta (Fran, 17 sep: «los logos deberían estar negros»). */ html[data-cielo="atlas"] .marcas img{filter:invert(1) contrast(1.4)} /* — el escenario (voces.js pone .vivo en el .paso) — */ .paso-voces.vivo{min-height:270svh} .vivo .voz:not(.on){padding-block:clamp(.4rem,1vh,.7rem);cursor:pointer;opacity:.85} html[data-cielo="atlas"] .vivo .voz:not(.on){opacity:1} /* 21 oct · en Atlas ningún texto se atenúa: la jerarquía es tamaño, peso y caja, no tinta más clara (Fran). */ .vivo .voz:not(.on)::before{opacity:.5} .vivo .voz:not(.on) .dicho{grid-template-rows:0fr;opacity:0} .vivo .voz:not(.on):hover{opacity:1} .vivo .voz:not(.on):hover .quien-es b{color:var(--sel)} /* la salida: en el último tramo el texto sube y se apaga antes de que la nave arranque */ .paso-voces.vivo #alnitak>*{opacity:calc(1 - var(--salida,0));transform:translateY(calc(var(--salida,0) * -6vh))} @media (min-width:821px){ /* titular · voces · franja; la columna derecha, anclada arriba (centrada saltaba al cambiar de turno) */ #alnitak{grid-template-rows:auto auto auto;row-gap:clamp(.75rem,2vh,1.25rem)} #alnitak .solo-ancla{grid-column:2;grid-row:1;max-width:39rem;width:100%} #alnitak .titular{margin:0;white-space:nowrap;font-size:clamp(1.9rem,min(3.61vw,5.6vh),52px);line-height:1.1} #alnitak .respaldo{grid-column:2;grid-row:2;align-self:start} #alnitak .confiaron{grid-column:1/-1;align-self:end} .paso-voces.vivo #alnitak{grid-template-rows:auto minmax(0,1fr) auto;padding-top:calc(var(--marco-alto,60px) + clamp(1rem,3vh,2.25rem));padding-bottom:clamp(.75rem,2vh,1.25rem)} } /* entre 821 y 1199 px la columna es estrecha: la relación baja bajo el cargo, en una línea */ @media (max-width:1199px){ .firma{flex-wrap:wrap} .voces .relacion{flex-basis:100%;margin-left:calc(48px + .8rem);text-align:left} .voces .relacion>span{display:inline} .voces .relacion>span+span::before{content:"· "} .voces .quien-es b,.voces .quien-es>span{white-space:normal} } @media (min-width:821px) and (max-width:1199px){ .confiaron .rotulo{max-width:5.5rem} /* la columna es estrecha: plegada, la voz se queda en nombre y cargo; la relación vuelve al abrirse */ .vivo .voz:not(.on) .relacion{display:none} #alnitak .confiaron{gap:1rem} } /* sin el escenario la parada crece con su texto: deja de ser una pantalla quieta */ .paso-voces:not(.vivo){min-height:0} .paso-voces:not(.vivo) #alnitak{position:relative;height:auto;min-height:100svh} @media (max-width:820px){ /* EL TITULAR SE QUEDA ARRIBA mientras se leen las voces (Fran, 14 oct: «yes» a que Betel repose en el punto del titular). Betel se ancla al punto del título que está en pantalla (viaje.js, «EL ANCLA»); en el teléfono el titular se iba al leer la segunda voz, Betel volvía a su sitio de vuelo y caía sobre la foto de la voz leída. Pegado arriba, el punto no sale de la banda y Betel se queda en él. Sin tocar el motor: es la UI la que no deja irse al título. */ #alnitak .solo-ancla{position:sticky;top:var(--marco-alto,4.3rem);z-index:2;padding:.2rem 0 .55rem} #alnitak .solo-ancla::before{content:"";position:absolute;inset:0 calc(-1 * var(--lado,20px));z-index:-1;pointer-events:none; background:color-mix(in srgb,var(--bg) 82%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)} #alnitak .titular{margin:0} #alnitak{height:auto;min-height:100svh} .respaldo{max-width:none} .voz{padding:1rem} .dicho p{font-size:1.125rem;line-height:1.42;text-indent:0} #alnitak .confiaron{flex-wrap:wrap;gap:.9rem;padding:1rem} .confiaron .rotulo{max-width:none;flex-basis:100%} .marcas{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1.1rem;flex:1 1 100%} /* en el teléfono, dos carriles: el filete separa las dos columnas y cada logo se alinea a la izquierda de su carril */ .marcas li{justify-items:start;padding:0 .75rem} .marcas li:nth-child(odd){border-left:0;padding-left:0} .marcas li span{text-align:left} } /* LA FLECHA. Una sola en toda la página, la de LinkedIn más grande y más gruesa (Fran, 22 oct: «una flecha mas grande y que tenga mas grosor»). El grosor lo da el trazo del propio glifo, en su color; el color y el movimiento siguen en cada sitio. */ .flecha{font-size:1.35em;line-height:0;vertical-align:-.04em;-webkit-text-stroke:.05em currentColor} /* LAS FLECHAS DE ENSAYOS Y RECOMENDACIONES. El acento se queda en la flecha; en Ouranos un rojo más claro, porque sobre el morado el de la casa no llega al 3:1 que pide un signo (5 oct, AUDITORIA-LEGIBILIDAD.md, escenario H). */ .todas .flecha{display:inline-block;color:var(--signal);transition:transform .3s} html[data-cielo="ouranos"] .todas .flecha{color:#ff7a6e} .todas:hover .flecha,.todas:focus-visible .flecha{transform:translateX(.25em)} @media (prefers-reduced-motion:reduce){.todas .flecha{transition:none}} /* Rigel: las condiciones se leen mientras se sube; el titular se apoya en el suelo y el correo es lo último */ /* RIGEL: el bloque sticky necesita un contenedor QUE ACABE donde empieza el pie. Sin él, el sticky seguía pegado a top:0 mientras el pie subía, y como nada lleva fondo los dos se dibujaban encima — el titular «A million ideas» cruzado con las columnas del pie, que es lo que se veía en u 0.885. `.tiempo` es ese contenedor y nada más. */ /* …y tiene que ser MÁS ALTO que el bloque, o el sticky no tiene dónde quedarse y se comporta como estático: eso volvía a meter el cintillo por debajo del marco fijo. Los demás mundos tienen ese margen gratis —la sección mide la entrada MÁS el bloque— pero aquí el bloque está envuelto, así que el margen se le da aquí: 75svh de agarre. */ .tiempo{position:relative;min-height:175svh} /* Rigel lleva MÁS que ningún otro mundo en una sola pantalla: seis preguntas, el titular y el camino al correo. Con el relleno de los demás (min(16vh,9rem) arriba y abajo) las preguntas se salían por arriba y el marco fijo les cortaba la primera línea. Aquí el relleno y el interlineado se aprietan para que quepa lo que el cuadro pone. */ .bloque.rigel{align-content:center;gap:clamp(1.2rem,3vh,2.4rem);padding-block:min(15vh,7.5rem) min(9vh,5rem)} /* RIGEL · EL CIERRE (7 oct, PLAN-REDISENO-UI.md ficha 4, DECISIONES 7.14). Vuelve al cuadro `103:2`: las seis preguntas en una sola cartela en la mitad izquierda —la tabla de la lámina—, con su propio titular; la figura de Orión libre a la derecha. Bajo «Have a project? Let's talk», el correo es el primario: la dirección misma es lo que se pulsa (a cero clics, R25), grande y a la izquierda (a la derecha la figura de Orión lo cruzaba al bajar). El juego es el secundario (Fran, 30 sep). El pie es el colofón del atlas: una sola cartela con sus tres columnas, en vez de tres cajas sueltas. */ .preguntas{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem 2.2rem;max-width:min(100%,48rem);padding:1.1rem 1.3rem 1.25rem} .preguntas dt{font-family:var(--display);font-weight:500;font-size:1rem;line-height:1.3;margin-bottom:.3rem;color:var(--ink)} .preguntas dd{margin:0;color:var(--ink-2);font-size:var(--t-apoyo);line-height:1.5;max-width:42ch} .cierre{display:grid;justify-items:start;gap:clamp(.8rem,2vh,1.4rem)} .preguntas-titulo{font-family:var(--display);font-weight:500;font-size:clamp(1.4rem,2.2vw,2rem);letter-spacing:-.02em;line-height:1.15;color:var(--ink);margin:0 0 .9rem} /* Fran, 7 oct: «write me no se lee […] ya que tiene un botón secundario, no hace sentido». El titular ya dice para qué es el correo; sin rótulo encima de los dos caminos: el correo, grande, es el primario; el juego, un botón con borde y más pequeño, el secundario. */ .camino{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.6rem;margin:0} .camino .correo{font-family:var(--display);font-size:clamp(1.3rem,2.3vw,2rem);font-weight:500;letter-spacing:-.02em;line-height:1.2; color:var(--ink);text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:.08em} .camino .correo .flecha{display:inline-block;color:var(--signal);transition:transform .3s} .camino .correo:hover .flecha,.camino .correo:focus-visible .flecha{transform:translateX(.2em)} html[data-cielo="ouranos"] .camino .correo{border-bottom-color:#ff7a6e} html[data-cielo="ouranos"] .camino .correo .flecha{color:#ff7a6e} /* el secundario lleva la ropa del juego al que lleva (Fran, 7 oct: «que sea un poco más temático al juego»): los botones del menú de Star Drill —sesgados, borde de neón con su brillo, fondo azul noche, versales anchas— (`site/stardrill`, START y OPTIONS). */ .camino .juego{display:inline-flex;align-items:center;gap:.5em;padding:.55rem 1.1rem .5rem;transform:skewX(-12deg); border:2px solid #ff3d9a;border-radius:6px;background:#120f2b;color:#fff;text-decoration:none; font-family:var(--body);font-weight:700;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase; box-shadow:0 0 10px rgba(255,61,154,.55),inset 0 0 8px rgba(255,61,154,.25);transition:box-shadow .3s,filter .3s} .camino .juego .flecha{display:inline-block;color:#ff7ac0;transition:transform .3s} .camino .juego:hover,.camino .juego:focus-visible{filter:brightness(1.15);box-shadow:0 0 16px rgba(255,61,154,.8),inset 0 0 10px rgba(255,61,154,.35)} .camino .juego:focus-visible{outline:2px solid var(--ink);outline-offset:6px} .camino .juego:hover .flecha,.camino .juego:focus-visible .flecha{transform:translateX(.2em)} @media (prefers-reduced-motion:reduce){.camino .flecha{transition:none}} /* ══ RIGEL · LA LÁMINA Y SU LEYENDA (19 oct, DECISIONES 7.35 y 7.36) ══════════════════════════════════════════════════════ Fran: «vamos con la A solo ten en cuenta lo que te dije del espacio» — «en desktop separaría un poco más Orión del texto de contacto». Dos tiempos: (1) las preguntas, arriba a la izquierda, mientras la figura se forma; (2) Orión solo en el centro —el giro del cielo lo lleva ahí y lo sube (motor/viaje.js, CUERPO_ORION)—, la invitación debajo con aire, y la leyenda de la lámina al pie: la cartela (título, fecit, última observación, idioma) y su catálogo. Cuadros: Figma, página «10 · Rigel», `622:61` / `622:119` (escritorio) y `622:178`, `622:191`, `622:205`, `622:254` (teléfono). */ /* 19 OCT (DECISIONES 7.38): las preguntas ocupan todo el ancho —ya no le guardan la derecha a Orión—, tres por fila; Orión queda quieto en el centro y se enciende DESPUÉS; el cierre no es una pantalla fija sino secciones que se siguen: un respiro de scroll sólo para la figura (y Betel volviendo a su estrella) y, en flujo normal, la invitación y la leyenda, que acaban a sus pies. */ #rigel .preguntas{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:1.5rem 2.8rem;padding:1.5rem 1.8rem 1.6rem} /* LAS PREGUNTAS, MÁS FUERTES (24 oct, Fran: «A», maqueta 4): las seis siguen abiertas, pero la pregunta manda —más grande y en negrita— y la respuesta va un punto más grande. El título, del tamaño de los otros titulares de la parada. */ #rigel .preguntas dt{font-size:1.15rem;font-weight:600;line-height:1.25;margin-bottom:.4rem} #rigel .preguntas dd{font-size:15px} #rigel .preguntas-titulo{font-size:clamp(2rem,3vw,2.8rem)} /* EL PIE, AL PIE DE ORIÓN. Un bloque fijo con la invitación y la leyenda ABAJO: su parte vacía de arriba es el respiro de la figura (las preguntas se van y sólo queda Orión, con Betel volviendo a su estrella); al llegar, la leyenda reposa a sus pies durante 0,6 pantallas, y cuando empieza la cola —el agujero— se desvanece (`--cola`, motor/viaje.js) en vez de subir por encima de la figura. */ .tiempo.rigel-final{min-height:205svh;padding-top:45svh} /* + medio respiro antes de que suba el pie: la figura termina de encenderse sola */ /* el bloque (una pantalla) y 0,6 de reposo: el sticky sólo viaja dentro del contenido, no del relleno */ .bloque.rigel-cierre{align-content:end;gap:clamp(1rem,2.2vh,1.6rem);padding-block:0 1.1rem} html.motor .mundo > .tiempo > .bloque.rigel-cierre{opacity:calc(var(--ui,1) * (1 - var(--cola,0)))} /* la regla general de la UI (--ui) y la salida del pie, juntas */ #rigel .rigel-cierre .cierre{justify-items:center;text-align:center;gap:clamp(.7rem,1.6vh,1rem)} #rigel .rigel-cierre .titular{font-size:clamp(1.8rem,2.8vw,44px);line-height:1.15} #rigel .rigel-cierre .titular b{display:inline} /* una sola línea: la invitación no le quita alto a la figura; el hueco es el espacio del HTML (24 oct) */ #rigel .rigel-cierre .camino{justify-content:center} .copiar{font:600 var(--t-rotulo)/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);background:none;cursor:pointer; border:1px solid color-mix(in srgb,var(--ink) 30%,transparent);border-radius:999px;padding:.55rem .85rem} .copiar:hover,.copiar:focus-visible{color:var(--ink);border-color:color-mix(in srgb,var(--ink) 60%,transparent)} #rigel .leyenda{display:grid;grid-template-columns:1fr 2.1fr 1.45fr .95fr;gap:1rem clamp(1.5rem,3vw,2.8rem);padding-top:1.1rem; border-top:1px solid color-mix(in srgb,var(--ink) 30%,transparent);font-size:var(--t-apoyo);line-height:1.45;color:var(--ink-2)} /* en Atlas, el filete doble de la lámina */ html[data-cielo="atlas"] #rigel .leyenda{border-top:3px double var(--ink)} #rigel .leyenda h2{font:600 var(--t-rotulo)/1 var(--body);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin:0 0 .65rem} #rigel .leyenda p{margin:0 0 .25rem} #rigel .leyenda ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem} /* los enlaces se ven como enlaces, sin esperar al cursor (crítica del pie, 19 oct: en el teléfono no hay hover) */ #rigel .leyenda a{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em; text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent)} #rigel .leyenda a:hover,#rigel .leyenda a:focus-visible{text-decoration-color:currentColor} #rigel .leyenda .fecit{font-family:var(--display);font-weight:500;font-size:1.05rem;line-height:1.25;color:var(--ink);margin-bottom:.45rem} #rigel .leyenda .fecit em{font-weight:400;color:var(--ink-2)} #rigel .leyenda .lenguas a[aria-current]{text-decoration:none;font-weight:600} #rigel .leyenda .obras{grid-auto-flow:column;grid-template-rows:repeat(4,auto);column-gap:1.6rem;justify-content:start} #rigel .leyenda .obras span{color:var(--ink-3);font-size:.75rem;margin-left:.3em} #rigel .leyenda .obras li{white-space:nowrap} /* una obra, una línea: si envuelve, la cuarta fila cae en la banda del pie */ #rigel .leyenda .vuelta{margin-top:.55rem} /* el enlace de vuelta es un .guia (salta dentro del viaje), pero aquí se lee como los demás enlaces de la leyenda */ #rigel .leyenda .vuelta .guia{display:inline;margin:0;font-size:inherit;letter-spacing:0;text-transform:none;font-weight:500;color:var(--ink)} #rigel .leyenda .vuelta a{text-decoration-color:var(--signal)} #rigel .leyenda .vuelta span{color:var(--signal)} #rigel .leyenda .vuelta .punto{margin-left:.9em} /* donde se posa Betel en el pie (22 oct): su halo es más grande que esta letra, así que se aparta de la palabra */ html[data-cielo="ouranos"] #rigel .leyenda .vuelta a{text-decoration-color:#ff7a6e} html[data-cielo="ouranos"] #rigel .leyenda .vuelta span{color:#ff7a6e} /* EL TELÉFONO: el segundo tiempo no se pega. La figura tiene su pantalla (el aire de arriba), la invitación al pie de esa pantalla, y la leyenda sube después, en filas de 44 px (crítica del pie: 15 px de alto por enlace). */ @media (max-width:820px){ #rigel .preguntas{grid-template-columns:minmax(0,1fr)} .tiempo.rigel-final{min-height:0} html.motor .bloque.rigel-cierre,.bloque.rigel-cierre{position:relative;height:auto;padding-top:60svh;padding-bottom:50svh;gap:3.2rem;opacity:1} /* 22 oct (Fran: «add space after the footer on phone so it is read at full strength before it fades»): el pie se apaga cuando el final del tiempo de Rigel entra por abajo (viaje.js, --cola). Con 3rem ese final venía pegado a la última línea y el pie se leía apagándose; con 50svh de aire la última línea sube por encima de la mitad de la pantalla a plena tinta antes de que empiece el fundido. */ #rigel .leyenda{grid-template-columns:minmax(0,1fr);gap:1.8rem;font-size:1rem} #rigel .leyenda ul{gap:0} #rigel .leyenda li{min-height:44px;display:flex;flex-direction:column;justify-content:center} #rigel .leyenda .obras{grid-auto-flow:row;grid-template-rows:none} #rigel .leyenda .obras li{white-space:normal} #rigel .leyenda .obras span{margin:0;font-size:.8rem} #rigel .leyenda .fecit{font-size:1.25rem} } html[data-cielo="atlas"] .preguntas{background:color-mix(in srgb,var(--bg) 92%,transparent); border:1px solid color-mix(in srgb,var(--ink) 55%,transparent); box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--bg) 94%,transparent),inset 0 0 0 3.5px color-mix(in srgb,var(--ink) 30%,transparent)} html[data-cielo="ouranos"] .preguntas{background:color-mix(in srgb,var(--bg) 84%,transparent); border-top:.75px solid color-mix(in srgb,var(--ink-3) 70%,transparent)} @media (max-width:820px){ .preguntas{grid-template-columns:minmax(0,1fr)} .camino .correo{font-size:1.25rem} } /* el pie: dentro de Rigel. Es el enlazado interno de las ocho hijas, no un footer de sitio. */ .pie{padding:4rem 0 6rem;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;font-size:var(--t-apoyo);color:var(--ink-2)} /* EL PIE Y EL CONTACTO, UN PASO MÁS DE TINTA (5 oct, AUDITORIA-LEGIBILIDAD.md, escenario I). En Ouranos el campo de Rigel es morado medio, no negro, y el gris más claro daba 2,4–4,7:1 todo el rato; los rótulos del pie, además, a 10,6 px. */ .pie h2{font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;font-family:var(--body);font-weight:600;margin-bottom:.7rem} .pie ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem} .pie a{text-decoration:none;color:var(--ink-2)} .pie a:hover{text-decoration:underline;text-underline-offset:.2em} /* ---------- el recuadro de la lámina (Atlas): la pantalla como mapa ---------- */ /* EL RECUADRO DE ATLAS. Fran, 15 sep: *«en atlas original, la pantalla tenia un recuadro, cual era la idea? que se viera mas como un mapa»*, y el 16 sep: *«no veo el recuadro de atlas, como te habia dicho, queria que estuviera como el demo de la ruta que habiamos dicho»*. Aquí estaba con `border: 0` —o sea, sin recuadro— y sólo dos rayas. Se copia el del demo, `lab/ruta/index.html:31-33`, que es lo que él pidió: marco entero de 1,5 px a 16 px del borde, y sobre el canto de arriba y el de abajo una REGLA —trazos de 1 px cada 12— que es lo que hace que se lea como una lámina de mapa y no como un borde de CSS. Sólo existe en Atlas: el motor le pasa la mezcla a `opacity`. */ /* 21 oct: el marco en gris de regla, no en tinta (22 oct: gris 147, el mismo de la pluma del dibujo, TINTA_DIBUJO en nucleo.js): es margen de la carta, no contenido. Lo oscuro queda para el texto y las estrellas (Fran: «se podría considerar también el marco de atlas»). */ .lamina{position:fixed;inset:16px;z-index:2;pointer-events:none;border:1px solid #8f939b;opacity:0;transition:opacity .3s} /* LA ESCENA MUERE ANTES DEL FILO, EN LOS CUATRO LADOS (24 sep). Fran: «en atlas se esta cortando en el borde de la izquierda». Medido: en x=110 no hay escalon de tono --fuera 239/181/149, dentro 238/201/153-- lo unico que hay es la LINEA del recuadro cruzando el planeta. Un cuerpo solido partido por una raya se lee como un corte, y pasa igual en los cuatro lados; abajo ya se habia arreglado a mano con otra capa. Se resuelve en el propio recuadro y sin anadir elementos: una sombra hacia FUERA que cubre el margen de papel, y otra hacia DENTRO que disuelve la escena al acercarse al filo. Asi nada llega vivo a la raya por ninguno de los cuatro lados. Va con la opacidad de la lamina, o sea que solo existe en Atlas. */ .lamina{box-shadow:0 0 50px 130px var(--bg)} /* …PERO LA NIEBLA DE DENTRO VA DEBAJO DEL TEXTO (Fran, 4 oct: «hay como un filtro en los laterales que se están sobreponiendo en la UI y haciendo las cosas más difíciles de leer»). Era la sombra INTERIOR de la lámina, y la lámina va encima del contenido (z 5 con motor): a 20 px del borde, en móvil, lavaba el titular. La línea y la regla siguen encima; la niebla pasa a su propia capa entre el cielo (z 0, antes en el documento) y el viaje (z 1). El motor le da la misma mezcla que a la lámina (--lamina), así que sólo existe en Atlas. */ body::after{content:"";position:fixed;inset:16px;z-index:0;pointer-events:none;box-shadow:inset 0 0 70px 26px var(--bg);opacity:var(--lamina,0)} html.motor body::after{inset:16px 16px var(--banda)} .lamina::before,.lamina::after{content:"";position:absolute;left:0;right:0;height:7px; background:repeating-linear-gradient(90deg,#8f939b 0 1px,transparent 1px 12px)} .lamina::before{top:0}.lamina::after{bottom:0} /* ---------- EL CARGADOR: BETEL VIAJANDO EN BUCLE ---------- [F] 16 sep: «Tienes que hacer un loader nuevo basado en betel como haciendo loop viajando». Los dos colores NO se eligen aquí: son los de Betel en cada cielo, copiados de `motor/nucleo.js:16-17` (`CIELOS..betel` = [blanco, medio, fuera]) — Ouranos #ff6a4d → #c0281a, Atlas #8fb6ff → #1e63e6. Así el cargador y la estrella que aparece detrás son el mismo cuerpo, no dos dibujos que se parecen. El recorrido va de abajo-izquierda a arriba-derecha, que es como el propio cuadro `214:2` dibuja a Betel en vuelo (su rastro va de (120,640) a (1014,458)). Y es CSS puro: pinta antes de que el navegador acabe de leer el módulo del motor, que es exactamente cuando hace falta un cargador. */ :root{--betel-medio:#8fb6ff;--betel-fuera:#1e63e6} html[data-cielo="ouranos"]{--betel-medio:#ff6a4d;--betel-fuera:#c0281a} .velo{display:none} html.motor .velo{position:fixed;inset:0;z-index:20;background:var(--bg);transition:opacity 1s ease; display:grid;place-items:center;overflow:hidden} html.motor:not(.suelto) body{overflow:hidden} /* no se viaja hasta que Betel ha llegado */ .velo.se-va{opacity:0;pointer-events:none} /* EL CARGADOR (motor/cargador.js, 13 oct) ES DUEÑO DEL VELO HASTA QUE BETEL SE POSA, y el velo sigue recogiendo los clics hasta entonces: un salto a mitad del aterrizaje dejaba al doble posándose en un sitio que ya no estaba en pantalla. Al posarse, la página se abre desde su punto con EL FRENTE (motor/nucleo.js, Frente; 26 oct): el motor pone el fondo del velo transparente en el mismo cuadro en que el pase empieza a tapar. (Hasta el 26 oct el fondo se abría parejo al estar listo el motor, con `se-abre`, y el cielo aparecía alrededor de Betel mientras orbitaba; Fran: «a menos de que betel llegue y como que abra la página».) */ /* al posarse, el punto del cargador mide lo que la Betel del motor posada (la mide la prueba de relevo, ver LOADER-REFERENCIAS) */ .velo .betel-carga{--escala-posada:1} /* LA ÓRBITA A TINTA (motor/trayecto.js): en Atlas, mientras Betel espera su destino, la órbita se dibuja como en las láminas —una elipse fina y punteada alrededor del punto del título— y se cierra con ella. En Ouranos no se dibuja: allí la órbita es la luz (`.estela`, más abajo; 27 oct). */ .orbita{position:fixed;left:0;top:0;width:1px;height:1px;overflow:visible;pointer-events:none;z-index:6;opacity:0;transition:opacity .4s ease} .velo .orbita{position:absolute;z-index:0} .orbita ellipse{fill:none;stroke:color-mix(in srgb,var(--ink) 62%,transparent);stroke-width:1.2;stroke-dasharray:3 4} html[data-cielo="atlas"] .orbita.viva{opacity:1} /* EN ATLAS LA ESTELA ES TINTA: la anotación azul deja una línea de pluma sobre el papel, no un rastro de luz. Sólo en el velo. */ html[data-cielo="atlas"] .velo .betel-carga::before{height:1.5px; background:linear-gradient(270deg,color-mix(in srgb,var(--ink) 70%,transparent) 0%,color-mix(in srgb,var(--ink) 22%,transparent) 45%,transparent 100%)} .betel-carga{position:absolute;width:clamp(9px,.95vw,14px);aspect-ratio:1;border-radius:50%; background:radial-gradient(circle,#fff 0%,var(--betel-medio) 38%,var(--betel-fuera) 66%,transparent 100%); filter:drop-shadow(0 0 .5rem var(--betel-fuera)) drop-shadow(0 0 1.6rem var(--betel-fuera)); animation:betel-viaja 3.1s cubic-bezier(.42,0,.58,1) infinite} /* la cola: no es un adorno, es lo que hace que se lea como VIAJE y no como un punto que parpadea */ .betel-carga::before{content:"";position:absolute;right:50%;top:50%;width:13rem;height:2px; transform:translateY(-50%) rotate(-28deg);transform-origin:right center;border-radius:2px; background:linear-gradient(270deg,var(--betel-fuera) 0%,color-mix(in srgb,var(--betel-fuera) 28%,transparent) 42%,transparent 100%)} @keyframes betel-viaja{ 0% {transform:translate(-46vw,24vh) scale(.45);opacity:0} 14% {opacity:1} 86% {opacity:1} 100% {transform:translate(46vw,-24vh) scale(1.1);opacity:0} } /* LA ÓRBITA DE INICIO, EN CSS DESDE EL PRIMER PINTADO (27 oct, DECISIONES 7.65). Fran: *«veo que la posicion inicial de betel esta fuera de pantalla, creo que su posicion inicial deberia ser en el loop para que aparezca automaticamente el loop y no ese brinco desde afuera»*. En la ruta de inicio (`html.motor.entrada-hero`) Betel ya no cruza la pantalla desde fuera: gira desde el primer cuadro en la órbita del cargador (motor/trayecto.js, ORBITA: radio 8,5 vmin con mínimo de 34 px, achatado 0,42, giro de -28°, 2,6 s por vuelta, en sentido horario), alrededor del punto donde suele caer el título; cuando llega el JavaScript la toma donde esté y la ajusta (cargador.js, `entrarEnOrbita`). El punto del título cae en x casi fijo —7,7 vw del centro en escritorio y tableta; 309 px desde la izquierda en teléfonos— y en y según la pantalla (medido en trece tamaños); la aproximación acierta de largo y la corrige el JavaScript. Las rutas a una sección conservan el bucle de siempre. 24 tramos de elipse: el error de la cuerda es del 0,9 % del radio (0,7 px). */ html.motor.entrada-hero{--bx:7.7vw;--by:5vh;--R:max(34px,8.5vmin)} @media (min-width:768px) and (max-width:1024px) and (orientation:portrait){html.motor.entrada-hero{--by:-32vh}} @media (max-width:480px){html.motor.entrada-hero{--bx:calc(309px - 50vw);--by:calc(170px - 50vh)}} html.motor.entrada-hero .betel-carga{animation:betel-orbita 2.6s linear infinite,betel-entra .4s ease-out} html.motor.entrada-hero .betel-carga::before{transform:translateY(-50%) scaleX(.17)} /* la cola de la órbita: la que le pondrá el cargador, a la rapidez de la órbita */ @keyframes betel-entra{from{opacity:0}to{opacity:1}} @keyframes betel-orbita{ 0% {transform:translate(calc(var(--bx) + var(--R) * 0.88295),calc(var(--by) + var(--R) * -0.46947)) rotate(62.00deg)} 4.167% {transform:translate(calc(var(--bx) + var(--R) * 0.90390),calc(var(--by) + var(--R) * -0.35749)) rotate(94.54deg)} 8.333% {transform:translate(calc(var(--bx) + var(--R) * 0.86324),calc(var(--by) + var(--R) * -0.22116)) rotate(115.97deg)} 12.5% {transform:translate(calc(var(--bx) + var(--R) * 0.76376),calc(var(--by) + var(--R) * -0.06974)) rotate(129.22deg)} 16.667% {transform:translate(calc(var(--bx) + var(--R) * 0.61224),calc(var(--by) + var(--R) * 0.08642)) rotate(138.37deg)} 20.833% {transform:translate(calc(var(--bx) + var(--R) * 0.41898),calc(var(--by) + var(--R) * 0.23669)) rotate(145.58deg)} 25% {transform:translate(calc(var(--bx) + var(--R) * 0.19718),calc(var(--by) + var(--R) * 0.37084)) rotate(152.00deg)} 29.167% {transform:translate(calc(var(--bx) + var(--R) * -0.03806),calc(var(--by) + var(--R) * 0.47971)) rotate(158.42deg)} 33.333% {transform:translate(calc(var(--bx) + var(--R) * -0.27071),calc(var(--by) + var(--R) * 0.55589)) rotate(165.63deg)} 37.5% {transform:translate(calc(var(--bx) + var(--R) * -0.48491),calc(var(--by) + var(--R) * 0.59419)) rotate(174.78deg)} 41.667% {transform:translate(calc(var(--bx) + var(--R) * -0.66607),calc(var(--by) + var(--R) * 0.59199)) rotate(188.03deg)} 45.833% {transform:translate(calc(var(--bx) + var(--R) * -0.80183),calc(var(--by) + var(--R) * 0.54945)) rotate(209.46deg)} 50% {transform:translate(calc(var(--bx) + var(--R) * -0.88295),calc(var(--by) + var(--R) * 0.46947)) rotate(242.00deg)} 54.167% {transform:translate(calc(var(--bx) + var(--R) * -0.90390),calc(var(--by) + var(--R) * 0.35749)) rotate(274.54deg)} 58.333% {transform:translate(calc(var(--bx) + var(--R) * -0.86324),calc(var(--by) + var(--R) * 0.22116)) rotate(295.97deg)} 62.5% {transform:translate(calc(var(--bx) + var(--R) * -0.76376),calc(var(--by) + var(--R) * 0.06974)) rotate(309.22deg)} 66.667% {transform:translate(calc(var(--bx) + var(--R) * -0.61224),calc(var(--by) + var(--R) * -0.08642)) rotate(318.37deg)} 70.833% {transform:translate(calc(var(--bx) + var(--R) * -0.41898),calc(var(--by) + var(--R) * -0.23669)) rotate(325.58deg)} 75% {transform:translate(calc(var(--bx) + var(--R) * -0.19718),calc(var(--by) + var(--R) * -0.37084)) rotate(332.00deg)} 79.167% {transform:translate(calc(var(--bx) + var(--R) * 0.03806),calc(var(--by) + var(--R) * -0.47971)) rotate(338.42deg)} 83.333% {transform:translate(calc(var(--bx) + var(--R) * 0.27071),calc(var(--by) + var(--R) * -0.55589)) rotate(345.63deg)} 87.5% {transform:translate(calc(var(--bx) + var(--R) * 0.48491),calc(var(--by) + var(--R) * -0.59419)) rotate(354.78deg)} 91.667% {transform:translate(calc(var(--bx) + var(--R) * 0.66607),calc(var(--by) + var(--R) * -0.59199)) rotate(368.03deg)} 95.833% {transform:translate(calc(var(--bx) + var(--R) * 0.80183),calc(var(--by) + var(--R) * -0.54945)) rotate(389.46deg)} 100% {transform:translate(calc(var(--bx) + var(--R) * 0.88295),calc(var(--by) + var(--R) * -0.46947)) rotate(422.00deg)} } /* LA ESTELA DE LUZ (Ouranos; motor/trayecto.js, crearEstelaLuz): tres círculos —la elipse entera apenas insinuada, el resplandor y el hilo— sobre LA MISMA elipse que la tinta de Atlas. Los dos que brillan llevan un degradado cónico —la luz está en Betel y se apaga unos 240° hacia atrás— y una máscara que los deja en anillo; el cargador los gira con ella. Los colores son los del cargador de Ouranos (--betel-medio y --betel-fuera: rojos). Detrás del punto (z -1 dentro del velo). */ .estela{position:fixed;left:0;top:0;width:0;height:0;pointer-events:none;z-index:6;opacity:0;transition:opacity .4s ease} .velo .estela{position:absolute;z-index:-1} html[data-cielo="ouranos"] .estela.viva{opacity:1} .estela i{position:absolute;left:calc(var(--R) * -1);top:calc(var(--R) * -1);width:calc(var(--R) * 2);height:calc(var(--R) * 2);border-radius:50%;will-change:transform} .estela .base{background:color-mix(in srgb,var(--betel-medio) 13%,transparent); -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - max(1.6px,calc(var(--R) * .03))),#000 calc(100% - max(.9px,calc(var(--R) * .016))),#000 calc(100% - .1px),transparent 100%); mask-image:radial-gradient(circle closest-side,transparent calc(100% - max(1.6px,calc(var(--R) * .03))),#000 calc(100% - max(.9px,calc(var(--R) * .016))),#000 calc(100% - .1px),transparent 100%)} .estela .halo,.estela .nucleo{background:conic-gradient(from 90deg,transparent 0deg,transparent 110deg, color-mix(in srgb,var(--betel-fuera) 16%,transparent) 170deg,color-mix(in srgb,var(--betel-medio) 55%,transparent) 255deg, color-mix(in srgb,var(--betel-medio) 92%,transparent) 330deg,color-mix(in srgb,#fff 45%,var(--betel-medio)) 358deg,transparent 360deg)} .estela .halo{opacity:.9;filter:blur(5px); -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - max(6px,calc(var(--R) * .19))),#000 calc(100% - max(3.4px,calc(var(--R) * .1))),#000 calc(100% - .2px),transparent 100%); mask-image:radial-gradient(circle closest-side,transparent calc(100% - max(6px,calc(var(--R) * .19))),#000 calc(100% - max(3.4px,calc(var(--R) * .1))),#000 calc(100% - .2px),transparent 100%)} .estela .nucleo{filter:blur(.5px); -webkit-mask-image:radial-gradient(circle closest-side,transparent calc(100% - max(1.8px,calc(var(--R) * .045))),#000 calc(100% - max(1px,calc(var(--R) * .025))),#000 calc(100% - .1px),transparent 100%); mask-image:radial-gradient(circle closest-side,transparent calc(100% - max(1.8px,calc(var(--R) * .045))),#000 calc(100% - max(1px,calc(var(--R) * .025))),#000 calc(100% - .1px),transparent 100%)} /* si alguien pide menos movimiento y aun así hay motor, Betel se queda quieta y sólo respira */ @media (prefers-reduced-motion:reduce){ .betel-carga{animation:betel-respira 2.4s ease-in-out infinite} .betel-carga::before{display:none} @keyframes betel-respira{0%,100%{opacity:.45}50%{opacity:1}} } /* ---------- LA GARGANTA: el final del viaje y la carga de la vuelta son la MISMA pantalla ---------- El cuadro `119:3` acaba con la boca del agujero llenando el encuadre, y el reloj corta justo ahí (`motor/reloj.js:42`). Al otro lado del corte Betelgeuse está descargada y hay que montarla otra vez: si la pantalla se abriera en ese instante se vería el cielo vacío, que es el pop que Fran prohibió. Esto es lo que sigue tapando mientras carga — y por eso lleva dentro al mismo Betel del cargador, con la misma animación. El color no se elige: es el del horizonte en cada cielo — negro en Ouranos, papel en Atlas. Va por DEBAJO del marco (z 9): el cuadro del ∞ sigue dibujando el wordmark, el idioma y el correo. */ /* EL ∞ SE LLEVA UNA LEYENDA Y DEJA LA OTRA, donde el cuadro la pone: abajo a la izquierda. Medido en el navegador: el sello de entrada de Rigel se queda pegado al FONDO DEL CONTENIDO de su sección (el sticky no puede bajar más allá de ahí) y el de la vuelta nace justo en ese mismo punto, así que los dos acaban a 71 px del borde superior, uno encima del otro. En el cuadro `119:3` sólo hay una leyenda y está a y 820 de 900. */ html[data-regreso] .sello.entrada{opacity:0;transition:opacity .5s ease} /* Y EL DE LA VUELTA NO EXISTE HASTA QUE HAY VUELTA — la otra mitad del relevo, que faltaba. El arreglo anterior sólo puso a callar al de ENTRADA cuando `--ui` sube, y con eso la parada de Rigel quedó limpia; pero en la ENTRADA de Rigel `--ui` todavía vale 0, así que el de entrada sigue puesto (correcto: es la marginalia del tránsito) y el de la vuelta TAMBIÉN, porque no tenía ninguna regla. Medido en u 0.790: los dos a opacidad 1 en el mismo (72, 846), superpuestos y hechos un borrón — se ve en la captura que mandó Fran. El de la vuelta es del ∞, y el ∞ tiene su propio marcador: `html[data-regreso]`, que escribe `motor/regreso.js`. Sin motor no hay marcador y la variable no existe, así que se queda visible: la página sin JS se lee entera. */ html.motor .mundo > .sello.vuelta{opacity:0;transition:opacity .5s ease} /* con `html.motor` delante, y no por gusto: la regla de arriba lleva cuatro clases y ésta llevaba dos más un atributo, así que perdía por especificidad y el sello de la vuelta se quedaba en 0 incluso durante la vuelta. Medido: en u 0.940, con `data-regreso` ya puesto, los dos sellos marcaban opacidad 0.00. */ /* el sello de la vuelta tenia su propia regla y por eso se quedo pegado al vidrio cuando el resto se centro: mismo margen que los demas, medido desde el area segura, y dentro del margen de la lamina como ellos. */ html.motor[data-regreso] .mundo > .sello.vuelta{opacity:1;position:fixed;left:var(--lado);right:auto;top:auto;bottom:calc((var(--banda) - 1.1rem) / 2);margin:0;z-index:4} :root{--garganta:var(--bg)} html[data-cielo="ouranos"]{--garganta:#000} .garganta{display:none} html.motor .garganta{position:fixed;inset:0;z-index:5;display:grid;place-items:center;overflow:hidden; background:var(--garganta);opacity:0;visibility:hidden;pointer-events:none} /* (13 oct) sin punto propio: la espera de la garganta la cuenta la Betel de verdad, orbitando el título de destino encima */ #hud{position:fixed;right:1rem;bottom:1rem;z-index:30;font:11px/1.5 ui-monospace,monospace;color:#a9fdff;background:rgba(0,0,0,.45);padding:.3rem .5rem;max-width:92vw;white-space:pre-wrap} /* ---------- móvil: una columna, y el lugar sigue siendo el lugar ---------- */ @media (max-width:820px){ .marco{font-size:var(--t-rotulo);padding:1rem var(--lado)} .marco .der{gap:.9rem} .marco .correo{display:none} /* el correo vuelve abajo, en Rigel y en el pie */ .switch{padding:.4rem .55rem} /* en móvil el switch se queda, sólo con el icono: sol o luna */ .switch span{display:none} /* el juego, con nombre también en el teléfono (Fran, 15 oct: «así no sé si se entienda»): el nombre corto. Le hace sitio la barra de volumen, que en el teléfono sobra (el teléfono tiene sus botones de volumen); el silencio se queda. */ .panel-mandos .panel-juego .larga{display:none} .panel-mandos .panel-juego .corta{display:inline} .panel-mandos .volumen{display:none} /* la fila de mandos suma 270 px de piezas: con 20 px entre ellas no cabía en 375 (y ya no cabía en 320 antes del juego) */ .panel-mandos{gap:.625rem} .bloque.ancho,.parada{grid-template-columns:minmax(0,1fr)} /* EN MOVIL EL CONTENIDO MANDA EL ALTO. Fran, 22 sep, con una captura del telefono: *«hay elementos que se estan sobreponiendo uno encima de otro»*. Medido a 390 px en todo el recorrido: 239 solapes de texto sobre texto. La causa de los de dentro de una seccion: en escritorio un bloque cabe en un encuadre y se PEGA arriba, pero en una columna estrecha el mismo texto mide mas de una pantalla y se sale de su caja de 100svh, encima del bloque siguiente. Ya estaba visto para la biografia (#mintaka) y se aplica a todos: en movil el bloque no se pega, crece. El viaje se alarga un poco, que es lo correcto — hay mas que leer por pantalla. */ .bloque,.parada{position:relative;height:auto;min-height:100svh} /* EL SELLO TAMPOCO SE PEGA. Misma regla que los bloques, por la misma razon: sin banda vacia, una cartela fija se posa encima de lo que haya detras. Medido: 114 de los 149 solapes a 390 px eran esto, y ninguno queda. Fluye al final de su mundo, que es donde se lee una marginalia en una columna estrecha. */ html.motor .mundo .sello{position:static;opacity:1;margin:2.6rem 0 0;max-width:46ch;font-size:var(--t-rotulo);letter-spacing:.13em} html.motor .mundo .sello.entrada,html.motor .mundo .sello.vuelta{display:none} /* EL MARGEN DE ARRIBA, OPACO — la pareja de #viaje::after. Ahora se puede, y antes no: hasta que la obertura no midio el marco (motor/viaje.js), el viaje REPOSABA con el hero debajo de el, y una mascara ahi tapaba el titular del sitio en vez de descubrirlo. Con el aterrizaje corregido, lo unico que pasa por este margen es contenido EN TRANSITO, y eso es justo lo que tiene que dejar de verse: medido a 390 px, el marco no tiene fondo y el texto se leia por detras de los botones. Los dos numeros van juntos: 28 px de degradado aqui y RESPIRO 44 alli, para que el hero quede por debajo del final del fundido y nunca lo roce. */ :root{--marco-alto:4.3rem} html.motor #viaje::before{content:"";position:fixed;left:0;right:0;top:0;height:calc(var(--marco-alto) + 28px);z-index:3;pointer-events:none; background:linear-gradient(to bottom, var(--bg) var(--marco-alto), transparent calc(var(--marco-alto) + 28px))} .paso{min-height:0} /* EL HERO, ARRIBA DE SU CAJA (Fran, 4 oct: *«cuando llegas el contenido se posiciona arriba, lo cual está bien, pero puedes hacer scroll de más para arriba de forma innecesaria y después el contenido se pone abajo»*). En móvil el bloque no se pega y alinea su texto ABAJO de una caja de 100svh; la obertura bajaba 367 px para subirlo, y esos 367 px quedaban encima. Arriba de su caja, con el aire del marco, la obertura aterriza en el principio y no queda nada por encima. */ #betelgeuse-texto{align-content:start;padding-top:calc(var(--marco-alto) + 44px)} .bloque.ancho{gap:2rem} .pie{grid-template-columns:minmax(0,1fr)} .sello{max-width:34ch;font-size:var(--t-rotulo)} } /* ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ LOS APOYOS DE LEGIBILIDAD (6 oct) — PLAN-LEGIBILIDAD.md, Figma `500:2` («14 · Legibilidad · propuesta de apoyos»). Tres piezas de UI donde la letra sola no podía con lo que la escena pone detrás. La escena no se toca. Cada una tiene papel en la ficción y vive sólo en el cielo y el tamaño donde hace falta. Todo junto aquí para poder quitarlo de una vez. ════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* ── RONDA 2 (6 oct) — lo que la medición en tiempo seguía suspendiendo. Todo UI, la escena no se toca. Cada grupo, su método. ── */ /* HERO · la guía. (La línea «Digital products for banks, governments and startups» se borró el 7 oct: Fran, «este texto me lo encuentro inútil, deberíamos borrarlo».) */ .guia{color:var(--ink-2)} /* PIE · tinta plena. El pie flota sobre el dibujo de Rigel. */ .pie h2,.pie a,.pie{color:var(--ink)} /* BARRA · las etiquetas de los botones (idioma y cielo), un paso más de tinta. */ .marco .der{color:var(--idioma,var(--ink-2))} .switch{color:var(--ink)} /* TELÉFONO · los ledes y las etiquetas de parada, tinta plena: la escena pasa por detrás a media columna. */ @media (max-width:820px){.lede{color:var(--ink)}.ancla{color:var(--ink)}} /* DECISIONS Y WHAT I DO EN TELÉFONO (6 oct): eran más altos que la pantalla y la cuarta tarjeta de Decisions se montaba sobre el título de la sección siguiente. Cada par pasa a UNA columna —la respuesta fácil arriba, la decisión debajo, la flecha hacia abajo— en vez de tres columnas de 120 px con frases de seis líneas, y los dos bloques toman su altura natural (como la biografía: #mintaka). */ @media (max-width:820px){ #meissa-texto .bloque{height:auto;min-height:100svh} } /* ── RONDA 3 (6 oct) — lo que la medición en tiempo aún suspendía (17 textos). UI sólo; la escena no se toca. ── */ /* TELÉFONO · las etiquetas de cada parada con su entrada (antes sólo la biografía) y el FAQ y los rótulos en tinta plena. */ @media (max-width:820px){ .parada .ancla{display:inline-block;padding:.45rem .6rem .4rem;margin-left:-.6rem;background:color-mix(in srgb,var(--bg) 86%,transparent); border-top:.75px solid color-mix(in srgb,var(--ink-3) 55%,transparent)} .cintillo{color:var(--ink)} } /* ── EL VELO DEL TELÉFONO (6 oct, idea de Fran) ────────────────────────────────────────────────────────────────────────── Fran: *«¿has pensado en oscurecer el fondo en casos donde haya mucho texto en la pantalla, para que la UI se pueda ver más clara?»*. En teléfono la columna ocupa todo el ancho y las elipses del asiento (escritorio) no la cubren. Se reutiliza el propio asiento: la misma capa, detrás del texto y delante del canvas, con el color del cielo (en Ouranos OSCURECE, en Atlas ACLARA), pero plana y a todo el ancho, y con una opacidad que sube sola según la escena en la que estás (--velo) y baja con un fundido: nunca aparece ni desaparece de golpe. La escena no se toca: sólo hay una capa de UI entre ella y el texto. En el hero, 0: tiene su propio velo. */ @property --velo{syntax:"";inherits:true;initial-value:0} @media (max-width:820px){ html{--velo-k:.6;transition:--velo .8s ease} /* .6 × .45 = 27 % en las escenas de más texto: lo medido (6 oct) */ html[data-escena="saiph"]{--velo:.30} html[data-escena="meissa"]{--velo:.45} html[data-escena="bellatrix"]{--velo:.40} html[data-escena="cinturon"]{--velo:.45} html[data-escena="rigel"]{--velo:.40} /* la capa propia: sólo su fondo plano. Las elipses del asiento (el «borrón» del 4 oct) NO vuelven: se apagan aquí. */ html.motor.sin-velo .asiento{display:block;background:color-mix(in srgb,var(--bg) calc(var(--velo) * var(--velo-k) * 100%),transparent)} html.motor.sin-velo .asiento::before,html.motor.sin-velo .asiento::after{display:none} } /* ── EL MARCO ES UNA CÁPSULA (13 oct, DECISIONES 7.22) ─────────────────────────────────────────────────────────── Fran eligió, entre cuatro opciones fotografiadas en la página real, la cápsula arriba («el nav bar es más común arriba; nuestros usuarios serán todo tipo de usuario»). Sustituye a la franja del marco: el wordmark y los controles viven en una sola pastilla de vidrio centrada —superficie propia, filete de 1 px—, así que cuando pasa sobre contenido se lee como una pieza de UI y no como botones sueltos encima del texto. La banda de lado a lado se descartó (no le gustó). Y se esconde al bajar: `barra.js` pone `html.barra-oculta` mientras el visitante baja, y la quita al subir, al pararse un momento, arriba del todo o con el menú abierto. Sin `barra.js` la cápsula se queda siempre visible. */ .marco{inset:14px auto auto 50%;width:auto;max-width:calc(100% - 2rem);transform:translateX(-50%);align-items:center;gap:1.4rem; padding:.35rem .4rem .35rem 1rem;border-radius:999px; background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid color-mix(in srgb,var(--ink) 20%,transparent); transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .35s ease} html[data-cielo="atlas"] .marco{border-color:color-mix(in srgb,var(--ink) 34%,transparent)} /* 22 oct · LA CÁPSULA ES UNA SUPERFICIE MACIZA en los dos cielos (Fran: «una sola solución a todo el menú en ambos modos»): fondo del cielo al 100 %, sin vidrio, así la escena nunca pasa por debajo de su letra; y en el cambio de cielo fondo y letra saltan juntos (nucleo.js, cielo-salta). */ .marco{background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none} html.cielo-salta .marco,html.cielo-salta .marco *{transition:none!important} .marco::before{display:none} .marco .der{gap:.35rem} .marco .marca,.marco .idioma,.marco .menu,.marco .switch{background:none;border:0;min-height:0;padding:.4rem .6rem;border-radius:999px} .marco .idioma:hover,.marco .menu:hover,.marco .switch:hover,.marco .idioma:focus-visible,.marco .menu:focus-visible,.marco .switch:focus-visible{background:color-mix(in srgb,var(--ink) 10%,transparent)} html.barra-oculta .marco{transform:translate(-50%,calc(-100% - 22px));opacity:0} html.barra-oculta .marco:focus-within{transform:translateX(-50%);opacity:1} @media (prefers-reduced-motion:reduce){.marco{transition:opacity .2s}html.barra-oculta .marco{transform:translateX(-50%)}} @media (max-width:820px){ .marco{inset:10px auto auto 50%;gap:.4rem;padding:.25rem .25rem .25rem .8rem;font-size:var(--t-rotulo)} .marco .der{gap:.1rem} .marco .marca,.marco .idioma,.marco .menu,.marco .switch{padding:.4rem .5rem} } /* ── EL AVISO DE SONIDO (19 oct, DECISIONES 7.33) ────────────────────────────────────────────────────────────────── La página arranca callada; esta pastilla, del MISMO vidrio que el marco, sube desde abajo e invita a ponerla (Fran, 19 oct: «no crees que sería mejor que venga desde abajo y no desde arriba?»; arriba además tapaba el titular en el teléfono). La enseña y la quita motor/musica.js (crearAviso). En Atlas, papel y tinta como el marco. */ .aviso-son{position:fixed;z-index:9;bottom:calc(20px + env(safe-area-inset-bottom));left:0;right:0;margin-inline:auto;width:max-content;transform:translateY(16px);display:flex;align-items:center;gap:.55rem; max-width:calc(100% - 2rem);padding:.3rem .3rem .3rem .8rem;border-radius:999px;font-size:.8rem;letter-spacing:.01em;color:var(--ink-2); background:color-mix(in srgb,var(--bg) 72%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); border:1px solid color-mix(in srgb,var(--ink) 20%,transparent); opacity:0;transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)} .aviso-son.esta{opacity:1;transform:none} .aviso-son[hidden]{display:none} .aviso-son p{margin:0;line-height:1.3} .aviso-icono{width:1.1rem;height:1.1rem;flex:none;color:var(--ink-3)} .aviso-si{font:inherit;color:var(--ink);background:color-mix(in srgb,var(--ink) 12%,transparent);border:1px solid color-mix(in srgb,var(--ink) 26%,transparent); border-radius:999px;padding:.38rem .85rem;cursor:pointer;white-space:nowrap} .aviso-si:hover,.aviso-si:focus-visible{background:color-mix(in srgb,var(--ink) 22%,transparent)} .aviso-no{display:grid;place-items:center;flex:none;width:1.9rem;height:1.9rem;padding:0;border:0;border-radius:50%;background:none;color:var(--ink-3);cursor:pointer} .aviso-no svg{width:.85rem;height:.85rem} .aviso-no:hover,.aviso-no:focus-visible{background:color-mix(in srgb,var(--ink) 10%,transparent);color:var(--ink)} html[data-cielo="atlas"] .aviso-son{bottom:calc(var(--banda, 16px) + 14px);background:color-mix(in srgb,var(--bg) 86%,transparent);border-color:color-mix(in srgb,var(--ink) 34%,transparent)} @media (max-width:820px){.aviso-son{bottom:calc(14px + env(safe-area-inset-bottom));font-size:var(--t-rotulo);gap:.4rem;padding:.25rem .25rem .25rem .65rem}} @media (prefers-reduced-motion:reduce){.aviso-son,.aviso-son.esta{transition:opacity .2s;transform:none}} /* ── MEISSA · ¿CUÁL ES TU CASO? (13 oct, DECISIONES 7.23) ───────────────────────────────────────────────────────── Los dos bloques de antes —cuatro pares con la respuesta fácil tachada y cuatro problemas en rejilla, doce cajas— se funden en uno: cuatro botones con el problema dicho por el cliente y, al elegir uno, la respuesta. Fran: «¿no sería mejor decir lo que aprendimos en vez de decir la respuesta equivocada?», «preguntas sinceras y comunes y respuestas directas y sencillas». En escritorio la lista no se mueve y la respuesta se abre a la DERECHA, a la altura del botón elegido y unida a él por un trazo; en el teléfono se abre DEBAJO del botón (acordeón). La respuesta usa la lámina de Bellatrix. Sin meissa.js (sin `.vivo`) las cuatro respuestas quedan abiertas, cada una bajo su problema. */ .bloque.ancho.elige{grid-template-columns:minmax(0,1fr);align-content:center;align-items:start;gap:clamp(1.4rem,4vh,2.4rem)} .elige .dicho{max-width:40rem} .elige-lista{--hueco:clamp(2.5rem,7vw,7rem);display:flex;flex-direction:column;gap:.7rem;max-width:44rem} .elige-op{all:unset;box-sizing:border-box;cursor:pointer;display:block;width:100%;padding:.75rem 1.15rem;border-radius:1.4rem; font-family:var(--display);font-weight:500;font-size:clamp(.95rem,1.15vw,1.05rem);line-height:1.3;color:var(--ink); background:color-mix(in srgb,var(--bg) 55%,transparent);border:1px solid color-mix(in srgb,var(--ink) 30%,transparent); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .25s,color .25s,border-color .25s} .elige-op:hover{border-color:color-mix(in srgb,var(--ink) 60%,transparent)} .elige-op:focus-visible{outline:2px solid var(--signal);outline-offset:3px} .elige-op[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)} .elige-resp{position:relative;padding:1.15rem 1.4rem 1.2rem;background:color-mix(in srgb,var(--bg) 82%,transparent); border:1px solid color-mix(in srgb,var(--ink) 22%,transparent);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} html[data-cielo="atlas"] .elige-resp{background:color-mix(in srgb,var(--bg) 90%,transparent);border-color:color-mix(in srgb,var(--ink) 40%,transparent)} .elige-resp::after{content:"";position:absolute;inset:-1px;pointer-events:none;opacity:.7;background: linear-gradient(var(--ink),var(--ink)) top left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/1.5px 10px no-repeat, linear-gradient(var(--ink),var(--ink)) top right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/1.5px 10px no-repeat, linear-gradient(var(--ink),var(--ink)) bottom left/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/1.5px 10px no-repeat, linear-gradient(var(--ink),var(--ink)) bottom right/10px 1.5px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/1.5px 10px no-repeat} .elige-resp p{margin:0;font-size:var(--t-cuerpo);line-height:1.6;color:var(--ink-2)} .elige-resp .elige-lab{font-size:var(--t-rotulo);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--signal);margin-bottom:.45rem} html[data-cielo="ouranos"] .elige-resp .elige-lab{color:#ff7a6e} .elige-resp .elige-nota{margin-top:.7rem;font-size:var(--t-apoyo);color:var(--ink-3)} .elige-resp .elige-nota a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--signal);white-space:nowrap} html[data-cielo="ouranos"] .elige-resp .elige-nota a{border-bottom-color:#ff7a6e} .elige .cintillo,.elige .titular{text-shadow:0 1px 14px color-mix(in srgb,var(--bg) 70%,transparent)} .elige-lista.vivo .elige-resp[hidden]{display:none} @media (min-width:821px){ /* la lista quieta a la izquierda; la respuesta a la derecha, a la altura de su botón (--y lo pone meissa.js). Va fuera del flujo: así una respuesta más alta que su botón no empuja los de abajo, que es lo que la idea prohíbe. */ .elige-lista.vivo{position:relative;max-width:29rem} .elige-lista.vivo .elige-resp{position:absolute;left:calc(100% + var(--hueco));top:var(--y,0px);width:min(36rem,calc(100vw - 29rem - var(--hueco) - 2 * var(--lado,4rem)))} /* el trazo que une el botón con su respuesta */ .elige-lista.vivo .elige-resp::before{content:"";position:absolute;right:100%;top:1.45rem;width:var(--hueco);height:1.4px;background:var(--signal); -webkit-mask:linear-gradient(90deg,transparent 0 .6rem,#000 .6rem);mask:linear-gradient(90deg,transparent 0 .6rem,#000 .6rem)} html[data-cielo="ouranos"] .elige-lista.vivo .elige-resp::before{background:#ff7a6e} .elige-lista.vivo .elige-resp{animation:elige-entra .35s cubic-bezier(.2,.7,.2,1)} } @keyframes elige-entra{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}} @media (max-width:820px){ .elige-op{border-radius:1.2rem;font-size:.95rem} .elige-resp{margin:-.2rem 0 .3rem;padding:1rem 1.1rem} .elige-resp p{font-size:var(--t-cuerpo)} .elige-resp .elige-nota{font-size:var(--t-apoyo)} .elige-resp .elige-nota a{display:inline-block;padding:.2rem 0} } @media (prefers-reduced-motion:reduce){.elige-op{transition:none}.elige-lista.vivo .elige-resp{animation:none}} /* ── SAIPH · EL ÍNDICE (14 oct, DECISIONES 7.24 y 7.25) ─────────────────────────────────────────────────────────── Un portafolio: los siete nombres a la izquierda (el elegido en el color de selección, con su año y su flecha); a la derecha UNA portada grande —cambia de fuente al elegir—, sin texto, y las siete en pequeño debajo; qué es el proyecto y «See the case» van bajo su nombre en la lista (Fran, 14 oct: «abajo del título […] texto descriptivo y cta»; «en la galería no le pongas texto»). La galería empieza con el primer nombre y acaba con el último. Encima del cielo, la capa de la biografía, negro en Ouranos y papel en Atlas, con los mismos valores. Una sola imagen grande y ninguna escondida: así toda imagen que hay en la página se ve y se carga, y la grande lleva su descripción enlazada (aria-describedby, D5 ampliada el 14 oct con el sí de Fran). Las miniaturas las pone saiph.js sólo en escritorio; en el teléfono la misma figura se muda bajo el nombre elegido (acordeón). Sin saiph.js: la lista con cada resultado y su enlace, y la primera portada. */ .saiph-capa{position:fixed;inset:0;z-index:0;pointer-events:none;background:#000;opacity:calc(var(--saiph-capa,0) * .72);transition:opacity .45s linear} html[data-cielo="atlas"] .saiph-capa{background:var(--bg);opacity:calc(var(--saiph-capa,0) * .86)} /* LA CAPA DE LAS CITAS, sólo en Atlas en teléfono (14 oct, 7.28): ahí el galeón y los asteroides en tinta cruzan las citas. Es provisional: cuando cambie el color del cinturón (BACKLOG-CINTURON.md parte 5) se vuelve a mirar si hace falta. */ .voces-capa{display:none} @media (max-width:820px){ html[data-cielo="atlas"] .voces-capa{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--bg);opacity:calc(var(--voces-capa,0) * .86);transition:opacity .45s linear} } .bloque.ancho.indice{grid-template-columns:minmax(0,1fr);align-content:center;align-items:start;gap:clamp(1.6rem,4.5vh,2.8rem)} #saiph .cintillo{color:var(--ink-2)} .ix{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem} .ix-lista{list-style:none;margin:0;padding:0} .ix-op{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:baseline;gap:.75rem;width:100%; font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.1vw,1.9rem);line-height:1.2;letter-spacing:-.02em; color:color-mix(in srgb,var(--ink) 55%,transparent);padding:.55rem 0;transition:color .25s} html[data-cielo="atlas"] .ix-op{color:var(--ink)} /* 21 oct · en Atlas ningún texto se atenúa: la jerarquía es tamaño, peso y caja, no tinta más clara (Fran). */ .ix-op small{font-family:var(--body);font-size:.75rem;letter-spacing:.08em;font-weight:500;color:var(--ink-3);visibility:hidden} .ix-op .ix-fun{font-family:var(--body);font-size:var(--t-rotulo);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .ix-op:hover,.ix-op:focus-visible{color:var(--ink)} .ix-op:focus-visible{outline:2px solid var(--signal);outline-offset:4px} .ix-res{margin:0 0 .3rem;font-size:var(--t-cuerpo);line-height:1.5;color:var(--ink-2);max-width:30rem} .ix-res a{margin-left:.4rem;font-size:var(--t-apoyo);font-weight:600;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--sel,var(--signal));white-space:nowrap} .ix-ver{margin:0;display:flex;flex-direction:column} .ix-ver img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:4px} /* con saiph.js: qué es el proyecto y su enlace, sólo bajo el nombre elegido; la galería, sin texto (Fran, 14 oct) */ .ix.vivo .ix-fila:not(.on) .ix-res{display:none} .ix.vivo .ix-fila.on .ix-op small{visibility:visible} .ix.vivo .ix-fila.on .ix-op::after{content:"→";font-family:var(--body);font-size:.8em;color:var(--sel,var(--signal))} .ix-tiras{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:14px} .ix-tira{all:unset;box-sizing:border-box;cursor:pointer;display:block;aspect-ratio:16/10;overflow:hidden;border-radius:3px;opacity:.5; outline:1px solid color-mix(in srgb,var(--ink) 22%,transparent);outline-offset:0;transition:opacity .25s,outline-offset .25s} html[data-cielo="atlas"] .ix-tira{opacity:.72} .ix-tira img{display:block;width:100%;height:100%;object-fit:cover} .ix-tira:hover{opacity:.85} .ix-tira[aria-pressed="true"]{opacity:1;outline:1.5px solid var(--sel,var(--signal));outline-offset:3px} .ix-tira:focus-visible{outline:2px solid var(--signal);outline-offset:3px} @media (min-width:821px){ .ix.vivo{grid-template-columns:minmax(0,30rem) minmax(0,43.75rem); /* 700 px: las portadas son de 1400, y D2 pide el doble */ column-gap:clamp(2rem,4vw,4.5rem);align-items:stretch} .ix.vivo .ix-op{padding:.62rem 0} /* la galería mide lo que la lista: la portada se estira, el pie y las miniaturas no */ .ix.vivo .ix-vista{display:flex;flex-direction:column;gap:14px;min-height:0} .ix.vivo .ix-ver{flex:1 1 auto;min-height:0} .ix.vivo .ix-ver img{flex:1 1 auto;min-height:0;height:0;aspect-ratio:auto} .ix.vivo .ix-ver img.entra{animation:ix-entra .35s ease} } @keyframes ix-entra{from{opacity:.25}to{opacity:1}} @media (max-width:820px){ .ix-op{border-top:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding:.7rem 0} .ix-lista li:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 18%,transparent)} .ix-fila .ix-ver{margin:0 0 1.1rem} .ix-res a{display:inline-block;padding:.25rem 0} .ix-fila .ix-res{margin-bottom:.8rem} } @media (prefers-reduced-motion:reduce){.ix-op,.ix-tira{transition:none}.ix.vivo .ix-ver img.entra{animation:none}} /* ── EL COLOR DE SELECCIÓN (14 oct, DECISIONES 7.25) ───────────────────────────────────────────────────────────── Fran: «no estamos usando color de selección, sólo lo poníamos más claro […] en Atlas no se distingue tanto la selección». La regla ya estaba en el menú (el color de señal es el del elemento SELECCIONADO); aquí se extiende a lo nuevo: el nombre elegido de Saiph y la parada activa de Bellatrix van en ese color —rojo claro en Ouranos, el azul de la tinta en Atlas—. Y la selección deja aire arriba y abajo en Saiph, para que se note como sección. En Bellatrix sólo la parada ACTIVA lleva el color: Ask dejó de llevarlo siempre (y su lámina tenue en Atlas se quitó), porque parecía seleccionada para siempre. */ :root{--sel:var(--signal)} html[data-cielo="ouranos"]{--sel:#ff7a6e} .ix.vivo .ix-fila.on{margin:.55rem 0 .7rem} .ix.vivo .ix-fila.on .ix-op{color:var(--sel)} .ix.vivo .ix-fila.on .ix-op small{color:var(--sel);opacity:.85} .ix.vivo .ix-fila.on .ix-op small{opacity:1} /* 21 oct · ningún texto se atenúa: la jerarquía es tamaño, peso y caja, no tinta más clara (Fran). En Ouranos desde el 23 oct. */ .rv-etapa.rv-ahora b,.rv-etapa.rv-ahora .num{color:var(--sel)} .rv-etapa.rv-ahora .rv-hito{background:var(--sel);border-color:var(--sel)}