/* ================================================================= single-project.css — Detalle de Project (single-project.php, Figma 14-Projects-Details-Desktop, node-id=2857-8581, archivo BdUd1g6K6cuVm4036Z5p6p). Se apoya en single-news.css (.post-page/.post__col/.post-tag/.post__hero/.post-content) y en archive-resource.css (.resource-grid/.resource-card) — ambas encoladas junto con este archivo (ver inc/enqueue.php) para no duplicar esa tipografía/prosa ni la card de Recurso. Acá solo vive lo que es propio de esta vista: título centrado (distinto tipo/alineación que .post__title de News), el radio de la imagen destacada (12px en vez de los 6px de News), el glass de la imagen destacada, la nav bar sticky (Description/Resources) y la sección de "Recursos del proyecto". Breakpoint estándar 80rem (§12). ================================================================= */ @layer views { /* ---- Header: tags + título centrados (a diferencia de News, alineado a la izquierda) ---- */ .project__header { text-align: center; } .project__tags { justify-content: center; } .project__title { margin: 0; font-family: var(--font-sans); font-weight: 700; font-size: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); /* hasta 60px (spec Figma) */ line-height: 1.17; letter-spacing: -2px; color: var(--dia-color-text-primary, #121212); } /* ---- Imagen destacada: mismo full-bleed que .post__hero, radio propio (12px vs 6px de News) ---- margin-top: 48px desktop, ~30px mobile (mismo criterio/valor exacto que .post-page padding-top en single-news.css — "separación con el header: 48px desktop, ~30px mobile" — acá se reusa la misma escala fluida para la MISMA distancia visual pero entre el título y la imagen, medida contra el Figma: 152px (inicio de la imagen) - 104px (fin del bloque de título) = 48px exactos en el frame desktop de 1440px). position:relative + border transparente para anclar/estabilizar el glass de abajo (mismo criterio que .news-main-article, news.css). */ .project__hero { position: relative; border-radius: 12px; border: 1px solid transparent; margin-top: clamp(1.875rem, 1.5rem + 1vw, 3rem); } /* Glass = blur + grano en el tercio inferior — CLONADO 1:1 de .news-main-article__glass (news.css), pedido explícito del usuario ("quizá convenga la técnica de la news-main-article por el tamaño grande") — mismo aspect-ratio (1200/750) que .post__hero ya reusa acá, así que el mismo patrón aplica sin reescalar nada. */ .project__hero-glass { position: absolute; left: 0; right: 0; bottom: 0; height: 40%; pointer-events: none; -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); -webkit-mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(to top, #000 35%, rgba(0, 0, 0, 0) 100%); } .project__hero-glass::after { content: ''; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 380 358' preserveAspectRatio='none'%3E%3Cfilter id='grain' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2 2' numOctaves='3' stitchTiles='stitch' result='t'/%3E%3CfeColorMatrix in='t' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0' result='a'/%3E%3CfeComponentTransfer in='a'%3E%3CfeFuncA type='discrete' tableValues='0 0 0 0 0 0 1 1 1 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='380' height='358' fill='black' opacity='0.14' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 100% 100%; } /* ---- Nav bar sticky (Figma 2900:8573, "Navigation bar") — 2 tabs ancla a las 2 secciones de esta misma página (#project-description/#project-resources, single-project.php). position:sticky en vez de fixed: el .site-header del tema NO es sticky (se va con el scroll, ver base.css), así que esta nav queda pegada al top del viewport apenas su posición normal lo alcanza — no hace falta un offset de "altura del header" en `top`. Bug real reportado 2026-07-08: la nav se despegaba (dejaba de estar sticky) apenas se veía la 2da fila de Recursos. Causa: un elemento sticky solo se mantiene pegado mientras su CONTENEDOR PADRE sigue visible en el viewport — vivía dentro de .post-page__inner, que termina justo después del contenido, ANTES de .project-resources (un
HERMANO aparte, fuera de ese wrapper). Fix (single-project.php): .project-nav pasó a ser hijo DIRECTO de
(que sí envuelve TODO, contenido Y recursos), así el sticky se mantiene pegado durante toda la página. Efecto secundario: al salir de .post-page__inner (que antes le daba el ancho constreñido a var(--container) gratis), .project-nav ahora necesita su PROPIO padding-inline (mismo clamp que .post-page, para alinear con el título/imagen de arriba) + .project-nav__inner necesita su PROPIO max-width+margin-inline:auto (antes lo heredaba del padre). El fondo blanco/blur ahora SÍ es full-bleed (edge-to-edge, ancho de
) en vez de constreñido a 1200px — más simple (gratis, sin trucos de breakout) y consistente con el patrón ya visto en el screenshot del usuario. */ .project-nav { position: sticky; top: 0; /* 10, NO 20 — bug real reportado 2026-07-09: con el mismo z-index que el panel del menú móvil (.site-header__nav, base.css, también 20), el empate de stacking se rompe por orden en el DOM — .project-nav vive DESPUÉS de
(es hijo directo de
), así que pintaba ENCIMA del panel del menú abierto justo en la franja donde ambos coinciden en pantalla, tapando el último item ("Acerca de") y lo que seguía. .project-nav solo necesita quedar por encima del contenido normal de la página, no de los overlays de navegación del header — 10 alcanza para eso y queda debajo de site-header__nav (20). */ z-index: 10; background: rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding-inline: clamp(var(--space-m), 8vw, 7.5rem); /* mismo clamp que .post-page */ /* Mismo valor/criterio que el margin-top de .project__hero de arriba — 48px desktop, ~30px mobile, distancia real medida en el Figma entre el fin de la nav bar (1072+74=1146) y el inicio del contenido (1194): 1194-1146=48px exactos. */ margin-bottom: clamp(1.875rem, 1.5rem + 1vw, 3rem); } @media (width >= 80rem) { .project-nav { padding-inline: 0; } /* mismo criterio que .post-page: el max-width+auto-margin de .project-nav__inner ya centra sin necesitar padding extra a partir de acá. */ } .project-nav__inner { display: flex; gap: 30px; max-width: var(--container); margin-inline: auto; /* #e5e5e5 LITERAL (NO var(--dia-color-border-subtle)) — bug real reportado 2026-07-09: la línea gris casi no se veía. Causa: --dia-color-border-subtle SÍ está definida en base.css (#eff1f3, un gris mucho más claro) — el fallback del var() nunca se activa. El Figma pide #e5e5e5 exacto (nodo "Navigation bar" 2900:8573) — mismo criterio que el resto del tema, que usa el literal #e5e5e5 directo (no esta variable) para este tono puntual (ver news.css/single-news.css/archive-project.css). Vive en __inner (no en .project-nav) — bug real reportado 2026-07-09: la línea gris (y la verde de .is-active) se pintaban full-bleed (ancho de
, edge-to-edge) en vez de quedar constreñidas al ancho de la imagen destacada de arriba (var(--container)), como pide el Figma. .project-nav sigue siendo full-bleed solo para el fondo blanco/blur; el borde que se VE debajo de los tabs ahora vive en __inner, que ya está limitado a max-width+margin:auto. */ border-bottom: 1px solid #e5e5e5; } .project-nav__link { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; gap: 24px; padding-block: 24px; border-bottom: 2px solid transparent; text-decoration: none; color: var(--dia-color-text-secondary, #767778); } .project-nav__link.is-active { color: var(--dia-color-brand-secondary, #3e8391); border-bottom-color: var(--dia-color-brand-secondary, #3e8391); } .project-nav__link-row { display: flex; align-items: center; gap: 16px; } .project-nav__link-row svg { width: 24px; height: 24px; flex-shrink: 0; } .project-nav__label { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 20px; letter-spacing: 0; text-transform: uppercase; } @media (width < 48rem) { /* Labels más chicos + menos gap — mismo criterio de "achicar en vez de romper el layout" ya usado en el resto de single-project.css/single-news.css para mobile. */ .project-nav__link { gap: 12px; padding-block: 16px; } .project-nav__link-row { gap: 8px; } .project-nav__link-row svg { width: 20px; height: 20px; } .project-nav__label { font-size: 13px; letter-spacing: 1px; } } /* .post-page--no-top-gap: el 2do .post-page de single-project.php (envuelve SOLO el contenido, después de .project-nav) reusa .post-page/.post-page__inner tal cual para el mismo padding-inline fluido + max-width centrado — pero SIN el padding-top propio de esa clase (pensado para "separación con el header DEL SITIO", ya cubierto acá por el margin-bottom de .project-nav de arriba; duplicarlo sumaría un segundo gap de 30-48px de más entre la nav y el contenido). */ .post-page--no-top-gap { padding-top: 0; } /* :last-child (no la regla base) — bug real reportado 2026-07-09: en un proyecto SIN recursos relacionados, .project-resources no se imprime (single-project.php) y el contenido quedaba pegado directo contra el footer, sin ningún padding inferior — .post-page NO trae padding-bottom propio (single-news.css, solo padding-top), y normalmente ese espacio lo aporta .project-resources__inner (padding-block: 5rem 7.5rem) cuando SÍ existe. Mismo criterio que .project-grid:last-child en archive-project.css: el padding-bottom solo aplica cuando este .post-page es de verdad el ÚLTIMO bloque de
(sin recursos después); si Recursos existe, esa sección ya aporta su propio espacio y este no debe sumarse. Mismo valor exacto (120px/7.5rem desktop, 80px/5rem en <80rem) que .project-resources__inner de abajo, para que el espacio antes del footer sea igual haya o no recursos. */ .post-page--no-top-gap:last-child .post-page__inner { padding-bottom: 7.5rem; } @media (width < 80rem) { .post-page--no-top-gap:last-child .post-page__inner { padding-bottom: 5rem; } } /* scroll-margin-top en los 2 destinos de .project-nav (#project-description/#project-resources) — bug real reportado 2026-07-08/09 (2 rondas, ver el comentario grande de project-nav.js sobre por qué el intento intermedio con window.scrollTo a un pixel fijo tampoco alcanzaba): sin esto, el salto (click en un tab, project-nav.js) aterriza el borde superior de la sección EXACTO contra el top del viewport, justo DEBAJO de la nav sticky, sin aire. `--project-nav-h` (custom property en , medida en VIVO por project-nav.js — updateNavHeightVar(), en load/resize) reemplaza el número fijo adivinado que había antes (96px/72px) — siempre exacto sea cual sea el alto real que el navegador termine renderizando (fuente/line-height reales). Fallback de 74px por si JS no llegó a correr todavía (progressive enhancement, no debería notarse en la práctica ya que project-nav.js corre muy temprano). */ #project-description, #project-resources { scroll-margin-top: calc(var(--project-nav-h, 74px) + 24px); } /* ---- Recursos del proyecto ---- */ .project-resources { padding-inline: clamp(var(--space-m), 6vw, 7.5rem); } .project-resources__inner { max-width: var(--container); margin-inline: auto; padding-block: 5rem 7.5rem; } .project-resources__title { margin: 2rem 0 3rem; font-family: var(--font-sans); font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: 7px; text-transform: uppercase; text-align: center; color: #18181b; } /* .resource-grid ya trae el grid de 4 columnas + responsive (archive-resource.css) — acá solo se apaga el padding-block-end propio de ese contexto (paginación del archive), esta vista no la tiene. */ .project-resources__grid { padding-block-end: 0 !important; } @media (width < 80rem) { .project-resources__inner { padding-block: 3.5rem 5rem; } } }