/* styles.css — mobile-first. Tema: SPEC SHEET — expositor casi negro, tabla blanca, tipografía condensada en mayúsculas + mono para todo dato, hairlines y lecturas tipo instrumento. Monocromo a dos tintas: papel sobre negro. */ /* Titular: Anton (OFL, publicable sin licencia de pago). Sustituye a Timmons NY el 2026-07-29 para poder publicar limpio — Timmons es de Matt Willey, "all rights reserved", y su licencia web cuesta 20 £ en Typespec; el fichero sigue en fonts/ pero NO se despliega (ver tools/deploy-prepare.mjs). Medido: a 200 px la mayúscula de Timmons son 147 px y la de Anton 172, así que Anton pide **0,855× el font-size** para pesar igual. Y ojo, es casi el doble de ancha por letra (H de 85 px contra 44), así que los titulares ocupan mucho más y hay que vigilar los saltos de línea. */ @font-face { font-family: 'Anton'; src: url('fonts/anton-latin.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Anton'; src: url('fonts/anton-latin-ext.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Archivo (texto) y JetBrains Mono (todo dato) AUTO-HOSPEDADAS: antes venían de Google Fonts, lo que metía dos orígenes de tercero y un CSS bloqueante en el . Variables solo en el eje de peso (el eje de anchura ya no se usa y pesaba 55 KB más). Latin ~66 KB en total; latin-ext solo si el texto lo pide. */ @font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Archivo'; src: url('fonts/archivo-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrainsmono-latin.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; src: url('fonts/jetbrainsmono-latin-ext.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { --void: #08090a; /* fondo panel */ --stage: #050607; /* fondo expositor (más profundo) */ --ink: #f2f1ec; /* blanco papel */ --ink-2: #b6b8b4; --dim: #6f7477; /* texto de servicio */ --line: rgba(242, 241, 236, 0.16); --line-soft: rgba(242, 241, 236, 0.07); --fill: rgba(242, 241, 236, 0.05); --fill-2: rgba(242, 241, 236, 0.1); /* acento: UN solo color, azul tech. Se reserva a la CIFRA (volumen), la acción principal y las marcas de progreso/selección — el resto de la UI sigue a dos tintas. Sin degradados. */ --accent: #2e9dff; --sans: 'Archivo', -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; /* titulares: pregunta, portada, shape */ --display: 'Anton', var(--sans); --display-weight: 400; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; } body { font-family: var(--sans); font-size: 14px; background: var(--void); color: var(--ink); -webkit-font-smoothing: antialiased; } .app { position: relative; display: grid; grid-template-rows: 52svh 1fr; height: 100svh; } /* ---------- Puerta de idioma (/) ---------- Con JS redirige al idioma que toque, así que casi nadie la ve; existe para que los rastreadores y quien no tenga JS tengan enlaces reales a /es/ y /en/. */ body.lang-gate { display: grid; place-content: center; gap: 18px; padding: 40px; text-align: center; } body.lang-gate h1 { font-family: var(--display); font-weight: var(--display-weight); text-transform: uppercase; font-size: 40px; line-height: 0.86; } body.lang-gate ul { list-style: none; display: grid; gap: 10px; } body.lang-gate a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); text-decoration: none; border: 1px solid var(--line); padding: 12px 18px; display: block; } body.lang-gate a:hover { color: var(--ink); border-color: var(--ink); } /* ---------- Foto de portada: a sangre por DEBAJO de las dos columnas ---------- La foto vive en el contenedor y se enciende solo en la portada (.with-photo); el velado va en una capa aparte para poder ajustarlo sin tocar la imagen. Al empezar el formulario se apaga y vuelven los negros planos. */ .app::before, .app::after { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0; transition: opacity 0.7s ease; pointer-events: none; } /* OJO: el `url()` vive DENTRO de .with-photo a propósito. Si se declara en `.app::before` sin más, el navegador descarga los 405 KB aunque la capa esté a `opacity: 0` — y encima la imagen entra como candidata a LCP. Con el selector condicionado, las pantallas sin foto no la piden nunca. */ .app.with-photo::before { background: image-set(url('img/panel-bg.avif') type('image/avif'), url('img/panel-bg.jpg') type('image/jpeg')) center / cover no-repeat; } /* en móvil no hace falta el máster: 65 KB en vez de 210 */ @media (max-width: 879px) { .app.with-photo::before { background-image: image-set(url('img/panel-bg-sm.avif') type('image/avif'), url('img/panel-bg.jpg') type('image/jpeg')); } } .app::after { background: linear-gradient(180deg, rgba(8, 9, 10, 0.82) 0%, rgba(8, 9, 10, 0.66) 42%, rgba(8, 9, 10, 0.88) 100%); } .app.with-photo::before, .app.with-photo::after { opacity: 1; } /* las dos columnas por encima de la foto, y sin sus fondos opacos mientras esté */ .app > .stage, .app > .panel { position: relative; z-index: 1; } .app.with-photo > .stage { background: transparent; } .app.with-photo > .stage::before { opacity: 0; } /* ---------- Expositor 3D ---------- */ .stage { position: relative; background: var(--stage); overflow: hidden; border-bottom: 1px solid var(--line); } .stage::before { /* plano de fondo: gradiente lateral muy plano, nada de aurora */ content: ''; position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 38%, #101214 0%, #050607 68%); opacity: 0.9; } .stage::after { /* foco de la revelación: un halo neutro, apenas perceptible */ content: ''; position: absolute; inset: 0; background: radial-gradient(46% 40% at 50% 42%, rgba(242, 241, 236, 0.16) 0%, rgba(242, 241, 236, 0.04) 52%, transparent 74%); opacity: 0; transition: opacity 1.4s ease; pointer-events: none; } .stage.reveal::after { opacity: 1; } .stage canvas { position: relative; z-index: 1; width: 100%; height: 100%; display: block; touch-action: none; } /* ---------- HUD del expositor ---------- */ .hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--mono); } /* marco de hairlines + marcas de registro en los ejes centrales */ .hud-frame { position: absolute; inset: 14px; border: 1px solid var(--line-soft); } .hud-frame::before, .hud-frame::after { content: ''; position: absolute; background: var(--line); } /* marcas de registro izquierda/derecha a media altura */ .hud-frame::before { left: -1px; top: 50%; width: 9px; height: 1px; } .hud-frame::after { right: -1px; top: 50%; width: 9px; height: 1px; } .hud-block { position: absolute; display: flex; flex-direction: column; gap: 2px; } .hud-block.tl { top: 26px; left: 26px; } .hud-block.tr { top: 26px; right: 26px; text-align: right; } .hud-block.bl { bottom: 26px; left: 26px; } .hud-block.br { bottom: 26px; right: 26px; text-align: right; } .hud-row { display: flex; gap: 10px; align-items: baseline; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .hud-block.tr .hud-row, .hud-block.br .hud-row { justify-content: flex-end; } .hud-row .k { color: var(--dim); } .hud-row .v { color: var(--ink-2); font-variant-numeric: tabular-nums; transition: color 0.3s; } .stage.reveal .hud-row .v { color: var(--ink); } /* en la revelación, la lectura de volumen se enciende con el acento */ .stage.reveal #hud-vol { color: var(--accent); } /* el nombre del shape ya lo canta el HUD (arriba izq.): el badge se queda solo como anuncio para lectores de pantalla, sin tapar la tabla */ .stage-badge { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* el relevo se marca con un parpadeo de instrumento en la lectura del shape */ .hud-row .v.flash { animation: hudFlash 0.42s steps(2, end) 2; } @keyframes hudFlash { 0%, 49% { opacity: 0.25; } 50%, 100% { opacity: 1; } } /* ---------- Panel ---------- */ /* shell: marco de hairlines (igual que el expositor) + foto de portada */ .panel { position: relative; overflow: hidden; min-height: 0; } /* mismo marco que el expositor, con sus marcas de registro a media altura */ .panel-frame { position: absolute; inset: 14px; z-index: 2; border: 1px solid var(--line-soft); pointer-events: none; } .panel-frame::before, .panel-frame::after { content: ''; position: absolute; top: 50%; width: 9px; height: 1px; background: var(--line); } .panel-frame::before { left: -1px; } .panel-frame::after { right: -1px; } /* HUD del panel: mismas lecturas de esquina que el expositor. Las de ARRIBA están siempre (portada y wizard: paso + etiqueta + progreso); las de ABAJO solo en la portada, porque en el wizard ahí abajo cae la nav. */ .panel-hud { position: absolute; inset: 0; z-index: 2; pointer-events: none; font-family: var(--mono); } .panel-hud .bl, .panel-hud .br { opacity: 0; transition: opacity 0.7s ease; } .app.with-photo .panel-hud .bl, .app.with-photo .panel-hud .br { opacity: 1; } /* las lecturas del panel van un tono más claras que las del expositor: aquí son cabecera de pantalla, no telemetría de fondo */ .panel-hud .hud-row .k { color: #9ba1a3; } .panel-hud .hud-row .v { color: var(--ink); } /* selector de idioma: lo único clicable del HUD (el resto no recibe eventos) */ .panel-hud .lang { pointer-events: auto; gap: 5px; align-items: baseline; } /* sirve para