/* ========================================================================== Metal Collection — polimento visual Tipografia dos titulos + animacoes discretas de entrada + foco/hover. Arquivo ADITIVO: nao altera nenhum CSS do Elementor. Deve ser carregado DEPOIS dos CSS da pagina. Ver NOTAS-POLIMENTO.md. Par: /assets/js/mc-polimento.js ========================================================================== */ /* -------------------------------------------------------------------------- 1. TITULOS MAIS ENCORPADOS -------------------------------------------------------------------------- O kit do Elementor (.elementor-kit-135, aplicado no ) define o peso de h1..h6 em variaveis CSS. Redefinindo SO as variaveis, todos os titulos das 11 paginas mudam de uma vez — sem tocar nos CSS de ~900 KB e sem !important. A familia continua "Open Sans" — que ja e a fonte do site e ja esta auto-hospedada (variavel, pesos 300..800, font-display:swap) em /wp-content/uploads/sites/27/elementor/google-fonts/. Os pesos 700 e 800 sao servidos pelos MESMOS arquivos .woff2 que o site ja baixa hoje: nenhuma fonte nova, nenhuma requisicao nova, zero impacto no carregamento. Titulos com peso fixo no proprio widget (ex.: subtitulos em 500) nao mudam — isso e proposital, sao excecoes de design do original. body.elementor-kit-135 (0,1,1) vence .elementor-kit-135 (0,1,0) em qualquer ordem de carregamento. -------------------------------------------------------------------------- */ body.elementor-kit-135 { --e-global-typography-d659c69-font-weight: 800; /* h1 (hero/titulo de pagina) 700 -> 800 */ --e-global-typography-079d803-font-weight: 700; /* h2 (titulo de secao) 600 -> 700 */ --e-global-typography-41d8592-font-weight: 700; /* h3 600 -> 700 */ --e-global-typography-c0d1290-font-weight: 700; /* h4 600 -> 700 */ --e-global-typography-4904579-font-weight: 700; /* h5 600 -> 700 */ --e-global-typography-6f2f5dc-font-weight: 700; /* h6 + titulo dos cards 600 -> 700 */ } /* Titulo das paginas internas (Corrimaos, Visor, Portfolio...): esse h1 traz font-weight:700 fixo no proprio widget, com especificidade alta do Elementor (0,4,0), entao a variavel acima nao o alcanca. Este e o UNICO !important de tipografia do arquivo — so para o h1 ficar igual ao da home. */ h1.elementor-heading-title { font-weight: 800 !important; } /* No celular o h1 fica em 700 (como ja era). Em 800 o titulo do topo fica ~3% mais largo e "Inovação e Solução" quebra em duas linhas, empurrando a dobra. Versao conservadora: no telefone o h1 mantem a quebra atual. (breakpoint 767px = o mesmo "mobile" do Elementor neste site) */ @media (max-width: 767px) { body.elementor-kit-135 { --e-global-typography-d659c69-font-weight: 700; } h1.elementor-heading-title { font-weight: 700 !important; } } /* Ritmo: em peso maior o titulo pede um tracking um pouco mais fechado. Vale so para os tamanhos de display (h1/h2) — em corpo pequeno atrapalharia. */ .elementor-kit-135 h1, .elementor-kit-135 h2 { letter-spacing: -0.012em; } /* Quebra de linha equilibrada nos titulos. Navegador que nao suporta ignora. */ .elementor-kit-135 h1, .elementor-kit-135 h2, .elementor-kit-135 h3 { text-wrap: balance; } /* -------------------------------------------------------------------------- 2. FOCO VISIVEL (acessibilidade) -------------------------------------------------------------------------- O Elementor e principalmente o ElementsKit zeram o outline no foco (".ekit-wid-con a:focus{outline:0}"). Precisamos de !important para devolver o anel de foco a quem navega por teclado. :focus-visible = so aparece na navegacao por teclado, nunca no clique de mouse — o visual do site fica igual para quem usa mouse. Azul da marca (#297DDD) tem contraste >= 3,7:1 contra o fundo escuro (#17262F / #121C22 / #000) e 4,1:1 contra o branco. Sobre os botoes — que sao azuis — o anel vira branco. -------------------------------------------------------------------------- */ :where(a, button, [role="button"], summary, input, select, textarea):focus-visible, .elementor-menu-toggle:focus-visible, .elementor-toggle-title:focus-visible { outline: 3px solid #297DDD !important; outline-offset: 3px !important; } .elementor-button:focus-visible, .elementor-cta__button:focus-visible, button[type="submit"]:focus-visible, input[type="submit"]:focus-visible { outline-color: #FFFFFF !important; } /* Campos do formulario de contato: foco tambem marcado por borda, para quem usa mouse e nao dispara :focus-visible. */ .elementor-field-group .elementor-field-textual:focus { box-shadow: inset 0 0 0 2px #297DDD; } /* -------------------------------------------------------------------------- 3. HOVER COERENTE -------------------------------------------------------------------------- O cabecalho fica de fora de proposito (esta sendo retrabalhado). Nos botoes, a lista de transicoes preserva o "grow" do Elementor (.elementor-animation-grow => transition-property:transform; duration .3s). -------------------------------------------------------------------------- */ .elementor-button:not(.elementor-location-header *), .elementor-cta__button:not(.elementor-location-header *) { transition: transform 0.3s, box-shadow 0.25s ease, background-color 0.25s ease; } .elementor-button:not(.elementor-location-header *):hover, .elementor-cta__button:not(.elementor-location-header *):hover { box-shadow: 0 6px 18px rgba(41, 125, 221, 0.28); } /* Links de texto e do rodape: mudanca de estado suave e sublinhado no hover. */ .elementor-widget-text-editor a, .elementor-location-footer a:not(.elementor-button), .elementor-icon-list-item a { transition: color 0.2s ease, opacity 0.2s ease; text-underline-offset: 0.18em; } .elementor-widget-text-editor a:hover { text-decoration: underline; } .elementor-location-footer a:not(.elementor-button):hover { opacity: 0.82; } /* Cards de servico e FAQ: realce discreto ao passar o mouse. */ .elementor-widget-image-box .elementor-image-box-img img, .elementor-widget-image .elementor-widget-container img { transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1); } .elementor-widget-image-box:hover .elementor-image-box-img img { transform: scale(1.03); } .elementor-toggle .elementor-tab-title { transition: color 0.2s ease, background-color 0.2s ease; } /* -------------------------------------------------------------------------- 4. ANIMACAO DE ENTRADA (revelar ao rolar) -------------------------------------------------------------------------- A classe .mc-reveal e aplicada pelo JS (mc-polimento.js) a partir de seletores que ja existem no HTML — nenhuma pagina precisou ser editada. Sem JS, nada e escondido: o site continua exatamente como esta. So `opacity` e `transform` sao animados (compositor puro, nao mexe em layout). O JS ja pula tudo o que esta acima da dobra, para nao atrasar a leitura da primeira tela. -------------------------------------------------------------------------- */ .mc-reveal { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity 0.6s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1); } .mc-reveal.mc-in { opacity: 1; transform: none; } /* -------------------------------------------------------------------------- 5. MOVIMENTO REDUZIDO -------------------------------------------------------------------------- Quem pede menos movimento no sistema ve o site inteiro parado e completo. O JS tambem checa isso e nem chega a marcar os elementos; este bloco e a rede de seguranca (inclusive se a preferencia mudar com a pagina aberta). -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .mc-reveal, .mc-reveal.mc-in { opacity: 1 !important; transform: none !important; transition: none !important; } .elementor-widget-image-box .elementor-image-box-img img, .elementor-widget-image .elementor-widget-container img, .elementor-button:not(.elementor-location-header *), .elementor-cta__button:not(.elementor-location-header *) { transition: none !important; } .elementor-widget-image-box:hover .elementor-image-box-img img { transform: none !important; } }