/* ========================================================================== escapevelocity.neocities.org Retro por fuera, moderno por dentro: piel de fansite del 98 arriba, grid/flex y accesibilidad abajo. Las animaciones son CSS y todas mueren con prefers-reduced-motion. El plegado del registro de naves y su comparador son las dos únicas piezas con JavaScript, y las dos son mejora progresiva: el contenido completo viaja en el HTML. PALETA. Los colores siguen saliendo del que declaraba el propio sitio de Ambrosia (TEXT #ffffff, BGCOLOR #000000, LINK #ffff19, ALINK #00ff00) más el verde de los títulos, #00FF00. El VLINK #999999 que también declaraba no se usa: un link visitado se ve igual que uno sin visitar. Era una convención de la época, pero acá deja medio archivo teñido de gris según por dónde anduvo cada uno, y rompe la estética más de lo que ayuda. Lo que cambió es el reparto: el fósforo dejó de pintar bordes, fondos y encabezados de tabla y quedó reservado para donde significa algo — la marca, el h1, la marquesina, el contador de visitas. La estructura la sostiene un gris acero azulado y la jerarquía la marcan tres voces distintas: h1 verde fósforo · h2 cian · h3 tinta blanca · links ámbar El ámbar es exclusivo de lo cliqueable: si algo es ámbar, se puede tocar. TIPOGRAFÍA. Los tamaños salen de la escala de --fs-*, no a ojo. El cuerpo arranca en 16px y el texto usa todo el ancho de la consola. ========================================================================== */ :root { /* --- Superficies. Negro azulado, no negro verdoso: el tinte verde de los fondos era la mitad del "demasiado verde". --- */ --void: #04060a; /* el negro del espacio, con una pizca de azul */ --panel: #0b0e13; /* fondo de las consolas */ --panel-2: #121820; /* cintas: nav y pie */ --sunk: #070a0e; /* cajas hundidas dentro de un panel */ --ink: #e8edf2; /* blanco roto: el #fff puro sobre negro vibra */ --dim: #93a1b0; /* gris frío para notas y stats secundarios */ /* --- Estructura. Todos los bordes y reglas del sitio. --- */ --rule: #24313d; --rule-hi: #35485c; /* --- Acentos. --- */ --green: #00ff00; /* fósforo: marca, h1 y poco más */ --green-d: #00ba00; --green-dd: #004d00; --amber: #ffff19; /* los links del sitio original */ --cyan: #45d0f5; /* la segunda voz: h2, encabezados de tabla, nav */ --cyan-d: #1c7f9e; --red: #ff5555; /* Colores de gobierno. Se usan en el mapa y en las etiquetas de facción. */ --confed: #4d8cff; --rebel: #ff5555; --indie: #cccccc; --pirate: #ff9d00; --cydonian: #cc66ff; --lethean: #00d9b8; --empty: #4a5468; /* --- Escala tipográfica. Seis pasos, y nada fuera de estos seis. --- */ --fs-xs: 0.8125rem; /* 13px — pies de página, notas al pie, tablas */ --fs-sm: 0.875rem; /* 14px — UI, leyendas, texto de apoyo */ --fs-base: 1rem; /* 16px — cuerpo */ --fs-md: 1.125rem; /* 18px — h3, entradilla */ --fs-lg: clamp(1.2rem, 2.6vw, 1.45rem); /* h2 */ --fs-xl: clamp(1.55rem, 4.5vw, 2.15rem); /* h1 */ --lh-tight: 1.2; --lh-body: 1.65; /* La consola arrancó en 1000px y no daba: el registro de naves mide 1007px de tabla y se le escapaban 71px por el borde derecho. Vale para todo el sitio, no solo para esa página — las tablas de planetas y sistemas también respiran mejor. */ --wrap: 1180px; --font-body: Verdana, Geneva, "DejaVu Sans", Tahoma, sans-serif; --font-head: "Arial Black", Impact, "Helvetica Neue", system-ui, sans-serif; /* Courier New a 13px es ilegible. Pedimos primero los monoespaciados del sistema, que se leen mucho mejor y siguen sonando a terminal. */ --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "DejaVu Sans Mono", "Courier New", Courier, monospace; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* Estas dos se heredan, así que valen para todo lo que scrollee en el sitio. */ scrollbar-width: thin; scrollbar-color: var(--rule-hi) var(--panel); } /* Y el equivalente para los WebKit que no entienden las de arriba. */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--panel); } ::-webkit-scrollbar-thumb { background: var(--rule-hi); border: 2px solid var(--panel); } ::-webkit-scrollbar-thumb:hover { background: var(--cyan-d); } ::-webkit-scrollbar-corner { background: var(--panel); } body { margin: 0; padding: 1rem 0.7rem 2.5rem; font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink); background-color: var(--void); background-image: url("/assets/img/chrome/starfield.svg"); } /* La "consola" central. Borde de acero con el resplandor de fósforo apenas insinuado en el halo: el CRT se sigue notando, pero ya no pinta el marco. */ .wrap { max-width: var(--wrap); margin: 0 auto; background: var(--panel); border: 2px solid var(--rule-hi); box-shadow: 0 0 0 1px #000, 0 0 22px rgba(0, 255, 0, 0.10), 0 8px 30px rgba(0,0,0,0.8); } .wrap > * { padding-left: clamp(0.8rem, 3vw, 1.8rem); padding-right: clamp(0.8rem, 3vw, 1.8rem); } /* --- Tipografía ---------------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-head); line-height: var(--lh-tight); } h1 { font-size: var(--fs-xl); text-transform: uppercase; letter-spacing: 0.03em; color: var(--green); } h2 { font-size: var(--fs-lg); text-transform: uppercase; color: var(--cyan); border-bottom: 2px solid var(--rule); padding-bottom: 0.25rem; margin-top: 2.4rem; } h3 { font-size: var(--fs-md); color: var(--ink); margin-top: 1.7rem; } h4 { font-size: var(--fs-sm); color: var(--cyan); text-transform: uppercase; letter-spacing: 0.05em; } p { margin: 0.8rem 0; } /* Ninguna cadena larga sin espacios —una URL, el fragmento de HTML que se copia en /links/— puede empujar la página a lo ancho. A 420px eran 14px de desborde. */ p, li, dd, figcaption, blockquote, .mono { overflow-wrap: break-word; } small, .small { font-size: var(--fs-sm); color: var(--dim); } /* ANCHO DEL CONTENIDO. El texto usa todo el ancho usable, de punta a punta, y los márgenes los pone el relleno del contenedor. No hay tope de línea. Hubo uno (--measure) y se sacó a pedido. Queda dicho para que no vuelva a aparecer por las buenas: el argumento a favor era la longitud de línea, y quedó zanjado. Si algo tiene que ser más angosto que su caja, se le pone un ancho a esa caja, no un tope al texto que lleva adentro. */ /* No hay estilo para :visited en todo el sitio, a propósito. Alcanza con esta declaración: una regla de autor le gana a la del navegador por origen, así que el violeta por defecto no aparece. */ a { color: var(--amber); text-decoration: underline; } /* Enlaces de segundo nivel: los que viven adentro de una ficha y apuntan a otra entrada del archivo —un sistema vecino, una nave, un outfit, una misión—. En ámbar competían con los nombres de la lista principal y la página se volvía un campo de amarillo. Van en tinta con un subrayado tenue, y recién al pasar por encima usan el mismo ámbar que todo lo demás: quietos son discretos, activos hablan el idioma del sitio. */ a.ref { color: #cfe0ee; text-decoration: underline; text-decoration-color: var(--rule-hi); text-underline-offset: 0.15em; } /* Todo lo cliqueable se invierte en ámbar al pasar por encima. Antes era un golpe de verde por página; ahora el hover es del mismo color que el link. */ a:hover, a:focus { color: #000; background: var(--amber); text-decoration: none; } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } code, .mono { font-family: var(--font-mono); font-size: 0.95em; } /* --- Encabezado ---------------------------------------------------------- */ .site-header { text-align: center; padding-top: 1.2rem !important; padding-bottom: 0.7rem !important; border-bottom: 2px solid var(--rule); background: radial-gradient(ellipse at 50% 120%, rgba(0,255,0,0.10), transparent 62%), var(--panel); } /* El logo es el recorte de la pantalla de título del juego. Las propiedades de texto no sobran: son para el alt, que es lo que se ve si la imagen no carga, y lo dejan con la pinta del rótulo de neón que el sitio tenía antes. */ .site-header .brand { display: block; max-width: min(100%, 34rem); margin: 0 auto; font-family: var(--font-head); font-size: clamp(1.8rem, 7vw, 3.2rem); text-transform: uppercase; letter-spacing: 0.08em; color: var(--green); text-shadow: 0 0 2px #003300, 2px 2px 0 #004d00, 4px 4px 0 #002200, 0 0 22px rgba(0,255,0,0.55); text-decoration: none; } /* El logo va calado, así que flota sobre el fondo del encabezado en vez de traer su propia placa. La sombra le da el poco de peso que perdió al perder el fondo. */ .site-header .brand img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75)); } .site-header .brand:hover, .site-header .brand:focus { background: none; color: #7dff7d; } .site-header .brand:hover img, .site-header .brand:focus img { filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75)) brightness(1.12); } .site-header .tagline { margin: 0.4rem 0 0; font-size: var(--fs-sm); color: var(--dim); font-style: italic; } /* Cinta de navegación con botones biselados. */ .topbar { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: center; background: var(--panel-2); border-bottom: 2px solid var(--rule); padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; } .navbtn { font-family: var(--font-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cyan); background: #18212b; border: 2px outset #2f4152; padding: 0.22rem 0.6rem; text-decoration: none; } .navbtn:hover, .navbtn:focus { background: var(--cyan); color: #000; border-style: inset; } .navbtn[aria-current="page"] { background: var(--rule-hi); color: var(--ink); border-style: inset; } /* Marquesina: reimplementado en CSS, que el tag real está muerto. Se queda en verde a propósito: es una lectura de consola, no cromo. */ .marquee { overflow: hidden; white-space: nowrap; background: #000; color: var(--green); font-family: var(--font-mono); font-size: var(--fs-sm); border-bottom: 1px solid var(--rule); padding: 0.3rem 0 !important; } .marquee span { display: inline-block; padding-left: 100%; animation: scroll-left 26s linear infinite; } @keyframes scroll-left { to { transform: translateX(-100%); } } /* --- Piezas de contenido ------------------------------------------------- */ main { padding-top: 0.6rem; padding-bottom: 1.5rem; } .divider { height: 14px; border: 0; padding: 0 !important; margin: 1.6rem 0; background: url("/assets/img/chrome/divider.svg") repeat-x center; } /* Caja de consola: el contenedor genérico de secciones destacadas. */ .panel { border: 1px solid var(--rule); background: var(--sunk); padding: 0.9rem 1rem; margin: 1.4rem 0; } .panel > :first-child { margin-top: 0; } .panel > :last-child { margin-bottom: 0; } /* Barra de título de ventana, como la de un sistema operativo del 95. */ .panel-title { font-family: var(--font-head); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--cyan); background: #1a2530; border-bottom: 1px solid var(--rule); margin: -0.9rem -1rem 0.9rem; padding: 0.3rem 1rem; } /* Aviso de obra, con las franjas de peligro de rigor. */ .under-construction { text-align: center; font-family: var(--font-head); text-transform: uppercase; font-size: var(--fs-sm); color: #fff; text-shadow: 1px 1px 2px #000; border: 2px solid #000; padding: 0.55rem !important; margin: 1.2rem 0; background: repeating-linear-gradient(45deg, #d9a400 0 14px, #1a1a1a 14px 28px); } /* Grilla de tarjetas para índices. */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; margin: 1.4rem 0; list-style: none; padding: 0; } .card { border: 1px solid var(--rule); background: var(--sunk); padding: 0.8rem 0.9rem; } .card h3 { margin: 0 0 0.35rem; font-size: var(--fs-base); color: var(--cyan); } .card p { margin: 0; font-size: var(--fs-sm); color: var(--dim); } .card a { text-decoration: none; } .card a:hover, .card a:focus { background: none; color: var(--amber); text-decoration: underline; } /* --- Tablas de datos ----------------------------------------------------- */ /* En móvil las tablas anchas scrollean dentro de su caja, nunca la página. */ .table-scroll { overflow-x: auto; margin: 1.2rem 0; border: 1px solid var(--rule); } table.data { border-collapse: collapse; width: 100%; font-size: var(--fs-xs); font-family: var(--font-mono); background: #05070a; } table.data caption { caption-side: top; text-align: left; font-family: var(--font-head); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--cyan); padding: 0.5rem 0.6rem; background: #10161d; border-bottom: 1px solid var(--rule); } /* Apretado a propósito: la tabla de naves tiene catorce columnas y la gracia es que entren todas juntas en pantalla sin tener que scrollear al costado. El monoespaciado del sistema entra en el mismo ancho que Courier y se lee mejor, así que el aire extra se fue a los padding. */ table.data th, table.data td { padding: 0.32rem 0.45rem; text-align: right; white-space: nowrap; } table.data th[scope="col"] { position: sticky; top: 0; z-index: 3; background: #1a2530; color: var(--cyan); text-align: right; font-weight: bold; /* El borde va como sombra interior y no como border. Con border-collapse los bordes le pertenecen a la tabla, no a la celda: la celda se despega y viaja con el scroll, el borde se queda atrás, y por esa rendija se ve pasar el contenido. Una sombra se pinta con el elemento y lo acompaña. */ box-shadow: inset 0 -2px 0 var(--rule-hi); } table.data th[scope="row"], table.data td:first-child { text-align: left; } table.data th[scope="row"] { color: var(--ink); font-weight: normal; } table.data tbody tr:nth-child(even) { background: #0a0e13; } table.data tbody tr:hover { background: #161f28; } table.data td.num { font-variant-numeric: tabular-nums; } /* --- Ficha de nave ------------------------------------------------------- */ .statblock { border: 1px solid var(--rule); background: var(--sunk); margin: 1.8rem 0; } .statblock > header { display: flex; align-items: center; gap: 0.8rem; background: #10161d; border-bottom: 1px solid var(--rule); padding: 0.55rem 0.8rem; } .statblock > header h3 { margin: 0; color: var(--cyan); font-size: var(--fs-md); } .statblock > header .subtitle { color: var(--dim); font-size: var(--fs-xs); font-style: italic; display: block; font-family: var(--font-body); font-weight: normal; } /* Los sprites son de 32×32 del 98: se escalan sin interpolar o se ven papilla. */ .statblock .sprite { width: 64px; height: 64px; image-rendering: pixelated; flex: none; } .statblock .body { padding: 0.9rem; } .statblock .desc { margin-top: 0; color: var(--ink); font-size: var(--fs-sm); } .statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 1.2rem; } .statgrid dl { margin: 0; font-family: var(--font-mono); font-size: var(--fs-sm); } .statgrid div { display: flex; justify-content: space-between; gap: 0.6rem; border-bottom: 1px dotted var(--rule); padding: 0.15rem 0; } .statgrid dt { color: var(--dim); } .statgrid dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; } .loadout { margin: 1rem 0 0; padding-left: 1.1rem; font-size: var(--fs-sm); color: var(--cyan); } .loadout li { margin: 0.15rem 0; } /* Nota al pie para los valores donde las fuentes se contradicen. */ .footnote { font-size: var(--fs-xs); color: var(--dim); border-left: 2px solid var(--rule-hi); padding-left: 0.7rem; margin-top: 0.9rem; } /* --- Etiquetas de facción ------------------------------------------------ */ .tag { display: inline-block; font-family: var(--font-mono); font-size: var(--fs-xs); padding: 0 0.35rem; border: 1px solid currentColor; white-space: nowrap; } .tag--confederation { color: var(--confed); } .tag--rebellion { color: var(--rebel); } .tag--independent { color: var(--indie); } .tag--pirates { color: var(--pirate); } .tag--cydonian { color: var(--cydonian); } .tag--lethean { color: var(--lethean); } .tag--uninhabited { color: var(--empty); } /* --- Mapa de la galaxia -------------------------------------------------- */ .galaxy { border: 1px solid var(--rule); background: #000; margin: 1.2rem 0; } .galaxy svg { display: block; width: 100%; height: auto; background: #000; } .galaxy .link { stroke: #2b4a70; stroke-width: 2.5; } .galaxy .node circle { stroke: #000; stroke-width: 2; } /* Ojo: el font-size está en unidades del viewBox, no en píxeles de pantalla. El mapa mide ~2450 unidades de ancho y se dibuja a ~950px, así que hay que pedir unas 26 unidades para que el texto se lea a unos 10px. */ .galaxy .node text { font-family: var(--font-mono); font-size: 26px; fill: #aeb9cc; } /* Cada nodo es un link, así que resalta en ámbar como todo lo cliqueable. */ .galaxy .node:hover circle, .galaxy .node:focus circle { stroke: var(--amber); stroke-width: 5; } .galaxy .node:hover text, .galaxy .node:focus text { fill: var(--amber); } .galaxy .node.has-planets text { fill: var(--ink); } .legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; list-style: none; padding: 0.7rem 0.8rem; margin: 0; border-top: 1px solid var(--rule); font-size: var(--fs-sm); font-family: var(--font-mono); } .legend li { display: flex; align-items: center; gap: 0.35rem; } .legend .swatch { width: 11px; height: 11px; border: 1px solid #000; display: inline-block; } /* --- Índice de página ---------------------------------------------------- */ .toc { border: 1px solid var(--rule); background: var(--sunk); padding: 0.8rem 0.9rem; margin: 1.4rem 0; } .toc h2 { margin: 0 0 0.5rem; font-size: var(--fs-xs); border: 0; padding: 0; letter-spacing: 0.08em; } .toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; font-size: var(--fs-sm); font-family: var(--font-mono); } /* --- Pie ----------------------------------------------------------------- */ .site-footer { border-top: 2px solid var(--rule); background: var(--panel-2); text-align: center; padding-top: 1rem !important; padding-bottom: 1.2rem !important; font-size: var(--fs-sm); color: var(--dim); } .buttons88 { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0.7rem 0; } .buttons88 img { width: 88px; height: 31px; display: block; } .webring { font-family: var(--font-mono); color: var(--green-d); margin: 0.8rem 0 0.3rem; } /* Contador de visitas de mentira, con sus dígitos de LED. Verde sin culpa: un contador de los 90 no era de ningún otro color. */ .counter { display: inline-flex; gap: 2px; margin: 0.5rem 0; } .counter span { font-family: var(--font-mono); font-size: var(--fs-base); background: #000; color: var(--green); border: 1px solid var(--green-dd); padding: 0 0.25rem; } .blink { animation: blink 1.2s steps(1) infinite; } @keyframes blink { 50% { opacity: 0.25; } } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 620px) { body { padding: 0.35rem 0.25rem 2rem; } .statblock > header { flex-wrap: wrap; } .statgrid { grid-template-columns: 1fr; } table.data th, table.data td { padding: 0.28rem 0.35rem; } /* En una columna, veintisiete naves empujan la tabla fuera de la pantalla. El picker se queda con su propio scroll y la tabla sigue a la vista. */ .picker-grid { max-height: 55vh; overflow-y: auto; } } /* Teléfonos angostos (360-420px). No se pudo verificar de primera mano — Chrome headless clampea el ancho de ventana y no baja de ~420px — así que acá vamos a la defensiva: el título puede partirse en dos líneas y nada usa un tamaño que dependa de vw. */ @media (max-width: 420px) { .site-header .brand { font-size: 1.5rem; letter-spacing: 0.04em; overflow-wrap: break-word; } .site-header { padding-top: 0.8rem !important; } .wrap > * { padding-left: 0.5rem; padding-right: 0.5rem; } .navbtn { font-size: 0.75rem; padding: 0.2rem 0.4rem; } .toc ul { gap: 0.2rem 0.6rem; } h1 { font-size: 1.4rem; } } @media (prefers-reduced-motion: reduce) { .marquee span { animation: none; padding-left: 0; } .blink { animation: none; } * { scroll-behavior: auto !important; } } /* --- Texto in-game -------------------------------------------------------- */ /* Todo lo que sale entre estas comillas es literal del juego o del sitio del 98. Que se distinga de nuestra prosa es una cuestión de honestidad, no de estilo: por eso conserva la barra de fósforo. */ blockquote.ingame { margin: 1rem 0; padding: 0.6rem 0.9rem; border-left: 3px solid var(--green-dd); background: #05080a; color: #cfe0d6; font-size: var(--fs-sm); font-style: italic; } blockquote.ingame p { margin: 0.4rem 0; } /* Las celdas de listas largas (planetas de un sistema, saltos) sí envuelven. */ table.data td.wrap-cell { white-space: normal; min-width: 12rem; } abbr { text-decoration: none; border-bottom: 1px dotted var(--dim); cursor: help; } /* --- Páginas restauradas del sitio original ------------------------------- */ /* Aviso de que lo de abajo no es nuestro. Va arriba de todo, sin excusas. */ .archive-banner { border: 1px solid var(--amber); background: #171400; padding: 0.7rem 0.9rem; margin: 1.2rem 0 1.6rem; } .archive-banner p { margin: 0.3rem 0; } /* El HTML de 1996 entra tal cual. Lo encerramos para que sus y sus tablas de maquetación no se escapen al resto del sitio, y le devolvemos el fondo negro sobre el que fue diseñado — incluido el verde, que ahí sí es de época. */ .archived { border: 1px solid var(--rule); background: #000; padding: 0.9rem 1rem; overflow-x: auto; } .archived table { max-width: 100%; } .archived img { max-width: 100%; height: auto; image-rendering: pixelated; } .archived a { color: var(--amber); } .archived p, .archived blockquote { } .archived blockquote { margin-left: 0; padding-left: 1rem; border-left: 2px solid var(--green-dd); } /* Listado de contradicciones entre fuentes, en /about/. */ dl.conflicts { margin: 1.2rem 0; } dl.conflicts dt { font-family: var(--font-mono); color: var(--cyan); font-size: var(--fs-sm); margin-top: 1rem; } dl.conflicts dd { margin: 0.25rem 0 0; padding-left: 0.9rem; border-left: 2px solid var(--rule); font-size: var(--fs-sm); } /* Los iconos de outfit y arma que rescatamos del sitio original son JPEG chicos de 1998; se escalan sin interpolar, igual que los sprites de nave. */ .statblock .icon { width: 48px; height: 48px; flex: none; image-rendering: pixelated; border: 1px solid var(--rule); } .tag--unexplored { color: #8fa3b8; } .tag--militia { color: #b8a24d; } /* Las celdas de prosa se leen alineadas a la izquierda; el resto de la tabla es numérica y va a la derecha. */ table.data td.wrap-cell { text-align: left; } /* --- Registro de naves ---------------------------------------------------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Las fichas se sirven abiertas y las cierra la clase `js` que el le pone al . El orden importa: si esto dependiera del script diferido, la página parpadearía mostrando veintisiete fichas antes de plegarlas. Sin JS quedan todas a la vista, que es la única garantía que importa: no se pierde un dato. */ html.js tr.entry-detail { display: none; } html.js tr.entry-detail.open { display: table-row; } /* `display` le gana al atributo hidden: hay que decirlo explícito. */ html.js tr.entry-detail.open[hidden] { display: none; } /* Sin JS no hay comparador, así que sus controles no se muestran: un checkbox que no hace nada es peor que ningún checkbox. */ html.no-js .registry .col-pick { display: none; } html.no-js .compare-bar { display: none; } table.registry tbody tr:nth-child(even) { background: none; } table.registry tr.entry { border-top: 1px solid #0f1620; } table.registry tr.entry:hover { background: #131b24; } table.registry tr.entry.is-open { background: #16202b; } table.registry .col-pick { width: 2.2rem; text-align: center; } table.registry input.pick { accent-color: var(--cyan); cursor: pointer; } table.registry input.pick:disabled { cursor: not-allowed; opacity: 0.4; } /* Encabezado de clase: una fila que abarca la tabla entera y se queda con el texto que antes era el

de cada sección. / table.registry .group-head th { text-align: left; white-space: normal; background: #131c26; box-shadow: inset 0 2px 0 var(--rule-hi), inset 0 -2px 0 var(--rule-hi); font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cyan); font-size: var(--fs-sm); padding: 0.55rem 0.6rem; } table.registry .group-blurb { display: block; margin-top: 0.2rem; font-family: var(--font-body); font-size: var(--fs-xs); font-weight: normal; text-transform: none; letter-spacing: 0; color: var(--dim); } / La columna de la nave queda fija: con quince columnas, perder de vista de quién es la fila que estás leyendo arruina la tabla. / / Acotado al cuerpo a propósito: sin el `tbody` esta regla le gana por especificidad al z-index del encabezado y le deja la celda "Ship" por debajo de todo lo demás, que era justo lo que dejaba pasar filas por encima. / table.registry tbody .col-ship { position: sticky; left: 0; z-index: 1; background: #05070a; border-right: 1px solid var(--rule); min-width: 12.5rem; } table.registry tr.entry:hover .col-ship { background: #131b24; } table.registry tr.entry.is-open .col-ship { background: #16202b; } table.registry .thumb { display: inline-block; width: 32px; height: 32px; vertical-align: middle; } table.registry .thumb img { image-rendering: pixelated; display: block; } table.registry .entry-name { vertical-align: middle; padding-left: 0.4rem; } / Con JS el nombre es un botón que despliega la ficha; sin JS es un y estas reglas no lo tocan. / button.entry-name { font: inherit; color: var(--amber); background: none; border: 0; text-align: left; text-decoration: underline; cursor: pointer; } button.entry-name:hover, button.entry-name:focus { color: #000; background: var(--amber); text-decoration: none; } / La ficha desplegable ocupa una fila entera, así que hay que deshacerle a su celda todo lo que table.data le impone a una celda numérica. / table.registry .entry-detail > td { padding: 0; text-align: left; white-space: normal; } / La celda de la ficha abarca las quince columnas, o sea que es más ancha que la pantalla: dejada suelta, la mitad de la ficha quedaba del otro lado del scroll horizontal. Sticky la clava contra el borde izquierdo del contenedor y el width la corta en lo que se ve. `--record-w` lo mide el JS contra el ancho real del contenedor; el 60rem del fallback es el ancho de la consola, que es donde queda la página cuando no hay JS para medir nada. / .record { position: sticky; left: 0; width: min(100%, var(--record-w, 60rem)); padding: 0.9rem 1rem 1.1rem; background: var(--sunk); border-left: 3px solid var(--cyan-d); font-family: var(--font-body); } .record-head { display: flex; align-items: center; gap: 0.9rem; } .record-head h3 { margin: 0; font-size: var(--fs-md); color: var(--cyan); } .record .subtitle { margin: 0; font-size: var(--fs-xs); font-style: italic; color: var(--dim); } .record .sprite { width: 64px; height: 64px; image-rendering: pixelated; flex: none; } .record .desc { font-size: var(--fs-sm); margin: 0.8rem 0 0; } .record h4 { margin: 1rem 0 0.3rem; } .record .loadout { margin: 0; } .record-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 0 1.4rem; margin: 0.9rem 0 0; font-family: var(--font-mono); font-size: var(--fs-sm); } / Cada par etiqueta-valor se mantiene junto. Antes se estiraban con space-between a lo ancho de toda la ficha, con una guía de puntos entre medio, y a 1100px el ojo no podía aparear "Tribute" con su número. / .record-extra div { display: flex; gap: 0.5rem; align-items: baseline; border-bottom: 1px dotted var(--rule); padding: 0.15rem 0; } .record-extra dd { margin-left: auto; } .record-extra dt { color: var(--dim); } .record-extra dd { margin: 0; font-variant-numeric: tabular-nums; } / --- Barra de selección --------------------------------------------------- / .compare-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.6rem clamp(0.8rem, 3vw, 1.8rem); background: var(--panel-2); border-top: 2px solid var(--rule-hi); box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.6); } / display:flex le gana al [hidden] del navegador, así que hay que repetirlo. / .compare-bar[hidden] { display: none; } / Y con la barra a la vista, el pie de la página necesita lugar para respirar. / body:has(.compare-bar:not([hidden])) { padding-bottom: 7rem; } .compare-bar-label { margin: 0; font-family: var(--font-head); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--cyan); } .compare-bar-list { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; list-style: none; margin: 0; padding: 0; flex: 1 1 12rem; font-size: var(--fs-sm); } .compare-bar-list li { display: flex; align-items: center; gap: 0.35rem; } .compare-bar-list img { image-rendering: pixelated; } .compare-bar-actions { display: flex; gap: 0.5rem; margin: 0; } .btn { font-family: var(--font-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--cyan); background: #18212b; border: 2px outset #2f4152; padding: 0.3rem 0.8rem; cursor: pointer; } .btn:hover:not(:disabled), .btn:focus:not(:disabled) { background: var(--cyan); color: #000; border-style: inset; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { color: #00121b; background: var(--cyan); border-color: #7fe3ff; } .btn-primary:hover:not(:disabled), .btn-primary:focus:not(:disabled) { background: #8ce8ff; } / --- Ventana del comparador ----------------------------------------------- / / Una ventana de sistema operativo del 95: barra de título, botón de cerrar y biselado. El nativo pone el fondo, el foco y el Escape. / dialog.window { padding: 0; border: 2px outset var(--rule-hi); background: var(--panel); color: var(--ink); width: max-content; max-width: min(96vw, 960px); max-height: 88vh; overflow: hidden; } / Ojo: sin acotarlo a [open], este display le ganaría al display:none con el que el navegador mantiene cerrado un , y la ventana estaría siempre a la vista al pie de la página. / dialog.window[open] { display: flex; flex-direction: column; } dialog.window::backdrop { background: rgba(2, 5, 10, 0.78); } .window-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; background: #1a2530; border-bottom: 1px solid var(--rule); padding: 0.35rem 0.4rem 0.35rem 0.9rem; flex: none; } .window-title { margin: 0; font-family: var(--font-head); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.08em; color: var(--cyan); } .window-close { font-family: var(--font-mono); font-size: 1rem; line-height: 1; color: var(--ink); background: #22303c; border: 2px outset #3c5266; padding: 0 0.5rem; cursor: pointer; } .window-close:hover, .window-close:focus { background: var(--red); color: #000; border-style: inset; } .window-body { overflow: auto; padding: 0.9rem; } table.comparison { width: 100%; font-size: var(--fs-sm); } / La primera celda del encabezado rotula la columna de stats, así que se alinea con ella y no a la derecha como el resto de una tabla numérica. / table.comparison thead th:first-child { text-align: left; } table.comparison th[scope="col"] { text-align: center; vertical-align: bottom; } table.comparison th[scope="col"] .sprite { display: block; margin: 0 auto 0.25rem; image-rendering: pixelated; } table.comparison th[scope="row"] { text-align: left; white-space: normal; min-width: 11rem; background: #10161d; font-family: var(--font-body); } table.comparison th[scope="row"] .dir { display: block; font-size: var(--fs-xs); font-style: italic; font-weight: normal; color: var(--dim); } table.comparison td { min-width: 6.5rem; } / Escalones de color, de 1 (el peor de la selección) a 5 (el mejor). El color acompaña al número, no lo reemplaza: el valor está escrito en la celda, así que quien no distinga verde de rojo no se pierde nada. / table.comparison .heat-5 { background: rgba(0, 255, 0, 0.16); color: #b6ffb6; } table.comparison .heat-4 { background: rgba(140, 220, 60, 0.09); color: #dcf3c4; } table.comparison .heat-3 { color: var(--ink); } table.comparison .heat-2 { background: rgba(255, 150, 60, 0.10); color: #ffdcbc; } table.comparison .heat-1 { background: rgba(255, 85, 85, 0.16); color: #ffc4c4; } / Fuera de comparación: no se vende, o ningún astillero la stockea. / table.comparison .out { color: var(--dim); font-style: italic; } @media (max-width: 620px) { / En pantalla angosta la columna fija se come el ancho útil. / table.registry .col-ship { position: static; min-width: 9rem; } .record-head { flex-wrap: wrap; } .compare-bar { gap: 0.4rem 0.7rem; padding: 0.5rem 0.6rem; } .compare-bar-list { order: 3; flex-basis: 100%; } } .window-note { flex: none; margin: 0; padding: 0.5rem 0.9rem 0.6rem; border-top: 1px solid var(--rule); background: var(--sunk); font-size: var(--fs-xs); color: var(--dim); } / La pantalla de título en la portada. / .splash { margin: 1.4rem 0; } .splash img { display: block; width: 100%; max-width: 43rem; height: auto; border: 2px solid var(--rule-hi); box-shadow: 0 0 20px rgba(0, 0, 0, 0.7); } .splash figcaption { margin-top: 0.4rem; font-size: var(--fs-xs); color: var(--dim); font-style: italic; } / --- Pestañas -------------------------------------------------------------- / / Antes de que corra el JS los paneles se ven todos, uno debajo del otro, cada uno con su
. Recién cuando el script arma la barra y marca el grupo como listo pasa a verse uno solo. / .tabs.ready > .tab-panel { display: none; } .tabs.ready > .tab-panel.is-active { display: block; } .tabs.ready > .tab-panel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; } .tablist { display: flex; flex-wrap: wrap; gap: 0.2rem; margin: 1.6rem 0 0; border-bottom: 2px solid var(--rule-hi); } .tab { font-family: var(--font-head); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--cyan); background: #141c25; border: 2px solid var(--rule); border-bottom: 0; / La pestaña activa se monta sobre la línea del grupo y se funde con el panel, que es lo que la hace leerse como una carpeta y no como un botón suelto. / margin-bottom: -2px; padding: 0.4rem 1rem; cursor: pointer; } .tab:hover { background: #1c2733; } .tab[aria-selected="true"] { background: var(--panel); color: var(--ink); border-color: var(--rule-hi); border-bottom: 2px solid var(--panel); } .tabs.ready > .tab-panel { padding-top: 1.1rem; } / El póster dibujado a mano. Nunca se agranda: sus etiquetas son texto de 800px de ancho y escalarlas las convierte en puré. / .poster { margin: 1rem 0; } .poster img { display: block; width: 100%; max-width: 800px; height: auto; border: 2px solid var(--rule-hi); } .poster figcaption { margin-top: 0.5rem; font-size: var(--fs-xs); color: var(--dim); } / --- Encabezados pegajosos del registro ------------------------------------ / / El encabezado de columna ya era sticky, pero no servía de nada: vivía dentro de .table-scroll, y un contenedor con overflow-x:auto también scrollea en vertical por regla del CSS, así que el sticky se anclaba a una caja que nunca se mueve. Con la tabla entrando entera, el contenedor deja de recortar y el sticky pasa a agarrarse del viewport, que es lo que hacía falta. / / Todas las tablas del sitio, no sólo el registro: ninguna necesita recortar a este ancho, y mientras el contenedor recorta, el sticky del encabezado se ancla a una caja que no se mueve y nunca se pega a nada. Debajo del corte vuelve el scroll horizontal y el encabezado deja de pegarse, que es el comportamiento aceptable en pantalla angosta. / / El corte es el ancho mínimo de la tabla más ancha del sitio —la de armas, con sus trece columnas, mide 1090px de contenido— más el margen de la consola. Si se pone más abajo, esa tabla desborda la página en vez de scrollear adentro de su caja. Medido, no elegido a ojo. / @media (min-width: 1160px) { .table-scroll { overflow: visible; } / Sin scroll horizontal, la columna fija de la nave ya no tiene qué fijar. / table.registry tbody .col-ship { position: static; } } / La clase que estás mirando se queda pegada abajo del encabezado. Sólo una a la vez, y eso lo decide el JS: `position: sticky` en una celda de tabla NO está acotado por su —el bloque contenedor es la tabla entera— así que dejándolas todas pegajosas se apilaban las seis en el mismo lugar y las más altas asomaban por debajo de las más bajas. --thead-h lo mide el JS contra el encabezado real; el 33px es por si no llega a correr. / / Misma razón que el encabezado de columnas: sombra, no border. / table.registry .group-head th { box-shadow: inset 0 -2px 0 var(--rule-hi); } table.registry tbody.is-current .group-head th { position: sticky; top: var(--thead-h, 33px); z-index: 2; } / --- Scroll del comparador ------------------------------------------------- / / El aire de arriba lo pone el encabezado, no la caja que scrollea. Mientras el relleno estaba en .window-body, quedaba una franja de catorce píxeles por encima del punto donde se ancla el encabezado, y las filas pasaban por ahí a la vista. Se intentó taparla con una sombra, y funcionó hasta que una regla más específica se la comió sin que nada avisara. Con el relleno adentro del propio encabezado el aire es el mismo, viaja pegado a él, y no queda ninguna franja por la que colarse. / .window-body { padding: 0 0.9rem 0.9rem; } table.comparison thead th { z-index: 4; padding-top: 0.9rem; box-shadow: inset 0 -2px 0 var(--rule-hi); } table.comparison { border-collapse: separate; border-spacing: 0; } table.comparison th, table.comparison td { border-bottom: 1px solid #0f1620; } / --- Atlas de la galaxia --------------------------------------------------- / / El encabezado de una columna se alinea como su contenido. El de "System" salía a la derecha, heredado de las tablas numéricas, contra nombres alineados a la izquierda. / table.data thead th.col-entry, table.data thead th.col-worlds, table.data thead th.svc-cell { text-align: left; } table.atlas .col-entry { width: 11rem; } / La columna de mundos se queda con el ancho sobrante. Con un número adentro, ese sobrante se lo comía la columna del sistema y quedaba un hueco enorme entre el nombre y el resto de la fila. / table.atlas .col-worlds { text-align: left; white-space: normal; width: auto; } table.atlas .svc-cell { text-align: left; white-space: nowrap; width: 1%; } table.atlas .svc-cell .tag + .tag { margin-left: 0.2rem; } / Un color por servicio. Tres etiquetas del mismo celeste eran tres manchas iguales que había que leer para distinguir; con color se reconocen de un ojo. / .tag--trade { color: var(--lethean); } .tag--outfitter { color: var(--cydonian); } .tag--shipyard { color: var(--cyan); } .none { color: var(--dim); } table.atlas .group-count { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--dim); letter-spacing: 0; } / --- Filtros --------------------------------------------------------------- / .filters fieldset { border: 1px solid var(--rule); background: var(--sunk); padding: 0.7rem 1rem 0.9rem; margin: 1.4rem 0 0.6rem; } .filters legend { font-family: var(--font-head); text-transform: uppercase; font-size: var(--fs-xs); letter-spacing: 0.06em; color: var(--cyan); padding: 0 0.4rem; } .filters-count { color: var(--dim); font-family: var(--font-mono); text-transform: none; letter-spacing: 0; } / Filas de arriba a abajo, cada campo con su rótulo encima. Antes los campos flotaban en una sola fila y los dos selectores gigantes dejaban huecos. / .filters-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.7rem 1.6rem; } .filters-row + .filters-row { margin-top: 0.8rem; } .filters-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; } .filters-field > span { font-size: var(--fs-xs); color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; } .filters-field--tight { flex: none; } .filters-pair { display: flex; gap: 0.4rem; } .filters-checks { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; } .filters-checks label { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; font-size: var(--fs-sm); } .filters input[type="checkbox"] { accent-color: var(--cyan); } .filters input[type="search"], .filters select, .combo-input { font: inherit; font-size: var(--fs-sm); color: var(--ink); background: #10161d; border: 1px solid var(--rule-hi); padding: 0.25rem 0.4rem; } .filters input[type="search"] { min-width: 16rem; } .filters-row .btn { align-self: end; } .filters-empty { color: var(--dim); font-style: italic; } / --- Buscador con fichas --------------------------------------------------- El