/* ========================================================================== PROYECTOS · hoja propia de /proyectos/ y /proyectos// Sólo la enlazan esas páginas, después de sections.css y en lugar de mockups.css (que acá no se usa: un pedido menos). No toca un solo selector de las otras cuatro hojas. Lo que reusa, y por eso no está acá: .section .container .eyebrow .h2 .h3 .lead .display .numeral .rule .btn .tag .chip .ph .ph-badge .checklist .seam .glass .pull-quote .footer .nav .mobile-menu, todo el sistema de reveals de base.css, y —lo importante— la maquinaria del LIBRO CONTABLE de sections.css § 03: la grilla compartida, el rail, el filete de cierre, el tramado que se acumula y la doble regla del total. Acá sólo se agregan las columnas que el libro de obras necesita de más. Los @keyframes obs-libro-* son globales (sections.css), así que las reglas de abajo los referencian sin volver a declararlos. ========================================================================== */ /* ========================================================================== 01 · HERO DE PÁGINA — .phero Deliberadamente más chico y más tonto que el de la home: 62svh contra 100svh, sin parallax de puntero, sin diafragma y sin la línea de tiempo de siete tiempos. Este hero es una PORTADA, no una apertura de sitio; entra con el sistema normal de data-reveal. Tampoco hereda html.obs-tl: esa clase la pone el script inline del y sólo esconde [data-hero-item], que acá no existe. ========================================================================== */ .phero { position: relative; display: flex; align-items: center; min-height: 62svh; overflow: hidden; background: var(--bg-sunk); padding: calc(76px + var(--sp-14)) 0 var(--sp-14); } .phero__media { position: absolute; inset: 0; z-index: 0; } .phero__media img { width: 100%; height: 100%; object-fit: cover; /* La figura y el árbol de mid-3 caen a la derecha del encuadre. Con `center` el recorte de 62svh se comía la copa del árbol y dejaba el valle solo; con 62% el sujeto sobrevive en todos los anchos probados. */ object-position: 62% 50%; } /* EL VELO. No se reusa .hero__veil: el de la home es una elipse CENTRADA, calibrada al milímetro (.70, el mínimo que pasa AA en seis anchos) para un bloque de texto centrado sobre SU pintura — que es, con el titular acá centrado también, casi la misma situación. La diferencia es la pintura: ésta tiene su sujeto (montaña, árbol, figura) cargado a la derecha, así que en vez de una elipse se usa un degradé horizontal que oscurece el CENTRO — donde vive el bloque de texto centrado — y suelta hacia los dos cantos, para que el sujeto de la foto conserve algo de luz en los bordes. */ .phero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(29,28,24,.46) 0%, rgba(29,28,24,.76) 28%, rgba(29,28,24,.76) 72%, rgba(29,28,24,.46) 100%), linear-gradient(180deg, rgba(29,28,24,.62) 0%, rgba(29,28,24,.16) 34%, rgba(29,28,24,.30) 70%, rgba(29,28,24,.72) 100%); } /* ⚠ SE REFUERZA AL ANGOSTARSE. Bajo 991px el bloque de texto centrado ocupa casi todo el ancho de .sangre, así que la banda oscura del centro tiene que crecer para seguir cubriéndolo entero — si no, los cantos del titular caen sobre la franja más clara y repiten la caída de AA ya medida una vez en este hero (3.74:1 contra foto a 768px). */ @media (max-width: 991px) { .phero__veil { background: linear-gradient(90deg, rgba(29,28,24,.62) 0%, rgba(29,28,24,.84) 14%, rgba(29,28,24,.84) 86%, rgba(29,28,24,.62) 100%), linear-gradient(180deg, rgba(29,28,24,.64) 0%, rgba(29,28,24,.22) 34%, rgba(29,28,24,.36) 70%, rgba(29,28,24,.74) 100%); } } /* CENTRADO. El resto de la página va a sangre y sin centralizar a propósito (ver la nota de listado.mjs); este hero es la única excepción deliberada: es una portada chica y el titular pide leerse como una declaración, no como el arranque de una columna. */ .phero__inner { position: relative; z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; } .phero__inner [data-reveal] { display: flex; flex-direction: column; align-items: center; } .phero__title { color: var(--ink); /* em y NO ch, por el mismo motivo medido que el hero de la home: ch mide contra la fuente EN USO, así que la caja se movía durante el swap y el CLS se iba de .088 a .190. */ max-width: 13em; margin-top: var(--sp-5); text-shadow: 0 2px 30px rgba(29,28,24,.55); } /* El .eyebrow de base.css pinta con --ink-soft, y acá eso NO alcanza: medido sobre el render, 4.36:1 contra la foto — por debajo del 4.5 que pide AA para 12px. Es la sexta vez que --ink-soft se cae en este proyecto y siempre por lo mismo: hay algo abajo que levanta el suelo. Con --ink-mute pasa holgado y no cuesta nada. La regla, otra vez: sobre foto, degradé, vidrio o plancha, mute. */ .phero .eyebrow { color: var(--ink-mute); } .phero__subhead { margin-top: var(--sp-6); max-width: 58ch; font-size: var(--fs-lead); line-height: var(--lh-relaxed); /* --ink-mute y no --ink-soft: esto es texto sobre una FOTO, que es exactamente donde el soft se cayó de AA cinco veces en este proyecto. */ color: var(--ink-mute); text-wrap: pretty; } /* ========================================================================== 03 · EL LIBRO DE OBRAS — .libro--obras Mismo objeto gráfico que "Qué solucionamos", con una columna más. La diferencia de fondo con aquel: allá las filas son un INVENTARIO DE PÉRDIDAS y no llevan a ningún lado; acá cada fila es un link. Todo lo demás —el rail, los romanos, el filete, el tramado, el total y la doble regla— es literalmente el mismo sistema. Orden de columnas: numeral · texto · meta · media. La media va ÚLTIMA y no después del numeral a propósito: con la imagen en segunda columna el nombre del proyecto —que es lo que se viene a leer— arrancaba a ~380px del canto. Así arranca en el mismo sitio que los conceptos del libro de la home. ========================================================================== */ .libro--obras { --libro-col1: 3.5rem; /* el numeral */ /* La media crecio con el ancho, y no por gusto: al pasar de .container a .marco--ancho la fila gano ~600px que se los llevaba enteros la columna de texto, y como el resultado esta capado a 62ch quedaba un hueco muerto de medio metro entre el texto y la miniatura. El espacio nuevo va a la imagen, que ademas es lo que la pagina viene a mostrar. */ --obra-media: clamp(200px, 24vw, 420px); --obras-cols: var(--libro-col1) minmax(0, 1fr) minmax(8ch, 12ch) var(--obra-media); --libro-gap: clamp(1.25rem, 0.9rem + 1.2vw, 2.5rem); --libro-sangria: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem); /* del rail al texto */ --libro-aire: clamp(1.75rem, 1.2rem + 1.3vw, 2.5rem); } /* Igual que .libro__cuerpo: SIN overflow hidden acá ni en ningún ancestro de una fila. Lo volvería contenedor de scroll y animation-timeline: view() se ataría a él —que no scrollea nunca— en vez de al viewport. Es la trampa que dejó el filete de .seam clavado en scaleX(1) en la 11ª pasada. */ .obras__cuerpo { position: relative; margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); } .obras__cabecera { display: grid; grid-template-columns: var(--obras-cols); column-gap: var(--libro-gap); padding: 0 0 var(--sp-3) var(--libro-sangria); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-mute); } .obras__cabecera span:nth-child(1) { grid-column: 2; } .obras__cabecera span:nth-child(2) { grid-column: 3; } .obras__filas { list-style: none; margin: 0; padding: 0; position: relative; } /* El tope del rail, igual que .libro__filas::before */ .obras__filas::before { content: ""; position: absolute; left: 0; top: 0; width: 9px; height: 1px; background: var(--line-strong); } /* ── la fila ─────────────────────────────────────────────────────────────── */ .obra { position: relative; } /* UN segmento de rail POR FILA y no un solo elemento alto: view() mide la visibilidad de su propio sujeto, y un elemento de ~1200px degenera el rango útil. Mismo motivo que en el libro de la home. */ .obra::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--line-strong); transform: scaleY(1); /* sin scroll-timeline: ya dibujado */ transform-origin: top; } .obra__link { position: relative; display: grid; grid-template-columns: var(--obras-cols); grid-template-areas: "num texto meta media"; column-gap: var(--libro-gap); align-items: start; /* El aire va en padding y NUNCA en margin: con margin los segmentos de rail quedan separados y la línea deja de leerse continua. El + 12px reserva la altura del .obra__marca, que está fuera de flujo. */ padding: var(--libro-aire) 0 calc(var(--libro-aire) + 12px) var(--libro-sangria); color: inherit; } /* Sólo cuando la ficha existe. Sin href el cursor nativo se queda: no se promete una navegación que todavía no está. Misma lógica que la pastilla de la home (módulo 12). */ .obra__link[href] { cursor: none; } /* Realce de fondo, portado del componente de referencia. Va a -1 para no taparle el click a nada y sangra hacia afuera para que no parezca una card. */ .obra__link::after { content: ""; position: absolute; z-index: -1; inset: calc(var(--libro-aire) * .35) calc(var(--libro-gap) * -.5) calc(var(--libro-aire) * .35 + 12px) calc(var(--libro-sangria) * .35); border-radius: var(--radius); background: color-mix(in srgb, var(--ink) 4%, transparent); opacity: 0; transition: opacity var(--dur) var(--ease-out); } .obra__link:hover::after, .obra__link:focus-visible::after { opacity: 1; } .obra__num { grid-area: num; font-family: var(--font-display); font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); line-height: 1; padding-top: .06em; color: var(--ink); /* fallback = estado encendido */ } .obra__texto { grid-area: texto; min-width: 0; } /* El nombre y su subrayado animado: el gesto del componente de referencia, con la salvedad de que acá el trazo es --accent-2 y no la tinta, porque en este sitio el cobre es lo que marca "esto se puede abrir". */ .obra__nombre { display: inline-flex; align-items: center; gap: var(--sp-3); } .obra__nombre-txt { position: relative; } .obra__nombre-txt::after { content: ""; position: absolute; left: 0; bottom: -.08em; height: 1px; width: 0; background: var(--accent-2); transition: width var(--dur) var(--ease-out); } .obra__link:hover .obra__nombre-txt::after, .obra__link:focus-visible .obra__nombre-txt::after { width: 100%; } /* La flecha entra en diagonal, tal cual el original: opacidad + translate en los dos ejes a la vez. */ .obra__flecha { flex: 0 0 auto; width: 16px; height: 16px; color: var(--ink-mute); opacity: 0; transform: translate3d(-8px, 8px, 0); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .obra__link:hover .obra__flecha, .obra__link:focus-visible .obra__flecha { opacity: 1; transform: none; } .obra__result { margin-top: var(--sp-3); max-width: 62ch; color: var(--ink-mute); line-height: var(--lh-relaxed); text-wrap: pretty; } .obra__meta { grid-area: meta; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding-top: .35em; } /* .tag pinta con --ink-soft, que en este proyecto tiene cinco caídas de AA documentadas. Acá no cuesta nada tomar el margen de entrada. */ .obra__rubro { color: var(--ink-mute); } .obra__anio { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; color: var(--ink-mute); transition: color var(--dur) var(--ease-out); } .obra__link:hover .obra__anio { color: var(--ink); } /* ── la media de la fila ─────────────────────────────────────────────────── */ .obra__media { grid-area: media; position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius); overflow: hidden; background: var(--bg-sunk); /* Al hover la miniatura BAJA y el panel que sigue al cursor sube: se pasan la posta en vez de competir por la misma atención. */ transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); } .obra__media > * { width: 100%; height: 100%; border-radius: inherit; } .obra__media img { object-fit: cover; } /* ⚠ Mismo bug que sections.css § .proyecto__media y, mas abajo en este mismo archivo, § .tira__media (parchado recien en la 41ª):