/* ========================================================================== MeuFIT — site.css Tokens copiados de MyFitness/docs/design/README.md (30/09/2026); cópia local em docs/design/README-app.md. Modo escuro: valores de MyFitness/docs/design/fonte/ref-escuro-*.dc.html. Se o app mudar um token, atualize aqui e rode `npm run verificar` (contraste). Regras: o limão --destaque é PREENCHIMENTO sobre claro (texto nele: --texto-em-destaque). Texto de destaque sobre claro usa --destaque-texto (oliva). No escuro, o limão pode ser texto. Sem estilo inline no HTML: a CSP não permite 'unsafe-inline'. IMPORTANTE: scripts/verificar-contraste.mjs lê os dois blocos de tokens abaixo; mantenha o formato. ========================================================================== */ /* Fontes hospedadas no próprio site (OFL; licenças em /fontes). Subconjunto latino. */ @font-face { font-family: "Saira Condensed"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fontes/saira-condensed-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Saira Condensed"; font-weight: 700; font-style: normal; font-display: swap; src: url("/fontes/saira-condensed-latin-700-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fontes/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); } /* TOKENS-CLARO */ :root { color-scheme: light dark; --fundo: #f3f4f1; --superficie: #ffffff; --superficie-2: #eceee9; --borda: #e2e5df; --borda-forte: #cfd4cb; --trilho: #e6e8e3; --faixa-meta: #c9cec4; --texto: #111418; --texto-medio: #4b525b; --texto-fraco: #646b74; --destaque: #c6f24e; --texto-em-destaque: #0f1114; --destaque-texto: #4d6b00; --destaque-grafico: #6b8f12; --destaque-fundo: #f4f9e4; --tinta: #111418; --em-tinta: #eceff2; --em-tinta-2: #a9b1bb; --proteina-animal: #2f6fd6; --proteina-vegetal: #0b7a5a; --carboidrato: #b35f00; --gordura: #9a3fb8; --alerta-fundo: #fdf0e0; --erro: #b3261e; --proteina-animal-em-tinta: #6aa8ff; --proteina-vegetal-em-tinta: #3fcf9f; --carboidrato-em-tinta: #ffb454; --gordura-em-tinta: #e08cf0; } /* TOKENS-ESCURO */ @media (prefers-color-scheme: dark) { :root { --fundo: #0f1114; --superficie: #171a1f; --superficie-2: #1f232a; --borda: #22262d; --borda-forte: #2f353e; --trilho: #262b33; --faixa-meta: #3a414b; --texto: #eceff2; --texto-medio: #a9b1bb; --texto-fraco: #8a939e; --destaque: #c6f24e; --texto-em-destaque: #0f1114; --destaque-texto: #c6f24e; --destaque-grafico: #c6f24e; --destaque-fundo: #1c2410; --tinta: #0b0d10; --em-tinta: #eceff2; --em-tinta-2: #a9b1bb; --proteina-animal: #6aa8ff; --proteina-vegetal: #3fcf9f; --carboidrato: #ffb454; --gordura: #e08cf0; --alerta-fundo: #2b2113; --erro: #ff9d8f; } } /* TOKENS-FIM */ :root { --fonte-titulo: "Saira Condensed", "Arial Narrow", "Roboto Condensed", sans-serif; --fonte-texto: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --raio: 14px; --largura-max: 1120px; } /* ---- Base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--fundo); color: var(--texto); font-family: var(--fonte-texto); font-size: 1rem; line-height: 1.6; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--fonte-titulo); font-weight: 700; line-height: 1.05; margin: 0 0 .5em; text-transform: uppercase; letter-spacing: .01em; } h1 { font-size: clamp(2.25rem, 7vw, 4rem); } h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); } p { margin: 0 0 1em; } a { color: var(--destaque-texto); text-underline-offset: .15em; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 3px solid var(--destaque-texto); outline-offset: 3px; border-radius: 4px; } /* ---- Layout ---- */ .recipiente { width: 100%; max-width: var(--largura-max); margin-inline: auto; padding-inline: 16px; } @media (min-width: 768px) { .recipiente { padding-inline: 32px; } } main { flex: 1 0 auto; min-width: 0; } main:focus { outline: none; } /* ---- Link "pular para o conteúdo" ---- */ .pular { position: absolute; left: 16px; top: -100px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--tinta); color: var(--em-tinta); font-weight: 600; border-radius: 10px; text-decoration: none; } .pular:focus { top: 8px; outline: 3px solid var(--destaque); outline-offset: 2px; } /* ---- Botões (mesmas alturas do app: 44 px) ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 20px; font: 600 .9375rem/1 var(--fonte-texto); border-radius: 12px; border: 1px solid transparent; text-decoration: none; cursor: pointer; } .btn-primario { background: var(--destaque); color: var(--texto-em-destaque); } .btn-primario:hover { filter: brightness(.95); } .btn-secundario { background: var(--superficie); color: var(--texto); border-color: var(--borda-forte); } .btn-secundario:hover { background: var(--superficie-2); } /* ---- Cabeçalho ---- */ .cabecalho { position: sticky; top: 0; z-index: 50; background: var(--superficie); border-bottom: 1px solid var(--borda); } .cabecalho__linha { display: flex; align-items: center; gap: 12px; min-height: 64px; } .cabecalho__entrar { margin-left: auto; } .menu { min-width: 0; } .menu__lista { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; } .menu__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--texto); font-weight: 500; text-decoration: none; border-radius: 10px; } .menu__link:hover { background: var(--superficie-2); } .menu__link[aria-current="page"] { background: var(--destaque-fundo); color: var(--destaque-texto); } /* ---- Logo (SVG em /imagens; versão clara e escura via ) ---- */ .logo { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto); text-decoration: none; } .logo__img { display: block; height: 40px; width: auto; } /* ---- Rodapé (bloco escuro, assinatura do app) ---- */ .rodape { background: var(--tinta); color: var(--em-tinta-2); margin-top: 64px; } .rodape__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 24px; } .rodape__texto { margin: 0; font-size: .875rem; } /* ---- Blocos de página ---- */ .bloco-escuro { background: var(--tinta); color: var(--em-tinta); border-radius: 16px; padding: 32px 20px; } .bloco-escuro h1, .bloco-escuro h2 { color: var(--em-tinta); } .bloco-escuro p { color: var(--em-tinta-2); max-width: 60ch; } @media (min-width: 768px) { .bloco-escuro { padding: 56px 48px; } } .selo { display: inline-block; margin-bottom: 16px; padding: 4px 12px; border-radius: 999px; background: var(--destaque); color: var(--texto-em-destaque); font: 600 .75rem/1.6 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; } .pagina { padding-block: 24px 0; } @media (min-width: 768px) { .pagina { padding-block: 48px 0; } } .pagina--centro { text-align: center; } .pagina--centro p { margin-inline: auto; max-width: 52ch; } .acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .pagina--centro .acoes { justify-content: center; } /* ========================================================================== Componentes reutilizáveis das páginas (plano, seção 8.2). Usados pela home e pelas próximas LPs. Tokens novos deste bloco (fora de TOKENS-*): --tinta-2 e --tinta-borda, a superfície e a borda de elementos DENTRO de um bloco escuro (docs/decisoes.md, desvio 7). ========================================================================== */ :root { --tinta-2: #1d2127; --tinta-borda: #2f353e; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icone { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icone-caixa { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--destaque); color: var(--texto-em-destaque); } /* ---- Seção ---- */ .secao { padding-top: 48px; } @media (min-width: 768px) { .secao { padding-top: 72px; } } .secao--hero { padding-top: 16px; } @media (min-width: 768px) { .secao--hero { padding-top: 32px; } } .secao__cab { max-width: 46rem; margin-bottom: 24px; } .secao__cab h2, .recurso__texto h2 { margin-bottom: .35em; } .rotulo { display: block; margin-bottom: 8px; color: var(--destaque-texto); font: 600 .8125rem/1.4 var(--fonte-texto); letter-spacing: .1em; text-transform: uppercase; } .bloco-escuro .rotulo { color: var(--destaque); } .lead { font-size: 1.125rem; color: var(--texto-medio); max-width: 60ch; } .nota { font-size: .875rem; color: var(--texto-fraco); margin-bottom: 0; } .bloco-escuro .nota { color: var(--em-tinta-2); } /* Parágrafo que é só um link (não um link dentro de frase, desvio 21): alvo de toque de 44 px. */ .nota--link a { display: inline-flex; align-items: center; min-height: 44px; } #lista-de-espera { scroll-margin-top: 80px; } /* ---- Hero ---- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: 32px 20px; } .hero__texto { min-width: 0; } .hero h1 { font-size: clamp(44px, 11vw, 56px); line-height: .92; margin-bottom: .3em; } .hero h1 .linha { display: block; white-space: nowrap; } /* O título do hero é tamanho de exibição, e cada .linha não quebra. Em rem, a fonte do navegador em "muito grande" (150%) o inflava e a linha longa passava da caixa (ex.: "NO MESMO APP." cortada na home, "NO MESMO AP" atrás da captura no desktop). Em px (16 px = 1 rem, então nada muda no padrão) ele não cresce com a fonte do navegador; o zoom da página continua ampliando tudo. Em 320 px o corpo usa vw para caber. */ /* No tablet e no desktop o texto divide a linha com a captura; o título se mede pela coluna (6vw), para "DOS SEUS CLIENTES" não invadir a moldura. */ @media (min-width: 768px) and (max-width: 1279.98px) { .hero h1 { font-size: clamp(40px, 6vw, 56px); } } @media (min-width: 1280px) { .hero h1 { font-size: 78px; } } @media (max-width: 359.98px) { .hero h1 { font-size: 10.6vw; } } .realce { color: var(--destaque); } .bloco-escuro .hero__forte { font: 600 1.375rem/1.25 var(--fonte-texto); color: var(--em-tinta); margin: 0 0 12px; max-width: 40ch; text-wrap: balance; } .hero__sub { font-size: 1.125rem; max-width: 46ch; } .hero__nota { font-size: .875rem; margin: 16px 0 0; } .hero__captura { display: none; } @media (min-width: 768px) { .hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 40px; padding: 56px 48px; } .hero__captura { display: block; justify-self: center; } } /* ---- Moldura de captura (espaço reservado até a conta de demonstração existir) ---- */ .moldura { margin: 0; min-width: 0; width: 100%; } .moldura__quadro { overflow: hidden; border: 1px solid var(--borda); border-radius: 16px; background: var(--superficie-2); box-shadow: 0 8px 24px rgb(0 0 0 / .08); } .moldura img { display: block; width: 100%; height: auto; } .moldura figcaption { margin-top: 10px; font-size: .875rem; color: var(--texto-fraco); } .moldura--celular { max-width: 220px; justify-self: center; } .moldura--celular figcaption { text-align: center; } @media (min-width: 768px) { .moldura--celular { max-width: 260px; } } .bloco-escuro .moldura__quadro { border-color: var(--tinta-borda); box-shadow: none; } .bloco-escuro .moldura figcaption { color: var(--em-tinta-2); } /* ---- Três provas ---- */ .provas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; } .prova { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; font-weight: 500; } @media (min-width: 768px) { .provas { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---- Cartões e grades ---- */ .grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 768px) { .grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .cartao { min-width: 0; padding: 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; } .cartao p:last-child { margin-bottom: 0; } .cartao .rotulo { margin-bottom: 4px; } .fecho { margin: 24px 0 0; max-width: 60ch; font-size: 1.125rem; font-weight: 500; } /* ---- Etapas numeradas (número em Saira Condensed, 48 px) ---- */ .etapas { counter-reset: etapa; } .etapa::before { counter-increment: etapa; content: counter(etapa); display: block; margin-bottom: 8px; font: 700 3rem/1 var(--fonte-titulo); color: var(--destaque-texto); } .etapa h3 { font-size: 1.5rem; margin-bottom: .3em; } /* ---- Chamada do meio e faixa ---- */ .chamada-meio { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 24px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; } .chamada-meio__texto { flex: 1 1 280px; min-width: 0; } .chamada-meio__titulo { margin: 0 0 4px; font: 700 1.75rem/1.1 var(--fonte-titulo); text-transform: uppercase; } .chamada-meio__texto p:last-child { margin-bottom: 0; color: var(--texto-medio); } .faixa { padding: 16px 20px; background: var(--destaque); color: var(--texto-em-destaque); border-radius: 16px; } .faixa p { margin: 0; } /* ---- Recurso: texto + captura lado a lado a partir de 768 px ---- */ .recurso { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; } .recurso__texto { min-width: 0; } .recurso__texto > p { max-width: 52ch; } @media (min-width: 768px) { .recurso { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; } .recurso--inverso .moldura { order: -1; } } .lista-check { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; } .lista-check li { position: relative; min-width: 0; padding-left: 32px; } .lista-check li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--destaque); } .lista-check li::after { content: ""; position: absolute; left: 7px; top: 7px; width: 6px; height: 10px; border: solid var(--texto-em-destaque); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.8); } .bloco-escuro.recurso { padding: 32px 20px; } @media (min-width: 768px) { .bloco-escuro.recurso { padding: 56px 48px; } } /* ---- Balões (exemplos de pergunta ao assistente) ---- */ .baloes { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 10px; } .balao { max-width: 34rem; padding: 10px 14px; background: var(--tinta-2); color: var(--em-tinta); border: 1px solid var(--tinta-borda); border-radius: 14px 14px 14px 4px; } .aviso-importante { font-size: .875rem; } /* ---- Segurança ---- */ .item-seguranca { display: flex; align-items: flex-start; gap: 14px; } .item-seguranca p { margin: 0; min-width: 0; } @media (min-width: 768px) and (max-width: 1279px) { .item-seguranca { flex-direction: column; } } /* ---- FAQ (details nativo; o texto é o mesmo do schema FAQPage) ---- */ .faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: start; } @media (min-width: 768px) { .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .faq__item { min-width: 0; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; } .faq__item summary { position: relative; display: block; min-height: 44px; padding: 12px 48px 12px 18px; font-weight: 600; cursor: pointer; border-radius: 14px; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 9px; height: 9px; border: solid var(--destaque-texto); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); } .faq__item[open] summary::after { transform: translateY(-30%) rotate(-135deg); } .faq__resposta { padding: 0 18px 16px; color: var(--texto-medio); } .faq__resposta p:last-child { margin-bottom: 0; } /* ---- Chamada final (bloco escuro) ---- */ .chamada-final h2 { font-size: clamp(2.25rem, 7vw, 3.5rem); } .aviso-lista { display: flex; align-items: center; gap: 12px; max-width: 36rem; margin: 20px 0; padding: 14px 16px; border: 1px dashed var(--tinta-borda); border-radius: 12px; color: var(--em-tinta); } .aviso-lista::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--destaque); } .aviso-lista p { margin: 0; color: var(--em-tinta); } .conta-existente { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; color: var(--em-tinta-2); } .bloco-escuro a:not(.btn) { color: var(--destaque); } .bloco-escuro .selo { color: var(--texto-em-destaque); } /* No tema escuro o --tinta (#0b0d10) quase não se separa do fundo (#0f1114): uma borda mantém o bloco legível. */ @media (prefers-color-scheme: dark) { .bloco-escuro { border: 1px solid var(--tinta-borda); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ========================================================================== Formulário de lead (Site 3). Só aparece dentro de um .bloco-escuro, por isso usa os tokens "em-tinta". --campo-borda: a --borda-forte do app NÃO atinge 3:1 (desvio nº 4); o cinza abaixo atinge sobre --tinta-2 e sobre --tinta nos dois temas (conferido por scripts/verificar-contraste.mjs). --erro-em-tinta: tom de erro para fundo escuro (o app não tem token de erro no site). ========================================================================== */ :root { --campo-borda: #9aa3ae; --erro-em-tinta: #ff9d8f; } .chamada-final { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; } .chamada-final__texto, .chamada-final__form { min-width: 0; } @media (min-width: 1280px) { .chamada-final { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: start; } } .bloco-escuro :focus-visible { outline-color: var(--destaque); } .formulario { display: grid; gap: 18px; min-width: 0; max-width: 36rem; } .formulario .campo { min-width: 0; margin: 0; padding: 0; border: 0; } /* O cabeçalho é fixo (sticky): sem isto o campo focado pode ficar escondido atrás dele. */ .formulario input, .formulario .opcao, .formulario .form__enviar { scroll-margin-top: 96px; scroll-margin-bottom: 24px; } .formulario label:not(.opcao), .formulario legend { display: block; margin: 0 0 6px; padding: 0; font-weight: 600; font-size: .9375rem; color: var(--em-tinta); } .formulario input[type="text"], .formulario input[type="email"], .formulario input[type="tel"] { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; font: 1rem/1.4 var(--fonte-texto); color: var(--em-tinta); background: var(--tinta-2); border: 1px solid var(--campo-borda); border-radius: 12px; } .formulario input::placeholder { color: var(--campo-borda); opacity: 1; } .formulario input[aria-invalid="true"] { border: 2px solid var(--erro-em-tinta); } .formulario .campo__dica { margin: 6px 0 0; font-size: .875rem; color: var(--em-tinta-2); } .formulario .campo__erro { margin: 6px 0 0; font-size: .875rem; font-weight: 600; color: var(--erro-em-tinta); } .formulario .campo__erro[hidden] { display: none; } .opcoes { display: grid; gap: 8px; min-width: 0; } .opcao { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 44px; padding: 8px 12px; color: var(--em-tinta); background: var(--tinta-2); border: 1px solid var(--campo-borda); border-radius: 12px; cursor: pointer; } .opcao span { min-width: 0; } .opcao input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--destaque); } .opcao:has(input:checked) { border-color: var(--destaque); } .opcao:has(input:focus-visible) { outline: 3px solid var(--destaque); outline-offset: 2px; } .formulario .opcao--caixa { align-items: flex-start; background: transparent; border-color: transparent; padding-inline: 0; color: var(--em-tinta-2); font-size: .9375rem; } .formulario .opcao--caixa input { margin-top: 2px; } .formulario .opcao--caixa:has(input:checked) { border-color: transparent; } .formulario .link-privacidade { display: inline-flex; align-items: center; min-height: 44px; margin-left: 34px; font-size: .9375rem; } /* Campo-armadilha: fora da tela para pessoas e leitores de tela (aria-hidden), à vista de robôs. */ .armadilha { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .formulario .form__resumo { margin: 0; color: var(--em-tinta); } .formulario .form__resumo:empty { margin-bottom: -18px; } .formulario .form__resumo--erro { color: var(--erro-em-tinta); font-weight: 600; } .formulario .form__alerta { margin: 0; padding: 12px 14px; border: 1px solid var(--erro-em-tinta); border-radius: 12px; color: var(--erro-em-tinta); font-weight: 600; max-width: none; } .form__verificacao { min-width: 0; max-width: 100%; } .formulario .form__enviar { width: 100%; min-height: 48px; font-size: 1rem; } .formulario .form__enviar:disabled { opacity: .7; cursor: progress; } .formulario .form__rodape { margin: 0; font-size: .875rem; color: var(--em-tinta-2); } /* ---- Rodapé com links ---- */ .rodape__links { display: flex; flex-wrap: wrap; gap: 4px 20px; list-style: none; margin: 0; padding: 0; } .rodape a { display: inline-flex; align-items: center; min-height: 44px; color: var(--em-tinta); } .rodape :focus-visible { outline-color: var(--destaque); } /* ---- Páginas de obrigado e texto legal ---- */ .passos { text-align: left; max-width: 46rem; margin: 32px auto 0; } .passos .cartao p { margin: 0; max-width: none; } .passos + .acoes { margin-top: 24px; } .texto-legal { max-width: 46rem; padding-bottom: 8px; } .texto-legal h1 { font-size: clamp(2rem, 6vw, 3rem); } .texto-legal h2 { font-size: clamp(1.375rem, 3vw, 1.75rem); margin-top: 1.6em; } .texto-legal ul { padding-left: 1.25rem; margin: 0 0 1em; } .texto-legal li { margin-bottom: .4em; } .aviso-provisorio { margin: 0 0 24px; padding: 14px 16px; background: var(--alerta-fundo); border: 1px solid var(--borda-forte); border-left: 6px solid var(--carboidrato); border-radius: 12px; } .aviso-provisorio p { margin: 0; } /* ========================================================================== Site 4: páginas de apoio, /profissionais, botão fixo do celular e /painel. Só tokens já existentes (nenhuma cor nova). ========================================================================== */ /* ---- Logo do Pro dentro do hero (bloco escuro nos dois temas: versão "escuro" do logo) ---- */ .hero__logo { display: block; width: auto; height: 44px; margin: 0 0 20px; } /* ---- Campo do código de convite (superfície clara; borda com 3:1, pois --borda-forte não atinge, desvio nº 4) ---- */ .form-codigo { display: grid; gap: 12px; max-width: 28rem; margin: 20px 0 0; } .form-codigo label { font-weight: 600; } .form-codigo input[type="text"] { display: block; width: 100%; min-width: 0; min-height: 48px; padding: 0 14px; font: 1.125rem/1.4 var(--fonte-texto); letter-spacing: .08em; text-transform: uppercase; color: var(--texto); background: var(--superficie); border: 2px solid var(--texto-fraco); border-radius: 12px; } .form-codigo input[type="text"]::placeholder { color: var(--texto-fraco); opacity: 1; letter-spacing: .08em; } .form-codigo .btn { width: 100%; min-height: 48px; font-size: 1rem; } .form-codigo .campo__dica { margin: 0; font-size: .875rem; color: var(--texto-medio); } .aviso-provisorio.aviso-codigo { max-width: 28rem; margin: 16px 0 0; font-weight: 600; } .lista-simples { margin: 0 0 1em; padding-left: 1.25rem; } .lista-simples li { margin-bottom: .5em; } /* ---- Página de texto curto com cartões (/convite, /seguranca) ---- */ .pagina-apoio { padding-bottom: 0; } .pagina-apoio .lead { margin-bottom: 0; } .pagina-apoio .grade { margin-top: 24px; } .cartao h2, .cartao h3 { font-size: 1.5rem; margin-bottom: .3em; } .cartao .nota { margin-top: 8px; } .duas-colunas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 768px) { .duas-colunas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } } .cartao--ok { border-left: 6px solid var(--destaque-grafico); } .cartao--nao { border-left: 6px solid var(--carboidrato); } .em-breve { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 999px; background: var(--alerta-fundo); color: var(--texto); font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } /* ---- Botão fixo no rodapé do celular (chamada-fixa.js; plano 8.4) ---- */ .chamada-fixa { display: none; } @media (max-width: 767.98px) { .chamada-fixa { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--superficie); border-top: 1px solid var(--borda); visibility: hidden; transform: translateY(100%); } .chamada-fixa .btn { width: 100%; min-height: 48px; font-size: 1rem; } .chamada-fixa--visivel { visibility: visible; transform: none; } @media (prefers-reduced-motion: no-preference) { .chamada-fixa { transition: transform .2s ease-out, visibility 0s linear .2s; } .chamada-fixa--visivel { transition: transform .2s ease-out, visibility 0s; } } /* Reserva o espaço do botão: o fim da página e o foco do teclado nunca ficam por baixo dele. */ .tem-chamada-fixa .rodape { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } html:has(.tem-chamada-fixa) { scroll-padding-bottom: 88px; } } /* ---- /painel ---- */ .painel { padding-bottom: 0; } .painel h2 { margin-top: 1.4em; } .painel__cartoes { margin: 24px 0; } .painel__numero { margin: 0; font: 700 2.75rem/1 var(--fonte-titulo); } .painel__duas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; } @media (min-width: 1280px) { .painel__duas { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .tabela-rolagem { max-width: 100%; overflow-x: auto; background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; } .tabela { width: 100%; border-collapse: collapse; font-size: .875rem; } .tabela caption { padding: 12px 14px; text-align: left; font-weight: 600; } .tabela th, .tabela td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--borda); white-space: nowrap; } .tabela thead th { color: var(--texto-medio); font-weight: 600; } .tabela tbody th { font-weight: 500; } .tabela .num { text-align: right; font-variant-numeric: tabular-nums; } code { font-size: .9em; } /* ---- Faixa Pro com link ---- */ .faixa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 20px; } .faixa p { flex: 1 1 280px; min-width: 0; } /* O anel de foco padrão é --destaque-texto, que no escuro é o próprio limão da faixa (anel invisível): na faixa usa a tinta. */ .faixa :focus-visible { outline-color: var(--texto-em-destaque); } .faixa .faixa__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-em-destaque); font-weight: 600; } .grade + .acoes { margin-top: 24px; } /* ---- /painel: operação dos leads (Site 5) ---- */ .so-leitor { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .painel__atalhos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; } .painel__atalho { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 999px; font-weight: 500; text-decoration: none; } .painel__atalho:hover { background: var(--superficie-2); } .painel__filtro, .lead__acao { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; min-width: 0; } @media (min-width: 768px) { .painel__filtro { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; } } .painel__campo { min-width: 0; } .painel__campo label { display: block; margin: 0 0 6px; font-weight: 600; font-size: .9375rem; } .painel__campo select, .painel__campo input[type="text"], .lead__msg textarea { display: block; width: 100%; min-width: 0; min-height: 44px; padding: 8px 12px; font: 1rem/1.4 var(--fonte-texto); color: var(--texto); background: var(--superficie); border: 2px solid var(--texto-fraco); border-radius: 12px; } .painel__campo input[type="text"]::placeholder { color: var(--texto-fraco); opacity: 1; } .painel__campo .campo__dica { margin: 6px 0 0; font-size: .875rem; color: var(--texto-medio); } .painel__contagem { margin: 12px 0 20px; } .painel__feito { margin-top: 0; } .painel__leads { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 1280px) { .painel__leads { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lead-card { min-width: 0; display: grid; gap: 12px; align-content: start; padding: 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; scroll-margin-top: 88px; } .lead-card > * { min-width: 0; margin: 0; } .lead__topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; } .lead__nome { margin: 0; font-size: 1.5rem; overflow-wrap: anywhere; } .lead__meta { font-size: .875rem; color: var(--texto-medio); } .lead__dados { display: grid; gap: 8px; } .lead__dados div { min-width: 0; } .lead__dados dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-medio); } .lead__dados dd { margin: 0; overflow-wrap: anywhere; } .lead__acao { padding-top: 12px; border-top: 1px solid var(--borda); } .lead__acao .btn { width: 100%; } .lead__msg { border-top: 1px solid var(--borda); padding-top: 4px; } .lead__msg summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; } .lead__msg textarea { min-height: 9rem; resize: vertical; margin-bottom: 12px; } .lead__msg .acoes { align-items: center; margin-top: 0; } .chip { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; background: var(--superficie-2); color: var(--texto); border: 2px solid var(--texto-fraco); border-radius: 999px; font-size: .8125rem; font-weight: 600; } .chip--ativado, .chip--conta_criada { border-color: var(--destaque-grafico); background: var(--destaque-fundo); } .chip--espera, .chip--recusado { border-color: var(--borda-forte); color: var(--texto-medio); } /* ---- Consentimento de cookies (consentimento.js; Site 6) ---- Banner fixo no pé: não empurra o conteúdo (CLS ~ 0). Os três botões usam a MESMA classe (.cookies__btn): mesma largura, altura e estilo, sem botão "de destaque" (padrão enganoso pelo Guia de cookies da ANPD). Enquanto aberto, reserva espaço no fim da página (--cookies-altura, medida pelo JS) e, no celular, sobe o botão fixo. */ .cookies[hidden], .cookies [hidden] { display: none; } .cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; } .cookies__caixa { max-height: 85vh; overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--superficie); color: var(--texto); border-top: 2px solid var(--borda-forte); border-radius: 16px 16px 0 0; box-shadow: 0 -4px 24px rgba(0, 0, 0, .18); } .cookies__titulo { margin: 0 0 4px; font: 700 1.0625rem/1.3 var(--fonte-texto); } .cookies__titulo:focus { outline: none; } .cookies__texto { margin: 0 0 12px; font-size: .875rem; line-height: 1.4; color: var(--texto-medio); max-width: 62ch; } /* Três colunas iguais já no celular (ocupa menos tela); abaixo de 360 px os botões empilham, também iguais. */ .cookies__botoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cookies__botoes--duplo { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 359.98px) { .cookies__botoes, .cookies__botoes--duplo { grid-template-columns: minmax(0, 1fr); } } .cookies__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 44px; padding: 6px 8px; font: 600 .875rem/1.2 var(--fonte-texto); text-align: center; color: var(--texto); background: var(--superficie); border: 2px solid var(--texto); border-radius: 12px; cursor: pointer; } .cookies__btn:hover { background: var(--superficie-2); } .cookies__itens { display: grid; gap: 12px; margin: 8px 0 16px; } .cookies__item { min-width: 0; } .cookies__rotulo { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; } .cookies__rotulo input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--destaque-grafico); } .cookies__desc { margin: 0 0 0 36px; font-size: .875rem; line-height: 1.45; color: var(--texto-medio); } .cookies-aberto body { padding-bottom: var(--cookies-altura, 0px); } @media (min-width: 768px) { .cookies { left: 16px; right: 16px; bottom: 16px; margin-inline: auto; max-width: 780px; } .cookies__caixa { padding: 20px 24px; border: 2px solid var(--borda-forte); border-radius: 16px; max-height: 80vh; } .cookies__btn { font-size: .9375rem; padding: 0 16px; } .cookies-aberto body { padding-bottom: calc(var(--cookies-altura, 0px) + 16px); } } @media (max-width: 767.98px) { .cookies-aberto .chamada-fixa { bottom: var(--cookies-altura, 0px); } } /* O foco do teclado (e o scrollIntoView) nunca para por baixo do banner: o navegador rola até o campo ficar acima dele. No celular com o botão fixo de chamada visível, soma-se o espaço dele (88 px, como em `html:has(.tem-chamada-fixa)`). */ .cookies-aberto { scroll-padding-bottom: calc(var(--cookies-altura, 0px) + 16px); } @media (max-width: 767.98px) { .cookies-aberto:has(.tem-chamada-fixa) { scroll-padding-bottom: calc(var(--cookies-altura, 0px) + 88px); } } /* Botão "Preferências de cookies" do rodapé: parece os links vizinhos. */ .rodape__botao { display: inline-flex; align-items: center; min-height: 44px; padding: 0; margin: 0; font: inherit; color: var(--em-tinta); background: none; border: 0; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; } .rodape__botao:hover { text-decoration-thickness: 2px; } /* ---- /cookies: uma ficha por ferramenta (em cartões, não em tabela: em 390 px uma tabela rolaria) ---- */ .ferramenta { display: grid; gap: 8px; margin: 0 0 16px; padding: 16px 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; } .ferramenta > div { min-width: 0; } .ferramenta dt { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-medio); } .ferramenta dd { margin: 0; overflow-wrap: anywhere; } .ferramenta__nome { margin: 0 0 4px; font-size: 1.25rem; } /* ========================================================================== Site 8: páginas de recursos (/recursos/*). Só tokens já existentes. ========================================================================== */ /* ---- Navegação entre as quatro páginas de recursos (chips; o item atual leva aria-current) ---- */ .subnav { padding-top: 24px; } .subnav__lista { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .subnav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 999px; font-weight: 500; text-decoration: none; } .subnav__link:hover { background: var(--superficie-2); } .subnav__link[aria-current="page"] { background: var(--destaque-fundo); color: var(--destaque-texto); border-color: var(--destaque-grafico); font-weight: 600; } /* ---- Lista simples dentro de cartão (ex.: o que o assistente lê) ---- */ .cartao .lista-simples { margin-bottom: 0; } .cartao p + .lista-simples { margin-top: .5em; } /* ---- Cabeçalho no celular estreito: menu de 2 itens + "Entrar" cabem em 390 px sem quebrar linha ---- A marca vira só o ícone ( em parciais/cabecalho.html); o ícone tem largura fixa para o cabeçalho não mudar de tamanho quando a imagem carrega (CLS). Menos de 360 px: o menu quebra linha, sem rolagem. */ @media (max-width: 479.98px) { .cabecalho__linha { gap: 8px; } .cabecalho .logo { min-width: 44px; justify-content: center; } .cabecalho .logo__img { width: 40px; } .menu__lista { gap: 0; } .menu__link { padding: 0 8px; } .cabecalho__entrar { padding: 0 14px; } } /* ========================================================================== Site 9: /ferramentas/ficha-avaliacao-fisica (página) e ...-imprimir (folha A4 que vira o PDF) ========================================================================== */ .hero--simples { grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .hero--simples { grid-template-columns: minmax(0, 1fr); } } /* ---- Esquema dos pontos de medida (SVG próprio, sem foto de corpo; só tokens do site) ---- */ .fig { display: block; width: 100%; max-width: 520px; height: auto; margin-inline: auto; } .fig__corpo { fill: var(--faixa-meta); stroke: none; } .fig__membro { fill: none; stroke: var(--faixa-meta); stroke-linecap: round; stroke-linejoin: round; } .fig__braco { stroke-width: 13; } .fig__perna { stroke-width: 20; } .fig__faixa { stroke: var(--texto); stroke-width: 1.6; stroke-dasharray: 3 2; } .fig__chip { fill: var(--texto); } .fig__letra { fill: var(--fundo); font: 700 9px var(--fonte-texto); text-anchor: middle; dominant-baseline: central; } .fig__dobra { fill: var(--destaque); stroke: var(--tinta); stroke-width: 1; } .fig__num { fill: var(--texto-em-destaque); font: 700 8.5px var(--fonte-texto); text-anchor: middle; dominant-baseline: central; } .fig__rotulo { fill: var(--texto-medio); font: 600 10px var(--fonte-texto); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; } .ficha__figura { margin: 0; min-width: 0; } .legenda-fig { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; } .legenda-fig > div { min-width: 0; } .legenda-fig__tit { margin: 0 0 4px; font-weight: 600; font-size: .875rem; } .legenda-fig__lista { margin: 0; padding-left: 1.5rem; font-size: .875rem; line-height: 1.5; } /* ---- Folha A4: sempre clara (é papel), também no modo escuro do navegador ---- */ .ficha-impressa { --fundo: #ffffff; --superficie: #ffffff; --superficie-2: #f3f4f1; --borda: #cfd4cb; --borda-forte: #8b939d; --texto: #111418; --texto-medio: #3b424a; --texto-fraco: #4b525b; --faixa-meta: #cfd4cb; --destaque: #c6f24e; --texto-em-destaque: #0f1114; --tinta: #111418; --destaque-texto: #4d6b00; color-scheme: light; background: #e9ebe6; color: #111418; } .ficha-barra { max-width: 210mm; margin: 0 auto; padding: 16px 16px 0; } .ficha-barra__linha { display: flex; flex-wrap: wrap; gap: 12px; } .ficha-barra__dica { margin: 12px 0 0; font-size: .875rem; color: var(--texto-medio); } .ficha { width: 100%; max-width: 210mm; margin: 16px auto; padding: 16px; background: #fff; border: 1px solid var(--borda); box-sizing: border-box; font-size: .9375rem; } .ficha__cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-bottom: 12px; border-bottom: 2px solid var(--texto); } .ficha__cab > div { min-width: 0; } .ficha__logo { display: block; height: 40px; width: auto; } .ficha h1 { margin: 0; font-size: 2rem; line-height: 1; } .ficha__cab p { margin: 4px 0 0; color: var(--texto-medio); font-size: .875rem; } .ficha h2 { font-size: 1.25rem; margin: 0 0 6px; } .ficha__dados { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px 16px; margin: 14px 0; } .ficha__campo { display: flex; align-items: baseline; gap: 8px; min-width: 0; margin: 0; padding-bottom: 2px; border-bottom: 1px solid var(--texto); min-height: 30px; } .ficha__campo span { font-weight: 600; white-space: nowrap; } .ficha__campo em { font-style: normal; color: var(--texto-fraco); letter-spacing: .05em; } .ficha__tabelas { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } .ficha-tabela { width: 100%; border-collapse: collapse; table-layout: fixed; } .ficha-tabela caption { padding: 0 0 4px; text-align: left; font: 700 1.125rem/1.2 var(--fonte-titulo); text-transform: uppercase; } .ficha-tabela th, .ficha-tabela td { border: 1px solid var(--borda-forte); padding: 0 8px; height: 30px; text-align: left; font-weight: 500; } .ficha-tabela thead th { background: var(--superficie-2); font-size: .8125rem; text-transform: uppercase; letter-spacing: .05em; } .ficha-tabela tbody th { width: 52%; } .ficha-tabela thead th:not(:first-child) { text-align: center; } .ficha__base { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; align-items: start; } .ficha__figura figcaption { margin-top: 4px; font-size: .8125rem; color: var(--texto-medio); text-align: center; } .ficha__lado { display: grid; gap: 12px; min-width: 0; } .ficha__lado .legenda-fig { margin-top: 0; gap: 8px; } .ficha__aviso { min-width: 0; padding: 12px 14px; border: 1px solid var(--borda-forte); border-radius: 10px; font-size: .875rem; } .ficha__aviso p { margin: 0 0 8px; } .ficha__rodape { margin: 0; color: var(--texto-medio); font-size: .8125rem; } @media (min-width: 700px) { .ficha { padding: 12mm; } .ficha__dados { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ficha__campo--nome { grid-column: 1 / -1; } .ficha__tabelas, .ficha__base { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @page { size: A4; margin: 0; } @media print { .sem-impressao { display: none !important; } .ficha-impressa { background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .ficha { max-width: none; margin: 0; padding: 10mm 12mm; border: 0; font-size: 10pt; } .ficha__aviso { font-size: 9pt; } .ficha__rodape { font-size: 8.5pt; } .legenda-fig__lista { font-size: 9.5pt; line-height: 1.4; } .ficha h1 { font-size: 24pt; } .ficha__dados { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 10px 0; } .ficha__campo--nome { grid-column: 1 / -1; } .ficha__tabelas, .ficha__base { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .ficha-tabela th, .ficha-tabela td { height: 8mm; } .ficha__figura, .ficha__aviso, .ficha-tabela { break-inside: avoid; } } /* ========================================================================== Blog (Site 10): artigo, migalhas, listagem e "Veja também". Só tokens existentes (contraste conferido por scripts/verificar-contraste.mjs). Sem estilo inline: as figuras SVG usam as classes svg-* abaixo. ========================================================================== */ .artigo { max-width: 46rem; margin-inline: auto; padding-top: 16px; } @media (min-width: 768px) { .artigo { padding-top: 32px; } } .artigo__cab { padding: 28px 20px; } @media (min-width: 768px) { .artigo__cab { padding: 44px 40px; } } .artigo__cab h1 { font-size: clamp(2rem, 7.5vw, 3rem); line-height: 1; overflow-wrap: break-word; } .artigo__cab .lead { max-width: 56ch; font-size: 1.125rem; } .blog-cab { max-width: none; } .migalhas ol { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: .875rem; } .migalhas li { min-width: 0; max-width: 100%; display: flex; align-items: center; gap: 8px; color: var(--em-tinta-2); } .migalhas li + li::before { content: "/"; color: var(--em-tinta-2); } .migalhas a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: 4px; } @media (max-width: 767.98px) { .migalhas li:last-child { flex: 1 1 100%; } .migalhas li:last-child::before { display: none; } } .migalhas [aria-current="page"] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .artigo__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 20px 0 0; font-size: .875rem; color: var(--em-tinta-2); } .artigo__meta strong { font-weight: 600; color: var(--em-tinta); } .artigo__revisao { margin: 8px 0 0; font-size: .875rem; } .artigo__revisao strong { font-weight: 600; color: var(--em-tinta); } .artigo__revisao--pendente { padding: 10px 14px; border: 1px dashed var(--tinta-borda); border-radius: 10px; color: var(--em-tinta); } .artigo__corpo { padding-top: 28px; font-size: 1.0625rem; line-height: 1.7; } .artigo__corpo > * { min-width: 0; } .artigo__corpo p, .artigo__corpo li { max-width: 68ch; } .artigo__corpo h2 { margin: 1.8em 0 .5em; font-size: clamp(1.5rem, 3.6vw, 2rem); } .artigo__corpo h3 { margin: 1.5em 0 .4em; font-size: 1.375rem; } .artigo__corpo ul, .artigo__corpo ol { margin: 0 0 1em; padding-left: 1.25rem; } .artigo__corpo li { margin-bottom: .4em; } .artigo__resumo { margin: 0 0 1.5em; padding: 16px 18px; background: var(--destaque-fundo); border-left: 6px solid var(--destaque-grafico); border-radius: 12px; font-weight: 500; } .artigo__aviso { margin: 1.5em 0; padding: 14px 16px; border: 1px solid var(--borda-forte); border-radius: 12px; font-size: .9375rem; color: var(--texto-medio); } .artigo__aviso p { margin: 0; } .artigo__fontes ol { font-size: .9375rem; color: var(--texto-medio); } .artigo .tabela-rolagem { margin: 0 0 1.5em; } .artigo .tabela th, .artigo .tabela td { white-space: normal; vertical-align: top; } .artigo .faq { grid-template-columns: minmax(0, 1fr); } .figura-artigo { margin: 1.5em 0; } .figura-artigo svg { display: block; width: 100%; max-width: 26rem; height: auto; margin-inline: auto; } .figura-artigo figcaption { margin-top: 8px; text-align: center; } .svg-caixa { fill: var(--superficie); stroke: var(--borda-forte); stroke-width: 1.5; } .svg-caixa--destaque { fill: var(--destaque); stroke: none; } .svg-linha { fill: none; stroke: var(--texto-medio); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .svg-ponta { fill: var(--texto-medio); stroke: none; } .svg-texto { fill: var(--texto); font: 600 15px var(--fonte-texto); } .svg-texto--destaque { fill: var(--texto-em-destaque); } .svg-texto--fraco { fill: var(--texto-medio); font-weight: 400; font-size: 13px; } .svg-texto--pequeno { font-weight: 400; font-size: 13px; } /* Cartão que é um link inteiro (listagem e "Veja também"): o ::after estica a área de toque pelo cartão todo. */ .grade--2 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { .grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .grade--1 { max-width: 36rem; } .cartao--link { position: relative; display: flex; flex-direction: column; gap: 4px; } .cartao--link h3 { margin: 0; font-size: 1.25rem; } .cartao--link h3 a { color: var(--texto); text-decoration: none; } .cartao--link h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 16px; } .cartao--link h3 a:focus-visible { outline: none; } .cartao--link:has(h3 a:focus-visible) { outline: 3px solid var(--destaque-texto); outline-offset: 3px; } .cartao--link:hover { border-color: var(--borda-forte); } .cartao--link p { margin: 0; color: var(--texto-medio); } .cartao--link .cartao__meta { margin-top: auto; padding-top: 8px; font-size: .8125rem; color: var(--texto-fraco); } .blog-lista .vazio { margin-top: 48px; } @media (min-width: 768px) { .blog-lista .vazio { margin-top: 72px; } } .blog-lista .secao { scroll-margin-top: 80px; } .vazio { padding: 24px; background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: 16px; } .vazio h2 { font-size: 1.75rem; } .vazio p { max-width: 56ch; color: var(--texto-medio); } /* ========================================================================== Site 11: calculadoras em /ferramentas (gasto calórico, 1RM, percentual de gordura). --erro (nos blocos TOKENS-*) é novo, do site: o app não tem token de erro (desvio nº 38). Campo com borda de 2 px em --texto-fraco (3:1 sobre a superfície, como o campo do convite). O painel de resultado é um bloco escuro, a assinatura do app. ========================================================================== */ .calc { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 20px; background: var(--superficie); border: 1px solid var(--borda); border-radius: 16px; } /* A calculadora nasce com hidden e o JS a revela. Antes do JS ela fica invisível, mas ocupando o lugar: se saísse do fluxo, a seção de baixo já estaria na tela e seria empurrada quando o JS rodasse (CLS 0,10 a 0,16 no celular). Sem JavaScript não há reserva (o