/* ═══════════════════════════════════════════════════════════════════════════ ds2.css — LA UNICA hoja de prepstellar.com (spec 1.4). Sustituye a landing/styles.css y a web/static/web.css: la landing y las ~270 paginas del builder apuntan aqui, en absoluto (`/ds2.css`). Spec: docs/superpowers/specs/2026-09-07-web-design-system-evolucion-design.md Mockup aprobado: docs/superpowers/specs/assets/2026-09-07-web-tarjetas-mockup.html REGLAS DURAS DE ESTA HOJA · Los literales #rrggbb viven SOLO en el bloque de tokens (§2), que es uno solo: el sitio tiene UNA piel, la oscura. Todo lo demas consume var(--token) o color-mix() sobre tokens. · Cero sombras (ni una sola): la jerarquia la hacen el filete `--cline` y el propio bloque de color. Hover = borde en `--block`, no elevacion. · Cero tipografia con remates y cero oro: Observatory queda derogado. La unica voz de titular es Archivo; la mono es Spline Sans Mono. · `.prose` es el UNICO ambito bajo el que se estiliza HTML de contenido suelto. Fuera de el, un selector de elemento solo aparece acotado por una clase de componente (`.block h1`, `.tbl th`), nunca desnudo, y las unicas reglas globales son las del reset (`*`, `html`, `body`, `a`, `img`, `button`). La clase generica de pagina de Observatory ya no existe. INDICE 1 · Fuentes 8 · Baraja 2 · Tokens 9 · Prosa y tablas 3 · Gamas 10 · Checkpoint 4 · Reset y base 11 · Corte hacia la app 5 · Utilidades 12 · Botones 6 · Chrome 13 · Barra inferior (navegacion + CTA) 7 · Bloque y rail 14 · Ficha, hub, practica 16 · Landing 17 · Pie 18 · Impresion y movimiento reducido (§15, el player del test, murio con test-player.js: la practica es ahora una baraja servida en HTML, §14.) ═══════════════════════════════════════════════════════════════════════════ */ /* ── 1 · Fuentes auto-hospedadas (variables, OFL) ─────────────────────────── */ /* Servidas desde la raiz del dominio: /fonts/*.woff (web/static/fonts/). Son variables: Archivo `wght` 100-900 y `wdth` 62-125; Spline Sans Mono `wght` 300-700. `swap` para no bloquear el primer pintado. */ @font-face { font-family: 'Archivo'; src: url("/fonts/archivo.woff") format("woff"); font-weight: 100 900; font-stretch: 62% 125%; font-style: normal; font-display: swap; } @font-face { font-family: 'Spline Sans Mono'; src: url("/fonts/spline-sans-mono.woff") format("woff"); font-weight: 300 700; font-style: normal; font-display: swap; } /* ── 2 · Tokens · UNA sola piel (Grafito) ─────────────────────────────────── */ /* ⚠️ EL UNICO BLOQUE CON HEX DE TODO EL DOMINIO. Fuera de aqui, cero literales. Decision de Oriol (2026-09-07): prepstellar.com es oscuro y punto. Una sola piel — ni base clara, ni interruptor, ni preferencia del sistema que valga: el cielo es la marca, y una marca no tiene dos caras. */ :root { color-scheme: dark; --paper: #15181C; --card: #1E232A; --cline: #2C333C; --ink: #EDF1F5; --muted: #9AA6B2; --on-block: #12151A; --premium: #EDF1F5; --on-premium: #15181A; --success: #5FBE73; --danger: #F0725F; /* Las 8 gamas de la spec 1.1. El bloque es del PRODUCTO, no del usuario. */ --g-azul: #4A85B9; --g-indigo: #6F7AC7; --g-ambar: #9B7B3C; --g-teja: #B96C4B; --g-turquesa: #3A8B94; --g-verde: #38906F; --g-oliva: #5A8D37; --g-ciruela: #996CC6; /* Derivados. Viven en el MISMO bloque a proposito: asi el gate de la hoja («hex solo bajo un selector que nombre :root») tiene un unico sitio que vigilar, y no hay forma de colar un color suelto en otra parte. */ /* Azul de marca por defecto; el builder pone [data-block] en . */ --block: var(--g-azul); --block-soft: color-mix(in srgb, var(--g-azul) 12%, var(--card)); /* DS2: dentro de una tarjeta el filete `cline` desaparece. Tinta al 22 %. */ --cline-strong: color-mix(in srgb, var(--ink) 22%, var(--card)); /* El texto sobre verde/rojo es el mismo par que sobre el bloque: tinta oscura sobre tono claro. */ --on-success: var(--on-block); --on-danger: var(--on-block); --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'Spline Sans Mono', ui-monospace, Menlo, monospace; --step--1: clamp(.8rem, .78rem + .1vw, .84rem); --step-0: clamp(1rem, .97rem + .15vw, 1.075rem); --step-1: clamp(1.2rem, 1.12rem + .4vw, 1.45rem); --step-2: clamp(1.5rem, 1.34rem + .8vw, 2.05rem); --step-3: clamp(1.9rem, 1.55rem + 1.7vw, 2.9rem); --step-4: clamp(2.4rem, 1.7rem + 3.4vw, 4.4rem); --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --r-pill: 999px; --r-field: 12px; --r-card: 18px; --r-group: 26px; --measure: 68ch; --card-pad: clamp(16px, 3vw, 24px); --gutter: clamp(1.25rem, 4vw, 2.5rem); --col: 1120px; --dur: 220ms; --ease: cubic-bezier(.22, 1, .36, 1); /* Medidos por deck.js; estos valores son el fallback sin JS. El bloque de la leccion incluye ahora el reproductor, de ahi los ~250 px. */ --block-h: 250px; --bar-h: 68px; } /* ── 3 · Las 8 gamas ──────────────────────────────────────────────────────── */ /* Contexto de pagina (``) o familia fija de una puerta del hub (`.fam-indigo`). `--block-soft` se redeclara en cada regla porque una custom property resuelve su var() en el elemento que la DECLARA, no donde se usa: sin esto las puertas heredaban la gama global. */ [data-block="azul"], .fam-azul { --block: var(--g-azul); --block-soft: color-mix(in srgb, var(--g-azul) 12%, var(--card)); } [data-block="indigo"], .fam-indigo { --block: var(--g-indigo); --block-soft: color-mix(in srgb, var(--g-indigo) 12%, var(--card)); } [data-block="ambar"], .fam-ambar { --block: var(--g-ambar); --block-soft: color-mix(in srgb, var(--g-ambar) 12%, var(--card)); } [data-block="teja"], .fam-teja { --block: var(--g-teja); --block-soft: color-mix(in srgb, var(--g-teja) 12%, var(--card)); } [data-block="turquesa"], .fam-turquesa { --block: var(--g-turquesa); --block-soft: color-mix(in srgb, var(--g-turquesa) 12%, var(--card)); } [data-block="verde"], .fam-verde { --block: var(--g-verde); --block-soft: color-mix(in srgb, var(--g-verde) 12%, var(--card)); } [data-block="oliva"], .fam-oliva { --block: var(--g-oliva); --block-soft: color-mix(in srgb, var(--g-oliva) 12%, var(--card)); } [data-block="ciruela"], .fam-ciruela { --block: var(--g-ciruela); --block-soft: color-mix(in srgb, var(--g-ciruela) 12%, var(--card)); } /* Transicion entre documentos: las ~270 paginas navegan como una app. Donde no hay soporte, no pasa nada. */ @view-transition { navigation: auto; } /* Un solo `.block` por documento (asi lo emite el builder): al pasar de ficha a leccion el rectangulo se desliza en vez de parpadear. Dos elementos con el mismo `view-transition-name` en una pagina abortarian la transicion. */ .block { view-transition-name: pageblock; } /* ── 4 · Reset y base ─────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); } body { font-family: var(--sans); font-size: var(--step-0); line-height: 1.62; font-variant-numeric: tabular-nums; color: var(--ink); /* El papel lo pinta `html`: `body` va transparente para que el cielo de puntos (#sky, z-index -1) quede DETRAS de todo el contenido y aun asi se vea, porque el fondo que lo taparia esta un nivel mas arriba. */ background: transparent; -webkit-font-smoothing: antialiased; min-height: 100dvh; } h1, h2, h3 { line-height: 1.08; letter-spacing: -.03em; font-weight: 700; font-stretch: 108%; text-wrap: balance; } h1 { font-size: var(--step-3); } h2 { font-size: var(--step-2); } h3 { font-size: var(--step-1); letter-spacing: -.02em; } p { text-wrap: pretty; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; } button { font: inherit; } /* Enlace: tinta con subrayado de 2 px en el bloque (spec 1.1). Evita un token `--link` por gama: tinta sobre papel es par obligatorio, asi que AA esta garantizado en las 16 combinaciones. */ .prose a, .lnk { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--block); } .prose a:hover, .lnk:hover { text-decoration-color: var(--ink); } ::selection { background: var(--block-soft); color: var(--ink); } :where(a, button, summary, input, select, label, [tabindex]):focus-visible { outline: 2px solid var(--block); outline-offset: 3px; border-radius: 2px; } /* ── 5 · Utilidades ───────────────────────────────────────────────────────── */ .wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 780px; } .prose { max-width: var(--measure); } .vh { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .center { text-align: center; } .maxcard { max-width: 760px; } /* Lo que solo tiene sentido con JS. Se cuelga de la AUSENCIA de `js` (la pone site.js al arrancar) y no de un `nojs` en el : ese script se retiro al quedarse el sitio con una sola piel. */ html:not(.js) .jsonly { display: none; } /* Salto al contenido: primer tabulador de cada pagina. */ .skip { position: absolute; inset-inline-start: -9999px; z-index: 100; padding: var(--s3) var(--s5); background: var(--card); color: var(--ink); border: 1px solid var(--block); border-radius: var(--r-card); text-decoration: none; font-size: var(--step--1); font-weight: 600; } .skip:focus { inset-inline-start: var(--gutter); inset-block-start: var(--s3); } .eyebrow { font-family: var(--mono); font-size: .69rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--muted); } .mono { font-family: var(--mono); font-size: var(--step--1); } .num { font-family: var(--mono); font-size: var(--step--1); color: var(--muted); white-space: nowrap; } .lead { font-size: var(--step-1); line-height: 1.45; max-width: 58ch; letter-spacing: -.012em; } /* Ritmo vertical: pasos de la escala, nunca un pixel suelto. */ .mt3 { margin-block-start: var(--s3); } .mt4 { margin-block-start: var(--s4); } .mt5 { margin-block-start: var(--s5); } .mt6 { margin-block-start: var(--s6); } .mt7 { margin-block-start: var(--s7); } /* ── 6 · Chrome: cabecera, menu de movil y el cielo de puntos ────────────── */ .hdr { position: relative; z-index: 60; background: var(--paper); border-block-end: 1px solid var(--cline); } /* El cielo: una reticula de puntos tenues a pantalla completa, detras de TODO (z-index negativo sobre el papel de `html`, con `body` transparente). Las tarjetas y los bloques son opacos, asi que solo se ve en el papel libre. Se enciende alrededor del puntero (site.js); sin puntero fino o con `prefers-reduced-motion` queda quieto, como textura. Nunca intercepta un click ni participa del scroll. */ #sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; inline-size: 100%; block-size: 100%; } .hdr .inner { display: flex; align-items: center; gap: var(--s4); padding-block: var(--s2); position: relative; } .brand { display: flex; align-items: center; gap: var(--s2); text-decoration: none; color: var(--ink); } .brand .mark { inline-size: 24px; block-size: 26px; color: var(--block); flex: none; } .wordmark { font-family: var(--sans); font-weight: 800; font-stretch: 108%; letter-spacing: -.035em; font-size: 1.16rem; line-height: 1; } /* Solo los enlaces de texto: si esto fuese `.hdr nav a`, ganaria por especificidad al color de `.btn-pro` y el boton de la app saldria en muted. */ .hdr nav { display: flex; align-items: center; gap: var(--s5); margin-inline-start: auto; } .hdr nav .nlink { font-size: var(--step--1); color: var(--muted); text-decoration: none; padding-block: var(--s2); } .hdr nav .nlink:hover, .hdr nav .nlink[aria-current] { color: var(--ink); } .hdr nav .nlink[aria-current] { background-image: linear-gradient(var(--block), var(--block)); background-repeat: no-repeat; background-position: 0 100%; background-size: 100% 2px; } /* Bloque final: "Get the app". NO se pliega en el menu. */ .hdr-end { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; } .hdr nav + .hdr-end { margin-inline-start: 0; } /* Menu de movil SIN JS. El