/* ============================================================ Catálogo Powerflex por marca e modelo (/powerflex/... — servido pelo powerflex.php) As páginas do catálogo trazem `page-powerflex page-powerflex-cat` no : a primeira dá-lhes o que já existe em powerflex.css (as notas do fabricante, o "sob consulta", as cores das séries) e a segunda é só para o que é novo aqui — o hero, as listas de marcas e modelos e a tabela de referências. Porquê tabela e não os cartões .pf-peca da página interativa: o VW Golf tem 1.282 referências em 19 variantes. Cartões com foto multiplicavam o peso da página por dez sem acrescentar texto nenhum à pesquisa. Mesma decisão do catálogo EBC. ============================================================ */ /* --- hero --- */ .page-powerflex-cat .hero-powerflex { background: linear-gradient(135deg, #0a0a0a 0%, #2a2a2a 100%); color: #fff; padding: 46px 0; text-align: center; } .page-powerflex-cat .hero-powerflex h1 { font-size: 2rem; font-weight: 800; margin-bottom: 10px; } .page-powerflex-cat .hero-powerflex .lead { max-width: 820px; margin: 0 auto; color: #d8d8d8; font-size: 1rem; } .page-powerflex-cat h2 { font-size: 1.3rem; font-weight: 800; margin: 34px 0 14px; } .page-powerflex-cat h2 small { font-weight: 600; color: #888; font-size: .85rem; } /* --- listas de marcas e modelos --- */ .page-powerflex-cat .pf-marcas, .page-powerflex-cat .pf-modelos, .pf-marcas-atalho ul { list-style: none; padding: 0; margin: 0 0 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .page-powerflex-cat .pf-marcas a, .page-powerflex-cat .pf-modelos a, .pf-marcas-atalho a { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #fff; border: 1px solid #e3e3e3; border-radius: 8px; padding: 10px 12px; font-weight: 700; font-size: .92rem; color: #1a1a1a; text-decoration: none; transition: border-color .15s, box-shadow .15s; } .page-powerflex-cat .pf-marcas a:hover, .page-powerflex-cat .pf-modelos a:hover, .pf-marcas-atalho a:hover { border-color: var(--primary-color); box-shadow: 0 4px 14px rgba(0,0,0,.08); } .page-powerflex-cat .pf-marcas a small { font-weight: 600; font-size: .78rem; color: #999; } .pf-marcas-atalho { max-width: 980px; margin: 0 auto; } .pf-marcas-atalho p a { display: inline; border: 0; padding: 0; background: none; color: var(--primary-color); } .pf-marcas-atalho p a:hover { box-shadow: none; text-decoration: underline; } /* --- uma secção por variante de suspensão --- */ .page-powerflex-cat .pf-variante { border-top: 1px solid #e3e3e3; padding-top: 6px; margin-bottom: 30px; } .page-powerflex-cat .pf-variante:first-of-type { border-top: 0; } /* --- tabela de referências --- */ .page-powerflex-cat .pf-tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .page-powerflex-cat .pf-tabela { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e3e3e3; border-radius: 10px; overflow: hidden; font-size: .88rem; min-width: 680px; } .page-powerflex-cat .pf-tabela thead th { background: #1a1a1a; color: #fff; text-align: left; font-size: .78rem; text-transform: uppercase; letter-spacing: .6px; padding: 10px 12px; white-space: nowrap; } .page-powerflex-cat .pf-tabela td { padding: 9px 12px; border-top: 1px solid #eee; vertical-align: top; } .page-powerflex-cat .pf-tabela tbody tr:hover td { background: #fafafa; } .page-powerflex-cat .pf-tabela td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; } /* A série é o que distingue duas referências para o mesmo ponto da suspensão, por isso leva a cor da série — as mesmas do catálogo interativo, para quem passa de uma página para a outra não se perder. */ .page-powerflex-cat .pf-tabela tr.serie-road td:nth-child(3) { color: #6f42c1; font-weight: 700; } .page-powerflex-cat .pf-tabela tr.serie-black td:nth-child(3) { color: #212529; font-weight: 700; } .page-powerflex-cat .pf-tabela tr.serie-heritage td:nth-child(3) { color: #6c757d; font-weight: 700; } .page-powerflex-cat .pf-tabela tr.serie-kit td:nth-child(3) { color: var(--primary-color); font-weight: 700; } /* --- nota final --- */ .page-powerflex-cat .pf-nota-final { background: #fff; border: 1px solid #e3e3e3; border-left: 4px solid var(--primary-color); border-radius: 10px; padding: 20px 22px; } @media (max-width: 575.98px) { .page-powerflex-cat .hero-powerflex { padding: 34px 0; } .page-powerflex-cat .hero-powerflex h1 { font-size: 1.5rem; } .page-powerflex-cat .pf-marcas, .page-powerflex-cat .pf-modelos, .pf-marcas-atalho ul { grid-template-columns: 1fr 1fr; } .page-powerflex-cat .pf-tabela { font-size: .82rem; } }