/* ============================================================ MAIS — KIT WEB (fundações da mídia web) Depende de: tokens/core.css (importar ANTES deste arquivo). Contém o que é específico da web: escala tipográfica responsiva, containers de leitura, anel de foco de teclado, transição de UI, classes utilitárias de texto e a base do . Ordem no : core.css → web.css → components.css ============================================================ */ :root { /* -------------------------------------------------- */ /* LAYOUT — containers e ritmo de seção (web) */ /* -------------------------------------------------- */ --container: 1200px; /* largura máx. de conteúdo */ --container-text: 720px; /* largura máx. de leitura (~75 caracteres) */ --espaco-secao: var(--space-8); /* respiro entre seções */ /* -------------------------------------------------- */ /* ESCALA TIPOGRÁFICA RESPONSIVA (clamp: min, pref, max)*/ /* Específica da web — o futuro kit deck terá escala própria. */ /* -------------------------------------------------- */ /* O piso do display é 32px, não 40: a 320px de tela uma palavra longa ("Psicossociais.") não cabia em 40px e estourava a página. */ --fs-display: clamp(2rem, 6vw, 4rem); /* 32–64px */ --fs-h1: clamp(2rem, 4vw, 3rem); /* 32–48px */ --fs-h2: clamp(1.6rem, 3vw, 2.25rem); /* 26–36px */ --fs-h3: 1.25rem; /* 20px */ --fs-subtitulo: clamp(1.25rem, 2.5vw, 1.75rem); /* 20–28px */ --fs-body: 1.125rem; /* 18px */ --fs-quote: 1.25rem; /* 20px */ --fs-caption: 0.875rem; /* 14px */ --fs-overline: 0.8125rem; /* 13px */ /* -------------------------------------------------- */ /* INTERAÇÃO — foco de teclado e transição de UI */ /* -------------------------------------------------- */ --anel-foco: 0 0 0 3px color-mix(in srgb, var(--cor-foco) 35%, transparent); /* anel coral — todo interativo */ --anel-foco-erro: 0 0 0 3px color-mix(in srgb, var(--cor-erro) 30%, transparent); /* anel de campo em erro */ --anel-foco-invertido: 0 0 0 3px color-mix(in srgb, var(--branco) 45%, transparent); /* anel sobre fundo de cor (coral/teal/escuro) */ --transicao: 200ms ease; } /* ============================================================ CLASSES UTILITÁRIAS DE TEXTO ============================================================ */ .texto-display { font-family: var(--fonte-titulo); font-weight: var(--peso-medium); font-size: var(--fs-display); line-height: var(--lh-tight); } .texto-h1 { font-family: var(--fonte-titulo); font-weight: var(--peso-regular); font-size: var(--fs-h1); line-height: var(--lh-tight); } .texto-h2 { font-family: var(--fonte-titulo); font-weight: var(--peso-regular); font-size: var(--fs-h2); line-height: 1.2; } .texto-h3 { font-family: var(--fonte-texto); font-weight: var(--peso-semibold); font-size: var(--fs-h3); line-height: var(--lh-snug); } .texto-subtitulo { font-family: var(--fonte-titulo); font-style: italic; font-weight: var(--peso-regular); font-size: var(--fs-subtitulo); line-height: 1.35; } .texto-body { font-family: var(--fonte-texto); font-weight: var(--peso-light); font-size: var(--fs-body); line-height: var(--lh-normal); } .texto-forte { font-weight: var(--peso-semibold); } .texto-quote { font-family: var(--fonte-titulo); font-style: italic; font-size: var(--fs-quote); line-height: 1.5; } .texto-caption { font-family: var(--fonte-texto); font-weight: var(--peso-medium); font-size: var(--fs-caption); line-height: 1.4; } .texto-overline { font-family: var(--fonte-texto); font-weight: var(--peso-medium); font-size: var(--fs-overline); letter-spacing: .12em; text-transform: uppercase; } /* ============================================================ RESET MÍNIMO (web) Sem `border-box`, todo container do DS que tem padding (`.secao__container`, `.clientes`, `.card`…) soma padding À largura e estoura o viewport no mobile. É fundação, não estilo: fica aqui, no kit web, antes de qualquer componente. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Ritmo vem dos containers (`gap`, `.secao__cabecalho`), nunca das margens que o navegador inventa. Sem isso o espaçamento do DS briga com o do UA e cada bloco solto respira diferente. */ h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } /* Rede de segurança: palavra única mais larga que a coluna quebra em vez de furar o layout (acontece em título grande no mobile). */ h1, h2, h3, h4, h5, h6, p, li { overflow-wrap: break-word; } img, svg, video { max-width: 100%; } /* Base recomendada para o body do site */ body { margin: 0; /* zera os 8px do UA — a margem vem dos containers */ background: var(--cor-fundo); color: var(--cor-texto); font-family: var(--fonte-texto); font-weight: var(--peso-light); font-size: var(--fs-body); line-height: var(--lh-normal); } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }