/* ═══════════════════════════════════════════════════════════════════════════ site.css — a pele do legadogrego.com. ★ DUAS PELES, E ISSO E DECISAO DO AUTOR (2026-08-22) Ate aqui o site era copia FIEL do mitologiagregainfo.com.br: video de fundo em todas as paginas, cartao de pergaminho por cima, Times New Roman 22/22 justificado. O autor mudou o pedido: "aquele video animado e so na home, nas outras paginas quero como fez no theautor.com/guias" Entao: · HOME → segue a copia fiel. Bronze, video, cartao de pergaminho. Todos os numeros dela continuam MEDIDOS no Wix (travas na secao 16 do testes.mjs) — quem "melhorar" a home derruba teste. · O RESTO → PELE DE LEITURA, a mesma dos guias do theautor.com: papel marfim, EB Garamond para ler, Cinzel para titulo, ouro so no enfeite. A paleta abaixo nao foi inventada: foi COPIADA do `site/build-guias.js` do theautor.com (as duas casas tem de ler iguais, nao parecidas). ⚠ POR QUE ISSO IMPORTA: um verbete daqui tem 4.100 palavras de media e o maior tem 15 mil. Texto justificado a 22px com entrelinha 22px sobre um video que mexe e uma tela de leitura ruim para 8 mil palavras — foi o que o original fazia, e e a razao do pedido. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── medidos no Wix: a HOME vive destes ───────────────────────────────── */ --ambar: #FFB030; /* menu */ --tinta: #464646; /* titulo e corpo do verbete na home */ --pergaminho: rgba(255,255,255,.83);/* o cartao de conteudo */ --bronze: #2a1a0e; /* base sob o video, enquanto ele nao pinta */ --cartao: 976px; /* largura do cartao */ --coluna: 624px; /* largura da coluna de texto */ /* ⚠ A LETRA DE LETREIRO ERA A "VALDEMAR", E ELA ESTAVA COMENDO O TEXTO. Medido no proprio arquivo (ferramentas/audita-fontes.mjs): o valdemar.ttf declara 48 codepoints no cmap cujo DESENHO e vazio — os dez algarismos, todos os sinais de pontuacao (! " & ' ( ) , - . / : ; ?) e Á Ç Í Ó Ô. Declarar no cmap e pior do que faltar: quando o caractere FALTA, o navegador troca de fonte sozinho e o leitor ve a letra certa; quando ele esta declarado com desenho vazio, o navegador acha que a fonte sabe desenhar e imprime NADA. Era isto que se via na home: "LANCAMENTO IMPERDIVEL" → "LAN AMENTO IMPERDIVEL" "16 de julho de 2023" → " de julho de " o rodape perdia os dois anos e o "!" da caixa de busca sumia. O autor autorizou a troca. A substituta nao foi escolhida por gosto: a captura do Wix mostra "cinzel,serif" em 17 lugares da home contra 9 da Valdemar — a Cinzel ja era a letra dominante do original. Ela ja esta no deploy (custa 0 byte novo), e a mesma dos guias do theautor.com, e tem algarismo, pontuacao e acento inteiros. */ --letreiro: "Cinzel", Georgia, "Times New Roman", serif; /* ⚠ O TITULO DA HOME TEM LETRA PROPRIA (2026-08-23). O autor reprovou a Cinzel no

