/* MEDIDA DE LEITURA EM px, NAO EM ch `ch` e a largura do caractere "0" da fonte ATUAL. Medido em producao: 72ch valia 621px com o fallback e 702,72px com a Manrope — 82px de diferenca. Quando a fonte trocava (display=swap), todo bloco com medida em ch mudava de largura e o texto refluia: CLS de 0,02 a 0,06 em laptop, desktop e wide. Os valores em px abaixo sao os equivalentes COM a fonte real aplicada, entao a medida de leitura e a mesma — sem depender de qual fonte esta carregada. */ /* ========================================================================== POLTERS — Correções da revisão do cliente -------------------------------------------------------------------------- Carregado DEPOIS de landing.css e guia.css, então vence por ordem em vez de por especificidade inflada. Cada bloco resolve um item da lista do cliente, e o comentário diz qual. ========================================================================== */ /* ========================================================================== [ITEM 2] TIPOGRAFIA "as fontes estão péssimas" As famílias ficam (Oswald + Manrope). O problema não era a escolha, era o uso: tracking de 0.11em no wordmark abria as letras da condensada até parecerem soltas, os títulos vinham sem controle de altura de linha, e o corpo rodava com line-height de 1.65 em coluna larga. ========================================================================== */ /* Oswald é condensada: as hastes já ficam próximas por desenho. Somar tracking nela é o erro clássico — as letras deixam de formar palavra e viram fileira de glifos. Tracking negativo em display, mínimo em texto. */ h1, h2, h3, h4, .hero__title, .section-title, .bible-cta__title, .pillar__title, .recruit__sub, .footer__brand-line, .class-card__name { letter-spacing: -0.018em; /* balance quebra o título em linhas de largura parecida, em vez de deixar uma linha cheia e uma com duas palavras */ text-wrap: balance; } /* O wordmark do hero é o maior elemento da página: precisa de tracking ainda mais fechado, ou as letras nadam. */ .hero__title { letter-spacing: -0.032em; line-height: 0.88; /* Peso 700 na Oswald em 88px fica pesado demais; 600 mantém autoridade com menos massa. */ font-weight: 600; } /* Corpo: 1.65 de altura de linha é para coluna estreita. Em 62-72ch o olho perde a linha de volta. 1.58 com medida controlada lê melhor. */ body { line-height: 1.58; } p { line-height: 1.62; } /* Caixa alta com tracking somado é ruído duplo. Os rótulos ficam em caixa alta (são placas), mas com tracking discreto. */ .section-tag, .hero__meta, .footer__col-title { letter-spacing: 0.045em; } /* Botão: Oswald em caixa alta com 0.045em era o único lugar em que o tracking ajudava (texto curto, centralizado). Mantido, mas o peso sobe para 600 para o botão ter presença sem crescer. */ .btn { letter-spacing: 0.05em; font-weight: 600; } /* ========================================================================== [ITEM 9] LOGO QUASE INVISÍVEL "a logo ali no canto sup esquerdo quase não dá pra ver" A arte tem o roxo da marca sobre fundo preto: no header, que também é preto, ela desaparece. Três medidas somadas resolvem sem trocar a arte: 1. tamanho: 30px é pequeno para um wordmark de 7 letras em 2,5:1 2. brilho: a arte vem escura por natureza 3. um halo sutil para separar do fundo ========================================================================== */ .logo__img { /* 38px em vez de 30: com razão 2,5:1 a largura vai a 95px, que é o mínimo para as sete letras se distinguirem no header. */ height: 38px; /* Levanta a luminância da arte e satura o roxo. A arte foi feita para fundo claro de apresentação, não para header preto. */ filter: brightness(1.28) saturate(1.15) drop-shadow(0 0 14px rgba(139, 92, 246, 0.34)); transition: filter var(--t) var(--ease), height var(--t-slow) var(--ease-quart); } .logo:hover .logo__img, .logo:focus-visible .logo__img { filter: brightness(1.5) saturate(1.25) drop-shadow(0 0 20px rgba(167, 139, 250, 0.5)); } /* ========================================================================== LOGO COM ALTURA FIXA — o wordmark nao encolhe mais no scroll -------------------------------------------------------------------------- "a logo no hero eh de um tamanho, voce scrolla fica outro" O header ganhava .is-scrolled a 12px de rolagem e a logo caia de 38 para 32px (34 -> 30 no celular), animando em 240ms. Doze pixels de scroll e o wordmark perdia 16% do tamanho, visivelmente em transito. Havia CINCO regras fazendo isso, em dois arquivos com valores diferentes (26/30/23px no landing.css, 32/30px aqui). Como o fix.css carrega depois, valiam as daqui. Todas removidas. .is-scrolled continua existindo e ainda muda o FUNDO para mais opaco, alem da sombra do anim.css. O que separa a faixa do conteudo que passa por baixo e o contraste, nao a dimensao. A altura tambem esta no CSS critico inline dos DOIS HTML, agora com o mesmo 38px — antes o critico dizia 30 e este arquivo 38, entao a logo NASCIA pequena e crescia quando o CSS completo chegava. ========================================================================== */ @media (max-width: 560px) { .logo__img { height: 34px; } } /* ========================================================================== [ITENS 3 e 4] CRONÔMETRO "temporizador ruim, sem animação, tudo muito fraco" "não podia ser melhor formatado pra encaixar tudo em duas linhas" Era uma fileira de 4 números soltos com rótulos minúsculos embaixo e uma barrinha perdida sob os segundos. Nada indicava contagem além do dígito trocando. Agora: cada unidade é uma célula com superfície própria, os dígitos rolam de verdade na troca, e os segundos têm anel de progresso do minuto. No celular vira grade 2x2 — o que o cliente pediu com "encaixar em duas linhas". ========================================================================== */ .hero-cd { /* Superfície própria: o cronômetro é um bloco de informação, não texto solto sobre a arte. */ background: linear-gradient(160deg, rgba(20, 16, 34, 0.86) 0%, rgba(10, 8, 18, 0.78) 100%); border-radius: var(--radius); padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(196, 181, 253, 0.13); width: fit-content; max-width: 100%; } .hero-cd__label { display: flex; align-items: center; gap: 9px; font-size: var(--fs-micro); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-soft); margin-bottom: 14px; } /* Ponto pulsando: sinaliza "contando agora" sem texto extra */ .hero-cd__label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6); animation: cd-pulso 2.2s var(--ease) infinite; } @keyframes cd-pulso { 0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); } 70% { box-shadow: 0 0 0 9px rgba(52, 211, 153, 0); } 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); } } .hero-cd__label time { color: var(--lilac); font-weight: 700; } /* Grade: 4 colunas com separador entre elas. gap maior para os números não colarem, e alinhamento pelo topo do dígito. */ .hero-cd__grid { display: grid; grid-template-columns: repeat(4, minmax(52px, 1fr)); gap: 0; } .cd-unit { position: relative; padding: 0 clamp(10px, 1.6vw, 18px); text-align: center; } /* Separador por tom, não por régua de 1px (banida no projeto) */ .cd-unit + .cd-unit::before { content: ''; position: absolute; left: 0; top: 12%; bottom: 30%; width: 2px; border-radius: 1px; background: linear-gradient(to bottom, transparent, rgba(196, 181, 253, 0.2), transparent); } /* O dígito ROLA de verdade. A caixa tem 1em de altura e esconde o excedente; o JS empilha valor atual e próximo e desliza a coluna. */ .cd-unit__roll { display: block; height: 1em; overflow: hidden; font-family: var(--font-display); font-size: clamp(2.1rem, 5.4vw, 3rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; /* tabular-nums é obrigatório aqui: sem ele "11" e "00" têm larguras diferentes e a coluna dança a cada segundo */ } .cd-unit__cur, .cd-unit__next { display: block; height: 1em; line-height: 1; } /* A rolagem: a coluna sobe 1em, o próximo valor assume, e a posição volta ao zero sem transição (o JS troca o texto nesse instante). */ .cd-unit__roll.is-rolling { transform: translateY(-1em); transition: transform 0.42s var(--a-quint); } .cd-unit__label { display: block; margin-top: 8px; font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); } /* Anel de progresso do minuto em volta dos segundos: é o elemento que faz o bloco parecer cronômetro, e não quatro números. */ .cd-unit--sec { --sec-frac: 0; } .cd-unit--sec .cd-unit__roll { color: var(--lilac); } .cd-unit--sec::after { content: ''; position: absolute; left: 50%; /* colada no trilho */ bottom: 0; width: clamp(30px, 4vw, 42px); height: 3px; border-radius: 2px; transform: translateX(-50%) scaleX(var(--sec-frac)); transform-origin: left center; background: linear-gradient(90deg, var(--violet), var(--lilac)); /* 1s linear: acompanha o segundo em tempo real, sem easing (easing num relógio faz o tempo parecer irregular) */ transition: transform 1s linear; } /* --- CELULAR: grade 2x2, que é o "encaixar em duas linhas" pedido --- */ @media (max-width: 620px) { .hero-cd { width: 100%; padding: 16px 18px 18px; } .hero-cd__grid { grid-template-columns: 1fr 1fr; gap: 14px 0; } /* Com 2 colunas o separador só faz sentido entre a 1ª e a 2ª de cada linha */ .cd-unit + .cd-unit::before { display: none; } .cd-unit:nth-child(even)::before { content: ''; position: absolute; left: 0; top: 14%; bottom: 26%; width: 2px; border-radius: 1px; background: linear-gradient(to bottom, transparent, rgba(196, 181, 253, 0.18), transparent); } .cd-unit__roll { font-size: 2.4rem; } /* colada no trilho tambem no celular */ .cd-unit--sec::after { bottom: 0; } } @media (prefers-reduced-motion: reduce) { .hero-cd__label::before { animation: none; } .cd-unit__roll.is-rolling { transition: none; } .cd-unit--sec::after { transition: none; } } /* ========================================================================== [ITEM 10] BOTÕES SEM PADRÃO NO MOBILE "os botões não têm padrão algum, cada um num canto, tudo mal formatado" O diagnóstico do cliente estava certo: cada seção resolvia seus botões por conta. Uns viravam largura total, outros ficavam centralizados, outros alinhados à esquerda, e as alturas variavam entre 44 e 50px. Regra única agora: no celular, todo grupo de ação é uma coluna de largura total, com a mesma altura e o mesmo espaçamento. Sem exceção. ========================================================================== */ @media (max-width: 620px) { .hero__actions, .footer__actions, .recruit__cta, .final-cta__actions, /* Altura idêntica em todos, e o texto centralizado dentro dela */ .hero__actions .btn, .footer__actions .btn, .recruit__cta .btn, .final-cta .btn, .bible-cta .btn { width: 100%; min-height: 52px; justify-content: center; padding-inline: 20px; } /* Seções centralizadas mantêm o botão centralizado; as alinhadas à esquerda mantêm o botão à esquerda. O que não pode é variar dentro da mesma seção. */ .final-cta .btn, .bible-cta .btn { margin-inline: auto; max-width: 420px; } } /* ========================================================================== [ITEM 8] HERO NO CELULAR "ficou meio estranho o site chegando ao final, o texto na frente da imagem" Duas coisas: o texto caía sobre a parte clara da arte, e o hero terminava com um vão escuro que fazia parecer fim de página. O véu agora tem um degrau a mais no meio (onde o texto começa) e resolve na cor da seção seguinte, sem corte visível. ========================================================================== */ @media (max-width: 620px) { .hero { /* svh em vez de vh: a barra de endereço do navegador não muda a altura */ min-height: auto; padding-bottom: 44px; } .hero__veil { background: /* topo: deixa a arte respirar */ linear-gradient(to bottom, rgba(5, 5, 10, 0.30) 0%, rgba(5, 5, 10, 0.08) 14%, /* meio: começa a proteger onde o texto entra */ rgba(5, 5, 10, 0.66) 38%, rgba(5, 5, 10, 0.88) 52%, rgba(5, 5, 10, 0.96) 68%, #06060c 84%), /* resolve na cor da seção seguinte: sem costura dura */ linear-gradient(to top, var(--bg-alt) 0%, transparent 12%); } /* Um halo local atrás do bloco de texto: garante contraste mesmo onde a arte é clara, sem precisar escurecer a imagem inteira. */ .hero__inner::before { content: ''; position: absolute; inset: -18px -22px -10px -22px; z-index: -1; border-radius: 20px; background: radial-gradient(120% 90% at 30% 42%, rgba(5, 5, 10, 0.62) 0%, rgba(5, 5, 10, 0.34) 52%, transparent 78%); pointer-events: none; } .hero__inner { position: relative; } } /* ========================================================================== [ITENS 5 e 11] RODAPÉ "esse rodapé ficou estranho, principalmente esse botão do Bíblia do AION 2" "no celular o rodapé consegue ser pior ainda" O problema: o rodapé da landing tinha DUAS colunas, uma com a marca e outra com um único botão fantasma flutuando à direita. No celular as duas empilhavam e o botão sobrava no meio do nada. Um botão sozinho não justifica uma coluna. Ele vira um bloco de navegação com colunas de verdade, igual ao rodapé do guia — o que também resolve o item 6 (as duas páginas com o mesmo rodapé). ========================================================================== */ .footer { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(24px, 3vw, 34px); background: linear-gradient(to bottom, var(--bg-alt) 0%, #05050a 100%); } .footer__top { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(120px, 0.9fr)); gap: clamp(24px, 3vw, 48px); align-items: start; margin-bottom: clamp(28px, 3.4vw, 44px); } .footer__brand-line { font-family: var(--font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin-bottom: 10px; } .footer__tagline { color: var(--text-soft); font-size: var(--fs-ui); max-width: 312px; } .footer__col-title { font-family: var(--font-body); font-size: var(--fs-micro); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } /* A coluna de um botão só sai de cena: o link do guia entra na lista */ .footer__bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: clamp(18px, 2.2vw, 26px); font-size: var(--fs-micro); color: var(--text-dim); /* Separação por tom, não por régua */ background: linear-gradient(to bottom, rgba(196, 181, 253, 0.07) 0px, rgba(196, 181, 253, 0.07) 2px, transparent 2px); } .footer__bottom a { color: var(--text-soft); } .footer__bottom a:hover { color: var(--lilac); } /* --- CELULAR: acordeão de colunas, não pilha de listas --- */ @media (max-width: 700px) { .footer__top { grid-template-columns: 1fr; gap: 26px; } .footer__tagline { max-width: none; } /* As três colunas de link viram uma grade 2x2 compacta: no celular, três listas empilhadas viram 400px de rodapé que ninguém rola até o fim. */ .footer__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 18px; } .footer__bottom { flex-direction: column; align-items: flex-start; gap: 2px; } /* O separador "·" entre itens não faz sentido em coluna */ .footer__bottom > * + *::before { content: none; margin: 0; } } /* ========================================================================== [ITEM 6] GUIA PARECE OUTRO SITE "se eu clicar em guia AION 2 parece outro site, muda as fontes, tamanhos dos botões" Decidido com o cliente: unificar o CASCO (header, botões, fontes, rodapé, transição) e manter o CORPO do texto sóbrio, porque ali a prioridade é ler. O que estava diferente e passa a ser igual: ========================================================================== */ /* O guia abria com .is-scrolled fixo no header — então o wordmark já entrava encolhido e a faixa mais baixa que na landing. Some: o JS controla isso. */ .docs .header, body:has(.docs) .header { height: var(--header-h); } /* Título do hero do guia: mesma escala do .section-title da landing */ .docs-hero__title { font-size: clamp(1.85rem, 4vw, 2.65rem); letter-spacing: -0.018em; } .docs-hero__text { font-size: var(--fs-body); color: var(--text-soft); max-width: 644px; } /* Botões do guia: exatamente os mesmos tokens da landing */ .docs .btn, .docs-bar__btn { font-family: var(--font-display); font-size: var(--fs-ui); font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; min-height: 46px; } /* Corpo do capítulo continua sóbrio: 1.01rem/1.72 e 72ch é medida de leitura, e mexer nisso pioraria o que o briefing chama de prioridade. */ /* ========================================================================== BOXES E CARDS — o "boxes" que o cliente pediu na animação Hover que responde, sem card-lift genérico (translateY + sombra + borda). ========================================================================== */ .class-card, .pillar, .info-card, .spec { transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--a-quint); } .class-card:hover, .info-card:hover { background: var(--surface-2); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(196, 181, 253, 0.1); /* 3px: o suficiente para responder, longe do "card levantando" */ transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .class-card:hover, .info-card:hover { transform: none; } } /* ========================================================================== ALVO DE TOQUE DA NAV — efeito colateral da correção de tipografia Ao baixar o line-height do corpo de 1.65 para 1.58, os links da nav perderam 1px de altura: 44 → 43. Um pixel abaixo do mínimo da WCAG 2.5.8 ainda é reprovação, e é o tipo de regressão que passa desapercebida porque "parece igual". O padding cresce; o texto não muda de tamanho. ========================================================================== */ .nav__link { display: inline-flex; align-items: center; min-height: 44px; } /* Mesmo cuidado nos links do drawer mobile, que herdam do mesmo bloco */ .mobile-nav a { display: flex; align-items: center; min-height: 48px; } /* ========================================================================== REGRESSÕES DA PRÓPRIA CORREÇÃO — medidas, não estimadas Três coisas quebraram por efeito colateral do que eu mudei acima. Registro a causa junto com a correção, porque as três são do mesmo tipo: mexer numa métrica global (line-height, padding de bloco) reverbera em lugares que não estavam em questão. ========================================================================== */ /* --- 1. Índice do guia com 43px (mesma causa da nav) --- O line-height do corpo caiu de 1.65 para 1.58 e levou os links de capítulo de 44 para 43px. Um pixel abaixo do mínimo ainda reprova. */ .docs-nav__chapter > a { min-height: 44px; align-items: center; } /* --- 2. Cronômetro voltou a passar da primeira dobra no celular --- O bloco novo tem superfície própria, ponto pulsando, separadores e grade 2x2: passou de 134px para 222px de altura. Medido no iPhone 14, o cronômetro terminava em 909px contra 892 de viewport — 17px fora. O áudio 6 do cliente pede o cronômetro visível de entrada, então quem cede é o espaço em volta, não o cronômetro. Três folgas, na ordem em que menos custam: o padding do hero, o do bloco de texto, e a margem acima da faixa. */ @media (max-width: 620px) { .hero { padding-top: calc(var(--header-h) + 14px); padding-bottom: 30px; } .hero__inner { padding-top: clamp(14px, 2.6vh, 40px); min-height: 0; } .hero-cd { margin-top: 14px; } /* A grade 2x2 já economiza altura; o gap entre as linhas pode ser menor porque cada célula tem rótulo próprio delimitando. */ .hero-cd__grid { gap: 10px 0; } .cd-unit__roll { font-size: 2.2rem; } .cd-unit__label { margin-top: 5px; } .hero-cd__label { margin-bottom: 10px; } } /* Tela curta (iPhone SE e paisagem de aparelho baixo): a consulta é por ALTURA, porque o gargalo é vertical e apareceria mesmo numa tela larga. */ @media (max-width: 620px) and (max-height: 760px) { .hero__title { font-size: clamp(2.2rem, 11.5vw, 3rem); } .hero__meta { margin-bottom: 12px; } .hero__text { margin-bottom: 16px; } .hero__actions { gap: 8px; } .hero-cd { padding: 12px 16px 14px; } .cd-unit__roll { font-size: 2rem; } } /* --- 3. Nota sobre o "overflow" de 23px no celular --- Medido: `document.scrollWidth` marca 413 contra 390 de viewport, mas rolar de lado devolve 0 — o usuário não consegue arrastar. É o `overflow-x: hidden` do body virando contexto de scroll e propagando o valor para o html. Já tentei `overflow-x: clip` no html numa rodada anterior: zerou o número e ADICIONOU 0,047 de CLS. Fica como está; o que precisa mudar é o teste, que deve medir scroll real em vez de comparar scrollWidth. */ /* ========================================================================== REVISAO 2 DO CLIENTE ========================================================================== */ /* -------------------------------------------------------------------------- [7] BARRA DO SEGUNDO — parecia elemento orfao No print do cliente a barrinha roxa flutua 4px abaixo de "SEG", sem ligacao com nada. Encostada no rotulo e com trilho de fundo ela le como progresso do minuto, que e o que ela mede. -------------------------------------------------------------------------- */ .cd-unit--sec { /* o trilho: mostra o percurso completo, para a barra ter contra o que crescer */ padding-bottom: 6px; } .cd-unit--sec::before { content: ''; position: absolute; left: 50%; bottom: 0; width: clamp(30px, 4vw, 42px); height: 3px; border-radius: 2px; transform: translateX(-50%); background: rgba(139, 92, 246, 0.18); /* nao vira separador de celula: aquele usa left:0 e altura cheia */ top: auto; } /* -------------------------------------------------------------------------- [5] CELULAR: titulo de secao com duas linhas se tocando "Cell ficou meio esquisito" — no print o h2 "Uma guilda feita para quem quer ir alem" aparece como se estivesse duplicado. Nao esta: sao duas linhas com line-height apertado o suficiente para os glifos se encostarem, e o text-shadow do hero por tras aumenta a confusao. -------------------------------------------------------------------------- */ /* MEDIDO: line-height 1,06 dava caixa de 31,4px enquanto o glifo desenhado ocupava 41,0px — cada linha invadia 9,6px da vizinha, e era isso que aparecia como "texto sobreposto" no print do celular. 1.2 e escolhido para o PIOR caso: no primeiro instante a fonte e o fallback ('Arial Narrow' / sistema), cujas metricas sao mais altas que as da Oswald. Em caixa alta condensada 1.2 nao abre vao visivel, porque MAIUSCULAS nao tem descendentes. SEM media query de proposito: o transbordo acontecia em 360, 390 e 428px, e qualquer breakpoint deixaria algum aparelho de fora. */ .section-title, .bible-cta__title, .docs-hero__title, .pillar__title, .class-card__name { line-height: 1.2; } @media (max-width: 560px) { .section-title, .bible-cta__title, .docs-hero__title { /* respiro proprio: o titulo nao pode encostar no bloco anterior */ margin-bottom: 14px; } /* Os dois botoes do hero tinham larguras diferentes no print. Coluna de largura total, mesma altura, mesma regra — foi o que o cliente pediu em "os botoes nao tem padrao algum". */ .hero__actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; } .hero__actions > .btn, .hero__actions > a { width: 100%; min-height: 52px; display: inline-flex; align-items: center; justify-content: center; text-align: center; } } /* -------------------------------------------------------------------------- [T2] Item "Mapa" — link externo na navegacao O icone de seta saindo da caixa avisa que o item leva para fora do site, sem precisar de texto extra. width e height DECLARADOS: SVG sem largura e a causa mais recorrente de CLS neste projeto (ver o caso da .docs-bar no PROJETO.md). -------------------------------------------------------------------------- */ .nav__ext { width: 13px; height: 13px; margin-left: 5px; /* alinha com a altura de x da fonte, nao com a linha de base */ vertical-align: -1px; opacity: 0.62; flex: none; transition: opacity var(--t) var(--ease); } .nav__link:hover .nav__ext, .nav__link:focus-visible .nav__ext { opacity: 1; } /* No drawer mobile os itens sao flex: o icone vai para a direita do texto */ .mobile-nav a[data-nav-externo] { display: flex; align-items: center; } .mobile-nav a[data-nav-externo] .nav__ext { width: 15px; height: 15px; margin-left: 7px; } /* -------------------------------------------------------------------------- [T3] LISTA DE CAPITULOS NA LANDING Os itens viraram links (antes eram texto solto, o que desperdicava a lista como caminho de entrada para o guia). Mas link e alvo de toque: media 298x26 e o projeto exige 44px minimo — a auditoria acusou em 8 viewports. O passa a ser bloco com 44px e ganha estado de hover: um link que nao parece link e pior que texto sem link. -------------------------------------------------------------------------- */ .chapter-list a { display: flex; align-items: center; gap: 10px; /* largura da coluna, nao do texto: no tablet a lista vira duas colunas e itens de texto curto ("04 Skills") encolhiam para 88px, deixando o hover irregular entre os itens. */ width: 100%; /* 44px: alvo de toque minimo do projeto */ min-height: 44px; padding: 4px 10px; margin: 0 -10px; border-radius: 8px; color: inherit; text-decoration: none; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); } .chapter-list a:hover, .chapter-list a:focus-visible { color: var(--text); background: rgba(139, 92, 246, 0.1); } /* o numero ja tem peso proprio; no hover ele acompanha */ .chapter-list a:hover b, .chapter-list a:focus-visible b { color: var(--lilac); } /* O ultimo item nao e um capitulo, e a porta para o resto: recebe tom proprio para nao parecer o capitulo 6. */ .chapter-list__more a { color: var(--text-soft); } .chapter-list__more a:hover, .chapter-list__more a:focus-visible { color: var(--lilac); } /* RESERVA DE LARGURA DA NAV — evita CLS na troca de fonte Medido em producao no guia: a