/* ============================================================ 29A LABS — Base: reset, tipografía, elementos ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Compensa el header fijo cuando se salta a un ancla */ scroll-padding-top: 6rem; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background-color: var(--c-bg); color: var(--c-text); font-family: var(--font-sans); font-size: var(--t-0); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Footer pegajoso. En los posts cortos ("Fuego" son dos líneas) el documento terminaba ANTES que la ventana, y esa franja sobrante caía fuera de la capa de la cuadrícula: aparecía una barra negra bajo el pie. Con esto la página siempre llena la ventana y no existe un "debajo del footer" al que se le pueda escapar el fondo. */ min-height: 100vh; display: flex; flex-direction: column; /* Ancla para la capa absoluta de la cuadrícula. */ position: relative; /* La cuadrícula ya no vive acá: está en body::before, para poder enmascararla. Un background del no se puede vaciar por el centro. */ } /* El contenido empuja el footer hacia abajo; el footer nunca se estira. */ .site-main { flex: 1 0 auto; } .site-footer { flex: none; } /* ── La cuadrícula de terminal ────────────────────────────── */ /* Enmascarada: desaparece en la franja central, que es donde vive el texto y las imágenes. Ahí el fondo es negro puro y nada compite con la lectura. La cuadrícula solo respira en los márgenes. */ body::before { content: ''; /* ABSOLUTA, no fija. Con `fixed` la capa solo cubre la ventana: en el final de la página aparecía una banda negra sin cuadrícula (visible sobre todo en capturas de pantalla completa), y la máscara se movía con el scroll en lugar de quedarse quieta respecto al contenido. Absoluta cubre el documento entero, de la primera fila a la última. */ position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: var(--grid-size) var(--grid-size); background-position: center top; /* La máscara es SOLO horizontal, no una elipse: la columna de contenido es una franja vertical que recorre toda la página, así que el hueco negro también debe serlo. Además, así no depende del scroll ni del alto. Las medidas van en px alrededor del centro (el contenido mide 1140px): negro puro desde el centro hasta ±600px, y la cuadrícula entra a ±760px. */ --grid-mask: linear-gradient( to right, #000 0, #000 calc(50% - 760px), transparent calc(50% - 600px), transparent calc(50% + 600px), #000 calc(50% + 760px), #000 100% ); -webkit-mask-image: var(--grid-mask); mask-image: var(--grid-mask); } /* En pantallas estrechas el contenido ocupa TODO el ancho: no hay márgenes donde lucir la cuadrícula, y dejarla asomando bajo el texto es peor que no tenerla. En móvil, negro y punto. */ @media (max-width: 800px) { body::before { display: none; } } /* ── Media ────────────────────────────────────────────────── */ img, picture, video, canvas, svg, iframe { display: block; max-width: 100%; } img, video { height: auto; } /* ── Titulares: mono, apretados, en versalita ─────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-mono); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--c-text-strong); text-wrap: balance; } h1 { font-size: var(--t-4); } h2 { font-size: var(--t-3); } h3 { font-size: var(--t-2); } h4 { font-size: var(--t-1); } h5, h6 { font-size: var(--t-0); letter-spacing: var(--tr-wide); text-transform: uppercase; } /* ── Cuerpo de texto ──────────────────────────────────────── */ p { text-wrap: pretty; } /* Los posts de 2008–2013 traen URLs crudas y palabras kilométricas. Sin esto, una sola de ellas desborda el viewport en móvil y aparece el scroll horizontal. Se rompe la palabra antes que la página. */ p, li, .entry-card__excerpt, .entry-content, blockquote, h1, h2, h3, h4 { overflow-wrap: break-word; } p + p { margin-top: var(--s-5); } a { color: var(--c-accent); text-decoration: none; /* Subrayado que crece desde la izquierda, no un underline muerto */ background-image: linear-gradient(var(--c-accent), var(--c-accent)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--d-base) var(--e-out), color var(--d-fast) linear; } a:hover { color: var(--c-accent-lit); background-size: 100% 1px; } /* Accesibilidad: el foco de teclado se ve, y se ve fuerte. */ :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-sm); } :focus:not(:focus-visible) { outline: none; } strong, b { font-weight: 600; color: var(--c-text-strong); } em, i { font-style: italic; } small { font-size: var(--t--1); color: var(--c-text-dim); } hr { border: 0; height: 1px; background: var(--c-border); margin: var(--s-7) 0; } /* ── Citas: el bloque más importante del blog ─────────────── */ blockquote { position: relative; margin: var(--s-6) 0; padding: var(--s-4) 0 var(--s-4) var(--s-5); border-left: 2px solid var(--c-accent); font-size: var(--t-1); line-height: var(--lh-snug); color: var(--c-text-strong); } blockquote cite { display: block; margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--t--1); font-style: normal; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-text-dim); } blockquote cite::before { content: '— '; color: var(--c-accent); } /* ── Código ───────────────────────────────────────────────── */ code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; } code { padding: 0.15em 0.4em; background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: var(--r-sm); color: var(--c-accent-lit); } pre { margin: var(--s-6) 0; padding: var(--s-5); background: var(--c-surface); border: var(--hairline); border-left: 2px solid var(--c-accent); border-radius: var(--r-sm); /* Regla de Rolo: nunca scroll horizontal en la página. El bloque de código scrollea dentro de sí mismo. */ overflow-x: auto; line-height: 1.6; } pre code { padding: 0; background: none; border: 0; color: var(--c-text); } /* ── Listas ───────────────────────────────────────────────── */ ul, ol { padding-left: var(--s-5); } li + li { margin-top: var(--s-2); } /* Los bullets del cuerpo son el prompt de la terminal */ .entry-content ul { list-style: none; padding-left: var(--s-4); } .entry-content ul > li { position: relative; padding-left: var(--s-4); } .entry-content ul > li::before { content: '▸'; position: absolute; left: 0; color: var(--c-accent); } /* ── Tablas ───────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: var(--t--1); } th, td { padding: var(--s-3); text-align: left; border-bottom: var(--hairline); } th { font-family: var(--font-mono); font-weight: 700; letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-text-dim); } /* ── Formularios ──────────────────────────────────────────── */ input, textarea, select, button { font: inherit; color: inherit; } /* Todos los tipos de campo, no solo los tres de siempre: sin `url` en esta lista, el campo "Web" del formulario de comentarios salía blanco y estrecho, con el estilo por defecto del navegador. */ input[type='text'], input[type='search'], input[type='email'], input[type='url'], input[type='tel'], input[type='number'], input[type='password'], textarea { width: 100%; padding: var(--s-3) var(--s-4); background: var(--c-surface); border: var(--hairline); border-radius: var(--r-sm); font-family: var(--font-mono); transition: border-color var(--d-fast) var(--e-out), box-shadow var(--d-fast) var(--e-out); } input::placeholder, textarea::placeholder { color: var(--c-text-faint); } input:focus, textarea:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-a20); } button, .btn { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); background: transparent; border: 1px solid var(--c-border-lit); border-radius: var(--r-sm); font-family: var(--font-mono); font-size: var(--t--1); letter-spacing: var(--tr-wide); text-transform: uppercase; color: var(--c-text); cursor: pointer; transition: border-color var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out), background-color var(--d-fast) var(--e-out); } button:hover, .btn:hover { border-color: var(--c-accent); color: var(--c-accent); background: var(--c-accent-a10); } /* ── Utilidad: solo para lectores de pantalla ─────────────── */ .screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Salto al contenido: aparece solo con teclado */ .skip-link { position: absolute; top: -100%; left: var(--s-4); z-index: var(--z-overlay); padding: var(--s-3) var(--s-4); background: var(--c-accent); color: var(--c-accent-ink); font-family: var(--font-mono); transition: top var(--d-fast) var(--e-out); } .skip-link:focus { top: var(--s-4); }