/* ============================================================================ SPICA STUDIO · V6 · BLOG (r14) --------------------------------------------------------------------------- Lenguaje HOJA puro: papel, tipografia editorial, ritmo de lectura. Es la pieza mas liviana del sitio (BRIEF 7, PLAN-CONSOLIDADO-R14 2.3): cero escenas vivas, cero video, cero pines, cero cortinas. Lo unico que se mueve es el [data-reveal] de la casa, que ya vive en base.css bajo el gate .js. Dos plantillas en una hoja: 1. el indice /blog/ .blog-hero + .blog-grid + .blog-card 2. el articulo /blog// .article + .blog__door + .blog__related Acento por specialty: el articulo declara data-specialty en y solo cambia el color del kicker y de los marcadores de lista. Violeta 01, teal 02, ambar 03 (con --amber-text en texto chico, que es donde el ambar base no pasa AA). Ninguna variante -vivid entra aqui: SPEC-UXUI-R14 8.3 las autoriza solo en superficies a sangre, y el blog no tiene ninguna. ========================================================================== */ /* ---- acento de la pagina --------------------------------------------------- Un solo token derivado por hoja. --blog-accent tine titulos de enlace y marcadores; --blog-accent-text es el mismo dueno en su version legible a tamano chico (el ambar base da 2.84 sobre papel y no pasa AA). */ .blog-page { --blog-accent: var(--violet); --blog-accent-text: var(--violet); --blog-door-surface: var(--lavender-light); } body[data-specialty="systems"] .blog-page { --blog-accent: var(--teal); --blog-accent-text: var(--teal); --blog-door-surface: var(--teal-light); } body[data-specialty="strategy"] .blog-page { --blog-accent: var(--amber); --blog-accent-text: var(--amber-text); --blog-door-surface: var(--amber-light); } .blog-page .kicker .kicker__num { color: var(--blog-accent-text); } /* el "Blog" del kicker del articulo es la vuelta al indice: la unica navegacion entre articulos que existe (PLAN-CONSOLIDADO-R14 1.F1). Por eso lleva subrayado EN REPOSO: pegado a la etiqueta de specialty, con la misma familia, tamano y peso, sin subrayado no habia forma de saber que era un enlace, y en tactil el hover no llega nunca. El subrayado va a media tinta para no competir con el texto y se cierra a plena tinta al enfocarlo. */ .blog-page a.kicker__num { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: from-font; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .blog-page a.kicker__num:hover, .blog-page a.kicker__num:focus-visible { text-decoration-color: currentColor; } /* ============================================================================ 1 · CABECERA (comun a indice y articulo) ========================================================================== */ /* el mismo respiro superior que los heroes del sitio: la pastilla del nav flota sobre papel y necesita aire para no pisar el kicker */ .blog-hero { padding: clamp(8.5rem, 20vh, 12rem) 0 0; } /* .shell ya trae margin-inline:auto, asi que un max-width sobre el propio .shell centraria la cabecera y la dejaria desalineada de la rejilla de tarjetas. La medida se le pone a cada hijo y el bloque arranca en el mismo borde izquierdo que la primera tarjeta. */ .blog-hero__inner { display: grid; gap: 1.1rem; justify-items: start; } .blog-hero__title { margin: 0; max-width: 20ch; text-wrap: balance; } .blog-hero__lead { max-width: 42ch; } /* ============================================================================ 2 · INDICE · las seis tarjetas ========================================================================== */ .blog-list { padding: var(--rhythm-half) 0 var(--rhythm); } /* La rejilla lleva CUATRO filas por tarjeta (portada, meta, titulo, linea) y cada tarjeta las hereda con subgrid. Sin esto, un titulo de tres lineas empuja su linea descriptiva 31px por debajo de la del vecino de dos lineas, que es lo primero que se nota en la unica pagina de rejilla del sitio (SPEC-UXUI-R14 7.1, ritmo editorial). Las filas son implicitas a proposito: asi el mismo par de reglas sirve a 3, 2 y 1 columna sin recontar. */ .blog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 2rem; } /* Tarjeta = enlace bloque. Sin sombra y sin superficie propia: es una hoja, no una app. Lo unico que responde al puntero es la imagen y el titulo. */ .blog-card { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0.9rem; column-gap: 0.9rem; align-content: start; color: inherit; } /* Respaldo para navegadores sin subgrid (Safari 15 y anteriores): se iguala el hueco del titulo a las tres lineas del mas largo, solo donde la rejilla tiene mas de una columna. En una columna no hay nada que alinear. */ @supports not (grid-template-rows: subgrid) { .blog-card { grid-row: auto; gap: 0.9rem; } @media (min-width: 768px) { .blog-card__title { min-height: calc(3 * 1.1em); } } } .blog-card__media { position: relative; overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 16 / 9; background: var(--mist); } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); } .blog-card:hover .blog-card__media img, .blog-card:focus-visible .blog-card__media img { transform: scale(1.03); } .blog-card__meta { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 460; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 0.75rem; } .blog-card__meta .blog-card__tag { color: var(--blog-accent-text); } .blog-card__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); line-height: 1.1; letter-spacing: -0.008em; text-wrap: balance; transition: color var(--dur-state) var(--ease); } /* el titulo se enciende con el acento de SU tarjeta, no con el violeta fijo: la etiqueta de la misma tarjeta ya va en teal o en ambar y ver el titulo irse a violeta rompia el par */ .blog-card:hover .blog-card__title, .blog-card:focus-visible .blog-card__title { color: var(--blog-accent-text); } .blog-card__line { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); max-width: 34ch; } /* el foco se dibuja sobre la tarjeta entera, no sobre la imagen */ .blog-card:focus-visible { outline: 2px solid var(--blog-accent-text); outline-offset: 6px; border-radius: var(--radius-md); } /* cada tarjeta declara su acento y de ahi salen la etiqueta, el titulo al hover y el anillo de foco. Ambar en su version legible (--amber-text): el ambar base da 2.84 sobre papel y no pasa AA en texto chico. */ .blog-card--systems { --blog-accent-text: var(--teal); } .blog-card--strategy { --blog-accent-text: var(--amber-text); } /* ============================================================================ 3 · ARTICULO ========================================================================== */ /* el articulo no tiene .blog-hero, asi que el respiro bajo la pastilla del nav lo pone la propia seccion, con la misma medida del indice */ .article { padding: clamp(8.5rem, 20vh, 12rem) 0 var(--rhythm); } /* Columna de lectura centrada dentro del shell (SPEC-UXUI-R14 7.2): la cabecera a 44rem, el cuerpo a 42rem y la portada a 60rem comparten eje. Con la columna pegada a la izquierda la portada, que va centrada, quedaba desalineada de todo lo demas. */ .article__head { display: grid; gap: 1.1rem; max-width: 44rem; margin-inline: auto; } .article__title { margin: 0; text-wrap: balance; } .article__meta { font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 460; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; gap: 0.75rem; } .article__lead { font-size: var(--text-lead); line-height: 1.55; color: var(--ink-soft); max-width: 46ch; } /* portada: mas ancha que el cuerpo, mas estrecha que el shell */ .article__cover { margin: var(--rhythm-half) auto; max-width: 60rem; overflow: hidden; border-radius: var(--radius-lg); aspect-ratio: 16 / 9; background: var(--mist); } .article__cover img { width: 100%; height: 100%; object-fit: cover; } /* cuerpo: unos 68 caracteres por linea */ .article__body { max-width: 42rem; margin-inline: auto; font-size: 1.06rem; line-height: 1.65; color: var(--ink); } .article__body p { margin: 0 0 1.25em; } .article__body p:last-child { margin-bottom: 0; } .article__body h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-h3); line-height: 1.08; letter-spacing: -0.008em; margin: 2.2em 0 0.75em; text-wrap: balance; } .article__body h2:first-child { margin-top: 0; } .article__body ul { display: grid; gap: 0.5rem; margin: 0 0 1.25em; padding-left: 1.15rem; list-style: disc; } .article__body li::marker { color: var(--blog-accent); } .article__body blockquote { margin: 0 0 1.25em; padding-left: 1.1rem; border-left: 3px solid var(--blog-accent); font-size: var(--text-lead); color: var(--ink-soft); } .article__body a { color: var(--violet); text-decoration: underline; text-underline-offset: 0.2em; } /* firma del pie: quien escribe es el estudio, no una persona */ .article__sign { max-width: 42rem; margin-inline: auto; margin-top: var(--rhythm-half); padding-top: 1.1rem; border-top: 1px solid var(--line); font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 460; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--ink-faint); } /* ============================================================================ 4 · CIERRE · la puerta y la solution relacionada PLAN-CONSOLIDADO-R14 1.F1 y 1.F2: no hay "More from the blog". El indice es la navegacion y esta a un clic en el kicker. ========================================================================== */ .blog__door { max-width: 44rem; margin-inline: auto; margin-top: var(--rhythm-half); padding: clamp(1.6rem, 3vw, 2.4rem); border-radius: var(--radius-lg); background: var(--blog-door-surface); display: grid; gap: 1rem; justify-items: start; } .blog__door h3 { margin: 0; } .blog__door p { color: var(--ink-soft); max-width: 48ch; } .blog__related { max-width: 44rem; margin-inline: auto; margin-top: 1.25rem; padding: clamp(1.3rem, 2.4vw, 1.8rem); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper-raised); display: grid; gap: 0.5rem; align-content: start; } .blog__related .kicker { margin-bottom: 0.15rem; } .blog__related-name { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; letter-spacing: -0.008em; } .blog__related-line { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.5; } .blog__related-more { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 0.35rem; font-family: var(--font-mono); font-size: var(--text-mono); font-weight: 500; letter-spacing: var(--ls-mono); text-transform: uppercase; color: var(--blog-accent-text); justify-self: start; } .blog__related-more svg { width: 0.95em; height: 0.95em; flex: none; transition: transform var(--dur-state) var(--ease); } .blog__related-more:hover svg, .blog__related-more:focus-visible svg { transform: translateX(3px); } /* el articulo 2 cubre dos lineas, asi que lleva dos tarjetas en pareja */ .blog__related-pair { max-width: 44rem; margin-inline: auto; margin-top: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* dentro del par cada tarjeta ES el item de la rejilla: con margin-inline auto el navegador le da su ancho de contenido y la centra en la columna, asi que aqui el margen vuelve a cero para que llene su celda */ .blog__related-pair .blog__related { margin: 0; max-width: none; } /* la segunda tarjeta del par pertenece a la otra specialty: su acento manda sobre el de la pagina, y en texto chico va la variante legible */ .blog__related--strategy { --blog-accent: var(--amber); --blog-accent-text: var(--amber-text); } .blog__related--growth { --blog-accent: var(--violet); --blog-accent-text: var(--violet); } .blog__related--growth .kicker .kicker__num, .blog__related--strategy .kicker .kicker__num { color: var(--blog-accent-text); } /* ============================================================================ 5 · RESPONSIVE Tres escalones, los mismos del sitio: 1080 (iPad y ventanas medianas), 767 (telefono grande) y 430 (iPhone). No se redefine ni un token aqui. ========================================================================== */ @media (max-width: 1080px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } } /* Los dos unicos enlaces propios del articulo (el "Blog" del kicker, que es la vuelta al indice, y el "How we..." de la tarjeta Related) median 33 x 19 y 192 x 19 en tactil. SPEC-UXUI-R14 9.1 pide 44 x 44 por debajo de 1081 y en (pointer: coarse). El area crece con padding y min-height, y el margen negativo devuelve exactamente ese crecimiento a la maquetacion: el texto no se mueve ni un pixel, solo el area que responde al dedo. Cuentas: alto de linea 19px -> 44px son +25px, o sea 12,5px arriba y abajo (0.78rem). El "How we..." conserva ademas su margin-top de 0.35rem (5.6px - 12.5px = -6.9px = -0.43rem). El padding lateral de 0.55rem (8.8px) se compensa con -0.55rem de margen, y lleva a "Blog" de 33px a 50.6px. */ /* r14 QA final P2-5: el par padding/margen negativo sacaba "Blog" 8,8px de la caja del kicker en 375 (qa/layout-qa.mjs: p.kicker RECORTADO +8,8 y a.kicker__num fuera de su caja en los seis articulos). El area de 44px va ahora en un pseudo-elemento absoluto, que responde al dedo igual (el clic sobre un ::after es un clic sobre el enlace) y no ocupa caja de layout: ni el texto ni las cajas se mueven un pixel. */ @media (max-width: 1080px), (pointer: coarse) { .blog-page a.kicker__num, .blog__related-more { position: relative; } .blog-page a.kicker__num::after, .blog__related-more::after { content: ""; position: absolute; left: -0.55rem; right: -0.55rem; top: 50%; height: 44px; min-width: 44px; transform: translateY(-50%); } } @media (max-width: 767px) { .blog-grid { grid-template-columns: minmax(0, 1fr); gap: 2.2rem; } .blog-card__line { max-width: none; } .article__body { font-size: 1rem; } .article__cover { border-radius: var(--radius-md); } .blog__related-pair { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 430px) { .blog-hero, .article { padding-top: clamp(7.5rem, 18vh, 9.5rem); } }