/* ========================================================================== ALPHA X - IA · v10 — LA BASE -------------------------------------------------------------------------- Un documento encima de un sitio por el que se avanza. Dos reglas gobiernan toda esta hoja: **1 · Cada bloque de texto se trae su propio contraste.** Un párrafo suelto sobre una escena que cambia es un párrafo que a veces se lee y a veces no — y la mitad de las veces que no, quien lo escribió no llegó a verlo porque en su pantalla, en ese momento, el corredor estaba oscuro justo ahí. **2 · Pero el contraste no puede ser un rectángulo opaco.** Eso es lo que convertía la versión anterior en «un objeto y unos paneles encima». Aquí los bloques son velos abiertos por un lado, sin caja cerrada, y el enjambre se aparta de ellos por su cuenta: el hueco lo hace la escena, no el CSS. Y una tercera, que es la novedad: **el color del texto sale de la escena**. `--luz` la escribe el JavaScript midiendo lo que hay detrás de cada bloque. Si el JavaScript no llega a cargarse, el valor de reserva de aquí abajo deja la página perfectamente legible. ========================================================================== */ :root{ --fondo: #04050A; --texto: #E7EAF3; --apagado: #A3AAC2; --tenue: #737A94; --linea: rgba(180, 196, 235, .16); /* El acento de la maqueta **es** el color del horizonte de la escena. Que el documento y el mundo compartan acento es lo que impide que se lean como dos capas: si el texto usara otro color, se vería el corte. */ --ambar: #FF9E54; --hielo: #6BD4EE; /* Valores de reserva de la luz en vivo. Si `luz.js` no llega a medir —sin JavaScript, o antes del primer fotograma— la página se ve con esto y no hay ningún hueco. */ --luz: #C9D6F0; --luz-fuerza: 0.55; /* ⚠ El titular del documento es ahora **más pequeño que el de la escena**, porque la palabra grande la dice la sala. Dejarlo a 108 px con un rótulo de tres metros detrás sería que los dos griten a la vez, y cuando dos cosas gritan a la vez no se entiende ninguna. */ --f-display:"Space Grotesk", "Inter", system-ui, sans-serif; --f-texto: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --f-cota: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --t-1: clamp(30px, 3.4vw, 50px); --t-2: clamp(26px, 3.2vw, 44px); --t-3: clamp(17px, 1.45vw, 21px); --t-4: 15.5px; --t-cota: 10.5px; --margen: clamp(20px, 4.5vw, 84px); --e-cine: cubic-bezier(.22,.61,.24,1); --e-salida: cubic-bezier(.16,.84,.28,1); } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; background:var(--fondo); color:var(--texto); font-family:var(--f-texto); font-size:var(--t-4); line-height:1.66; letter-spacing:-.004em; -webkit-font-smoothing:antialiased; } /* ========================================================================== LAS DOS CAPAS FIJAS -------------------------------------------------------------------------- ⚠ El orden de apilado, escrito explícito porque es donde se falla: 0 nada 1 #lienzo la escena 2 body::before el rasante — **encima** del lienzo 3 body::after el grano 10 el contenido 20 #polvo el primer plano, por delante del texto En una versión anterior el rasante se escribió con el mismo z-index que el lienzo y quedó tapado al cien por cien: la regla «aplicada», `getComputedStyle` conforme, y cero píxeles de diferencia en pantalla. Entre dos posicionados empatados gana el que va después en el documento, y `body::before` va antes que todos los hijos de body. ========================================================================== */ body::before{ content:""; position:fixed; inset:0; z-index:2; pointer-events:none; /* Muy poco: la escena ya trae su propia luz y su viñeta. Esto sólo cierra las esquinas de arriba, donde el techo se queda plano. */ background: radial-gradient(90% 60% at 50% -10%, rgba(107,212,238,.06), rgba(107,212,238,0) 60%), linear-gradient(180deg, rgba(4,5,10,.55) 0%, rgba(4,5,10,0) 22%); } /* El grano en `overlay` y no en `multiply`: sobre negro, multiplicar no hace nada —cualquier cosa por cero es cero— y lo que hace falta es que el ruido **aclare** un poco los medios tonos. */ body::after{ content:""; position:fixed; inset:0; z-index:3; pointer-events:none; opacity:.045; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23r)'/%3E%3C/svg%3E"); } /* ========================================================================== TIPOGRAFÍA ========================================================================== */ h1, h2, h3{ margin:0; font-weight:500; } p{ margin:0 0 1.05em; max-width:58ch; } p:last-child{ margin-bottom:0; } a{ color:inherit; text-decoration:none; } .display{ font-family:var(--f-display); font-weight:500; line-height:1.04; letter-spacing:-.03em; } .cota{ font-family:var(--f-cota); font-size:var(--t-cota); letter-spacing:.17em; text-transform:uppercase; color:var(--tenue); } .num{ font-family:var(--f-cota); font-variant-numeric:tabular-nums; } /* El foco tiene que verse sobre una escena que cambia cada fotograma, así que lleva halo además del anillo: un anillo de un píxel sobre partículas en movimiento desaparece la mitad del tiempo. */ :focus-visible{ outline:2px solid var(--ambar); outline-offset:3px; border-radius:3px; box-shadow:0 0 0 7px rgba(255,158,84,.18); } ::selection{ background:var(--ambar); color:#08090F; } .pendiente{ color:var(--ambar); background:rgba(255,158,84,.10); border:1px solid rgba(255,158,84,.26); padding:1px 8px; border-radius:3px; font-family:var(--f-cota); font-size:.85em; letter-spacing:.08em; }