/* Grimório — a identidade visual do Ravenhold. * * POR QUE ESTE ARQUIVO EXISTE, E SEPARADO * * O jogo nasceu com a silhueta do Baiak: três colunas de mini-janelas, moldura * de pedra, marrom e dourado. Funciona, mas é a cara de outro servidor. A * identidade escolhida é outra — um códice iluminado: pergaminho, capitulares, * rubricas em vermelhão, selo de cera, anotação à margem. * * Fica em arquivo próprio, e não dentro de `styles.css`, porque aquele arquivo * veste 92 painéis que já funcionam. Uma pele nova escrita por cima dele * quebraria tudo de uma vez. Aqui a pele é ADITIVA: vale para o que carrega a * classe `.grimorio`, e o resto do jogo segue intacto enquanto as telas * migram uma a uma. */ .grimorio { /* PALETA: a do jogo, nao pergaminho. A versao clara foi rejeitada ("essa cor ficou pessima"), entao a Ciclopedia veste as mesmas cores do resto da interface. O que fica da ideia do grimorio e a ESTRUTURA — capitulo, verbete, selo, pautado, anotacao a margem —, nao a cor. Trocar so os tokens abaixo devolve o pergaminho, se um dia for o caso. */ --papel: #30302e; /* fundo da ficha, igual ao --panel do jogo */ --papel-fundo: #262624; /* faixa de titulo */ --papel-vinco: #1c1c1a; /* sulco, trilho de barra */ --tinta: #eae8e2; /* texto */ --tinta-fraca: #a9a69d; /* texto de apoio */ --rubrica: #bd5a4b; /* o acento quente, agora sobre escuro */ --rubrica-clara: #d4796a; --ouro: #e0b54a; --ouro-claro: #f0cf7a; --verdete: #55b768; --regua: 1px solid #4a4a46; --sombra-pagina: inset 0 1px 0 #ffffff0b, 0 18px 40px -22px #000; color: var(--tinta); background: var(--papel); background-image: none; font-family: Cinzel, "Iowan Old Style", Georgia, serif; } /* Cabeçalho de página: o título é rubrica, com filete duplo abaixo. O filete duplo é o que faz ler como página de livro e não como header de site. */ .grimorio-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 0 0 6px; border-bottom: var(--regua); box-shadow: 0 3px 0 -2px #b9a67e; /* o segundo filete */ } .grimorio-cabeca h2 { margin: 0; font-size: 19px; font-weight: 600; letter-spacing: .05em; color: var(--rubrica); font-variant: small-caps; } .grimorio-cabeca small { color: var(--tinta-fraca); font-size: 10px; font-style: italic; letter-spacing: .03em } /* Capitular: a primeira letra da seção, em ouro sobre bloco. Flutua à esquerda e o texto se ajusta em volta, como na iluminura. */ .grimorio-capitular::first-letter { float: left; font-size: 44px; line-height: .82; margin: 3px 8px 0 0; color: var(--ouro); font-weight: 700; text-shadow: 0 2px 4px #000a; } /* Abas como marcadores de página presos na borda ------------------------ */ .grimorio-guias { display: flex; gap: 4px; margin: 14px 0 0; padding: 0; list-style: none; flex-wrap: wrap } .grimorio-guias button { border: 1px solid #4a4a46; border-bottom-color: transparent; background: var(--papel-vinco); color: var(--tinta-fraca); padding: 8px 15px; font: 600 10px/1 inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; border-radius: 3px 3px 0 0; position: relative; top: 1px; } .grimorio-guias button:hover { color: var(--tinta); background: #3a3a37 } .grimorio-guias button[aria-selected="true"] { background: var(--papel); color: var(--rubrica); border-color: #4a4a46; border-bottom-color: var(--papel); box-shadow: 0 -2px 0 var(--rubrica) inset; } .grimorio-guias button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 1px } .grimorio-folha { border: var(--regua); border-top: 0; padding: 18px 20px; background: var(--papel); box-shadow: var(--sombra-pagina); min-height: 300px } /* Verbete: cada criatura, prey ou receita é uma entrada da página. O pautado pontilhado ligando nome e número é o que amarra a leitura no papel. */ .grimorio-verbete { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px dotted #4a4a46; } .grimorio-verbete:last-child { border-bottom: 0 } .grimorio-selo { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, var(--rubrica-clara), var(--rubrica) 62%, #6e1f14); color: #f6e6cf; font: 700 12px/1 inherit; box-shadow: 0 2px 4px #0000004d, 0 0 0 1px #00000022 inset; } .grimorio-verbete b { font-weight: 600; font-size: 13px } .grimorio-verbete small { display: block; color: var(--tinta-fraca); font-size: 10px; font-style: italic; margin-top: 2px } .grimorio-numero { font-variant-numeric: tabular-nums; font-size: 12px; color: var(--tinta-fraca) } .grimorio-numero b { color: var(--tinta); font-size: 14px } /* Barra de progresso desenhada como régua de escriba, não como widget. */ .grimorio-regua { height: 7px; background: var(--papel-vinco); border: 1px solid #4a4a46; position: relative; overflow: hidden } .grimorio-regua i { display: block; height: 100%; background: repeating-linear-gradient(135deg, var(--verdete) 0 5px, #416049 5px 10px) } .grimorio-regua.rubro i { background: repeating-linear-gradient(135deg, var(--rubrica-clara) 0 5px, var(--rubrica) 5px 10px) } /* Anotação à margem: o texto de apoio some para a lateral, em itálico menor, como quem escreveu depois. */ .grimorio-margem { color: var(--tinta-fraca); font-size: 10px; font-style: italic; line-height: 1.55; border-left: 2px solid var(--ouro); padding-left: 10px; margin: 12px 0 } .grimorio-botao { border: 1px solid var(--ouro); background: linear-gradient(180deg, #3a3a37, #2a2a28); color: var(--tinta); padding: 7px 13px; font: 600 10px/1 inherit; letter-spacing: .09em; text-transform: uppercase; cursor: pointer; } .grimorio-botao:hover:not(:disabled) { background: linear-gradient(180deg, #45453f, #34342f); border-color: var(--ouro-claro) } .grimorio-botao:disabled { opacity: .42; cursor: not-allowed } .grimorio-botao.rubro { border-color: var(--rubrica); color: var(--rubrica) } .grimorio-botao:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px } .grimorio-vazio { color: var(--tinta-fraca); font-style: italic; text-align: center; padding: 44px 12px; font-size: 12px } /* O selo de cera fecha a página, como assinatura. Decorativo de propósito: é o único elemento aqui que não carrega informação. */ .grimorio-rodape { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding-top: 12px; border-top: var(--regua); color: var(--tinta-fraca); font-size: 10px; font-style: italic } @media (max-width: 700px) { .grimorio-folha { padding: 14px } .grimorio-verbete { grid-template-columns: 28px 1fr; } .grimorio-numero { grid-column: 2; } .grimorio-cabeca h2 { font-size: 15px } } /* ========================================================================== A CASCA — DESLIGADA, E POR QUE ========================================================================== O que vem abaixo veste o jogo inteiro (cabecalho, colunas, mini-janelas, modais). Esta ESCRITO e NAO ESTA ATIVO: para ligar, basta devolver `class="grimorio-tema"` ao elemento em index.html. Motivo de estar desligado: com ele ativo, cabecalho, coluna direita, centro e modais viram pergaminho, mas as fichas da coluna esquerda (SKILLS, DAMAGE, LOOT ANALYSER) continuam escuras — e como o texto ja virou tinta, elas ficam escuro-sobre-escuro, ilegiveis. Meia migracao e pior que nenhuma, entao a chave fica desligada ate o restante ceder. O QUE JA FOI DESCARTADO, para nao repetir: 1. Escada de especificidade — nao alcanca `!important`, e o styles.css tem 331 deles. 2. Camada de cascata (@layer) — PIORA: a especificacao inverte a ordem das camadas para declaracoes importantes, entao o arquivo antigo fica ainda mais forte. 3. `!important` sozinho — perde para `body:not(.public-view) .panel`, que tambem e importante e vale (0,2,1) contra (0,2,0); entre importantes, quem decide continua sendo a especificidade. 4. Classe no — o jogo REESCREVE `document.body.className` em tempo de execucao e apaga a classe. Por isso o tema vale para . Com (1)+(3)+(4) juntos a maior parte da tela cedeu; o que resiste na coluna esquerda ainda nao foi identificado — as medicoes dizem que aqueles nos estao transparentes, o que contradiz o que aparece na tela, e a proxima pista e essa contradicao. */ /* ========================================================================== O VOLUME INTEIRO — a pele aplicada a casca do jogo ========================================================================== PRIMEIRA TENTATIVA, E POR QUE FALHOU Comecei vestindo classe por classe (`.panel`, depois `.client-widget`, `.sk-overview`...). O `styles.css` tem 1.876 regras e 1.646 cores cravadas, entao cada seletor novo acertava uma caixa e deixava a vizinha escura: o resultado foi meia tela em pergaminho, meia em cinza, e texto claro sobre papel claro. Um estado pior do que qualquer um dos dois extremos. O QUE FUNCIONA: ZERAR E REPINTAR Primeiro apagamos TODOS os fundos dentro da casca e devolvemos tinta ao texto. Depois pintamos so os recipientes que devem ser papel. Assim o padrao deixa de ser "escuro ate que eu descubra o seletor" e passa a ser "papel ate que eu pinte outra coisa" -- previsivel, e sem `!important` em lugar nenhum. O QUE ESCAPA DA REGRA, de proposito: - a ARENA, que continua escura: a pagina e clara e o combate e a gravura encaixada nela. Iluminar a masmorra mataria a leitura e a atmosfera. - as BARRAS de vida/mana/xp, que carregam significado por cor. - imagens, icones e canvas, que nao sao superficie. */ html.grimorio-tema body { --bg: #ded2b4; --panel: #e9e0c8; --panel-2: #e2d7bb; --sunken: #d3c5a2; --line: #b9a67e; --edge-hi: #cbbb95; --accent: #2b2118; --gold: #8d6a1f; --gold-2: #a8842c; --text: #2b2118; --muted: #6b5a45; --red: #9d2f21; --green: #4a6b52; --radius: 2px; background: #cfc09c; font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; } /* PRECISA DE `!important`, E A RAZAO ESTA NO ARQUIVO ANTIGO. O `styles.css` traz 331 declaracoes `!important` — a que pintava a HUD e `background: ... #30302ecc !important`. Nenhuma folha posterior vence isso sem usar a mesma arma. Tentei antes duas saidas mais limpas e as duas falharam, cada uma por um motivo que vale registrar: 1. escada de especificidade — nao alcanca `!important`; 2. camada de cascata (`@layer`) — PIOROU: a especificacao inverte a ordem das camadas para declaracoes importantes, entao jogar o arquivo antigo numa camada baixa deixou aquelas 331 regras ainda mais fortes. Entao usamos `!important` apenas nas propriedades de SUPERFICIE (fundo, borda, cor, sombra), e so dentro de `html.grimorio-tema body`. Layout, tamanho e posicao continuam do arquivo antigo, intocados. */ /* PRECISA DE `!important` **E** DE ESPECIFICIDADE. Foi o que me custou mais tentativas, entao fica registrado: - so escada de seletor: nao alcanca `!important`; - so `!important`: perde para `body:not(.public-view) .panel`, que tambem e importante e vale (0,2,1) contra os meus (0,2,0) — entre duas declaracoes importantes, quem decide ainda e a especificidade; - camada `@layer`: PIORA, porque a especificacao inverte a ordem das camadas justamente para declaracoes importantes. A combinacao que funciona e `html.grimorio-tema body ...` (3 classes+2 elementos) com `!important` nas propriedades de superficie. */ /* O TEMA MORA NO , NAO NO , e a razao e concreta: o jogo reescreve `document.body.className` em tempo de execucao, entao uma classe posta no body some assim que o app entra. Foi o que me fez perseguir sombras — o CSS estava certo e simplesmente deixava de casar. O `documentElement` nao e tocado por ninguem. */ /* --- 1. ZERAR ------------------------------------------------------------ Vale para a casca e para os modais. `background-color` e apagado; o `background-image` tambem, senao as molduras de pedra do tema antigo continuariam desenhadas por cima do papel. */ html.grimorio-tema body .shell, html.grimorio-tema body .shell *:not(canvas):not(img):not(svg):not(path), html.grimorio-tema body .game-modal, html.grimorio-tema body .game-modal *:not(canvas):not(img):not(svg):not(path) { background-color: transparent !important; background-image: none !important; border-color: #b9a67e !important; color: #2b2118 !important; box-shadow: none !important; text-shadow: none !important; border-radius: 0; } /* --- 2. REPINTAR --------------------------------------------------------- Os recipientes viram fichas de papel presas na pagina. */ html.grimorio-tema body .shell > *, html.grimorio-tema body .panel, html.grimorio-tema body .client-widget, html.grimorio-tema body .client-boosts, html.grimorio-tema body .client-stamina, html.grimorio-tema body .party-card, html.grimorio-tema body .hunt-analyzer, html.grimorio-tema body .game-modal { background-color: #e9e0c8 !important; background-image: repeating-linear-gradient(92deg, #00000005 0 2px, transparent 2px 5px) !important; border: 1px solid #b9a67e !important; box-shadow: 0 1px 0 #fffaf0 inset, 0 6px 14px -12px #1a120b !important; } html.grimorio-tema body .game-modal { box-shadow: 0 1px 0 #fffaf0 inset, 0 24px 60px -28px #000 !important; } html.grimorio-tema body .modal-backdrop { background-color: #14100acc } /* Titulos: rubrica em versalete. E o que faz cada ficha ler como capitulo. */ html.grimorio-tema body .panel > .hdr, html.grimorio-tema body .panel > header, html.grimorio-tema body .client-widget > header, html.grimorio-tema body .party-card > header { background-color: #ded2b4 !important; border-bottom: 1px solid #b9a67e; } html.grimorio-tema body h2, html.grimorio-tema body h3, html.grimorio-tema body h4, html.grimorio-tema body .eyebrow, html.grimorio-tema body .field-label, html.grimorio-tema body .panel > .hdr, html.grimorio-tema body .panel-title { color: #9d2f21 !important; font-variant: small-caps; letter-spacing: .05em; } html.grimorio-tema body .muted, html.grimorio-tema body small, html.grimorio-tema body .modal-subtitle { color: #6b5a45 } /* --- 3. CONTROLES -------------------------------------------------------- */ /* A regra de botao vale so DENTRO do jogo. Sem escopo ela vazava para a landing e transformava links de texto ("WIKI", "CONHECER O MUNDO") em caixinhas de pergaminho sobre a arte escura — justamente na primeira tela que o visitante ve. */ html.grimorio-tema .shell button:not(.tab):not(.modal-close), html.grimorio-tema .game-modal button:not(.tab):not(.modal-close) { background-color: #e2d7bb !important; border: 1px solid #b9a67e !important; color: #2b2118 !important; font-family: inherit; letter-spacing: .06em; } html.grimorio-tema .shell button:not(.tab):not(.modal-close):hover, html.grimorio-tema .game-modal button:not(.tab):not(.modal-close):hover { background-color: #f0e6cc !important; border-color: #a8842c !important; } html.grimorio-tema body .primary-action, html.grimorio-tema body .buy-button { background-image: linear-gradient(180deg, #a8842c, #8d6a1f) !important; border-color: #6f5316 !important; color: #fdf6e3 !important; } html.grimorio-tema body .modal-close { background-color: #ded2b4 !important; border: 1px solid #b9a67e !important; color: #6b5a45 !important; } html.grimorio-tema body .modal-close:hover { background-color: #9d2f21 !important; color: #f6e6cf !important; border-color: #6e1f14 !important; } html.grimorio-tema body input, html.grimorio-tema body select, html.grimorio-tema body textarea { background-color: #f3ecd8 !important; border: 1px solid #b9a67e !important; color: #2b2118 !important; } html.grimorio-tema body .row { border-bottom: 1px dotted #bfae88 } /* --- 4. O QUE MANTEM COR: as barras ------------------------------------- */ html.grimorio-tema body .bar, html.grimorio-tema body .client-stamina .track, html.grimorio-tema body .party-resource { background-color: #cdbf9c !important; border: 1px solid #b09b72 !important; } html.grimorio-tema body .bar > i, html.grimorio-tema body .bar > span, html.grimorio-tema body .party-resource > i, html.grimorio-tema body [class*="fill"], html.grimorio-tema body [id$="Bar"] { background-image: repeating-linear-gradient(135deg, #4a6b52 0 5px, #416049 5px 10px) !important; background-color: #4a6b52 !important; } html.grimorio-tema body [id*="Mana"], html.grimorio-tema body .mana > i { background-image: repeating-linear-gradient(135deg, #3f5f86 0 5px, #35507180 5px 10px) !important; background-color: #3f5f86 !important; } /* --- 5. A CAPA: cabecalho e docas ---------------------------------------- */ html.grimorio-tema body .topbar { background-image: linear-gradient(180deg, #2e2419, #221a12) !important; border-bottom: 3px double #8d6a1f; } html.grimorio-tema body .topbar *:not(img) { color: #c3b28c } html.grimorio-tema body .topbar .brand strong { color: #e8d9b4 } html.grimorio-tema body .tab.nav-active, html.grimorio-tema body .tab:hover { color: #f0e3c0 } html.grimorio-tema body .tab-submenu { background-color: #2a2117 !important; border: 1px solid #6d5a3b !important; } html.grimorio-tema body .tab-submenu * { color: #c3b28c } html.grimorio-tema body .client-chat-strip, html.grimorio-tema body .client-bottom, html.grimorio-tema body .client-hotbar { background-image: linear-gradient(180deg, #2e2419, #221a12) !important; border-color: #6d5a3b !important; } html.grimorio-tema body .client-chat-strip *:not(img), html.grimorio-tema body .client-bottom *:not(img), html.grimorio-tema body .client-hotbar *:not(img) { color: #e8d9b4 } /* --- 6. A GRAVURA: a arena continua escura ------------------------------- */ html.grimorio-tema body .combat-stage, html.grimorio-tema body .combat-stage * { color: #e8d9b4 !important; } html.grimorio-tema body .combat-stage { background-color: #0b0a08 !important; border: 1px solid #2e2419 !important; box-shadow: 0 0 0 3px #ded2b4, 0 0 0 4px #b9a67e, inset 0 0 40px #000a !important; } html.grimorio-tema body .combat-header { background-color: #ded2b4 } html.grimorio-tema body #combatLocation, html.grimorio-tema body .cave-selector { color: #9d2f21 } html.grimorio-tema body .floor-indicator, html.grimorio-tema body .loop-indicator { background-color: #100f0ddb !important; border: 1px solid #554832 !important; color: #d9b559 !important; } /* --- 7. AS SETE FICHAS POR ID ------------------------------------------- * * Estas resistiram a tudo, e a explicacao e simples depois de vista: o * `styles.css` as pinta por ID, nao por classe — * * #panel-skills,#panel-hunt,#panel-dmg,#panel-taken,#panel-loot, * #panel-supply,#panel-partyhunt { * background: linear-gradient(135deg,#25282aee,#202224e8) !important } * * Um ID vale (1,0,0) e vence qualquer quantidade de classes, entao nenhum * seletor de classe meu tinha chance. Pior: a cor mora em `background-image`, * e eu passei varias medicoes olhando so `background-color`, que estava * corretamente transparente — o numero dizia "ja esta claro" enquanto a tela * mostrava preto. Medir a propriedade errada custou mais tempo que o conserto. * * Aqui as sete sao respondidas no mesmo nivel: ID contra ID. */ html.grimorio-tema #panel-skills, html.grimorio-tema #panel-hunt, html.grimorio-tema #panel-dmg, html.grimorio-tema #panel-taken, html.grimorio-tema #panel-loot, html.grimorio-tema #panel-supply, html.grimorio-tema #panel-partyhunt { background: #e9e0c8 !important; background-image: repeating-linear-gradient(92deg, #00000005 0 2px, transparent 2px 5px) !important; border: 1px solid #b9a67e !important; box-shadow: 0 1px 0 #fffaf0 inset, 0 6px 14px -12px #1a120b !important; color: #2b2118 !important; }