/* ========================================================================= Protocolos de Peptídeos — sistema visual Escuro, editorial, com acento de cobre (referência ao GHK-Cu). ========================================================================= */ /* As fontes não vêm mais do Google. Duas mudanças em 05/09/2026, nesta ordem: 1. O @import daqui saiu. Ele serializava: o navegador precisava baixar e parsear esta folha inteira antes de descobrir que havia fonte para buscar. Medido no ar: estilo.css terminava em 271ms e o CSS das fontes só começava em 272ms. 2. As fontes passaram a morar no repositório, em assets/fontes/. Os blocos @font-face estão em assets/fontes-gerado.css, escrito por build/baixa_fontes.py, e o de build/gerar.py faz preload dos dois arquivos latin que aparecem acima da dobra. Fraunces, Inter e JetBrains Mono são OFL 1.1. As três licenças estão em assets/fontes/, verbatim, como a OFL exige de quem redistribui. */ :root { color-scheme: dark; /* superfícies */ --tinta: #08090B; --fundo: #0B0D11; --superficie: #111419; --superficie-2: #161A21; --superficie-3: #1D222B; --linha: #232833; --linha-forte: #2F3643; /* texto */ --texto: #E8EAED; --texto-suave: #A8B0BC; /* Era #6E7684. Medido em 05/09/2026 sobre os três fundos em que ele cai: 4,25 sobre --fundo, 4,03 sobre --superficie, 4,35 sobre --tinta. Os três reprovam no mínimo AA de 4,5:1, e o token carrega justamente o texto que não pode falhar: os 19 cabeçalhos de tabela de dose e a linha "Não é aconselhamento médico". #7D8593 sobe o pior caso para 4,97 e mantém a distância para --texto-suave (8,89), que é o que sustenta a hierarquia. */ --texto-fraco: #7D8593; /* acentos */ --cobre: #D08A4A; --cobre-claro: #E8A972; --cobre-fundo: rgba(208, 138, 74, 0.10); --cobre-borda: rgba(208, 138, 74, 0.28); --alerta: #E5674B; --alerta-fundo: rgba(229, 103, 75, 0.10); --alerta-borda: rgba(229, 103, 75, 0.30); --ok: #4FB08A; --ok-fundo: rgba(79, 176, 138, 0.10); --ok-borda: rgba(79, 176, 138, 0.28); --atencao: #D9B44A; --atencao-fundo:rgba(217, 180, 74, 0.10); /* Procedência. É a distinção que sustenta o site inteiro: número aferido em fonte primária contra número transportado de fonte secundária. O tom é frio e de baixa saturação de propósito — leitura de instrumento, não destaque. Verde diria "aprovado", que é outra coisa. */ --aferido: #B8C9DC; --aferido-rasa: rgba(184, 201, 220, 0.55); /* tipografia */ --display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif; --corpo: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* métrica */ /* Era 1180px. Medido em 04/09/2026: a coluna de artigo ficava com 848px e a maior tabela do site pedia 1051px, rolando 203px escondidos. Com 1440 a coluna vai a 1108px e nenhuma tabela precisa rolar. Subir a largura só é seguro porque o texto corrido tem medida própria (68ch): sem ela, a prosa iria junto e a leitura pioraria. */ --largura: 1440px; --raio: 14px; --raio-sm: 9px; } * { box-sizing: border-box; } /* A Fraunces é variável no eixo óptico. Sem isto o navegador usa o mesmo desenho em 12px e em 44px, e a fonte perde justamente o que ela tem. */ h1, h2, h3, .display { font-optical-sizing: auto; } /* Um site feito de 389 tabelas de dose não pode ter algarismo proporcional: as colunas de número deixam de alinhar. Tabular em tudo que é número. */ table, .numero b, .selo, .fato-valor, code, .mono { font-variant-numeric: tabular-nums; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--corpo); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* brilho sutil no topo, dá profundidade sem custar imagem */ body::before { content: ''; position: fixed; inset: 0 0 auto 0; height: 520px; background: radial-gradient(900px 380px at 18% -8%, rgba(208, 138, 74, 0.10), transparent 62%), radial-gradient(700px 320px at 88% -14%, rgba(79, 128, 176, 0.08), transparent 60%); pointer-events: none; z-index: 0; } .env { position: relative; z-index: 1; } a { color: var(--cobre-claro); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------ skip */ .pular { position: absolute; left: -9999px; top: 0; background: var(--cobre); color: #14100C; padding: 10px 18px; border-radius: 0 0 var(--raio-sm) 0; font-weight: 600; z-index: 999; } .pular:focus { left: 0; } /* ---------------------------------------------------------------- header */ .cabecalho { position: sticky; top: 0; z-index: 50; background: rgba(11, 13, 17, 0.86); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--linha); } .cabecalho-in { max-width: var(--largura); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 28px; } .marca { display: flex; align-items: center; gap: 11px; font-family: var(--display); font-size: 19px; font-weight: 600; color: var(--texto); letter-spacing: -0.01em; white-space: nowrap; } .marca:hover { text-decoration: none; } .marca-icone { width: 30px; height: 30px; border-radius: 8px; background: linear-gradient(140deg, var(--cobre), #8E5A2E); display: grid; place-items: center; font-family: var(--corpo); font-size: 14px; font-weight: 700; color: #16100A; box-shadow: 0 0 0 1px var(--cobre-borda), 0 4px 14px rgba(208, 138, 74, 0.18); } .nav { display: flex; gap: 22px; margin-left: auto; font-size: 14.5px; } .nav a { color: var(--texto-suave); font-weight: 500; } .nav a:hover, .nav a[aria-current="page"] { color: var(--cobre-claro); text-decoration: none; } /* Seletor de idioma: seis códigos de duas letras, ao lado da navegação. O código, e não o endônimo por extenso, porque cabe no cabeçalho de 390px sem virar segunda linha nem menu. */ .idiomas { display: flex; gap: 9px; font-size: 12px; letter-spacing: 0.06em; font-weight: 600; } .idiomas a { color: var(--texto-fraco); padding: 3px 5px; border-radius: 6px; border: 1px solid transparent; line-height: 1; } .idiomas a:hover { color: var(--texto); text-decoration: none; } .idiomas a[aria-current="true"] { color: var(--cobre-claro); border-color: var(--cobre-borda); background: var(--cobre-fundo); } /* Aviso das versões traduzidas, entre o cabeçalho e o conteúdo. */ .nota-traducao { margin: 0; padding: 9px 24px; font-size: 13px; line-height: 1.5; text-align: center; color: var(--texto-suave); background: var(--superficie); border-bottom: 1px solid var(--linha); } .nota-traducao a { color: var(--cobre-claro); } /* Japonês: as duas famílias latinas continuam nos números e nas siglas; o que muda é a substituta para os ideogramas, que fica sem serifa. */ :lang(ja) { --display: 'Fraunces', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; --corpo: 'Inter', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; } /* ---------------------------------------------------------------- layout */ .env-largo { max-width: var(--largura); margin: 0 auto; padding: 0 24px; } .pagina { max-width: var(--largura); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 52px; align-items: start; } .trilha { position: sticky; top: 92px; padding: 42px 0; } .trilha-titulo { font-size: 11px; text-transform: uppercase; letter-spacing: 0.13em; color: var(--texto-fraco); font-weight: 700; margin: 0 0 14px; } .trilha ol { list-style: none; margin: 0; padding: 0; } .trilha li { margin: 0 0 2px; } .trilha a { display: block; padding: 6px 12px; border-left: 2px solid var(--linha); color: var(--texto-suave); font-size: 13.5px; line-height: 1.4; } .trilha a:hover { color: var(--texto); border-left-color: var(--cobre); background: var(--superficie); text-decoration: none; } .conteudo { padding: 42px 0 96px; min-width: 0; } /* ------------------------------------------------------------------ aviso */ .aviso { border: 1px solid var(--alerta-borda); background: linear-gradient(160deg, var(--alerta-fundo), rgba(229, 103, 75, 0.03)); border-radius: var(--raio); padding: 20px 24px; margin: 0 0 34px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; } .aviso-icone { width: 30px; height: 30px; border-radius: 50%; background: var(--alerta); color: #1A0B07; display: grid; place-items: center; font-weight: 700; font-size: 17px; flex-shrink: 0; } .aviso p:first-of-type strong { color: #F2A38D; } .conteudo .aviso h2, .aviso h2 { margin: 2px 0 8px; font-family: var(--corpo); color: #F2A38D; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; border-top: none; padding-top: 0; } .aviso p { margin: 0 0 9px; font-size: 14.5px; color: var(--texto-suave); line-height: 1.6; } .aviso p:last-child { margin-bottom: 0; } .aviso-linha { border: 1px solid var(--atencao-fundo); background: var(--atencao-fundo); border-left: 3px solid var(--atencao); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; padding: 13px 18px; margin: 22px 0; font-size: 14.5px; color: var(--texto-suave); } .aviso-linha strong { color: var(--atencao); } /* ------------------------------------------------------------------- hero */ .hero { padding: 76px 0 52px; } .hero-sobre { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cobre-claro); border: 1px solid var(--cobre-borda); background: var(--cobre-fundo); padding: 6px 14px; border-radius: 100px; margin-bottom: 24px; } .hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(38px, 6.2vw, 68px); line-height: 1.03; letter-spacing: -0.028em; margin: 0 0 22px; max-width: 17ch; } .hero h1 em { font-style: italic; color: var(--cobre-claro); } .hero-sub { font-size: clamp(17px, 2.1vw, 20px); color: var(--texto-suave); max-width: 64ch; margin: 0 0 34px; line-height: 1.62; } .hero-numeros { display: flex; flex-wrap: wrap; gap: 40px; margin-top: 8px; } .numero { } .numero b { display: block; font-family: var(--display); font-size: 34px; font-weight: 600; color: var(--texto); line-height: 1; font-variant-numeric: tabular-nums; } .numero span { font-size: 12.5px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: 0.09em; font-weight: 600; } /* ------------------------------------------------------------------ busca */ .busca-caixa { margin: 40px 0 26px; } .busca-campo { position: relative; } .busca-campo input { width: 100%; padding: 15px 18px 15px 48px; background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); color: var(--texto); font-family: var(--corpo); font-size: 15.5px; } .busca-campo input::placeholder { color: var(--texto-fraco); } .busca-campo input:focus { outline: none; border-color: var(--cobre); box-shadow: 0 0 0 3px var(--cobre-fundo); } .busca-campo svg { position: absolute; left: 17px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--texto-fraco); pointer-events: none; } .filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .filtro { background: var(--superficie); border: 1px solid var(--linha-forte); color: var(--texto-suave); padding: 7px 15px; border-radius: 100px; font-family: var(--corpo); font-size: 13.5px; font-weight: 500; cursor: pointer; transition: all .13s ease; } .filtro:hover { border-color: var(--linha-forte); color: var(--texto); background: var(--superficie-2); } .filtro[aria-pressed="true"] { background: var(--cobre-fundo); border-color: var(--cobre-borda); color: var(--cobre-claro); } /* ------------------------------------------------------------------ cards */ .secao { margin: 60px 0 0; } .secao-cabeca { margin-bottom: 26px; } .secao h2 { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -0.018em; margin: 0 0 7px; } .secao-desc { color: var(--texto-suave); font-size: 15px; margin: 0; max-width: 68ch; } .grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); gap: 16px; } .card { display: block; padding: 22px; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); color: inherit; transition: border-color .15s ease, transform .15s ease, background .15s ease; } .card:hover { text-decoration: none; border-color: var(--linha-forte); background: var(--superficie-2); transform: translateY(-2px); } /* O selo tem white-space: nowrap e 153px no pior caso ("APROVAÇÃO PARCIAL"). Num cartão estreito ele empurrava para fora da página -- 6px de overflow medidos a 1280px de viewport com a grade em 4 colunas. Duas correções: o título passa a poder encolher (min-width: 0 vence o min-content padrão do item flex) e a linha pode quebrar, jogando o selo para baixo quando não houver espaço. O selo em si não encolhe: selo cortado não informa nada. */ .card-topo { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 9px; } .card-topo h3 { min-width: 0; } .card-topo .selo { flex: 0 0 auto; } .card h3 { font-family: var(--display); font-size: 19.5px; font-weight: 600; margin: 0; letter-spacing: -0.012em; line-height: 1.24; color: var(--texto); } .card p { margin: 0; font-size: 14px; color: var(--texto-suave); line-height: 1.55; } .card-rodape { margin-top: 15px; padding-top: 13px; border-top: 1px solid var(--linha); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--texto-fraco); } /* ------------------------------------------------------------------ selos */ .selo { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 100px; white-space: nowrap; border: 1px solid transparent; } .selo-nao { background: var(--alerta-fundo); color: #EE8F79; border-color: var(--alerta-borda); } .selo-parcial { background: var(--atencao-fundo); color: #E3C468; border-color: rgba(217,180,74,.26); } .selo-sim { background: var(--ok-fundo); color: #6BC5A2; border-color: var(--ok-borda); } .selo-cat { background: var(--superficie-3); color: var(--texto-suave); border-color: var(--linha-forte); } /* registro na ANVISA, medido em 04/09/2026 */ .selo-anv-sim { background: var(--ok-fundo); color: #6BC5A2; border-color: var(--ok-borda); } .selo-anv-nao { background: transparent; color: var(--texto-fraco); border-color: var(--linha-forte); border-style: dashed; } .selo-anv-nof { background: var(--atencao-fundo); color: #E3C468; border-color: rgba(217,180,74,.26); } .filtros-anvisa { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--linha); } .filtros-anvisa .filtro { font-size: 12.5px; padding: 6px 13px; } .nota-filtro { margin: 14px 0 0; font-size: 12.5px; color: var(--texto-fraco); line-height: 1.55; max-width: 66ch; } .nota-filtro a { color: var(--cobre-claro); } /* --------------------------------------------------------------- artigo */ .artigo-cabeca { margin-bottom: 34px; } .migalha { font-size: 13px; color: var(--texto-fraco); margin-bottom: 16px; } .migalha a { color: var(--texto-fraco); } .migalha a:hover { color: var(--cobre-claro); } .artigo-cabeca h1 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.6vw, 46px); line-height: 1.08; letter-spacing: -0.026em; margin: 0 0 14px; } .artigo-sub { font-size: 17.5px; color: var(--texto-suave); margin: 0 0 20px; max-width: 66ch; line-height: 1.6; } .artigo-selos { display: flex; flex-wrap: wrap; gap: 8px; } .conteudo h2 { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -0.018em; margin: 52px 0 16px; padding-top: 26px; border-top: 1px solid var(--linha); } .conteudo h2:first-of-type { border-top: none; padding-top: 0; } .conteudo h3 { font-size: 17px; font-weight: 650; margin: 30px 0 10px; color: var(--texto); letter-spacing: -0.005em; } .conteudo p { margin: 0 0 15px; color: var(--texto-suave); } .conteudo > p:first-of-type { font-size: 17px; color: var(--texto); } .conteudo ul, .conteudo ol { color: var(--texto-suave); padding-left: 22px; margin: 0 0 16px; } .conteudo li { margin-bottom: 7px; } .conteudo strong { color: var(--texto); font-weight: 600; } /* ------------------------------------------------------------------ fatos */ .fatos { display: flex; flex-wrap: wrap; gap: 1px; background: var(--linha); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; margin: 26px 0 32px; } .fato { background: var(--superficie); padding: 17px 19px; flex: 1 1 200px; min-width: 190px; } .fato dt { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--texto-fraco); font-weight: 700; margin-bottom: 7px; } .fato dd { margin: 0; font-size: 15px; color: var(--texto); font-weight: 500; line-height: 1.45; } /* ----------------------------------------------------------------- tabela */ .tabela-env { margin: 24px 0 32px; border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; background: var(--superficie); } .tabela-titulo { display: none; padding: 15px 20px; border-bottom: 1px solid var(--linha); font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--texto-suave); background: var(--superficie-2); } .tabela-rolagem { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 14.5px; } thead th { text-align: left; padding: 12px 20px; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.09em; color: var(--texto-fraco); font-weight: 700; border-bottom: 1px solid var(--linha-forte); /* Era nowrap. Um cabecalho como "Faixa usual em estudos" era forcado numa linha so e passava a ditar a largura da coluna, espremendo a coluna de prosa ao lado -- que e a que o leitor precisa ler. Medido numa tabela de fitoterapicos: a coluna de texto ia de 184px para 193px e a tabela deixava de precisar de rolagem. */ white-space: normal; hyphens: none; } tbody td { padding: 13px 20px; border-bottom: 1px solid var(--linha); color: var(--texto-suave); vertical-align: top; line-height: 1.5; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover td { background: rgba(255, 255, 255, 0.014); } tbody td:first-child { color: var(--texto); font-weight: 500; white-space: nowrap; } .num { font-family: var(--mono); font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--texto); } /* -------------------------------------------------------------- callouts */ .nota { border-left: 3px solid var(--cobre); background: var(--cobre-fundo); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; padding: 15px 20px; margin: 24px 0; font-size: 14.5px; color: var(--texto-suave); } .nota strong { color: var(--cobre-claro); } .faq { border-top: 1px solid var(--linha); } .faq details { border-bottom: 1px solid var(--linha); padding: 4px 0; } .faq summary { cursor: pointer; padding: 17px 34px 17px 0; position: relative; font-weight: 550; font-size: 16px; color: var(--texto); list-style: none; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; position: absolute; right: 6px; top: 50%; transform: translateY(-50%); color: var(--cobre); font-size: 21px; font-weight: 400; line-height: 1; } .faq details[open] summary::after { content: '−'; } .faq details > div { padding: 0 0 19px; color: var(--texto-suave); font-size: 15px; } /* ------------------------------------------------------------------ rodapé */ .rodape { border-top: 1px solid var(--linha); margin-top: 80px; padding: 48px 0 60px; background: var(--tinta); } .rodape-in { max-width: var(--largura); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 44px; } .rodape h4, .rodape .rodape-titulo { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.11em; color: var(--texto-fraco); font-weight: 700; margin: 0 0 14px; } .rodape p, .rodape li { font-size: 13.5px; color: var(--texto-fraco); line-height: 1.65; } .rodape ul { list-style: none; padding: 0; margin: 0; } .rodape li { margin-bottom: 7px; } .rodape a { color: var(--texto-suave); } /* ------------------------------------------------------------ responsivo */ @media (max-width: 940px) { .pagina { grid-template-columns: minmax(0, 1fr); gap: 0; } .trilha { display: none; } .rodape-in { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .cabecalho-in { padding: 12px 16px; gap: 10px; flex-wrap: wrap; row-gap: 6px; min-width: 0; } .marca { font-size: 15.5px; gap: 8px; min-width: 0; } /* abaixo de 560px a marca fica so no icone: melhor que reticencias */ .marca span:not(.marca-icone) { display: none; } .marca-icone { width: 26px; height: 26px; font-size: 12.5px; flex-shrink: 0; } .nav { gap: 13px; font-size: 13px; flex-shrink: 0; } /* no celular o seletor desce para uma segunda linha, alinhado à direita */ .idiomas { flex-basis: 100%; justify-content: flex-end; gap: 6px; font-size: 11px; } .nota-traducao { padding: 8px 16px; font-size: 12px; } .env-largo, .pagina { padding: 0 18px; } .hero { padding: 48px 0 34px; } .hero-numeros { gap: 26px; } .grade { grid-template-columns: minmax(0, 1fr); } .card { min-width: 0; } .rodape-in { grid-template-columns: 1fr; gap: 30px; } .conteudo h2 { font-size: 23px; margin-top: 42px; } tbody td, thead th { padding: 11px 15px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* --------------------------------------------------------------- impressão */ @media print { .cabecalho, .trilha, .rodape, .busca-caixa, .filtros { display: none; } body { background: #fff; color: #000; } .aviso { border: 2px solid #000; } } /* ---- destaque de nootropicos na home ------------------------------------- Fica fora da grade e fora da busca: o app.js so mexe em .card[data-busca] dentro de [data-secao], e este bloco nao tem nem uma coisa nem outra. */ .destaque-noot{ margin:34px 0 6px;padding:24px 26px; background:var(--cobre-fundo);border:1px solid var(--cobre-borda);border-radius:14px; } .destaque-noot h2{ font-family:var(--display);font-size:clamp(21px,2.4vw,26px);font-weight:600; letter-spacing:-.02em;margin:0 0 8px;color:var(--cobre-claro); } .destaque-noot > p{margin:0 0 18px;color:var(--texto-suave);max-width:64ch;line-height:1.6} .destaque-noot-itens{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr))} .destaque-noot-item{ display:block;padding:15px 17px;text-decoration:none; background:var(--superficie);border:1px solid var(--linha);border-radius:11px; transition:border-color .15s ease,transform .15s ease; } .destaque-noot-item:hover,.destaque-noot-item:focus-visible{ border-color:var(--cobre);transform:translateY(-1px); } .destaque-noot-item b{display:block;color:var(--texto);font-size:16px;margin-bottom:5px} .destaque-noot-item span{display:block;color:var(--texto-suave);font-size:13.5px;line-height:1.5} @media (prefers-reduced-motion:reduce){.destaque-noot-item{transition:none} .destaque-noot-item:hover,.destaque-noot-item:focus-visible{transform:none}} /* Link dentro do subtitulo do hero. Sublinhado porque a cor sozinha nao basta: cobre (#E8A972) contra o cinza do paragrafo (#A8B0BC) da 1.08 de contraste, e a WCAG pede 3 quando a cor e a unica pista. O resto do site tem o mesmo problema em .nota-filtro a e afins -- nao mexi neles aqui. */ .hero-sub a{ color:var(--cobre-claro); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-thickness .15s ease; } .hero-sub a:hover,.hero-sub a:focus-visible{text-decoration-thickness:2px} @media (prefers-reduced-motion:reduce){.hero-sub a{transition:none}} /* ========================================================================= PROCEDÊNCIA — a assinatura visual deste site ========================================================================= O site publica duas classes de número, e até agora elas eram idênticas na tela: o aferido, que eu conferi no PubMed, na bula ou no dado aberto da ANVISA, e o transportado, que veio de uma fonte secundária comercial e só foi traduzido. A diferença é o assunto inteiro do site — e estava dita apenas em prosa, que ninguém lê antes de olhar a tabela. Daqui em diante ela é legível de relance, sem uma palavra: página aferida régua sólida fria + número no display, tabular página transportada régua pontilhada apagada + número em monoespaçada A página transportada fica deliberadamente mais seca. Não é descuido: o site não deve lisonjear igualmente o que não conferiu. ========================================================================= */ .tabela-env { position: relative; } /* A marca é de presença, não de contraste: a tabela aferida traz a régua na borda; a transportada não traz nada. Presença contra ausência se lê mais rápido que sólido contra pontilhado — e é a leitura correta, porque a página transportada não tem nada a declarar sobre a própria procedência. */ .proc-aferida .tabela-env { border-left: 3px solid var(--aferido-rasa); } /* o número, que é onde a distinção importa de verdade */ .proc-aferida tbody td strong { font-family: var(--display); font-weight: 600; font-size: 1.06em; letter-spacing: -0.005em; color: var(--aferido); } /* cabeçalho da tabela: na aferida, a régua continua sob o thead */ .proc-aferida thead th { border-bottom-color: var(--aferido-rasa); } /* nas páginas aferidas o corpo respira mais: são páginas para ler, não para consultar de relance */ .proc-aferida tbody td { padding: 15px 20px; } /* A dose transportada perdeu o cobre de propósito. Antes, as 1.405 doses vindas da fonte secundária comercial eram o elemento mais destacado do site — em cobre, a cor da marca. Ou seja: os números em que o autor menos confia eram os que mais brilhavam. Agora o cobre é só marca e navegação, e o realce fica com o número aferido, na página que o mereceu. */ /* Um sublinhado embaixo do número foi tentado aqui e cortado: lia como link. A face e o tom já bastam — a Fraunces no meio de uma tabela em Inter é diferença suficiente, e não promete um clique que não existe. */ /* Foco visível, que é piso e não enfeite. O contorno segue a procedência da página, então o teclado também aprende a diferença. */ a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 2px solid var(--cobre-claro); outline-offset: 3px; border-radius: 2px; } .proc-aferida a:focus-visible { outline-color: var(--aferido); } /* O
tem tabindex="-1" para o "Pular para o conteúdo" mover o foco de verdade, que é o que faz o leitor de tela anunciar aonde a pessoa chegou. Sem esta regra o Chrome desenha o anel padrão ao redor da coluna inteira, de borda a borda: um retângulo de 1400px que não aponta para nada. A pista de foco aqui é a rolagem e o anúncio, não o contorno. Os elementos de dentro continuam com o contorno de cima quando recebem foco. */ #principal:focus { outline: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================= O hero como tese ========================================================================= Antes havia quatro fichas de número — compostos, tabelas, sem aprovação, categorias. Contagem de inventário: diz o tamanho do site e nada sobre ele. No lugar entra a única coisa que este site pode dizer e os outros não, que é a divisão da própria casa entre o que foi conferido e o que foi só copiado. E ela já vem com a régua que o leitor vai reencontrar em toda tabela daqui para baixo — o hero ensina a notação antes de usá-la. ========================================================================= */ .procedencia-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 34px; max-width: 880px; } .proc-lado { padding: 18px 0 4px 18px; border-left: 3px solid var(--linha); } .procedencia-resumo .proc-aferida { border-left-color: var(--aferido-rasa); } .proc-lado b { display: block; font-family: var(--display); font-size: 38px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; margin-bottom: 10px; } .procedencia-resumo .proc-aferida b { color: var(--aferido); } .procedencia-resumo .proc-transportada b { font-family: var(--mono); font-size: 31px; color: var(--texto-suave); } .proc-lado span { display: block; font-size: 14px; line-height: 1.6; color: var(--texto-suave); } .proc-lado strong { color: var(--texto); font-weight: 600; } .procedencia-legenda { margin: 22px 0 0; max-width: 620px; font-size: 13.5px; line-height: 1.65; color: var(--texto-fraco); } @media (max-width: 720px) { .procedencia-resumo { grid-template-columns: 1fr; gap: 18px; } .proc-lado b { font-size: 32px; } } /* A régua no cartão do índice. É a mesma notação do hero e das tabelas, aparecendo antes do clique: este cartão leva a uma página onde o número foi aferido. O cartão sem régua leva a dose transportada — e a ausência é a informação, como no resto do site. Fica na borda esquerda, e não num selo a mais: o rodapé do cartão já carrega categoria, registro na ANVISA e contagem de tabelas. Mais um selo ali seria ruído, e a régua diz a mesma coisa sem ocupar linha. */ .card-aferido { border-left: 3px solid var(--aferido-rasa); padding-left: 20px; /* compensa os 2px a mais da borda */ } .card-aferido:hover { border-left-color: var(--aferido); } /* O caminho manual, dito em voz alta. Estava só num