— "a fonte nao serve" — e escolheu a Forum numa folha com seis candidatas, fotografadas no proprio heroi, no tamanho e na cor de verdade (`_lab/prova-letreiro.mjs` e `_lab/folha-letreiro.html`). ⚠ E SO O TITULO. A Cinzel continua no menu, nos botoes, na chamada e nos titulos de secao: sao papeis diferentes, e o par letra-de-nome + letra-de- texto e o arranjo normal. Trocar a `--letreiro` inteira mudaria a home toda — que nao foi o que ele reprovou. ⚠ A RESERVA E GEORGIA, e isso importa mais aqui que em qualquer outro lugar do site: se a Forum nao chegar, este e o maior texto da pagina, e ele tem de continuar legivel enquanto nao chega. */ --titulo: "Forum", Georgia, "Times New Roman", serif; --leitura: "Times New Roman", Times, serif; /* ── a PELE DE LEITURA (copiada do theautor.com/guias) ────────────────── */ --serif: "EB Garamond", Georgia, serif; --sans: "Inter", system-ui, -apple-system, sans-serif; --title: "Cinzel", Georgia, serif; --corpo: 19.5px; --larg: 1240px; /* a caixa da pagina */ --medida: 690px; /* a coluna de leitura — 72 caracteres por linha */ --fundo: #eee7d7; /* a mesa */ --folha: #f8f4e9; /* o papel */ --t1: #33291a; --t2: #5a4c36; --t3: #8d7d61; /* ⚠ DOIS OUROS, e trocar um pelo outro apaga o texto: o ESCURO (--accent) e para letra, porque tem contraste sobre papel; o VIVO (--ouro) so serve a filete e ornamento. A mesma armadilha ja documentada nos guias. */ --accent: #9a7420; --ouro: #d8a63a; --link: #8a6519; --h2: #42341c; --linha: rgba(146,106,38,.18); --linha2: rgba(146,106,38,.3); --caixa: #f3ecdc; --thbg: rgba(146,106,38,.09); --noite: #0b0906; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { background: var(--bronze); color: var(--tinta); font-family: var(--leitura); font-size: 22px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: clip; } /* ⚠ `height:auto` NAO E ENFEITE. Toda de conteudo leva width/height no HTML (para reservar a caixa e nao empurrar o texto quando carrega), e esses atributos entram como REGRA de CSS de baixa prioridade. Uma regra que mande so `width` deixa a ALTURA do atributo de pe e a imagem sai esticada — aconteceu na galeria da /itens, cartao de 273 px de largura com 1086 px de altura. Aqui a base conserta para todas. */ img, video { max-width: 100%; height: auto; } a { color: inherit; } .sr, .pula { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .pula:focus { position: fixed; top: 8px; left: 8px; width: auto; height: auto; clip-path: none; z-index: 99; background: #000; color: var(--ambar); padding: .6rem 1rem; border: 2px solid var(--ambar); } /* ═══ O TOPO — busca + menu. E o mesmo nas duas peles ═════════════════════ A faixa escura amarra as duas caras: na home ela flutua sobre o video, na pele de leitura ela e o teto da folha. */ .topo { position: sticky; top: 0; z-index: 20; background: rgba(10,6,3,.92); } body.leitura .topo { background: var(--noite); } .busca { position: relative; display: flex; align-items: center; width: 888px; max-width: calc(100% - 32px); margin: 0 auto; padding: 6px 0; } .busca input { flex: 1; height: 45px; padding: 0 46px 0 16px; background: rgba(255,255,255,.10); border: 1px solid rgba(255,176,48,.45); border-radius: 4px; color: #fff; font-family: var(--letreiro); font-size: 13px; letter-spacing: .06em; } .busca input::placeholder { color: #fff; opacity: .85; } .busca input:focus { outline: 2px solid var(--ambar); outline-offset: 1px; } .busca-btn { position: absolute; right: 6px; width: 34px; height: 34px; display: grid; place-items: center; cursor: pointer; background: var(--ambar); border: 0; border-radius: 3px; color: #2a1a0e; } .busca-btn svg { width: 18px; height: 18px; } .busca-resultados { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; max-height: 60vh; overflow-y: auto; background: #14100b; border: 1px solid rgba(255,176,48,.4); border-top: 0; } .busca-resultados a { display: block; padding: .6rem .9rem; text-decoration: none; font-family: var(--letreiro); font-size: 14px; color: var(--ambar); border-bottom: 1px solid rgba(255,176,48,.14); } .busca-resultados a:hover, .busca-resultados a:focus { background: rgba(255,176,48,.14); } .busca-resultados .br-cat { display: block; font-size: 12px; opacity: .65; font-family: var(--leitura); } .busca-resultados .br-vazio { padding: .8rem .9rem; color: #cbb28c; font-size: 14px; } /* ── menu: 11 categorias, Valdemar 12px ambar ────────────────────────────── */ .menu { border-top: 1px solid rgba(255,176,48,.22); } .mn { display: flex; justify-content: center; flex-wrap: wrap; list-style: none; } .mn-item { position: relative; } .mn-item > a, .mn-item > button { display: block; padding: .7rem .9rem; cursor: pointer; font-family: var(--letreiro); font-size: 12px; letter-spacing: .04em; color: var(--ambar); background: none; border: 0; text-decoration: none; border-right: 1px solid rgba(255,176,48,.22); } .mn-item:first-child > a { border-left: 1px solid rgba(255,176,48,.22); } .mn-item > a:hover, .mn-item > button:hover, .mn-item > a:focus-visible, .mn-item > button:focus-visible { background: rgba(255,176,48,.16); } .mn-item > a[aria-current="page"] { background: rgba(255,176,48,.22); } .mn-sub { position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 25; list-style: none; background: #14100b; border: 1px solid rgba(255,176,48,.4); display: none; } .mn-tem-filho:hover > .mn-sub, .mn-tem-filho:focus-within > .mn-sub, .mn-tem-filho.aberto > .mn-sub { display: block; } .mn-sub a { display: block; padding: .5rem .9rem; text-decoration: none; font-family: var(--letreiro); font-size: 12px; color: var(--ambar); } .mn-sub a:hover, .mn-sub a:focus-visible { background: rgba(255,176,48,.18); } .menu-sanfona { display: none; } /* ═══════════════════════════════════════════════════════════════════════════ PELE 1 — A HOME (copia fiel do Wix: video + cartao de pergaminho) ⚠ Os numeros aqui sao MEDIDOS, nao escolhidos. Ver secao 16 do testes.mjs. ═══════════════════════════════════════════════════════════════════════════ */ /* ── o fundo: um VIDEO 1425x900 em cover, fixo ───────────────────────────── */ .fundo { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .fundo-video { width: 100%; height: 100%; object-fit: cover; display: block; } /* ═══ O VEU SOBRE O VIDEO ══════════════════════════════════════════════════ ★ PEDIDO DO AUTOR (2026-08-23): "diminua um pouco a opacidade do video ao fundo, bota tipo mais preto". Era um preto chapado a 28%. ⚠ NAO VIROU UM PRETO CHAPADO MAIS FORTE, e a razao e de leitura: um veu uniforme escurece IGUAL onde tem texto e onde nao tem, entao para o titulo ficar legivel a arte inteira precisa apagar. Aqui sao tres camadas: · uma base de 52% em toda a tela — e a "opacidade" que ele pediu; · um degrade VERTICAL, mais fechado no topo (atras do menu) e embaixo (onde o heroi encosta na faixa clara), e mais aberto no meio, que e onde o guerreiro aparece; · uma vinheta radial, que fecha os cantos e empurra o olho para o centro. O resultado: o video escurece bastante, mas continua VENDO-SE — e o titulo ganha contraste sem que a arte precise sumir. */ .fundo-veu { position: absolute; inset: 0; background: radial-gradient(120% 85% at 50% 42%, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 62%, rgba(0,0,0,.62) 100%), linear-gradient(to bottom, rgba(0,0,0,.82) 0%, rgba(0,0,0,.50) 22%, rgba(0,0,0,.46) 58%, rgba(0,0,0,.74) 100%), rgba(0,0,0,.52); } header, main, footer { position: relative; z-index: 1; } /* ── o cartao de pergaminho: 976 px, rgba(255,255,255,.83) ───────────────── */ .cartao { width: var(--cartao); max-width: calc(100% - 24px); margin: 34px auto 60px; padding: 40px 44px 54px; background: var(--pergaminho); box-shadow: 0 18px 60px rgba(0,0,0,.45); } .cartao h1 { font-family: var(--letreiro); font-size: 48px; font-weight: 400; letter-spacing: .2em; color: var(--tinta); text-align: center; margin: 0 0 1.4rem; line-height: 1.15; } .cartao h2 { font-family: var(--letreiro); font-size: 32px; font-weight: 400; letter-spacing: .1em; color: var(--tinta); margin: 2rem 0 .8rem; } /* corpo: Times New Roman 22 / entrelinha 22, justificado — medido */ .cartao p, .cartao li { font-family: var(--leitura); font-size: 22px; line-height: 22px; color: var(--tinta); text-align: justify; } .cartao p { margin: 0 0 1.05rem; } .cartao a { color: #7a4a12; text-underline-offset: 2px; } /* a grade de icones da home — desenhada na secao HOME mais abaixo */ /* ═══════════════════════════════════════════════════════════════════════════ PELE 2 — LEITURA (as 91 paginas internas). Copiada dos guias. ═══════════════════════════════════════════════════════════════════════════ */ body.leitura { background: var(--fundo); color: var(--t2); font-family: var(--sans); font-size: var(--corpo); line-height: 1.75; } body.leitura a { color: var(--link); text-decoration: none; transition: color .2s; } body.leitura a:hover { color: var(--accent); } .wrap { max-width: var(--larg); margin: 0 auto; padding: 0 26px; } /* ── a barra de progresso da leitura: NA LATERAL ESQUERDA, com o numero ─── Num verbete de 15 mil palavras, saber "quanto falta" nao e enfeite: e a diferenca entre rolar e desistir. ⚠ ELA ERA UM FIO DE 2px NO TOPO. O autor pediu de pe, na esquerda, e mostrando a porcentagem (2026-08-24) — e a troca nao e girar 90 graus: 1. DE PE, ELA PRECISA DE TRILHO. No topo, o fio de ouro corria a largura da TELA, e a tela e a referencia: o olho compara o pedaco pintado com o resto da faixa sem pensar. Na vertical, sem um trilho atras, um risco de ouro no meio do nada nao diz proporcao nenhuma. 1b. ★★★ E O OURO VIVO SO FUNCIONAVA PORQUE ELA MORAVA NO ESCURO. Medido no navegador, com os tokens reais: `--ouro` (#d8a63a) contra o trilho da primeira versao dava **6,6:1 sobre a faixa escura do cabecalho e 1,39:1 sobre o papel** — ou seja, de pe a barra atravessava a pagina e DESAPARECIA justamente onde o leitor passa 95% do tempo. Deitada no topo isso nunca apareceu: ela vivia inteira sobre o cabecalho escuro. ⚠ Nenhuma cor unica resolve, porque a barra cruza dois fundos opostos — o melhor meio-termo (`--accent` sobre trilho translucido) dava 2,67:1 no papel, ainda abaixo do piso de 3:1 de componente nao-textual. A saida e a MESMA do selo, um paragrafo abaixo: o trilho leva fundo OPACO, e ai o contraste do preenchimento e sempre contra um fundo conhecido — `--accent` sobre `--caixa` = **3,65:1**, igual do topo ao rodape. ⚠ E o par foi COPIADO da paleta, nao inventado: e a mesma regra ja escrita la em cima — o ouro VIVO e para filete e ornamento, o ouro ESCURO (`--accent`) e o que tem contraste sobre papel. 2. O NUMERO PRECISA DE SELO PROPRIO. Ele fica fixo enquanto a pagina inteira passa por tras: a faixa escura do cabecalho, o papel marfim do texto e o rodape escuro. Nao existe UMA cor de letra que sirva aos tres — entao ele leva o proprio fundo, como um marcador de livro. 3. E ELE SOME QUANDO NAO HA O QUE MOSTRAR. Numa pagina que cabe na tela, um "0%" parado no canto e um numero que nunca muda: o `leitura.js` esconde a peca inteira. Ver o `hidden` la. */ /* ⚠⚠ E O TRILHO PRECISOU DE UMA SEGUNDA MEDICAO, porque a PRIMEIRA mediu a coisa errada. Eu conferi "preenchimento contra trilho" (3,65:1) e dei por fechado — mas `--caixa` contra `--folha` da **1,07:1**: o trilho era invisivel sobre o papel, e quem mostrou foi a FOTO em 375, nao a conta. Numa pagina no comeco da leitura nao se via barra nenhuma. ⚠ O dilema nao tem saida perfeita, e esta medido: escurecer o trilho para ele aparecer contra o papel derruba o contraste do preenchimento contra ELE — `#e0d5b8` ja cai para 2,94:1, abaixo do piso de 3:1. trilho vs papel preenchimento vs trilho --caixa 1,07 3,65 #e8dfc8 1,21 3,23 ← escolhido #e0d5b8 1,33 2,94 ✗ furou o piso ★ O QUE CARREGA A LEITURA DA BARRA NAO E O TRILHO: e o preenchimento contra o PAPEL, que da **3,91:1**. O trilho so responde "quanto falta", e essa pergunta agora tem uma resposta exata no selo — que e justamente o que o autor pediu. Por isso o trilho pode ser discreto; ele nao pode e sumir. */ /* ⚠⚠ E A TERCEIRA VERSAO MUDOU DUAS COISAS QUE A SEGUNDA TINHA ERRADO (pedido do autor, 2026-08-25): *"a porcentagem deveria acompanhar a bolinha que desce, como no site theautor.com, e estar por tras da faixa de pesquisa"*. 1. O SELO PARADO NO CANTO ERA UM NUMERO SEM LUGAR. A cabeca de luz desce a pagina e o numero ficava la embaixo, a 900px dela: duas pecas da MESMA informacao em dois cantos da tela. No `theautor.com` o mesmo indicador ja resolve isso ha meses — la o `` do fio de luz e desenhado em `(cabeca.x + 9, cabeca.y)` a cada quadro ("% de progresso, colada na cabeca"). Aqui nao precisa de JS nenhum: o selo VIRA FILHO do preenchimento e mora em `top: 100%`, que e exatamente onde o `::after` desenha a bolinha. Uma peca so, e o numero nunca desgruda da luz. 2. Z-INDEX 60 PASSAVA POR CIMA DA BUSCA. A faixa do topo e `z-index: 20`, e a barra em 60 cruzava por cima dela — o selo entrava na faixa escura da busca como um adesivo. Agora e 15: ACIMA do texto (header/main/footer sao `z-index: 1`) e SEMPRE ABAIXO do topo. A invariante e a mesma do fio do `theautor.com`, escrita la em uma linha: fio < header. ⚠ E nao pode ser 0: o `.palco` pinta `--folha` opaco, entao a barra atras dele nao ficaria discreta — ficaria INVISIVEL. 3. O `bottom: 16px` NAO E MARGEM DE ENFEITE. Com o selo montado na ponta do preenchimento, aos 100% o centro dele cairia na borda de baixo da tela e metade do numero ficaria fora. O selo tem 22px de altura (medido): 16px de folga deixam a bolinha (9px) e o numero inteiros dentro da tela. */ .progresso { position: fixed; top: 0; left: 0; bottom: 16px; z-index: 15; width: 3px; background: #e8dfc8; } .progresso[hidden] { display: none; } /* ⚠ sem `opacity` no preenchimento: a medicao de 3,65:1 e da cor cheia, e qualquer transparencia aqui a devolve para baixo do piso. ★ O BRILHO E HALO, NAO E A COR — pedido do autor: "meio brilhante neon tranquilo, suave" (2026-08-24). E a distincao importa, porque este projeto ja mediu que o ouro VIVO some sobre o papel (1,39:1, ver o cabecalho deste bloco): se o neon virasse a cor do preenchimento, a barra ficaria bonita e ilegivel de novo. Entao a barra continua sendo `--accent` cheio — que e o que carrega o contraste — e o ouro vivo entra so como LUZ EM VOLTA, em `box-shadow`, onde ele nao precisa de contraste nenhum: e reflexo. ⚠ E o halo NAO PULSA. "Tranquilo, suave" e uma luz parada; uma barra de leitura que respira no canto do olho compete com o texto — e a regra do projeto sobre animacao ja diz que ela e continua, nunca em atos. Sem animacao, tambem nao ha nada que `prefers-reduced-motion` precise desligar. */ .progresso i { display: block; width: 100%; height: 0; background: var(--accent); position: relative; box-shadow: 0 0 5px rgba(216,166,58,.5), 0 0 12px rgba(216,166,58,.24); } /* a CABECA: o pontinho de luz onde a leitura esta agora. E o unico lugar em que o ouro vivo aparece cheio — 9px de diametro, fora da area util. */ .progresso i::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 9px; height: 9px; transform: translate(-50%, 50%); border-radius: 50%; background: var(--ouro); box-shadow: 0 0 8px 2px rgba(216,166,58,.6), 0 0 18px 5px rgba(216,166,58,.28); } /* ⚠ A LARGURA DO SELO E FIXA, E `tabular-nums` NAO BASTAVA. Medido no navegador: com a caixa livre, "0%" dava 38px, "10%" 40,9px e "100%" 48,6px — o selo mudava de tamanho tres vezes durante uma leitura, e um numero que treme no canto do olho puxa mais atencao do que o texto que se esta lendo. `tabular-nums` so iguala os DIGITOS entre si; quem muda aqui e a quantidade deles. A largura vai em `em` (e nao nos 50px que a medicao deu) para acompanhar a fonte: se a Inter nao carregar e entrar a do sistema, a caixa cresce junto em vez de cortar o "100%". */ /* ⚠ E ELE E FILHO DO PREENCHIMENTO, NAO IRMAO. `top: 100%` dentro de `.progresso i` e a MESMA linha em que o `::after` desenha a bolinha (ele usa `bottom: 0` do mesmo pai): as duas pecas nascem coladas por construcao, e nenhum JS precisa mante-las em dia. O `translateY(-50%)` centra o numero na luz; o `left: 14px` o poe FORA da barra de 3px, do lado de dentro da margem. ⚠ O `leitura.js` continua achando o selo por `caixa.querySelector('b')` — descendente, nao filho direto. */ .progresso b { position: absolute; top: 100%; left: 14px; transform: translateY(-50%); width: 4.6em; text-align: center; /* ⚠ 12px, e nao 11: o menor texto do site e o menu, medido em 12px no Wix (trava "menu: 12px (medido)"). Um selo de 11px estrearia como a menor letra da pagina inteira — e legibilidade neste projeto se MEDE, nao se arredonda para baixo porque "e so um numerinho". */ font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .05em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--accent); background: var(--folha); border: 1px solid var(--linha2); border-radius: 3px; padding: 4px 6px; /* o mesmo halo da barra, mais fraco: o selo e a outra ponta da mesma peca */ box-shadow: 0 0 10px rgba(216,166,58,.3); } /* ── NO DESKTOP A BARRA TROCA DE LADO: vai para a DIREITA, rente ao texto ── Pedido do autor (2026-08-25): *"no modo desktop, seria interessante que tivesse ao lado direito, meio rente ao texto da parte direita"*. E ele tem razao pela geometria, nao por gosto: no desktop a ESQUERDA e ocupada pelo trilho do sumario, entao a barra na esquerda corre por tras de uma coluna cheia de links; a direita do texto ha um vao vazio de mais de 400px. ⚠ A CONTA E DO PROPRIO LAYOUT, e nao um `right:` chutado. A coluna de leitura acaba, contado do inicio do miolo, nos 232px do trilho + 44px de vao (as duas medidas de `.palco > .wrap`) + a largura do texto, que e `--medida`; e o miolo comeca 26px dentro da caixa de `--larg`. Entao: borda direita do texto = 50% - (--larg / 2) + 26px + 232px + 44px + --medida e a barra fica 16px depois dela. `left: 50%` num `fixed` resolve contra a MESMA largura que o `margin: 0 auto` do `.wrap` usa (a area util, sem a barra de rolagem) — medido: com 1585px de area util o texto acaba em x=1165 e a barra cai em x=1181. ⚠⚠ E OS NUMEROS SAO OS DO LAYOUT, NAO COPIAS DELES. A primeira versao somava um `966px` fechado — a conta ja feita. Um `966` na mao apodrece na hora em que alguem mexer no trilho, no vao ou na medida da coluna: a barra sairia de perto do texto sem nada acender. Por isso `--medida` entra por referencia, e ha trava no `testes.mjs` (§ "a barra de leitura") cobrando que os 232 e os 44 daqui sejam os MESMOS de `.palco > .wrap`. ⚠ O corte e `--larg` (1240px) e nao um numero novo: abaixo disso o `.wrap` deixa de estar centrado, a formula deixa de valer, e a barra volta para a esquerda — que e onde ela ja funciona. */ @media (min-width: 1240px) { .progresso { left: 50%; right: auto; margin-left: calc(var(--larg) / -2 + 26px + 232px + 44px + var(--medida) + 16px); } } /* ── o cabecalho do documento: a faixa escura, e o papel comeca embaixo ─── */ header.doc { position: relative; padding: 46px 0 44px; text-align: center; background: radial-gradient(760px 320px at 50% -30%, #241c0e 0, #0f0c07 72%), var(--noite); color: #cbbb92; overflow: hidden; } /* a arte do verbete atras do titulo, bem apagada: da cor a faixa sem disputar com a letra. `object-position: 50% 30%` porque em retrato de divindade o assunto esta no terco de cima, nao no meio. */ header.doc .doc-arte { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .17; filter: grayscale(.35); } header.doc .wrap { position: relative; z-index: 1; } .trilha { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #a2916c; margin-bottom: 14px; font-family: var(--sans); } .trilha b { opacity: .45; margin: 0 6px; font-weight: 400; } .trilha a { color: var(--ouro); } .trilha a:hover { color: #f0dca6; } header.doc h1 { font-family: var(--title); color: #f7edd2; font-weight: 500; letter-spacing: .04em; font-size: clamp(30px, 4.6vw, 46px); line-height: 1.16; margin: 0 auto 18px; max-width: 15em; } .assinatura { display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: #a2916c; font-family: var(--sans); } .assinatura b { color: #e2cf9f; font-weight: 600; } .tempo { position: relative; padding-left: 19px; } .tempo::before { content: ''; position: absolute; left: 0; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border: 1.5px solid var(--ouro); border-radius: 50%; opacity: .8; } /* ── o palco de papel ────────────────────────────────────────────────────── */ .palco { background: var(--folha); border-top: 1px solid rgba(0,0,0,.25); padding: 0 0 10px; } .palco > .wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0 44px; align-items: start; padding-top: 40px; padding-bottom: 56px; } /* ── o trilho lateral: sumario que acompanha a rolagem ───────────────────── */ .rail { position: sticky; top: 96px; } .sumario { border-left: 2px solid var(--linha2); padding-left: 16px; } .sum-tit { font-family: var(--sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--t3); margin-bottom: 10px; } .sumario ol { list-style: none; counter-reset: s; } .sumario li { counter-increment: s; margin: 0 0 7px; } .sumario a { display: block; font-family: var(--sans); font-size: 13.5px; line-height: 1.4; color: var(--t2); padding-left: 22px; position: relative; } .sumario a::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px; font-size: 10.5px; color: var(--t3); letter-spacing: .04em; } .sumario a:hover, .sumario a.aqui { color: var(--accent); } .sumario a.aqui::before { color: var(--ouro); } /* ── a coluna de leitura ─────────────────────────────────────────────────── */ .leitura main { min-width: 0; max-width: var(--medida); counter-reset: sec; } .lead { font-family: var(--serif); font-size: calc(var(--corpo) + 3.5px); line-height: 1.62; color: var(--t1); margin: 0 0 34px; } /* ═══ A LETRA CAPITULAR ════════════════════════════════════════════════════ Pedido do autor: "com letra capitular". Ela cai na ABERTURA do verbete — o paragrafo que diz de quem e a pagina — e em nenhum outro lugar: capitular repetida deixa de ser entrada e vira enfeite. ⚠ QUEM DECIDE SE ELA APARECE E O MONTADOR, NAO O CSS. A classe extra ".capitular" so e escrita quando o paragrafo comeca por LETRA e nao tem uma atribuicao de fonte grudada na frente. Sem essa porta, a capitular cairia no "H" de "Homero, Iliada 5. 590" de uma nota de fonte, ou numa aspa de abertura — e uma aspa gigante flutuando no canto e exatamente o tipo de enfeite sem significado que nao entra aqui. ⚠ "float" + "::first-letter" e o unico jeito que funciona sem cortar o texto em dois elementos. O "line-height" baixo e o que faz a letra ocupar TRES linhas certas em vez de empurrar a primeira; o "padding-top" acerta a altura da maiuscula da Cinzel contra a linha de base da Garamond. */ .lead.capitular::first-letter { float: left; font-family: var(--title); font-weight: 500; font-size: 3.42em; line-height: .78; padding: .1em .09em 0 0; margin: .02em .02em -.06em 0; color: var(--accent); } .corpo { font-family: var(--serif); color: var(--t2); } .corpo p { margin: 0 0 22px; } /* ⚠ RECUO DE PARAGRAFO, pedido do autor. Recuo e travessao de paragrafo NAO se somam com espaco entre paragrafos sem virar poluicao — por isso o recuo so vale a partir do SEGUNDO paragrafo de cada bloco, que e a regra tipografica classica (o primeiro depois de um titulo nunca recua). */ .corpo p + p { text-indent: 1.6em; } .corpo p + p.centro, .corpo .cit + p, .corpo p.nota-fonte { text-indent: 0; } /* ⚠ A ABERTURA NUNCA RECUA — e ela nem sempre e o primeiro `p` da coluna. Achado numa FOTO da /ares (2026-08-23): a pagina abre pela secao "Familia de Ares", entao a abertura vem depois de dois `

