/* AN — componentes (CSS puro, qualquer framework). Requer an-tokens.css. Gerado por fonte/gen_css.py. */ /* AN — componentes. Só tokens; nenhum valor de cor solto. Marca plana: sem vidro, sem gradiente em superfície. */ .an { font-family: 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); background: var(--an-fundo); -webkit-font-smoothing: antialiased; } .an *, .an *::before, .an *::after { box-sizing: border-box; } .an :focus-visible { outline: 2px solid var(--an-foco); outline-offset: 2px; } /* Título de página: o peso e a ênfase em vêm do tipo da marca */ .an-titulo { font-family: 'Literata', Georgia, 'Times New Roman', serif; font-weight: 300; letter-spacing: -0.03em; font-size: 36px; line-height: 42px; margin: 0; color: var(--an-texto); text-wrap: balance; } .an-titulo b, .an-titulo strong { font-weight: 600; } .an-titulo--display { font-size: 56px; line-height: 60px; letter-spacing: -0.035em; } .an-titulo--secao { font-size: 26px; line-height: 32px; letter-spacing: -0.025em; } .an-subtitulo { font-size: 16px; line-height: 24px; color: var(--an-texto-2); margin: 0; max-width: 62ch; } /* Rótulo sem caixa alta (marca.json "rotulo": {"caixa": "baixa"}): o estilo `rotulo` do tipo, como a marca o escreve */ .an-rotulo { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; color: var(--an-texto-2); } /* Símbolo: pintado pelo token simbolo */ .an-simbolo { display: block; fill: var(--an-simbolo); } /* Assinatura (símbolo + nome em linhas, identidade/logo/assinatura/): o símbolo e a 1ª linha com o token `simbolo`, as seguintes com `texto-2`. Altura pela classe; a largura sai da proporção do arquivo. Nunca abaixo do mínimo de medidas.json. */ .an-assinatura { display: block; flex: none; width: auto; height: 32px; fill: var(--an-simbolo); } .an-assinatura .an-assinatura__linha ~ .an-assinatura__linha { fill: var(--an-texto-2); } /* Botão */ .an-botao { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: var(--an-raio-md); font: 600 14px/20px 'Literata', Georgia, 'Times New Roman', serif; border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca), color var(--an-tempo-rapido) var(--an-curva-marca), border-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-botao--principal { background: var(--an-acao); color: var(--an-sobre-acao); } .an-botao--principal:hover { background: var(--an-acao-hover); } .an-botao--secundario { background: var(--an-realce); color: var(--an-sobre-realce); } .an-botao--secundario:hover { background: var(--an-superficie-2); } .an-botao--contorno { background: var(--an-superficie); color: var(--an-texto); border-color: var(--an-borda-controle); } .an-botao--contorno:hover { background: var(--an-superficie-2); } .an-botao--fantasma { background: transparent; color: var(--an-texto-2); } .an-botao--fantasma:hover { background: var(--an-superficie-2); color: var(--an-texto); } .an-botao--perigo { background: var(--an-critico); color: var(--an-sobre-acao); } [data-theme="escuro"] .an-botao--perigo, .dark .an-botao--perigo, .an-botao--perigo[data-theme="escuro"] { color: var(--an-fundo); } .an-botao--sm { height: 32px; padding: 0 12px; font-size: 13px; } .an-botao--lg { height: 48px; padding: 0 22px; font-size: 15px; border-radius: 14px; } .an-botao:disabled, .an-botao[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .an-botao svg { width: 16px; height: 16px; flex: none; } /* Campo */ /* align-content: start — numa grade de campos, o campo sem ajuda não estica a distância entre rótulo e controle; > label:not([class]) — o rótulo do campo é o filho direto sem classe: uma caixa de marcar dentro do campo ("Não sei ao certo") mantém a letra dela */ .an-campo { display: grid; gap: 6px; align-content: start; } .an-campo > label:not([class]) { font: 600 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); } .an-entrada { height: 40px; width: 100%; padding: 0 12px; border-radius: var(--an-raio-md); border: 1px solid var(--an-borda-controle); background: var(--an-superficie); color: var(--an-texto); font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; transition: border-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-entrada::placeholder { color: var(--an-texto-3); } .an-entrada:hover { border-color: var(--an-texto-2); } .an-entrada:focus-visible { outline: 2px solid var(--an-foco); outline-offset: 2px; border-color: var(--an-acao); } select.an-entrada { appearance: none; padding-right: 36px; background-image: linear-gradient(45deg, rgba(0,0,0,0) 50%, var(--an-texto-2) 50%), linear-gradient(135deg, var(--an-texto-2) 50%, rgba(0,0,0,0) 50%); background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px; background-size: 5px 5px; background-repeat: no-repeat; } textarea.an-entrada { height: auto; min-height: 88px; padding: 10px 12px; resize: vertical; } .an-ajuda { font: 500 12px/16px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-3); } .an-campo--erro .an-entrada { border-color: var(--an-critico); background: var(--an-critico-fundo); } .an-campo--erro .an-ajuda { color: var(--an-critico); } /* Cartão */ .an-cartao { background: var(--an-superficie); border: 1px solid var(--an-linha); border-radius: var(--an-raio-lg); box-shadow: var(--an-sombra-1); padding: 24px; } .an-cartao__titulo { font: 500 18px/24px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.015em; margin: 0; } /* Indicador (número) */ .an-indicador { display: grid; gap: 6px; } .an-indicador__valor { font: 400 32px/36px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--an-texto); } .an-indicador__variacao { font: 600 12px/16px 'Literata', Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums; } .an-indicador__variacao--sobe { color: var(--an-sucesso); } .an-indicador__variacao--desce { color: var(--an-critico); } /* Etiqueta de status: sempre ponto + palavra */ .an-etiqueta { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px 0 8px; border-radius: var(--an-raio-sm); font: 600 12px/16px 'Literata', Georgia, 'Times New Roman', serif; background: var(--an-superficie-2); color: var(--an-texto-2); white-space: nowrap; } .an-etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .an-etiqueta--sucesso { background: var(--an-sucesso-fundo); color: var(--an-sucesso); } .an-etiqueta--atencao { background: var(--an-atencao-fundo); color: var(--an-atencao); } .an-etiqueta--critico { background: var(--an-critico-fundo); color: var(--an-critico); } .an-etiqueta--marca { background: var(--an-realce); color: var(--an-sobre-realce); } /* Tabela */ .an-tabela-caixa { background: var(--an-superficie); border: 1px solid var(--an-linha); border-radius: var(--an-raio-lg); overflow-x: auto; } .an-tabela { width: 100%; border-collapse: collapse; font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-tabela th { text-align: left; font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; color: var(--an-texto-2); background: var(--an-superficie-2); padding: 12px 16px; white-space: nowrap; } .an-tabela td { padding: 14px 16px; border-top: 1px solid var(--an-linha); color: var(--an-texto); vertical-align: middle; } .an-tabela tbody tr { transition: background-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-tabela tbody tr:hover { background: var(--an-superficie-2); } .an-tabela .num { text-align: right; font-variant-numeric: tabular-nums; } .an-tabela .fraco { color: var(--an-texto-2); } /* Aviso (toast) */ .an-aviso { display: flex; gap: 12px; align-items: flex-start; width: min(380px, 100%); padding: 14px 16px; border-radius: var(--an-raio-lg); background: var(--an-superficie); border: 1px solid var(--an-linha); box-shadow: var(--an-sombra-2); } .an-aviso__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; } .an-aviso__titulo { font: 600 14px/20px 'Literata', Georgia, 'Times New Roman', serif; margin: 0; color: var(--an-texto); } .an-aviso__texto { font: 400 13px/18px 'Literata', Georgia, 'Times New Roman', serif; margin: 2px 0 0; color: var(--an-texto-2); } .an-aviso--sucesso .an-aviso__icone { color: var(--an-sucesso); } .an-aviso--critico .an-aviso__icone { color: var(--an-critico); } .an-aviso--marca .an-aviso__icone { color: var(--an-acao); } /* Estado vazio: frase + uma ação */ .an-vazio { display: grid; justify-items: center; text-align: center; gap: 14px; padding: 48px 24px; border-radius: var(--an-raio-lg); border: 1px dashed var(--an-linha); } .an-vazio .an-simbolo { width: 44px; height: 44px; } .an-vazio__titulo { font: 300 22px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.025em; margin: 0; } .an-vazio__titulo b { font-weight: 600; } .an-vazio__texto { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); margin: 0; max-width: 42ch; } /* Carregando: as peças do símbolo chegam e se encaixam */ .an-carregando { width: 48px; height: 48px; overflow: visible; } .an-carregando path { --dx: 0px; --dy: 0px; fill: var(--an-simbolo); animation: an-encaixe 1.6s var(--an-curva-marca) infinite; } .an-carregando path:first-child { --dx: -9px; --dy: -9px; } .an-carregando path:last-child { --dx: 9px; --dy: 9px; } @keyframes an-encaixe { 0% { transform: translate(var(--dx), var(--dy)); opacity: 0; } 15% { opacity: 1; } 55%, 85% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } } /* Navegação lateral */ .an-nav { display: flex; flex-direction: column; gap: 4px; width: 248px; padding: 16px 12px; background: var(--an-superficie); border-right: 1px solid var(--an-linha); } .an-nav__marca { display: flex; align-items: center; gap: 10px; padding: 6px 10px 18px; font: 600 15px/20px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; color: var(--an-texto); } .an-nav__marca .an-simbolo { width: 26px; height: 26px; } .an-nav__grupo { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; color: var(--an-texto-3); padding: 14px 10px 6px; } .an-nav__item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: var(--an-raio-md); color: var(--an-texto-2); font: 500 14px/20px 'Literata', Georgia, 'Times New Roman', serif; text-decoration: none; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca), color var(--an-tempo-rapido) var(--an-curva-marca); } .an-nav__item svg { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .an-nav__item:hover { background: var(--an-superficie-2); color: var(--an-texto); } .an-nav__item[aria-current="page"] { background: var(--an-realce); color: var(--an-sobre-realce); font-weight: 600; } .an-nav__contador { margin-left: auto; font: 600 11px/16px 'Literata', Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums; padding: 1px 7px; border-radius: var(--an-raio-pilula); background: var(--an-superficie-2); color: var(--an-texto-2); } @media (prefers-reduced-motion: reduce) { .an-carregando path, .an-carregando > span { animation: none; } .an * { transition: none !important; } } /* ===================== v2.1 · componentes completados em 28/09/2026 ===================== */ /* Botão só com ícone (sempre com aria-label) */ .an-botao-icone { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--an-raio-md); border: 1px solid transparent; background: transparent; color: var(--an-texto-2); cursor: pointer; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca), color var(--an-tempo-rapido) var(--an-curva-marca); } .an-botao-icone:hover, .an-botao-icone[aria-expanded="true"] { background: var(--an-superficie-2); color: var(--an-texto); } .an-botao-icone--contorno { border-color: var(--an-borda-controle); background: var(--an-superficie); } .an-botao-icone svg { width: 18px; height: 18px; } /* Menu suspenso (dropdown) — também é a superfície da seleção */ .an-menu { display: grid; gap: 2px; min-width: 220px; padding: 6px; background: var(--an-superficie); border: 1px solid var(--an-linha); border-radius: 14px; box-shadow: var(--an-sombra-2); z-index: var(--an-camada-menu); } .an-menu__item { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 10px; border-radius: 8px; border: 0; background: transparent; width: 100%; text-align: left; font: 500 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); cursor: pointer; text-decoration: none; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-menu__item svg { width: 16px; height: 16px; flex: none; color: var(--an-texto-2); } .an-menu__item:hover, .an-menu__item[data-ativo="true"] { background: var(--an-superficie-2); } .an-menu__item[aria-selected="true"], .an-menu__item[aria-checked="true"] { background: var(--an-realce); color: var(--an-sobre-realce); font-weight: 600; } .an-menu__item[aria-selected="true"] svg, .an-menu__item[aria-checked="true"] svg { color: var(--an-sobre-realce); } .an-menu__item--perigo, .an-menu__item--perigo svg { color: var(--an-critico); } .an-menu__item[aria-disabled="true"] { opacity: .45; cursor: not-allowed; } .an-menu__atalho { margin-left: auto; font: 500 12px/16px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-3); } .an-menu__grupo { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; color: var(--an-texto-3); padding: 8px 10px 4px; } .an-menu__divisor { height: 1px; background: var(--an-linha); margin: 4px -6px; } .an-menu__busca { margin: 0 0 4px; } .an-menu__vazio { padding: 10px; font: 400 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-3); } /* Seleção personalizada (abre um an-menu) */ .an-selecao { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; width: 100%; padding: 0 12px; border-radius: var(--an-raio-md); border: 1px solid var(--an-borda-controle); background: var(--an-superficie); color: var(--an-texto); font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; cursor: pointer; text-align: left; } .an-selecao:hover { border-color: var(--an-texto-2); } .an-selecao[aria-expanded="true"] { border-color: var(--an-acao); outline: 2px solid var(--an-foco); outline-offset: 2px; } .an-selecao__valor--vazio { color: var(--an-texto-3); } .an-selecao svg { width: 16px; height: 16px; color: var(--an-texto-2); flex: none; } /* Caixa de marcar, opção única e interruptor */ .an-marcar, .an-opcao, .an-interruptor { display: inline-flex; align-items: flex-start; gap: 10px; font: 500 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); cursor: pointer; } .an-marcar input, .an-opcao input { appearance: none; flex: none; width: 18px; height: 18px; margin: 1px 0 0; border: 1.5px solid var(--an-borda-controle); background: var(--an-superficie); display: grid; place-items: center; cursor: pointer; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca), border-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-marcar input { border-radius: 5px; } .an-marcar input:checked, .an-marcar input:indeterminate { background: var(--an-acao); border-color: var(--an-acao); } .an-marcar input:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--an-sobre-acao); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); } .an-marcar input:indeterminate::after { content: ""; width: 8px; height: 2px; background: var(--an-sobre-acao); border-radius: 1px; } .an-opcao input { border-radius: 50%; } .an-opcao input:checked { border-color: var(--an-acao); } .an-opcao input:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--an-acao); } .an-marcar small, .an-opcao small, .an-interruptor small { display: block; font: 400 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-interruptor input { appearance: none; flex: none; position: relative; width: 36px; height: 20px; margin: 0; border-radius: var(--an-raio-pilula); background: var(--an-borda-controle); cursor: pointer; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-interruptor input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--an-superficie); box-shadow: 0 1px 2px rgba(23,44,66,.25); transition: transform var(--an-tempo-base) var(--an-curva-marca); } .an-interruptor input:checked { background: var(--an-acao); } .an-interruptor input:checked::after { transform: translateX(16px); } [data-theme="escuro"] .an-interruptor input::after, .dark .an-interruptor input::after { background: var(--an-texto); } [data-theme="escuro"] .an-interruptor input:checked::after, .dark .an-interruptor input:checked::after { background: var(--an-fundo); } .an-marcar input:disabled, .an-opcao input:disabled, .an-interruptor input:disabled { opacity: .45; cursor: not-allowed; } /* Busca e filtros */ .an-busca { position: relative; display: block; } .an-busca svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--an-texto-3); pointer-events: none; } .an-busca .an-entrada { padding-left: 38px; } .an-filtros { display: flex; flex-wrap: wrap; gap: 8px; } .an-filtro { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--an-raio-pilula); border: 1px solid var(--an-borda-controle); background: var(--an-superficie); font: 500 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); cursor: pointer; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-filtro:hover { background: var(--an-superficie-2); color: var(--an-texto); } .an-filtro[aria-pressed="true"] { background: var(--an-realce); border-color: transparent; color: var(--an-sobre-realce); font-weight: 600; } .an-filtro__conta { font-variant-numeric: tabular-nums; color: var(--an-texto-3); } .an-filtro[aria-pressed="true"] .an-filtro__conta { color: var(--an-sobre-realce); } /* Formulário em etapas (a aplicação / diagnóstico) */ .an-etapas { display: grid; gap: 20px; width: min(460px, 100%); } .an-etapas__topo { display: flex; justify-content: space-between; font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; color: var(--an-texto-2); font-variant-numeric: tabular-nums; } .an-etapas__pergunta { font: 300 24px/30px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.025em; margin: 0; color: var(--an-texto); } .an-etapas__escolhas { display: grid; gap: 8px; } .an-escolha { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--an-borda-controle); border-radius: var(--an-raio-md); background: var(--an-superficie); font: 500 15px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); cursor: pointer; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca), border-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-escolha:hover { background: var(--an-superficie-2); } .an-escolha input { appearance: none; flex: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--an-borda-controle); border-radius: 50%; display: grid; place-items: center; } .an-escolha input:checked { border-color: var(--an-acao); } .an-escolha input:checked::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--an-acao); } .an-escolha:has(input:checked) { border-color: var(--an-acao); background: var(--an-realce); color: var(--an-sobre-realce); } .an-etapas__acoes { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .an-etapas__nota { font: 500 12px/16px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-3); margin: 0; text-align: center; } /* Progresso */ .an-progresso { display: grid; gap: 8px; } .an-progresso__rotulo { display: flex; justify-content: space-between; font: 500 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); font-variant-numeric: tabular-nums; } .an-progresso__trilho { height: 6px; border-radius: var(--an-raio-pilula); background: var(--an-superficie-2); overflow: hidden; } .an-progresso__barra { display: block; height: 100%; border-radius: var(--an-raio-pilula); background: var(--an-acao); transition: width var(--an-tempo-lento) var(--an-curva-marca); } /* Abas */ .an-abas { display: flex; gap: 4px; border-bottom: 1px solid var(--an-linha); overflow-x: auto; } .an-aba { height: 40px; padding: 0 12px; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; font: 500 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); cursor: pointer; white-space: nowrap; transition: color var(--an-tempo-rapido) var(--an-curva-marca), border-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-aba:hover { color: var(--an-texto); } .an-aba[aria-selected="true"] { color: var(--an-texto); font-weight: 600; border-bottom-color: var(--an-acao); } .an-abas--segmento { display: inline-flex; gap: 2px; padding: 4px; border: 0; border-radius: 12px; background: var(--an-superficie-2); } .an-abas--segmento .an-aba { height: 32px; border: 0; margin: 0; border-radius: 8px; } .an-abas--segmento .an-aba[aria-selected="true"] { background: var(--an-superficie); box-shadow: var(--an-sombra-1); } /* Paginação e trilha */ .an-paginacao { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; font: 500 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-paginacao__paginas { display: flex; gap: 4px; } .an-pagina { min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px; border: 0; background: transparent; font: 500 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); cursor: pointer; font-variant-numeric: tabular-nums; display: inline-grid; place-items: center; } .an-pagina:hover { background: var(--an-superficie-2); color: var(--an-texto); } .an-pagina[aria-current="page"] { background: var(--an-realce); color: var(--an-sobre-realce); font-weight: 600; } .an-pagina svg { width: 16px; height: 16px; } .an-trilha ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px 'Literata', Georgia, 'Times New Roman', serif; } .an-trilha li { display: flex; gap: 6px; color: var(--an-texto-3); } .an-trilha li + li::before { content: "/"; color: var(--an-texto-3); } .an-trilha a { color: var(--an-texto-2); text-decoration: none; } .an-trilha a:hover { color: var(--an-texto); text-decoration: underline; } .an-trilha [aria-current="page"] { color: var(--an-texto); } /* Modal, painel lateral e fundo escurecido */ .an-veu { position: fixed; inset: 0; background: rgba(23,44,66,.45); z-index: var(--an-camada-painel); } .an-veu--modal { z-index: calc(var(--an-camada-modal) - 1); } [data-theme="escuro"] .an-veu, .dark .an-veu { background: rgba(0,0,0,.6); } .an-modal { width: min(480px, 100%); display: grid; gap: 16px; padding: 24px; background: var(--an-superficie); border-radius: var(--an-raio-xl); box-shadow: var(--an-sombra-3); z-index: var(--an-camada-modal); } .an-modal__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .an-modal__titulo { font: 500 20px/26px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; margin: 0; color: var(--an-texto); } .an-modal__texto { font: 400 14px/21px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); margin: 0; } .an-modal__acoes { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; } .an-painel { width: min(440px, 100%); height: 100%; display: grid; grid-template-rows: auto 1fr auto; background: var(--an-superficie); border-radius: var(--an-raio-xl) 0 0 var(--an-raio-xl); box-shadow: var(--an-sombra-3); z-index: calc(var(--an-camada-painel) + 1); } .an-painel__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 20px 16px 24px; border-bottom: 1px solid var(--an-linha); } .an-painel__corpo { padding: 24px; overflow-y: auto; display: grid; gap: 20px; align-content: start; } .an-painel__pe { display: flex; justify-content: flex-end; gap: 8px; padding: 16px 24px; border-top: 1px solid var(--an-linha); } /* Dica (tooltip): invertida, curta, sem ação dentro */ .an-dica { position: relative; display: inline-block; max-width: 240px; padding: 6px 10px; border-radius: 8px; background: var(--an-texto); color: var(--an-fundo); font: 600 12px/16px 'Literata', Georgia, 'Times New Roman', serif; z-index: var(--an-camada-dica); } .an-dica::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 8px; height: 8px; background: var(--an-texto); transform: translateX(-50%) rotate(45deg); border-radius: 1px; } /* Alerta na página */ .an-alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--an-raio-lg); background: var(--an-realce); color: var(--an-texto); } .an-alerta__icone { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--an-sobre-realce); } .an-alerta__titulo { font: 600 14px/20px 'Literata', Georgia, 'Times New Roman', serif; margin: 0; } .an-alerta__texto { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; margin: 2px 0 0; color: var(--an-texto-2); } .an-alerta__acao { margin-left: auto; align-self: center; } .an-alerta--sucesso { background: var(--an-sucesso-fundo); } .an-alerta--sucesso .an-alerta__icone { color: var(--an-sucesso); } .an-alerta--atencao { background: var(--an-atencao-fundo); } .an-alerta--atencao .an-alerta__icone { color: var(--an-atencao); } .an-alerta--critico { background: var(--an-critico-fundo); } .an-alerta--critico .an-alerta__icone { color: var(--an-critico); } /* Esqueleto de carregamento */ .an-esqueleto { display: block; border-radius: 8px; background: var(--an-superficie-2); animation: an-pulsa 1.6s var(--an-curva-marca) infinite; } @keyframes an-pulsa { 50% { opacity: .55; } } /* Avatar */ .an-avatar { display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; background: var(--an-realce); color: var(--an-sobre-realce); font: 500 14px/1 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; } .an-avatar img { width: 100%; height: 100%; object-fit: cover; } .an-avatar--sm { width: 28px; height: 28px; font-size: 11px; } .an-avatar--lg { width: 48px; height: 48px; font-size: 17px; } .an-avatares { display: flex; } .an-avatares .an-avatar { box-shadow: 0 0 0 2px var(--an-superficie); } .an-avatares .an-avatar + .an-avatar { margin-left: -8px; } /* Sanfona (perguntas frequentes, detalhes) */ .an-sanfona { border-bottom: 1px solid var(--an-linha); } .an-sanfona summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0; list-style: none; cursor: pointer; font: 400 18px/24px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.015em; color: var(--an-texto); } .an-sanfona summary::-webkit-details-marker { display: none; } .an-sanfona summary svg { width: 18px; height: 18px; flex: none; color: var(--an-texto-2); transition: transform var(--an-tempo-base) var(--an-curva-marca); } .an-sanfona[open] summary svg { transform: rotate(45deg); } .an-sanfona__corpo { padding: 0 0 20px; font: 400 15px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); max-width: 65ch; } /* Gráfico */ .an-grafico { display: grid; gap: 16px; } .an-grafico__cabeca { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .an-grafico__legenda { display: flex; flex-wrap: wrap; gap: 16px; list-style: none; margin: 0; padding: 0; font: 500 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-grafico__legenda li { display: flex; align-items: center; gap: 6px; } .an-grafico__legenda i { width: 10px; height: 10px; border-radius: 3px; } .an-grafico svg { width: 100%; height: auto; overflow: visible; } .an-grafico .grade { stroke: var(--an-linha); stroke-width: 1; } .an-grafico .eixo { fill: var(--an-texto-3); font: 500 12px 'Literata', Georgia, 'Times New Roman', serif; } .an-grafico .valor { fill: var(--an-texto); font: 600 12px 'Literata', Georgia, 'Times New Roman', serif; } .an-grafico .d1 { fill: var(--an-dado-1); } .an-grafico .d2 { fill: var(--an-dado-2); } .an-grafico .d3 { fill: var(--an-dado-3); } .an-grafico .l1 { stroke: var(--an-dado-1); } .an-grafico .l2 { stroke: var(--an-dado-2); } .an-grafico .l3 { stroke: var(--an-dado-3); } .an-grafico .linha-serie { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .an-grafico .ponto { stroke: var(--an-superficie); stroke-width: 2; } .an-grafico .marca-barra:hover, .an-grafico .ponto:hover { opacity: .8; } /* Depoimento em vídeo */ .an-depoimento { display: grid; gap: 16px; } .an-depoimento__video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--an-raio-lg); overflow: hidden; display: grid; place-items: center; } .an-depoimento__video { background: var(--an-superficie-2); } .an-depoimento__video img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .an-depoimento__play { position: relative; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--an-superficie); color: var(--an-acao); display: grid; place-items: center; cursor: pointer; box-shadow: var(--an-sombra-2); } .an-depoimento__play svg { width: 20px; height: 20px; margin-left: 3px; } .an-depoimento__frase { font: 300 20px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; color: var(--an-texto); margin: 0; } .an-depoimento__autor { display: flex; align-items: center; gap: 12px; font: 400 13px/18px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-depoimento__autor b { display: block; font: 600 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); } /* Cabeçalho e rodapé do site */ .an-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; } .an-cabecalho__marca { display: flex; align-items: center; gap: 10px; font: 400 19px/1 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.035em; color: var(--an-texto); text-decoration: none; } .an-cabecalho__marca .an-simbolo { width: 28px; height: 28px; } .an-cabecalho__links { display: flex; gap: 28px; font: 500 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-cabecalho__links a { color: var(--an-texto-2); text-decoration: none; } .an-cabecalho__links a:hover { color: var(--an-texto); } .an-cabecalho__menu { display: none; } @media (max-width: 760px) { .an-cabecalho { padding: 16px 0; } .an-cabecalho__links { display: none; } .an-cabecalho__marca span { display: none; } .an-cabecalho__menu { display: inline-grid; } } .an-menu-movel { display: grid; gap: 4px; padding: 12px; background: var(--an-superficie); border: 1px solid var(--an-linha); border-radius: var(--an-raio-lg); box-shadow: var(--an-sombra-2); } .an-menu-movel a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: var(--an-raio-md); font: 400 18px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); text-decoration: none; } .an-menu-movel a:hover { background: var(--an-superficie-2); } .an-rodape { display: grid; gap: 32px; padding: 48px 0 32px; border-top: 1px solid var(--an-linha); } .an-rodape__topo { display: flex; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .an-rodape__frase { font: 300 22px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -.02em; color: var(--an-texto); max-width: 22ch; margin: 12px 0 0; } .an-rodape__frase b { font-weight: 600; } .an-rodape__colunas { display: flex; gap: 48px; flex-wrap: wrap; } .an-rodape__coluna { display: grid; gap: 10px; align-content: start; font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-rodape__coluna strong { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; color: var(--an-texto-3); } .an-rodape__coluna a { color: var(--an-texto-2); text-decoration: none; } .an-rodape__coluna a:hover { color: var(--an-texto); } .an-rodape__base { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--an-linha); font: 400 12px/16px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-3); } @media (prefers-reduced-motion: reduce) { .an-esqueleto { animation: none; } } /* ===================== v2.2 · documentos e relatórios (HTML que vira PDF) ===================== */ /* Sumário: grade leve de colunas iguais, sem linhas; número de dois dígitos na cor de ação */ .an-sumario { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 32px; } .an-sumario--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-sumario a { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--an-texto-2); font: 400 15px/21px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; transition: color var(--an-tempo-rapido) var(--an-curva-marca); } .an-sumario a:hover { color: var(--an-texto); } .an-sumario__n { flex: none; font: 500 12px/21px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-acao); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .an-sumario, .an-sumario--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; } } @media print { .an-sumario, .an-sumario--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 32px; } } /* Documento: página de leitura de até 960 px que também imprime em A4 */ .an-doc { max-width: 960px; margin: 0 auto; padding: 0 16px; } .an-doc__topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid var(--an-linha); } .an-doc__topo .an-simbolo { width: 28px; height: 28px; flex: none; } .an-doc__topo > :first-child { white-space: nowrap; } .an-doc__capa { display: grid; gap: 20px; padding: 72px 0 40px; } .an-doc__meta { display: flex; flex-wrap: wrap; gap: 8px; } .an-doc__sumario { padding: 8px 0 56px; } .an-doc__secao { padding: 40px 0; border-top: 1px solid var(--an-linha); scroll-margin-top: 16px; } .an-doc__cabeca { display: grid; gap: 10px; margin-bottom: 28px; } .an-doc__grade { display: grid; gap: 16px; } .an-doc__grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-doc__grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-doc__grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .an-doc__grade--3 { grid-template-columns: 1fr; } .an-doc__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .an-doc__grade--2, .an-doc__grade--4 { grid-template-columns: 1fr; } } @page { size: A4; margin: 14mm 0; } @media print { .an-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .an-doc { max-width: none; padding: 0 16mm; } .an-doc__capa { padding: 32px 0 28px; } .an-doc__sumario { padding: 0 0 24px; } .an-doc__secao { padding: 24px 0; } .an-doc__cabeca { display: block; break-after: avoid; break-inside: avoid; } .an-doc__cabeca > * + * { margin-top: 10px; } /* reserva espaço depois do cabeçalho: se o conteúdo não couber, o cabeçalho desce junto */ .an-doc__cabeca::after { content: ""; display: block; height: 200px; margin-bottom: -200px; } .an-doc .an-cartao, .an-doc .an-tabela tr, .an-doc .an-alerta, .an-doc li, .an-doc figure { break-inside: avoid; } .an-doc h2, .an-doc h3 { break-after: avoid; } .an-doc p { orphans: 3; widows: 3; } .an-doc .so-tela, .an-doc .an-botao-icone { display: none; } .an-doc__grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================== v2.3 · formulário-isca: etapas com trilho, campo monetário, atalhos, comparação e resultado (06/10/2026) ===================== */ /* Formulário em etapas em tela inteira: trilho à esquerda no computador (contador, etapas, nota); no celular, a barra de etapa no topo */ .an-etapas-tela { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); min-height: 100vh; background: var(--an-fundo); } .an-etapas-tela__principal { display: grid; align-content: center; padding: 48px clamp(24px, 5vw, 80px); } .an-trilho { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 32px; padding: 40px; background: var(--an-superficie-2); color: var(--an-texto); } .an-trilho__contador { display: flex; align-items: baseline; gap: 8px; margin: 0; font: 500 88px/0.9 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--an-texto); } .an-trilho__contador span { font-size: 24px; font-weight: 400; letter-spacing: 0; color: var(--an-texto-2); } .an-trilho__etapas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font: 400 15px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-trilho__etapas li { display: flex; align-items: center; gap: 12px; color: var(--an-texto-2); } .an-trilho__etapas li::before { content: ""; flex: none; width: 24px; height: 1px; background: var(--an-borda-controle); } .an-trilho__etapas li[aria-current] { color: var(--an-texto); font-weight: 600; } .an-trilho__etapas li[aria-current]::before { height: 2px; background: var(--an-acao); } .an-trilho__nota { margin: 0; font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); max-width: 32ch; } .an-etapas-barra { display: none; } .an-etapas-barra__passo { justify-self: end; font: 400 15px/20px 'Literata', Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums; color: var(--an-texto-2); } .an-etapas-barra__passo b { font-weight: 600; color: var(--an-texto); } .an-etapas-barra__linha { grid-column: 1 / -1; display: block; height: 2px; background: var(--an-linha); } .an-etapas-barra__linha i { display: block; height: 100%; background: var(--an-acao); transition: width var(--an-tempo-lento) var(--an-curva-marca); } @media (max-width: 1023px) { .an-etapas-tela { grid-template-columns: minmax(0, 1fr); } .an-trilho { display: none; } .an-etapas-barra { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 16px; padding: 14px 20px 0; position: sticky; top: 0; background: var(--an-fundo); z-index: var(--an-camada-fixo); } .an-etapas-tela__principal { align-content: start; padding: 28px 20px 32px; } } /* Atalhos (chips): valores prontos que preenchem o campo de cima; o escolhido fica com aria-pressed="true". Até cinco numa linha, em colunas iguais (nunca um sozinho na segunda linha); no celular, três colunas: cinco fecham 3 + 2 e quatro fecham 2 + 2. O valor fica centrado na coluna. */ .an-atalhos { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } @media (max-width: 760px) { .an-atalhos { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-atalhos:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .an-atalho { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 8px; border: 1px solid var(--an-borda-controle); border-radius: var(--an-raio-md); background: var(--an-superficie); color: var(--an-texto); font: 400 15px/20px 'Literata', Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums lining-nums; cursor: pointer; white-space: nowrap; transition: background-color var(--an-tempo-rapido) var(--an-curva-marca), color var(--an-tempo-rapido) var(--an-curva-marca), border-color var(--an-tempo-rapido) var(--an-curva-marca); } .an-atalho:hover { background: var(--an-superficie-2); } .an-atalho[aria-pressed="true"] { background: var(--an-acao); border-color: var(--an-acao); color: var(--an-sobre-acao); } /* Campo monetário: o prefixo da moeda fica dentro do campo, fora do valor digitado; número grande e tabular */ .an-moeda { position: relative; display: flex; align-items: center; } .an-moeda__prefixo { position: absolute; left: 16px; font: 400 18px/1 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); pointer-events: none; } .an-moeda .an-entrada { padding-left: 52px; } .an-entrada--grande { height: 56px; font-size: 21px; font-variant-numeric: tabular-nums lining-nums; } /* Comparação de dois valores (hoje × depois): dois números lado a lado, o do resultado marcado por um fio em cima. Neutra: nunca vermelho para um e verde para o outro, porque a comparação não é um status. */ .an-comparacao { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--an-linha); border-bottom: 1px solid var(--an-linha); } .an-comparacao__item { display: grid; gap: 6px; align-content: start; padding: 20px 24px 20px 0; } .an-comparacao__item + .an-comparacao__item { padding-left: 24px; border-left: 1px solid var(--an-linha); } .an-comparacao__item--resultado { box-shadow: inset 0 3px 0 var(--an-acao); } .an-comparacao__valor { font: 500 34px/1.1 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--an-texto); white-space: nowrap; } .an-comparacao__nota { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } @media (max-width: 560px) { .an-comparacao { grid-template-columns: minmax(0, 1fr); } .an-comparacao__item + .an-comparacao__item { padding-left: 0; border-left: 0; border-top: 1px solid var(--an-linha); } } /* Resultado: o número que a pessoa veio buscar, com rótulo, as linhas que o explicam e a ressalva, uma vez, legível */ .an-resultado { display: grid; gap: 20px; } .an-resultado__destaque { display: grid; gap: 4px; padding-left: 20px; border-left: 3px solid var(--an-acao); } .an-resultado__valor { margin: 0; font: 500 64px/1 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.025em; font-variant-numeric: tabular-nums lining-nums; color: var(--an-texto); white-space: nowrap; } .an-resultado__linhas { display: grid; margin: 0; } .an-resultado__linha { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--an-linha); font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; font-variant-numeric: tabular-nums lining-nums; } .an-resultado__linha dt { color: var(--an-texto-2); } .an-resultado__linha dd { margin: 0; color: var(--an-texto); text-align: right; white-space: nowrap; } .an-resultado__ressalva { margin: 0; font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); max-width: 70ch; } @media (max-width: 560px) { .an-resultado__valor { font-size: 44px; } } /* Modal como nativo e modal de leitura (política, termos): rola por dentro, nunca a página */ dialog.an-modal { border: 0; color: var(--an-texto); } dialog.an-modal:not([open]) { display: none; } dialog.an-modal::backdrop { background: rgba(23,44,66,.45); } .an-modal--leitura { width: min(620px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; } /* ===================== v2.4 · painel do computador ao celular, gráfico em preto e branco e piso de leitura e de toque (07/10/2026) ===================== */ /* Painel (telas de sistema): menu lateral à esquerda e o conteúdo; título à esquerda e ações à direita, na mesma linha. Abaixo de 1024 px o menu sai da lateral e vira a barra do topo (a marca + o botão de menu de 44 px); o botão abre o menu como painel à esquerda (data-menu="aberto" no .an-app, com o véu). Indicadores e cartões vão a uma coluna; a tabela e o funil rolam dentro da própria caixa, nunca a página. */ .an-app { display: grid; grid-template-columns: auto minmax(0, 1fr); min-height: 100vh; background: var(--an-fundo); } .an-app > .an-nav { min-height: 100vh; } .an-app__barra, .an-app > .an-app__veu { display: none; } .an-app__conteudo { position: relative; min-width: 0; display: grid; gap: 28px; align-content: start; padding: 36px 40px 48px; container-type: inline-size; } .an-app__cabeca { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; } .an-app__cabeca > :first-child { flex: 1 1 auto; min-width: 0; display: grid; gap: 6px; } .an-app__acoes { display: flex; flex: none; gap: 8px; align-items: center; } /* O cabeçalho decide pela largura do CONTEÚDO, não da janela (o menu lateral come 220 a 270 px): título e ações na mesma linha só com 860 px de conteúdo ou mais. Abaixo disso, o título ocupa a linha inteira e as ações descem para baixo dele, à esquerda, com a principal primeiro; com menos de 520 px, empilham na largura da coluna. Assim o título nunca é espremido até sobrar uma palavra sozinha (ex.: janela de 1093 px, notebook de 1366 a 125%). */ @container (max-width: 859px) { .an-app__cabeca { flex-direction: column; align-items: flex-start; } .an-app__cabeca > :first-child { width: 100%; } .an-app__acoes { flex-wrap: wrap; } .an-app__acoes .an-botao--principal { order: -1; } } @container (max-width: 519px) { .an-app__cabeca { align-items: stretch; } .an-app__acoes { display: grid; grid-template-columns: minmax(0, 1fr); } } .an-indicadores { display: grid; gap: 12px; grid-template-columns: repeat(4, minmax(0, 1fr)); } /* rótulo, número e nota alinhados entre os cartões, mesmo quando um rótulo quebra em duas linhas */ .an-indicadores > .an-indicador { grid-row: span 3; grid-template-rows: subgrid; align-content: start; } .an-app .an-etiqueta { justify-self: start; } /* aviso (toast) da tela: no canto de baixo à direita; no celular, na largura da tela com a margem de 16 px */ .an-app__aviso { position: absolute; right: 40px; bottom: 28px; z-index: var(--an-camada-aviso); } @container (max-width: 880px) { .an-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container (max-width: 520px) { .an-indicadores { grid-template-columns: minmax(0, 1fr); } } .an-funil { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding-bottom: 4px; } .an-funil__coluna { display: grid; gap: 8px; align-content: start; min-width: 0; padding: 12px; border-radius: var(--an-raio-lg); background: var(--an-superficie-2); scroll-snap-align: start; } .an-funil__cabeca { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px 6px; } .an-funil__cabeca .an-nav__contador { margin: 0; } @media (max-width: 1023px) { .an-app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; } .an-app__barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; background: var(--an-superficie); border-bottom: 1px solid var(--an-linha); position: sticky; top: 0; z-index: var(--an-camada-fixo); } .an-app > .an-nav { display: none; } .an-app[data-menu="aberto"] > .an-nav { display: flex; position: fixed; inset: 0 auto 0 0; width: min(300px, 100% - 56px); height: 100%; z-index: calc(var(--an-camada-painel) + 1); box-shadow: var(--an-sombra-3); } .an-app[data-menu="aberto"] > .an-app__veu { display: block; } .an-app__conteudo { padding: 24px 16px 40px; gap: 24px; } .an-app__aviso { left: 16px; right: 16px; bottom: 16px; width: auto; } } @media (max-width: 760px) { .an-funil { grid-auto-columns: calc(100% - 40px); scroll-snap-type: x mandatory; } } /* Gráfico com duas séries ou mais: a forma também separa as séries (impresso em preto e branco, daltonismo). Série 2 tracejada, série 3 pontilhada; a amostra da legenda é a própria linha (svg pequeno na legenda). */ .an-grafico .tracejada { stroke-dasharray: 7 5; } .an-grafico .pontilhada { stroke-dasharray: 1 5; } .an-grafico .an-grafico__legenda svg { flex: none; width: 24px; height: 10px; overflow: visible; } /* Gráfico no celular: um desenho próprio, mais estreito e com menos rótulos, nunca o do computador encolhido (a letra do eixo encolheria junto). O cartão do gráfico é um contêiner: abaixo de 480 px de largura, o desenho largo dá lugar ao estreito. Desenhe o largo com 480 de largura no viewBox e o estreito com 300, para a letra nunca sair menor que o corpo escrito. */ .an-grafico { container-type: inline-size; } .an-grafico .an-grafico__desenho--largo { max-width: 720px; } .an-grafico .an-grafico__desenho--estreito { display: none; max-width: 400px; } @container (max-width: 479px) { .an-grafico .an-grafico__desenho--largo { display: none; } .an-grafico .an-grafico__desenho--estreito { display: block; } } /* Piso de leitura e de toque (marca.json, "piso"; padrão ligado): nenhum texto abaixo de 14 px e nenhum alvo de toque abaixo de 44 × 44 px (botão, inclusive o pequeno, botão de ícone, campo, item de menu e de navegação, aba, filtro, atalho, página, link de ação solto, caixa de marcar com o texto). Link dentro de uma frase fica fora. Conferido por verificacao/piso.js. */ .an-campo > label:not([class]), .an-ajuda, .an-indicador__variacao, .an-etiqueta, .an-aviso__texto, .an-nav__contador, .an-botao--sm, .an-menu__atalho, .an-menu__vazio, .an-marcar small, .an-opcao small, .an-interruptor small, .an-filtro, .an-etapas__nota, .an-progresso__rotulo, .an-paginacao, .an-pagina, .an-trilha ol, .an-dica, .an-grafico__legenda, .an-depoimento__autor, .an-rodape__base, .an-sumario__n { font-size: 14px; line-height: 20px; } .an-grafico .eixo, .an-grafico .valor { font-size: 14px; } .an-avatar--sm { width: 32px; height: 32px; font-size: 14px; } .an-botao, .an-entrada, .an-selecao, .an-menu__item, .an-nav__item, .an-aba, .an-filtro, .an-atalho, .an-pagina { min-height: 44px; } .an-abas--segmento .an-aba { min-height: 44px; } .an-botao-icone, .an-pagina { min-width: 44px; } .an-botao-icone { min-height: 44px; } .an-marcar, .an-opcao, .an-interruptor { min-height: 44px; padding-block: 10px; } .an-cabecalho__marca, .an-trilha a, .an-cabecalho__links a, .an-rodape__base a { display: inline-flex; align-items: center; min-height: 44px; } /* O alvo de 44 px não muda a linha de base: a linha onde um link cresce centraliza tudo na vertical (o item atual da trilha, a barra "/" e o texto da base do rodapé ficam na altura do link, não no alto). */ .an-trilha ol, .an-trilha li, .an-rodape__base, .an-cabecalho__links { align-items: center; } .an-rodape__coluna a { display: flex; align-items: center; min-height: 44px; } .an-sumario a { min-height: 44px; } /* ===================== v2.5 · ações no celular: modal, painel lateral e alerta (07/10/2026) ===================== */ /* Modal e painel lateral no celular: as ações empilham na largura da folha, a principal primeiro (em cima). No HTML a ordem continua cancelar → ação (no computador, lado a lado à direita, a ação na ponta). */ @media (max-width: 480px) { .an-modal__acoes, .an-painel__pe { flex-direction: column-reverse; align-items: stretch; } .an-modal__acoes > *, .an-painel__pe > * { width: 100%; } } /* Alerta com ação, no celular: o botão desce para baixo do texto, alinhado com ele, em vez de espremer o texto e o próprio rótulo */ @media (max-width: 560px) { .an-alerta:has(> .an-botao) { display: grid; grid-template-columns: auto minmax(0, 1fr); } .an-alerta > .an-botao { grid-column: 2; justify-self: start; } } /* ===================== Almeida Nascimento Advocacia · camada da marca (interface/fonte/marca.css) ===================== Vem depois do sistema e muda só o que a marca pede (DIRECAO-MARCA.md, seção "Sistema (estágio 6)", com o motivo de cada regra). Escrita como o bundle: classes an-* e tokens sem prefixo; o gerador troca para o prefixo da marca. Nenhum valor de cor solto: só tokens. Território T2 Mesa: papel, mesa, pasta e fio; Literata uma família só. */ /* ---------- Letra: Literata com tamanho ótico pelo corpo; algarismos alinhados; nenhum texto abaixo de 14 px ---------- */ .an { font-optical-sizing: auto; font-size: 18px; line-height: 28px; font-variant-numeric: lining-nums; } .an-num, .an-tabela .num, .an-indicador__valor, .an-indicador__variacao, .an-nav__contador, .an-filtro__conta, .an-pagina, .an-progresso__rotulo, .an-comparacao__valor, .an-resultado__valor, .an-resultado__linha, .an-trilho__contador, .an-etapas-barra__passo, .an-sumario__n { font-variant-numeric: tabular-nums lining-nums; } /* Número e unidade nunca se separam ("R$ 3.900 por mês", "12,5%") */ .an-num { white-space: nowrap; } /* Títulos: Literata 500, inteiros. A marca não tem palavra em destaque: a ousadia é o número, com o fio Palha. */ .an-titulo { font-weight: 500; font-size: 40px; line-height: 46px; letter-spacing: -0.02em; } .an-titulo b, .an-titulo strong, .an-vazio__titulo b, .an-rodape__frase b { font-weight: inherit; } .an-titulo--display { font-size: 72px; line-height: 76px; letter-spacing: -0.024em; } .an-titulo--secao { font-size: 30px; line-height: 36px; letter-spacing: -0.015em; } .an-subtitulo { font-size: 18px; line-height: 28px; max-width: 60ch; } :where(h1, h2, h3, h4, summary) { text-wrap: balance; } /* Texto curto de apoio nunca termina com uma palavra sozinha na última linha */ .an-vazio__texto, .an-aviso__texto, .an-alerta__texto, .an-modal__texto, .an-ajuda, .an-etapas__dica, .an-etapas__nota, .an-resultado__ressalva, .an-comparacao__nota, .an-frentes span, .an-trilho__nota { text-wrap: pretty; } .an-entrada-cliente__pe, .an-foto-faixa figcaption { text-wrap: balance; } /* A linha de contexto (subtítulo) é curta: quebra balanceada, nunca uma palavra sozinha na última linha (o "pretty" do navegador deixa passar palavra longa, como "procedimentos.", sozinha) */ .an-subtitulo { text-wrap: balance; } .an-titulo, .an-cartao__titulo, .an-modal__titulo, .an-etapas__pergunta, .an-vazio__titulo, .an-rodape__frase, .an-depoimento__frase { text-wrap: balance; } @media (max-width: 760px) { .an-titulo { font-size: 30px; line-height: 36px; } .an-titulo--display { font-size: 40px; line-height: 44px; letter-spacing: -0.02em; } .an-titulo--secao { font-size: 24px; line-height: 30px; } } /* Link no texto e ação secundária do marketing: sublinhado fino e afastado, nunca um segundo botão cheio */ .an-link { color: var(--an-texto); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; transition: text-decoration-thickness var(--an-tempo-rapido) var(--an-curva-marca); } .an-link:hover { text-decoration-thickness: 2px; } .an-link--apoio { color: var(--an-texto-2); font-weight: 400; font-style: italic; } /* Link de ação solto (fora de uma frase): alvo de 44 px, sem mudar o desenho. Dentro de uma frase, o link segue a linha. */ .an-link--acao, :is(.an-topo__acoes, .an-etapas__acoes, .an-entrada-cliente__campos, .an-acoes) .an-link, .an-etapas-tela__pe a { display: inline-flex; align-items: center; min-height: 44px; } /* ---------- Ações: botão chapado, canto de 3 px, sem sombra, sem seta ---------- */ .an-botao { height: 48px; padding: 0 22px; font: 500 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-botao--sm { height: 44px; padding: 0 16px; font-size: 16px; } .an-botao--lg { height: 56px; padding: 0 26px; font-size: 18px; border-radius: var(--an-raio-md); } .an-botao--contorno { background: transparent; border-color: var(--an-texto); color: var(--an-texto); } .an-botao--contorno:hover { background: var(--an-superficie-2); } .an-botao--fantasma:hover { background: var(--an-superficie-2); } .an-botao--perigo { color: var(--an-fundo); } .an-botao svg { width: 18px; height: 18px; } .an-botao--largo { width: 100%; } /* Botão nunca sai da coluna: no celular, quebra a linha se o texto não couber */ @media (max-width: 760px) { .an-botao { max-width: 100%; white-space: normal; height: auto; min-height: 48px; padding-block: 12px; text-align: center; text-wrap: balance; } .an-botao--lg { min-height: 56px; padding-block: 14px; } } .an-botao-icone { width: 44px; height: 44px; border-radius: var(--an-raio-md); } .an-botao-icone--contorno { border-color: var(--an-borda-controle); } /* ---------- Formulários: rótulo em itálico na cor do texto (o login aprovado), campo de 48 px com borda Fumo ---------- */ .an-campo { gap: 8px; } .an-campo { align-content: start; } .an-campo > label:not([class]), .an-campo__rotulo { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); } /* Caixa de marcar dentro de um campo (a saída "Não sei ao certo"): a letra da opção, não a do rótulo do campo */ .an-campo .an-marcar, .an-campo .an-opcao, .an-campo .an-interruptor { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); } .an-entrada { height: 48px; padding: 0 14px; font: 400 18px/26px 'Literata', Georgia, 'Times New Roman', serif; } .an-entrada:hover { border-color: var(--an-texto); } .an-entrada:focus-visible { border-color: var(--an-texto); } select.an-entrada { background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px; } textarea.an-entrada { min-height: 104px; padding: 12px 14px; } .an-entrada--grande { height: 56px; font-size: 21px; } .an-moeda__prefixo { font-size: 18px; } .an-ajuda { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-selecao { height: 48px; font: 400 18px/26px 'Literata', Georgia, 'Times New Roman', serif; } .an-marcar, .an-opcao, .an-interruptor { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-marcar small, .an-opcao small, .an-interruptor small { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-marcar input, .an-opcao input { width: 20px; height: 20px; margin-top: 2px; border-width: 1px; } .an-marcar input { border-radius: var(--an-raio-sm); } /* Interruptor sem pílula: trilho e botão retos, de canto pequeno (a marca só tem o avatar redondo) */ .an-interruptor input { height: 24px; width: 44px; border-radius: var(--an-raio-md); } .an-interruptor input::after { top: 4px; left: 4px; border-radius: var(--an-raio-sm); background: var(--an-superficie); box-shadow: none; } .an-interruptor input:checked::after { transform: translateX(20px); } .an-busca svg { left: 14px; width: 18px; height: 18px; } .an-busca .an-entrada { padding-left: 42px; } .an-filtro { height: 44px; padding: 0 16px; border-radius: var(--an-raio-md); font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-filtro[aria-pressed="true"] { font-weight: 500; } .an-atalho { min-height: 44px; padding: 0 8px; font-size: 16px; } /* Os atalhos são do sistema (molde v2.3): até cinco numa linha, em colunas iguais; no celular, 3 + 2. Em 560 px de coluna, cada um tem 105 px, e "R$ 300.000" em Literata 16 px cabe com 8 px de cada lado; em 360 px de tela, 3 colunas de 104 px. */ /* Formulário em etapas: pergunta em título, opções em folha com fio, nota à esquerda (o bloco é alinhado à esquerda) */ .an-etapas { gap: 24px; width: min(560px, 100%); } .an-etapas__pergunta { font: 500 30px/36px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.015em; text-wrap: balance; } .an-etapas__dica { margin: -12px 0 0; font: 400 18px/28px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-escolha { min-height: 60px; padding: 16px 18px; gap: 14px; border-radius: var(--an-raio-md); font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-escolha input { width: 20px; height: 20px; border-width: 1px; } .an-escolha small { display: block; font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-etapas__nota { text-align: left; font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-etapas__acoes--coluna { justify-content: flex-start; gap: 28px; flex-wrap: wrap; } /* No celular, o botão ocupa a coluna e Voltar e Ajuda ficam embaixo, à esquerda, como o resto do bloco */ @media (max-width: 760px) { .an-etapas__acoes--coluna { display: grid; justify-content: stretch; justify-items: start; gap: 4px; } .an-etapas__acoes--coluna .an-botao { width: 100%; } } .an-trilho { background: var(--an-realce); padding: 40px 44px; } .an-trilho .an-assinatura { height: 32px; } .an-trilho__contador { font-size: 96px; } .an-trilho__etapas { font-size: 16px; line-height: 22px; } .an-trilho__etapas li::before { background: var(--an-texto-2); opacity: .5; } .an-trilho__etapas li[aria-current]::before { opacity: 1; } .an-trilho__nota { font-size: 16px; line-height: 24px; } .an-etapas-barra .an-assinatura { height: 23px; } .an-etapas-barra__passo { font-size: 16px; line-height: 22px; } .an-etapas-barra__linha { background: var(--an-realce); } /* Resultado e comparação: o fio Palha marca o resultado (só aqui, uma vez por tela); rótulo em itálico */ .an-resultado__destaque { border-left-color: var(--an-marcador); } .an-resultado__valor { font-weight: 500; } .an-resultado__linha { font-size: 18px; line-height: 26px; } .an-resultado__linha dt { font-style: italic; } .an-comparacao__item--resultado { box-shadow: inset 0 3px 0 var(--an-marcador); } .an-comparacao__nota { font-size: 16px; line-height: 22px; } /* ---------- Conteúdo ---------- */ .an-cartao { padding: 24px; } .an-cartao__titulo { font: 500 21px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; } .an-indicador { gap: 4px; } .an-indicador__valor { font: 500 40px/44px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.02em; white-space: nowrap; } .an-indicador__variacao { font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-etiqueta { height: 28px; padding: 0 10px 0 9px; border-radius: var(--an-raio-sm); font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-tabela { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-tabela th { padding: 12px 16px; } .an-tabela td { padding: 14px 16px; } .an-tabela tfoot td { border-top: 2px solid var(--an-marcador); font-weight: 500; } /* Tabela estreita (menos de 520 px de caixa, o celular): a coluna de detalhe (texto de apoio, como "Para quê") sai, para o status, o valor e o prazo ficarem à vista sem rolar. Status, valor e prazo nunca são coluna de detalhe. */ .an-tabela-caixa { container-type: inline-size; } @container (max-width: 519px) { .an-tabela .an-tabela__detalhe { display: none; } } .an-aviso { border-color: var(--an-borda-controle); } .an-aviso__titulo, .an-alerta__titulo { font: 500 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-aviso__texto, .an-alerta__texto { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-alerta { border-radius: var(--an-raio-lg); } /* Estado vazio é composição Centrada: sem cartão nem borda, o fundo já é a superfície */ .an-vazio { border: 0; gap: 16px; } .an-vazio .an-simbolo { width: 48px; height: 48px; } .an-vazio__titulo { font: 500 24px/30px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; } .an-vazio__texto { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; max-width: 40ch; } /* No celular, o estado vazio não tem margem própria (não tem borda): usa a largura da coluna, para a frase caber inteira */ @media (max-width: 480px) { .an-vazio { padding-inline: 0; } .an-vazio__titulo { font-size: 21px; line-height: 28px; } } .an-avatar { font: 500 16px/1 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; } .an-avatar--sm { width: 32px; height: 32px; font-size: 14px; } .an-avatar--lg { font-size: 18px; } .an-sanfona summary { padding: 22px 0; font: 500 21px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; } .an-sanfona__corpo { font: 400 18px/28px 'Literata', Georgia, 'Times New Roman', serif; } .an-esqueleto { border-radius: var(--an-raio-sm); } .an-dica { border-radius: var(--an-raio-sm); font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-dica::after { border-radius: 0; } .an-progresso__rotulo { font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-progresso__trilho { height: 2px; border-radius: 0; background: var(--an-realce); } .an-progresso__barra { border-radius: 0; } /* Gráfico: nenhum rótulo abaixo de 14 px; legenda com amostra reta */ .an-grafico .eixo { font: 400 15px 'Literata', Georgia, 'Times New Roman', serif; } .an-grafico .valor { font: 500 15px 'Literata', Georgia, 'Times New Roman', serif; } /* O desenho estreito (viewBox de 300) encolhe até 264 px de cartão em 360 px de tela: letra de 16 no viewBox, para o eixo nunca sair abaixo de 14 px (16 × 264 / 300 = 14,1) */ .an-grafico .an-grafico__desenho--estreito .eixo, .an-grafico .an-grafico__desenho--estreito .valor { font-size: 16px; } .an-grafico__legenda { font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-grafico__legenda i { border-radius: 2px; } /* Depoimento: o vídeo pousa na pasta (sem degradê); o botão de tocar é Algodão chapado, quadrado de canto pequeno (só o avatar é redondo) */ .an-depoimento__video { background: var(--an-pasta); border-radius: var(--an-raio-lg); } .an-depoimento__play { background: var(--an-algodao); color: var(--an-capa); box-shadow: none; border-radius: var(--an-raio-md); } .an-depoimento__play svg { width: 22px; height: 22px; margin-left: 2px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; } .an-depoimento__frase { font: 500 24px/32px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.01em; } .an-depoimento__autor { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-depoimento__autor b { font: 500 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } /* ---------- Navegação ---------- */ .an-nav { width: 268px; padding: 20px 12px; } .an-nav__marca { display: grid; gap: 8px; padding: 6px 10px 22px; } .an-nav__marca .an-assinatura { width: 100%; max-width: 212px; height: auto; } .an-nav__marca span { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-nav__item { height: 44px; padding: 0 12px; font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; border-radius: var(--an-raio-md); } .an-nav__item[aria-current="page"] { font-weight: 500; } .an-nav__contador { font: 500 14px/20px 'Literata', Georgia, 'Times New Roman', serif; padding: 1px 7px; border-radius: var(--an-raio-sm); } .an-menu { border-color: var(--an-borda-controle); border-radius: var(--an-raio-lg); padding: 6px; } .an-menu__item { min-height: 44px; padding: 0 12px; border-radius: var(--an-raio-md); font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-menu__item[aria-selected="true"], .an-menu__item[aria-checked="true"] { font-weight: 500; } .an-menu__atalho { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; } .an-menu__vazio { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-menu__divisor { margin: 4px -6px; } .an-aba { height: 44px; padding: 0 14px; font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-aba[aria-selected="true"] { font-weight: 500; } .an-abas--segmento { border-radius: var(--an-raio-md); } .an-abas--segmento .an-aba { height: 44px; border-radius: var(--an-raio-sm); } .an-paginacao, .an-trilha ol { font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-pagina { min-width: 44px; height: 44px; border-radius: var(--an-raio-md); font: 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } .an-pagina[aria-current="page"] { font-weight: 500; } /* Cabeçalho e rodapé do site: a assinatura oficial inline, links em Literata, a ação à direita */ .an-cabecalho { padding: 28px 0; } .an-cabecalho__marca .an-assinatura { height: 38px; } .an-cabecalho__links { gap: 32px; font: 400 18px/26px 'Literata', Georgia, 'Times New Roman', serif; } .an-cabecalho__links a { color: var(--an-texto); } .an-cabecalho__links a:hover, .an-cabecalho__links a[aria-current] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.28em; } /* Os links do cabeçalho ficam numa linha só, cada um inteiro: quando não cabem (o cabeçalho com menos de 1020 px: a assinatura tem 268 px e os seis links, 703), viram o botão de menu, como no celular. Antes, entre 761 e 1100 px, "O escritório" e "Área do cliente" quebravam em duas linhas e, em 800 px, o cabeçalho rolava para o lado. */ .an-cabecalho { container-type: inline-size; } .an-cabecalho__links a { white-space: nowrap; } @container (max-width: 1019px) { .an-cabecalho__links { display: none; } .an-cabecalho__menu { display: inline-grid; } } /* No celular: só a assinatura e o menu; a ação do topo vai para a cena logo abaixo */ @media (max-width: 760px) { .an-cabecalho { padding: 16px 0; } .an-cabecalho__marca .an-assinatura { height: 26px; } .an-cabecalho > .an-botao { display: none; } } .an-menu-movel { border-color: var(--an-borda-controle); } .an-menu-movel a { font: 400 18px/26px 'Literata', Georgia, 'Times New Roman', serif; border-radius: var(--an-raio-md); } .an-rodape__marca .an-assinatura { height: 36px; } .an-rodape__frase { font: 500 26px/32px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.015em; max-width: 24ch; } .an-rodape__coluna { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-rodape__coluna a { color: var(--an-texto); } .an-rodape__base { font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } /* ---------- Topo do site (a cena da apresentação aprovada): título, frase, ação + link, e a foto inteira embaixo ---------- */ .an-leitura { width: min(1180px, 100% - 96px); margin-inline: auto; } @media (max-width: 1023px) { .an-leitura { width: calc(100% - 32px); } } .an-topo { display: grid; gap: 20px; justify-items: start; padding: 64px 0 72px; } .an-topo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 8px; } .an-topo__acoes .an-link { font-size: 18px; } .an-foto-faixa { position: relative; margin: 0; height: clamp(360px, 46vw, 640px); overflow: hidden; background: var(--an-superficie-2); } .an-foto-faixa img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; } .an-foto-faixa figcaption { position: absolute; left: max(48px, (100% - 1180px) / 2); bottom: 22px; font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); background: var(--an-fundo); padding: 4px 10px; border-radius: var(--an-raio-sm); } .an-frentes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--an-linha); } .an-frentes li { display: grid; gap: 6px; align-content: start; padding: 22px 24px 8px 0; } .an-frentes li + li { padding-left: 24px; border-left: 1px solid var(--an-linha); } .an-frentes b { font: 500 21px/28px 'Literata', Georgia, 'Times New Roman', serif; } .an-frentes span { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } @media (max-width: 760px) { .an-topo { padding: 32px 0 40px; } .an-foto-faixa { height: 300px; } .an-foto-faixa figcaption { left: 16px; bottom: 14px; } .an-frentes { grid-template-columns: minmax(0, 1fr); } .an-frentes li, .an-frentes li + li { padding: 18px 0 16px; border-left: 0; } .an-frentes li + li { border-top: 1px solid var(--an-linha); } } /* ---------- Material: a mesa, a pasta, o campo a preencher ---------- */ /* A mesa (Pedra): faixa de seção onde folhas pousam; nunca a página inteira */ .an-mesa { background: var(--an-realce); color: var(--an-sobre-realce); } /* A pasta (Capa): capa de documento, seção escura pontual, slide de capítulo. Texto Algodão, apoio Pedra, fio Palha. */ .an-pasta { background: var(--an-pasta); color: var(--an-algodao); } .an-pasta .an-titulo, .an-pasta .an-cartao__titulo, .an-pasta .an-indicador__valor { color: var(--an-algodao); } .an-pasta .an-subtitulo, .an-pasta .an-rotulo, .an-pasta small { color: var(--an-pedra); } .an-pasta .an-assinatura, .an-pasta .an-simbolo { fill: var(--an-algodao); } .an-pasta .an-assinatura .an-assinatura__linha ~ .an-assinatura__linha { fill: var(--an-pedra); } .an-pasta .an-botao--principal { background: var(--an-algodao); color: var(--an-capa); } .an-pasta .an-link { color: var(--an-algodao); } /* O monograma grande na pasta: tinta plana um tom acima dela (o lugar do selo seco quando a peça é tela). Nunca atrás de texto. */ .an-selo { display: block; aspect-ratio: 1; background: var(--an-selo); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; } /* Campo a preencher em modelo de documento: entre colchetes, fundo Pedra */ .an-preencher { background: var(--an-realce); color: var(--an-sobre-realce); padding: 0 4px; border-radius: var(--an-raio-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* ---------- Documento: a capa é a pasta (assinatura, rótulo, título, quem e quando); o resto é a folha ---------- */ .an-doc__topo, .an-doc__capa { background: var(--an-pasta); color: var(--an-algodao); padding-left: 48px; padding-right: 48px; } .an-doc__topo { padding-top: 32px; padding-bottom: 8px; border-bottom: 0; } .an-doc__topo .an-assinatura { height: 34px; fill: var(--an-algodao); } .an-doc__topo .an-assinatura .an-assinatura__linha ~ .an-assinatura__linha { fill: var(--an-pedra); } .an-doc__topo small { font: italic 400 16px/22px 'Literata', Georgia, 'Times New Roman', serif !important; color: var(--an-pedra) !important; } .an-doc__capa { position: relative; gap: 18px; padding-top: 112px; padding-bottom: 56px; margin-top: -2px; } /* encosta no topo sem fresta no PDF */ .an-doc__capa::after { content: ""; position: absolute; right: 48px; top: 40px; width: 220px; aspect-ratio: 1; background: var(--an-selo); -webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,") center / contain no-repeat; pointer-events: none; } .an-doc__capa > * { position: relative; z-index: 1; max-width: 600px; } .an-doc__capa .an-rotulo { color: var(--an-pedra); font-size: 18px; } .an-doc__capa .an-titulo { color: var(--an-algodao); } .an-doc__capa .an-titulo--display { font-size: 56px; line-height: 60px; } .an-doc__capa .an-subtitulo { color: var(--an-pedra); } .an-doc__capa .an-etiqueta { background: transparent; border: 1px solid var(--an-pedra); color: var(--an-algodao); } .an-doc__capa .an-etiqueta::before { background: var(--an-pedra); } .an-doc__sumario { padding: 40px 0 48px; } .an-doc__cabeca .an-rotulo { font-size: 18px; line-height: 26px; } @media (max-width: 760px) { .an-doc__topo, .an-doc__capa { padding-left: 20px; padding-right: 20px; } .an-doc__capa { padding-top: 132px; } .an-doc__capa::after { width: 96px; right: 20px; top: 24px; } .an-doc__capa .an-titulo--display { font-size: 34px; line-height: 40px; } } /* PDF: a margem do papel tem a cor do chão; a capa vai até a borda do papel, em cima e dos lados */ @page { background: var(--an-fundo); } @page :first { margin-top: 0; } @media print { .an-doc__topo, .an-doc__capa { margin-left: -16mm; margin-right: -16mm; padding-left: 16mm; padding-right: 16mm; } .an-doc__topo { padding-top: 16mm; } .an-doc__capa { padding-top: 48mm; padding-bottom: 14mm; } .an-doc__capa::after { right: 16mm; top: 10mm; width: 58mm; } .an-doc__sumario { padding: 10mm 0 6mm; } } /* Sumário: número de apoio em algarismos tabulares, nome da seção em Literata */ .an-sumario a { color: var(--an-texto); font: 400 18px/26px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: 0; } .an-sumario a:hover { text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 1px; } .an-sumario__n { font: 500 16px/26px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } /* No celular, uma coluna: a Literata é larga e duas colunas quebrariam os nomes das seções. No PDF continuam duas. */ @media screen and (max-width: 640px) { .an-sumario, .an-sumario--3 { grid-template-columns: minmax(0, 1fr); gap: 10px; } } /* ---------- Telas de sistema e peças de comunicação ---------- */ /* Peça de comunicação (site, landing, formulário, documento) é sempre clara: o contêiner leva data-theme="claro" */ .an [data-theme="claro"] { background: var(--an-fundo); color: var(--an-texto); } :root:has(> body[data-theme="claro"]) { color-scheme: light; } /* Login (composição Centrada): o símbolo plano em Capa, o título, os campos direto no papel, o botão na largura da coluna */ .an-entrada-cliente { min-height: 100vh; display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 72px 20px 32px; } .an-entrada-cliente__coluna { width: min(420px, 100%); display: grid; justify-items: center; align-content: center; gap: 0; text-align: center; } .an-entrada-cliente__coluna .an-simbolo { width: 72px; height: 72px; margin-bottom: 28px; } .an-entrada-cliente__coluna .an-subtitulo { margin-top: 8px; } .an-entrada-cliente__campos { width: 100%; display: grid; gap: 20px; margin-top: 32px; text-align: left; } .an-entrada-cliente__campos .an-botao { width: 100%; margin-top: 6px; } .an-entrada-cliente__pe { margin: 0; font: italic 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); text-align: center; } /* Grades de colunas que fecham certo (nada de colunas automáticas): 2 e 3 viram uma coluna no celular; 4 vira 2 × 2 */ .an-grade { display: grid; gap: 16px; } .an-grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .an-grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .an-grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 760px) { .an-grade--2, .an-grade--3 { grid-template-columns: minmax(0, 1fr); } .an-grade--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Login e formulário em tela inteira: tamanhos próprios do título e o pé da página */ .an-entrada-cliente__coluna .an-titulo { font-size: 34px; line-height: 40px; } @media (max-width: 760px) { .an-entrada-cliente__coluna .an-titulo { font-size: 28px; line-height: 34px; } .an-entrada-cliente { padding-top: 48px; } } .an-entrada-cliente__campos .an-link { justify-self: center; } .an-etapas-tela__coluna { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; min-height: 100vh; } /* Cada parte na sua linha: no computador a barra do celular some, e sem a posição explícita o pé caía na linha que estica (o fio do pé no meio da tela e o texto boiando numa faixa alta). A pergunta fica no centro; o pé, embaixo e baixo. */ .an-etapas-tela__coluna > .an-etapas-barra { grid-row: 1; } .an-etapas-tela__coluna > .an-etapas-tela__principal { grid-row: 2; } .an-etapas-tela__coluna > .an-etapas-tela__pe { grid-row: 3; } .an-etapas-tela__pe { display: flex; justify-content: space-between; align-items: center; gap: 0 16px; flex-wrap: wrap; padding: 6px clamp(24px, 5vw, 80px) 10px; border-top: 1px solid var(--an-linha); font: 400 14px/20px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-etapas-tela__pe a { color: inherit; text-decoration: underline; text-underline-offset: 0.28em; text-decoration-thickness: 1px; } .an-resultado-tela { display: grid; gap: 32px; width: min(860px, 100%); } .an-resultado-tela__cabeca { display: grid; gap: 12px; } .an-assinatura-pessoa { display: grid; gap: 2px; } .an-assinatura-pessoa b { font: italic 400 18px/26px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto); } .an-assinatura-pessoa span { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } .an-trilho__etapas li[data-feita]::before { opacity: 1; } .an-pasta .an-carregando path { fill: var(--an-algodao); } /* No escuro (só área do cliente), o botão de perigo é contorno: a ação destrutiva nunca é a mancha mais forte da tela */ [data-theme="escuro"] .an-botao--perigo, .dark .an-botao--perigo { background: transparent; border-color: var(--an-critico); color: var(--an-critico); } /* Só o bloco de texto do pé quebra balanceado; os trechos sem quebra lá dentro (o nome do escritório, a OAB) continuam inteiros: "text-wrap" num seletor de span pegava também eles e anulava o "white-space: nowrap" (o text-wrap é atalho do text-wrap-mode, que o white-space também define). */ .an-etapas-tela__pe > span { text-wrap: balance; } /* Peça clara dentro de uma tela escura (prévia, área do cliente mostrando um bloco do formulário): o respiro de um cartão */ [data-theme="escuro"] .an-etapas[data-theme="claro"], .dark .an-etapas[data-theme="claro"] { padding: var(--an-espaco-5); border-radius: var(--an-raio-lg); } /* ---------- Correções da auditoria 1 (07/10/2026): escala, alvo, painel no celular, número de apoio ---------- */ /* Modal: o de confirmação em corpo-sm (16 px); o de leitura (política de dados, ajuda) em corpo (18 px), porque é texto corrido */ .an-modal__titulo { font: 500 21px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; } .an-modal__texto { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; } .an-modal--leitura .an-modal__texto { font-size: 18px; line-height: 28px; } @media (max-width: 480px) { .an-modal { padding: 20px; } } /* Palavra que não pode quebrar no hífen ("e-mail") nem no espaço */ .an-sem-quebra { white-space: nowrap; } /* Painel: a barra do celular leva a assinatura (26 px de altura, acima do mínimo de 157 px de largura) e o botão de menu */ .an-app__barra .an-assinatura { height: 26px; } .an-app > .an-nav { width: 268px; } .an-app__conteudo { padding: 40px 48px 56px; gap: 28px; } @media (max-width: 1023px) { .an-app__conteudo { padding: 24px 16px 40px; gap: 24px; } } .an-indicadores .an-indicador__valor { font-size: 36px; line-height: 42px; } .an-funil__cartao { padding: 14px; display: grid; gap: 6px; } .an-funil__cartao b { font: 500 16px/22px 'Literata', Georgia, 'Times New Roman', serif; } /* Número de apoio no resultado (a ilustração dos últimos 5 anos): rótulo em itálico que diz o que é, número menor que o resultado e sem o fio Palha, que é só do resultado. A ressalva do bloco cobre os dois números. */ .an-resultado__apoio { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--an-linha); } .an-resultado__apoio .an-rotulo { font-style: italic; } .an-resultado__apoio-valor { margin: 0; font: 500 30px/36px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.015em; font-variant-numeric: tabular-nums lining-nums; color: var(--an-texto); white-space: nowrap; } .an-resultado__apoio-nota { font: 400 16px/24px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); } /* Funil: o cabeçalho de toda coluna tem a mesma altura (nome de estágio em duas linhas não desalinha o primeiro cartão) */ .an-funil__cabeca { align-items: flex-start; min-height: 52px; } .an-resultado__apoio-nota { text-wrap: pretty; } /* ---------- Correções da auditoria 2 (07/10/2026) ---------- */ /* A chamada depois do resultado do formulário: sem cartão e sem borda (cartão só agrupa, e ali não há grupo); um fio em cima a separa, como o resto da página. Título em titulo-3. */ .an-resultado-tela__chamada { display: grid; gap: 16px; justify-items: start; padding-top: 28px; border-top: 1px solid var(--an-linha); } .an-resultado-tela__chamada h2 { margin: 0; font: 500 21px/28px 'Literata', Georgia, 'Times New Roman', serif; letter-spacing: -0.005em; color: var(--an-texto); text-wrap: balance; } .an-resultado-tela__chamada p { margin: 0; font: 400 18px/28px 'Literata', Georgia, 'Times New Roman', serif; color: var(--an-texto-2); max-width: 60ch; text-wrap: pretty; } /* Tela que segue o tema do aparelho (data-theme="aparelho"): os mesmos ajustes do tema escuro, quando o aparelho está no escuro */ @media (prefers-color-scheme: dark) { [data-theme="aparelho"] .an-botao--perigo, .an-botao--perigo[data-theme="aparelho"] { color: var(--an-fundo); } [data-theme="aparelho"] .an-interruptor input::after { background: var(--an-texto); } [data-theme="aparelho"] .an-interruptor input:checked::after { background: var(--an-fundo); } [data-theme="aparelho"] .an-veu { background: rgba(0,0,0,.6); } [data-theme="aparelho"] .an-botao--perigo { background: transparent; border-color: var(--an-critico); color: var(--an-critico); } [data-theme="aparelho"] .an-etapas[data-theme="claro"] { padding: var(--an-espaco-5); border-radius: var(--an-raio-lg); } }