/* ═══════════════════════════════════════════════════════════════════════════ BASE · las mismas tintas y las mismas letras que la aplicación La portada y la aplicación se abren desde el mismo enlace y tienen que parecer la misma cosa, así que los tokens de aquí son los de `src/styles.css` copiados a mano —el sitio no comparte compilación con la aplicación—. Si allí cambia el ámbar, aquí también. Las dos familias, Barlow e IBM Plex Mono, son las de la aplicación y están servidas desde `/fonts` con el subconjunto latino. La aplicación las pide a Google Fonts; el sitio no pide nada a nadie, y la CSP —`default-src 'none'`— está para que eso no se rompa por descuido. ═══════════════════════════════════════════════════════════════════════════ */ @font-face{font-family:Barlow;font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/barlow-400.woff2) format('woff2')} @font-face{font-family:Barlow;font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/barlow-500.woff2) format('woff2')} @font-face{font-family:Barlow;font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/barlow-600.woff2) format('woff2')} @font-face{font-family:Barlow;font-style:normal;font-weight:700;font-display:swap; src:url(../fonts/barlow-700.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url(../fonts/ibm-plex-mono-400.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url(../fonts/ibm-plex-mono-500.woff2) format('woff2')} @font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap; src:url(../fonts/ibm-plex-mono-600.woff2) format('woff2')} /* El ascenso: 0 en la costa, 1 en el Roque. Lo escribe `js/ascenso.js` en cada fotograma y de él cuelga toda la página —el cielo, el raíl, qué curva de nivel está encendida—. Declarado con @property para que tenga un valor de partida antes de que corra el JavaScript y para que sea un número de verdad en los `calc()` en vez de una cadena. */ @property --asc{syntax:'';initial-value:0;inherits:true} /* EL ENCUADRE DE LA ISLA, y están registradas porque `isla3d.js` LAS LEE: sin registrar, `getComputedStyle` devuelve la expresión sin resolver y `parseFloat` da NaN. Con ellas devuelve el número ya calculado. Son dos desplazamientos del plano de proyección, en pantalla normalizada: 1 es media pantalla. No mueven la cámara —el recorrido de `camara()` es el mismo— sino el encuadre, que es lo que se quiere ajustar aquí: la isla queda un poco a la derecha y un poco abajo, y el ángulo alto de la izquierda, donde entra el titular, se queda de cielo. */ @property --isla-sesgo{syntax:'';initial-value:0;inherits:true} @property --isla-caida{syntax:'';initial-value:0;inherits:true} :root{ --asc:0; --ink:#0d0c0b; --ink-2:#131211; --panel:rgba(20,19,17,.92); --fg:#f4f1ec; /* LOS DOS GRISES SON MÁS CLAROS QUE LOS DE LA APLICACIÓN, y por una razón medida: allí el texto va sobre panel opaco, y aquí va sobre un cielo que cambia. Recorriendo el ascenso entero y fotografiando el fondo real debajo de cada texto —con las letras apagadas y los paneles puestos—, el fondo más claro que llega a haber detrás de un párrafo es rgb(53,47,36), el punto caliente de la calima de la costa a 390 px. Sobre él: #a8a29a (el de la aplicación) 4,1:1 — no llega #b3ada4 6,0:1 ✓ --fg-dim #7d776f (el de la aplicación) 2,8:1 — no llega #a49d92 4,9:1 ✓ --fg-faint SI SE VUELVE A SUBIR EL BRILLO DE LA ATMÓSFERA, SE VUELVEN A MEDIR — y no es teórico: al añadir una sección donde antes no había ninguna, la calima que le tocaba subió del 59 al 86 % y este margen se comió las cuatro centésimas que le sobraban. Se arregló bajando el punto caliente de `.c-costa`, no el token; está contado allí. Lo mide `scripts/checks/portada-regimenes.ts`. */ --fg-dim:#b3ada4; --fg-faint:#a49d92; --amber:#e2b45c; --amber-deep:#c1873a; --alert:#d1483f; --live:#5fbf7f; --line:rgba(255,255,255,.14); --line-soft:rgba(255,255,255,.065); --radius:14px; --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:Barlow,system-ui,-apple-system,'Helvetica Neue',sans-serif; --gut:clamp(1.15rem,4vw,3.25rem); /* 12vw y no 8: a 1440 px el raíl salía de 115 px y «mar de nubes» —la etiqueta más larga de las que nombran el sitio— necesita 110 con la marca encendida. Se salía por la izquierda de la pantalla. Y el tope sube de 150 a 168 porque el raíl dejó de decir solo la cota: cada hito lleva ahora un tercer renglón con lo que se cuenta en esa franja, y con 150 px «30 aforos, cada 5 min» se partía en dos líneas y la segunda asomaba fuera. Medido con IBM Plex Mono a .52rem —4,8 px por carácter— los 168 px dejan 28 caracteres útiles y la etiqueta más larga tiene 21. Ver `rail.css`. */ --rail:clamp(0px,12vw,168px); /* SE FUE LA BANDA DE LA DERECHA. Hubo aquí una columna reservada de hasta 700 px en la que la isla giraba a plena luz mientras el texto vivía apretado en el hueco que sobraba: a 1440 px de ventana la columna de lectura se quedaba en 679, y en una pantalla de 2000 el cromo se llevaba 848 px. Un fondo no se reserva sitio; se pone detrás. Lo que hacía falta apartar sigue haciendo falta: con el relieve a plena luz detrás de un párrafo el fondo subía a rgb(119,117,94) y el contraste caía a 1,7:1. Ahora no se aparta, se apaga — el lienzo va al 40 % bajo un velo parejo del 60 %, y lo que se ve del relieve es el 16 % de su amplitud. Los dos números salen de despejar el mismo mínimo de siempre y están medidos en `chrome.css`, que es donde se ponen. */ --isla-sesgo:0; --isla-caida:0; /* 1560 y no 1080: sin banda, la columna de lectura es la ventana menos el raíl. A 1440 px pasa de 679 a 1168, y el tope solo entra a partir de 1728 px de ventana para que en una pantalla muy ancha el contenido no se estire sin fin. Los bloques de texto no crecen con él —siguen topados en rem donde se declaran— : lo que crece son las rejillas y las capturas. */ --max:1560px; } /* El encuadre solo se descentra donde hay sitio para notarlo. Por debajo de 1080 px la isla va centrada y de telón, que es como estaba. */ @media (min-width:1080px){:root{--isla-sesgo:.18;--isla-caida:.2}} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} body{ margin:0; background:var(--ink); color:var(--fg-dim); font-family:var(--sans); font-size:clamp(1rem,.62rem + .55vw,1.12rem); line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } /* ── la escala tipográfica ───────────────────────────────────────────────── */ /* LOS ESPACIOS ALREDEDOR DEL `+` NO SON DE ESTILO, SON SINTAXIS, y esta hoja estuvo meses sin ellos. En `calc()` y en `clamp()` la gramática de CSS exige espacio a los dos lados de `+` y de `−`, porque sin él «1rem+5.4vw» se lee como un solo componente y no como una suma. Una declaración que no se entiende se tira entera y en silencio: no hay aviso en la consola, y lo que queda es lo que traiga el navegador de fábrica. ESO ES LO QUE SE ESTABA SIRVIENDO. Siete declaraciones —el cuerpo del texto, h1, h2, h3, `.lede`, la cifra de `.tira` y el h2 del cierre— iban escritas sin espacios y ninguna llegaba a aplicarse. El titular, que aquí pide 95 px a 1440 de ventana, salía a los 32 px de fábrica de un h1; el h2, a 24. La página entera se veía a la escala de un documento sin hoja de estilo, y ningún número de este fichero era el que se veía. Medido con `.tmp/medir.mjs` sobre la página servida, ya con los espacios: Barlow 700 a −0,04 em da **0,402 em por carácter**, así que la línea larga —«El tiempo en tu barranco,», 25 caracteres— pide 1.061 px con el tope de 6,6 rem, y la columna más estrecha en la que se llega a ese tope —1.728 px de ventana— mide 1.456. Una sola línea de 900 px de ventana para arriba. `*` y `/` no piden espacio, así que los `calc(var(--asc) * 100%)` de la página sí funcionaban. La regla es solo para `+` y `−`. */ h1,h2,h3{margin:0;color:var(--fg);font-weight:600;letter-spacing:-.025em;line-height:1.06;text-wrap:balance} /* Y el tope sube de 5,8 a 6,6 rem porque el titular dejó de vivir en una columna de 679 px. */ h1{font-weight:700;letter-spacing:-.04em;line-height:.95;font-size:clamp(2.5rem,1.05rem + 5.4vw,6.6rem)} h2{font-size:clamp(1.8rem,1rem + 2.9vw,3.2rem);letter-spacing:-.032em} h3{font-size:clamp(1.02rem,.9rem + .4vw,1.2rem);letter-spacing:-.015em;line-height:1.25} p{margin:0 0 1em} p:last-child{margin-bottom:0} strong,b{color:var(--fg);font-weight:600} sub{font-size:.72em;line-height:0;vertical-align:-.25em} a{color:inherit;text-decoration:none} :focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:3px} ::selection{background:var(--amber);color:#17130c} img{max-width:100%;height:auto;display:block} /* Etiqueta de instrumento: la misma que rotula los paneles de la aplicación. */ .rot{ font-family:var(--mono);font-size:.68rem;font-weight:500; letter-spacing:.17em;text-transform:uppercase;color:var(--fg-faint); } .wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gut)} .saltar{ position:absolute;left:-9999px;top:0;z-index:99; background:var(--amber);color:#17130c;padding:.7rem 1.1rem; font-family:var(--mono);font-size:.8rem; } .saltar:focus{left:.5rem;top:.5rem} /* El único icono de la página —la flecha de los enlaces— definido una vez y referenciado con . */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .fl{flex:none;overflow:visible} /* Grano. Un SVG a pantalla completa, no una imagen: pesa lo que ocupa su propio marcado y no es una petición más. */ .grano{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.34;mix-blend-mode:soft-light}