/* =========================================================================== Taharqa — as páginas do acervo --------------------------------------------------------------------------- Folha própria, carregada pelo parâmetro $folhas de cabecalho(), e usada por duas páginas: /cartas (o índice das 78) e /carta/ (cada uma delas). Está separada do mesa.css pelo motivo de sempre neste projeto: nenhum ajuste aqui deve obrigar você a reenviar um arquivo de 31 KB. E, ao contrário do conta.css, esta folha NÃO viaja em toda visita — quem vem tirar as cartas não baixa o estilo do dicionário. Nenhuma cor nova entra aqui. Tudo sai das variáveis do :root do mesa.css. =========================================================================== */ /* ================================================================ o comum As duas páginas usam a mesma largura e o mesmo respiro das seções da home (.intro, .aberturas): 78rem no máximo, centralizado, com --ritmo nas laterais. Repetir o valor aqui é preferível a acrescentar mais um seletor naquela lista lá do mesa.css, que já é longa e que não deveria ter de saber que estas páginas existem. */ .verbete, .acervo { max-width: 78rem; margin: 0 auto; padding-inline: var(--ritmo); padding-block: clamp(1.5rem, 4vw, 2.5rem) clamp(3rem, 7vw, 5rem); } /* ------------------------------------------------------------ a trilha "Início › As 78 cartas › O Mago". Serve a quem caiu aqui vindo do Google sem passar pela home e não sabe onde está. Miúda e cinza de propósito: é orientação, não conteúdo. Se competisse com o nome da carta, atrapalharia justamente quem já sabe onde está. */ .verbete__trilha { margin-bottom: 1.6rem; font-family: var(--letra-ui); font-size: .78rem; line-height: 1.5; color: var(--marfim-1); } .verbete__trilha a { color: var(--marfim-3); text-decoration: none; } .verbete__trilha a:hover { color: var(--marfim); text-decoration: underline; } .verbete__trilha span { margin-inline: .25rem; } /* ============================================== a página de uma carta */ /* O PALCO: a coluna de texto e a arte da carta. A base — a que vale no celular — é uma coluna só, com a arte em cima do texto. `order: -1` a traz para o começo mesmo vindo depois no HTML, e ela vem depois no HTML de propósito: leitor de tela e rastreador encontram o

e o verbete antes de atravessar uma imagem. Grid e não block já aqui, porque `order` só existe em contexto flex ou grid: sem isso a arte cairia no fim da página no celular. */ .verbete__palco { display: grid; gap: clamp(1.2rem, 3vw, 2rem); } .verbete__arte { order: -1; width: min(58%, 13rem); margin: 0 auto; } /* A moldura de latão e a sombra existem para a carta pousar sobre o pano, e não parecer recortada e colada — é a mesma ideia da mesa, onde as cartas repousam sobre algo. */ .verbete__arte img { display: block; width: 100%; height: auto; border-radius: var(--raio); border: 1px solid rgba(192,138,62,.35); box-shadow: 0 12px 30px rgba(0,0,0,.45); } .verbete__apresentacao { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); } .verbete__apresentacao .titulo { margin-block: .3rem .8rem; } /* ------------------------------------- tela larga: a carta fica à vista Acima de 981px a arte passa para a direita e GRUDA: a pessoa rola o verbete inteiro com a carta parada ao lado. É como se estuda um arcano — olhando a imagem enquanto se lê o que ela quer dizer —, e resolve um problema real da versão anterior, em que a carta subia para fora da tela no primeiro rolar e não voltava. 981px não é um número escolhido agora: é o mesmo ponto em que o mesa.css liga a fotografia do herói na página inicial. Um ponto de quebra a menos para lembrar. TRÊS DETALHES QUE FAZEM ISSO FUNCIONAR, e que quebram em silêncio se alguém mexer sem saber: 1. `position: sticky` precisa de espaço para percorrer, e esse espaço é a ALTURA DA CÉLULA da grade. Se o container ganhar `align-items: start`, a célula encolhe até o tamanho da figura e a arte para de grudar — fica parada no alto, sem nunca acompanhar a rolagem. É a armadilha clássica de sticky dentro de grid, e a razão de não haver `align-items` aqui. 2. `sticky` também morre dentro de qualquer ancestral com `overflow` diferente de `visible`. O #conteudo do mesa.css usa `overflow-x: clip` justamente por isso — `clip` corta sem criar caixa de rolagem, e o comentário de lá já avisava que `hidden` quebraria sticky. Se um dia alguém trocar aquela linha, esta arte para de funcionar e o motivo vai parecer não ter relação nenhuma. 3. A LARGURA da coluna sai da ALTURA da tela, e não o contrário. A conta é `(altura útil) × 100/171` — a proporção do baralho, a mesma --carta-prop do mesa.css. Assim a carta chega perto de preencher a altura da janela em vez de ficar uma tira pequena no canto. O `min()` com 32vw é o freio: numa tela larga e baixa, a conta pediria uma coluna que espremeria o texto até virar uma sanfona de duas palavras por linha. */ @media (min-width: 981px) { .verbete__palco { grid-template-columns: minmax(0, 1fr) min(32vw, calc((100vh - 4rem) * 100 / 171)); gap: clamp(2rem, 4vw, 3.5rem); } .verbete__arte { order: 0; position: sticky; top: 2rem; /* Altura fixa e a imagem centralizada dentro dela: a carta fica no meio da janela em vez de colada no topo, e a moldura nunca ultrapassa a borda de baixo da tela. */ height: calc(100vh - 4rem); display: flex; align-items: center; justify-content: center; width: auto; margin: 0; } /* `max-height` e não `height`: a imagem cabe na caixa mantendo a proporção do baralho, sem esticar. Quando a conta da coluna é limitada pelo freio de 32vw, é a largura que manda; quando não é, é a altura. */ .verbete__arte img { width: auto; height: auto; max-width: 100%; max-height: 100%; } } /* Tela larga mas MUITO baixa — um notebook de tela pequena, ou uma janela arrastada para metade da altura. Grudar uma carta que ocupa a janela inteira aí significa não sobrar tela nenhuma para o texto ao lado rolar contra. Abaixo de 600px de altura a arte volta a rolar junto com o resto. */ @media (min-width: 981px) and (max-height: 600px) { .verbete__arte { position: static; height: auto; display: block; } .verbete__arte img { max-height: none; width: 100%; } } /* --------------------------------------------------- os dois lados da carta Cada lado — em pé e invertida — é um bloco com fundo próprio, levemente destacado do pano. Não é enfeite: são dois textos longos em sequência, sobre a mesma carta, e sem separação visual clara a pessoa perde de vista qual dos dois está lendo. */ .verbete__lado { margin-bottom: clamp(1.5rem, 3vw, 2.2rem); padding: clamp(1.2rem, 3vw, 2rem); background: rgba(8,26,21,.5); border: 1px solid rgba(192,138,62,.18); border-radius: var(--raio); } /* A invertida ganha uma faixa de latão à esquerda. É a marca visual de que este é o outro lado da carta — e, para quem ainda não tem cadastro, de que aqui está a parte que ele ainda não abriu. */ .verbete__lado--invertida { border-left: 3px solid var(--latao); } .verbete__lado-titulo { margin: 0 0 .9rem; font-family: var(--letra-grav); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 600; letter-spacing: .06em; color: var(--latao-claro); } /* As palavras-chave: menores, cinza, em itálico. São o resumo do que vem abaixo, e a mesma decisão já tomada no caderno da mesa vale aqui — quem está lendo O VERBETE não pode ter o resumo gritando mais alto que ele. */ .verbete__chaves { margin: 0 0 1.1rem; padding-bottom: 1rem; font-size: .88rem; font-style: italic; line-height: 1.6; color: var(--marfim-3); border-bottom: 1px solid rgba(192,138,62,.15); text-align: justify; } /* O texto do verbete. Corpo um pouco maior que o do site e entrelinha larga: são vários parágrafos seguidos, e esta é a única página do Taharqa em que alguém senta para ler de verdade. `max-width` em ch — a unidade da largura do caractere — porque linha de texto corrido tem um limite de legibilidade que não depende do tamanho da tela: passando de uns 70 caracteres, o olho erra a volta e relê a mesma linha. */ .verbete__texto { max-width: 68ch; font-size: 1.02rem; line-height: 1.75; color: var(--marfim); /* JUSTIFICADO, COM HIFENIZAÇÃO OBRIGATÓRIA. `text-align: justify` sozinho é uma armadilha. Para alinhar as duas margens sem poder quebrar palavras, o navegador estica os espaços da linha — e em coluna estreita, ou numa linha que calhe de ter duas palavras longas, aparecem vãos enormes e os famosos "rios" de espaço branco descendo pelo parágrafo. Numa página cujo motivo de existir é ser lida, isso custa mais do que a margem reta rende. `hyphens: auto` é o que resolve: o navegador passa a poder quebrar as palavras nas sílabas, e os espaços voltam ao tamanho normal. Ele depende do dicionário do idioma, e é por isso que só funciona porque o cabecalho() declara — sem essa declaração, o navegador não sabe onde ficam as sílabas do português e a hifenização simplesmente não acontece, em silêncio. O prefixo -webkit- continua necessário para o Safari, que ainda não entende a propriedade sem ele. `text-wrap` NÃO entra aqui: `balance` e `pretty` brigam com justify em alguns navegadores, e o efeito de um anula o do outro. */ text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* ----------------------------------------------------------------- o portão O que aparece no lugar do texto da carta invertida para quem não tem cadastro. (O texto não está escondido aqui: ele não foi buscado do banco. Ver o comentário no alto de carta.php.) O tracejado é deliberado. Borda cheia pareceria mais um bloco de conteúdo; tracejada se lê como lacuna — algo que falta e que pode ser preenchido. */ .portao { padding: clamp(1.1rem, 3vw, 1.6rem); background: rgba(192,138,62,.06); border: 1px dashed rgba(192,138,62,.45); border-radius: var(--raio); } .portao__linha { max-width: 52ch; margin: 0 0 .9rem; font-size: .95rem; line-height: 1.65; color: var(--marfim); } .portao__linha--miuda { font-size: .84rem; color: var(--marfim-3); } .portao .botao { margin-block: .3rem .9rem; } .portao__linha--miuda:last-child { margin-bottom: 0; } /* "Entrar" é um