/* ==========================================================================
tibiarpg.css — TibiaRPG
--------------------------------------------------------------------------
DESTINO: /app/templates/tibiacom/tibiarpg.css
Carregado no DEPOIS do basic.css, então vence sem !important na
maioria dos casos. Onde há !important é porque o basic.css usa seletor mais
específico (ex.: `#LeftArtwork #Statue_1`) e não daria pra vencer sem editar
o original.
==========================================================================
POR QUE ESTE ARQUIVO EXISTE
==========================================================================
O template tibiacom é uma reconstrução do site oficial do Tibia de ~2010:
largura fixa, três colunas POSICIONADAS EM ABSOLUTO, min-width 1000px e
textos importantes gravados dentro de imagens. Não é "layout apertado no
celular" — é layout que ignora o celular por completo, e que assume inglês.
==========================================================================
BUG HISTÓRICO (não repetir)
==========================================================================
Este arquivo já esteve dentro do bloco `if(!empty($config['network_facebook']))`
no index.php do template. Como as redes do Tibia oficial foram removidas do
config.ini, a condição é sempre falsa: o CSS não era carregado em produção e
TODO ajuste feito aqui valia zero. O agora fica fora do bloco.
========================================================================== */
/* ==========================================================================
1. ESTRUTURA E LARGURA ÚTIL
========================================================================== */
body {
background-color: #051122;
-webkit-text-size-adjust: 100%; /* iOS aumenta a fonte sozinho ao girar */
}
/* O basic.css limita tudo a 1200px. Como as colunas laterais somam 410px
fixos, sobravam 790px de conteúdo — 41% de uso num monitor de 1920, com o
resto só de arte. 1440px é o teto porque a arte de cabeçalho tem 1600x800:
acima disso o conteúdo sairia de cima do desenho. */
#Bodycontainer {
max-width: 1440px !important;
margin-left: auto !important;
margin-right: auto !important;
float: none !important;
position: relative;
z-index: 1;
}
/* --------------------------------------------------------------------------
VÉU SOBRE A ARTE DE FUNDO
A arte é uma cena cheia de dragões e rostos, clara e saturada. Com o
conteúdo por cima em contraste total, tudo compete por atenção e nada se
destaca. O véu empurra a ilustração para o segundo plano sem apagá-la.
-------------------------------------------------------------------------- */
#ArtworkHelper { position: relative; }
#ArtworkHelper::before {
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: linear-gradient(
180deg,
rgba(5, 17, 34, .34) 0%,
rgba(5, 17, 34, .52) 45%,
rgba(5, 17, 34, .80) 100%);
pointer-events: none; /* sem isto o véu engoliria os cliques */
z-index: 0;
}
#ContentRow { padding-top: 6px; }
#ContentColumn .Box,
#ContentColumn #News { margin-bottom: 16px !important; }
/* --------------------------------------------------------------------------
PLACA "by EverSoft"
A arte original tem 166x43 e a nossa placa preenchia tudo, ficando mais
pesada que a própria logo acima — parecia o título do site. Reduzida a 72%
e recentralizada, volta a ser o que é: uma assinatura.
-------------------------------------------------------------------------- */
/* A logo passou de 166x82 para 166x62 (a arte tem proporção 2,78:1 e sobravam
23px de vazio em cima e embaixo). A placa sobe junto. */
#LeftArtwork #TibiaLogoArtworkTop {
height: 62px !important;
top: 26px !important;
}
#LeftArtwork #TibiaLogoArtworkBottom {
width: 120px !important;
height: 31px !important;
left: 23px !important;
top: 92px !important;
}
/* --------------------------------------------------------------------------
FUNDO ATRÁS DA LOGO
--------------------------------------------------------------------------
A logo fica em cima da arte de cabeçalho, que naquele ponto tem uma figura
clara e cheia de detalhe. As letras douradas se confundiam com ela — dava a
impressão de que havia "algo escondido atrás" da logo, quando era só a
ilustração aparecendo entre as letras.
Um halo escuro radial resolve sem tapar a arte: escurece só o miolo, some
suavemente nas bordas e não tem contorno visível.
-------------------------------------------------------------------------- */
#LeftArtwork::before {
content: "";
position: absolute;
top: -14px; left: -18px; right: -18px; bottom: -6px;
background: radial-gradient(
ellipse at 50% 45%,
rgba(4, 10, 20, .78) 0%,
rgba(4, 10, 20, .55) 55%,
rgba(4, 10, 20, 0) 78%);
pointer-events: none;
z-index: 1; /* abaixo da logo (z-index 5) e das estátuas (10) */
}
/* ==========================================================================
2. TÍTULO DA CAIXA DE CONTEÚDO
--------------------------------------------------------------------------
Era uma IMAGEM gerada por headline.php com a fonte martel.ttf. Descobriu-se
lendo a tabela cmap da fonte que ela NÃO TEM glifo acentuado nenhum —
í, á, ã, ó, ú, ê apontam todos para o glifo 0 (.notdef). O GD não substitui
fonte, então desenhava o quadradinho vazio: "noṭ□cias".
Agora é um
de texto, posicionado sobre a mesma faixa verde
(.BorderTitleText, 24px de altura, começando 6px abaixo do topo da caixa).
========================================================================== */
.trpg-titulo {
position: absolute;
top: 6px;
left: 14px;
right: 14px;
margin: 0;
padding: 0;
height: 24px;
line-height: 24px;
font-family: Georgia, "Times New Roman", serif;
font-size: 15px;
font-weight: bold;
letter-spacing: .4px;
color: #f0d1a4; /* mesma cor dos GIFs originais */
text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
z-index: 20;
}
/* ==========================================================================
3. TIPOGRAFIA DO CONTEÚDO
O template foi desenhado para parágrafos curtos de notícia. Páginas de texto
corrido (Regras, Sobre) ficavam num bloco cinza ilegível.
========================================================================== */
#ContentColumn {
font-size: 13px;
line-height: 1.65;
color: #2b2118;
}
#ContentColumn p { margin: 0 0 11px 0; }
#ContentColumn ul { margin: 0 0 12px 0; padding-left: 22px; }
#ContentColumn li { margin-bottom: 7px; }
#ContentColumn b,
#ContentColumn strong { color: #4a3315; }
#ContentColumn h2 {
font-size: 19px;
margin: 4px 0 12px 0;
padding-bottom: 6px;
color: #5a3a12;
border-bottom: 2px solid #c9b183;
letter-spacing: .3px;
}
#ContentColumn h3 {
font-size: 15px;
margin: 18px 0 8px 0;
color: #6b4a1c;
border-left: 4px solid #c9942a;
padding-left: 8px;
}
#ContentColumn a { color: #8a5a12; text-decoration: underline; }
#ContentColumn a:hover { color: #c9942a; }
/* Base sólida atrás do texto: a arte de fundo tem áreas claras e escuras, e
dependendo da resolução parte do conteúdo sumia contra o fundo. */
#ContentColumn #ContentHelper { background: rgba(255, 252, 244, .965); }
/* ==========================================================================
4. TABELAS E IMAGENS
========================================================================== */
#ContentColumn table { max-width: 100%; }
#ContentColumn img { max-width: 100%; height: auto; }
/* NÃO usar overflow-x aqui no desktop.
A 1ª versão punha `overflow-x: auto` em .BoxContent para todas as larguras.
No desktop o conteúdo passa do contêiner por 1 ou 2px por causa de padding,
e o navegador desenhava uma BARRA DE ROLAGEM HORIZONTAL permanente dentro da
caixa de notícias — feia e sem função. O scroll interno só faz sentido no
celular, onde as tabelas de largura fixa realmente não cabem; por isso a
regra foi movida para dentro da media query da seção 7. */
.Content .BoxContent tr:nth-child(even) > td { background-color: #F1E0C6; }
.Content .BoxContent tr:nth-child(odd) > td { background-color: #D4C0A1; }
/* ==========================================================================
5. INDICADOR DE JOGADORES ONLINE
--------------------------------------------------------------------------
Era texto de 7pt em dourado escuro encaixado num vão da arte do pedestal:
contra fundo ilustrado, ilegível. A informação mais consultada do site
estava invisível.
Vira uma placa com contraste próprio e um ponto verde pulsando. O piscar
comunica "ao vivo" antes de qualquer palavra ser lida; quando o servidor não
responde o ponto fica vermelho e PARA — parado é o oposto de ao vivo, então
o estado se lê à distância.
========================================================================== */
#RightArtwork #PlayersOnline {
position: absolute;
bottom: 6px;
left: 6px;
width: 120px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0 6px;
padding: 5px 6px 6px 6px;
box-sizing: border-box;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height: 1.15;
text-align: center;
border: none;
border-radius: 5px;
background: rgba(6, 14, 26, .82);
box-shadow: inset 0 0 0 1px rgba(201, 148, 42, .55), 0 2px 6px rgba(0, 0, 0, .45);
cursor: pointer;
transition: background .15s ease;
}
#RightArtwork #PlayersOnline:hover { background: rgba(12, 26, 46, .92); }
#PlayersOnline .trpg-pulso {
width: 9px; height: 9px;
flex: 0 0 9px;
border-radius: 50%;
background: #45d95c;
box-shadow: 0 0 0 0 rgba(69, 217, 92, .75);
animation: trpgPulso 1.8s ease-out infinite;
}
#PlayersOnline.trpg-fora-do-ar .trpg-pulso {
background: #ff5f5f;
box-shadow: none;
animation: none; /* parado = fora do ar, de propósito */
}
@keyframes trpgPulso {
0% { box-shadow: 0 0 0 0 rgba(69, 217, 92, .70); }
70% { box-shadow: 0 0 0 8px rgba(69, 217, 92, 0); }
100% { box-shadow: 0 0 0 0 rgba(69, 217, 92, 0); }
}
#PlayersOnline .trpg-numero {
font-size: 19px;
font-weight: bold;
color: #8ff0a0;
text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
#PlayersOnline .trpg-rotulo {
flex: 1 0 100%;
font-size: 10px;
letter-spacing: .2px;
color: #e6dcc4;
}
#PlayersOnline .trpg-rotulo.trpg-offline {
color: #ffb3b3;
font-weight: bold;
font-size: 11px;
}
/* ==========================================================================
6. RODAPÉ
--------------------------------------------------------------------------
Era três linhas de texto solto, todas do mesmo tamanho e cor, empilhadas
sem hierarquia — parecia sobra de página. Agora tem separação, os links
ganham área de clique de verdade e a linha da marca fica discreta.
========================================================================== */
#Footer {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 1.85;
color: #b9c4d4;
padding: 18px 12px 34px 12px;
margin-top: 6px;
border-top: 1px solid rgba(201, 148, 42, .28);
/* OBRIGATÓRIO. O basic.css dá `width: 100%` ao #Footer. Somando o padding
lateral acima sem box-sizing, ele passa a medir 100% + 24px e empurra a
página inteira: reapareceu rolagem horizontal no celular (379px de
conteúdo num viewport de 360) logo depois de eu ter declarado que o
problema estava resolvido. */
box-sizing: border-box;
}
#Footer a:link,
#Footer a:visited { color: #e2d3ae; text-decoration: none; padding: 2px 3px; }
#Footer a:hover,
#Footer a:active { color: #ffcf5c; text-decoration: none; }
#Footer .trpg-rodape-marca {
display: block;
margin-top: 4px;
font-family: Georgia, "Times New Roman", serif;
font-size: 13px;
letter-spacing: .5px;
color: #d9c79b;
}
#Footer .trpg-rodape-marca strong { color: #f0d1a4; }
/* ==========================================================================
7. BARRA DE AÇÕES DO CELULAR
--------------------------------------------------------------------------
Escondida no desktop, onde a caixa de login do template faz esse papel com
a identidade visual do Tibia. No celular ela substitui a caixa de login:
as três ações que importam (entrar, criar conta, menu) numa linha de ~46px
em vez de 113px empilhados.
O menu em si NÃO virou um "hambúrguer" genérico — as placas com luzinhas
verdes são a identidade do site. Só mudou QUANDO ele aparece.
========================================================================== */
#TrpgBarraMobile { display: none; }
/* ==========================================================================
8. RESPONSIVO — abaixo de 980px
--------------------------------------------------------------------------
Aqui as três colunas absolutas viram uma pilha vertical.
ORDEM: logo -> login -> menu -> conteúdo -> caixas -> rodapé
O truque para essa ordem é `display: contents` no #ContentColumn: o rodapé
mora DENTRO dele no HTML, mas precisa terminar DEPOIS das caixas laterais.
Com display:contents o #ContentColumn some da árvore visual e seus filhos
viram filhos diretos do flex, podendo ser ordenados de forma independente.
PRINCÍPIO MOBILE-FIRST APLICADO AQUI: o cabeçalho (logo + placa + login +
menu) chegava a ~400px de altura, ou seja, a primeira tela inteira de um
celular sem UMA LINHA de conteúdo. Foi comprimido para ~150px: a placa de
assinatura some (ela já está no rodapé), a logo encolhe, e login e menu
ficam lado a lado.
========================================================================== */
@media (max-width: 980px) {
/* --- 8.1 destrava larguras mínimas ------------------------------------ */
#ArtworkHelper {
min-width: 0;
height: auto;
background-size: cover;
background-position: top center;
}
#Bodycontainer {
display: block;
min-width: 0;
width: auto;
max-width: none !important;
margin: 0;
padding: 0 8px;
box-sizing: border-box;
}
/* --- 8.2 empilha as colunas ------------------------------------------- */
/* O `top: 155px` do basic.css abria espaço para a arte do cabeçalho, que no
desktop fica em absoluto acima da linha de conteúdo. Empilhado, aquele
espaço vira um buraco no topo. */
#ContentRow {
position: static;
top: auto;
display: flex;
flex-direction: column;
padding-top: 8px;
}
#MenuColumn {
position: static;
width: auto;
margin: 0 0 10px 0;
order: 1;
display: flex;
flex-direction: column;
align-items: center;
}
#ContentColumn { display: contents; }
.Content { order: 2; width: auto; }
#Footer { order: 4; margin-top: 10px; padding-bottom: 26px; }
#ThemeboxesColumn {
position: static;
width: auto;
margin: 14px 0 0 0;
order: 3;
display: flex;
flex-direction: column;
align-items: center;
}
/* --- 8.3 cabeçalho compacto ------------------------------------------- */
/* Logo em escala reduzida: 166x140 vira 132x104. Continua legível e devolve
36px de tela para o conteúdo. */
#LeftArtwork {
position: relative !important;
top: auto !important;
left: auto !important;
width: 132px !important;
height: 104px !important;
margin: 0 auto 8px auto;
order: 1;
}
#LeftArtwork #TibiaLogoArtworkTop {
width: 132px !important;
height: 65px !important;
top: 8px !important;
}
/* A placa de assinatura e as estátuas são enfeite de moldura. No celular a
moldura não existe, e cada pixel do topo é caro. A assinatura continua
no rodapé. */
#LeftArtwork #TibiaLogoArtworkBottom,
#LeftArtwork #Statue_1,
#LeftArtwork #Statue_2,
#LeftArtwork #LogoLink { display: none !important; }
/* A caixa de login some no celular — substituída pela barra de ações.
Ela NÃO é removida do HTML: no desktop continua sendo a peça central da
coluna esquerda, com a moldura e as correntes do tema. */
#Loginbox { display: none; }
#TrpgBarraMobile {
order: 2;
display: flex;
align-items: stretch;
gap: 6px;
width: 100%;
max-width: 340px;
margin: 0 auto 10px auto;
}
#TrpgBarraMobile .trpg-acao,
#TrpgBarraMobile #TrpgMenuToggle {
display: flex;
align-items: center;
justify-content: center;
min-height: 44px; /* alvo de toque mínimo recomendado */
padding: 0 12px;
box-sizing: border-box;
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: .3px;
text-align: center;
text-decoration: none;
color: #f2dfae;
background: linear-gradient(#4a3a24, #2a1f12);
border: 2px solid #96702c;
border-radius: 6px;
box-shadow: inset 0 1px 0 rgba(255, 235, 180, .28);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
#TrpgBarraMobile .trpg-acao { flex: 1 1 0; }
/* "Criar Conta" é o objetivo da página inicial: ganha a cor de destaque
para não competir em igualdade com "Entrar". */
#TrpgBarraMobile .trpg-acao-destaque {
color: #1c1206;
background: linear-gradient(#e9c463, #c9942a);
border-color: #f0d68a;
text-shadow: 0 1px 0 rgba(255, 255, 255, .35);
}
#TrpgBarraMobile #TrpgMenuToggle {
flex: 0 0 52px;
font-size: 20px;
line-height: 1;
}
#TrpgBarraMobile .trpg-acao:active,
#TrpgBarraMobile #TrpgMenuToggle:active { filter: brightness(.88); }
#Menu {
order: 3;
width: 170px;
left: 5px;
margin: 0 auto;
}
/* Estado fechado — o padrão no celular, aplicado por JS (ver index.php:
se viesse fechado do servidor, quem estivesse sem JavaScript ficaria
sem menu para sempre). */
#Menu.trpg-fechado { display: none; }
/* --- 8.4 coluna da direita -------------------------------------------- */
/* Monstro e pedestal usam top negativo (-137px/-105px) para se encaixarem
na moldura do desktop. Empilhados, invadem o conteúdo de cima. São
decorativos; saem. O contador vira uma faixa legível. */
#RightArtwork {
position: static;
width: 100%;
text-align: center;
}
#RightArtwork #Monster,
#PedestalAndOnline { display: none !important; }
#RightArtwork #PlayersOnline {
position: static;
width: 100%;
max-width: 300px;
margin: 0 auto 12px auto;
padding: 9px 14px;
gap: 0 8px;
}
#PlayersOnline .trpg-numero { font-size: 21px; }
#PlayersOnline .trpg-rotulo { font-size: 11px; }
/* --- 8.5 caixas laterais: LADO A LADO ---------------------------------- */
/* Empilhadas em coluna, as duas caixas de 180px somavam ~470px de rolagem
no fim da página, com metade da largura da tela vazia dos dois lados.
Lado a lado cabem em qualquer celular a partir de 375px (180+180+10 =
370) e a página encurta quase 240px.
`wrap` garante que num aparelho mais estreito que 370px elas voltem a
empilhar sozinhas, em vez de esmagar a moldura. */
#Themeboxes {
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: flex-start;
gap: 10px;
width: 100%;
}
#Themeboxes .Themebox,
#Themeboxes .trpg-ranking { margin: 0 0 10px 0; }
/* O contador de jogadores fica acima das duas, ocupando a linha toda —
é informação, não caixa decorativa. */
#RightArtwork #PlayersOnline { margin-bottom: 14px; }
/* --- 8.6 conteúdo ------------------------------------------------------ */
.Content .Box { margin-left: 0; margin-right: 0; }
.Content .BoxContent {
min-height: 0;
padding: 12px 10px;
/* SÓ no celular: tabelas de largura fixa (ranking, online, personagens)
não cabem e empurrariam a página inteira para o lado. Confinando o
scroll na caixa, a tabela rola sozinha e o body não. */
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Alvos de toque: links de tabela ficavam com 12-14px de altura. */
.Submenuitem { min-height: 26px; }
#ContentColumn .BoxContent a { padding: 2px 0; display: inline-block; }
}
/* ==========================================================================
9. TELAS ESTREITAS (celular em pé)
========================================================================== */
@media (max-width: 480px) {
#Bodycontainer { padding: 0 5px; }
/* As duas caixas de 180px + espaço somam 366px. Num aparelho de 375px, com
os 10px de padding do contêiner, sobram 365 — falta 1px e elas quebram
para linhas separadas, desperdiçando 100px de altura. A margem negativa
devolve exatamente o padding do contêiner só para esta faixa, sem tirar
o respiro do texto ao lado. */
#Themeboxes {
gap: 6px;
margin-left: -5px;
margin-right: -5px;
width: calc(100% + 10px);
}
#ContentColumn { font-size: 13px; }
#ContentColumn h2 { font-size: 17px; }
#ContentColumn h3 { font-size: 14px; }
.trpg-titulo { font-size: 14px; left: 10px; right: 10px; }
.Content .BoxContent { padding: 10px 8px; }
.Content .BoxContent td { font-size: 9pt; }
.Content th { font-size: 9pt; }
#Footer { font-size: 10px; }
#Footer .trpg-rodape-marca { font-size: 12px; }
}
/* ==========================================================================
10. CABEÇALHO DA NOTÍCIA
--------------------------------------------------------------------------
.NewsHeadlineText e .NewsHeadlineAuthor são posicionados em absoluto pelo
basic.css e se sobrepunham: o título longo passava por baixo do autor e as
duas frases viravam uma só ("Bem-vindo ao TibiaRPG — RookdSample").
O autor está desligado em myaac_settings (core.news_author=0), mas a regra
fica aqui caso alguém religue.
========================================================================== */
.NewsHeadlineText {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: calc(100% - 210px);
}
.NewsHeadlineAuthor { max-width: 190px; overflow: hidden; white-space: nowrap; }
@media (max-width: 620px) {
.NewsHeadlineText { max-width: calc(100% - 70px); }
.NewsHeadlineAuthor { display: none; }
}
/* ==========================================================================
11. ACESSIBILIDADE
========================================================================== */
a:focus-visible,
[onclick]:focus-visible,
#TrpgMenuToggle:focus-visible {
outline: 2px solid #ffcf5c;
outline-offset: 2px;
}
/* Quem configurou o sistema para reduzir movimento não deve receber o pulso. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
}
}