/* ========================================================= DB Project — Tipografía IBM Plex Sans (texto general/UI) + IBM Plex Mono (detalles técnicos, código, acentos editoriales). Confirmada, sin cambios pendientes. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { /* ── TRES NIVELES DE TÍTULO ──────────────────────────────────────────────── Antes había UNO. --db-fs-h1 valía literalmente var(--db-fs-h2), así que el título de una página y el de cada una de sus secciones medían exactamente lo mismo: 34px los dos en mobile, 110px los dos en desktop. Medido en las cinco páginas. Con todo gritando igual nada resalta y la vista no sabe adónde ir primero — el mismo error que tenía el color aplicado parejo. En proyectos.html estaba incluso invertido: el h2 de sección medía 110 y el h1 de la página 84. Nivel 1 · el h1, uno solo por página 32 → 96px Nivel 2 · la apertura de cada sección 26 → 56px Nivel 3 · subsecciones y títulos de bloque 20 → 32px Entre nivel 1 y 2 hay un salto de 40px en desktop y de 6 en mobile: la diferencia se ve de lejos, sin tener que comparar dos títulos al lado. Los niveles 1 y 2 son rampas de tres tramos y no un clamp solo, por la misma razón que ya valía antes: las pendientes que pide el rango son distintas, y dos clamps pegados en un breakpoint dan un escalón al cruzarlo. Cada tramo arranca exactamente donde topa el anterior, así arrastrar el ancho no muestra ningún salto. El nivel 3 sí es un clamp solo: su rango es angosto y una sola pendiente lo cubre. */ /* Nivel 1 · tramo base: 320 → 32px · 768 → 40px */ --db-fs-h1: clamp(2rem, 1.643rem + 1.786vw, 2.5rem); /* Nivel 2 · tramo base: 320 → 26px · 768 → 30px */ --db-fs-h2: clamp(1.625rem, 1.446rem + 0.893vw, 1.875rem); /* Nivel 3 · de un tirón: 375 → 20px · 1024 → 27px · 1440 → 32px */ --db-fs-h3: clamp(1.25rem, 0.986rem + 1.127vw, 2rem); /* El hero del Inicio deja de tener un tamaño propio por encima de la escala. Era un cuarto nivel que no hacía falta: con el nivel 1 ya diferenciado del 2, el hero pesa por composición y no por ser 8px más grande que el h1 de las otras páginas. Un solo tamaño de h1 en todo el sitio. */ --db-fs-display: var(--db-fs-h1); --db-fs-lead: clamp(1.125rem, 1.4vw, 1.375rem); --db-fs-body: 1rem; /* El cuerpo de texto, aparte de --db-fs-body. Los dos valían 16px fijo y eso ataba el tamaño de la prosa al de los botones y las etiquetas: subir la prosa a 20px en desktop habría engordado también todo lo que es interfaz. --db-fs-body queda para controles; esto es lo que se lee. 16 → 20px. */ --db-fs-cuerpo: clamp(1rem, 0.912rem + 0.376vw, 1.25rem); --db-fs-small: 0.875rem; /* La etiqueta en mono, del otro extremo de la escala. Un solo token para las tres que hay —marca de sección, rótulo del interruptor, pie de dato— así el contraste con el título se revisa en un lugar y no en once. */ --db-fs-eti: 0.6875rem; } /* Los tramos que continúan las rampas de los niveles 1 y 2. Ver el comentario de los tokens, arriba: cada uno arranca en el valor con el que topa el anterior, así que arrastrar el ancho no muestra ningún escalón. */ @media (min-width: 768px) { :root { --db-fs-h1: clamp(2.5rem, -2rem + 9.375vw, 4rem); /* 768 → 40 · 1024 → 64 */ --db-fs-h2: clamp(1.875rem, 3.906vw, 2.5rem); /* 768 → 30 · 1024 → 40 */ } } @media (min-width: 1024px) { :root { --db-fs-h1: clamp(4rem, -0.923rem + 7.692vw, 6rem); /* 1024 → 64 · 1440 → 96 */ --db-fs-h2: clamp(2.5rem, 0.038rem + 3.846vw, 3.5rem); /* 1024 → 40 · 1440 → 56 */ } } /* El fondo va en , no en : el lienzo del cierre (la atmósfera de Three.js de la 07 y el footer) es un hijo absoluto de que tiene que quedar DETRÁS del contenido, y un con fondo opaco lo taparía. */ html { background: var(--db-bg-primario); } body { font-family: var(--db-font-sans); color: var(--db-texto-sobre-oscuro); background: transparent; } h1, h2, h3 { font-family: var(--db-font-sans); font-weight: 600; } h1 { font-size: var(--db-fs-h1); } /* A estos tamaños el tracking por defecto abre demasiado: un título de 96px con el espaciado de uno de 24 se lee suelto. Baja con el tamaño. Vale para los dos niveles altos aunque ya no midan lo mismo: los dos siguen siendo titulares, y es el registro lo que comparten, no el tamaño. */ h1, h2 { letter-spacing: -0.025em; line-height: 1.1; } /* .db-tech-detail salió: no la usaba ningún archivo del sitio. */ code, .mono { font-family: var(--db-font-mono); } /* Display: el único tamaño por encima de h1. Tracking con piso en -0.03em — más apretado que eso y las letras se tocan. */ .display { font-size: var(--db-fs-display); font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; margin: 0; } .lead { font-size: var(--db-fs-lead); line-height: 1.55; }