/* ===================================================================== FONTES DO SITE — troca de 2026 Títulos e tópicos .... PP Hatton Ultralight Corpo do texto ....... Poppins Light ------------------------------------------------------------------- COMO VOLTAR ATRÁS Tudo o que muda a fonte do site está NESTE arquivo. Para devolver o site às fontes antigas (Sequel Sans nos títulos, Inter no texto), basta apagar UMA linha em includes/header.php: Nada mais precisa ser mexido: as fontes antigas continuam instaladas em assets/fonts/ e declaradas no main.css, apenas deixaram de ser usadas enquanto este arquivo estiver ligado. ------------------------------------------------------------------- Carregado DEPOIS de main.css e lunelli.css, senão não venceria as regras deles. ===================================================================== */ /* --------------------------------------------------------------------- As duas fontes --------------------------------------------------------------------- */ /* * woff2 primeiro (formato de web, bem menor); o arquivo original fica * como segunda opção para navegador antigo. * * font-weight 100 900: existe um único peso de cada família. Declarando * a faixa inteira, qualquer peso que o tema peça (500, 600, 700...) usa * este mesmo arquivo, em vez de o navegador inventar um negrito * artificial - que numa Ultralight fica borrado e feio. */ @font-face { font-family: 'PP Hatton'; src: url('../fonts/lunelli-2026/PPHatton-Ultralight.woff2') format('woff2'), url('../fonts/lunelli-2026/PPHatton-Ultralight.otf') format('opentype'); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins Light'; src: url('../fonts/lunelli-2026/Poppins-Light.woff2') format('woff2'), url('../fonts/lunelli-2026/Poppins-Light.ttf') format('truetype'); font-weight: 100 900; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------- As variáveis do tema 76 das 92 declarações de fonte do site passam por aqui: trocando estes valores, quase tudo muda de uma vez. --------------------------------------------------------------------- */ :root { /* corpo do texto */ --tp-ff-body: 'Poppins Light', sans-serif; --tp-ff-p: 'Poppins Light', sans-serif; --tp-ff-inter: 'Poppins Light', sans-serif; --tp-ff-jost: 'Poppins Light', sans-serif; /* títulos e tópicos */ --tp-ff-heading: 'PP Hatton', sans-serif; --tp-ff-sequel-medium: 'PP Hatton', sans-serif; --tp-ff-sequel-roman: 'PP Hatton', sans-serif; --tp-ff-sequel-bold-head: 'PP Hatton', sans-serif; --tp-ff-sequel-semi-bold: 'PP Hatton', sans-serif; --tp-ff-sequel-heavy-disp: 'PP Hatton', sans-serif; } /* --------------------------------------------------------------------- Os nove lugares que não usam variável Sete vieram assim do tema e dois eu mesmo escrevi. Sem isto, estes trechos continuariam em Sequel Sans no meio do resto trocado. --------------------------------------------------------------------- */ .fabric-category-title, .fabric-subitem-name, .fabric-detail-name, .fabric-detail-info h4, .privacy-title, .privacy-contact-box h4, .stamp-detail-title, .stamp-detalhe-codigo, .mt-manifesto-wordmark { font-family: 'PP Hatton', sans-serif; } /* * Texto dentro de SVG traz a fonte escrita como atributo da tag, fora de * qualquer folha de estilo. Atributo de apresentação perde para o CSS, * então basta declarar aqui. * * Quem motivou esta regra foi o selo "ISO 14001 · CERTIFICADA" da página * Sobre, que o cliente mandou remover depois. Hoje não há nenhum texto em * SVG no site; fica como guarda para o dia em que houver. */ svg text, svg textPath { font-family: 'Poppins Light', sans-serif; } /* --------------------------------------------------------------------- Acertos de desenho A Hatton Ultralight é bem mais leve e estreita que a Sequel Sans. O espaçamento negativo entre letras foi calibrado para a fonte antiga e, na nova, junta demais as letras dos títulos grandes. --------------------------------------------------------------------- */ .tp-section-title, .tp-breadcrumb-title, .about-us-title, .ca-section-title, .mt-manifesto-wordmark, .stamp-detalhe-codigo { letter-spacing: normal; } /* --------------------------------------------------------------------- O vermelho vazando embaixo dos nomes das coleções Os títulos da lista de coleções (home, Malhas e tecidos e Coleções de estampas) têm um efeito do tema: cada letra carrega uma cópia vermelha de si mesma logo abaixo, feita com text-shadow, e no hover o conjunto sobe para a cópia tomar o lugar da original. O que esconde a cópia é o recorte da caixa do título. O tema joga a sombra a 1.05em da letra, mas a caixa só corta a 1.2em (a entrelinha). Sobram 3,9px - e o que aparece ali dentro depende da fonte: na Sequel Sans as maiúsculas começavam mais abaixo na linha e aquela faixa caía em cima de espaço em branco; a Hatton Ultralight tem as maiúsculas quase encostando no topo, então o topo do vermelho aparece, como um fantasma embaixo de "SERENE 28". A correção é jogar a sombra exatamente uma linha para baixo, que é onde a caixa corta: em vez do 1.05em fixo, a unidade lh, que vale a entrelinha do próprio elemento. Assim não depende da fonte nem do tamanho do título, e o hover continua caindo no lugar certo, porque a distância que o texto sobe é a mesma que a sombra desce. O 1.2em antes dela é o que navegador antigo entende - dá no mesmo enquanto a entrelinha for 1.2. --------------------------------------------------------------------- */ .tp-title-text span, .tp-title-text-2 span { text-shadow: 0 1.2em var(--tp-theme-primary); text-shadow: 0 1lh var(--tp-theme-primary); } .tp-title-anim:hover .tp-title-text span, .tp-title-anim-2:hover .tp-title-text-2 span { text-shadow: 0 1.2em currentColor; text-shadow: 0 1lh currentColor; translate: 0 -1.2em 0; translate: 0 -1lh 0; }