, não do | */
body.page-inner .news-list table[cellpadding="4"] tr:nth-of-type(even) td{ background:var(--dark-bg-3) }
body.page-inner .news-list table[cellpadding="4"] tr[bgcolor]:hover td{ background:#3a2414; color:var(--light-text) }
/* Barra de TÍTULO de seção: | (Server Status, Search Character...) */
body.page-inner .news-list td.white{
background:
repeating-linear-gradient(180deg,
rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px,
rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px,
transparent 5px, transparent 9px),
linear-gradient(180deg, #6a4220 0%, #4a2c14 60%, #3a2010 100%) !important;
color:#fce8b8 !important;
font-family:'Marcellus',serif; font-size:15px; letter-spacing:1px;
border:1px solid var(--bar-bg-3);
border-top:1px solid #8b5a30; border-bottom:2px solid var(--gold-dark);
padding:11px 14px;
text-shadow:0 1px 0 var(--bar-bg-3),0 2px 2px rgba(0,0,0,.6);
}
body.page-inner .news-list td.white b{ color:#fce8b8; font-weight:normal }
/* Cabeçalho de COLUNAS: linha cinza #505050 (highscores) ou links a.white */
body.page-inner .news-list tr[bgcolor="#505050"] td{
background:linear-gradient(180deg,#4a2c14,#3a2010) !important;
border-color:var(--bar-bg-3);
}
body.page-inner .news-list a.white{ color:var(--gold-glow); font-weight:700; letter-spacing:.3px }
body.page-inner .news-list a.white:hover{ color:#fff }
/* Grid interno do form de busca (cellpadding=1): sem bordas */
body.page-inner .news-list table[cellpadding="1"] td{
border:0; background:transparent; padding:4px 6px; color:var(--light-text-2);
}
/* ---------- Inputs / selects / botões ---------- */
body.page-inner .news-list input[type=text],
body.page-inner .news-list input[type=password],
body.page-inner .news-list input[type=email],
body.page-inner .news-list input[type=number],
body.page-inner .news-list input:not([type]),
body.page-inner .news-list select,
body.page-inner .news-list textarea{
background: var(--dark-bg); color: var(--light-text);
border: 1px solid var(--bar-bg-2); border-radius:3px;
padding: 7px 9px; font-family:'Open Sans',sans-serif; font-size:13px;
}
body.page-inner .news-list input::placeholder,
body.page-inner .news-list textarea::placeholder{ color: var(--light-text-mute) }
body.page-inner .news-list input[type=submit],
body.page-inner .news-list input[type=button],
body.page-inner .news-list button{
background: linear-gradient(180deg, #6a4220, #3a2010);
color: var(--gold-glow);
border: 1px solid var(--gold-dark);
border-radius: 4px;
padding: 8px 18px;
font-family: Verdana, 'Open Sans', Geneva, sans-serif; /* clássico estilo Tibia.com, sem serifa */
font-weight:700; letter-spacing:.5px; cursor:pointer;
transition: all .15s;
}
body.page-inner .news-list input[type=submit]:hover,
body.page-inner .news-list input[type=button]:hover,
body.page-inner .news-list button:hover{
background: linear-gradient(180deg, var(--tiger-bright), var(--tiger));
color:#fff; border-color: var(--tiger-dark);
}
/* Outfits/ícones inline nas listagens ficam alinhados ao texto */
body.page-inner .news-list img{ display:inline-block; vertical-align:middle }
/* ---------- ESTILO "TIBIA.COM" (account/create): TableContainer + Caption ---------- */
/* Esconde edges/cantos/sombras com imagem (gifs ausentes no OldOT) */
body.page-inner .news-list span[class^="CaptionEdge"],
body.page-inner .news-list span[class^="CaptionBorder"],
body.page-inner .news-list span[class^="CaptionVertical"],
body.page-inner .news-list div[class^="TableShadow"]{ display:none !important }
body.page-inner .news-list .TableContainer{ margin:0 0 18px }
body.page-inner .news-list .Table5,
body.page-inner .news-list .Table5 > table{ border:0 !important; background:transparent !important; width:100% }
/* Caption = barra de título no padrão do site */
body.page-inner .news-list .CaptionContainer{ margin:0 }
body.page-inner .news-list .CaptionInnerContainer{
background:
repeating-linear-gradient(180deg,
rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px,
rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px,
transparent 5px, transparent 9px),
linear-gradient(180deg, #6a4220 0%, #4a2c14 60%, #3a2010 100%);
border-top:1px solid #8b5a30; border-bottom:2px solid var(--gold-dark);
display:block; padding:0;
}
body.page-inner .news-list .CaptionContainer .Text{
color:#fce8b8; font-family:'Marcellus',serif; font-size:16px; letter-spacing:1px;
padding:11px 14px; display:block;
text-shadow:0 1px 0 var(--bar-bg-3),0 2px 2px rgba(0,0,0,.6);
}
/* Corpo da tabela Tibia.com */
body.page-inner .news-list .TableContentAndRightShadow,
body.page-inner .news-list .TableContentContainer,
body.page-inner .news-list .InnerTableContainer{ background:transparent !important; border:0 !important; padding:0 }
body.page-inner .news-list .TableContent{
background:var(--dark-bg-2) !important;
border:1px solid var(--bar-bg) !important; border-top:0 !important;
width:100%;
}
body.page-inner .news-list .TableContent td{ color:var(--light-text-2); padding:7px 10px; border:0 }
body.page-inner .news-list .TableContent tr:nth-of-type(even) td{ background:var(--dark-bg-3) }
/* ===== NEWS COLLAPSE (dark theme: barra titulo marrom + body escuro com texto branco) ===== */
.news-collapsible{
background: linear-gradient(180deg, var(--dark-bg-2), var(--dark-bg));
border: 1px solid var(--bar-bg);
border-radius:3px;margin-bottom:0; /* gap controlado pelo flex gap do .news-list */
box-shadow:0 2px 0 rgba(0,0,0,.4);
transition:box-shadow .2s;
overflow:hidden;
}
.news-collapsible:hover{box-shadow:0 3px 0 rgba(0,0,0,.55)}
.news-collapsible-head{
position:relative;
background:
repeating-linear-gradient(180deg,
rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px,
rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px,
transparent 5px, transparent 9px
),
linear-gradient(180deg, #6a4220 0%, #4a2c14 60%, #3a2010 100%);
border-top: 1px solid #8b5a30;
padding:13px 18px 13px 22px; cursor:pointer;
display:flex; align-items:center; gap:12px;
border-bottom: 1px solid var(--bar-bg-3);
transition:all .2s;
box-shadow:
inset 0 1px 0 rgba(255,200,120,.18),
inset 0 -2px 0 rgba(0,0,0,.4);
}
.news-collapsible-head:hover{
background:
repeating-linear-gradient(180deg,
rgba(0,0,0,.05) 0, rgba(0,0,0,.05) 2px,
rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px,
transparent 5px, transparent 9px
),
linear-gradient(180deg, #7a4e28 0%, #5a3a1c 60%, #4a2c14 100%);
}
.news-collapsible.open > .news-collapsible-head{
border-bottom-color: var(--gold-dark);
box-shadow: 0 1px 0 var(--gold-dark);
}
.news-collapsible-head .chev{
flex-shrink:0;width:20px;height:20px;display:grid;place-items:center;
color: var(--gold-glow); font-size:12px;
transition:transform .25s; font-family:monospace;
text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.news-collapsible.open > .news-collapsible-head .chev{transform:rotate(90deg)}
/* ===== LAST NEWS: cada notícia com cara de "card de novidade" (≠ barras de seção) ===== */
body.page-home .news-list .news-collapsible-head{
background: linear-gradient(180deg, #261813 0%, #1a110b 100%) !important;
border-top: 1px solid var(--bar-bg) !important;
border-bottom: 1px solid var(--bar-bg-3) !important;
border-left: 4px solid var(--tiger) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}
body.page-home .news-list .news-collapsible-head:hover{
background: linear-gradient(180deg, #2c1c13 0%, #241710 100%) !important;
border-left-color: var(--tiger-bright) !important;
}
body.page-home .news-list .news-collapsible.open > .news-collapsible-head{
background: linear-gradient(180deg, #311f15 0%, #1f140c 100%) !important;
border-left-color: var(--gold-glow) !important;
border-bottom-color: var(--gold-dark) !important;
}
.news-collapsible-head h3,
.news-collapsible-head .nh-title{
font-family:'Open Sans',sans-serif;font-size:14px;font-weight:600;
color: #e8dcc0;
flex:1;letter-spacing:.3px;line-height:1.3;margin:0;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.news-collapsible-head .nh-meta{
font-size:11px;color: var(--light-text-mute);
letter-spacing:1px;text-transform:uppercase;
font-weight:700;font-family:'Open Sans',sans-serif;
}
.news-collapsible-body{
padding:0 22px;max-height:0;overflow:hidden;
background: var(--dark-bg-2);
color: var(--light-text);
transition:max-height .35s ease, padding .25s ease;
}
.news-collapsible.open > .news-collapsible-body{
padding:16px 22px 20px;max-height:5000px;
transition:max-height .5s ease, padding .25s ease;
}
.news-collapsible-body p{margin-bottom:10px;color: var(--light-text-2);line-height:1.7}
.news-collapsible-body p strong{color: #fff}
.news-collapsible-body ul,
.news-collapsible-body ol{margin:6px 0 12px 24px;color: var(--light-text-2)}
.news-collapsible-body li{margin-bottom:4px}
.news-collapsible-body a{color: var(--gold-glow)}
.news-collapsible-body a:hover{color: var(--gold-bright)}
.news-collapsible-body img{
margin:8px auto;
border:1px solid var(--bar-bg-2);
border-radius:3px;
max-width:100%;height:auto;
}
.news-collapsible-body h1,
.news-collapsible-body h2,
.news-collapsible-body h3{
color: var(--gold-glow);
margin: 14px 0 8px;
font-family: 'Marcellus', serif;
}
/* ==================== HOME SECTIONS (Roleta + Doações inline) ==================== */
.home-section{
background: linear-gradient(180deg, var(--dark-bg-2), var(--dark-bg));
border: 1px solid var(--bar-bg);
border-radius: 3px;
margin-top: 20px;
box-shadow: 0 2px 0 rgba(0,0,0,.4);
overflow:hidden;
}
.home-section .sec-title{ border-radius: 0 }
.home-section .sec-title .link{
color: var(--gold-glow); font-weight:700; font-size:11px;
letter-spacing:1.2px; text-transform:uppercase;
background: rgba(0,0,0,.3);
padding: 4px 10px; border-radius: 2px;
border: 1px solid var(--gold-dark);
}
.home-section .sec-title .link:hover{ background: var(--gold-dark); color: #fff }
.roleta-mini-wrap, .donate-mini-wrap{ padding: 18px 20px 22px }
.home-section-intro{
color: var(--light-text-2); text-align:center;
font-size: 13px; margin-bottom: 14px; line-height:1.6;
}
/* PRIZE STRIP (Roleta mini na home) */
.prize-strip{
display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
background: rgba(0,0,0,.3); padding: 12px;
border: 1px solid var(--bar-bg-2);
border-radius: 3px;
}
.prize-cell{
background: linear-gradient(180deg, #2a1810, #1a0e08);
border: 1px solid var(--bar-bg-2);
border-radius: 3px;
padding: 8px 4px;
text-align: center;
transition: transform .15s, box-shadow .15s;
}
.prize-cell:hover{
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(232,93,26,.3);
border-color: var(--tiger);
}
.prize-cell img{
width: 36px; height: 36px;
image-rendering: pixelated; margin: 0 auto 4px;
filter: drop-shadow(0 2px 2px rgba(0,0,0,.6));
}
.prize-cell .prize-name{
font-size: 9px; color: var(--light-text-mute);
text-transform: uppercase; letter-spacing: .5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
font-weight: 600;
}
@media (max-width: 900px){
.prize-strip{ grid-template-columns: repeat(4, 1fr); }
}
/* PACK STRIP (Doações mini na home) */
.pack-strip{
display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
}
.pack-cell{
background: linear-gradient(180deg, #2a1810, #1a0e08);
border: 1px solid var(--bar-bg-2);
border-radius: 3px;
padding: 14px 10px 12px;
text-align: center;
position: relative;
transition: transform .15s, box-shadow .15s, border-color .15s;
}
.pack-cell:hover{
transform: translateY(-2px);
box-shadow: 0 6px 14px rgba(0,0,0,.5);
border-color: var(--gold);
}
.pack-cell.is-token{ border-color: var(--tiger-dark) }
.pack-cell.is-token:hover{ border-color: var(--tiger); box-shadow: 0 6px 14px rgba(232,93,26,.3) }
.pack-cell .pack-promo{
position: absolute; top: -8px; left: 8px;
background: var(--red); color: #fff;
padding: 2px 8px; border-radius: 10px;
font-size: 9px; font-weight: 700; letter-spacing: 1px;
box-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.pack-cell .pack-icon{
font-size: 30px; line-height: 1; margin-bottom: 4px;
filter: drop-shadow(0 2px 4px rgba(0,0,0,.5));
}
.pack-cell .pack-amount{
font-family: 'Marcellus', serif; font-size: 24px;
color: var(--gold-glow);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.pack-cell .pack-label{
font-size: 10px; color: var(--light-text-mute);
text-transform: uppercase; letter-spacing: 1.5px;
font-weight: 700; margin-top: 2px;
}
.pack-cell .pack-price{
margin: 8px 0; color: var(--light-text);
font-family: 'Marcellus', serif; font-size: 16px;
}
.pack-cell .pack-price b{ color: var(--red-bright) }
.pack-cell .pack-cta{
display: block;
background: linear-gradient(180deg, var(--tiger-bright), var(--tiger));
color: #fff; padding: 7px 14px; border-radius: 3px;
font-size: 11px; letter-spacing: 1.5px; font-weight: 700;
text-transform: uppercase; border: 1px solid var(--tiger-deep);
box-shadow: 0 2px 0 var(--tiger-deep);
}
.pack-cell.is-points .pack-cta{
background: linear-gradient(180deg, #ffd862 0%, var(--gold) 100%);
color: var(--bar-bg-3); border-color: var(--gold-dark);
box-shadow: 0 2px 0 var(--gold-dark);
text-shadow: 0 1px 0 rgba(255,255,255,.2);
}
.pack-cell .pack-cta:hover{ transform: translateY(-1px); filter: brightness(1.1) }
@media (max-width: 900px){
.pack-strip{ grid-template-columns: repeat(2, 1fr); }
}
/* ==================== DARK OVERRIDES PARA SECTIONS DA ROLETA E DOACOES ====================
As classes .section/.section-hd/.section-body/.ticket/.donate-card-pack vieram do
preview-redesign.php que era TEMA BRIGHT (cream/parchment). Aqui adapto pro dark.
============================================================================== */
/* Section body — dark + sombra/raio no MESMO padrão dos .card (não o creme do tema claro) */
.section-body{
background: linear-gradient(180deg, var(--dark-bg-2), var(--dark-bg));
border:1px solid var(--bar-bg);
border-top:none;
border-radius:0 0 4px 4px;
box-shadow:0 4px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.04);
color: var(--light-text);
padding:24px;
}
/* Section header — a COR vem do bloco "Outras barras" (vermelho, ~l.1701, !important).
Aqui só geometria + tipografia, IGUAL ao .sec-title (esquerda, 18px/3px/uppercase). */
.section-hd{
border:1px solid var(--bar-bg-3);
border-radius:4px 4px 0 0;
padding:13px 20px;
text-align:left; /* era center (resquício do tema claro) */
}
.section-hd h2{
font-size:18px; /* igual .sec-title h2 (era 26px) */
letter-spacing:3px; /* igual .sec-title h2 (era 5px) */
text-transform:uppercase; /* igual .sec-title h2 */
margin:0;
}
.section-hd .sub{
color:var(--light-text-2);
font-style:normal; /* era itálico */
margin-top:4px;
}
/* Ícone do Die no título do Old Fortune Cassino (sprite do jogo, escala nítida) */
.cassino-die-ico{
height:1.4em;
width:auto;
vertical-align:-0.30em;
margin-right:8px;
image-rendering:pixelated; /* mantém o sprite nítido ao ampliar */
filter:drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
/* Tigrinho header: cai no MESMO vermelho das outras barras — só garante o texto creme */
.section.tigrinho .section-hd.tigrinho-hd h2{ color:#fce8b8; display:flex; align-items:center; justify-content:flex-start }
.section.tigrinho .section-hd.tigrinho-hd .sub{ color:var(--light-text-2) }
/* Roleta info: texto branco */
.roleta-info h3{ color: var(--gold-glow) }
.roleta-info > p{ color: var(--light-text-2) }
.roleta-info > p strong{ color: #fff }
.prizes-title{ color: var(--gold-glow); border-bottom-color: var(--bar-bg-2) }
/* Carousel item (cards do trilho) ficam dark */
.carousel-item{
background:linear-gradient(180deg, #2a1810, #1a0e08) !important;
border-color: var(--bar-bg-2) !important;
box-shadow:inset 0 -2px 0 rgba(0,0,0,.4), inset 0 1px 0 rgba(255,200,120,.08) !important;
}
.carousel-item-name{ color: var(--light-text-2) }
.carousel-wrapper{
background:linear-gradient(180deg, #1f130a 0%, #0d0805 100%) !important;
border-color: var(--bar-bg) !important;
}
.carousel-fade-left,.carousel-fade-right{
background:linear-gradient(90deg, #0d0805, transparent) !important;
}
.carousel-fade-right{
background:linear-gradient(270deg, #0d0805, transparent) !important;
}
/* Tickets de tokens (cards 1x/5x/10x/20x) ficam dark */
.ticket{
background:linear-gradient(180deg, #2a1810 0%, #1a0e08 100%) !important;
border:1px solid var(--bar-bg-2) !important;
color: var(--light-text) !important;
box-shadow:0 4px 0 var(--bar-bg-3) !important;
}
.ticket:hover{ box-shadow:0 6px 0 var(--bar-bg-3), 0 10px 22px rgba(232,93,26,.25) !important }
.ticket.featured{
box-shadow:0 4px 0 var(--bar-bg-3), 0 8px 22px rgba(0,0,0,.4) !important;
}
.ticket-count{ color: var(--gold-glow) !important }
.ticket-count small{ color: var(--light-text-mute) !important }
.ticket-label{ color: var(--light-text-mute) !important }
.ticket-price{ color: var(--light-text) !important }
.ticket-price b{ color: var(--gold-glow) !important }
.ticket hr{ background: var(--bar-bg) !important }
/* Donate carrossel (pacotes de pontos) ficam dark */
.donate-card-pack{
background:linear-gradient(180deg, #2a1810 0%, #1a0e08 100%) !important;
border:1px solid var(--bar-bg-2) !important;
color: var(--light-text) !important;
box-shadow:0 4px 0 var(--bar-bg-3) !important;
}
.donate-card-pack:hover{ box-shadow:0 6px 0 var(--bar-bg-3), 0 10px 22px rgba(0,0,0,.5) !important }
.donate-card-pack.featured{
box-shadow:0 4px 0 var(--bar-bg-3), 0 8px 22px rgba(0,0,0,.4) !important;
}
.donate-pack-pts{ color: var(--gold-glow) !important; text-shadow:0 1px 0 rgba(0,0,0,.6) !important }
.donate-pack-pts small{ color: var(--light-text-mute) !important }
.donate-pack-name{ color: var(--light-text-mute) !important }
.donate-card-pack hr{ background: var(--bar-bg) !important }
.donate-pack-strike{ color: var(--light-text-mute) !important }
.donate-pack-price{ color: var(--light-text) !important }
.donate-pack-price b{ color: var(--gold-glow) !important }
/* Mensagem acima do botao Doar */
.doar-msg{
font-family: 'Open Sans', sans-serif;
font-size: 11px;
color: var(--light-text-2);
text-align: center;
line-height: 1.5;
margin-bottom: 10px;
letter-spacing: .3px;
}
.doar-msg b{
color: var(--gold-glow);
font-weight: 700;
font-size: 12px;
}
/* Botao Doar simples - bonito e pequeno */
.btn-doar-simple{
display: inline-block;
width: 100%;
padding: 8px 16px;
background: linear-gradient(180deg, #a52828 0%, var(--red) 50%, var(--red-dark) 100%);
color: #ffe89a !important;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-align: center;
text-decoration: none;
border: 1px solid #d04848;
border-radius: 3px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
inset 0 -1px 0 rgba(0,0,0,.3),
0 2px 0 var(--red-deep);
text-shadow: 0 1px 0 rgba(0,0,0,.4);
transition: all .15s;
}
.btn-doar-simple:hover{
filter: brightness(1.1);
transform: translateY(-1px);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.2),
0 3px 0 var(--red-deep),
0 4px 10px rgba(0,0,0,.3);
}
.btn-doar-simple.featured{
background: linear-gradient(180deg, var(--tiger-bright), var(--tiger), var(--tiger-dark));
border-color: #ffaa66;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.25),
inset 0 -1px 0 rgba(0,0,0,.3),
0 2px 0 var(--tiger-deep);
}
/* ==================== SHOPPING SIDEBAR (carrossel vertical) ==================== */
.shop-carrossel{
height: 240px;
overflow: hidden;
display: flex;
flex-direction: column;
gap: 8px;
padding: 10px 12px;
scroll-behavior: smooth;
}
.shop-item{
flex-shrink: 0;
display: grid;
grid-template-columns: 50px 1fr auto;
gap: 10px;
align-items: center;
background: rgba(0,0,0,.35);
border: 1px solid var(--bar-bg);
border-radius: 3px;
padding: 8px 10px;
height: 70px;
transition: border-color .15s;
}
.shop-item:hover{ border-color: var(--gold-dark); }
.shop-item-icon{
width: 50px; height: 50px;
display: grid; place-items: center;
background: rgba(0,0,0,.4);
border-radius: 3px;
overflow: hidden;
}
.shop-item-icon img{
max-width: 100%; max-height: 100%;
object-fit: contain;
image-rendering: pixelated;
image-rendering: crisp-edges;
}
.shop-item-info{ min-width: 0; }
.shop-item-name{
font-family: 'Open Sans', sans-serif;
font-size: 12px;
font-weight: 700;
color: #fce8b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.2;
}
.shop-item-cat{
font-size: 9px;
color: var(--gold);
letter-spacing: 1px;
text-transform: uppercase;
margin-top: 2px;
font-weight: 700;
}
.shop-item-desc{
font-size: 10px;
color: var(--light-text-mute);
margin-top: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shop-item-price{
text-align: right;
line-height: 1.1;
}
.shop-item-price .num{
display: block;
font-family: 'Marcellus', serif;
font-size: 18px;
color: var(--gold-glow);
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.shop-item-price .lbl{
display: block;
font-size: 9px;
color: var(--light-text-mute);
letter-spacing: 1px;
text-transform: uppercase;
font-weight: 700;
margin-top: -2px;
}
/* Tabs de vocacao no Shopping */
.shop-tabs{
display: flex;
gap: 2px;
padding: 8px 8px 0;
background: rgba(0,0,0,.2);
border-bottom: 1px solid var(--bar-bg);
}
.shop-tab{
flex: 1;
background: rgba(0,0,0,.35);
border: 1px solid var(--bar-bg-2);
border-bottom: none;
color: var(--light-text-mute);
padding: 8px 4px;
border-radius: 3px 3px 0 0;
cursor: pointer;
font-size: 14px;
transition: all .15s;
}
.shop-tab:hover{ color: var(--gold-glow); border-color: var(--gold-dark); }
.shop-tab.active{
background: linear-gradient(180deg, var(--red-bright), var(--red), var(--red-dark));
color: #fff;
border-color: #d04848;
box-shadow: inset 0 1px 0 rgba(255,255,255,.2);
}
/* Items ocultos pelo filtro */
.shop-item.hidden{ display: none !important; }
/* ==================== TEXTURA MARROM GRANULADA (PNG real, 512x512) ====================
Imagem PNG gerada pixel a pixel pra ficar 100% fiel ao padrao de couro/madeira velha.
Aplica no BODY + em TODAS as barras de titulo.
============================================================================== */
/* Body do site: textura CHAO marrom granulada */
html, body{
background: url('images/chao-texture.png') repeat fixed, #3a2010 !important;
background-attachment: fixed !important;
}
/* Topbar: STONE (parede de pedra) — barra principal do site */
.topbar{
background:
linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(0,0,0,.35) 100%),
url('images/stone-texture.png') repeat,
#5a5a5a !important;
border-top: 1px solid #8a8a8a !important;
border-bottom: 4px solid var(--gold-dark) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.18),
inset 0 -2px 0 rgba(0,0,0,.5),
0 1px 0 rgba(0,0,0,.3) !important;
}
/* Outras barras de titulo: VERMELHO MEDIEVAL pra contrastar com o chao marrom */
.section-hd,
.card-head,
.sec-title,
.news-collapsible-head{
background:
linear-gradient(180deg, rgba(255,200,100,.08) 0%, rgba(0,0,0,.25) 100%),
linear-gradient(180deg, #a52828 0%, #7c1414 55%, #5a0a0a 100%) !important;
border-top: 1px solid #d04848 !important;
border-bottom: 2px solid var(--gold-dark) !important;
box-shadow:
inset 0 1px 0 rgba(255,220,150,.22),
inset 0 -2px 0 rgba(0,0,0,.5),
0 1px 0 rgba(0,0,0,.3) !important;
}
/* HERO: TRANSPARENTE — mostra a textura do chao do body, SEM linha amarela */
.hero{
background: transparent !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Logo OLDOT — cor de contraste sobre chao marrom + texto maior */
.hero h1{
color: var(--gold-glow) !important;
font-size: 96px !important;
text-shadow:
2px 2px 0 var(--red-deep),
3px 3px 0 rgba(0,0,0,.5),
0 0 22px rgba(255,217,0,.35),
4px 6px 14px rgba(0,0,0,.7) !important;
}
.hero h1 small{
color: #f0d090 !important;
font-size: 22px !important;
}
/* STATUS STRIP WRAP — edge-to-edge no container 1240px */
.status-strip-wrap{
max-width: 1240px;
margin: 30px auto 0;
padding: 0; /* sem padding lateral - alinha com .main e .section */
}
/* Status strip: 6 cells em fila, fundo de PEDRA */
.status-strip{
max-width: none !important;
margin: 0 !important;
padding: 18px !important; /* + grossa */
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 10px !important;
background:
linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.55) 100%),
url('images/stone-texture.png') repeat,
#5a5a5a !important;
border: 1px solid #3a3a3a !important;
border-top: 1px solid #8a8a8a !important;
border-bottom: 2px solid var(--gold-dark) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.15),
0 2px 0 rgba(0,0,0,.5) !important;
border-radius: 3px !important;
}
/* Cada cell: BOTAO MARROM sobre fundo de pedra */
.status-strip .status-cell{
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 12px !important; /* + grosso */
background:
linear-gradient(180deg, rgba(255,200,120,.10) 0%, rgba(0,0,0,.3) 100%),
linear-gradient(180deg, #6a4220 0%, #4a2c14 60%, #3a2010 100%) !important;
border: 1px solid #2a1810 !important;
border-top: 1px solid #8b5a30 !important;
border-radius: 3px !important;
min-width: 0 !important;
box-shadow:
inset 0 1px 0 rgba(255,200,120,.15),
inset 0 -2px 0 rgba(0,0,0,.4),
0 1px 0 rgba(0,0,0,.3) !important;
}
.status-strip .ico-plaque{
width: 36px !important;
height: 36px !important;
font-size: 15px !important;
flex-shrink: 0 !important;
border-width: 1px !important;
}
.status-strip .cell-text{
flex: 1;
min-width: 0;
text-align: left;
}
.status-strip .label{
font-size: 10px !important;
color: #f0d090 !important;
letter-spacing: 1px !important;
line-height: 1.1 !important;
text-transform: uppercase;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.status-strip .value{
color: #fce8b8 !important;
font-family: 'Marcellus', serif !important;
font-size: 14px !important;
line-height: 1.2 !important;
margin-top: 2px !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
/* HERO: imagem mais pra esquerda (gap menor + image column maior) */
.hero-inner{
grid-template-columns: 1fr 500px !important;
gap: 32px !important;
}
/* ==================== HERO CAROUSEL ==================== */
.hero-frame{
position: relative;
aspect-ratio: 4/3;
background: #000;
border: 3px solid var(--gold);
box-shadow:
inset 0 0 0 2px var(--red-deep),
inset 0 0 0 4px var(--gold-dark),
0 12px 30px rgba(0,0,0,.5);
border-radius: 2px;
overflow: hidden;
}
.hero-carousel{
position: absolute;
inset: 8px;
overflow: hidden;
border-radius: 1px;
}
.hero-slide{
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
opacity: 0;
transition: opacity 1s ease;
}
.hero-slide.active{ opacity: 1 }
.hero-carousel-dots{
position: absolute;
bottom: 12px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 3;
}
.hero-carousel-dots .dot{
width: 10px; height: 10px;
border-radius: 50%;
background: rgba(255,255,255,.4);
border: 1px solid rgba(0,0,0,.6);
cursor: pointer;
transition: all .2s;
}
.hero-carousel-dots .dot.active{
background: var(--gold-glow);
box-shadow: 0 0 8px rgba(255,217,0,.6);
}
.hero-carousel-dots .dot:hover{
background: var(--gold-bright);
}
/* gradient overlay no fundo pra dar leitura */
.hero-carousel::after{
content:"";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(0,0,0,.4) 0%, transparent 30%);
pointer-events: none;
}
/* Texto em creme dourado nas barras pra contraste */
.topbar .brand-name,
.topbar .nav a,
.section-hd h2,
.card-head h3,
.sec-title h2,
.news-collapsible-head .nh-title{
color: #fce8b8 !important;
text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 2px 2px rgba(0,0,0,.4) !important;
}
.topbar .brand-name b{ color: var(--gold-glow) !important }
.topbar{ border-bottom: 4px solid var(--gold-dark) !important }
/* ==================== LOGIN SIDEBAR — campos maiores ==================== */
.quick-login-form{
display: flex;
flex-direction: column;
gap: 12px;
}
.quick-login-form input{
width: 100%;
padding: 12px 14px !important;
background: rgba(0,0,0,.5) !important;
border: 1px solid var(--bar-bg-2) !important;
border-radius: 3px !important;
color: #fce8b8 !important;
font-family: 'Open Sans', sans-serif !important;
font-size: 15px !important;
box-shadow: inset 0 1px 4px rgba(0,0,0,.4) !important;
transition: border-color .2s, box-shadow .2s;
}
.quick-login-form input::placeholder{
color: var(--light-text-mute);
font-size: 14px;
letter-spacing: .5px;
}
.quick-login-form input:focus{
outline: none;
border-color: var(--gold) !important;
box-shadow: inset 0 1px 4px rgba(0,0,0,.4), 0 0 0 2px rgba(202,166,84,.25) !important;
}
.quick-login-form button{
padding: 13px !important;
font-size: 14px !important;
letter-spacing: 2px !important;
margin-top: 4px;
}
.lost-pwd{
display: block;
text-align: center;
margin-top: 12px;
font-size: 12px;
color: var(--light-text-mute);
text-decoration: underline;
}
.lost-pwd:hover{ color: var(--gold-glow); }
/* ==================== TOP LEVEL — fontes maiores + outfit real + cor level ==================== */
.player-row{
display: flex; align-items: center; gap: 12px;
padding: 10px 6px !important;
border-bottom: 1px dashed var(--bar-bg) !important;
transition: background .15s;
text-decoration: none;
}
.player-row:hover{
background: rgba(202,166,84,.08);
}
.player-row:last-child{ border-bottom: none !important; }
.player-row .rank{
font-family: 'Marcellus', serif !important;
font-size: 18px !important;
color: var(--gold) !important;
min-width: 24px;
text-align: center;
text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.player-row:nth-child(1) .rank{
color: var(--gold-glow) !important;
font-size: 22px !important;
text-shadow: 0 0 8px rgba(255,217,0,.5), 0 1px 0 rgba(0,0,0,.6);
}
/* Avatar 60x60: o PNG do outfit é 64x64 mas o BONECO ocupa só os 32px da esquerda.
Por isso shift de left:14 pra centralizar visualmente o character no quadradinho. */
.player-row .avatar{
width: 60px !important;
height: 60px !important;
background: rgba(0,0,0,.4) !important;
border: none !important;
border-radius: 3px !important;
overflow: hidden;
flex-shrink: 0;
box-shadow: inset 0 1px 4px rgba(0,0,0,.4);
padding: 0;
position: relative !important;
display: flex !important;
align-items: center; justify-content: center;
}
.player-row .avatar img{
position: static;
width: 100%;
height: 100%;
object-fit: contain; /* imagem HD (256px) do gerador local — encaixa e suaviza */
left: auto; top: auto;
image-rendering: auto;
background: transparent;
margin: 0;
transform: none;
}
.avatar-fallback{
font-size: 22px;
line-height: 1;
}
.player-row .info{ flex: 1; min-width: 0; }
.player-row .name{
font-family: 'Open Sans', sans-serif !important;
font-size: 14px !important;
color: #fce8b8 !important;
font-weight: 700 !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 0 1px 0 rgba(0,0,0,.4);
}
.player-row .voc{
font-family: 'Open Sans', sans-serif !important;
font-size: 12px !important;
color: var(--light-text-mute) !important;
margin-top: 2px !important;
}
/* Level com cor vibrante baseada em rank */
.player-row .lvl{
font-family: 'Marcellus', serif !important;
font-size: 18px !important;
color: var(--gold-glow) !important;
text-shadow:
0 0 6px rgba(255,217,0,.4),
1px 1px 0 var(--red-deep),
0 1px 0 rgba(0,0,0,.6) !important;
min-width: 36px;
text-align: right;
}
.player-row:nth-child(1) .lvl{
color: #fff5a0 !important;
text-shadow:
0 0 12px rgba(255,217,0,.7),
1px 1px 0 var(--red-deep),
0 2px 4px rgba(0,0,0,.5) !important;
}
|