/* ===================================================================== lumikit-cores-neon.css — VERSÃO ALTERNATIVA DA PALETA, para comparação Igual à lumikit-cores.css em estrutura, mas com o verde partindo do NEON (#33ff00, matiz 108°) em vez do verde do menu (#51d466, matiz 130°). Para experimentar: troque o link no do index.php por este arquivo. Só um dos dois deve ser carregado por vez. ===================================================================== POR QUE ESTE ARQUIVO EXISTE Um levantamento no código encontrou 59 verdes diferentes. Eles vinham de três origens que nunca conversaram entre si: tema antigo (skin-less.css) #70c42f matiz 94° — puxa para o amarelo páginas novas #51d466 matiz 130° — verde puro (o do menu) bibliotecas (Bootstrap…) #5cb85c matiz 120° — verde intermediário Aqui a paleta é definida uma vez, a partir do verde do menu, e o restante do site passa a usar estas variáveis em vez de escrever o código da cor. COMO USAR background: var(--lk-verde-forte); color: var(--lk-verde-texto); border-color: var(--lk-linha); COMO CARREGAR No , ANTES dos demais CSS (as variáveis precisam existir primeiro) e o bloco de compatibilidade do fim ANTES do skin-less.css não: ele vem depois, para vencer o tema antigo. Ordem recomendada no index.php: bootstrap.min.css font-awesome.min.css styles/style.css styles/skin-less.css lumikit-cores.css <-- aqui, por último custom.css mega-menu.css ===================================================================== */ :root { /* ---------- VERDE: a cor da marca ---------- A escala sai do verde do menu (#51d466). Todos têm o mesmo matiz (~130°), o que faz as peças parecerem da mesma família mesmo em tons diferentes. */ /* O neon puro. Sobre fundo escuro rende 13:1 de contraste; sobre branco cai para 1,4:1, então NÃO serve para texto em página clara — só para filete, borda, fundo de destaque e texto sobre fundo escuro. */ --lk-verde: #33ff00; /* destaque: menu ativo, foco, filete do topo */ --lk-verde-medio: #42d41e; /* rótulos de seção, bordas de aviso */ /* Filete de 3px que separa o cabeçalho escuro do conteúdo claro. Tem variável própria porque precisa aparecer nos DOIS lados: o tom claro da marca some sobre o branco (1,8:1) e parece brilhar sobre o preto. Este tom fica no meio: 5,0:1 sobre o cabeçalho e 3,4:1 sobre o fundo claro. Para escurecer mais, um passo é #24873a e dois passos é o verde de botão. */ --lk-filete: #2f9c14; /* transição do cabeçalho para o conteúdo */ --lk-verde-forte: #298611; /* botões, links de ação */ --lk-verde-escuro: #1f6c0b; /* botão pressionado / hover */ --lk-verde-texto: #256215; /* texto verde sobre fundo claro */ --lk-verde-texto-esc:#1a460f; /* texto verde em destaque */ --lk-verde-suave: #a7e497; /* links sobre fundo escuro */ /* fundos e bordas suaves */ --lk-verde-fundo: #eef8ec; /* fundo dos avisos positivos */ --lk-verde-borda: #c4e7bb; /* borda dos avisos positivos */ --lk-verde-borda-2: #d2e9cc; /* borda interna, mais discreta */ --lk-verde-campo: #d6e2d3; /* borda de campo de formulário */ /* Seleção de texto. O valor era o --lk-verde puro (#33ff00): quando se entra num campo com TAB o navegador seleciona todo o conteúdo, e o texto ficava atrás de uma tarja neon, ilegível. Um verde claro com texto escuro cumpre o mesmo papel sem gritar. */ --lk-selecao: #bfe8b4; /* fundo do texto selecionado */ --lk-selecao-texto: #12290c; /* texto selecionado */ /* ---------- ESCUROS: cabeçalhos e rodapé ---------- */ --lk-preto: #111a14; /* faixa escura do topo das páginas */ --lk-preto-rodape: #0b140d; /* rodapé */ --lk-preto-texto: #b8c9bc; /* texto secundário sobre fundo escuro */ --lk-preto-titulo: #ffffff; /* ---------- CINZAS: texto e estrutura ---------- */ --lk-texto: #1c2320; /* texto principal */ --lk-texto-2: #3a453f; /* corpo de texto */ --lk-texto-3: #5a665e; /* apoio */ --lk-texto-4: #7a877d; /* legenda */ --lk-texto-5: #98a89b; /* muito discreto */ --lk-linha: #e2e7e4; /* bordas de caixas */ --lk-linha-2: #eef2ef; /* divisórias internas */ --lk-fundo: #fafafa; /* fundo da página */ --lk-fundo-2: #f0f4f1; /* fundo alternado */ /* ---------- NEUTROS ---------- Branco e preto puros merecem variável própria: mesmo que o #ffffff seja quase indistinguível do fundo (#fafafa), o significado é diferente — um é "papel", o outro é "fundo da página". */ --lk-branco: #ffffff; --lk-preto-puro: #000000; /* desenhos e traços (SVG do cabo) */ --lk-cinza-medio: #808080; /* neutro sem tendência de cor */ --lk-fundo-3: #f7f9f7; /* fundo de cabeçalho de tabela */ --lk-verde-hover: #e8f9e4; /* fundo de item sob o cursor */ --lk-verde-hover-2: #f7fcf6; /* o mesmo, ainda mais suave */ --lk-verde-rotulo: #377328; /* texto dentro de aviso verde */ --lk-rotulo: #6b7a6e; /* rótulo de coluna, maiúsculas */ --lk-desabilitado: #b9c7bc; /* botão desligado */ --lk-desabilitado-2: #cbd6cd; /* ícone desligado */ --lk-erro-borda: #f2b8b1; /* borda de item com erro */ --lk-atencao-icone: #c99700; --lk-erro-claro: #e05050; /* aviso menos severo (item descontinuado) */ --lk-verde-fundo-esc:#2e4e26; /* faixa verde escura sobre fundo preto */ --lk-azul-noite: #0a1a2a; /* degradê da página inicial */ --lk-erro-2: #b9483c; /* vermelho menos saturado (etiquetas) */ --lk-verde-claro: #8fe3a0; /* verde claro sobre fundo escuro */ --lk-verde-claro-2: #7deb92; /* o mesmo, mais vibrante */ --lk-verde-escuro-2: #1d8a2e; /* verde de botão um tom acima do forte */ --lk-preto-2: #1c2a20; /* faixa escura esverdeada */ --lk-preto-3: #2a3a2a; /* fundo escuro de bloco */ --lk-cinza-claro: #aaaaaa; --lk-cinza-azulado: #6c7a8a; /* cinza da página inicial */ --lk-cinza-neutro: #7f8c8d; /* cinza sem tendência de verde */ --lk-azul-marinho: #1e2f5e; /* azul do degradê da página inicial */ --lk-ambar-texto: #8a6100; /* texto sobre fundo âmbar (etiqueta aberta) */ /* laranja de destaque (usado em avisos da loja) */ --lk-laranja: #e07020; --lk-laranja-texto: #a06020; --lk-laranja-fundo: #ffe4c4; /* ---------- CORES DE PRODUTO ---------- As cores dos conectores do cabo e das etiquetas de produto. Não são cores de interface: representam a cor física da peça, então não devem ser ajustadas junto com o verde da marca. */ --lk-cor-azul: #2f6fd0; --lk-cor-vermelho: #cf3a2f; --lk-cor-verde: #2f9e44; --lk-cor-amarelo: #e5b80b; --lk-cor-laranja: #e8730c; --lk-cor-preto: #3a3a3a; /* ---------- CORES DE MARCA DE TERCEIROS ---------- Cores de outras empresas. Não entram na paleta da Lumikit e NUNCA devem ser ajustadas junto com o verde: são definidas por quem é dono da marca. */ --lk-marca-youtube: #ff0000; --lk-marca-instagram: #c13584; --lk-marca-whatsapp: #25d366; /* ---------- AVISOS ---------- */ --lk-erro: #c0392b; --lk-erro-fundo: #fdecea; --lk-erro-texto: #8f221a; --lk-atencao: #f0b429; --lk-atencao-fundo: #fff6e0; --lk-atencao-texto: #6b4a00; /* ---------- TEMA ESCURO (biblioteca de aparelhos, painéis internos) ---------- Esses sistemas usam fundo escuro e um verde bem mais vibrante, o que faz sentido: sobre fundo escuro, o verde do site (#51d466) fica apagado. O problema não era a intensidade — era o MATIZ. A biblioteca usava 108° (quase neon amarelado) e o selo de canais 155° (puxando para o azul). Nesta versão o tema escuro fica com as cores originais da biblioteca — é dela que o neon veio, então aqui os dois já combinam. */ --lk-esc-fundo: #181e23; /* fundo da página */ --lk-esc-card: #27353e; /* fundo dos cartões */ --lk-esc-verde: #33ff00; /* títulos e destaques (era #33ff00) */ --lk-esc-etiqueta: #21482d; /* fundo das etiquetas (era #21482d) */ --lk-esc-selo: #4caf86; /* selos, ex.: "8 ch" (era #4caf86) */ --lk-esc-texto: #e6ebe7; --lk-esc-texto-2: #9fb0a4; /* ---------- SOMBRAS ---------- */ --lk-sombra: 0 1px 6px rgba(0,0,0,.05); --lk-sombra-alta: 0 5px 16px rgba(0,0,0,.09); } /* ===================================================================== COMPATIBILIDADE COM O TEMA ANTIGO O skin-less.css é minificado e usado por páginas que ainda não foram migradas. Em vez de editá-lo (arriscado e difícil de revisar), este bloco vem DEPOIS dele e substitui os pontos onde o verde amarelado aparece. Quando todas as páginas estiverem migradas, este bloco pode sair junto com o skin-less.css. ===================================================================== */ ::selection { background-color: var(--lk-selecao); color: var(--lk-selecao-texto); } ::-moz-selection { background-color: var(--lk-selecao); color: var(--lk-selecao-texto); } a { color: var(--lk-verde-forte); } a:hover, a:focus { color: var(--lk-verde-escuro); } .color, a.color { color: var(--lk-verde-forte) !important; } .bg-color { background-color: var(--lk-verde-forte) !important; } /* Botão padrão do tema antigo, usado em várias páginas ainda não migradas */ .btn-color { background-color: var(--lk-verde-forte) !important; border-color: var(--lk-verde-forte) !important; color: #fff !important; } .btn-color:hover, .btn-color:focus, .btn-color:active { background-color: var(--lk-verde-escuro) !important; border-color: var(--lk-verde-escuro) !important; color: #fff !important; } /* Bootstrap: mensagens de sucesso e botão "success" */ .btn-success { background-color: var(--lk-verde-forte) !important; border-color: var(--lk-verde-forte) !important; } .btn-success:hover, .btn-success:focus { background-color: var(--lk-verde-escuro) !important; border-color: var(--lk-verde-escuro) !important; } .alert-success { background-color: var(--lk-verde-fundo) !important; border-color: var(--lk-verde-borda) !important; color: var(--lk-verde-texto) !important; } .text-success { color: var(--lk-verde-texto) !important; } .has-success .form-control { border-color: var(--lk-verde-medio) !important; } .progress-bar-success { background-color: var(--lk-verde-forte) !important; } .label-success, .badge-success { background-color: var(--lk-verde-forte) !important; }