` e caiu na regra de cima. Recuo somado a capitular flutuante nao da recuo: da um BURACO. O titulo do verbete saiu "A RES era o deus olimpico da guerra", com a capitular de um lado e o resto da palavra do outro. */ .corpo p + p.lead { text-indent: 0; } /* ═══ A SECAO ══════════════════════════════════════════════════════════════ Cada secao e numerada. O numero NAO e enfeite: um verbete daqui tem ate 25 secoes e 15 mil palavras, e o numero e o que amarra o titulo ao sumario do trilho (que ja numera 01, 02, 03). Quem chega da busca no meio da pagina descobre em que parte do documento caiu. ⚠ Nada de fleurao, roseta ou friso: gosto do autor MEDIDO — ele corta rendilhado abstrato em 92%. O que entra aqui e informacao (o numero) e tipografia (o filete de ouro que os guias do theautor.com ja usam). */ .corpo .sec { counter-increment: sec; } .corpo h2 { position: relative; font-family: var(--title); font-weight: 500; color: var(--h2); font-size: clamp(23px, 2.6vw, 29px); line-height: 1.24; letter-spacing: .015em; margin: 58px 0 8px; text-transform: none; text-wrap: balance; } /* ⚠ O NUMERO E LETRA, E LETRA NAO USA O OURO VIVO. Escrevi este numero em --ouro (#d8a63a) na primeira versao: sobre o papel marfim (#f8f4e9) isso da 2,1:1 de contraste, e a foto mostrou o numero quase apagado. A pele ja tem DOIS ouros exatamente por causa disso — o vivo (--ouro) e para filete e ornamento, o escuro (--accent, #9a7420) e o unico que serve como tinta. E a mesma armadilha ja registrada nos guias do theautor.com. */ .corpo .sec > h2::before { content: counter(sec, decimal-leading-zero); position: absolute; left: -54px; top: .46em; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; color: var(--accent); opacity: .85; } /* o filete de ouro embaixo do titulo de secao — o mesmo dos guias */ .corpo h2 + .filete, .sec > .filete { height: 2px; width: 74px; margin: 0 0 22px; background: linear-gradient(90deg, var(--ouro), rgba(216,166,58,0)); } /* ═══ O SUBTITULO ══════════════════════════════════════════════════════════ Sao os 94 rotulos que o Wix tinha achatado em paragrafo ("Queda dos Titas:"). Ficam em Inter maiusculo, com um tracinho de ouro na frente, para nao disputar com o

em Cinzel — a hierarquia se le de longe. */ .corpo h3 { position: relative; font-family: var(--sans); font-weight: 600; color: var(--t1); font-size: 14.5px; letter-spacing: .11em; text-transform: uppercase; margin: 34px 0 12px; padding-left: 26px; line-height: 1.45; } .corpo h3::before { content: ''; position: absolute; left: 0; top: .62em; width: 16px; height: 2px; background: var(--ouro); opacity: .85; } .corpo .sec:first-child > h2 { margin-top: 8px; } /* o primeiro paragrafo depois de um subtitulo nao recua — regra classica */ .corpo h3 + p { text-indent: 0; } .corpo strong, .corpo b { color: var(--t1); font-weight: 600; } .corpo a { border-bottom: 1px solid var(--linha2); } /* ═══ O ENLACE ENTRE VERBETES ══════════════════════════════════════════════ Sao 696 no site, e a pergunta de desenho e uma so: como marcar um nome proprio no meio do texto sem picotar a linha? A resposta e o filete embaixo, nunca a cor forte — num paragrafo que cita seis divindades, seis palavras coloridas viram um texto com sarampo. O nome fica na MESMA tinta do texto; o que muda e o traco embaixo, em ouro apagado. So no toque/hover ele ganha cor. */ .corpo a.enlace { color: var(--t1); border-bottom: 1px solid rgba(216,166,58,.55); text-decoration: none; transition: color .18s, border-color .18s, background-color .18s; padding: 0 .5px; } .corpo a.enlace:hover, .corpo a.enlace:focus-visible { color: var(--accent); border-bottom-color: var(--accent); background: rgba(216,166,58,.12); } /* ═══ A NOTA DO EDITOR ═════════════════════════════════════════════════════ ★ E A UNICA VOZ DO SITE QUE NAO E DO AUTOR NEM DE HOMERO — e por isso ela tem de PARECER outra coisa. O site se anuncia como "Registros Oficiais Traduzidos em PT BR": se a nossa explicacao viesse na mesma tipografia da prosa do autor, o leitor nao teria como saber quem esta falando. Entao: papel proprio, letra de interface (nunca a Garamond do texto), corpo menor, e a palavra "Nota" escrita na frente. Nao e enfeite — e procedencia. ⚠ e `