/* lumikit-paginas.css — o CSS de todas as páginas, num arquivo só Gerado pelo limpa_css.py a partir de css/paginas/*.css. Cada trecho está identificado pelo nome do arquivo de origem. Para mexer no estilo de uma página, procure pelo comentário com o nome dela. Se preferir voltar a ter um arquivo por página, os originais continuam em css/paginas/. */ /* ================================================================== _componentes.css ================================================================== */ /* _componentes.css — estilos dos arquivos que são incluídos por várias páginas (template de produto, formulário de checkout, cards das linhas, configurador do cabo, avisos). Carregado sempre, no do index.php. */ /* aviso_carrinho.css — estilos da página aviso_carrinho.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ .av-wrap { padding: 40px 0 60px; } .av-caixa { max-width: 620px; margin: 0 auto; background: var(--lk-branco); border: 1px solid var(--lk-linha); border-top: 3px solid var(--lk-atencao); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 28px 30px; text-align: center; } .av-icone { font-size: 34px; color: var(--lk-atencao); margin-bottom: 12px; } .av-caixa h2 { font-size: 19px; font-weight: 800; color: var(--lk-texto); margin: 0 0 10px; } .av-caixa p { font-size: 14.5px; line-height: 1.7; color: var(--lk-texto-3); margin: 0 0 20px; } .av-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 14.5px; font-weight: 700; padding: 12px 26px; text-decoration: none !important; transition: background .15s; } .av-btn:hover { background: var(--lk-verde-escuro); } .av-secundario { display: block; margin-top: 14px; font-size: 13px; color: var(--lk-texto-4) !important; } @media (max-width: 600px) { .av-caixa { padding: 22px 18px; } .av-btn { width: 100%; justify-content: center; } } /* cabo_dmx_configurador.css — estilos da página cabo_dmx_configurador.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== Montador de cabos ===== */ .cd-wrap { margin: 0 0 6px; } .cd-previa { background: var(--lk-branco); border: 1px solid var(--lk-linha); padding: 10px; margin-bottom: 14px; } .cd-desenho { max-width: 330px; margin: 0 auto; } .cd-desenho svg { width: 100%; height: auto; display: block; } .cd-bloco { margin-bottom: 16px; } .cd-titulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin: 0 0 8px; } /* Conectores em lista: ocupa bem menos altura que uma grade de botões e deixa as opções incompatíveis desabilitadas na própria lista. */ .cd-pontas { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .cd-campo { display: block; margin: 0; } .cd-campo-nome { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin-bottom: 5px; } .cd-select { width: 100%; border: 1.5px solid var(--lk-verde-campo) !important; box-shadow: none !important; background: var(--lk-branco); color: var(--lk-texto); font-size: 14.5px; font-weight: 600; padding: 10px 12px !important; height: auto; cursor: pointer; } .cd-select:focus { border-color: var(--lk-verde) !important; outline: none; } .cd-metragem { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cd-metragem input[type="number"] { width: 90px; border: 1.5px solid var(--lk-verde-campo) !important; box-shadow: none !important; padding: 8px 10px !important; font-size: 15px; font-weight: 700; color: var(--lk-texto); text-align: center; } .cd-metragem input[type="range"] { flex: 1; min-width: 160px; accent-color: var(--lk-verde-forte); } .cd-metragem .cd-unidade { font-size: 14px; color: var(--lk-texto-3); } /* Sugestões com a cor dos conectores, como na versão antiga */ .cd-sugestoes { display: flex; flex-wrap: wrap; gap: 6px; } .cd-sug { border: 0; color: var(--lk-branco); font-size: 12.5px; font-weight: 600; padding: 8px 12px; cursor: pointer; text-shadow: 0 1px 1px rgba(0,0,0,.25); transition: filter .15s, transform .1s; } .cd-sug:hover { filter: brightness(1.12); transform: translateY(-1px); } .cd-sug:active { transform: none; } .cd-resumo { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); padding: 14px 16px; } .cd-resumo-linha { font-size: 13px; color: var(--lk-verde-rotulo); margin-bottom: 6px; } .cd-precos { display: flex; flex-wrap: wrap; gap: 18px; align-items: baseline; margin: 8px 0 12px; } .cd-preco-normal { font-size: 13.5px; color: var(--lk-texto-3); } .cd-preco-cartao { font-size: 15px; color: var(--lk-verde-texto); font-weight: 600; } .cd-preco-pix { font-size: 22px; font-weight: 800; color: var(--lk-verde-forte); } .cd-preco-rotulo { font-size: 11px; color: var(--lk-rotulo); display: block; font-weight: 400; } .cd-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; border: 0; font-size: 15px; font-weight: 700; padding: 13px 26px; cursor: pointer; transition: background .15s; } .cd-btn:hover:not(:disabled) { background: var(--lk-verde-escuro); } .cd-btn:disabled { background: var(--lk-desabilitado); cursor: not-allowed; } .cd-aviso { background: var(--lk-erro-fundo); border-left: 4px solid var(--lk-erro); color: var(--lk-erro-texto); padding: 12px 14px; font-size: 13.5px; line-height: 1.6; } .cd-link { font-size: 12px; color: var(--lk-texto-4); margin-top: 10px; } .cd-link input { border: 1px solid var(--lk-linha) !important; box-shadow: none !important; font-size: 12px; padding: 5px 8px !important; width: 260px; color: var(--lk-texto-3); } @media (max-width: 600px) { .cd-precos { gap: 12px; } .cd-btn { width: 100%; justify-content: center; } } /* checkout_form.css — estilos da página checkout_form.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== FORMULÁRIO DO PEDIDO ===== */ .cf-wrap { color: var(--lk-texto); } .cf-header { background: var(--lk-preto); padding: 26px 0 22px; border-bottom: 3px solid var(--lk-filete); position: relative; overflow: hidden; } .cf-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.07) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .cf-header .container { position: relative; z-index: 1; } .cf-header h1 { font-size: clamp(19px, 2.6vw, 26px); font-weight: 800; color: var(--lk-branco); margin: 0; } .cf-header p { color: var(--lk-preto-texto); font-size: 13.5px; margin: 7px 0 0; } .cf-body { padding: 26px 0 50px; } .cf-conteudo { max-width: 900px; margin: 0 auto; } .cf-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 24px 0 12px; display: flex; align-items: center; gap: 10px; } .cf-label:first-child { margin-top: 0; } .cf-label::after { content: ''; flex: 1; height: 1px; background: var(--lk-linha); } .cf-bloco { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 18px 20px; } .cf-linha { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; } .cf-campo { grid-column: span 12; display: flex; flex-direction: column; } /* O atributo hidden esconde o elemento pela folha de estilo do navegador (display:none), mas qualquer display definido aqui vence — e o campo do CPF continuava visível ao escolher CNPJ. Esta linha devolve o comportamento. */ .cf-campo[hidden] { display: none !important; } .cf-metade { grid-column: span 6; } .cf-terco { grid-column: span 4; } .cf-dois-tercos { grid-column: span 8; } .cf-quarto { grid-column: span 3; } .cf-tres-quartos { grid-column: span 9; } .cf-campo label { font-size: 12px; font-weight: 700; color: var(--lk-texto-2); margin: 0 0 5px; display: flex; align-items: center; gap: 6px; } .cf-opcional { font-size: 10.5px; font-weight: 600; color: var(--lk-texto-5); text-transform: uppercase; letter-spacing: .04em; } .cf-input { width: 100%; border: 1.5px solid var(--lk-verde-campo) !important; box-shadow: none !important; padding: 10px 12px !important; font-size: 15px; color: var(--lk-texto); background: var(--lk-branco); transition: border-color .15s; } .cf-input:focus { border-color: var(--lk-verde-forte) !important; } /* FOCO VISÍVEL PELO TECLADO. Antes havia `outline: none` aqui: o navegador desenha um anel em volta do campo que recebeu o foco, e ele era apagado, sobrando só uma troca discreta de cor da borda. Quem navega de TAB perdia a referência de onde estava — o que dá a impressão de que o TAB "pula" ou não segue a tela. :focus-visible aparece só na navegação por teclado; quem clica com o mouse continua vendo apenas a borda mudar de cor. */ .cf-input:focus-visible, .cf-tipo input:focus-visible + label, .cf-btn:focus-visible, .cf-voltar:focus-visible { outline: 2px solid var(--lk-verde-forte); outline-offset: 2px; } .cf-input.cf-erro { border-color: var(--lk-erro) !important; background: var(--lk-fundo); } .cf-input.cf-ok { border-color: var(--lk-verde-suave) !important; } .cf-input[readonly] { background: var(--lk-fundo-3); color: var(--lk-texto-3); } .cf-ajuda { font-size: 11.5px; color: var(--lk-texto-5); margin-top: 4px; } .cf-mensagem { font-size: 12px; color: var(--lk-erro); margin-top: 4px; min-height: 0; } .cf-mensagem:empty { display: none; } /* escolha CPF / CNPJ */ .cf-tipo { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } .cf-tipo input { position: absolute; opacity: 0; pointer-events: none; } .cf-tipo label { display: inline-flex; align-items: center; gap: 8px; margin: 0; background: var(--lk-branco); border: 1.5px solid var(--lk-verde-campo); color: var(--lk-texto); font-size: 14px; font-weight: 600; padding: 9px 20px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .cf-tipo label:hover { border-color: var(--lk-verde); } .cf-tipo input:checked + label { background: var(--lk-verde-forte); border-color: var(--lk-verde-escuro); color: var(--lk-branco); } /* o foco dos radios entrou na regra :focus-visible logo acima */ /* entrega */ .cf-entrega { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); padding: 13px 16px; font-size: 13.5px; color: var(--lk-verde-texto); margin-bottom: 18px; } .cf-entrega b { color: var(--lk-verde-texto-esc); } .cf-entrega a { color: var(--lk-verde-texto); font-weight: 600; } /* resumo lateral */ .cf-grid { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 22px; align-items: start; } .cf-resumo { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); position: sticky; top: 90px; } .cf-resumo h3 { font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--lk-texto); margin: 0; padding: 13px 16px; border-bottom: 1px solid var(--lk-linha-2); } .cf-resumo-corpo { padding: 13px 16px 16px; } /* Linha de valor (frete, desconto): rótulo à esquerda, valor à direita. O valor não quebra — antes o "R$" ficava numa linha e o número na outra. */ .cf-resumo-linha { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--lk-texto-3); padding: 4px 0; } .cf-resumo-linha b { color: var(--lk-texto); white-space: nowrap; } /* Item do pedido: o nome ocupa a largura toda e o valor vai embaixo, alinhado à direita. Numa coluna de 330px, nome e preço na mesma linha espremiam os dois e quebravam no meio das palavras. */ .cf-resumo-item { padding: 7px 0; border-bottom: 1px dotted var(--lk-linha-2); } .cf-resumo-item:last-of-type { border-bottom: none; } .cf-resumo-item-nome { display: flex; gap: 7px; font-size: 12.5px; line-height: 1.45; color: var(--lk-texto-3); } .cf-resumo-item-qtd { flex-shrink: 0; font-weight: 700; color: var(--lk-verde-forte); } .cf-resumo-item-texto { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; /* nome muito longo para em duas linhas */ } .cf-resumo-item-valor { text-align: right; font-size: 13.5px; font-weight: 700; color: var(--lk-texto); margin-top: 2px; white-space: nowrap; } .cf-resumo-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--lk-linha-2); margin-top: 8px; padding-top: 10px; } .cf-resumo-total span { font-size: 13px; color: var(--lk-texto-3); } .cf-resumo-total b { font-size: 20px; font-weight: 800; color: var(--lk-verde-forte); } /* rodapé do formulário */ .cf-acoes { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; } .cf-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--lk-verde-forte); border: 0; color: var(--lk-branco) !important; font-size: 15px; font-weight: 700; padding: 13px 28px; cursor: pointer; transition: background .15s; } .cf-btn:hover:not(:disabled) { background: var(--lk-verde-escuro); } .cf-btn:disabled { background: var(--lk-desabilitado); cursor: not-allowed; } /* Lista do que falta para concluir o pedido. Aparece ao clicar em "Confirmar pedido" com algo pendente — inclusive quando o que falta é a escolha entre pessoa física e empresa, que antes não deixava rastro nenhum na tela porque o campo de CPF/CNPJ ainda nem estava visível. */ .cf-pendencias { background: var(--lk-erro-fundo); border: 1px solid var(--lk-erro); border-left: 4px solid var(--lk-erro); color: var(--lk-erro-texto); padding: 13px 16px; font-size: 13.5px; margin-bottom: 16px; } .cf-pendencias ul { margin: 8px 0 0; padding-left: 20px; } .cf-pendencias li { margin: 3px 0; } .cf-pendencias[hidden] { display: none !important; } .cf-voltar { font-size: 13px; color: var(--lk-texto-4) !important; text-decoration: none !important; } .cf-voltar:hover { text-decoration: underline !important; } .cf-carregando { display: none; align-items: center; gap: 8px; font-size: 13px; color: var(--lk-texto-3); } .cf-carregando.ativo { display: inline-flex; } @media (max-width: 991px) { .cf-grid { grid-template-columns: 1fr; } .cf-resumo { position: static; order: -1; } } @media (max-width: 600px) { .cf-metade, .cf-terco, .cf-dois-tercos, .cf-quarto, .cf-tres-quartos { grid-column: span 12; } .cf-btn { width: 100%; justify-content: center; } } /* linha_produtos.css — estilos da página linha_produtos.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= PÁGINAS DE LINHA — estilo alinhado ao template_produto (escopado em .lp-wrap) ========================================= */ .lp-wrap { color: var(--lk-texto); } .lp-header { background: var(--lk-preto); padding: 36px 0 30px; border-bottom: 3px solid var(--lk-filete); position: relative; overflow: hidden; } .lp-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.07) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .lp-header .container { position: relative; z-index: 1; } .lp-header-title { font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.2; letter-spacing: -.01em; } .lp-header-sub { color: var(--lk-preto-texto); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; max-width: 820px; } .lp-body { padding: 32px 0 56px; } .lp-body p { font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); max-width: 900px; } .lp-body > .container > ul { font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); max-width: 900px; } .lp-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; } .lp-section-label::after { content: ''; flex: 1; height: 1px; background: var(--lk-linha); } .lp-sub-label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin: 22px 0 12px; } /* Grade de cards */ .lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin: 0 0 8px; align-items: stretch; } .lp-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); display: flex; flex-direction: column; transition: box-shadow .15s, transform .1s; } .lp-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.09); transform: translateY(-2px); } .lp-card-img { display: flex; align-items: center; justify-content: center; background: var(--lk-branco); padding: 0; min-height: 170px; position: relative; border-bottom: 1px solid var(--lk-linha-2); text-decoration: none !important; } .lp-card-img img { max-width: 100%; max-height: 190px; height: auto; display: block; } .lp-card-semimg { color: var(--lk-desabilitado-2); font-size: 34px; } .lp-badge { position: absolute; top: 10px; right: 10px; background: var(--lk-verde-forte); color: var(--lk-branco); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; } .lp-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; } .lp-card-title { font-size: 14.5px; font-weight: 700; line-height: 1.35; margin: 0 0 8px; } .lp-card-title a { color: var(--lk-texto) !important; text-decoration: none !important; } .lp-card-title a:hover { color: var(--lk-verde-forte) !important; } .lp-card-text { font-size: 13px !important; line-height: 1.6 !important; color: var(--lk-texto-3) !important; margin: 0 0 14px !important; flex: 1; } .lp-card-list { font-size: 13px; line-height: 1.6; color: var(--lk-texto-3); margin: 0 0 14px; padding-left: 18px; flex: 1; } .lp-card-list li { margin-bottom: 4px; } .lp-btn { display: inline-block; align-self: flex-start; margin-top: auto; padding: 9px 18px; font-size: 13px; font-weight: 600; background: var(--lk-verde-forte); color: var(--lk-branco) !important; text-decoration: none !important; transition: background .15s; } .lp-btn:hover { background: var(--lk-verde-escuro); color: var(--lk-branco) !important; } .lp-nota { font-size: 12.5px; color: var(--lk-texto-4); margin: 6px 0 0; } @media (max-width: 767px) { .lp-header { padding: 24px 0 20px; } .lp-body { padding: 20px 0 40px; } .lp-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } /* no toque, o título do card precisa de uma área maior que a altura da letra */ .lp-card-title a { display: inline-block; padding: 6px 0; } .lp-card-list a, .lp-card-text a { display: inline-block; padding: 4px 0; } .lp-btn { padding: 12px 20px; } } /* seletor_firmware.css — estilos da página seletor_firmware.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== Seletor de firmwares (popup) ===== */ .pp-fw { position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center; padding: 20px; } .pp-fw[hidden] { display: none; } .pp-fw-backdrop { position: absolute; inset: 0; background: rgba(10,16,12,.66); backdrop-filter: blur(2px); } .pp-fw-dialog { position: relative; background: var(--lk-fundo-3); width: 100%; max-width: 1000px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 18px 50px rgba(0,0,0,.35); animation: pp-fw-in .16s ease-out; } @keyframes pp-fw-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .pp-fw-head { background: var(--lk-preto); border-bottom: 3px solid var(--lk-filete); padding: 18px 22px; display: flex; align-items: flex-start; gap: 16px; } .pp-fw-head h3 { color: var(--lk-branco); font-size: 18px; font-weight: 800; margin: 0; line-height: 1.3; } .pp-fw-head p { color: var(--lk-preto-texto); font-size: 13px; line-height: 1.5; margin: 5px 0 0; } .pp-fw-x { margin-left: auto; background: none; border: 0; color: var(--lk-texto-5); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; transition: color .15s; } .pp-fw-x:hover { color: var(--lk-branco); } .pp-fw-filtros { background: var(--lk-branco); border-bottom: 1px solid var(--lk-linha); padding: 14px 22px; } .pp-fw-busca { display: flex; align-items: center; border: 1px solid var(--lk-linha); background: var(--lk-branco); transition: border-color .15s; } .pp-fw-busca:focus-within { border-color: var(--lk-verde); } .pp-fw-busca i { padding: 0 11px; color: var(--lk-texto-5); font-size: 14px; } .pp-fw-busca input { flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 10px 4px !important; font-size: 14px; color: var(--lk-texto); background: transparent; } .pp-fw-limpar { padding: 0 12px; color: var(--lk-preto-texto); cursor: pointer; display: none; } .pp-fw-limpar.visivel { display: block; } .pp-fw-limpar:hover { color: var(--lk-erro-claro); } .pp-fw-selects { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 12px; } .pp-fw-selects label { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); display: flex; align-items: center; gap: 7px; margin: 0; } .pp-fw-selects select { border: 1px solid var(--lk-linha); background: var(--lk-branco); padding: 6px 9px; font-size: 13px; color: var(--lk-texto); font-weight: 400; text-transform: none; letter-spacing: 0; } .pp-fw-contador { margin-left: auto; font-size: 12.5px; color: var(--lk-texto-4); } .pp-fw-body { flex: 1; overflow-y: auto; padding: 18px 22px 22px; } .pp-fw-status { font-size: 13.5px; color: var(--lk-texto-4); margin: 10px 0; } .pp-fw-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; } .pp-fw-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: 14px 16px; display: flex; flex-direction: column; } .pp-fw-card-top { display: flex; align-items: flex-start; gap: 12px; } .pp-fw-chips { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; } .pp-fw-chip { background: var(--lk-fundo-2); border: 1px solid var(--lk-linha); color: var(--lk-texto-2); font-size: 11.5px; font-weight: 600; padding: 3px 7px; } .pp-fw-chip.match { background: var(--lk-verde-hover); border-color: var(--lk-verde-suave); color: var(--lk-verde-texto); } .pp-fw-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px 10px; margin: 13px 0 0; padding: 12px 0 0; border-top: 1px solid var(--lk-linha-2); } .pp-fw-specs div { margin: 0; } .pp-fw-specs dt { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lk-texto-5); margin: 0 0 2px; } .pp-fw-specs dd { font-size: 13px; color: var(--lk-texto); margin: 0; font-weight: 600; } .pp-fw-rodape { display: flex; align-items: center; gap: 8px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--lk-linha-2); flex-wrap: wrap; } .pp-fw-dip { font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 4px 8px; border: 1px solid; } .pp-fw-dip.on { background: var(--lk-verde-hover); border-color: var(--lk-verde-suave); color: var(--lk-verde-texto); } .pp-fw-dip.off { background: var(--lk-fundo-3); border-color: var(--lk-linha); color: var(--lk-texto-4); } .pp-fw-dl { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 12.5px; font-weight: 600; padding: 8px 14px; text-decoration: none !important; transition: background .15s; } .pp-fw-dl:hover { background: var(--lk-verde-escuro); } .pp-fw-foot { background: var(--lk-branco); border-top: 1px solid var(--lk-linha); padding: 12px 22px; display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--lk-texto-4); } .pp-fw-foot i { color: var(--lk-verde-medio); margin-right: 4px; } .pp-fw-btn-fechar { margin-left: auto; background: var(--lk-linha-2); border: 1px solid var(--lk-linha); color: var(--lk-texto-2); font-size: 13px; font-weight: 600; padding: 8px 18px; cursor: pointer; transition: background .15s; } .pp-fw-btn-fechar:hover { background: var(--lk-linha); } body.pp-fw-aberto { overflow: hidden; } @media (max-width: 767px) { .pp-fw { padding: 0; } .pp-fw-dialog { max-width: none; max-height: 100vh; height: 100vh; } .pp-fw-head, .pp-fw-filtros, .pp-fw-body, .pp-fw-foot { padding-left: 14px; padding-right: 14px; } .pp-fw-lista { grid-template-columns: 1fr; } .pp-fw-selects { gap: 10px; } .pp-fw-contador { margin-left: 0; width: 100%; } /* alvos de toque confortáveis: campo, selects e botão de download */ .pp-fw-busca input { padding: 12px 4px !important; font-size: 16px; } /* 16px evita o zoom do iOS */ .pp-fw-selects label { width: 100%; justify-content: space-between; } .pp-fw-selects select { flex: 1; margin-left: 10px; padding: 11px 10px; font-size: 15px; } .pp-fw-dl { padding: 12px 18px; font-size: 14px; width: 100%; justify-content: center; } .pp-fw-rodape { gap: 6px; } .pp-fw-x { font-size: 32px; padding: 4px 10px; } .pp-fw-btn-fechar { padding: 12px 20px; } } /* template_produto.css — estilos da página template_produto.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* =========================================== PRODUTO PAGE — CSS (escopado em .pp-wrap) =========================================== */ .pp-wrap { color: var(--lk-texto); } /* ---------- HEADER ESCURO ---------- */ .pp-header { background: var(--lk-preto); padding: 36px 0 30px; border-bottom: 3px solid var(--lk-filete); position: relative; overflow: hidden; } .pp-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.07) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .pp-header .container { position: relative; z-index: 1; } .pp-header-title { font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.2; letter-spacing: -.01em; } .pp-sku { display: inline-block; font-size: 11px; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--lk-verde-forte); background: rgba(81,212,102,.12); border: 1px solid rgba(81,212,102,.3); padding: 2px 8px; vertical-align: middle; margin-left: 12px; position: relative; top: -3px; } /* ---------- MAIN BODY ---------- */ .pp-body { padding: 36px 0 56px; } /* ---------- GALERIA ---------- */ /* Produto montado (cabo): no lugar da galeria entra o desenho da configuração, que acompanha as escolhas feitas ao lado. Fica fixo enquanto a página rola. */ .pp-desenho-wrap { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 12px; position: sticky; top: 90px; max-width: 380px; /* o desenho é quadrado: sem limite ele fica alto demais */ margin: 0 auto; } .pp-desenho-wrap .cd-desenho { max-width: 100%; margin: 0 auto; } .pp-desenho-wrap svg { width: 100%; height: auto; display: block; } @media (max-width: 991px) { .pp-desenho-wrap { position: static; } } .pp-gallery-wrap { background: var(--lk-branco); border: 1px solid var(--lk-linha); overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,.06); } .pp-wrap .swiper.mySwiper2 { background: var(--lk-fundo); } .pp-wrap .swiper.mySwiper2 .swiper-slide { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; min-height: 340px; padding: 0; /* a borda branca de 20px agora está embutida nas próprias imagens */ position: relative; } .pp-wrap .swiper.mySwiper2 .swiper-slide img { max-height: 340px; width: auto; max-width: 100%; -o-object-fit: contain; object-fit: contain; } .pp-wrap .zoom-icon { position: absolute; bottom: 12px; right: 12px; width: 30px; height: 30px; background: rgba(0,0,0,.4); color: var(--lk-branco); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-size: 12px; opacity: 0; -webkit-transition: opacity .2s; transition: opacity .2s; } .pp-wrap .image-zoom-link { display: block; } .pp-wrap .image-zoom-link:hover .zoom-icon { opacity: 1; } .pp-wrap .swiper-button-next, .pp-wrap .swiper-button-prev { width: 34px !important; height: 34px !important; background: rgba(255,255,255,.92) !important; box-shadow: 0 2px 6px rgba(0,0,0,.15) !important; --swiper-navigation-size: 13px; } .pp-wrap .swiper-button-next::after, .pp-wrap .swiper-button-prev::after { color: var(--lk-texto) !important; font-size: 13px !important; } .pp-wrap .swiper-button-next:hover, .pp-wrap .swiper-button-prev:hover { background: var(--lk-verde) !important; } .pp-wrap .swiper-button-next:hover::after, .pp-wrap .swiper-button-prev:hover::after { color: var(--lk-branco) !important; } /* Thumbnails */ .pp-wrap .swiper.mySwiper { padding: 10px 12px !important; background: var(--lk-fundo-3); border-top: 1px solid var(--lk-linha); } .pp-wrap .swiper.mySwiper .swiper-slide { width: 64px !important; height: 64px; overflow: hidden; background: var(--lk-branco); border: 2px solid transparent; cursor: pointer; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: border-color .2s; transition: border-color .2s; } .pp-wrap .swiper.mySwiper .swiper-slide img { max-height: 58px; max-width: 58px; -o-object-fit: contain; object-fit: contain; } .pp-wrap .swiper.mySwiper .swiper-slide-thumb-active { border-color: var(--lk-verde) !important; } /* ---------- INFO PANEL ---------- */ .pp-info { padding-left: 4px; } .pp-description { font-size: 14.5px; line-height: 1.75; color: var(--lk-texto-2); margin-bottom: 20px; } .pp-description .pp-descontinuado { display: block; font-size: 16.5px; line-height: 1.55; margin-bottom: 16px; } /* Aviso de produto inativo (gerado a partir de "ativo" e "substituto" nos dados) */ .pp-inativo { background: var(--lk-erro-fundo); border: 1px solid var(--lk-erro-borda); border-left: 4px solid var(--lk-erro); color: var(--lk-erro-texto); font-size: 14.5px; line-height: 1.6; padding: 12px 16px; margin-bottom: 18px; } .pp-inativo i { margin-right: 6px; } .pp-inativo a { color: var(--lk-erro-texto) !important; font-weight: 600; text-decoration: underline !important; } .pp-inativo a:hover { color: var(--lk-erro) !important; } /* Escolha de variação (tamanho, cor…) */ .pp-variacoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; } .pp-variacoes-titulo { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin-right: 2px; } .pp-variacao { background: var(--lk-branco); border: 1.5px solid var(--lk-verde-campo); color: var(--lk-texto); font-size: 14px; font-weight: 600; padding: 9px 18px; cursor: pointer; transition: border-color .15s, background .15s, color .15s; } .pp-variacao:hover { border-color: var(--lk-verde); color: var(--lk-verde-forte); } .pp-variacao.ativo { background: var(--lk-verde-forte); border-color: var(--lk-verde-escuro); color: var(--lk-branco); } /* Aviso "disponível em breve" (campo disponivel_em_breve nos dados) */ .pp-embreve { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); color: var(--lk-verde-texto); font-size: 14.5px; line-height: 1.6; padding: 14px 16px; } .pp-embreve i { margin-right: 6px; } .pp-embreve b { margin-right: 4px; } .pp-embreve a { color: var(--lk-verde-texto) !important; font-weight: 600; text-decoration: underline !important; } .pp-embreve a:hover { color: var(--lk-verde-forte) !important; } /* Downloads */ .pp-downloads { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .pp-btn-dl { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 7px; padding: 9px 18px; font-size: 13.5px; font-weight: 500; text-decoration: none !important; -webkit-transition: all .2s; transition: all .2s; border: 1.5px solid transparent; } /* Botão de download (manual, ficha técnica). Antes era preenchido com o verde claro (var(--lk-verde)) e texto branco, o que dava 1,9:1 de contraste — abaixo do mínimo de 4,5:1, e o texto ficava difícil de ler. Além disso competia com o "Adicionar ao carrinho", que é a ação principal da página. Agora é um botão de contorno: o verde escuro sobre branco rende os mesmos 5,4:1 do botão de compra, e a hierarquia fica clara — cheio é a ação principal, contorno é a secundária. */ .pp-btn-dl.pp-btn-green { background: var(--lk-branco); color: var(--lk-verde-forte) !important; border-color: var(--lk-verde-forte); font-weight: 600; } .pp-btn-dl.pp-btn-green:hover { background: var(--lk-verde-fundo); border-color: var(--lk-verde-escuro); color: var(--lk-verde-escuro) !important; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(29,122,46,.18); } /* Botão do seletor de firmwares. Continua cheio, mas no verde escuro da paleta (era o mesmo tom, só ficava ao lado de um verde claro e parecia outra cor). */ .pp-btn-dl.pp-btn-fw { background: var(--lk-verde-forte); color: var(--lk-branco) !important; border-color: var(--lk-verde-escuro); font-weight: 600; } .pp-btn-dl.pp-btn-fw:hover { background: var(--lk-verde-escuro); -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(29,122,46,.28); } .pp-btn-dl.pp-btn-fw i { font-size: 15px; } .pp-btn-dl.pp-btn-outline { background: transparent; color: var(--lk-texto-2) !important; border-color: var(--lk-desabilitado-2); } .pp-btn-dl.pp-btn-outline:hover { border-color: var(--lk-verde); color: var(--lk-verde-forte) !important; } /* ---------- PRICE / STOCK BLOCK ---------- */ /* Estiliza o output de template_preco_estoque.php sem alterar o arquivo */ .pp-price-card { background: var(--lk-verde-hover-2); border: 1px solid var(--lk-verde-borda-2); overflow: hidden; margin-bottom: 6px; } .pp-price-card + .pp-price-card { margin-top: 16px; } /* Remove bordas padrão da tabela Bootstrap */ .pp-price-card .table-responsive { border: none !important; margin: 0; } .pp-price-card .sitem-table { margin: 0 !important; border: none !important; } .pp-price-card .sitem-table > tbody > tr > th, .pp-price-card .sitem-table > tbody > tr > td, .pp-price-card .sitem-table tr th, .pp-price-card .sitem-table tr td { border-color: var(--lk-verde-borda-2) !important; vertical-align: middle; font-size: 13.5px; padding: 10px 14px !important; } .pp-price-card .sitem-table tr th { background: var(--lk-verde-fundo) !important; color: var(--lk-verde-fundo-esc) !important; font-weight: 600; width: 100px; white-space: nowrap; } /* Preço: highlight do PIX */ .pp-price-card .sitem-table tr td span[style*="1.6em"] { color: var(--lk-verde-forte) !important; font-size: 1.5em !important; } .pp-price-card .sitem-table tr td span[style*="1.2em"] { color: var(--lk-verde-escuro-2) !important; } /* Estoque em/sem */ .pp-price-card .sitem-table i.fa-check { color: var(--lk-esc-selo) !important; font-size: 15px; } .pp-price-card .sitem-table i.fa-times { color: var(--lk-cor-vermelho) !important; font-size: 15px; } /* Promoção */ .pp-price-card .sitem-table .bg-black { background: var(--lk-texto) !important; color: var(--lk-branco) !important; padding: 6px 12px !important; font-size: 13px !important; font-weight: 600; margin-bottom: 8px; } /* Botão carrinho */ .pp-price-card .input-group { padding: 12px 14px; background: var(--lk-verde-fundo); border-top: 1px solid var(--lk-verde-borda-2); } /* "Adicionar ao carrinho" dos produtos comuns. Era o verde claro com texto branco (1,9:1 de contraste) e ficava diferente do botão do montador de cabos. Agora usa o mesmo verde escuro: 5,4:1 e a loja inteira com um só botão de compra. */ .pp-price-card .btn.btn-color.btn-lg { background: var(--lk-verde-forte) !important; border-color: var(--lk-verde-escuro) !important; color: var(--lk-branco) !important; font-weight: 600 !important; font-size: 14px !important; letter-spacing: .03em; padding: 10px 24px !important; -webkit-transition: all .2s !important; transition: all .2s !important; } .pp-price-card .btn.btn-color.btn-lg:hover { background: var(--lk-verde-escuro) !important; -webkit-transform: translateY(-1px); -ms-transform: translateY(-1px); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(29,122,46,.3) !important; } /* Remove espaço extra (br) após o botão do carrinho */ .pp-price-card form + br { display: none; } /* ---------- DIVISOR ---------- */ .pp-divider { height: 1px; background: var(--lk-linha); margin: 20px 0; } /* ---------- SEÇÃO LABEL ---------- */ .pp-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 0 0 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 10px; } .pp-section-label::after { content: ''; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 1px; background: var(--lk-linha); } /* ---------- VÍDEOS ---------- */ .pp-videos-section { margin-top: 40px; } .pp-videos-list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; } .pp-video-thumb { position: relative; width: 160px; -ms-flex-negative: 0; flex-shrink: 0; text-decoration: none !important; display: block; } .pp-video-thumb img { width: 100%; height: 90px; -o-object-fit: cover; object-fit: cover; display: block; border: 2px solid transparent; -webkit-transition: border-color .2s; transition: border-color .2s; } .pp-video-thumb:hover img { border-color: var(--lk-verde); } .pp-video-thumb .pp-video-play { position: absolute; inset: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; background: rgba(0,0,0,.38); -webkit-transition: background .2s; transition: background .2s; } .pp-video-thumb:hover .pp-video-play { background: rgba(0,0,0,.55); } .pp-video-thumb .pp-video-play i { font-size: 32px; color: var(--lk-branco); text-shadow: 0 2px 8px rgba(0,0,0,.5); -webkit-transition: color .2s, -webkit-transform .2s; transition: color .2s, transform .2s; } .pp-video-thumb:hover .pp-video-play i { color: var(--lk-verde-forte); -webkit-transform: scale(1.12); -ms-transform: scale(1.12); transform: scale(1.12); } @media (max-width: 767px) { .pp-video-thumb { width: calc(50% - 6px); } .pp-video-thumb img { height: 80px; } } /* ---------- SPECS TABLE ---------- */ .pp-specs-section { margin-top: 40px; } .pp-specs-table { width: 100%; border-collapse: collapse; border: 1px solid var(--lk-linha); overflow: hidden; font-size: 13.5px; } .pp-specs-table tr:not(:last-child) td, .pp-specs-table tr:not(:last-child) th { border-bottom: 1px solid var(--lk-linha); } .pp-specs-table th { width: 38%; background: var(--lk-fundo-3); color: var(--lk-texto-2); font-weight: 500; padding: 10px 14px; text-align: left; vertical-align: top; } .pp-specs-table td { background: var(--lk-branco); color: var(--lk-texto); padding: 10px 14px; vertical-align: top; } .pp-specs-table tr:hover th, .pp-specs-table tr:hover td { background: var(--lk-fundo-2); } /* ---------- FÓRUM ---------- */ .pp-forum-card { margin-top: 36px; border: 1px solid var(--lk-linha); overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); } .pp-forum-head { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 16px 20px; background: var(--lk-fundo-3); border-bottom: 1px solid var(--lk-linha); } .pp-forum-icon { width: 38px; height: 38px; background: rgba(81,212,102,.15); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: var(--lk-verde-forte); font-size: 16px; -ms-flex-negative: 0; flex-shrink: 0; } .pp-forum-head h3 { margin: 0 !important; font-size: 15px !important; font-weight: 700 !important; color: var(--lk-texto) !important; } .pp-forum-head .pp-forum-badge { margin-left: auto; font-size: 12px; color: var(--lk-texto-4); background: var(--lk-branco); border: 1px solid var(--lk-linha); padding: 3px 10px; } .pp-forum-list { list-style: none !important; padding: 0 !important; margin: 0 !important; } .pp-forum-list li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 12px; padding: 13px 20px; border-bottom: 1px solid var(--lk-linha); -webkit-transition: background .15s; transition: background .15s; } .pp-forum-list li:last-child { border-bottom: none; } .pp-forum-list li:hover { background: var(--lk-verde-hover-2); } .pp-forum-dot { width: 7px; height: 7px; background: var(--lk-verde); -ms-flex-negative: 0; flex-shrink: 0; } .pp-forum-title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 13.5px; color: var(--lk-texto) !important; text-decoration: none !important; font-weight: 400; line-height: 1.45; } .pp-forum-title:hover { color: var(--lk-verde-forte) !important; } .pp-forum-views { font-size: 12px; color: var(--lk-texto-5); white-space: nowrap; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4px; } .pp-forum-footer { padding: 13px 20px; background: var(--lk-fundo-3); border-top: 1px solid var(--lk-linha); text-align: center; } .pp-forum-footer a { font-size: 13px; color: var(--lk-verde-forte) !important; font-weight: 500; text-decoration: none !important; } .pp-forum-footer a:hover { text-decoration: underline !important; } /* ---------- RESPONSIVO ---------- */ @media (max-width: 767px) { .pp-header { padding: 24px 0 20px; } .pp-body { padding: 20px 0 40px; } .pp-info { padding-left: 0; margin-top: 24px; } /* Remove scroll horizontal da tabela de preço/estoque no mobile */ .pp-price-card .table-responsive { overflow-x: visible !important; overflow-y: visible !important; } .pp-price-card .sitem-table, .pp-price-card .sitem-table > tbody, .pp-price-card .sitem-table > tbody > tr, .pp-price-card .sitem-table tr { display: block !important; width: 100% !important; } .pp-price-card .sitem-table tr th { display: block !important; width: 100% !important; border-bottom: none !important; padding-bottom: 4px !important; } .pp-price-card .sitem-table tr td { display: block !important; width: 100% !important; white-space: normal !important; word-break: break-word !important; padding-top: 4px !important; } } /* ================================================================== lumikit-componentes.css ================================================================== */ /* lumikit-componentes.css — o CSS que era repetido nas páginas Gerado pelo junta_css.py. Cada regra aqui existia igual em várias páginas; agora é uma só, com todos os seletores juntos. Carregue ANTES do CSS da página, para que a página ainda possa sobrescrever um detalhe quando precisar. Para acrescentar uma página nova ao grupo, basta incluir o seletor dela na lista da regra correspondente. */ .bc-header::after, .pb-header::after, .cc-header::after, .cl-header::after, .pcc-header::after, .pc-header::after, .fe-header::after, .pm-header::after, .ne-header::after, .pa-header::after, .ps-header::after, .sc-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.07) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .bc-header, .cl-header, .ok-header, .cp-wrap .pp-header, .pcc-header, .pc-header, .fe-header, .pm-header, .ne-header, .pa-header, .ps-header, .sc-header { background: var(--lk-preto); padding: 36px 0 30px; border-bottom: 3px solid var(--lk-filete); position: relative; overflow: hidden; } .bc-header-title, .cl-header-title, .pcc-header-title, .pc-header-title, .fe-header-title, .pm-header-title, .pa-header-title, .ps-header-title { font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.2; letter-spacing: -.01em; } .bc-label::after, .pb-label::after, .cc-label::after, .cl-label::after, .ok-label::after, .pcc-secao-label::after, .pc-section-label::after, .fe-label::after, .pm-section-label::after, .hy-label::after, .oc-label::after, .pa-label::after, .ps-label::after, .sc-label::after { content: ''; flex: 1; height: 1px; background: var(--lk-linha); } .ok-label, .pcc-secao-label, .pc-section-label, .fe-label, .hy-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .bc-header-sub, .cl-header-sub, .pcc-header-sub, .fe-header-sub, .ne-header p, .pa-header-sub, .ps-header-sub { color: var(--lk-preto-texto); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; max-width: 820px; } .pm-section-label, .pa-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } .pc-canais, .pm-list, .pa-lista, .ps-lista, .sc-lista { list-style: none !important; margin: 0 !important; padding: 0 !important; } .pcc-indice a:hover, .pm-list a:hover { background: var(--lk-fundo-2); color: var(--lk-verde-forte) !important; } .pm-body p, .ps-body p, .sc-body p { font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); max-width: 900px; } .pm-list a i { color: var(--lk-verde-forte); font-size: 15px; flex-shrink: 0; } .cc-aviso-info a, .ok-prazo a, .pcc-destaque a { color: var(--lk-verde-texto); font-weight: 600; } .pm-list li { border-bottom: 1px solid var(--lk-linha); } /* ================================================================== arquitetural.css ================================================================== */ /* arquitetural.css — estilos da página arquitetural.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* Hero com foto — específico desta página */ .lp-hero { text-align: center; background: linear-gradient(rgba(10,16,12,.62), rgba(10,16,12,.62)), url("../../img/backgrounds/ponte.jpg"); background-size: cover; background-position: center center; background-attachment: fixed; padding: 64px 15px; border-bottom: 3px solid var(--lk-filete); } .lp-hero h1 { color: var(--lk-branco); font-size: clamp(26px, 4vw, 42px); font-weight: 800; margin: 0; line-height: 1.2; } .lp-hero p { color: var(--lk-verde-campo); font-size: 15px; line-height: 1.7; margin: 14px auto 0; max-width: 760px; } @media (max-width: 767px) { .lp-hero { padding: 36px 15px; background-attachment: scroll; } } /* Vídeos */ .lp-videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; } .lp-video h4 { font-size: 14px; font-weight: 700; color: var(--lk-texto); margin: 0 0 10px; line-height: 1.4; } .lp-video-frame { position: relative; padding-top: 56.25%; background: var(--lk-preto-puro); } .lp-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Tabela comparativa dos sistemas */ .lp-tabela-wrap { overflow-x: auto; position: relative; -webkit-overflow-scrolling: touch; } /* no celular a tabela é mais larga que a tela: o degradê à direita mostra que ainda há conteúdo, e o aviso some assim que a pessoa arrasta */ .lp-tabela-caixa { position: relative; } .lp-tabela-caixa::after { content: ''; position: absolute; top: 0; right: 0; width: 34px; height: 100%; background: linear-gradient(to right, rgba(250,250,250,0), rgba(250,250,250,.95)); pointer-events: none; opacity: 1; transition: opacity .2s; } .lp-tabela-caixa.no-fim::after { opacity: 0; } .lp-tabela-dica { display: none; font-size: 12px; color: var(--lk-texto-4); margin: 6px 0 0; } .lp-tabela-dica i { color: var(--lk-verde-forte); } @media (max-width: 900px) { .lp-tabela-dica { display: block; } } .lp-tabela { width: 100%; border-collapse: collapse; background: var(--lk-branco); border: 1px solid var(--lk-linha); font-size: 13.5px; } .lp-tabela th, .lp-tabela td { border: 1px solid var(--lk-linha); padding: 11px 14px; vertical-align: middle; line-height: 1.55; } .lp-tabela thead th { background: var(--lk-preto); color: var(--lk-branco); font-weight: 700; text-align: center; font-size: 13.5px; } .lp-tabela thead th:first-child { background: var(--lk-preto-2); } .lp-tabela tbody th { background: var(--lk-fundo-2); color: var(--lk-verde-fundo-esc); font-weight: 600; width: 230px; } .lp-tabela td { text-align: center; color: var(--lk-texto-2); } .lp-sim { color: var(--lk-verde-escuro-2); font-weight: 700; } .lp-nao { color: var(--lk-erro-2); font-weight: 700; } /* ================================================================== bc.css ================================================================== */ /* bc.css — estilos da página bc.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== BASE DE CONHECIMENTO — estilo alinhado ao template_produto ===== */ .bc-wrap { color: var(--lk-texto); } .bc-header .container { position: relative; z-index: 1; } .bc-body { padding: 32px 0 56px; } .bc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 0 0 16px; display: flex; align-items: center; gap: 10px; } .bc-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } .bc-item { display: flex; gap: 14px; align-items: flex-start; background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 16px 18px; text-decoration: none !important; color: inherit !important; transition: box-shadow .15s, transform .1s, border-color .15s; } .bc-item:hover { box-shadow: 0 5px 16px rgba(0,0,0,.09); transform: translateY(-2px); border-color: var(--lk-verde-suave); } .bc-icone { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: var(--lk-verde-fundo); color: var(--lk-verde-forte); font-size: 19px; } .bc-item:hover .bc-icone { background: var(--lk-verde-forte); color: var(--lk-branco); } .bc-texto { min-width: 0; } .bc-codigo { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--lk-verde-forte); } .bc-titulo { font-size: 14.5px; font-weight: 700; color: var(--lk-texto); margin: 2px 0 4px; line-height: 1.35; } .bc-resumo { font-size: 12.5px; line-height: 1.6; color: var(--lk-texto-4); margin: 0; } .bc-produto { display: inline-block; font-size: 11px; color: var(--lk-texto-3); background: var(--lk-fundo-2); padding: 2px 8px; margin-top: 8px; } .bc-nota { font-size: 13.5px; line-height: 1.75; color: var(--lk-texto-3); margin-top: 26px; } .bc-nota a { color: var(--lk-verde-forte); } @media (max-width: 767px) { .bc-header { padding: 24px 0 20px; } .bc-body { padding: 20px 0 40px; } .bc-lista { grid-template-columns: 1fr; } } /* ================================================================== busca.css ================================================================== */ /* busca.css — estilos da página busca.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== Campo de busca da barra de topo ===== */ .lk-busca-sep { display: inline-block; width: 1px; height: 14px; background: rgba(81,212,102,.25); vertical-align: middle; margin: 0 10px; } .lk-busca-wrap { display: inline-flex; align-items: center; position: relative; vertical-align: middle; } .lk-busca-icone { position: absolute; left: 8px; color: rgba(81,212,102,.7); font-size: 11px; pointer-events: none; line-height: 1; } .lk-busca-input { background: rgba(255,255,255,.07); border: 1px solid rgba(81,212,102,.22); border-radius: 3px; color: rgba(255,255,255,.85); font-size: 11.5px; height: 22px; width: 180px; padding: 0 24px; outline: none; vertical-align: middle; -webkit-appearance: none; appearance: none; transition: width .25s ease, border-color .18s, background .18s; } .lk-busca-input::-webkit-search-cancel-button, .lk-busca-input::-webkit-search-decoration { display: none; } .lk-busca-input::placeholder { color: rgba(255,255,255,.3); } .lk-busca-input:focus { width: 250px; border-color: rgba(81,212,102,.6); background: rgba(255,255,255,.1); color: var(--lk-branco); } .lk-busca-limpar { position: absolute; right: 4px; background: none; border: none; color: rgba(255,255,255,.35); font-size: 10px; cursor: pointer; padding: 3px 4px; line-height: 1; } .lk-busca-limpar:hover { color: var(--lk-verde); } .lk-busca-painel { position: fixed; z-index: 99999; background: var(--lk-preto); border: 1px solid rgba(81,212,102,.28); border-top: none; border-radius: 0 0 4px 4px; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-height: 60vh; overflow-y: auto; } .lk-busca-item { display: block; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none !important; cursor: pointer; } .lk-busca-item:hover, .lk-busca-item.ativo { background: rgba(81,212,102,.1); outline: none; } .lk-busca-item-titulo { display: block; color: var(--lk-verde-hover); font-size: 13px; font-weight: 600; line-height: 1.4; margin-bottom: 2px; } .lk-busca-item-desc { display: -webkit-box; color: rgba(255,255,255,.45); font-size: 11.5px; line-height: 1.5; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .lk-busca-marca { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-erro-borda); border: 1px solid rgba(240,169,159,.4); padding: 1px 5px; margin-left: 6px; vertical-align: middle; } .lk-busca-status { padding: 12px 14px; color: rgba(255,255,255,.4); font-size: 12.5px; font-style: italic; } .lk-busca-destaque { color: var(--lk-verde); font-weight: 700; background: none; } .lk-busca-todos { display: block; padding: 10px 14px; text-align: center; background: rgba(81,212,102,.12); color: var(--lk-verde-claro) !important; font-size: 12px; font-weight: 600; text-decoration: none !important; } .lk-busca-todos:hover { background: rgba(81,212,102,.2); color: var(--lk-branco) !important; } @media (max-width: 767px) { .lk-busca-sep { display: none; } .lk-busca-wrap { display: block; width: 100%; margin-top: 6px; } .lk-busca-input, .lk-busca-input:focus { width: 100%; font-size: 14px; height: 34px; box-sizing: border-box; } } /* ===== BUSCA — página de resultados (mesmo estilo das páginas novas) ===== */ .pb-wrap { color: var(--lk-texto); } .pb-header { background: var(--lk-preto); padding: 32px 0 28px; border-bottom: 3px solid var(--lk-filete); position: relative; overflow: hidden; } .pb-header .container { position: relative; z-index: 1; } .pb-header-title { font-size: clamp(20px, 3vw, 30px); font-weight: 800; color: var(--lk-branco); margin: 0 0 14px; line-height: 1.2; } .pb-form { display: flex; max-width: 620px; background: var(--lk-branco); border: 1px solid var(--lk-linha); } .pb-form input { flex: 1; border: 0 !important; outline: 0 !important; box-shadow: none !important; padding: 12px 14px !important; font-size: 15px; color: var(--lk-texto); background: transparent; } .pb-form button { border: 0; background: var(--lk-verde-forte); color: var(--lk-branco); font-size: 14px; font-weight: 600; padding: 0 22px; cursor: pointer; transition: background .15s; } .pb-form button:hover { background: var(--lk-verde-escuro); } .pb-body { padding: 30px 0 56px; } .pb-resumo { font-size: 14px; color: var(--lk-texto-3); margin: 0 0 4px; } .pb-resumo b { color: var(--lk-texto); } .pb-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 22px 0 9px; display: flex; align-items: center; gap: 10px; } .pb-label:first-of-type { margin-top: 0; } /* lista compacta: um cartão por grupo, com os resultados em linhas */ .pb-lista { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); } .pb-item { display: flex; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--lk-linha-2); text-decoration: none !important; transition: background .12s; } .pb-item:last-child { border-bottom: none; } .pb-item:hover { background: var(--lk-verde-hover-2); } .pb-item-conteudo { min-width: 0; flex: 1; } .pb-item-titulo { font-size: 14px; font-weight: 700; color: var(--lk-texto); display: flex; align-items: center; gap: 7px; flex-wrap: wrap; line-height: 1.35; } .pb-item:hover .pb-item-titulo { color: var(--lk-verde-forte); } .pb-item-linha { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; font-size: 12.5px; line-height: 1.45; min-width: 0; } .pb-item-desc { color: var(--lk-texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .pb-item-url { color: var(--lk-texto-5); white-space: nowrap; flex-shrink: 0; } .pb-extra { color: var(--lk-verde-forte); white-space: nowrap; flex-shrink: 0; } .pb-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; background: var(--lk-fundo-2); border: 1px solid var(--lk-linha); color: var(--lk-rotulo); } .pb-tag-inativo { background: var(--lk-erro-fundo); border-color: var(--lk-erro-borda); color: var(--lk-erro-texto); } .pb-thumb { width: 88px; height: 50px; object-fit: cover; flex-shrink: 0; border: 1px solid var(--lk-linha); background: var(--lk-fundo-2); } @media (max-width: 600px) { .pb-item-linha { flex-direction: column; gap: 1px; } .pb-item-url { display: none; } .pb-item-desc { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } } .pb-vazio { background: var(--lk-branco); border: 1px solid var(--lk-linha); padding: 22px 24px; font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); } .pb-vazio a { color: var(--lk-verde-forte); } @media (max-width: 767px) { .pb-header { padding: 22px 0 20px; } .pb-body { padding: 20px 0 40px; } } /* ================================================================== carrinho.css ================================================================== */ /* carrinho.css — estilos da página carrinho.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== CARRINHO ===== */ .cc-wrap { color: var(--lk-texto); } .cc-header { background: var(--lk-preto); padding: 30px 0 26px; border-bottom: 3px solid var(--lk-filete); position: relative; overflow: hidden; } .cc-header .container { position: relative; z-index: 1; } .cc-header h1 { font-size: clamp(20px, 3vw, 30px); font-weight: 800; color: var(--lk-branco); margin: 0; } .cc-header p { color: var(--lk-preto-texto); font-size: 13.5px; margin: 6px 0 0; } .cc-body { padding: 28px 0 56px; } /* Em telas largas o conteúdo do carrinho ficava esticado de ponta a ponta, com o nome do item de um lado e os valores do outro. Uma largura de leitura confortável mantém as informações próximas. */ .cc-conteudo { max-width: 1040px; margin: 0 auto; } .cc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 26px 0 12px; display: flex; align-items: center; gap: 10px; } .cc-label:first-of-type { margin-top: 0; } /* itens */ .cc-itens { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); } /* Colunas fixas: assim preço, quantidade e total ficam alinhados de uma linha para a outra, em vez de cada um parar onde o texto do nome terminou. */ .cc-item { display: grid; grid-template-columns: 64px minmax(0,1fr) 132px 124px; gap: 14px; padding: 13px 16px; border-bottom: 1px solid var(--lk-linha-2); align-items: center; } .cc-item:last-child { border-bottom: none; } .cc-item-img img { width: 64px; height: 52px; object-fit: contain; background: var(--lk-branco); border: 1px solid var(--lk-linha-2); } .cc-item-nome { font-size: 14.5px; font-weight: 700; line-height: 1.35; } .cc-item-nome a { color: var(--lk-texto) !important; text-decoration: none !important; } .cc-item-nome a:hover { color: var(--lk-verde-forte) !important; } .cc-item-info { font-size: 12.5px; color: var(--lk-texto-4); margin-top: 3px; line-height: 1.5; } .cc-item-info a { color: var(--lk-verde-forte); cursor: pointer; } .cc-item-valores { text-align: right; white-space: nowrap; } .cc-item-total { font-size: 15px; font-weight: 800; color: var(--lk-texto); } .cc-item-unit { font-size: 12px; color: var(--lk-texto-4); margin-top: 2px; } .cc-item-acoes { display: flex; align-items: center; gap: 6px; justify-content: flex-end; } /* Quantidade: passo a passo, sem precisar apertar "atualizar". O campo continua digitável para quem quer pular direto para 12. */ .cc-form-qtd { display: flex; align-items: center; gap: 6px; } .cc-spinner { display: inline-flex; align-items: stretch; border: 1px solid var(--lk-linha); background: var(--lk-branco); } .cc-spin-btn { width: 30px; border: 0; background: var(--lk-fundo-3); color: var(--lk-texto-2); font-size: 17px; line-height: 1; cursor: pointer; padding: 0; transition: background .12s, color .12s; } .cc-spin-btn:hover:not(:disabled) { background: var(--lk-verde-hover); color: var(--lk-verde-texto); } .cc-spin-btn:disabled { color: var(--lk-desabilitado-2); cursor: not-allowed; } .cc-spin-btn:first-child { border-right: 1px solid var(--lk-linha); } .cc-spin-btn:last-child { border-left: 1px solid var(--lk-linha); } .cc-qtd { width: 42px; border: 0 !important; box-shadow: none !important; padding: 6px 2px !important; font-size: 14px; font-weight: 600; text-align: center; background: transparent; } .cc-qtd:focus { outline: none; background: var(--lk-verde-hover-2); } .cc-item.cc-atualizando { opacity: .55; } .cc-btn-mini { background: var(--lk-fundo-2); border: 1px solid var(--lk-linha); color: var(--lk-texto-2); font-size: 11.5px; padding: 5px 9px; cursor: pointer; } .cc-btn-mini:hover { background: var(--lk-verde-hover); border-color: var(--lk-verde-suave); color: var(--lk-verde-texto); } .cc-btn-remover:hover { background: var(--lk-erro-fundo); border-color: var(--lk-erro-borda); color: var(--lk-erro-texto); } /* totais */ .cc-totais { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 14px 16px; display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 10px; } .cc-totais b { font-size: 17px; } .cc-totais small { color: var(--lk-texto-4); } /* rodapé do bloco de totais */ .cc-rodape-totais { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 0 0; } .cc-rodape-totais p { font-size: 12.5px; color: var(--lk-texto-4); margin: 0; } .cc-link-orcamento { font-size: 12.5px; color: var(--lk-verde-forte) !important; text-decoration: none !important; white-space: nowrap; } .cc-link-orcamento:hover { text-decoration: underline !important; } /* formulários (CEP, cupom) */ .cc-form { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 14px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cc-form label { font-size: 13.5px; color: var(--lk-texto-2); margin: 0; } .cc-form input[type="text"] { border: 1px solid var(--lk-linha) !important; box-shadow: none !important; padding: 9px 11px !important; font-size: 14px; width: 170px; } .cc-btn { background: var(--lk-verde-forte); border: 0; color: var(--lk-branco) !important; font-size: 13.5px; font-weight: 600; padding: 10px 20px; cursor: pointer; text-decoration: none !important; } .cc-btn:hover { background: var(--lk-verde-escuro); } /* transportadoras */ .cc-fretes { display: grid; gap: 8px; } .cc-frete { display: grid; grid-template-columns: 20px 72px minmax(0,1fr) 108px 210px; gap: 12px; align-items: center; background: var(--lk-branco); border: 1px solid var(--lk-linha); padding: 10px 14px; cursor: pointer; transition: border-color .15s, background .15s; } .cc-frete:hover { border-color: var(--lk-verde-suave); background: var(--lk-verde-hover-2); } .cc-frete.escolhido { border-color: var(--lk-verde-medio); background: var(--lk-verde-fundo); box-shadow: inset 3px 0 0 var(--lk-verde-medio); } .cc-frete img { max-width: 78px; max-height: 30px; } .cc-frete-nome { font-size: 13.5px; font-weight: 600; color: var(--lk-texto); } .cc-frete-prazo { font-size: 12px; color: var(--lk-texto-4); } /* Frete e totais em colunas próprias: os valores ficam alinhados de uma transportadora para a outra, e a linha fica mais baixa. */ .cc-frete-preco { text-align: right; white-space: nowrap; font-size: 18px; font-weight: 800; color: var(--lk-verde-forte); line-height: 1.15; } .cc-frete-preco small { font-size: 10px; font-weight: 700; color: var(--lk-texto-5); letter-spacing: .07em; text-transform: uppercase; display: block; } .cc-frete-preco.cc-frete-gratis { color: var(--lk-verde-escuro); font-size: 15px; } .cc-frete-totais { text-align: right; white-space: nowrap; font-size: 12px; color: var(--lk-texto-3); line-height: 1.5; } .cc-frete-totais b { color: var(--lk-texto); font-weight: 700; } /* pagamento */ .cc-pagar { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); padding: 16px 18px; margin-top: 14px; } .cc-pagar h4 { font-size: 14px; font-weight: 800; color: var(--lk-verde-texto); margin: 0 0 4px; } .cc-pagar p { font-size: 13px; color: var(--lk-verde-rotulo); margin: 0 0 12px; line-height: 1.6; } .cc-pagar-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; } .cc-pagar-op { background: var(--lk-branco); border: 1px solid var(--lk-verde-borda-2); padding: 14px 16px; } .cc-pagar-op h5 { font-size: 13px; font-weight: 700; color: var(--lk-texto); margin: 0 0 6px; } .cc-pagar-valor { font-size: 21px; font-weight: 800; color: var(--lk-verde-forte); margin-bottom: 10px; } .cc-pagar-op small { display: block; color: var(--lk-texto-4); font-size: 12px; margin-bottom: 10px; } .cc-btn-continuar { display: inline-flex; align-items: center; gap: 8px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 14px; font-weight: 700; padding: 11px 22px; text-decoration: none !important; } .cc-btn-continuar:hover { background: var(--lk-verde-escuro); } .cc-btn-continuar.desabilitado { background: var(--lk-desabilitado); pointer-events: none; } /* avisos */ .cc-aviso { border-left: 4px solid; padding: 13px 16px; font-size: 13.5px; line-height: 1.6; margin-bottom: 14px; } .cc-aviso-atencao { background: var(--lk-erro-fundo); border-color: var(--lk-erro); color: var(--lk-erro-texto); } .cc-aviso-atencao a { color: var(--lk-erro-texto); font-weight: 600; } .cc-aviso-info { background: var(--lk-verde-fundo); border-color: var(--lk-verde-medio); color: var(--lk-verde-texto); } @media (max-width: 900px) { /* some a coluna do preço unitário, mas quantidade e total continuam em colunas */ .cc-item { grid-template-columns: 56px minmax(0,1fr) 118px 108px; gap: 10px; } .cc-frete { grid-template-columns: 20px 62px minmax(0,1fr) 132px; } .cc-frete-totais { grid-column: 3 / -1; text-align: right; } } @media (max-width: 600px) { .cc-item { grid-template-columns: 56px minmax(0,1fr); } .cc-item-img img { width: 56px; height: 46px; } .cc-item-valores { grid-column: 1 / -1; text-align: left; } .cc-item-acoes { grid-column: 1 / -1; } .cc-frete { grid-template-columns: 20px minmax(0,1fr); row-gap: 4px; } .cc-frete img { display: none; } .cc-frete-preco { grid-column: 2 / -1; text-align: left; } .cc-frete-preco small { display: inline; margin-right: 4px; } .cc-frete-totais { grid-column: 2 / -1; text-align: left; } .cc-frete-totais br { display: none; } } /* ================================================================== clientes.css ================================================================== */ /* clientes.css — estilos da página clientes.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== CLIENTES — estilo alinhado ao template_produto ===== */ .cl-wrap { color: var(--lk-texto); } .cl-header .container { position: relative; z-index: 1; } .cl-body { padding: 32px 0 56px; } .cl-body p { font-size: 14px; line-height: 1.75; color: var(--lk-texto-2); max-width: 900px; } .cl-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 30px 0 14px; display: flex; align-items: center; gap: 10px; } .cl-label:first-of-type { margin-top: 0; } /* ramos de atividade */ .cl-ramos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; } .cl-ramo { display: flex; align-items: center; gap: 11px; background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 4px rgba(0,0,0,.04); padding: 13px 15px; font-size: 14px; font-weight: 600; color: var(--lk-texto); } .cl-ramo i { color: var(--lk-verde-forte); font-size: 17px; width: 22px; text-align: center; flex-shrink: 0; } /* mapa */ .cl-mapa { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 6px; } .cl-mapa iframe { width: 100%; height: 620px; border: 0; display: block; } @media (max-width: 767px) { .cl-header { padding: 24px 0 20px; } .cl-body { padding: 20px 0 40px; } .cl-mapa iframe { height: 420px; } } /* ================================================================== compraok.css ================================================================== */ /* compraok.css — estilos da página compraok.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== PEDIDO REGISTRADO ===== */ .ok-wrap { color: var(--lk-texto); } .ok-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.09) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .ok-header .container { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .ok-check { width: 54px; height: 54px; flex-shrink: 0; border-radius: 50%; background: var(--lk-verde-forte); color: var(--lk-branco); display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 0 0 6px rgba(81,212,102,.15); } .ok-header h1 { font-size: clamp(21px, 3.2vw, 31px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.2; } .ok-header p { color: var(--lk-preto-texto); font-size: 14.5px; margin: 6px 0 0; } .ok-numero { display: inline-block; background: rgba(81,212,102,.14); border: 1px solid rgba(81,212,102,.35); color: var(--lk-verde-suave); font-size: 13px; font-weight: 700; padding: 4px 12px; margin-top: 10px; letter-spacing: .03em; } .ok-body { padding: 30px 0 56px; } .ok-conteudo { max-width: 860px; margin: 0 auto; } .ok-label + .ok-label { margin-top: 26px; } /* passos */ .ok-passos { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin-bottom: 26px; } .ok-passo { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 18px 20px; } .ok-passo-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; background: var(--lk-verde-fundo); color: var(--lk-verde-forte); font-size: 13px; font-weight: 800; margin-bottom: 10px; } .ok-passo h3 { font-size: 14.5px; font-weight: 700; color: var(--lk-texto); margin: 0 0 6px; line-height: 1.35; } .ok-passo p { font-size: 13px; line-height: 1.65; color: var(--lk-texto-3); margin: 0; } .ok-passo a { color: var(--lk-verde-forte); } /* prazos */ .ok-prazo { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); padding: 16px 18px; margin-bottom: 6px; } .ok-prazo h3 { font-size: 14.5px; font-weight: 800; color: var(--lk-verde-texto); margin: 0 0 8px; } .ok-prazo p { font-size: 13.5px; line-height: 1.7; color: var(--lk-verde-rotulo); margin: 0 0 8px; } .ok-prazo p:last-child { margin-bottom: 0; } .ok-prazo b { color: var(--lk-verde-texto-esc); } /* ajuda */ .ok-ajuda { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 18px 20px; } .ok-ajuda p { font-size: 13.5px; line-height: 1.7; color: var(--lk-texto-2); margin: 0 0 14px; } .ok-contatos { display: flex; flex-wrap: wrap; gap: 10px; } .ok-btn { display: inline-flex; align-items: center; gap: 9px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 14px; font-weight: 700; padding: 12px 22px; text-decoration: none !important; transition: background .15s; } .ok-btn:hover { background: var(--lk-verde-escuro); } .ok-btn-claro { background: var(--lk-branco); color: var(--lk-verde-forte) !important; border: 1.5px solid var(--lk-verde-borda); } .ok-btn-claro:hover { background: var(--lk-verde-hover); } @media (max-width: 767px) { .ok-header { padding: 24px 0 20px; } .ok-body { padding: 22px 0 40px; } .ok-btn { width: 100%; justify-content: center; } } /* ================================================================== comprar.css ================================================================== */ .cp-wrap .pp-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.07) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .cp-wrap .pp-header .container { position: relative; z-index: 1; } .cp-wrap .pp-header h2 { font-size: clamp(20px, 3vw, 30px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.2; } /* ---------- TABS ---------- */ .cp-wrap .nav-tabs-one .nav-tabs { border-bottom: 2px solid var(--lk-linha) !important; background: var(--lk-verde-hover-2); padding: 0 20px; margin: 0 !important; } .cp-wrap .nav-tabs-one .nav-tabs > li > a { border: none !important; border-bottom: 3px solid transparent !important; padding: 14px 20px 12px !important; font-size: 13.5px; font-weight: 600; color: var(--lk-rotulo) !important; background: transparent !important; margin-bottom: -2px; -webkit-transition: color .2s, border-color .2s; transition: color .2s, border-color .2s; } .cp-wrap .nav-tabs-one .nav-tabs > li > a:hover { color: var(--lk-verde-forte) !important; background: transparent !important; border-bottom-color: var(--lk-verde-suave) !important; } .cp-wrap .nav-tabs-one .nav-tabs > li.active > a, .cp-wrap .nav-tabs-one .nav-tabs > li.active > a:hover, .cp-wrap .nav-tabs-one .nav-tabs > li.active > a:focus { color: var(--lk-verde-forte) !important; background: transparent !important; border: none !important; border-bottom: 3px solid var(--lk-filete) !important; } .cp-wrap .tab-content { padding: 28px 0 0; } /* ---------- CATEGORIA h4 ---------- */ .cp-wrap .shopping-content > h4 { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--lk-verde-fundo-esc); background: var(--lk-verde-fundo); border-left: 4px solid var(--lk-verde); padding: 9px 16px; margin: 32px 0 14px; line-height: 1.4; } .cp-wrap .shopping-content > h4:first-child { margin-top: 0; } .cp-wrap .shopping-content > h4 .fa { color: var(--lk-verde-forte) !important; font-size: 14px; -ms-flex-negative: 0; flex-shrink: 0; } .cp-wrap .shopping-content > h4 small { font-size: 11px; font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--lk-rotulo); margin-left: 4px; } /* ---------- CARD DO PRODUTO (.shopping-item) ---------- */ .cp-wrap .shopping-item { border: 1px solid var(--lk-linha) !important; overflow: hidden; background: var(--lk-branco); -webkit-transition: box-shadow .22s, -webkit-transform .22s; transition: box-shadow .22s, transform .22s; padding: 0 !important; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .cp-wrap .shopping-item:hover { -webkit-transform: translateY(-3px); -ms-transform: translateY(-3px); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.11) !important; border-color: var(--lk-verde-borda) !important; } /* Imagem */ .cp-wrap .shopping-item > a:first-of-type, .cp-wrap .shopping-item > a:first-child { display: block; padding: 16px; text-align: center; border-bottom: 1px solid var(--lk-linha-2); } .cp-wrap .shopping-item .img-responsive { max-height: 160px; width: auto !important; margin: 0 auto; } /* h4 dentro do card: contém p com nome, preço riscado, preço PIX e label */ .cp-wrap .shopping-item > h4 { background: var(--lk-fundo-3); padding: 12px 14px 10px !important; margin: 0 !important; font-size: inherit; font-weight: inherit; line-height: inherit; } /* Linha 1: nome do produto */ .cp-wrap .shopping-item > h4 > p:first-child { font-size: 13px; font-weight: 600; color: var(--lk-texto); line-height: 1.45; margin-bottom: 8px !important; } .cp-wrap .shopping-item > h4 > p:first-child a { color: var(--lk-texto) !important; text-decoration: none !important; } .cp-wrap .shopping-item > h4 > p:first-child a:hover { color: var(--lk-verde-forte) !important; } /* Linha 2: preço riscado (original) */ .cp-wrap .shopping-item > h4 > p:nth-child(2) { margin-bottom: 2px !important; } .cp-wrap .shopping-item > h4 > p:nth-child(2) small { font-size: 12px; color: #aaa; } .cp-wrap .shopping-item > h4 > p:nth-child(2) strike { text-decoration: line-through; } /* Linha 3: preço PIX (classe .color + big big) */ .cp-wrap .shopping-item > h4 > p.color { color: var(--lk-verde-forte) !important; font-size: 22px !important; font-weight: 700; line-height: 1.2; margin-bottom: 2px !important; } .cp-wrap .shopping-item > h4 > p.color big { font-size: inherit !important; } /* Linha 4: label "À vista no PIX" */ .cp-wrap .shopping-item > h4 > p:last-child small { font-size: 11.5px; color: var(--lk-rotulo); letter-spacing: .01em; } /* Banner de promoção (bg-black) que aparece antes da imagem */ .cp-wrap .shopping-item > h4.bg-black { background: var(--lk-texto) !important; color: var(--lk-branco) !important; text-align: center; padding: 6px 10px !important; font-size: 12px !important; margin: 0 !important; } .cp-wrap .shopping-item > h4.bg-black p, .cp-wrap .shopping-item > h4.bg-black small { color: var(--lk-branco) !important; margin: 2px 0 !important; } /* Sem estoque */ .cp-wrap .shopping-item .bg-grey { background: var(--lk-branco)8f0 !important; border-top: 1px solid var(--lk-laranja-fundo); padding: 7px 14px !important; font-size: 12px; color: var(--lk-laranja-texto); } /* Botão mobile (visible-xs) */ .cp-wrap .shopping-item .visible-xs { padding: 10px 14px; border-top: 1px solid var(--lk-linha-2); } .cp-wrap .shopping-item .visible-xs .btn-color { width: 100%; text-align: center; } /* Hover overlay (hidden-xs) — desliza da esquerda com "Adicionar ao carrinho" */ .cp-wrap .shopping-item .item-hover { height: 40px !important; line-height: 40px !important; /* Era o verde claro com texto branco: 1,9:1 de contraste. Com o verde escuro da paleta sobe para 5,4:1, e a faixa fica igual ao botão de compra. */ background: var(--lk-verde-forte) !important; font-weight: 600; letter-spacing: .02em; font-size: 13px; } .cp-wrap .shopping-item .item-hover a { color: var(--lk-branco) !important; font-size: 13px; } /* Botão "Conferir" para produtos especiais (cabo, camiseta) */ .cp-wrap .shopping-item > .btn-color { display: block; margin: 0 14px 14px; text-align: center; } /* Espaçamento entre rows */ .cp-wrap .shopping-content .row { margin-bottom: 8px; } /* ---------- LISTA DE PREÇOS ---------- */ .cp-wrap .lp-table-wrap { background: var(--lk-branco); border: 1px solid var(--lk-linha); overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.04); margin-top: 4px; } .cp-wrap .lp-table-wrap .table-responsive { border: none !important; } .cp-wrap .lp-table-wrap .table-striped { border: none !important; margin: 0 !important; } /* Linha de cabeçalho (primeiro tr) */ .cp-wrap .lp-table-wrap table > tbody > tr:first-child > th, .cp-wrap .lp-table-wrap table > tbody > tr:first-child > td { background: var(--lk-preto) !important; color: rgba(255,255,255,.8) !important; font-size: 11.5px !important; font-weight: 600 !important; letter-spacing: .05em !important; text-transform: uppercase !important; border: none !important; padding: 12px 14px !important; white-space: nowrap; } /* Coluna PIX destacada no header */ .cp-wrap .lp-table-wrap table > tbody > tr:first-child > td:nth-child(4) { color: var(--lk-verde-claro-2) !important; } /* Linhas de dados */ .cp-wrap .lp-table-wrap table > tbody > tr > th, .cp-wrap .lp-table-wrap table > tbody > tr > td { padding: 9px 14px !important; font-size: 13px; vertical-align: middle !important; border-color: var(--lk-linha-2) !important; } /* Thumbnail miniatura */ .cp-wrap .lp-table-wrap table > tbody > tr > th:first-child img { width: 36px !important; height: 36px; -o-object-fit: contain; object-fit: contain; border: 1px solid var(--lk-linha); background: var(--lk-fundo-3); padding: 2px; } /* Nome do produto */ .cp-wrap .lp-table-wrap table > tbody > tr > th:nth-child(2) { font-size: 12.5px; font-weight: 500; color: var(--lk-preto-3); max-width: 260px; } /* Preço PIX — coluna 4, destaque verde */ .cp-wrap .lp-table-wrap table > tbody > tr > td:nth-child(4) { color: var(--lk-verde-forte) !important; font-weight: 700; } .cp-wrap .lp-table-wrap table > tbody > tr > td:nth-child(4) big { font-size: 15px !important; } /* Preço MercadoPago — coluna 5 */ .cp-wrap .lp-table-wrap table > tbody > tr > td:nth-child(5) { color: var(--lk-texto-2); } /* Preço normal — coluna 6 */ .cp-wrap .lp-table-wrap table > tbody > tr > td:nth-child(6) { color: #888; font-size: 12px; } /* Sem estoque na coluna 3 */ .cp-wrap .lp-table-wrap table > tbody > tr > td:nth-child(3) .fa-exclamation-triangle { color: var(--lk-laranja) !important; } /* Zebra e hover */ .cp-wrap .lp-table-wrap .table-striped > tbody > tr:nth-of-type(odd) { background: var(--lk-verde-hover-2) !important; } .cp-wrap .lp-table-wrap .table-striped > tbody > tr:hover { background: var(--lk-verde-fundo) !important; } /* Botão na lista */ .cp-wrap .lp-table-wrap .btn-color { font-size: 12px !important; padding: 5px 12px !important; white-space: nowrap; } /* ---------- FILTRO ---------- */ .cp-filter-wrap { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0; margin: 24px 0 20px; border: 2px solid var(--lk-verde-borda-2); background: var(--lk-branco); overflow: hidden; } .cp-filter-wrap:focus-within { border-color: var(--lk-verde); } .cp-filter-icon { padding: 0 12px; color: var(--lk-texto-5); font-size: 14px; line-height: 1; -ms-flex-negative: 0; flex-shrink: 0; } .cp-filter-input { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border: none !important; outline: none !important; box-shadow: none !important; padding: 11px 4px !important; font-size: 14px; color: var(--lk-texto); background: transparent; } .cp-filter-input::-webkit-input-placeholder { color: var(--lk-preto-texto); } .cp-filter-input::-moz-placeholder { color: var(--lk-preto-texto); } .cp-filter-input:-ms-input-placeholder { color: var(--lk-preto-texto); } .cp-filter-clear { padding: 0 12px; color: var(--lk-preto-texto); font-size: 13px; cursor: pointer; display: none; line-height: 1; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: color .15s; transition: color .15s; } .cp-filter-clear:hover { color: var(--lk-erro-claro); } .cp-filter-clear.visible { display: block; } .cp-filter-count { padding: 0 14px 0 0; font-size: 12px; color: var(--lk-texto-5); white-space: nowrap; -ms-flex-negative: 0; flex-shrink: 0; } /* Card oculto pelo filtro */ .cp-wrap .shopping-item.cp-hidden-item { display: none; } .cp-wrap .shopping-content > h4.cp-hidden-cat { display: none; } /* ---------- OVERLAY "ADICIONANDO..." ---------- */ .cp-cart-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 18, 12, 0.82); z-index: 9999; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .cp-cart-overlay.active { display: -webkit-box; display: -ms-flexbox; display: flex; } .cp-cart-overlay-box { background: var(--lk-preto); border: 1px solid rgba(81, 212, 102, .35); padding: 36px 48px; text-align: center; color: var(--lk-branco); min-width: 260px; } .cp-cart-overlay-spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid rgba(81, 212, 102, .2); border-top-color: var(--lk-verde); border-radius: 50%; -webkit-animation: cp-spin .7s linear infinite; animation: cp-spin .7s linear infinite; margin-bottom: 18px; } @-webkit-keyframes cp-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes cp-spin { to { transform: rotate(360deg); } } .cp-cart-overlay-msg { font-size: 15px; font-weight: 600; color: var(--lk-branco); letter-spacing: .02em; } .cp-cart-overlay-sub { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 6px; } /* ---------- OVERLAY CARRINHO ---------- */ .cp-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, .72); z-index: 9999; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .cp-overlay.cp-overlay--visible { display: -webkit-box; display: -ms-flexbox; display: flex; } .cp-overlay__box { background: var(--lk-preto-rodape); border: 1px solid rgba(81,212,102,.3); border-top: 3px solid var(--lk-filete); padding: 36px 48px; text-align: center; min-width: 260px; } .cp-overlay__spinner { display: inline-block; width: 36px; height: 36px; border: 3px solid rgba(81,212,102,.2); border-top-color: var(--lk-verde); border-radius: 50%; -webkit-animation: cp-spin .7s linear infinite; animation: cp-spin .7s linear infinite; margin-bottom: 16px; } @-webkit-keyframes cp-spin { to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes cp-spin { to { transform: rotate(360deg); } } .cp-overlay__msg { color: var(--lk-branco); font-size: 15px; font-weight: 600; letter-spacing: .02em; } .cp-overlay__sub { color: rgba(255,255,255,.45); font-size: 12px; margin-top: 6px; } /* ---------- MOBILE ---------- */ @media (max-width: 767px) { .cp-wrap .shopping-content > h4 { font-size: 11.5px; padding: 8px 12px; } /* Lista de preços: scroll horizontal no mobile (tabela tem muitas colunas) */ .cp-wrap .lp-table-wrap .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .cp-wrap .lp-table-wrap table { min-width: 540px; } } /* ================================================================== condicoes-compra.css ================================================================== */ /* condicoes-compra.css — estilos da página condicoes-compra.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= CONDIÇÕES DE COMPRA — estilo alinhado ao template_produto (escopado em .pcc-wrap) ========================================= */ .pcc-wrap { color: var(--lk-texto); } .pcc-header .container { position: relative; z-index: 1; } .pcc-body { padding: 32px 0 56px; } .pcc-grid { display: grid; grid-template-columns: minmax(230px, 260px) minmax(0, 1fr); gap: 30px; align-items: start; } /* Índice lateral */ .pcc-indice { position: sticky; top: 90px; } .pcc-indice-titulo { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 0 0 12px; } .pcc-indice ul { list-style: none !important; margin: 0 !important; padding: 0 !important; background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); } .pcc-indice li { border-bottom: 1px solid var(--lk-linha-2); } .pcc-indice li:last-child { border-bottom: none; } .pcc-indice a { display: flex; align-items: center; gap: 10px; padding: 11px 15px; font-size: 13.5px; line-height: 1.4; color: var(--lk-texto) !important; text-decoration: none !important; transition: background .15s; } .pcc-indice i { color: var(--lk-verde-forte); width: 16px; text-align: center; flex-shrink: 0; } /* Seções */ .pcc-secao { scroll-margin-top: 100px; margin-bottom: 30px; } .pcc-secao:last-child { margin-bottom: 0; } .pcc-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 22px 24px; } .pcc-card p { font-size: 14px; line-height: 1.75; color: var(--lk-texto-2); margin: 0 0 14px; } .pcc-card p:last-child { margin-bottom: 0; } .pcc-card a { color: var(--lk-verde-forte); } .pcc-card h4 { font-size: 13px; font-weight: 700; color: var(--lk-texto); margin: 20px 0 8px; } .pcc-card h4:first-child { margin-top: 0; } .pcc-lista { list-style: none !important; margin: 0 0 14px !important; padding: 0 !important; } .pcc-lista li { position: relative; padding: 0 0 0 22px; margin-bottom: 8px; font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); } .pcc-lista li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; background: var(--lk-verde); } .pcc-destaque { background: var(--lk-verde-fundo); border-left: 4px solid var(--lk-verde-medio); padding: 13px 16px; font-size: 14px; line-height: 1.7; color: var(--lk-verde-texto); margin: 0 0 14px; } @media (max-width: 991px) { .pcc-grid { grid-template-columns: 1fr; } .pcc-indice { position: static; } } @media (max-width: 767px) { .pcc-header { padding: 24px 0 20px; } .pcc-body { padding: 20px 0 40px; } .pcc-card { padding: 18px 16px; } } /* ================================================================== contato.css ================================================================== */ /* contato.css — estilos da página contato.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= CONTATO — estilo alinhado ao template_produto (escopado em .pc-wrap) ========================================= */ .pc-wrap { color: var(--lk-texto); } .pc-header .container { position: relative; z-index: 1; } .pc-header-sub { color: var(--lk-preto-texto); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; max-width: 780px; } .pc-body { padding: 32px 0 56px; } .pc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 26px; align-items: start; } .pc-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 22px 24px; } .pc-card p { font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); margin: 0 0 12px; } .pc-card p:last-child { margin-bottom: 0; } .pc-card a { color: var(--lk-verde-forte); } /* Formulário */ .pc-campo { margin-bottom: 16px; } .pc-campo label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-rotulo); margin: 0 0 6px; } .pc-campo input[type="text"], .pc-campo textarea { width: 100%; border: 1px solid var(--lk-linha) !important; box-shadow: none !important; background: var(--lk-branco); padding: 11px 13px !important; font-size: 14px; color: var(--lk-texto); line-height: 1.5; transition: border-color .15s; } .pc-campo input[type="text"]:focus, .pc-campo textarea:focus { border-color: var(--lk-verde) !important; outline: 0 !important; } .pc-campo textarea { resize: vertical; min-height: 150px; } .pc-campo .pc-ajuda { font-size: 12.5px; color: var(--lk-texto-4); margin: 6px 0 0; text-transform: none; letter-spacing: 0; font-weight: 400; } .pc-captcha { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; background: var(--lk-fundo-3); border: 1px solid var(--lk-linha); padding: 14px 16px; margin-bottom: 18px; } .pc-captcha img { border: 1px solid var(--lk-linha); background: var(--lk-branco); cursor: pointer; display: block; } .pc-captcha .pc-campo { margin: 0; flex: 1; min-width: 200px; } .pc-captcha-troca { font-size: 12px; color: var(--lk-texto-4); margin: 6px 0 0; } .pc-captcha-troca a { color: var(--lk-verde-forte); cursor: pointer; } .pc-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; border: 0; font-size: 14px; font-weight: 600; padding: 12px 26px; cursor: pointer; transition: background .15s, transform .1s; } .pc-btn:hover { background: var(--lk-verde-escuro); transform: translateY(-1px); } /* Avisos */ .pc-aviso { border-left: 4px solid; padding: 14px 16px; font-size: 14px; line-height: 1.6; margin-bottom: 22px; } .pc-aviso i { margin-right: 6px; } .pc-erro { background: var(--lk-erro-fundo); border-color: var(--lk-erro); color: var(--lk-erro-texto); } .pc-ok { background: var(--lk-verde-fundo); border-color: var(--lk-verde-medio); color: var(--lk-verde-texto); } .pc-ok b { display: block; font-size: 15.5px; margin-bottom: 4px; } .pc-canais li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--lk-linha-2); font-size: 13.5px; line-height: 1.6; color: var(--lk-texto-2); } .pc-canais li:last-child { border-bottom: none; } .pc-canais i { color: var(--lk-verde-forte); font-size: 16px; width: 18px; text-align: center; flex-shrink: 0; margin-top: 2px; } .pc-canais strong { display: block; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--lk-texto-5); margin-bottom: 2px; } .pc-canais a { color: var(--lk-verde-forte); } @media (max-width: 991px) { .pc-grid { grid-template-columns: 1fr; } } @media (max-width: 767px) { .pc-header { padding: 24px 0 20px; } .pc-body { padding: 20px 0 40px; } .pc-card { padding: 18px 16px; } } /* ================================================================== feiras.css ================================================================== */ /* feiras.css — estilos da página feiras.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== FEIRAS E EVENTOS — estilo alinhado ao template_produto ===== */ .fe-wrap { color: var(--lk-texto); } .fe-header .container { position: relative; z-index: 1; } .fe-body { padding: 32px 0 56px; } .fe-evento { margin-bottom: 40px; } .fe-evento:last-child { margin-bottom: 0; } .fe-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; } .fe-capa { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 0; overflow: hidden; display: block; } .fe-capa img { width: 100%; height: auto; display: block; } .fe-texto p { font-size: 14px; line-height: 1.75; color: var(--lk-texto-2); margin: 0 0 12px; } .fe-texto p:last-child { margin-bottom: 0; } .fe-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; margin-top: 16px; } .fe-fotos a { display: block; position: relative; border: 1px solid var(--lk-linha); background: var(--lk-branco); overflow: hidden; cursor: zoom-in; transition: border-color .15s, transform .1s; } .fe-fotos a:hover { border-color: var(--lk-verde); transform: translateY(-2px); } .fe-fotos img { width: 100%; height: 92px; object-fit: cover; display: block; } @media (max-width: 900px) { .fe-grid { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 767px) { .fe-header { padding: 24px 0 20px; } .fe-body { padding: 20px 0 40px; } .fe-fotos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); } .fe-fotos img { height: 78px; } } /* ================================================================== fwu.css ================================================================== */ /* fwu.css — estilos da página fwu.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= FWU — estilo alinhado ao template_produto (escopado em .pm-wrap) ========================================= */ .pm-wrap { color: var(--lk-texto); } .pm-header .container { position: relative; z-index: 1; } .pm-header-title { font-size: clamp(20px, 3vw, 30px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.25; letter-spacing: -.01em; } .pm-body { padding: 36px 0 56px; } .pm-section-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; } .pm-card { background: var(--lk-branco); border: 1px solid var(--lk-linha);overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); max-width: 560px; } .pm-list li:last-child { border-bottom: none; } .pm-list a { display: flex; align-items: center; gap: 12px; padding: 11px 16px; font-size: 13.5px; line-height: 1.5; color: var(--lk-texto) !important; text-decoration: none !important; transition: background .15s; } /* Botão de download (mesmo padrão do pp-btn do template) */ .pm-btn-dl { display: inline-flex; align-items: center; gap: 9px; padding: 11px 22px; font-size: 13.5px; font-weight: 600; text-decoration: none !important;background: var(--lk-verde-forte); color: var(--lk-branco) !important; transition: background .15s, transform .1s; margin: 6px 0 4px; } .pm-btn-dl:hover { background: var(--lk-verde-escuro); transform: translateY(-1px); } /* Passos numerados */ .pm-steps { list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: passo; max-width: 900px; } .pm-steps > li { counter-increment: passo; position: relative; background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 16px 20px 16px 62px; margin-bottom: 14px; font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); } .pm-steps > li::before { content: counter(passo); position: absolute; left: 18px; top: 16px; width: 28px; height: 28px; border-radius: 50%; background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); color: var(--lk-verde-texto); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .pm-steps img, .pm-body p img { max-width: 100%; height: auto; border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); margin: 12px 0 4px; display: block; } @media (max-width: 767px) { .pm-header { padding: 24px 0 20px; } .pm-body { padding: 20px 0 40px; } } /* ================================================================== lumikit-com-holyrics.css ================================================================== */ /* lumikit-com-holyrics.css — estilos da página lumikit-com-holyrics.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== LUMIKIT + HOLYRICS — estilo alinhado ao template_produto ===== */ .hy-wrap { color: var(--lk-texto); } .hy-header { text-align: center; background: linear-gradient(rgba(10,16,12,.72), rgba(10,16,12,.72)), url("../../img/lumikit-com-holyrics-fundo.png"); background-size: cover; background-position: center center; padding: 54px 15px; border-bottom: 3px solid var(--lk-filete); } .hy-header h1 { color: var(--lk-branco); font-size: clamp(22px, 3.6vw, 34px); font-weight: 800; margin: 0; line-height: 1.25; } .hy-header p { color: var(--lk-verde-campo); font-size: 15px; line-height: 1.7; margin: 14px auto 0; max-width: 760px; } .hy-body { padding: 32px 0 56px; } .hy-parabens { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); padding: 18px 20px; margin-bottom: 26px; } .hy-parabens b { display: block; font-size: 16px; color: var(--lk-verde-texto); margin-bottom: 6px; } .hy-parabens p { font-size: 14px; line-height: 1.7; color: var(--lk-verde-rotulo); margin: 0; } .hy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; align-items: stretch; } .hy-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); display: flex; flex-direction: column; transition: box-shadow .15s, transform .1s; } .hy-card:hover { box-shadow: 0 5px 16px rgba(0,0,0,.09); transform: translateY(-2px); } .hy-card-img { display: flex; align-items: center; justify-content: center; background: var(--lk-fundo-3); border-bottom: 1px solid var(--lk-linha-2); padding: 14px; min-height: 170px; } .hy-card-img img { max-width: 100%; max-height: 190px; height: auto; display: block; } .hy-card-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; } .hy-card h3 { font-size: 15px; font-weight: 800; color: var(--lk-texto); margin: 0 0 8px; line-height: 1.35; display: flex; align-items: flex-start; gap: 9px; } .hy-card h3 i { color: var(--lk-verde-forte); font-size: 16px; margin-top: 2px; flex-shrink: 0; } .hy-card p { font-size: 13.5px; line-height: 1.6; color: var(--lk-texto-3); margin: 0 0 16px; flex: 1; } .hy-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 14px; font-weight: 700; padding: 12px 20px; text-decoration: none !important; transition: background .15s; } .hy-btn:hover { background: var(--lk-verde-escuro); } @media (max-width: 767px) { .hy-header { padding: 34px 15px; } .hy-body { padding: 20px 0 40px; } .hy-card-img { min-height: 140px; } } /* ================================================================== manuais-descontinuados.css ================================================================== */ /* manuais-descontinuados.css — estilos da página manuais-descontinuados.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* estilo compartilhado com manuais.php (escopado em .pm-wrap) */ .pm-wrap { color: var(--lk-texto); } .pm-header .container { position: relative; z-index: 1; } .pm-body { padding: 36px 0 56px; } /* Filtro (mesmo padrão do comprar.php) */ .pm-filter-wrap { display: flex; align-items: center; background: var(--lk-branco); border: 1px solid var(--lk-linha); margin-bottom: 26px; transition: border-color .15s; } .pm-filter-wrap:focus-within { border-color: var(--lk-verde); } .pm-filter-icon { padding: 0 12px; color: var(--lk-texto-5); font-size: 14px; line-height: 1; flex-shrink: 0; } .pm-filter-input { flex: 1; border: none !important; outline: none !important; box-shadow: none !important; padding: 11px 4px !important; font-size: 14px; color: var(--lk-texto); background: transparent; } .pm-filter-input::placeholder { color: var(--lk-preto-texto); } .pm-filter-clear { padding: 0 12px; color: var(--lk-preto-texto); font-size: 13px; cursor: pointer; display: none; line-height: 1; flex-shrink: 0; transition: color .15s; } .pm-filter-clear:hover { color: var(--lk-erro-claro); } .pm-filter-clear.visible { display: block; } .pm-filter-count { padding: 0 14px 0 0; font-size: 12px; color: var(--lk-texto-5); white-space: nowrap; flex-shrink: 0; } /* Colunas "masonry": os cards emendam verticalmente, sem espaços em branco */ .pm-grid { columns: 3 320px; column-gap: 26px; } .pm-grid > section { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 26px; } .pm-hidden { display: none !important; } .pm-card { background: var(--lk-branco); border: 1px solid var(--lk-linha);overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); } .pm-list li:last-child { border-bottom: none; } .pm-list a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; color: var(--lk-texto) !important; text-decoration: none !important; transition: background .15s; } @media (max-width: 767px) { .pm-header { padding: 24px 0 20px; } .pm-body { padding: 20px 0 40px; } } /* ================================================================== manuais.css ================================================================== */ /* manuais.css — estilos da página manuais.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= MANUAIS — estilo alinhado ao template_produto (escopado em .pm-wrap) ========================================= */ .pm-wrap { color: var(--lk-texto); } .pm-header::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 90% 50%, rgba(81,212,102,.07) 0%, transparent 70%), repeating-linear-gradient(90deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px), repeating-linear-gradient(0deg, transparent 0px, transparent 59px, rgba(255,255,255,.025) 60px); pointer-events: none; } .pm-header .container { position: relative; z-index: 1; } .pm-body { padding: 36px 0 56px; } /* Filtro (mesmo padrão do comprar.php) */ .pm-filter-wrap { display: flex; align-items: center; background: var(--lk-branco); border: 1px solid var(--lk-linha); margin-bottom: 26px; transition: border-color .15s; } .pm-filter-wrap:focus-within { border-color: var(--lk-verde); } .pm-filter-icon { padding: 0 12px; color: var(--lk-texto-5); font-size: 14px; line-height: 1; flex-shrink: 0; } .pm-filter-input { flex: 1; border: none !important; outline: none !important; box-shadow: none !important; padding: 11px 4px !important; font-size: 14px; color: var(--lk-texto); background: transparent; } .pm-filter-input::placeholder { color: var(--lk-preto-texto); } .pm-filter-clear { padding: 0 12px; color: var(--lk-preto-texto); font-size: 13px; cursor: pointer; display: none; line-height: 1; flex-shrink: 0; transition: color .15s; } .pm-filter-clear:hover { color: var(--lk-erro-claro); } .pm-filter-clear.visible { display: block; } .pm-filter-count { padding: 0 14px 0 0; font-size: 12px; color: var(--lk-texto-5); white-space: nowrap; flex-shrink: 0; } /* Colunas "masonry": os cards emendam verticalmente, sem espaços em branco */ .pm-grid { columns: 3 320px; column-gap: 26px; } .pm-grid > section { break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 26px; } .pm-hidden { display: none !important; } .pm-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); } .pm-list li:last-child { border-bottom: none; } .pm-list a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; font-size: 13.5px; line-height: 1.5; color: var(--lk-texto) !important; text-decoration: none !important; transition: background .15s; } @media (max-width: 767px) { .pm-header { padding: 24px 0 20px; } .pm-body { padding: 20px 0 40px; } } /* ================================================================== naestrada.css ================================================================== */ /* naestrada.css — estilos da página naestrada.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== UL NA ESTRADA ===== */ .ne-wrap { color: var(--lk-texto); } .ne-header .container { position: relative; z-index: 1; } .ne-header h1 { font-size: clamp(22px, 3.5vw, 34px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.2; } .ne-body { padding: 32px 0 56px; } .ne-conteudo { max-width: 860px; margin: 0 auto; } /* o texto que vem do documento */ .ne-doc { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: var(--lk-sombra); padding: 28px 32px; } .ne-doc p { font-size: 14.5px; line-height: 1.8; color: var(--lk-texto-2); margin: 0 0 14px; } .ne-doc p:last-child { margin-bottom: 0; } .ne-doc h1, .ne-doc h2, .ne-doc h3, .ne-doc h4 { font-weight: 800; color: var(--lk-texto); line-height: 1.3; margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--lk-linha-2); } .ne-doc h1 { font-size: 21px; } .ne-doc h2 { font-size: 19px; } .ne-doc h3 { font-size: 16.5px; } .ne-doc h4 { font-size: 15px; border-bottom: none; } .ne-doc h1:first-child, .ne-doc h2:first-child, .ne-doc h3:first-child { margin-top: 0; } .ne-doc ul, .ne-doc ol { margin: 0 0 16px; padding-left: 22px; } .ne-doc li { font-size: 14.5px; line-height: 1.8; color: var(--lk-texto-2); margin-bottom: 7px; } .ne-doc a { color: var(--lk-verde-forte); } .ne-doc img { max-width: 100%; height: auto; display: block; margin: 16px 0; border: 1px solid var(--lk-linha); } .ne-doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; } .ne-doc th, .ne-doc td { border: 1px solid var(--lk-linha); padding: 9px 12px; text-align: left; vertical-align: top; } .ne-doc th { background: var(--lk-fundo-3); font-weight: 700; font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--lk-rotulo); } .ne-doc hr { border: 0; border-top: 1px solid var(--lk-linha); margin: 22px 0; } .ne-rodape { font-size: 12px; color: var(--lk-texto-5); margin-top: 14px; text-align: right; } /* quando não foi possível carregar */ .ne-erro { background: var(--lk-atencao-fundo); border: 1px solid var(--lk-atencao); border-left: 4px solid var(--lk-atencao); padding: 20px 22px; } .ne-erro h2 { font-size: 17px; font-weight: 800; color: var(--lk-atencao-texto); margin: 0 0 10px; } .ne-erro p { font-size: 14px; line-height: 1.7; color: var(--lk-atencao-texto); margin: 0 0 14px; } .ne-erro a { color: var(--lk-verde-forte); font-weight: 600; } @media (max-width: 767px) { .ne-header { padding: 24px 0 20px; } .ne-body { padding: 20px 0 40px; } .ne-doc { padding: 18px 18px; } } /* ================================================================== orc.css ================================================================== */ /* orc.css — estilos da página orc.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================================= ORÇAMENTO — feito para ler na tela e imprimir em PDF ========================================================= */ .oc-wrap { color: var(--lk-texto); font-size: 14px; } .oc-folha { max-width: 900px; margin: 0 auto; background: var(--lk-branco); } /* Cabeçalho claro: o logo tem letras pretas e foi feito para fundo claro. Um documento também imprime melhor assim — o topo escuro consumia tinta e, em impressora sem cor, virava um bloco cinza. A identidade fica no filete verde e no logo. */ .oc-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; background: var(--lk-branco); padding: 22px 26px 18px; border-bottom: 3px solid var(--lk-filete); } .oc-topo-logo { display: block; width: 290px; max-width: 100%; height: auto; margin-bottom: 12px; } .oc-topo h1 { font-size: 17px; font-weight: 800; margin: 0 0 3px; color: var(--lk-texto); letter-spacing: -.01em; } .oc-topo .oc-sub { font-size: 12.5px; color: var(--lk-texto-4); line-height: 1.65; } .oc-topo .oc-sub a { color: var(--lk-verde-forte); } .oc-meta { text-align: right; font-size: 12px; color: var(--lk-texto-4); white-space: nowrap; line-height: 1.7; } .oc-meta b { color: var(--lk-texto); font-size: 16px; display: block; } /* barra de ações (só na tela) */ .oc-acoes { display: flex; gap: 10px; flex-wrap: wrap; padding: 14px 26px; background: var(--lk-fundo-2); border-bottom: 1px solid var(--lk-linha); } .oc-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; border: 0; font-size: 13.5px; font-weight: 700; padding: 10px 18px; cursor: pointer; text-decoration: none !important; } .oc-btn:hover { background: var(--lk-verde-escuro); } .oc-btn-claro { background: var(--lk-branco); color: var(--lk-verde-forte) !important; border: 1px solid var(--lk-verde-borda); } .oc-btn-claro:hover { background: var(--lk-verde-hover); } .oc-dica { font-size: 12px; color: var(--lk-texto-4); align-self: center; } .oc-corpo { padding: 22px 26px 30px; } .oc-secao { margin-bottom: 26px; } .oc-secao:last-child { margin-bottom: 0; } .oc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 0 0 10px; display: flex; align-items: center; gap: 10px; } /* tabelas */ .oc-tabela { width: 100%; border-collapse: collapse; } .oc-tabela th { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--lk-rotulo); text-align: left; padding: 0 10px 7px; border-bottom: 1px solid var(--lk-linha); } .oc-tabela td { padding: 9px 10px; border-bottom: 1px solid var(--lk-linha-2); vertical-align: top; font-size: 13.5px; } .oc-tabela tr:last-child td { border-bottom: none; } .oc-num { text-align: right; white-space: nowrap; } .oc-codigo { color: var(--lk-texto-4); font-size: 12.5px; white-space: nowrap; } .oc-nome { font-weight: 600; } .oc-detalhe { font-size: 12px; color: var(--lk-texto-4); margin-top: 2px; } .oc-aviso-item { font-size: 12px; color: var(--lk-erro-texto); margin-top: 2px; } /* total dos produtos */ .oc-total { display: flex; justify-content: space-between; align-items: baseline; background: var(--lk-fundo-3); border: 1px solid var(--lk-linha); padding: 12px 16px; margin-top: 10px; } .oc-total b { font-size: 17px; } .oc-total small { color: var(--lk-texto-4); } /* pagamento */ .oc-pagamentos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .oc-pag { border: 1px solid var(--lk-linha); } .oc-pag h3 { font-size: 13px; font-weight: 800; margin: 0; padding: 11px 16px; background: var(--lk-verde-fundo); color: var(--lk-verde-texto); border-bottom: 1px solid var(--lk-verde-borda-2); } .oc-pag h3 span { font-weight: 600; color: var(--lk-verde-rotulo); } .oc-pag-corpo { padding: 12px 16px 14px; } .oc-pag-linha { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px dotted var(--lk-linha); } .oc-pag-linha:last-child { border-bottom: none; } .oc-pag-linha b { white-space: nowrap; } .oc-pag-prazo { color: var(--lk-texto-4); font-size: 11.5px; } .oc-pag-desconto { font-size: 12px; color: var(--lk-verde-texto); background: var(--lk-verde-fundo); padding: 6px 10px; margin-bottom: 10px; } /* observações */ .oc-obs { font-size: 12.5px; line-height: 1.75; color: var(--lk-texto-3); } .oc-obs b { color: var(--lk-texto); } .oc-destaque { background: var(--lk-verde-fundo); border-left: 4px solid var(--lk-verde-medio); padding: 12px 15px; margin-bottom: 12px; font-size: 13px; color: var(--lk-verde-texto); } .oc-destaque code { background: var(--lk-branco); border: 1px solid var(--lk-verde-borda-2); padding: 2px 6px; font-size: 13px; color: var(--lk-texto); } .oc-rodape { border-top: 1px solid var(--lk-linha); margin-top: 22px; padding-top: 12px; font-size: 11.5px; color: var(--lk-texto-5); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } @media (max-width: 767px) { .oc-topo { flex-direction: column; padding: 18px; } .oc-topo-logo { width: 220px; margin-bottom: 10px; } .oc-meta { text-align: left; } .oc-corpo { padding: 16px 18px 24px; } .oc-pagamentos { grid-template-columns: 1fr; } .oc-tabela th:nth-child(4), .oc-tabela td:nth-child(4) { display: none; } /* peso sai no celular */ } /* ---------- IMPRESSÃO / PDF ---------- */ @media print { @page { size: A4 portrait; margin: 12mm; } body { background: var(--lk-branco) !important; } /* Esconde o site e reacende só o orçamento. ANTES a regra era `body > *:not(.oc-wrap)`, que só funcionaria se a folha fosse filha DIRETA do . Ela não é: o orc.php é incluído pelo index.php, então o caminho real é body > div.outer > … > .oc-wrap. O seletor pegava a div.outer inteira — que de fato não tem a classe oc-wrap — e escondia o orçamento junto com o site. Daí a folha em branco na impressão. `visibility` resolve sem depender de quantas divs existem no meio: esconde tudo e traz de volta a folha e o conteúdo dela. Ao contrário de display:none, a visibilidade pode ser revertida nos descendentes. */ body * { visibility: hidden; } .oc-wrap, .oc-wrap * { visibility: visible; } /* visibility não tira do fluxo: o site escondido continuaria ocupando espaço e empurraria o orçamento para a segunda folha. Tirando a folha do fluxo, ela começa no alto do papel. */ .oc-wrap { position: absolute; left: 0; top: 0; width: 100%; font-size: 11pt; } /* a barra de botões está DENTRO da folha, então precisa sair à mão */ .oc-acoes { display: none !important; } .oc-folha { max-width: none; } /* ================================================================= A IMPRESSÃO ESTAVA SAINDO COM O LAYOUT DE CELULAR Uma folha A4 retrato com 12mm de margem tem 186mm de largura útil, o que dá 703px de CSS. Isso é MENOR que os 767px do `@media (max-width: 767px)` lá em cima — então, ao imprimir, o navegador ativava a versão para telas estreitas sem que ninguém tivesse pedido: as duas formas de pagamento empilhavam, a coluna de peso sumia da tabela e o cabeçalho virava uma coluna. Empilhado, o bloco de pagamentos não cabia no que sobrava da primeira folha e — por causa do `page-break-inside: avoid` do .oc-secao — pulava inteiro para a segunda, deixando um vão enorme de papel em branco. Daí as duas folhas para um item só. O bloco abaixo desfaz o layout de celular. Ele precisa vir DEPOIS da media query de 767px, e vem: este arquivo é lido de cima para baixo e o @media print está no fim. ================================================================= */ .oc-pagamentos { grid-template-columns: 1fr 1fr; gap: 10px; } .oc-topo { flex-direction: row; padding: 14px 18px 12px; } .oc-meta { text-align: right; } .oc-corpo { padding: 14px 18px 16px; } .oc-tabela th:nth-child(4), .oc-tabela td:nth-child(4) { display: table-cell; } /* ---- condensado para caber em uma folha ---- A altura útil da A4 é 273mm (1032px de CSS). Os valores abaixo são os mesmos da tela, com menos respiro: nada foi removido do orçamento, só encolhido. Se algum dia o orçamento voltar a passar de uma folha (muitos itens, muitas transportadoras), é aqui que se ajusta — ou aumenta-se, se sobrar espaço demais. */ .oc-wrap { font-size: 10pt; } .oc-topo-logo { width: 52mm; margin-bottom: 9px; } .oc-topo h1 { font-size: 14pt; } .oc-topo .oc-sub { font-size: 8.5pt; line-height: 1.5; } .oc-secao { margin-bottom: 15px; } .oc-label { margin-bottom: 7px; } .oc-tabela th, .oc-tabela td { padding-top: 5px; padding-bottom: 5px; } .oc-pag h3 { font-size: 10pt; padding: 7px 11px; } .oc-pag-corpo { padding: 9px 11px 10px; } .oc-pag-linha { font-size: 9pt; padding: 4px 0; } .oc-pag-prazo { font-size: 8pt; } .oc-pag-desconto { font-size: 8.5pt; padding: 5px 8px; margin-bottom: 8px; } .oc-destaque { font-size: 9.5pt; padding: 9px 12px; margin-bottom: 9px; } .oc-obs { font-size: 9pt; line-height: 1.55; } .oc-rodape { margin-top: 14px; padding-top: 9px; font-size: 8.5pt; } .oc-topo { border-bottom: 2pt solid var(--lk-verde); -webkit-print-color-adjust: exact; print-color-adjust: exact; } .oc-label, .oc-pag h3, .oc-destaque, .oc-total { -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* as duas colunas de pagamento são irmãs: se uma quebrar sem a outra, a comparação entre PIX e cartão perde o sentido */ .oc-pagamentos, .oc-pag { page-break-inside: avoid; } .oc-secao { page-break-inside: avoid; } .oc-tabela tr { page-break-inside: avoid; } /* O endereço entre parênteses depois de cada link é útil no papel — mas não para os links de e-mail e telefone, que já aparecem escritos por extenso ao lado e só poluem a folha (era o "vendas@lumikit.com.br (mailto:vendas@lumikit.com.br)" repetido no topo). */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 7.5pt; color: #666; } a[href^="mailto:"]::after, a[href^="tel:"]::after { content: ""; } } /* ================================================================== privacidade-app.css ================================================================== */ /* privacidade-app.css — estilos da página privacidade-app.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ===== POLÍTICA DE PRIVACIDADE — estilo alinhado ao template_produto ===== */ .pa-wrap { color: var(--lk-texto); } .pa-header .container { position: relative; z-index: 1; } .pa-body { padding: 32px 0 56px; } .pa-conteudo { max-width: 780px; } .pa-data { font-size: 12.5px; color: var(--lk-texto-5); margin: 0 0 22px; } .pa-destaque { display: flex; gap: 14px; align-items: flex-start; background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 4px solid var(--lk-verde-medio); padding: 16px 18px; margin-bottom: 26px; } .pa-destaque i { color: var(--lk-verde-forte); font-size: 21px; flex-shrink: 0; margin-top: 1px; } .pa-destaque p { font-size: 14.5px; line-height: 1.7; color: var(--lk-verde-texto); margin: 0; } .pa-destaque b { color: var(--lk-verde-texto-esc); } .pa-secao { margin-bottom: 26px; } .pa-secao:last-child { margin-bottom: 0; } .pa-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 20px 22px; } .pa-card p { font-size: 14px; line-height: 1.75; color: var(--lk-texto-2); margin: 0 0 13px; } .pa-card p:last-child { margin-bottom: 0; } .pa-card a { color: var(--lk-verde-forte); } .pa-lista li { position: relative; padding: 0 0 0 22px; margin-bottom: 9px; font-size: 14px; line-height: 1.7; color: var(--lk-texto-2); } .pa-lista li:last-child { margin-bottom: 0; } .pa-lista li::before { content: ''; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; background: var(--lk-verde); } @media (max-width: 767px) { .pa-header { padding: 24px 0 20px; } .pa-body { padding: 20px 0 40px; } .pa-card { padding: 16px 16px; } } /* ================================================================== software-dmx-lumikit-show.css ================================================================== */ /* software-dmx-lumikit-show.css — estilos da página software-dmx-lumikit-show.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= LUMIKIT SHOW — estilo alinhado ao template_produto (escopado em .ps-wrap) ========================================= */ .ps-wrap { color: var(--lk-texto); } .ps-header .container { position: relative; z-index: 1; } .ps-header-acoes { margin-top: 18px; display: flex; gap: 10px; flex-wrap: wrap; } /* botão do manual: contorno, como na página de produto — a ação principal ali é baixar o programa */ .ps-btn-manual { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--lk-branco) !important; border: 1.5px solid rgba(255,255,255,.45); font-size: 13.5px; font-weight: 600; padding: 10px 20px; text-decoration: none !important; transition: background .15s; } .ps-btn-manual:hover { background: rgba(255,255,255,.12); border-color: var(--lk-verde); } .ps-btn-beta { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--lk-preto-texto) !important; border: 1px solid rgba(255,255,255,.25); font-size: 13.5px; font-weight: 600; padding: 10px 20px; text-decoration: none !important; transition: border-color .15s, color .15s; } .ps-btn-beta:hover { border-color: var(--lk-verde); color: var(--lk-branco) !important; } .ps-body { padding: 32px 0 56px; } .ps-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 34px 0 14px; display: flex; align-items: center; gap: 10px; scroll-margin-top: 100px; } .ps-label:first-of-type { margin-top: 0; } .ps-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 20px 22px; } /* Downloads — bloco em destaque, é a primeira coisa da página */ .ps-destaque { background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); border-left: 5px solid var(--lk-verde-medio); padding: 20px 22px; margin-bottom: 8px; } .ps-destaque-titulo { font-size: 16px; font-weight: 800; color: var(--lk-verde-texto); margin: 0 0 4px; display: flex; align-items: center; gap: 9px; } .ps-destaque-sub { font-size: 13.5px; line-height: 1.6; color: var(--lk-verde-rotulo); margin: 0 0 16px; } .ps-downloads { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 14px; } .ps-download { background: var(--lk-branco); border: 1px solid var(--lk-verde-borda-2); box-shadow: 0 2px 8px rgba(29,90,38,.08); padding: 18px 20px; display: flex; align-items: center; gap: 16px; transition: box-shadow .15s, transform .1s; } .ps-download:hover { box-shadow: 0 5px 16px rgba(29,90,38,.14); transform: translateY(-2px); } .ps-download-icone { width: 54px; height: 54px; flex-shrink: 0; background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); display: flex; align-items: center; justify-content: center; color: var(--lk-verde-forte); font-size: 26px; } .ps-download-info { flex: 1; min-width: 0; } .ps-download h4 { font-size: 16px; font-weight: 800; color: var(--lk-texto); margin: 0 0 6px; line-height: 1.3; } .ps-download p { font-size: 13px; line-height: 1.55; color: var(--lk-texto-3); margin: 8px 0 6px; } .ps-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--lk-fundo-2); border: 1px solid var(--lk-linha); color: var(--lk-texto-3); padding: 3px 8px; } .ps-tag i { color: var(--lk-verde-forte); } .ps-meta { display: block; font-size: 12px; color: var(--lk-texto-5); } .ps-meta i { color: var(--lk-verde-forte); margin-right: 3px; } .ps-btn-grande { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 14.5px; font-weight: 700; padding: 14px 22px; min-width: 118px; text-decoration: none !important; white-space: nowrap; transition: background .15s; } .ps-btn-grande span { font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .ps-btn-grande:hover { background: var(--lk-verde-escuro); } .ps-btn-off { background: var(--lk-linha-2); color: var(--lk-texto-5) !important; } /* Requisitos e recursos */ .ps-colunas { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; } .ps-card h4 { font-size: 13px; font-weight: 700; color: var(--lk-texto); margin: 0 0 10px; } .ps-lista li { position: relative; padding: 0 0 0 20px; margin-bottom: 7px; font-size: 13.5px; line-height: 1.6; color: var(--lk-texto-2); } .ps-lista li::before { content: ''; position: absolute; left: 3px; top: 9px; width: 6px; height: 6px; background: var(--lk-verde); } .ps-lista li:last-child { margin-bottom: 0; } /* Galeria */ .ps-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .ps-galeria a { display: block; position: relative; border: 1px solid var(--lk-linha); background: var(--lk-branco); overflow: hidden; cursor: zoom-in; transition: border-color .15s, transform .1s; } .ps-galeria a:hover { border-color: var(--lk-verde); transform: translateY(-2px); } .ps-galeria a:hover .ps-galeria-lupa { opacity: 1; } .ps-galeria img { width: 100%; height: 150px; object-fit: cover; display: block; } .ps-galeria-lupa { position: absolute; right: 8px; bottom: 8px; width: 30px; height: 30px; background: rgba(17,26,20,.75); color: var(--lk-branco); display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 0; transition: opacity .15s; pointer-events: none; } @media (max-width: 767px) { .ps-header { padding: 24px 0 20px; } .ps-body { padding: 20px 0 40px; } .ps-destaque { padding: 16px; } .ps-download { flex-wrap: wrap; } .ps-btn-grande { width: 100%; flex-direction: row; gap: 8px; } .ps-galeria img { height: 130px; } } /* ================================================================== software-dmx-lumikit-show_historico_versoes.css ================================================================== */ /* software-dmx-lumikit-show_historico_versoes.css — estilos da página software-dmx-lumikit-show_historico_versoes.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* histórico de versões — sanfona */ .ps-hist { display: grid; gap: 8px; } .ps-hist-item { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 4px rgba(0,0,0,.04); } .ps-hist-item > summary { cursor: pointer; list-style: none; padding: 13px 16px; font-size: 14px; font-weight: 700; color: var(--lk-texto); display: flex; align-items: center; gap: 10px; transition: background .15s; } .ps-hist-item > summary::-webkit-details-marker { display: none; } .ps-hist-item > summary::before { content: '\f105'; font-family: FontAwesome; color: var(--lk-verde-forte); font-size: 15px; width: 12px; transition: transform .15s; } .ps-hist-item[open] > summary::before { transform: rotate(90deg); } .ps-hist-item > summary:hover { background: var(--lk-fundo-2); color: var(--lk-verde-forte); } .ps-hist-corpo { padding: 4px 18px 16px 38px; font-size: 13.5px; line-height: 1.7; color: var(--lk-texto-2); } .ps-hist-corpo ul { margin: 0 0 10px; padding-left: 18px; } .ps-hist-corpo li { margin-bottom: 6px; } .ps-hist-corpo ul ul { margin-top: 6px; } /* ================================================================== software-dmx-lumikit-show_versoes_antigas.css ================================================================== */ /* software-dmx-lumikit-show_versoes_antigas.css — estilos da página software-dmx-lumikit-show_versoes_antigas.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* listas de arquivos antigos */ .sw-antigas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .sw-bloco { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 16px 18px; } .sw-bloco h4 { font-size: 13px; font-weight: 700; color: var(--lk-texto); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .sw-bloco h4 i { color: var(--lk-verde-forte); } .sw-bloco ul { list-style: none !important; margin: 0 !important; padding: 0 !important; max-height: 280px; overflow-y: auto; } .sw-bloco li { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--lk-linha-2); font-size: 13px; line-height: 1.5; } .sw-bloco li:last-child { border-bottom: none; } .sw-bloco li a { display: flex; align-items: center; gap: 8px; color: var(--lk-texto) !important; text-decoration: none !important; flex: 1; min-width: 0; } .sw-bloco li a:hover { color: var(--lk-verde-forte) !important; } .sw-bloco li a i { color: var(--lk-verde-forte); flex-shrink: 0; } .sw-bloco li a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sw-bloco li small { color: var(--lk-texto-5); font-size: 11.5px; white-space: nowrap; } .sw-vazio { color: var(--lk-texto-5); font-style: italic; } /* ================================================================== softwares-compativeis.css ================================================================== */ /* softwares-compativeis.css — estilos da página softwares-compativeis.php Movido de dentro do PHP. Caminhos de imagem são relativos a esta pasta (css/paginas/), por isso o ../../ antes de /img. */ /* ========================================= SOFTWARES COMPATÍVEIS — estilo alinhado ao template_produto (escopado em .sc-wrap) ========================================= */ .sc-wrap { color: var(--lk-texto); } .sc-header .container { position: relative; z-index: 1; } .sc-header-title { font-size: clamp(21px, 3.2vw, 32px); font-weight: 800; color: var(--lk-branco); margin: 0; line-height: 1.25; letter-spacing: -.01em; } .sc-header-sub { color: var(--lk-preto-texto); font-size: 14.5px; line-height: 1.6; margin: 10px 0 0; max-width: 860px; } .sc-body { padding: 30px 0 56px; } .sc-label { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--lk-verde-forte); margin: 30px 0 14px; display: flex; align-items: center; gap: 10px; } .sc-label:first-of-type { margin-top: 0; } /* colunas "masonry": os cards emendam um no outro, sem sobrar espaço em branco quando um sistema tem muito mais softwares que os outros */ .sc-grid { columns: 2 380px; column-gap: 16px; } .sc-card { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); break-inside: avoid; -webkit-column-break-inside: avoid; margin: 0 0 16px; display: inline-block; width: 100%; } .sc-card-head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--lk-linha-2); background: var(--lk-fundo-3); } .sc-card-head i { color: var(--lk-verde-forte); font-size: 17px; width: 20px; text-align: center; } .sc-card-head h3 { font-size: 14px; font-weight: 800; color: var(--lk-texto); margin: 0; } .sc-card-head span { margin-left: auto; font-size: 11px; color: var(--lk-texto-5); } .sc-lista li { padding: 10px 16px; border-bottom: 1px solid var(--lk-fundo-2); font-size: 13.5px; line-height: 1.5; } .sc-lista li:last-child { border-bottom: none; } .sc-lista a { color: var(--lk-texto) !important; font-weight: 600; text-decoration: none !important; } .sc-lista a:hover { color: var(--lk-verde-forte) !important; text-decoration: underline !important; } .sc-nota { display: block; font-size: 12.5px; line-height: 1.5; color: var(--lk-texto-4); margin-top: 3px; } .sc-nota a { color: var(--lk-verde-forte) !important; font-weight: 400; text-decoration: underline !important; } .sc-tag { font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; background: var(--lk-verde-fundo); border: 1px solid var(--lk-verde-borda); color: var(--lk-verde-texto); padding: 2px 6px; margin-left: 6px; vertical-align: 1px; } .sc-externo { font-size: 10px; color: var(--lk-preto-texto); margin-left: 5px; } .sc-aviso { background: var(--lk-verde-fundo); border-left: 4px solid var(--lk-verde-medio); padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--lk-verde-texto); margin: 0 0 6px; max-width: 900px; } .sc-dev { background: var(--lk-branco); border: 1px solid var(--lk-linha); box-shadow: 0 1px 6px rgba(0,0,0,.05); padding: 20px 22px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .sc-dev p { margin: 0; flex: 1; min-width: 240px; } .sc-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--lk-verde-forte); color: var(--lk-branco) !important; font-size: 13.5px; font-weight: 600; padding: 11px 20px; text-decoration: none !important; white-space: nowrap; transition: background .15s; } .sc-btn:hover { background: var(--lk-verde-escuro); } @media (max-width: 767px) { .sc-header { padding: 24px 0 20px; } .sc-body { padding: 20px 0 40px; } }