como item
próprio, e um item com link mais texto vira uma coluna de palavras. */
.tut-checagem-corpo { min-width: 0; }
.sitio button.tut-marca--caixa {
display: grid;
place-items: center;
width: 22px;
height: 22px;
/* alinha o topo da caixa com a primeira linha do item (28px de entrelinha) */
margin-top: 3px;
border: 1px solid var(--sitio-traco-forte);
border-radius: var(--sitio-raio-miudo);
background: var(--sitio-superficie-alta);
color: var(--sitio-tinta-cheia);
}
/* Área de toque: a caixa desenhada tem 22px, abaixo do mínimo de 24×24 da
WCAG 2.2. Cresce o ALVO num pseudo-elemento, sem esticar a linha do item —
mesma solução do "Copiar" e da âncora, e pela mesma razão. */
.sitio button.tut-marca--caixa { position: relative; }
.sitio button.tut-marca--caixa::after {
content: "";
position: absolute;
inset: -5px -6px;
}
/* Mesma razão do passo: risco, não apagamento. */
.tut-prose ul.tut-checagem > li[data-feito] {
text-decoration: line-through;
text-decoration-color: var(--sitio-tinta-fraca);
}
/* ══ Recado (dica · nota · atenção) — VAZIO DECLARADO ════════════════════
O pacote tem `.recado`, mas é outro objeto: um papelzinho amarelo
rotacionado, da faixa clara da home. Não serve pra aviso dentro de texto
escuro. Escrito à mão: superfície um degrau acima, fio de cor na aresta
esquerda e rótulo em voz de sistema.
A cor vem dos realces que o pacote JÁ declara (--sitio-realce-*), nunca
do âmbar do sinal: `--sitio-sinal` é o "ligado" da AÇÃO, um por vista, e
gastá-lo em aviso apagaria a distinção. O rótulo em texto carrega o
sentido; a cor só reforça — sem ícone inventado, que o sprite do site não
tem símbolo de aviso e acrescentar um é outro escopo. */
.tut-callout {
--tut-recado-cor: var(--sitio-realce-azul);
margin-top: 40px;
padding: 20px 24px;
border-radius: var(--sitio-raio-fino);
border-left: 2px solid var(--tut-recado-cor);
background: color-mix(in srgb, var(--tut-recado-cor) 7%, var(--sitio-superficie));
}
.tut-callout--tip { --tut-recado-cor: var(--sitio-realce-verde); }
.tut-callout--info { --tut-recado-cor: var(--sitio-realce-azul); }
.tut-callout--warning { --tut-recado-cor: var(--sitio-realce-coral); }
.tut-callout-kind {
margin: 0 0 8px;
font-family: var(--voz-sistema);
font-size: var(--sitio-rotulo-corpo);
line-height: var(--sitio-rotulo-entrelinha);
letter-spacing: var(--sitio-rotulo-espacamento);
text-transform: uppercase;
color: var(--tut-recado-cor);
}
.tut-callout-body > strong:first-child {
display: block;
margin-bottom: 4px;
color: var(--sitio-tinta-cheia);
font-weight: 600;
}
.tut-callout-body p { margin: 0; }
.tut-callout-body p + p { margin-top: 16px; }
/* ══ Bloco de código — a JANELA do pacote ════════════════════════════════
Aqui o pacote TEM a peça, e ela é usada como é: `.janela` +
`.janela__cromo` + `.janela__sinal` (a marca VK em máscara) +
`.janela__titulo` + `.janela__campo`. O que esta folha acrescenta é só o
que a peça não previa: a margem no fluxo do texto, o botão de copiar e um
corpo um degrau maior.
`.tut-code` fica na marcação porque js/tutorial.js procura `.tut-code pre`
pra marcar as regiões que rolam na horizontal como alcançáveis por
teclado. Trocar o nome não dá erro: só tira a parada de tabulação. */
.tut-code {
position: relative;
margin-top: 32px;
}
.tut-code .janela__cromo {
/* o botão de copiar mora na barra da janela */
padding-right: 8px;
}
.tut-code .janela__titulo {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* A calibragem do pacote (`.sitio .janela__campo`, 12,5px/21) é da janela de
BUSCA da home — quatro linhas de eco. Aqui é comando pra copiar e digitar,
e 12,5px lê pequeno demais ao lado de um terminal. Sobe pra 13,5/22.
Vence por ESPECIFICIDADE, não por ordem de carga: `.sitio .tut-code
.janela__campo` é (0,3,0) contra os (0,2,0) do pacote. A nota da seção
"Famílias compartilhadas" de css/sitio-web.css conta o que acontece quando
alguém tenta ganhar essa disputa só carregando depois. */
.sitio .tut-code .janela__campo {
margin: 0;
padding: 18px 20px;
font-size: 13.5px;
line-height: 22px;
white-space: pre;
overflow-x: auto;
tab-size: 4;
}
.tut-code .janela__campo code {
padding: 0;
background: none;
border-radius: 0;
color: inherit;
font-size: inherit;
/* dentro do a família já é a mesma: não há duas bases concorrendo */
line-height: inherit;
overflow-wrap: normal;
}
/* ── Copiar ──────────────────────────────────────────────────────────────
Posto por js/tutoriais/leitura.js, nunca na marcação servida: sem
`navigator.clipboard` o botão seria um controle morto, e controle morto é
pior que controle ausente. */
.sitio button.tut-copiar {
position: relative;
flex: none;
height: 26px;
padding: 0 10px;
border: 1px solid var(--sitio-traco-forte);
border-radius: var(--sitio-raio-miudo);
background: color-mix(in srgb, var(--janela-tinta-cheia) 8%, transparent);
color: var(--janela-tinta-secundaria);
font-family: var(--voz-sistema);
font-size: 11px;
line-height: 1;
letter-spacing: 0.04em;
cursor: pointer;
transition: color var(--t-toque) var(--e-entrada), border-color var(--t-toque) var(--e-entrada);
}
/* A área de TOQUE, que não é a área desenhada. O corpo do botão mede 64×26
(medido) — os 26px passam raspando o mínimo de 24×24 da WCAG 2.2, e num
tutorial lido no celular com o terminal do lado "Copiar" é a ação
principal da página. Crescer o corpo esticaria a barra da janela, que é
peça do pacote (`.janela__cromo`, 38px de altura fixa); então cresce só o
alvo, num pseudo-elemento que não ocupa layout. `inset: -6px -8px` leva o
alvo a 80×38 — a altura INTEIRA da barra, sem transbordar pro campo de
código embaixo, onde o toque erraria pro texto. */
.sitio button.tut-copiar::after {
content: "";
position: absolute;
inset: -6px -8px;
}
.sitio button.tut-copiar:hover {
color: var(--janela-tinta-cheia);
border-color: var(--janela-tinta-secundaria);
}
.sitio button.tut-copiar[data-copiado] {
color: var(--sitio-realce-verde);
border-color: var(--sitio-realce-verde);
}
/* ══ Tabela — VAZIO DECLARADO ════════════════════════════════════════════
O pacote não tem tabela. Escrita à mão, sem caixa e sem zebra: cabeçalho
em voz de sistema com fio embaixo, linhas abertas por fio. A caixa rola na
horizontal quando não cabe, e js/tutorial.js marca a que de fato rola como
região alcançável por teclado — por isso `.tut-table-wrap` fica no nome. */
.tut-table-wrap {
margin-top: 32px;
overflow-x: auto;
overscroll-behavior-x: contain;
border-radius: var(--sitio-raio-fino);
}
.tut-table {
width: 100%;
border-collapse: collapse;
font-size: 14.5px;
line-height: 22px;
}
.tut-table th {
padding: 0 20px 10px 0;
text-align: left;
vertical-align: bottom;
color: var(--sitio-tinta-secundaria);
font-family: var(--voz-sistema);
font-weight: 400;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
border-bottom: 1px solid var(--sitio-traco-forte);
}
.tut-table td {
padding: 14px 20px 14px 0;
color: var(--sitio-tinta-secundaria);
vertical-align: top;
font-variant-numeric: tabular-nums;
border-bottom: 1px solid var(--sitio-traco);
}
.tut-table tbody tr:last-child td { border-bottom: 0; }
.tut-table th:last-child,
.tut-table td:last-child { padding-right: 0; }
.tut-table td strong { color: var(--sitio-tinta-cheia); font-weight: 600; }
/* ── A coluna comparável vira figura — VAZIO DECLARADO ─────────────────────
O pacote não tem gráfico (nem barra, nem eixo, nem legenda). Esta é a peça
mais próxima disso que existe aqui, e ela é deliberadamente MÍNIMA: um fio
proporcional atrás do número, na própria célula. Sem eixo, sem escala, sem
rótulo — quem lê o número exato lê o número; a barra só responde "qual é
maior, e por quanto".
De onde vem o dado: da própria tabela. `js/tutoriais/leitura.js` lê as
células, só aceita a coluna quando TODAS as linhas trazem número com a
MESMA unidade, e escreve `--tut-barra` como fração do maior valor. Nenhum
número é inventado, nenhum é reescrito, e coluna que não é grandeza
comparável ("Reunião de 30 min" ao lado de "Aula de 1 h") fica sem barra —
fingir comparação onde não há é pior que não desenhar nada.
Por que importa: a tabela de modelos do whisper é o argumento central
daquele guia (36,77 s contra 66,55 s; 771 MB contra 1.654 MB). Lida como
texto, ela obriga a pessoa a fazer a divisão de cabeça enquanto rola de
lado no celular. A barra faz a conta.
É um FIO de 3px na base da célula, e não um preenchimento atrás do número.
A diferença importa: preenchimento mudaria o fundo sob o texto e derrubaria
o contraste do valor (que é o dado, e o dado é o que a pessoa veio ler);
o fio ocupa a faixa vazia abaixo da linha de base e não encosta em glifo
nenhum. `z-index: -1` com `isolation: isolate` mantém ele atrás do
conteúdo mesmo se um dia a célula ganhar fundo próprio. */
.tut-table td[data-barra] {
position: relative;
isolation: isolate;
}
.tut-table td[data-barra]::after {
content: "";
position: absolute;
z-index: -1;
left: 0;
bottom: 6px;
height: 3px;
width: calc(var(--tut-barra, 0) * 100% - 20px);
min-width: 2px;
border-radius: 2px;
background: var(--sitio-sinal);
opacity: 0.55;
}
/* ── A tabela larga vira cartão no celular — VAZIO DECLARADO ───────────────
Nada disto existe no pacote. Vale só para tabelas de TRÊS colunas ou mais,
e só abaixo de 680px.
O caso que motivou: "sintoma · causa provável · o que fazer" do whisper —
oito linhas de três colunas de texto longo, numa caixa de 350px que rola de
lado. Ler um caso ali exigia arrastar, voltar, arrastar de novo, guardando
na cabeça o sintoma da coluna 1. Empilhada, cada linha vira um caso inteiro
numa tela.
`display` trocado em elemento de tabela APAGA os papéis implícitos na
árvore de acessibilidade — quem usa leitor de tela perderia a estrutura no
exato momento em que quem enxerga a ganha. Por isso o JS escreve
`role="table"/"rowgroup"/"row"/"cell"` explícito nas tabelas marcadas, e o
cabeçalho não é apagado: sai da vista mas continua na árvore. */
@media (max-width: 680px) {
.tut-table-wrap[data-cartoes] {
overflow-x: visible;
/* sem rolagem lateral não há borda que esmaecer */
-webkit-mask-image: none;
mask-image: none;
}
[data-cartoes] .tut-table,
[data-cartoes] .tut-table tbody,
[data-cartoes] .tut-table tr,
[data-cartoes] .tut-table td {
display: block;
width: auto;
}
[data-cartoes] .tut-table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
[data-cartoes] .tut-table tbody tr {
margin-top: 16px;
padding: 16px 18px;
border: 1px solid var(--sitio-traco);
border-radius: var(--sitio-raio-fino);
background: var(--sitio-superficie);
}
[data-cartoes] .tut-table tbody td {
padding: 0;
border-bottom: 0;
}
[data-cartoes] .tut-table tbody td + td { margin-top: 12px; }
/* O rótulo da coluna vem do , escrito em `data-rotulo` pelo JS.
Sem ele o cartão seria uma pilha de valores sem dizer de que são.
`::before` num td que é `display: block`, e NÃO um td virado contêiner
flex com `order: -1`: essa foi a primeira tentativa e ela QUEBRA o
conteúdo. Num contêiner flex todo filho vira item de bloco — inclusive
os pedaços de texto solto ao redor de um —, e a célula "Rode
`source .../activate` de novo. O prompt tem que mostrar `(.venv)`."
virou três blocos desenhados um por cima do outro. Sintoma puramente
visual, console limpo. Por isso a barra da célula mudou pra `::after`:
este `::before` é do rótulo. */
[data-cartoes] .tut-table tbody td::before {
content: attr(data-rotulo);
display: block;
margin-bottom: 4px;
color: var(--sitio-tinta-secundaria);
font-family: var(--voz-sistema);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* A barra some no cartão: sem as linhas lado a lado ela não compara nada. */
[data-cartoes] .tut-table td[data-barra]::after { content: none; }
}
/* ══ A borda que avisa que ainda tem conteúdo ════════════════════════════
Vale pros DOIS que rolam de lado — a caixa da tabela e o bloco de código.
O defeito que isto conserta: a caixa rolava e era alcançável por teclado,
mas nada dizia que rolava. Medido no whisper a 390px, o cabeçalho da
tabela terminava cortado no meio da palavra ("PICO DE RA…") encostado na
borda direita, sem sombra e sem fio. Quem lê no celular entende isso como
"a página quebrou", não como "arraste" — e a tabela do whisper é o dado
central do guia (o comparativo de modelos). Ler duas das cinco colunas e
não desconfiar que há mais três é perder o argumento do tutorial.
`js/tutorial.js` escreve `data-rola` com o lado que ainda tem conteúdo, e
aqui a borda correspondente esmaece. É máscara e não gradiente pintado por
cima porque a caixa não tem fundo próprio: ela senta direto sobre
`--sitio-fundo` no caso da tabela e sobre `--janela-campo` no do código —
um gradiente precisaria saber a cor de trás, a máscara não precisa.
A máscara é aplicada à CAIXA, não ao conteúdo: em elemento com rolagem ela
fica presa ao box e o conteúdo desliza por baixo, que é justamente o que se
quer. Sem `data-rola` (JS ausente, ou nada transbordando) nenhuma máscara é
declarada e a caixa fica inteira — a marcação servida nunca depende disto.
24px é o dobro do vão da coluna da tabela: menos que isso passa por
antisserrilhado, mais come uma coluna estreita inteira.
O `black` dos gradientes abaixo NÃO é cor: numa máscara só o canal alfa
conta, e `black` quer dizer "opaco" como `transparent` quer dizer
"invisível". Escrito por palavra-chave, e não `#000`, pra não parecer uma
cor literal contrabandeada — `test_a_folha_da_pagina_nao_declara_cor_solta`
não tem exceção nenhuma, e não deve voltar a ter. */
.tut-table-wrap[data-rola="fim"],
.tut-code pre[data-rola="fim"] {
-webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.tut-table-wrap[data-rola="ambos"],
.tut-code pre[data-rola="ambos"] {
-webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, black 24px, black calc(100% - 24px), transparent 100%);
}
.tut-table-wrap[data-rola="inicio"],
.tut-code pre[data-rola="inicio"] {
-webkit-mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
mask-image: linear-gradient(to right, transparent 0, black 24px, black 100%);
}
/* ══ Próximos passos ═════════════════════════════════════════════════════
Duas saídas, lado a lado, cada uma em superfície própria. O cartão inteiro
é o link — e por isso a cor tem que ser escopada com o elemento (a
armadilha do topo deste arquivo). */
.tut-proximos {
max-width: 68rem;
margin-top: 96px;
scroll-margin-top: 104px;
}
.tut-proximos .section-head { margin-bottom: 24px; }
.tut-proximos h2 {
margin: 8px 0 0;
font-family: var(--voz-editorial);
font-weight: 600;
font-size: clamp(28px, 2.2vw, 34px);
line-height: 1.2;
letter-spacing: -0.02em;
color: var(--sitio-tinta-cheia);
}
.tut-proximos .lbl {
margin: 0;
font-family: var(--voz-sistema);
font-size: var(--sitio-rotulo-corpo);
line-height: var(--sitio-rotulo-entrelinha);
letter-spacing: var(--sitio-rotulo-espacamento);
text-transform: uppercase;
color: var(--sitio-sinal);
}
.tut-proximos .section-intro {
margin: 12px 0 0;
max-width: 68ch;
color: var(--sitio-tinta-secundaria);
}
.tut-prox-cells {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.sitio a.tut-prox-cell {
display: grid;
align-content: start;
gap: 8px;
padding: 24px;
border-radius: var(--sitio-raio);
background: var(--sitio-superficie);
box-shadow: var(--sitio-relevo-baixo), var(--sitio-luz-de-bordo);
color: var(--sitio-tinta-secundaria);
text-decoration: none;
transition: background-color var(--t-toque) var(--e-entrada);
}
.sitio a.tut-prox-cell:hover {
background: var(--sitio-superficie-alta);
color: var(--sitio-tinta-secundaria);
}
.tut-cell-eyebrow {
font-family: var(--voz-sistema);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sitio-tinta-secundaria);
}
.tut-prox-cell h3 {
margin: 0;
font-family: var(--voz-funcional);
font-weight: 600;
font-size: 18px;
line-height: 26px;
color: var(--sitio-tinta-cheia);
}
.tut-prox-cell p {
margin: 0;
font-size: 14.5px;
line-height: 22px;
}
.tut-cell-cta {
margin-top: 8px;
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--voz-sistema);
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--sitio-sinal);
}
.tut-prox-cell:hover .tut-cell-cta { color: var(--sitio-sinal-forte); }
/* ══ Rodapé ══════════════════════════════════════════════════════════════
`.rodape` é do pacote e `.rodape .sitio__miolo` vem de css/sitio-web.css.
O que falta é só o que a home resolve na própria folha: o nav legal em
linha. Os links de /privacy/ e /terms/ são AMARRA — o Google exige que o
site linke a política pra aprovar a verificação do app OAuth, e o login da
área de membros depende dela. */
.rodape__legal {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
/* `.rodape__coracao` NÃO ganha regra aqui, e isso é a decisão, não o
esquecimento. A rodada 1 desta folha pintava o ♥ de `#b8483c` — uma cor
que o design system não declara, numa classe com nome de família do
pacote, apresentada como se viesse da home. Ela não vinha: na home
(`LandingPage/index.html` + `css/home.css`) essa classe não tem regra
nenhuma, o ♥ herda a tinta do rodapé e sai cinza; no hub de tutoriais o
elemento nem existe. O rodapé é cromo COMPARTILHADO, e uma cor a mais só
aqui é o modo de falha mais silencioso que existe — ninguém abre as duas
abas lado a lado pra conferir um coração.
Sem regra, as três superfícies concordam pelo PACOTE: o ♥ herda
`--sitio-tinta-secundaria` como o resto da linha do rodapé, na home e
aqui. Se um dia o coração dever ser colorido, a regra nasce no pacote (ou
na camada compartilhada) e vale nas três de uma vez — não numa folha de
página. Vazio declarado, nunca desenho inventado.
Medido por `test_o_coracao_do_rodape_herda_a_tinta_do_pacote`. */
/* `.rodape` (elementos-sitio.css) é uma linha só, com `white-space: nowrap`,
calibrada pra prancha de 1440. Com marca + frase + dois links legais +
copyright isso ESTOURA a largura visível bem antes do celular: medido a
390px, 603px de conteúdo em 390 de tela — e o sintoma não é o rodapé feio,
é a PÁGINA INTEIRA rolando de lado. A home resolve o mesmo em css/home.css,
no mesmo 1180 que já colapsa o menu; aqui a regra precisa alcançar o
`.sitio__miolo`, que é quem carrega o flex (css/sitio-web.css, seção 8). */
@media (max-width: 1180px) {
.rodape {
white-space: normal;
text-align: center;
}
.rodape .sitio__miolo {
flex-wrap: wrap;
justify-content: center;
row-gap: 8px;
}
.rodape__legal {
justify-content: center;
}
}
/* ══ Reflow ══════════════════════════════════════════════════════════════ */
@media (max-width: 1180px) {
/* Coluna única. O sumário lateral sai inteiro (nada fica preso no topo em
tela pequena) e o compacto entra no lugar dele. */
.tut-layout {
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin-top: 48px;
}
.tut-toc-win { display: none; }
.tut-toc-mobile { display: block; }
.tut-prose { max-width: none; }
.tut-prose > section { scroll-margin-top: 128px; }
.tut-proximos { scroll-margin-top: 128px; }
}
@media (max-width: 680px) {
.tut-pagina { padding-block: 32px 64px; }
.tut-layout { margin-top: 32px; }
.tut-capa .medidor { gap: 10px 20px; }
.tut-capa .medidor__item { padding-left: 20px; }
.tut-prose > section + section { margin-top: 64px; }
/* A coluna do numeral encolhe: em 342px de largura útil, 34px de bolha
mais 20 de vão comem quase um quinto da linha. */
.tut-step { grid-template-columns: 26px minmax(0, 1fr); gap: 14px; }
.tut-step-num { width: 26px; height: 26px; font-size: 12px; }
.tut-step:not(:last-child)::before { left: 12px; top: 26px; }
.tut-callout { padding: 16px 18px; }
.sitio .tut-code .janela__campo { padding: 14px 16px; }
.tut-proximos { margin-top: 64px; }
}
/* ══ Rolagem ═════════════════════════════════════════════════════════════
`html { scroll-behavior: smooth }` vinha de css/ds-web.css, que estas
páginas não carregam mais. Ele importa aqui: um salto instantâneo do
sumário pro meio de um texto de dez mil pixels não diz de onde a pessoa
veio, e ela perde a referência. Reposto — e desligado sob
`prefers-reduced-motion`, como a folha antiga fazia.
O progresso de leitura NÃO entra nesse portão: ele não é animação, é um
mostrador de posição, escrito pelo JS a cada rolagem sem transição
declarada. Esconder o mostrador de quem pediu menos movimento tiraria
informação, não movimento. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}