/* =====================================================================
WDS Telecom · Variáveis da marca para o site
Manual de Identidade Visual · etapas 3 (cores) e 4 (tipografia)
Aprovado em 23/09/2026. Não altere os valores aqui: mude no manual.
Como usar
1. Copie este arquivo e a pasta "fontes" para o site, lado a lado.
2. Carregue o arquivo antes do CSS do site:
3. Use as variáveis: color: var(--wds-vermelho); font: var(--wds-peso-negrito) var(--wds-fs-titulo-1)/var(--wds-lh-titulo-1) var(--wds-fonte-titulo);
As fontes ficam no próprio site (sem Google Fonts). Licença livre: fontes/OFL.txt
===================================================================== */
@font-face { font-family: "Red Hat Display"; src: url("fontes/RedHatDisplay-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("fontes/RedHatDisplay-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("fontes/RedHatDisplay-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Display"; src: url("fontes/RedHatDisplay-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("fontes/RedHatText-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("fontes/RedHatText-Italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("fontes/RedHatText-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Red Hat Text"; src: url("fontes/RedHatText-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
:root {
/* ---------- Cores oficiais (etapa 3) ---------- */
--wds-vermelho: #E41E25; /* símbolo, destaques, botões. Nunca em texto longo */
--wds-petroleo: #117E91; /* cor de apoio: status, categorias, gráficos, plano empresarial */
--wds-preto: #0A0B0D; /* nome WDS, títulos, fundos escuros */
--wds-grafite: #34363B; /* TELECOM no fundo claro, cards, áreas técnicas */
--wds-cinza: #696A6E; /* textos de apoio, legendas e informações legais (só em fundo claro) */
--wds-papel: #F1F0EC; /* fundo claro principal */
--wds-branco: #FFFFFF; /* texto sobre fundo escuro ou vermelho */
/* As mesmas cores em RGB, para transparência: rgb(var(--wds-vermelho-rgb) / 12%) */
--wds-vermelho-rgb: 228 30 37;
--wds-petroleo-rgb: 17 126 145;
--wds-preto-rgb: 10 11 13;
--wds-grafite-rgb: 52 54 59;
--wds-cinza-rgb: 105 106 110;
--wds-papel-rgb: 241 240 236;
/* ---------- Tons de tela (só digital, aprovados na etapa 4 · T4) ----------
Clareados das cores oficiais para texto pequeno sobre fundo escuro,
onde o cinza e o petróleo não têm contraste suficiente. */
--wds-cinza-claro: #B9BCC1; /* texto de apoio sobre preto (10,3 : 1) */
--wds-petroleo-claro: #5FC3D3; /* chamadas em petróleo sobre preto (9,6 : 1) */
/* ---------- Fontes (etapa 4) ---------- */
--wds-fonte-titulo: "Red Hat Display", "Segoe UI", Arial, sans-serif; /* títulos, preços, destaques */
--wds-fonte-texto: "Red Hat Text", "Segoe UI", Arial, sans-serif; /* texto corrido, listas, botões, legal */
/* Pesos */
--wds-peso-regular: 400;
--wds-peso-medio: 500;
--wds-peso-negrito: 700;
--wds-peso-extra: 800; /* só Destaque e Preço */
/* ---------- Escala de tamanhos ---------- */
/* tamanho entrelinha espaço entre letras */
--wds-fs-destaque: clamp(2.5rem, 6vw, 4rem); --wds-lh-destaque: 1.05; --wds-ls-destaque: -0.02em; /* 40–64 px · Display 800 · 1 por página */
--wds-fs-titulo-1: clamp(2rem, 4.5vw, 2.75rem); --wds-lh-titulo-1: 1.1; --wds-ls-titulo-1: -0.015em; /* 32–44 px · Display 700 */
--wds-fs-titulo-2: clamp(1.5rem, 3vw, 2rem); --wds-lh-titulo-2: 1.15; --wds-ls-titulo-2: -0.01em; /* 24–32 px · Display 700 */
--wds-fs-titulo-3: 1.25rem; --wds-lh-titulo-3: 1.25; --wds-ls-titulo-3: 0; /* 20 px · Display 700 */
--wds-fs-chamada: 0.8125rem; --wds-lh-chamada: 1; --wds-ls-chamada: 0.12em; /* 13 px · Text 700 · MAIÚSCULAS */
--wds-fs-corpo-grande: 1.1875rem; --wds-lh-corpo-grande: 1.55; --wds-ls-corpo-grande: 0; /* 19 px · Text 400 */
--wds-fs-corpo: 1.0625rem; --wds-lh-corpo: 1.6; --wds-ls-corpo: 0; /* 17 px (16 no celular) · Text 400 */
--wds-fs-pequeno: 0.875rem; --wds-lh-pequeno: 1.5; --wds-ls-pequeno: 0; /* 14 px · Text 500 */
--wds-fs-legal: 0.75rem; --wds-lh-legal: 1.45; --wds-ls-legal: 0.01em; /* 12 px · Text 400 · nunca menor */
--wds-fs-botao: 1rem; --wds-lh-botao: 1; --wds-ls-botao: 0.01em; /* 16 px · Text 700 */
--wds-fs-preco: clamp(2.5rem, 5vw, 3.5rem); --wds-lh-preco: 1; --wds-ls-preco: -0.02em; /* 40–56 px · Display 800 · números tabulares */
--wds-largura-texto: 70ch; /* linha de texto corrido com no máximo ~70 caracteres */
}
@media (max-width: 640px) {
:root { --wds-fs-corpo: 1rem; }
}
/* Preços: números com a mesma largura, para alinhar em colunas e não "pular" ao mudar o valor.
Use class="wds-numeros" no preço e nas tabelas de valores.
(":root" na frente para vencer o atalho "font:", que zera esta propriedade.) */
:root .wds-numeros { font-variant-numeric: tabular-nums; }