/* ===========================================================================
TEMA DO CATÁLOGO — /catalogo
---------------------------------------------------------------------------
Esta folha vem DEPOIS de site.css e trata só do miolo do documento. Ela
existia para separar a identidade do catálogo da identidade do posto que o
hospedava; agora que o site inteiro é o da JD Indústria, o papel dela mudou:
o site.css já traz a paleta e as duas fontes do catálogo, e aqui ficam apenas
as peças que só o documento tem — a nav grudenta de categorias, a ficha de
linha, a tabela de variantes e a galeria de fotos da página.
As @font-face saíram daqui: eram cópia exata das do site.css, que esta
página também carrega. Cores e fontes foram medidas do PDF, não escolhidas:
fontes pdffonts catalogo-2026-industria.pdf
-> OpenSans (Regular/Semibold/Bold/Extrabold/Condensed)
-> BebasNeueBold e AlternateGothicCompATF-Black nos títulos
(Alternate Gothic é fonte comercial da ATF e não existe em
versão livre; Bebas Neue, que o próprio PDF também embute,
cobre o mesmo papel de display condensado)
cores REMEDIDAS em 08/09/2026, amostrando as regiões por PAPEL nas
páginas renderizadas a 150 dpi e conferindo com os operadores
de cor dos dois PDFs. Os valores anteriores ("preto #090909,
prata #A6A6A6, vermelho #9E070B / #A01414") diziam-se medidos
e não batiam com nenhuma amostra:
-> #080606 fundo de página cheia (capa, contracapa)
-> #231F1E texto, títulos, cabeçalho de tabela, barra do rodapé
-> #8D8E90 célula de rótulo de linha da tabela
-> #B4B3B4 coluna alternada da tabela (o zebrado é VERTICAL)
-> #A61D21 estilhaços claros · #491111 o vermelho escuro deles
-> #FFFFFF célula de dado
Nenhuma tabela das duas edições usa vermelho.
TUDO aqui vive sob .cat-doc, e continua vivendo: o escopo impede que uma
regra de tabela ou de ficha de linha vaze para a home.
=========================================================================== */
.cat-doc {
/* Valores REMEDIDOS em 08/09/2026 sobre as páginas renderizadas a 150 dpi
(ghostscript -r150) e conferidos contra os operadores de cor dos dois PDFs.
Os anteriores diziam-se medidos e não eram: nenhum dos oito batia. */
--cat-preto: #080606; /* fundo de página cheia: capa e contracapa */
--cat-grafite: #231f1e; /* texto, títulos, cabeçalho de tabela e barra do rodapé */
--cat-tinta: #231f1e; /* = grafite: é a MESMA tinta do corpo de texto */
--cat-vermelho: #a61d21; /* estilhaços claros (#A11D20–#AB1E22 na amostra) */
--cat-vermelho-esc: #491111; /* o vermelho escuro atrás deles */
--cat-vermelho-vivo: #bb2025; /* a faceta mais clara, usada como realce */
--cat-prata: #8d8e90; /* célula de rótulo de linha da tabela */
--cat-prata-cl: #b4b3b4; /* coluna alternada da tabela */
--cat-branco: #f9f9f9;
--cat-linha: #d8d6d6;
--cat-txt: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--cat-dis: 'Bebas Neue', 'Archivo', 'Arial Narrow', system-ui, sans-serif;
background: var(--cat-branco);
color: var(--cat-tinta);
font-family: var(--cat-txt);
font-size: 1rem;
line-height: 1.62;
}
/* ---------- Faixa preta de abertura (a capa do PDF é preta) ---------- */
.cat-hero {
background: var(--cat-preto);
color: #fff;
/* O cabecalho do site e position:fixed com 70px de altura (.hdr__in
min-height:70px). Sem este espaco o rotulo 'Material do fornecedor'
fica ATRAS dele. A home resolve o mesmo problema com padding-top:7.2rem
no .hero__in; aqui o calculo e explicito para nao depender daquele valor. */
padding: calc(70px + clamp(1.4rem, 5vw, 2.8rem)) 0 clamp(2rem, 6vw, 3.4rem);
/* Os triângulos vêm do SVG de estilhacos(), não mais de gradiente: o
gradiente dava dois cortes retos, e o motivo do catálogo é FACETADO —
muitos triângulos de tamanhos diferentes. Ver inc/svg.php. */
position: relative;
overflow: hidden;
}
.cat-hero > .estilhacos--faixa { top: 0; }
.cat-hero > .estilhacos--canto { right: 0; bottom: 0; opacity: .9; }
.cat-pdf { position: relative; overflow: hidden; }
.cat-pdf > .estilhacos--faixa { top: 0; }
/* No catálogo os estilhaços usam a paleta impressa, sem o clareamento que o
.on-dark do site aplica. */
.cat-doc .estilhacos {
--sh-1: var(--cat-prata);
--sh-2: var(--cat-vermelho);
--sh-3: var(--cat-vermelho-vivo);
}
.cat-hero__linha {
font-family: var(--cat-txt);
font-weight: 600; font-size: .82rem;
letter-spacing: .18em; text-transform: uppercase;
color: var(--cat-prata);
}
.cat-hero h1 {
font-family: var(--cat-dis);
font-weight: 400;
font-size: clamp(2.9rem, 12vw, 5.2rem);
line-height: .92;
letter-spacing: .01em;
margin-top: .5rem;
text-transform: uppercase;
}
.cat-hero__lede { margin-top: 1.15rem; max-width: 62ch; color: #e4e2e2; }
/* ---------- Aviso de procedência. Não é rodapé jurídico: é a primeira
coisa que o leitor precisa saber, então fica no topo e visível. ---------- */
.cat-aviso {
margin-top: 1.6rem;
border-left: 4px solid var(--cat-vermelho-vivo);
background: rgba(255, 255, 255, .07);
padding: .95rem 1.15rem;
font-size: .95rem;
color: #f0eeee;
max-width: 74ch;
}
.cat-aviso b { color: #fff; }
/* ---------- Navegação por categoria ---------- */
.cat-nav {
/* Gruda ABAIXO do cabecalho fixo, nao debaixo dele. z-index menor que o
do .hdr (60) para que o cabecalho continue por cima ao rolar. */
/* Gruda ABAIXO do cabeçalho fixo, não debaixo dele. O valor vem do token,
e não de um 70 digitado à mão que silenciosamente descolaria na primeira
vez que a altura do cabeçalho mudasse. */
position: sticky; top: var(--hdr-h); z-index: 20;
background: var(--cat-preto);
border-top: 3px solid var(--cat-vermelho);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.cat-nav::-webkit-scrollbar { display: none; }
.cat-nav ul { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; min-width: max-content; }
.cat-nav a {
display: block;
padding: .95rem 1.1rem;
min-height: 48px; /* alvo de toque: WCAG 2.5.8 e HIG */
font-family: var(--cat-txt);
font-weight: 700; font-size: .82rem;
letter-spacing: .08em; text-transform: uppercase;
color: #cfcccc; text-decoration: none;
border-bottom: 3px solid transparent;
white-space: nowrap;
}
.cat-nav a:hover, .cat-nav a:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
/* ---------- Categoria ---------- */
.cat-cat { padding: clamp(2.2rem, 7vw, 3.6rem) 0 0; }
/* Ao pular por uma âncora, o topo da categoria tem de parar abaixo do
cabeçalho (--hdr-h) E da nav grudenta (~48px).
ATENÇÃO: scroll-margin-top SOMA com o scroll-padding-top que o site.css
declara no , que já é --hdr-h + 14px. Aqui entra só a DIFERENÇA — a
altura da nav menos os 14px que já sobram. Um valor absoluto aqui somaria
duas vezes o cabeçalho e jogaria o título 70px abaixo do lugar. */
.cat-doc [id] { scroll-margin-top: 34px; }
.cat-cat + .cat-cat { border-top: 1px solid var(--cat-linha); }
.cat-cat__cab { max-width: 68ch; }
.cat-cat h2 {
font-family: var(--cat-dis); font-weight: 400;
font-size: clamp(2rem, 7vw, 3rem); line-height: 1;
text-transform: uppercase; letter-spacing: .01em;
color: var(--cat-grafite);
}
.cat-cat h2::after {
content: ""; display: block;
width: 68px; height: 5px; margin-top: .7rem;
background: var(--cat-vermelho);
}
.cat-cat__apoio { margin-top: .95rem; color: #4b4444; }
/* ---------- Linha de produto ---------- */
.cat-linha { padding: clamp(1.8rem, 5vw, 2.6rem) 0; }
.cat-linha + .cat-linha { border-top: 1px dashed var(--cat-linha); }
.cat-linha__topo { display: grid; gap: clamp(1.2rem, 4vw, 2.2rem); }
@media (min-width: 820px) {
.cat-linha__topo { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
}
.cat-linha__topo > * { min-width: 0; }
.cat-foto {
margin: 0;
/* Item de grid tem min-width:auto e NAO encolhe abaixo do proprio conteudo:
a imagem de 400px mais o padding forcavam 449px dentro de um pai de 351,
estourando a pagina inteira em 153px no iPhone 13. min-width:0 devolve o
controle ao grid. Mesma armadilha vale para a galeria em .grid--3. */
min-width: 0;
background: #fff;
border: 1px solid var(--cat-linha);
display: grid; place-items: center;
padding: clamp(1rem, 4vw, 1.8rem);
aspect-ratio: 4 / 3;
}
.cat-foto img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.cat-linha__rot {
font-weight: 600; font-size: .78rem;
/* No PDF esta etiqueta é grafite, não vermelha — o vermelho do catálogo
vive só nos estilhaços. A entreletra desce de .17em para .10em: a Open
Sans do impresso não abre tanto. */
letter-spacing: .10em; text-transform: uppercase; color: var(--cat-grafite); opacity: .72;
}
.cat-linha h3 {
font-family: var(--cat-dis); font-weight: 400;
font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1;
text-transform: uppercase; margin-top: .3rem;
color: var(--cat-grafite);
}
.cat-linha__desc { margin-top: .9rem; }
.cat-linha__cod {
display: inline-block; margin-top: .9rem;
font-size: .8rem; letter-spacing: .06em;
background: var(--cat-prata-cl); color: var(--cat-grafite);
padding: .3rem .6rem;
}
.cat-attrs { margin-top: 1.1rem; display: grid; gap: .34rem; list-style: none; padding: 0; }
.cat-attrs li { font-size: .95rem; }
.cat-attrs b { font-weight: 700; }
/* ---------- Ponte para as fichas de produto (02/10/2026) ---------- */
.cat-fichas { margin-top: 1.3rem; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; }
.cat-fichas a {
display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .55rem 1rem;
background: var(--cat-vermelho); color: #fff; border-radius: 6px;
font-weight: 700; font-size: .9rem; text-decoration: none;
transition: background .18s ease;
}
.cat-fichas a:hover { background: var(--cat-vermelho-vivo); }
.cat-fichas svg { width: 18px; height: 18px; flex: none; }
/* ---------- Tabela de variantes ----------
Rola no eixo X dentro do próprio contêiner: uma tabela de 6 colunas não
cabe em 320 px, e a alternativa (encolher a fonte) deixa ilegível. */
.cat-tab-wrap {
margin-top: clamp(1.2rem, 4vw, 1.8rem);
overflow-x: auto; -webkit-overflow-scrolling: touch;
/* O contêiner é focável (ver catalogo.php): precisa de anel de foco próprio,
senão o teclado entra nele sem nenhum sinal na tela. */
scroll-padding-left: 0;
}
.cat-tab-wrap:focus-visible { outline: 3px solid var(--cat-grafite); outline-offset: 2px; }
/* border-collapse:collapse ANULA position:sticky em | no Chromium — a borda
colapsada some e a célula não gruda. Com 'separate' + border-spacing o
desenho fica idêntico: o 'border: 2px solid #fff' de cada célula vira o
próprio border-spacing. Com 'separate', duas bordas vizinhas somariam 4px em
vez dos 2px que o collapse fundia; o espaçamento faz o mesmo desenho com um
valor só.
ATENÇÃO, e é armadilha de verdade: este comentário já foi fechado cedo demais
uma vez, e as linhas restantes ficaram FORA dele. O parser leu aquilo como um
seletor malformado e descartou o bloco seguinte inteiro — a regra .cat-tab
abaixo nunca chegou a ser aplicada, nem o min-width de 520px, nem o fundo
branco, nem a fonte. Comentário de CSS não aninha e não tem escape: um
fecha-comentário escrito no meio do texto fecha o comentário de verdade. */
.cat-tab {
border-collapse: separate; border-spacing: 2px;
background: #fff;
width: 100%; min-width: 520px; font-size: .9rem;
}
.cat-tab th, .cat-tab td { padding: .62rem .8rem; text-align: center; }
/* A coluna do rótulo GRUDA na borda esquerda. Sem isto, depois de ~180px de um
scroll de ~1.060px o rótulo da linha sai da tela e os números viram uma grade
de valores sem legenda: dá para ler "3CV" e não dá para saber que é o motor. */
.cat-tab th[scope="row"],
.cat-tab thead th:first-child {
position: sticky; left: 0; z-index: 1;
/* a célula grudada passa POR CIMA das outras: precisa de fundo opaco próprio,
e de uma sombra que marque a borda quando há conteúdo por baixo. */
box-shadow: 2px 0 0 #fff;
}
.cat-tab thead th:first-child { z-index: 2; }
/* No PDF a linha inteira do cabeçalho é grafite com texto branco — INCLUSIVE a
primeira célula, que aqui vinha pintada de vermelho. Não há vermelho em
nenhuma tabela das duas edições. */
.cat-tab thead th {
background: var(--cat-grafite); color: #fff;
font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: .8rem;
}
/* Rótulo de linha: prata #8d8e90 com texto GRAFITE, como no impresso.
Era branco sobre #a6a6a6 = 2,43:1, reprovando a WCAG AA em 70 células;
a cor do PDF dá 4,98:1. Fidelidade e acessibilidade apontavam para o
mesmo lugar. */
.cat-tab tbody th {
background: var(--cat-prata); color: var(--cat-grafite);
text-align: left; font-weight: 700; text-transform: uppercase;
letter-spacing: .04em; font-size: .78rem; white-space: nowrap;
}
/* O zebrado do catálogo é por COLUNA, não por linha: cada modelo é uma faixa
vertical, e é isso que deixa a coluna do modelo legível ao rolar na
horizontal. A primeira célula da linha é o | do rótulo, então as colunas
de dado começam no filho 2: par = branco, ímpar = prata clara. */
.cat-tab tbody td:nth-child(even) { background: #fff; }
.cat-tab tbody td:nth-child(odd) { background: var(--cat-prata-cl); }
.cat-tab td:empty::after { content: "—"; color: var(--cat-grafite); opacity: .55; }
/* ---------- Galeria: as demais fotos da MESMA página do catálogo ----------
Várias páginas mostram três ou quatro equipamentos (os quatro kits da 16, os
quatro itens da 17) e só a primeira foto entrava na ficha. */
.cat-galeria {
margin-top: clamp(1.1rem, 3.5vw, 1.6rem);
display: grid; gap: clamp(.7rem, 2vw, 1rem);
grid-template-columns: repeat(2, minmax(0, 1fr));
list-style: none; padding: 0;
}
@media (min-width: 860px) { .cat-galeria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cat-galeria .cat-foto { aspect-ratio: 1 / 1; padding: clamp(.6rem, 2vw, 1rem); }
/* ---------- Faixa dos PDFs ---------- */
.cat-pdf { background: var(--cat-preto); color: #fff; padding: clamp(2rem, 6vw, 3rem) 0; margin-top: clamp(2.4rem, 7vw, 3.6rem); }
.cat-pdf h2 { font-family: var(--cat-dis); font-weight: 400; font-size: clamp(1.8rem, 6vw, 2.6rem); text-transform: uppercase; line-height: 1; }
.cat-pdf__grid { display: grid; gap: clamp(1rem, 3vw, 1.4rem); margin-top: 1.5rem; }
@media (min-width: 640px) { .cat-pdf__grid { grid-template-columns: repeat(2, 1fr); } }
.cat-pdf__item {
display: flex; gap: 1rem; align-items: center;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .14);
padding: 1rem; text-decoration: none; color: #fff;
min-height: 48px;
}
.cat-pdf__item:hover { background: rgba(255, 255, 255, .12); border-color: var(--cat-vermelho-vivo); }
.cat-pdf__item img { width: 74px; height: auto; flex: none; border: 1px solid rgba(255,255,255,.2); }
.cat-pdf__item b { display: block; font-size: 1.02rem; }
.cat-pdf__item span { display: block; font-size: .87rem; color: #cfcccc; margin-top: .2rem; }
/* ---------- Selos do fornecedor ---------- */
.cat-selos { margin-top: clamp(2rem, 6vw, 2.8rem); text-align: center; }
.cat-selos__row { display: flex; gap: clamp(1.2rem, 5vw, 2.2rem); justify-content: center; align-items: center; flex-wrap: wrap; }
.cat-selos__row img { height: 78px; width: auto; }
.cat-selos figcaption { margin-top: 1rem; font-size: .88rem; color: #4b4444; max-width: 62ch; margin-inline: auto; }
/* ---------- Volta para a home ---------- */
.cat-volta { padding: clamp(2rem, 6vw, 3rem) 0; text-align: center; }
.cat-volta a {
display: inline-flex; align-items: center; gap: .5rem;
min-height: 52px; padding: .8rem 1.6rem;
background: var(--cat-vermelho); color: #fff;
font-weight: 700; text-decoration: none;
}
.cat-volta a:hover { background: var(--cat-vermelho-vivo); }
@media (prefers-reduced-motion: reduce) {
.cat-doc * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ===========================================================================
FEEDBACK DE TOQUE E PISTA DE ROLAGEM
---------------------------------------------------------------------------
O do site zera o -webkit-tap-highlight-color com o comentário "temos
:active próprio" — e isso era verdade só na home: este arquivo não tinha um
único :active. Em celular, tocar em qualquer coisa do catálogo não devolvia
nada: nem realce nativo (desligado), nem estado próprio (inexistente).
=========================================================================== */
.cat-nav a, .cat-pdf__item, .cat-volta a {
transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.cat-nav a:active { background: rgba(255, 255, 255, .18); color: #fff; }
.cat-pdf__item:active { background: rgba(255, 255, 255, .16); }
.cat-volta a:active { background: var(--cat-vermelho-vivo); }
.cat-linha__cod:active { filter: brightness(.94); }
/* A nav de categorias tem ~1.700px e rola na horizontal sem nenhum sinal de
que rola. A máscara apaga os últimos 40px, que é a pista visual mais barata
que existe: o rótulo cortado diz "tem mais coisa aqui".
Onde houver animação por rolagem, a máscara SOME ao chegar no fim — assim o
último item não fica eternamente esmaecido. */
.cat-nav {
-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
scroll-snap-type: x proximity;
scroll-padding-left: 0;
}
.cat-nav li { scroll-snap-align: start; }
@supports (animation-timeline: scroll(self inline)) {
.cat-nav {
animation: cat-nav-fim linear both;
animation-timeline: scroll(self inline);
}
@keyframes cat-nav-fim {
/* dos 85% em diante a máscara se abre: chegou ao fim, não há mais o que sugerir */
to { -webkit-mask-image: linear-gradient(90deg, #000 100%, #000);
mask-image: linear-gradient(90deg, #000 100%, #000); }
}
}
@media (prefers-reduced-motion: reduce) {
.cat-nav a, .cat-pdf__item, .cat-volta a { transition: none; }
.cat-nav { animation: none; }
}
/* ===========================================================================
TEMA CLARO — 19/10/2026
---------------------------------------------------------------------------
O cliente pediu o site inteiro em tons claros e com menos vermelho nos
detalhes. O documento acima foi desenhado em cima da capa preta do PDF; em
vez de reescrever cada regra (e perder os comentários que explicam as
tabelas), as peças escuras são repintadas aqui, por último. A TABELA não
muda: ela já é a do impresso — grafite, prata e branco, sem vermelho.
=========================================================================== */
.cat-hero {
background: var(--papel); color: var(--grafite);
/* O cabeçalho deixou de flutuar sobre a página: o já desconta a
altura dele (site.css), e os 70px somados aqui sobravam. */
padding: clamp(1.4rem, 5vw, 2.6rem) 0 clamp(1.6rem, 5vw, 2.6rem);
border-bottom: 1px solid var(--linha);
}
.cat-hero > .estilhacos, .cat-pdf > .estilhacos { display: none; }
.cat-hero__linha { color: var(--acento); }
.cat-hero__lede { color: var(--grafite-80); }
.cat-hero__lede a { color: var(--acento); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cat-aviso {
background: #fff; color: var(--grafite-80);
border: 1px solid var(--linha); border-left: 4px solid var(--prata-cl);
}
.cat-aviso b { color: var(--grafite); }
.cat-aviso a { color: var(--acento); }
.cat-nav { background: #fff; border-top: 0; border-bottom: 1px solid var(--linha); }
.cat-nav a { color: var(--grafite-cl); }
.cat-nav a:hover, .cat-nav a:focus-visible { color: var(--grafite); background: var(--acento-100); }
.cat-nav a:active { background: var(--acento-200); color: var(--grafite); }
.cat-cat h2::after { background: var(--prata-cl); height: 3px; }
.cat-fichas a { background: var(--grafite); border-radius: var(--r); }
.cat-fichas a:hover { background: var(--grafite-80); }
.cat-pdf { background: var(--acento-100); color: var(--grafite); }
.cat-pdf__item { background: #fff; border-color: var(--linha); color: var(--grafite); border-radius: var(--r); }
.cat-pdf__item:hover { background: #fff; border-color: var(--prata); }
.cat-pdf__item:active { background: var(--acento-200); }
.cat-pdf__item img { border-color: var(--linha); }
.cat-pdf__item span { color: var(--muted); }
.cat-selos figcaption { color: var(--muted); }
/* O selo de 11 anos é recorte da capa preta: o círculo dele, sem a caixa. */
.cat-selos__row img[src*="11anos"] { border-radius: 50%; }
.cat-volta a { background: var(--grafite); border-radius: var(--r); }
.cat-volta a:hover, .cat-volta a:active { background: var(--grafite-80); }
|