/* cases.css — estilos da seção de cases. A listagem (/cases) reaproveita as classes do site (.section, .wrap, .card, .tag, .eyebrow, .blog-grid, .blog-card) e só ajusta o que é próprio dela. As páginas de case (/cases/) trazem o CSS do próprio case, isolado sob .jc-doc pelo build (scripts/build-cases.mjs); aqui ficam apenas as regras de encaixe entre esse bloco e o resto do site. */ /* wrappers do chrome: transparentes, para o header sticky compartilhar o scroll do body */ #jynx-top, #jynx-bottom { display: contents; } /* ---------------- listagem ---------------- */ .cases-list .blog-breadcrumb { margin-bottom: 22px; } .cases-list .blog-card__title { font-size: 1.14rem; } .cases-list .blog-card__meta { color: var(--ink-48); font-size: .82rem; } .cases-card .tag--accent { align-self: flex-start; } /* ---------------- raiz do documento do case ---------------- */ /* O case foi escrito sobre o padrão de 16px do navegador; o site usa 17px no body. Fixar aqui mantém a página do case exatamente como foi entregue. */ .jc-doc { font-size: 16px; } /* O do site herda espaçamento entre letras e text-rendering próprios, que o documento standalone do case não tinha. Neutralizar aqui faz a página do case render exatamente com as métricas de texto com que foi entregue. */ .jc-doc { letter-spacing: normal; text-rendering: auto; } /* Fotos do case: a largura máxima já vem do CSS do próprio case. */ .jc-doc img { max-width: 100%; } /* A trilha do site vive dentro da hero do case, então precisa vencer o `a { color: inherit }` que o próprio case declara. */ .jc-doc .blog-breadcrumb { margin: 8px 0 26px; } .jc-doc .blog-breadcrumb a { color: var(--muted); transition: color .18s; } .jc-doc .blog-breadcrumb a:hover { color: var(--orange-d); } .jc-doc .blog-breadcrumb .sep { color: var(--line); } .jc-doc .blog-breadcrumb span[aria-current] { color: var(--ink); }