1 608
edições
MediaWiki:Common.css: mudanças entre as edições
Ir para navegação
Ir para pesquisar
MediaWiki:Common.css (ver código-fonte)
Edição das 15h13min de 1 de fevereiro de 2026
, Domingo às 15h13minsem sumário de edição
Sem resumo de edição Etiqueta: Reversão manual |
Sem resumo de edição Etiqueta: Revertido |
||
| Linha 1: | Linha 1: | ||
/************************************************************ | |||
* UTILITÁRIOS GERAIS | |||
************************************************************/ | |||
/* === RagnaTrue – Bloco de Especificações do Servidor === */ | |||
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700&display=swap'); | |||
:root{ | |||
--rt-bg: #ffffff; | |||
--rt-bd: #e7e8ee; | |||
--rt-soft: #f7f8fb; | |||
--rt-text: #1e1b2e; | |||
--rt-accent: #5b3aa8; | |||
--rt-grad: linear-gradient(90deg,#ffb86c 0%,#ff8d6b 50%,#ffd36a 100%); | |||
} | |||
.rt-specs{ | |||
background: var(--rt-bg); | |||
border: 1px solid var(--rt-bd); | |||
border-radius: 14px; | |||
padding: 16px 18px 6px; | |||
box-shadow: 0 4px 16px rgba(30,27,46,.06); | |||
max-width: 1100px; | |||
margin: 10px auto 18px; | |||
} | |||
/* ====== ÁREA DE DESTAQUES – CHIPS ====== */ | |||
.home-featured-chips { | |||
max-width: 1200px; | |||
margin: 24px auto 32px; | |||
padding: 18px 22px 22px; | |||
border-radius: 24px; | |||
background: #f9f4ff; /* roxo bem clarinho */ | |||
border: 1px solid rgba(139, 111, 255, 0.28); | |||
box-shadow: 0 16px 32px rgba(111, 80, 210, 0.16); | |||
} | |||
/* Cabeçalho da faixa */ | |||
.home-featured-chips-header { | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
gap: 8px 14px; | |||
margin-bottom: 14px; | |||
} | |||
.home-featured-chips-badge { | |||
padding: 5px 16px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
letter-spacing: 0.16em; | |||
text-transform: uppercase; | |||
color: #0f172a; | |||
background: linear-gradient(90deg, #bfdbfe, #a5b4fc); /* azul clarinho */ | |||
box-shadow: 0 8px 18px rgba(129, 140, 248, 0.5); | |||
} | |||
.home-featured-chips-sub { | |||
font-size: 12px; | |||
color: #4b5563; | |||
} | |||
/* Grupos (Primeiros passos / Sistemas em destaque) */ | |||
.home-featured-chips-group + .home-featured-chips-group { | |||
margin-top: 10px; | |||
padding-top: 6px; | |||
border-top: 1px dashed rgba(148, 132, 255, 0.35); | |||
} | |||
.home-featured-chips-label { | |||
font-size: 12px; | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.12em; | |||
margin-bottom: 6px; | |||
color: #5b21b6; | |||
} | |||
/* Lista de chips */ | |||
.home-featured-chips-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 8px; | |||
} | |||
.home-featured-chips-list li { | |||
margin: 0; | |||
} | |||
/* Cada chip é o próprio link da wiki */ | |||
.home-featured-chips-list li a { | |||
display: inline-block; | |||
padding: 7px 14px; | |||
border-radius: 999px; | |||
background: #ffffff; | |||
border: 1px solid rgba(148, 132, 255, 0.45); | |||
font-size: 13px; | |||
color: #4338ca; | |||
text-decoration: none; | |||
box-shadow: 0 6px 14px rgba(129, 140, 248, 0.25); | |||
transition: background 0.15s ease, transform 0.15s ease, | |||
box-shadow 0.15s ease, border-color 0.15s ease, | |||
color 0.15s ease; | |||
} | |||
/* Hover / foco: chip ganha destaque */ | |||
.home-featured-chips-list li a:hover, | |||
.home-featured-chips-list li a:focus { | |||
background: #eef2ff; | |||
border-color: #6366f1; | |||
color: #1f2933; | |||
transform: translateY(-1px); | |||
box-shadow: 0 10px 18px rgba(107, 114, 255, 0.45); | |||
} | |||
/* RESPONSIVO */ | |||
@media (max-width: 900px) { | |||
.home-featured-chips { | |||
padding: 14px 14px 18px; | |||
} | |||
.home-featured-chips-header { | |||
align-items: flex-start; | |||
} | |||
.home-featured-chips-sub { | |||
font-size: 11px; | |||
} | |||
} | |||
.rt-specs-title{ | |||
font-family: "Paytone One", system-ui, sans-serif; | |||
text-transform: uppercase; | |||
letter-spacing: .5px; | |||
text-align: center; | |||
margin: 2px 0 12px; | |||
font-size: 22px; | |||
line-height: 1.1; | |||
background: var(--rt-grad); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
color: transparent; | |||
} | |||
.rt-specs-grid{ | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 10px 18px; | |||
list-style: none; | |||
margin: 0; | |||
padding: 0 6px 12px; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
color: var(--rt-text); | |||
font-size: 16px; | |||
} | |||
.rt-specs-grid li{ | |||
background: var(--rt-soft); | |||
border: 1px solid var(--rt-bd); | |||
border-radius: 10px; | |||
padding: 10px 12px; | |||
} | |||
.rt-specs-grid b{ | |||
color: var(--rt-accent); | |||
font-weight: 800; | |||
} | |||
.rt-specs-high{ | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); | |||
gap: 8px 14px; | |||
list-style: none; | |||
margin: 6px 0 6px; | |||
padding: 0 6px 14px; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
font-size: 16px; | |||
} | |||
.rt-specs-high li{ | |||
position: relative; | |||
padding-left: 26px; | |||
} | |||
.rt-specs-high li::before{ | |||
content: "✔"; | |||
position: absolute; | |||
left: 0; | |||
top: 0; | |||
color: #30b86b; | |||
font-weight: 900; | |||
} | |||
.rt-specs-note{ | |||
margin: 0 auto 4px; | |||
text-align: center; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
font-size: 13px; | |||
color: #6a6a7a; | |||
} | |||
/* === Hover com ampliação nos cards da configuração === */ | |||
.rt-specs-grid li{ | |||
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; | |||
will-change: transform; | |||
transform: translateZ(0); /* suaviza em Safari/Chrome */ | |||
transform-origin: center center; | |||
} | |||
.rt-specs-grid li:hover, | |||
.rt-specs-grid li:focus-within{ /* acessível ao navegar por teclado */ | |||
transform: scale(1.03); | |||
background: #fff; | |||
border-color: rgba(91,58,168,.35); /* var(--rt-accent) suavizado */ | |||
box-shadow: 0 8px 22px rgba(30,27,46,.12); | |||
} | |||
.rt-specs-grid li:active{ | |||
transform: scale(.99); /* leve feedback ao clique */ | |||
} | |||
/* Respeita usuários com “reduzir animações” */ | |||
@media (prefers-reduced-motion: reduce){ | |||
.rt-specs-grid li{ transition: none; } | |||
.rt-specs-grid li:hover, | |||
.rt-specs-grid li:focus-within{ transform: none; } | |||
} | } | ||
. | |||
/* ===== HOME – Mensagem abaixo do banner: ZERA QUALQUER FUNDO ===== */ | |||
/* Fontes */ | |||
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Titan+One&family=Lilita+One&display=swap'); | |||
/* Seletor mais forte para ganhar da skin */ | |||
.mw-parser-output .home-welcome{ | |||
font-family: "Lilita One", system-ui, sans-serif !important; /* padrão */ | |||
font-size: clamp(18px, 2.1vw, 28px); | |||
line-height: 1.45; | |||
text-align: center; | |||
color: #1c1431; | |||
background: transparent !important; | |||
margin: 12px auto 18px; | |||
max-width: 1200px; | |||
} | } | ||
. | /* Trocas rápidas de fonte */ | ||
.mw-parser-output .home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif !important; } | |||
.mw-parser-output .home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif !important; } | |||
.mw-parser-output .home-welcome.rt-font-lilita { font-family: "Lilita One", system-ui, sans-serif !important; } | |||
/* Opcional: frase toda em UPPERCASE */ | |||
.mw-parser-output .home-welcome.rt-allcaps{ | |||
text-transform: uppercase; | |||
letter-spacing: .02em; | |||
} | } | ||
/*. | /* Mantém o gradiente do “RagnaTrue” */ | ||
.mw-parser-output .home-welcome .rt-gradient{ | |||
background: linear-gradient(#ff6c5c,#ff9550,#ffc95e) !important; | |||
-webkit-background-clip: text !important; | |||
background-clip: text !important; | |||
-webkit-text-fill-color: transparent !important; | |||
color: transparent !important; | |||
display: inline-block; | |||
} | |||
.mw-parser-output .home-welcome .rt-brand{ | |||
-webkit-text-stroke: 0.9px rgba(37,19,61,.28); | |||
text-shadow: 0 2px 0 rgba(37,19,61,.12), 0 0 10px rgba(255,190,120,.18); | |||
} | |||
. | .home-welcome, | ||
.mw-parser-output .home-welcome, | |||
#content .home-welcome { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
padding: 0 !important; /* remove “acolchoado” herdado */ | |||
} | } | ||
. | /* zera também QUALQUER coisa dentro do bloco */ | ||
.home-welcome *, | |||
.mw-parser-output .home-welcome * { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | } | ||
. | /* se algum wrapper “box” padrão for injetado, neutraliza */ | ||
.home-welcome .ambox, | |||
.home-welcome .tmbox, | |||
.home-welcome .messagebox, | |||
.home-welcome .notice, | |||
.home-welcome .thumb, | |||
.home-welcome .thumbinner, | |||
.home-welcome .plainlinks { | |||
background: transparent !important; | |||
background-image: none !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | } | ||
. | /* mantém apenas a tipografia que já definimos */ | ||
.home-welcome .home-welcome-text { | |||
margin: 0 !important; | |||
} | } | ||
/* | /* bloco do texto abaixo do banner */ | ||
. | .home-welcome{ | ||
max-width: 1100px; | |||
margin: 10px auto 18px; | |||
padding: 0 12px; | |||
background: transparent !important; | |||
border: 0 !important; | |||
text-align: justify; /* se preferir centralizado, troque por: center */ | |||
text-justify: inter-word; | |||
font-size: clamp(18px, 2.15vw, 26px); | |||
line-height: 1.55; | |||
} | |||
/* Fontes desenhadas */ | |||
@import url('https://fonts.googleapis.com/css2?family=Bangers&family=Titan+One&family=Lilita+One&display=swap'); | |||
/* Base do bloco (fundo transparente, centralizado) */ | |||
.home-welcome{ | |||
/* escolha padrão aqui se quiser */ | |||
font-family: "Lilita One", system-ui, sans-serif; | |||
font-size: clamp(18px, 2.1vw, 28px); | |||
line-height: 1.45; | |||
text-align: center; | |||
color: #1c1431; | |||
background: transparent !important; | |||
margin: 12px auto 18px; | |||
max-width: 1100px; | |||
} | |||
/* Trocas rápidas de fonte (aplique uma destas classes no <div>) */ | |||
.home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif; } | |||
.home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif; } | |||
.home-welcome.rt-font-lilita { font-family: "Lilita One", system-ui, sans-serif; } /* redondinha “cute” */ | |||
/* (Opcional) Deixar a frase toda em UPPERCASE */ | |||
.home-welcome.rt-allcaps{ | |||
text-transform: uppercase; | |||
letter-spacing: .02em; | |||
} | |||
/* Gradiente do “RagnaTrue” (mantém exatamente como estava) */ | |||
.home-welcome .rt-gradient{ | |||
background: linear-gradient(90deg,#ffb36b 0%,#ffd28a 40%,#fff3c4 55%,#ffb36b 100%) !important; | |||
-webkit-background-clip: text !important; | |||
background-clip: text !important; | |||
-webkit-text-fill-color: transparent !important; | |||
color: transparent !important; | |||
display: inline-block; | |||
} | |||
.home-welcome .rt-brand{ | |||
-webkit-text-stroke: 0.9px rgba(37,19,61,.28); | |||
text-shadow: 0 2px 0 rgba(37,19,61,.12), 0 0 10px rgba(255,190,120,.18); | |||
} | |||
.icon-inline { display:inline-flex; align-items:center; gap:6px; line-height:1; } | |||
.icon-inline img.mw-file-element { image-rendering: pixelated; vertical-align: middle; transform: translateY(-1px); } | |||
.slot-num{ display:inline-block; width:1.1ch; text-align:center; font-variant-numeric: tabular-nums; } | |||
.no-ext a.external { background-image:none !important; padding-right:0 !important; } | |||
.no-ext a.external::after { content:none !important; } | |||
/************************************************************ | |||
* BOXES DE DIFICULDADE / DROPS (COLLAPSIBLE) | |||
************************************************************/ | |||
.dificuldades .mw-collapsible .mw-collapsible-toggle{ | |||
float:none !important; display:inline-block !important; margin:2px auto 4px !important; | |||
text-align:center !important; width:auto !important; | |||
} | |||
.dificuldades .mw-collapsible .mw-collapsible-toggle[style*="position"]{ position:static !important; } | |||
.dificuldades .dif-inline.mw-collapsible{ | |||
display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; | |||
border:1px solid #ddd; border-radius:12px; overflow:hidden; | |||
} | |||
.dificuldades .dif-header{ | |||
display:flex; justify-content:center; align-items:center; gap:8px; | |||
padding:4px 8px; font-weight:700; text-align:center; | |||
} | |||
.dificuldades .dif-header .mw-collapsible-toggle{ | |||
float:none !important; display:inline-block !important; width:auto !important; | |||
margin:0 !important; position:static !important; text-decoration:none; | |||
} | |||
.dificuldades .dif-inline .mw-collapsible-content{ width:100% !important; padding:8px !important; text-align:center; } | |||
.drops-inline.mw-collapsible{ | |||
display:flex; flex-wrap:nowrap; align-items:center; justify-content:center; gap:8px; | |||
border:1px solid #ddd; border-radius:12px; background:#fff; overflow:hidden; | |||
} | |||
.drops-inline .drops-title{ flex:0 0 auto; margin:0; padding:6px; font-weight:700; text-align:center; } | |||
.drops-inline > .mw-collapsible-toggle{ | |||
flex:0 0 auto; float:none !important; display:inline-block !important; width:auto !important; | |||
margin:0 0 0 8px !important; position:static !important; | |||
} | |||
.drops-inline .mw-collapsible-content{ width:100% !important; padding:8px 8px 16px; } | |||
/************************************************************ | |||
* TABELAS / TURN IN | |||
************************************************************/ | |||
.turnin-tabela td > *{ | |||
display:contents !important; | |||
border:0 !important; background:transparent !important; box-shadow:none !important; | |||
padding:0 !important; margin:0 !important; | |||
} | |||
/************************************************************ | |||
* HOME – WRAPPERS | |||
************************************************************/ | |||
.home-fullbleed{ | |||
width:100%; | |||
margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); | |||
padding-left:12px; padding-right:12px; | |||
box-sizing:border-box; overflow-x:clip; | |||
} | |||
@supports (width:100svw){ | |||
.home-fullbleed{ margin-left:calc(50% - 50svw); margin-right:calc(50% - 50svw); } | |||
} | |||
.home-contained{ width:100%; max-width:100%; margin:0; padding:0 12px; box-sizing:border-box; } | |||
/************************************************************ | |||
* HOME – GUIAS IMPORTANTES (card + grid) | |||
************************************************************/ | |||
/* Paleta e espaçamentos */ | |||
:root{ | |||
--guide-sep: #e3defa; /* linha separadora */ | |||
--guide-hover-bg: #e1d0ff; /* hover (um pouco mais escuro) */ | |||
--home-col-pad-x: 10px; /* padding lateral da coluna */ | |||
--home-icon-w: 16px; /* largura do ícone */ | |||
--home-icon-h: 16px; /* altura do ícone */ | |||
--home-icon-gap: 12px; /* vão entre ícone e texto */ | |||
--home-guides-bg: #f6f7f9; /* fundo do card */ | |||
--home-guides-bd: #e3e6ee; /* borda do card */ | |||
--home-guides-radius: 12px; | |||
} | |||
/* Card da seção */ | |||
.home-guides-surface{ | |||
background: var(--home-guides-bg); | |||
border: 1px solid var(--home-guides-bd); | |||
border-radius: var(--home-guides-radius); | |||
padding: 12px 0; | |||
margin: 8px 0 16px; | |||
/* Linhas internas ligeiramente mais contrastadas nesse fundo */ | |||
--guide-sep: #dcdfea; | |||
} | |||
/* Grid 4 colunas */ | |||
.home-guides-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(4, minmax(220px,1fr)); | |||
gap:28px; | |||
width:100%; | |||
} | |||
.home-guides-grid .col{ min-width:0; } | |||
.home-guides-grid .col-title{ display:none !important; } | |||
/* Lista básica */ | |||
.home-guides-grid .home-list{ margin:0; padding:0; list-style:none; } | |||
/* Linha: grid [ícone | texto] + hover no LI (inclui ícone) */ | |||
.home-guides-grid .home-list li{ | |||
display:grid !important; | |||
grid-template-columns: var(--home-icon-w) 1fr; | |||
column-gap: var(--home-icon-gap); | |||
align-items:center; | |||
padding:0 var(--home-col-pad-x); | |||
position:relative; | |||
border-radius:6px; /* cantos suaves no highlight */ | |||
overflow:hidden; /* recorta o highlight */ | |||
} | |||
.home-guides-grid .home-list li:hover, | |||
.home-guides-grid .home-list li:focus-within{ | |||
background: var(--guide-hover-bg); | |||
transform: scale(1.02); | |||
box-shadow: 0 10px 22px rgba(24,18,58,.18); | |||
z-index: 3; | |||
} | |||
/* Ícone (link de arquivo) – clicável */ | |||
.home-guides-grid .home-list li > a.image{ | |||
grid-column:1; | |||
justify-self:start; | |||
width:var(--home-icon-w); | |||
height:var(--home-icon-h); | |||
margin:0 !important; | |||
pointer-events:auto !important; | |||
cursor:pointer; | |||
position:relative; | |||
z-index:2; /* acima do fundo do li */ | |||
} | |||
.home-guides-grid .home-list li > a.image .mw-file-element{ | |||
width:100%; height:auto; max-height:var(--home-icon-h); | |||
display:block; image-rendering:pixelated; | |||
} | |||
/* Link do texto – separador e micro-respiro à esquerda */ | |||
.home-guides-grid .home-list li > a:not(.image), | |||
.home-guides-grid .home-list li > a:not(.image):visited{ | |||
grid-column:2; | |||
display:block; width:100%; | |||
padding:8px 0 8px 2px; /* 2px de “respiro” no texto */ | |||
text-decoration:none !important; color:inherit !important; background:transparent; | |||
border-bottom:1px solid var(--guide-sep); | |||
transition: background .12s ease; | |||
position:relative; z-index:1; | |||
} | |||
/* Último item sem linha */ | |||
.home-guides-grid .home-list li:last-child > a:not(.image){ border-bottom:0; } | |||
/* Não pintar o link (quem pinta é o LI) */ | |||
.home-guides-grid .home-list li > a:not(.image):hover, | |||
.home-guides-grid .home-list li > a:not(.image):focus{ | |||
background: transparent !important; | |||
} | |||
/* Responsivo */ | |||
@media (max-width:1100px){ .home-guides-grid{ grid-template-columns:repeat(2, minmax(220px,1fr)); } } | |||
@media (max-width:640px){ .home-guides-grid{ grid-template-columns:1fr; } } | |||
/* Importa fontes 8-bit / pixel-friendly */ | |||
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Pixelify+Sans:wght@400;700&family=VT323&display=swap'); | |||
/* Escolha de fontes (troque a ordem se quiser priorizar outra) */ | |||
:root{ | |||
--font-eden-title: 'Press Start 2P', system-ui, sans-serif; /* bem 8-bit */ | |||
--font-eden-item: 'Pixelify Sans', 'VT323', monospace; /* legível */ | |||
} | |||
/* Aplica só dentro do card de guias */ | |||
.home-guides-surface .home-list > li > a:not(.image){ | |||
font-family: var(--font-eden-item); | |||
font-size: 14px; /* 13–15px funciona bem */ | |||
line-height: 1.35; | |||
letter-spacing: 0.2px; | |||
} | |||
/* Se quiser o título “Guias importantes” nesse vibe 8-bit: */ | |||
.home-guides-surface ~ h2 .mw-headline, | |||
.home-guides-surface .section-title-eden { /* use essa classe se preferir marcar no HTML */ | |||
font-family: var(--font-eden-title); | |||
font-size: 16px; | |||
text-transform: uppercase; | |||
letter-spacing: .5px; | |||
} | |||
/* Área do banner acima do grid: fundo branco, sem borda ou sombra */ | |||
.home-banner-area { | |||
background: #fff !important; | |||
padding: 0 !important; | |||
margin: 6px auto 10px !important; /* “ligeiramente acima” do grid */ | |||
border: 0 !important; | |||
} | |||
/* Banner limpo: só a imagem, responsivo e centralizado */ | |||
.home-banner-solo, | |||
.home-banner-solo img { | |||
display: block; | |||
max-width: 100%; | |||
height: auto !important; /* evita qualquer esticamento */ | |||
margin: 0 auto; /* centraliza */ | |||
background: transparent !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
border-radius: 0 !important; /* se a arte já tem arredondado, deixa 0 aqui */ | |||
} | |||
/* Faixa do banner: fundo branco, sem borda/sombra, com respiro pequeno */ | |||
.home-banner-strip{ | |||
background: #fff !important; | |||
margin: 6px auto 12px !important; | |||
padding: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
/* MediaWiki às vezes envolve a imagem em .thumb/.thumbinner: | |||
zera qualquer decoração/navegador que tente “enquadrar” a imagem */ | |||
.home-banner-strip .thumb, | |||
.home-banner-strip .thumbinner{ | |||
background: transparent !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
} | |||
/* Imagem do banner: bloco, centralizada, responsiva, sem esticar */ | |||
.home-banner-img, | |||
.home-banner-strip .image, | |||
.home-banner-strip .image img{ | |||
display: block !important; | |||
margin: 0 auto !important; | |||
max-width: 100% !important; | |||
height: auto !important; | |||
background: transparent !important; | |||
border: 0 !important; | |||
} | |||
/* Opcional: limite “saudável” para não ficar grande demais em telas enormes */ | |||
@media (min-width: 1280px){ | |||
.home-banner-strip .image img, | |||
.home-banner-img{ max-width: 980px !important; } | |||
} | |||
/* Caixa do banner: centralizada, sem fundo visível, sem borda/sombra */ | |||
.home-banner-box{ | |||
max-width: 697px; /* nunca passa de 697 */ | |||
width: 100%; /* encolhe em telas menores */ | |||
margin: 8px auto 12px; /* centraliza */ | |||
padding: 0; | |||
background: transparent !important; /* “fundo invisível” */ | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
line-height: 0; /* remove qualquer “respiro” vertical do container */ | |||
} | |||
/* Banner – sombra suave sempre + zoom leve no hover */ | |||
.banner-true{ | |||
display:block; | |||
width:min(697px, 100%); | |||
height:auto; | |||
margin:10px auto 14px; | |||
background:transparent !important; | |||
border:0 !important; | |||
box-shadow:none; /* evita sombras herdadas */ | |||
filter: drop-shadow(0 8px 18px rgba(24, 18, 58, .18)); /* respeita transparência da PNG */ | |||
transform-origin:center center; | |||
transition: transform .18s ease, filter .18s ease; | |||
will-change: transform, filter; | |||
} | |||
/* Hover/Focus: leve expansão + sombra mais marcada */ | |||
.banner-true:hover, | |||
.banner-true:focus { | |||
transform: scale(1.02); /* “expande” sem distorcer */ | |||
filter: drop-shadow(0 14px 28px rgba(24, 18, 58, .28)); | |||
} | |||
/* Respeita usuários com redução de movimento */ | |||
@media (prefers-reduced-motion: reduce){ | |||
.banner-true{ transition: filter .18s ease; } | |||
.banner-true:hover, | |||
.banner-true:focus{ transform:none; } | |||
} | |||
/* ========== DROPS – cabeçalho com toggle inline e centralizado ========== */ | |||
.drops-inline.mw-collapsible{ | |||
display:flex; flex-wrap:wrap; align-items:center; justify-content:center; | |||
gap:8px; | |||
border:1px solid #e7e8ee; border-radius:12px; | |||
background:#fff; overflow:hidden; | |||
} | |||
/* título */ | |||
.drops-inline .drops-title{ | |||
order:1; padding:6px 8px; margin:0; | |||
font-weight:700; text-align:center; | |||
} | |||
/* toggle na MESMA linha do título */ | |||
.drops-inline > .mw-collapsible-toggle{ | |||
order:2 !important; | |||
float:none !important; | |||
display:inline-flex !important; | |||
align-items:center; gap:6px; | |||
width:auto !important; margin:0 !important; position:static !important; | |||
} | |||
/* “pill” do toggle */ | |||
.drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-block; padding:4px 10px; | |||
border-radius:8px; background:#f3f4fa; text-decoration:none; font-weight:600; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a:hover{ background:#e9eafb; } | |||
/* conteúdo abre abaixo, largura total */ | |||
.drops-inline .mw-collapsible-content{ | |||
order:3; width:100%; padding:10px 8px 14px; | |||
} | |||
/* (higiene) evita qualquer float/resíduo em alguns skins */ | |||
.drops-inline .mw-collapsible-toggle .mw-collapsible-toggle-default{ float:none !important; } | |||
/* opcional: tabela mais “limpa” dentro do bloco */ | |||
.drops-inline .mw-collapsible-content .wikitable{ | |||
border-collapse:collapse; margin:auto; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable th, | |||
.drops-inline .mw-collapsible-content .wikitable td{ | |||
border:1px solid #e6e8f2; | |||
} | |||
/* ========= DROPS – visual bonito e estilizado ========= */ | |||
:root{ | |||
--drop-bg: #ffffff; | |||
--drop-bd: #e9eaf3; | |||
--drop-shadow: 0 8px 26px rgba(25,22,52,.10); | |||
--drop-head-grad: linear-gradient(90deg,#7b5cff 0%,#a26bff 60%,#c79bff 100%); | |||
--drop-head-text: #fff; | |||
--dif-easy: #2ecc71; | |||
--dif-hard: #f39c12; | |||
--dif-night: #e74c3c; | |||
--toggle-pill-bg: rgba(255,255,255,.15); | |||
--toggle-pill-bg-hover: rgba(255,255,255,.25); | |||
} | |||
.skin-vector-dark :root{ | |||
--drop-bg: #15161b; | |||
--drop-bd: #2a2c35; | |||
--drop-shadow: 0 8px 26px rgba(0,0,0,.35); | |||
--toggle-pill-bg: rgba(255,255,255,.12); | |||
--toggle-pill-bg-hover: rgba(255,255,255,.2); | |||
} | |||
/* Cartão base */ | |||
.drops-inline.mw-collapsible{ | |||
border:1px solid var(--drop-bd); | |||
border-radius:14px; | |||
background: var(--drop-bg); | |||
box-shadow: var(--drop-shadow); | |||
overflow:hidden; | |||
} | |||
/* Cabeçalho: título + toggle lado a lado e CENTRALIZADOS */ | |||
.drops-inline .drops-header{ | |||
display:flex; align-items:center; justify-content:center; gap:10px; | |||
padding:10px 14px; | |||
background: var(--drop-head-grad); | |||
color: var(--drop-head-text); | |||
position: relative; | |||
} | |||
/* Título */ | |||
.drops-inline .drops-title{ | |||
font-weight:800; | |||
font-size:15px; | |||
letter-spacing:.3px; | |||
margin:0; | |||
color: inherit; | |||
} | |||
/* Badge de dificuldade */ | |||
.drops-inline .dif-badge{ | |||
display:inline-flex; align-items:center; gap:6px; | |||
height:22px; padding:0 10px; | |||
border-radius:999px; | |||
font-weight:800; font-size:12px; line-height:22px; | |||
background: rgba(255,255,255,.18); | |||
color:#fff; | |||
text-transform: uppercase; | |||
} | |||
/* Cores por dificuldade */ | |||
.drops-inline.is-easy .dif-badge{ background: var(--dif-easy); } | |||
.drops-inline.is-hard .dif-badge{ background: var(--dif-hard); } | |||
.drops-inline.is-nightmare .dif-badge{ background: var(--dif-night); } | |||
/* Toggle “pill” com chevron giratório */ | |||
.drops-inline > .mw-collapsible-toggle{ | |||
float:none !important; display:inline-block !important; width:auto !important; | |||
margin:0 !important; position:static !important; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-flex; align-items:center; gap:8px; | |||
height:28px; padding:0 12px; | |||
border-radius:999px; | |||
text-decoration:none; font-weight:700; | |||
color:#fff; | |||
background: var(--toggle-pill-bg); | |||
transition: background .15s ease, transform .15s ease; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a:hover{ background: var(--toggle-pill-bg-hover); } | |||
/* Esconde o texto do link e coloca um rótulo compacto + chevron */ | |||
.drops-inline > .mw-collapsible-toggle a{ | |||
font-size:0; /* esconde “Mostrar/Ocultar” original */ | |||
} | |||
.drops-inline > .mw-collapsible-toggle a::before{ | |||
content:"Detalhes"; | |||
font-size:12px; letter-spacing:.2px; | |||
} | |||
.drops-inline > .mw-collapsible-toggle a::after{ | |||
content:"▾"; | |||
font-size:14px; transform: rotate(0deg); | |||
transition: transform .15s ease; | |||
} | |||
/* Rotação quando aberto */ | |||
.drops-inline.is-open > .mw-collapsible-toggle a::after{ transform: rotate(180deg); } | |||
/* Conteúdo */ | |||
.drops-inline .mw-collapsible-content{ | |||
padding:12px 10px 16px; | |||
background: transparent; | |||
} | |||
/* Tabela interna – mais limpa e elegante */ | |||
.drops-inline .mw-collapsible-content .wikitable{ | |||
margin:10px auto; width:min(720px, 95%); | |||
border-collapse:collapse; | |||
background:#fff; | |||
border:1px solid var(--drop-bd); | |||
border-radius:10px; overflow:hidden; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
background:#f7f7fb; font-weight:800; | |||
border-bottom:1px solid var(--drop-bd); | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable td, | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
border:1px solid var(--drop-bd); | |||
padding:.55em .7em; | |||
text-align:center; | |||
} | |||
/* Hover no bloco inteiro (sutil) */ | |||
.drops-inline:hover{ box-shadow: 0 12px 32px rgba(25,22,52,.16); } | |||
/* Acessibilidade (foco visível) */ | |||
.drops-inline .drops-header:focus-within{ | |||
outline: 2px solid rgba(255,255,255,.7); | |||
outline-offset: -2px; | |||
} | |||
/* ========= DROPS – paleta por dificuldade + superfícies ========= */ | |||
/* Fallback (caso não tenha tag) */ | |||
.drops-inline{ | |||
--dif-color: #7b5cff; | |||
--head-grad: linear-gradient(90deg,#7b5cff,#a26bff,#c79bff); | |||
--dif-tint: rgba(123,92,255,.10); /* fundo claro da lista */ | |||
--dif-tint-strong: rgba(123,92,255,.18);/* cabeçalho da tabela */ | |||
} | |||
/* Easy = Verde */ | |||
.drops-inline.is-easy{ | |||
--dif-color:#2ecc71; | |||
--head-grad: linear-gradient(90deg,#2ecc71,#3ddb7f,#6be8a1); | |||
--dif-tint: rgba(46,204,113,.10); | |||
--dif-tint-strong: rgba(46,204,113,.18); | |||
} | |||
/* Hard = Vermelho */ | |||
.drops-inline.is-hard{ | |||
--dif-color:#e74c3c; | |||
--head-grad: linear-gradient(90deg,#e74c3c,#ef6b5e,#f39c91); | |||
--dif-tint: rgba(231,76,60,.10); | |||
--dif-tint-strong: rgba(231,76,60,.18); | |||
} | |||
/* Nightmare = Azul */ | |||
.drops-inline.is-nightmare{ | |||
--dif-color:#3498db; | |||
--head-grad: linear-gradient(90deg,#3498db,#4aa8ea,#7bc2f5); | |||
--dif-tint: rgba(52,152,219,.10); | |||
--dif-tint-strong: rgba(52,152,219,.18); | |||
} | |||
/* Hallucination = Roxo */ | |||
.drops-inline.is-hallucination{ | |||
--dif-color:#9b59b6; | |||
--head-grad: linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9); | |||
--dif-tint: rgba(155,89,182,.12); | |||
--dif-tint-strong: rgba(155,89,182,.20); | |||
} | |||
/* Aplica as variáveis acima nos elementos já existentes */ | |||
.drops-inline .drops-header{ | |||
background: var(--head-grad); | |||
color:#fff; | |||
} | |||
.drops-inline .dif-badge{ | |||
background: var(--dif-color); | |||
} | |||
/* Fundo da LISTA (zona que envolve a tabela) com tom claro */ | |||
.drops-inline .mw-collapsible-content{ | |||
background: var(--dif-tint); | |||
border-top: 1px solid var(--drop-bd); | |||
border-bottom-left-radius: 14px; | |||
border-bottom-right-radius: 14px; | |||
} | |||
/* Tabela harmonizada com a cor (cabeçalho um pouco mais forte) */ | |||
.drops-inline .mw-collapsible-content .wikitable{ | |||
background: rgba(255,255,255,.9); /* mantém legibilidade */ | |||
border:1px solid var(--drop-bd); | |||
border-radius: 10px; | |||
overflow: hidden; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
background: var(--dif-tint-strong); | |||
border-bottom:1px solid var(--drop-bd); | |||
color:#1e2330; | |||
} | |||
.drops-inline .mw-collapsible-content .wikitable td, | |||
.drops-inline .mw-collapsible-content .wikitable th{ | |||
border-color: var(--drop-bd); | |||
} | |||
/* ===== Versão simples: Título + [Mostrar] centralizados ===== */ | |||
.mw-parser-output .drops-inline.mw-collapsible{ | |||
display:flex; | |||
justify-content:center; | |||
align-items:center; | |||
gap:12px; | |||
padding:10px 14px; | |||
border:1px solid #e7e8ee; | |||
border-radius:12px; | |||
background:#fff; | |||
} | |||
/* Título "Tabela de Drops" */ | |||
.mw-parser-output .drops-inline .drops-title{ | |||
margin:0; | |||
font-weight:700; | |||
} | |||
/* Toggle [Mostrar]/[Ocultar] na MESMA linha e centralizado */ | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle{ | |||
order:2 !important; | |||
float:none !important; | |||
position:static !important; | |||
display:inline-flex !important; | |||
align-items:center; | |||
margin:0 !important; | |||
} | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-flex; | |||
align-items:center; | |||
line-height:1; | |||
white-space:nowrap; /* evita quebra do "Mostrar ▸" */ | |||
} | |||
/* Conteúdo aberto ocupa a largura toda do cartão */ | |||
.mw-parser-output .drops-inline .mw-collapsible-content{ | |||
width:100% !important; | |||
padding:10px 12px 14px; | |||
background: #ffffff !important; | |||
} | |||
/* ===== DROPS (badge central + toggle central) ===== */ | |||
.mw-parser-output .drops-inline{ | |||
/* cartao */ | |||
border:1px solid #e7e8ee; | |||
border-radius:12px; | |||
background:#fff; | |||
box-shadow:0 6px 18px rgba(30,27,46,.06); | |||
padding:10px 12px; | |||
/* layout do header */ | |||
display:flex; | |||
flex-wrap:wrap; | |||
align-items:center; | |||
justify-content:center; /* centraliza badge e toggle */ | |||
gap:12px; | |||
} | |||
/* badge gerado por CSS a partir de data-badge */ | |||
.mw-parser-output .drops-inline::before{ | |||
content: attr(data-badge); | |||
text-transform: uppercase; | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
height:28px; | |||
line-height:28px; | |||
padding:0 16px; | |||
min-width:150px; /* cabe “HALLUCINATION” */ | |||
border-radius:999px; | |||
font:800 12px/1 system-ui, sans-serif; | |||
color:#fff; | |||
background: var(--dif-color, #7b5cff); | |||
box-shadow:0 0 0 1px rgba(0,0,0,.06) inset; | |||
} | |||
/* toggle [Mostrar ▸] na mesma linha e central */ | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle{ | |||
order:2 !important; | |||
float:none !important; | |||
display:inline-flex !important; | |||
align-items:center; | |||
margin:0 !important; | |||
position:static !important; | |||
} | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle a{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:4px; | |||
height:28px; | |||
line-height:28px; | |||
padding:0 12px; | |||
border-radius:999px; | |||
text-decoration:none; | |||
font-weight:700; | |||
background:#f3f4fa; | |||
color:#223; | |||
} | |||
.mw-parser-output .drops-inline > .mw-collapsible-toggle a:hover{ | |||
background:#e9eafb; | |||
} | |||
/* conteúdo abre abaixo (linha inteira), com “tinta” da dificuldade */ | |||
.mw-parser-output .drops-inline .mw-collapsible-content{ | |||
order:10; | |||
flex-basis:100%; | |||
width:100% !important; | |||
margin-top:8px; | |||
background: var(--dif-tint, rgba(123,92,255,.08)); | |||
border-top:1px solid #e9eaf3; | |||
border-bottom-left-radius:12px; | |||
border-bottom-right-radius:12px; | |||
padding:8px 8px 16px; | |||
} | |||
/* cores por dificuldade */ | |||
.mw-parser-output .drops-inline.is-easy{ | |||
--dif-color:#2ecc71; /* verde */ | |||
--dif-tint: rgba(46,204,113,.10); | |||
} | |||
.mw-parser-output .drops-inline.is-hard{ | |||
--dif-color:#e74c3c; /* vermelho */ | |||
--dif-tint: rgba(231,76,60,.10); | |||
} | |||
.mw-parser-output .drops-inline.is-nightmare{ | |||
--dif-color:#3498db; /* azul */ | |||
--dif-tint: rgba(52,152,219,.10); | |||
} | |||
.mw-parser-output .drops-inline.is-hallucination{ | |||
--dif-color:#9b59b6; /* roxo */ | |||
--dif-tint: rgba(155,89,182,.12); | |||
} | |||
/* responsivo */ | |||
@media (max-width:640px){ | |||
.mw-parser-output .drops-inline::before{ min-width:120px; padding:0 12px; } | |||
} | |||
/* ====== Custo de Entrada – grid de 4 colunas por dificuldade ====== */ | |||
.entry-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(4, minmax(240px,1fr)); | |||
gap:14px; | |||
margin:10px 0 16px; | |||
} | |||
@media (max-width:1200px){ .entry-grid{ grid-template-columns:repeat(2, minmax(240px,1fr)); } } | |||
@media (max-width:640px){ .entry-grid{ grid-template-columns:1fr; } } | |||
/* Cartão base */ | |||
.entry-card{ | |||
border:1px solid #e3e6ee; | |||
border-radius:12px; | |||
overflow:hidden; | |||
background: var(--tint, #fff); | |||
box-shadow: 0 2px 12px rgba(24,18,58,.06); | |||
} | |||
/* Cabeçalho e corpo */ | |||
.entry-card .entry-head{ | |||
padding:6px 8px; | |||
text-align:center; | |||
font-weight:800; | |||
color:#fff; | |||
background: var(--accent, #6b6b6b); | |||
letter-spacing:.3px; | |||
} | |||
.entry-card .entry-body{ | |||
padding:12px; | |||
text-align:center; | |||
background: var(--tint, #fff); | |||
line-height:1.6; | |||
} | |||
.entry-card .entry-body b{ font-weight:700; } | |||
.entry-card img.mw-file-element{ image-rendering:pixelated; vertical-align:middle; transform:translateY(-1px); } | |||
/* Paleta = mesma dos badges */ | |||
.entry-card.dif-easy{ --accent:#2ecc71; --tint:#eaf8f0; } | |||
.entry-card.dif-hard{ --accent:#e74c3c; --tint:#fdecea; } | |||
.entry-card.dif-nightmare{ --accent:#3498db; --tint:#eaf3fb; } | |||
.entry-card.dif-hallucination{ --accent:#9b59b6; --tint:#f1e8f6; } | |||
/* ===== Bonificações – Cards ===== */ | |||
.mw-parser-output .bono-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); | |||
gap:18px; | |||
margin:10px 0 24px; | |||
} | |||
.mw-parser-output .bono-card{ | |||
--bg:#fff; --bd:#e7e8ee; --head:#5b3aa8; --headText:#fff; | |||
background:var(--bg); | |||
border:1px solid var(--bd); | |||
border-radius:14px; | |||
box-shadow:0 4px 16px rgba(30,27,46,.06); | |||
display:flex; flex-direction:column; min-height:170px; | |||
} | |||
/* Cabeçalho colorido + chip */ | |||
.mw-parser-output .bono-card .bono-head{ | |||
background:var(--head); | |||
color:var(--headText); | |||
padding:10px 14px; | |||
border-radius:14px 14px 0 0; | |||
display:flex; align-items:center; justify-content:center; gap:10px; | |||
font-weight:800; letter-spacing:.2px; | |||
} | |||
.mw-parser-output .bono-card .rate-chip{ | |||
background:rgba(255,255,255,.22); | |||
border-radius:999px; | |||
padding:2px 10px; | |||
font:800 12px/1 system-ui, sans-serif; | |||
} | |||
/* Corpo do card */ | |||
.mw-parser-output .bono-card .bono-body{ padding:12px 14px 14px; } | |||
.mw-parser-output .bono-card .bono-body ul{ margin:6px 0 0; padding-left:18px; } | |||
.mw-parser-output .bono-card .bono-body li{ margin:4px 0; } | |||
/* Imagens 24px ficam nitidas */ | |||
.mw-parser-output .bono-card img.mw-file-element{ | |||
image-rendering: pixelated; vertical-align: middle; transform: translateY(-1px); | |||
} | |||
/* ===== Paleta por rate (tints combinando) ===== */ | |||
.mw-parser-output .bono-card.rate-100{ | |||
--head:linear-gradient(90deg, #0e8f53 0%, #1fb36b 55%, #7ff0a3 100%); | |||
--bg:#7ff0a3; --bd:#0e8f53; | |||
} | |||
.mw-parser-output .bono-card.rate-50{ | |||
--head:linear-gradient(90deg, #6f2bd6 0%, #9b6bff 55%, #e1d3ff 100%); | |||
--bg:#e1d3ff; --bd:#6f2bd6; | |||
} | |||
.mw-parser-output .bono-card.rate-25{ | |||
--head:linear-gradient(90deg, #0f2f66 0%, #1b56aa 55%, #6fc3ff 100%); | |||
--bg:#6fc3ff; --bd:#0f2f66; | |||
} | |||
.mw-parser-output .bono-card.rate-12{ | |||
--head:linear-gradient(90deg, #2f80ed 0%, #75b7ff 55%, #e6f3ff 100%); | |||
--bg:#e6f3ff; --bd:#2f80ed; | |||
} | |||
.mw-parser-output .bono-card.rate-1{ | |||
--head:linear-gradient(90deg, #8a929b 0%, #b9c2cc 55%, #eef2f6 100%); | |||
--bg:#eef2f6; --bd:#8a929b; --headText:#1f2a34; | |||
} | |||
.mw-parser-output .bono-card.rate-temp{ | |||
--head:linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9); | |||
--bg:#f7f0fb; --bd:#eadcf6; | |||
} | |||
/* --- GRID: manter preenchimento denso e permitir itens que "span" múltiplas colunas --- */ | |||
.mw-parser-output .bono-grid{ grid-auto-flow: dense; } | |||
/* --- TEMPORADA: ocupa 3 colunas, centralizado, com destaque visual --- */ | |||
.mw-parser-output .bono-card.rate-temp{ | |||
grid-column: span 3; /* ocupa o espaço de ~3 cards */ | |||
justify-self: center; /* centraliza o card dentro da grade */ | |||
/* se quiser garantir uma base mínima confortável: */ | |||
min-width: min(720px, 100%); | |||
} | |||
/* responsivo: em telas menores, reduz pra 2 colunas e depois 1 */ | |||
@media (max-width: 1200px){ | |||
.mw-parser-output .bono-card.rate-temp{ grid-column: span 2; } | |||
} | |||
@media (max-width: 700px){ | |||
.mw-parser-output .bono-card.rate-temp{ grid-column: span 1; min-width: 0; } | |||
} | |||
/* “chip” do título (Temporada) maior e robusto */ | |||
.mw-parser-output .rate-temp .rate-chip{ | |||
display:inline-block; | |||
background: rgba(255,255,255,.18); | |||
padding: 6px 14px; | |||
border-radius: 999px; | |||
font-size: 14px; /* um pouquinho maior */ | |||
font-weight: 900; | |||
} | |||
/* corpo com leve destaque e tipografia um tico maior */ | |||
.mw-parser-output .rate-temp .bono-body{ | |||
background: var(--temp-body-bg); | |||
font-size: 15px; | |||
} | |||
/* ===== Temporada — tema preto + dourado ===== */ | |||
@import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap'); | |||
.mw-parser-output .rate-temp{ | |||
position: relative; | |||
background: #0b0b0e; /* quase preto */ | |||
border-radius: 16px; | |||
color: #ededf0; | |||
/* contorno de fallback (se o gradiente-borda não pegar) */ | |||
box-shadow: | |||
0 18px 36px rgba(0,0,0,.50), | |||
0 0 0 1px rgba(212,175,55,.35) inset; | |||
transition: transform .18s ease, box-shadow .18s ease; | |||
} | |||
.mw-parser-output .rate-temp:hover{ | |||
transform: translateY(-2px); | |||
box-shadow: | |||
0 26px 60px rgba(0,0,0,.55), | |||
0 0 0 1px rgba(246,226,122,.55) inset; | |||
} | |||
/* Borda dourada “premium” com máscara (cai no fallback acima se não suportar) */ | |||
.mw-parser-output .rate-temp::before{ | |||
content:""; | |||
position:absolute; inset:0; | |||
border-radius: inherit; | |||
padding: 1px; /* espessura da borda */ | |||
background: linear-gradient(135deg,#d4af37 0%,#9c7c1b 35%,#f6e27a 60%,#d4af37 100%); | |||
-webkit-mask: | |||
linear-gradient(#000 0 0) content-box, | |||
linear-gradient(#000 0 0); | |||
-webkit-mask-composite: xor; /* Chrome/Safari */ | |||
mask-composite: exclude; /* Firefox */ | |||
pointer-events: none; | |||
} | |||
/* Cabeçalho/chip */ | |||
.mw-parser-output .rate-temp .bono-head{ | |||
background: transparent; | |||
text-align: center; | |||
padding-top: 10px; | |||
} | |||
.mw-parser-output .rate-temp .rate-chip{ | |||
display:inline-block; | |||
padding: 8px 14px; | |||
border-radius: 999px; | |||
font: 900 14px/1 "Lilita One", system-ui, sans-serif; | |||
letter-spacing: .6px; | |||
text-transform: uppercase; | |||
color: #1a1400; | |||
background: linear-gradient(90deg,#f6e27a 0%, #e9c65a 40%, #d4af37 100%); | |||
border: 1px solid rgba(255,255,255,.12); | |||
box-shadow: | |||
0 6px 14px rgba(212,175,55,.35), | |||
inset 0 1px 0 rgba(255,255,255,.45); | |||
} | |||
/* Corpo do card */ | |||
.mw-parser-output .rate-temp .bono-body{ | |||
background: transparent; | |||
padding: 14px 18px 18px; | |||
} | |||
.mw-parser-output .rate-temp .bono-body ul{ | |||
margin: 6px 0 0; | |||
padding-left: 22px; /* recuo do marcador */ | |||
} | |||
.mw-parser-output .rate-temp .bono-body li{ | |||
padding: 6px 0; | |||
} | |||
/* marcador dourado dos bullets */ | |||
.mw-parser-output .rate-temp .bono-body li::marker{ | |||
color: #f0d58a; | |||
} | |||
/* Destaque dos rótulos no texto */ | |||
.mw-parser-output .rate-temp .bono-body b{ | |||
color: #f7e08e; | |||
font-family: "Lilita One", system-ui, sans-serif; | |||
letter-spacing: .2px; | |||
} | |||
/* Links dentro do card (se houver) */ | |||
.mw-parser-output .rate-temp .bono-body a{ | |||
color: #ffd86b; | |||
border-bottom: 1px dashed rgba(255,216,107,.35); | |||
} | |||
.mw-parser-output .rate-temp .bono-body a:hover{ | |||
color: #ffeaa1; | |||
border-bottom-color: rgba(255,234,161,.6); | |||
} | |||
/* Ajustes para Vector Dark (se usar) */ | |||
.skin-vector-dark .mw-parser-output .rate-temp{ | |||
color: #f2f3f5; | |||
background: #08090b; | |||
} | |||
.skin-vector-dark .mw-parser-output .rate-temp .rate-chip{ | |||
color: #120d00; | |||
} | |||
/* === Temporada: tema preto & dourado, mais claro e “brilhante” === */ | |||
.mw-parser-output .bono-card.rate-temp{ | |||
/* Paleta */ | |||
--gold-1:#fff2bf; /* luz */ | |||
--gold-2:#ffd36a; /* ouro vivo */ | |||
--gold-3:#f6b84a; /* ouro médio */ | |||
--gold-4:#b7861a; /* contorno */ | |||
--ink-1:#111216; /* fundo 1 */ | |||
--ink-2:#17181d; /* fundo 2 */ | |||
position: relative; | |||
color:#f6f3e7; | |||
background: | |||
radial-gradient(120% 160% at 50% -20%, rgba(255,211,110,.18), transparent 60%), | |||
radial-gradient(120% 140% at 50% 120%, rgba(255,211,110,.10), transparent 60%), | |||
linear-gradient(180deg, var(--ink-1), var(--ink-2)); | |||
border:1px solid color-mix(in oklab, var(--gold-4) 85%, #000); | |||
border-radius:16px; | |||
box-shadow: | |||
0 22px 40px rgba(0,0,0,.65), | |||
0 0 0 2px rgba(255,214,140,.08) inset, | |||
0 0 26px rgba(255,206,120,.22); | |||
font-family:"Cormorant Garamond","Times New Roman",serif; | |||
} | |||
/* halo/realce de bordas (bem sutil) */ | |||
.mw-parser-output .bono-card.rate-temp::after{ | |||
content:""; | |||
pointer-events:none; | |||
position:absolute; inset:0; border-radius:16px; | |||
box-shadow: 0 0 0 1px rgba(255,214,140,.25) inset, | |||
0 0 32px rgba(255,214,120,.18); | |||
} | |||
/* Faixa “Temporada” – mais dourado e destacado */ | |||
.mw-parser-output .bono-card.rate-temp .bono-head{ | |||
margin:-14px auto 10px !important; | |||
display:inline-flex; align-items:center; justify-content:center; | |||
padding:0; background:transparent; border:0; | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-head .rate-chip{ | |||
display:inline-flex; align-items:center; justify-content:center; | |||
min-height:36px; padding:0 18px; border-radius:999px; | |||
color:#1b1407; font-weight:800; letter-spacing:.6px; text-transform:uppercase; | |||
background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 60%, var(--gold-3) 100%); | |||
border:1px solid var(--gold-4); | |||
box-shadow: | |||
0 10px 24px rgba(255,203,96,.35), | |||
0 1px 0 var(--gold-1) inset, | |||
0 -1px 0 var(--gold-4) inset; | |||
filter: drop-shadow(0 0 12px rgba(255,198,90,.55)); | |||
} | |||
/* Corpo: marcadores, separadores e links claros */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body ul{ | |||
margin: 6px 0 12px; padding-left: 1.25em; | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-body li{ | |||
margin: 8px 0; | |||
/* separador discreto entre linhas */ | |||
border-top:1px dashed rgba(255,214,140,.22); | |||
padding-top:10px; | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-body li:first-child{ | |||
border-top:0; padding-top:0; | |||
} | |||
/* marcadores dourados */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body li::marker{ | |||
color: var(--gold-2); | |||
} | |||
/* destaques das labels (Rate, Drop, Outros...) */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body b{ | |||
color: var(--gold-1); | |||
text-shadow: 0 0 8px rgba(255,211,120,.25); | |||
} | |||
/* links mais visíveis */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body a{ | |||
color: var(--gold-2); | |||
text-decoration-color: rgba(255,214,140,.45); | |||
} | |||
.mw-parser-output .bono-card.rate-temp .bono-body a:hover{ | |||
color: var(--gold-1); | |||
text-shadow: 0 0 10px rgba(255,211,120,.6); | |||
} | |||
/* (Opcional) deixa a tipografia um pouco maior e espaçada dentro do card */ | |||
.mw-parser-output .bono-card.rate-temp .bono-body{ | |||
font-size: 15.5px; | |||
line-height: 1.55; | |||
} | |||
/* ====== Callouts do Guia do Iniciante ====== */ | |||
.guide-callout{ | |||
margin: 10px 0 16px; | |||
padding: 10px 12px; | |||
border: 1px solid #e6e8f2; | |||
border-radius: 10px; | |||
background: #f9fafc; | |||
box-shadow: 0 4px 14px rgba(24,18,58,.06); | |||
line-height: 1.45; | |||
} | |||
.guide-callout b{ font-weight: 800; } | |||
/* Variações */ | |||
.guide-tip{ | |||
border-color: #cfe6ff; | |||
background: linear-gradient(180deg,#f4f9ff, #f9fbff); | |||
} | |||
.guide-important{ | |||
border-color: #d9e6d9; | |||
background: linear-gradient(180deg,#f4fff6, #fbfffc); | |||
} | |||
.guide-attention{ | |||
border-color: #ffe0a8; | |||
background: linear-gradient(180deg,#fff9eb, #fffdf7); | |||
} | |||
/* ===== Pacote Iniciante — simples (1 coluna) ===== */ | |||
.pack-simple{ | |||
width: min(640px, 96%); | |||
margin: 12px auto 18px; /* centraliza */ | |||
border: 1px solid var(--rt-bd, #e7e8ee); | |||
border-radius: 12px; | |||
background: var(--rt-bg, #fff); | |||
} | |||
.pack-title{ | |||
font-weight: 800; | |||
text-align: center; | |||
padding: 8px 10px; | |||
color: var(--rt-text, #1e1b2e); | |||
} | |||
.pack-list{ | |||
list-style: none; | |||
margin: 0; | |||
padding: 0 12px 10px; | |||
} | |||
.pack-row{ | |||
display: grid; | |||
grid-template-columns: 28px 1fr; /* ícone | nome */ | |||
align-items: center; | |||
gap: 10px; | |||
padding: 8px 0; | |||
border-top: 1px solid var(--rt-bd, #e7e8ee); | |||
} | |||
.pack-row:first-child{ border-top: 0; } | |||
.pack-ico .mw-file-element{ | |||
width: 24px; height: 24px; | |||
image-rendering: pixelated; | |||
display: block; | |||
} | |||
.pack-name{ | |||
color: var(--rt-text, #1e1b2e); | |||
} | |||
/* dark mode opcional (Vector dark) */ | |||
.skin-vector-dark .pack-simple{ | |||
background: #16171c; | |||
border-color: #2a2c35; | |||
} | |||
.skin-vector-dark .pack-row{ border-top-color: #2a2c35; } | |||
.skin-vector-dark .pack-title, .skin-vector-dark .pack-name{ color: #e6e6ea; } | |||
/* Bloco do nível: cartão leve */ | |||
.nivel-box{ | |||
border:1px solid #e6e8f2; border-radius:12px; | |||
background:#fff; padding:8px 12px; margin:10px 0; | |||
box-shadow: 0 6px 18px rgba(24,18,58,.06); | |||
} | |||
/* Título do cabeçalho */ | |||
.nivel-box .nivel-head{ | |||
font-weight:800; text-align:center; margin:2px 0 6px; | |||
} | |||
/* Conteúdo aberto com um espacinho */ | |||
.nivel-box .mw-collapsible-content{ | |||
padding:8px 0 12px; | |||
} | |||
/* Neutro para blocos de nível */ | |||
.drops-inline.is-neutral{ | |||
--dif-color:#6c757d; | |||
--head-grad: linear-gradient(90deg,#6c757d,#8a95a3,#a3adb8); | |||
--dif-tint: rgba(108,117,125,.10); | |||
--dif-tint-strong: rgba(108,117,125,.18); | |||
} | |||
/* ===== DROPS — Paletas por FAIXA DE NÍVEL ===== */ | |||
/* Cada classe só define as variáveis de cor; o layout já vem das tuas regras base. */ | |||
/* Nomeei como .is-lv-<inicio>-<fim> pra ficar intuitivo de usar no wikitexto. */ | |||
.drops-inline.is-lv-1-20{ | |||
--dif-color:#2ecc71; | |||
--head-grad: linear-gradient(90deg,#2ecc71,#43d888,#6be8a1); | |||
--dif-tint: rgba(46,204,113,.10); | |||
--dif-tint-strong: rgba(46,204,113,.18); | |||
} | |||
.drops-inline.is-lv-20-30{ | |||
--dif-color:#1abc9c; | |||
--head-grad: linear-gradient(90deg,#1abc9c,#23c7a9,#52e0c6); | |||
--dif-tint: rgba(26,188,156,.10); | |||
--dif-tint-strong: rgba(26,188,156,.18); | |||
} | |||
.drops-inline.is-lv-30-50{ | |||
--dif-color:#3498db; | |||
--head-grad: linear-gradient(90deg,#3498db,#4aa8ea,#7bc2f5); | |||
--dif-tint: rgba(52,152,219,.10); | |||
--dif-tint-strong: rgba(52,152,219,.18); | |||
} | |||
.drops-inline.is-lv-50-70{ | |||
--dif-color:#5b3aa8; | |||
--head-grad: linear-gradient(90deg,#5b3aa8,#7462d1,#9a8be6); | |||
--dif-tint: rgba(91,58,168,.10); | |||
--dif-tint-strong: rgba(91,58,168,.18); | |||
} | |||
.drops-inline.is-lv-70-100{ | |||
--dif-color:#9b59b6; | |||
--head-grad: linear-gradient(90deg,#9b59b6,#b074c9,#caa0d9); | |||
--dif-tint: rgba(155,89,182,.12); | |||
--dif-tint-strong: rgba(155,89,182,.20); | |||
} | |||
.drops-inline.is-lv-100-125{ | |||
--dif-color:#e91e63; | |||
--head-grad: linear-gradient(90deg,#e91e63,#f26f97,#f8a9c0); | |||
--dif-tint: rgba(233,30,99,.10); | |||
--dif-tint-strong: rgba(233,30,99,.18); | |||
} | |||
.drops-inline.is-lv-126-150{ | |||
--dif-color:#f39c12; | |||
--head-grad: linear-gradient(90deg,#f39c12,#f8b539,#fbd17a); | |||
--dif-tint: rgba(243,156,18,.10); | |||
--dif-tint-strong: rgba(243,156,18,.18); | |||
} | |||
.drops-inline.is-lv-150-180{ | |||
--dif-color:#e74c3c; | |||
--head-grad: linear-gradient(90deg,#e74c3c,#ef6b5e,#f39c91); | |||
--dif-tint: rgba(231,76,60,.10); | |||
--dif-tint-strong: rgba(231,76,60,.18); | |||
} | |||
.drops-inline.is-lv-180-200{ | |||
--dif-color:#6c757d; | |||
--head-grad: linear-gradient(90deg,#6c757d,#8a95a3,#a3adb8); | |||
--dif-tint: rgba(108,117,125,.10); | |||
--dif-tint-strong: rgba(108,117,125,.18); | |||
} | |||
.drops-inline.is-lv-200-230{ | |||
--dif-color:#d4af37; | |||
--head-grad: linear-gradient(90deg,#d4af37,#e2c24d,#f0d874); | |||
--dif-tint: rgba(212,175,55,.10); | |||
--dif-tint-strong: rgba(212,175,55,.18); | |||
} | |||
.drops-inline.is-lv-230-240{ | |||
--dif-color:#00bcd4; | |||
--head-grad: linear-gradient(90deg,#00bcd4,#33cfe0,#7ae6ef); | |||
--dif-tint: rgba(0,188,212,.10); | |||
--dif-tint-strong: rgba(0,188,212,.18); | |||
} | |||
.drops-inline.is-lv-240-250{ | |||
--dif-color:#b784f7; | |||
--head-grad: linear-gradient(90deg,#b784f7,#caa0ff,#e2ccff); | |||
--dif-tint: rgba(183,132,247,.12); | |||
--dif-tint-strong: rgba(183,132,247,.20); | |||
} | |||
.drops-inline.is-lv-250-260{ | |||
--dif-color:#16a085; | |||
--head-grad: linear-gradient(90deg,#16a085,#20b89b,#49d9bd); | |||
--dif-tint: rgba(22,160,133,.10); | |||
--dif-tint-strong: rgba(22,160,133,.18); | |||
} | |||
.drops-inline.is-lv-260-275{ | |||
--dif-color:#2b2d42; | |||
--head-grad: linear-gradient(90deg,#2b2d42,#4b4f6a,#8d99ae); | |||
--dif-tint: rgba(43,45,66,.10); | |||
--dif-tint-strong: rgba(43,45,66,.18); | |||
} | |||
/* Box do mapa (gif + nome) centralizada, fundo branco */ | |||
.mw-parser-output .mapa-spot{ | |||
display:flex; | |||
flex-direction:column; | |||
align-items:center; | |||
justify-content:center; | |||
width: 280px; /* ajuste se quiser maior/menor */ | |||
margin: 0 auto; /* centraliza na célula */ | |||
padding: 12px 14px; | |||
background:#fff; | |||
border:1px solid #e7e8ee; | |||
border-radius:12px; | |||
box-shadow: 0 6px 18px rgba(18,18,28,.08); | |||
} | |||
/* Gif com “pixel art” bonito e respiro */ | |||
.mw-parser-output .mapa-spot img.mw-file-element{ | |||
width:64px; /* pode usar 40/48/64px */ | |||
height:auto; | |||
image-rendering: pixelated; | |||
margin-bottom:8px; | |||
} | |||
/* Nome do mapa */ | |||
.mw-parser-output .mapa-spot .mapa-nome{ | |||
font-weight:600; | |||
color:#2b2b36; | |||
line-height:1.25; | |||
text-align:center; | |||
} | |||
/* Remover o fundo quadrado atrás do sprite, mantendo a caixa branca do .up-figure */ | |||
.mw-parser-output .up-figure img.mw-file-element, | |||
.mw-parser-output .up-figure .up-sprite{ | |||
background: transparent !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
outline: 0 !important; | |||
} | |||
/* ========= EVENTOS AUTOMÁTICOS – estilos ========= */ | |||
:root{ | |||
--ev-bg: #ffffff; | |||
--ev-bd: #e7e8ee; | |||
--ev-soft: #f7f8ff; | |||
--ev-text: #1e1b2e; | |||
--ev-accent-1: #6b8cff; /* azul */ | |||
--ev-accent-2: #ffb86b; /* laranja */ | |||
--ev-accent-3: #9b59b6; /* roxo */ | |||
} | |||
.mw-parser-output .ev-wrap{ | |||
max-width: 1100px; margin: 8px auto 22px; padding: 0 10px; | |||
color: var(--ev-text); | |||
} | |||
.mw-parser-output .ev-title{ | |||
text-align: center; margin: 6px 0 10px; | |||
font-size: 22px; font-weight: 800; letter-spacing: .2px; | |||
background: linear-gradient(90deg,#6b8cff,#9b59b6,#ffb86b); | |||
-webkit-background-clip: text; background-clip: text; color: transparent; | |||
} | |||
.mw-parser-output .ev-callout{ | |||
background: var(--ev-soft); | |||
border: 1px solid var(--ev-bd); | |||
border-radius: 12px; | |||
padding: 12px 14px; | |||
box-shadow: 0 6px 18px rgba(24,18,58,.08); | |||
margin: 8px 0 16px; | |||
} | |||
.mw-parser-output .ev-cards{ | |||
display: grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); | |||
gap: 14px; | |||
} | |||
/* Cartão colapsável */ | |||
.mw-parser-output .ev-card{ | |||
position: relative; | |||
border: 1px solid var(--ev-bd); | |||
border-radius: 14px; | |||
background: var(--ev-bg); | |||
box-shadow: 0 8px 20px rgba(24,18,58,.08); | |||
overflow: hidden; | |||
padding-right: 88px; /* espaço pro toggle à direita */ | |||
} | |||
/* Cabeçalho do cartão */ | |||
.mw-parser-output .ev-head{ | |||
display: flex; align-items: center; gap: 10px; | |||
padding: 10px 14px; | |||
background: linear-gradient(90deg,#f4f6ff,#fff); | |||
border-bottom: 1px solid var(--ev-bd); | |||
} | |||
.mw-parser-output .ev-name{ font-weight: 800; } | |||
.mw-parser-output .ev-badge{ | |||
display:inline-flex; align-items:center; justify-content:center; | |||
height: 22px; padding: 0 10px; border-radius: 999px; | |||
color:#fff; font-weight: 800; font-size: 12px; text-transform: uppercase; | |||
} | |||
.mw-parser-output .ev-badge.ev-1{ background:#6b8cff; } | |||
.mw-parser-output .ev-badge.ev-2{ background:#ff9b51; } | |||
.mw-parser-output .ev-badge.ev-3{ background:#9b59b6; } | |||
/* reposiciona o [Mostrar]/[Ocultar] do MW */ | |||
.mw-parser-output .ev-card > .mw-collapsible-toggle{ | |||
position: absolute !important; right: 12px; top: 12px !important; | |||
float: none !important; margin: 0 !important; | |||
} | |||
.mw-parser-output .ev-card > .mw-collapsible-toggle a{ | |||
display:inline-flex; align-items:center; gap:6px; | |||
height: 28px; padding:0 12px; border-radius:999px; text-decoration:none; | |||
background:#f3f4fa; font-weight:700; color:#324; | |||
} | |||
.mw-parser-output .ev-card > .mw-collapsible-toggle a:hover{ background:#e9eafb; } | |||
/* conteúdo do cartão */ | |||
.mw-parser-output .ev-body{ | |||
padding: 12px 14px 14px; | |||
} | |||
.mw-parser-output .ev-specs{ | |||
width:100%; border-collapse: collapse; margin: 6px 0 0; | |||
} | |||
.mw-parser-output .ev-specs th, | |||
.mw-parser-output .ev-specs td{ | |||
border: 1px solid var(--ev-bd); padding: .55em .7em; text-align: left; | |||
} | |||
.mw-parser-output .ev-specs th{ background:#f7f8fb; font-weight: 800; } | |||
/* Loja de eventos – grid */ | |||
.mw-parser-output .ev-shop-title{ margin: 18px 0 10px; font-weight: 800; } | |||
.mw-parser-output .ev-shop{ | |||
display:grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); | |||
gap: 12px; | |||
} | |||
.mw-parser-output .ev-item{ | |||
display:flex; gap:10px; align-items:center; | |||
background: var(--ev-bg); | |||
border:1px solid var(--ev-bd); border-radius:12px; | |||
padding:10px 12px; box-shadow: 0 6px 16px rgba(24,18,58,.06); | |||
} | |||
.mw-parser-output .ev-item b{ display:block; } | |||
.mw-parser-output .ev-price{ margin-left:auto; font-weight:800; color:#324; } | |||
/* ===== Eventos em destaque (textual) ===== */ | |||
.mw-parser-output .ev-sections{ | |||
display:grid; | |||
gap:14px; | |||
} | |||
.mw-parser-output .ev-section{ | |||
background:#fff; | |||
border:1px solid var(--ev-bd, #e7e8ee); | |||
border-radius:12px; | |||
box-shadow:0 6px 16px rgba(24,18,58,.06); | |||
padding:14px 16px; | |||
} | |||
.mw-parser-output .ev-h{ | |||
margin:0 0 6px; | |||
font-weight:800; | |||
font-size:18px; | |||
letter-spacing:.2px; | |||
} | |||
.mw-parser-output .ev-sub{ | |||
display:inline-block; | |||
margin-left:8px; | |||
font-size:12px; | |||
color:#58607a; | |||
text-transform:uppercase; | |||
letter-spacing:.3px; | |||
} | |||
.mw-parser-output .ev-kv{ | |||
/* tabela “key–value” em 2 colunas */ | |||
display:grid; | |||
grid-template-columns: 160px 1fr; | |||
column-gap:12px; | |||
row-gap:6px; | |||
align-items:start; | |||
margin:10px 0 4px; | |||
} | |||
.mw-parser-output .ev-kv .k{ | |||
font-weight:800; | |||
color:#2e3350; | |||
} | |||
.mw-parser-output .ev-kv .v{ | |||
color:#1f2233; | |||
} | |||
.mw-parser-output .ev-list{ | |||
margin:0; | |||
} | |||
.mw-parser-output .ev-list li{ | |||
margin:0 0 4px 18px; | |||
} | |||
.mw-parser-output .ev-note{ | |||
margin-top:6px; | |||
font-size:12px; | |||
color:#6b6f85; | |||
} | |||
/* ===== Premiação (colapsável) por evento ===== */ | |||
.mw-parser-output .ev-rewards{ | |||
margin-top: 12px; | |||
padding-top: 6px; | |||
border-top: 1px dashed #e6e8f2; | |||
} | |||
/* Centraliza e estiliza o link padrão do MediaWiki como "botão" */ | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle{ | |||
float: none !important; | |||
position: static !important; | |||
display: flex !important; | |||
justify-content: center; | |||
align-items: center; | |||
margin: 0 !important; | |||
text-align: center !important; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a{ | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 6px; | |||
padding: 8px 14px; | |||
border-radius: 999px; | |||
background: #f3f4fa; | |||
border: 1px solid #e1e3ee; | |||
font-weight: 700; | |||
text-decoration: none !important; | |||
color: #1f2233; | |||
transition: background .15s ease, box-shadow .15s ease, transform .05s ease; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:hover{ | |||
background: #e9ebfb; | |||
box-shadow: 0 4px 12px rgba(24,18,58,.10); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:active{ | |||
transform: translateY(1px); | |||
} | |||
/* Conteúdo centralizado e com largura máxima “saudável” */ | |||
.mw-parser-output .ev-rewards .mw-collapsible-content{ | |||
margin-top: 12px; | |||
display: flex; | |||
justify-content: center; | |||
} | |||
.mw-parser-output .ev-rewards .ev-prize{ | |||
width: min(720px, 100%); | |||
margin: 0 auto; | |||
border-collapse: collapse; | |||
} | |||
.mw-parser-output .ev-rewards .ev-prize th{ | |||
background: #f7f8fc; | |||
font-weight: 800; | |||
border: 1px solid #e7e8ee; | |||
} | |||
.mw-parser-output .ev-rewards .ev-prize td{ | |||
border: 1px solid #e7e8ee; | |||
text-align: center; | |||
} | |||
/* --------------------------------------------------------- | |||
Eventos — visual premium (tipografia, cards, botões, etc.) | |||
--------------------------------------------------------- */ | |||
/* Fontes — mesmas da wiki pra manter identidade */ | |||
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700;800&display=swap'); | |||
:root{ | |||
/* Paleta clara */ | |||
--ev-bg: #ffffff; | |||
--ev-card: #ffffff; | |||
--ev-border: #e7e8ee; | |||
--ev-soft: #f7f8fc; | |||
--ev-text: #1f2233; | |||
/* Acentos (roxinho/azul da wiki) */ | |||
--ev-accent-1: #6b5cff; | |||
--ev-accent-2: #22b8ff; | |||
--ev-grad: linear-gradient(90deg, var(--ev-accent-1), var(--ev-accent-2)); | |||
/* Chips/badges */ | |||
--ev-chip-bg: rgba(107,92,255,.10); | |||
--ev-chip-bd: rgba(107,92,255,.22); | |||
/* Sombras */ | |||
--ev-shadow: 0 10px 28px rgba(24,18,58,.12); | |||
--ev-shadow-strong: 0 18px 44px rgba(24,18,58,.18); | |||
} | |||
/* Tema escuro (Vector Dark) */ | |||
.skin-vector-dark :root{ | |||
--ev-bg: #121318; | |||
--ev-card: #161720; | |||
--ev-border: #2a2c35; | |||
--ev-soft: #1c1e28; | |||
--ev-text: #e8eaf2; | |||
--ev-chip-bg: rgba(107,92,255,.22); | |||
--ev-chip-bd: rgba(107,92,255,.35); | |||
--ev-shadow: 0 10px 28px rgba(0,0,0,.45); | |||
--ev-shadow-strong: 0 18px 44px rgba(0,0,0,.6); | |||
} | |||
/* Área geral dos eventos */ | |||
.mw-parser-output .ev-sections{ | |||
display: grid; | |||
gap: 18px; | |||
margin: 10px 0 22px; | |||
} | |||
/* Cada evento como “card” */ | |||
.mw-parser-output .ev-section{ | |||
background: var(--ev-card); | |||
border: 1px solid var(--ev-border); | |||
border-radius: 16px; | |||
padding: 14px 16px 16px; | |||
box-shadow: var(--ev-shadow); | |||
color: var(--ev-text); | |||
font-family: "Nunito", system-ui, sans-serif; | |||
} | |||
.mw-parser-output .ev-section:hover{ | |||
box-shadow: var(--ev-shadow-strong); | |||
} | |||
/* Título com gradiente + chip de periodicidade */ | |||
.mw-parser-output .ev-h{ | |||
display: flex; align-items: center; gap: 10px; | |||
margin: 2px 0 10px; | |||
font: 700 22px/1 "Paytone One", system-ui, sans-serif; | |||
background: var(--ev-grad); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
color: transparent; | |||
} | |||
.mw-parser-output .ev-h .ev-sub{ | |||
font: 800 12px/1 "Nunito", system-ui, sans-serif; | |||
color: var(--ev-text); | |||
padding: 6px 10px; | |||
border-radius: 999px; | |||
background: var(--ev-chip-bg); | |||
border: 1px solid var(--ev-chip-bd); | |||
color: #453aa0; /* contraste bom no claro */ | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-h .ev-sub{ | |||
color: #d7d8ff; /* contraste no escuro */ | |||
} | |||
/* Key–Value (grid de “Horários / Duração / …”) */ | |||
.mw-parser-output .ev-kv{ | |||
display: grid; | |||
grid-template-columns: 160px 1fr; | |||
gap: 10px 14px; | |||
align-items: start; | |||
margin: 6px 0 0; | |||
} | |||
.mw-parser-output .ev-kv .k{ | |||
font-weight: 800; | |||
padding: 6px 10px; | |||
border-radius: 10px; | |||
background: var(--ev-chip-bg); | |||
border: 1px solid var(--ev-chip-bd); | |||
color: #3b2fb8; | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-kv .k{ color:#d7d8ff; } | |||
.mw-parser-output .ev-kv .v{ | |||
padding: 10px 12px; | |||
border-radius: 12px; | |||
background: var(--ev-soft); | |||
border: 1px solid var(--ev-border); | |||
} | |||
/* Se o bloco de premiação estiver *dentro* do grid, ocupa a linha toda */ | |||
.mw-parser-output .ev-kv > .ev-rewards{ | |||
grid-column: 1 / -1; | |||
} | |||
/* ---- Premiação: botão colapsável + conteúdo centralizado ---- */ | |||
.mw-parser-output .ev-rewards{ | |||
margin-top: 10px; | |||
padding-top: 6px; | |||
border-top: 1px dashed var(--ev-border); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: flex !important; | |||
justify-content: center; align-items: center; | |||
margin: 0 !important; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a{ | |||
display: inline-flex; align-items: center; gap: 8px; | |||
padding: 9px 16px; | |||
border-radius: 999px; | |||
border: 0; | |||
background: var(--ev-grad); | |||
color: #fff !important; | |||
font-weight: 800; | |||
text-decoration: none !important; | |||
box-shadow: 0 8px 18px rgba(36,45,110,.18); | |||
transition: transform .05s ease, box-shadow .15s ease, filter .15s ease; | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.05); | |||
box-shadow: 0 12px 26px rgba(36,45,110,.24); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a:active{ | |||
transform: translateY(1px); | |||
} | |||
.mw-parser-output .ev-rewards .mw-collapsible-toggle a::before{ | |||
content: "🎁"; | |||
font-size: 14px; | |||
} | |||
/* Conteúdo centralizado */ | |||
.mw-parser-output .ev-rewards .mw-collapsible-content{ | |||
margin-top: 12px; | |||
display: flex; justify-content: center; | |||
} | |||
/* Tabela de prêmios */ | |||
.mw-parser-output .ev-prize{ | |||
width: min(760px, 100%); | |||
margin: 0 auto; | |||
border-collapse: collapse; | |||
font-family: "Nunito", system-ui, sans-serif; | |||
} | |||
.mw-parser-output .ev-prize th{ | |||
background: linear-gradient(180deg, #f7f8ff, #eef0ff); | |||
border: 1px solid var(--ev-border); | |||
font-weight: 800; | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-prize th{ | |||
background: linear-gradient(180deg, #202236, #1b1d2b); | |||
} | |||
.mw-parser-output .ev-prize td{ | |||
border: 1px solid var(--ev-border); | |||
text-align: center; | |||
padding: .6em .7em; | |||
} | |||
.mw-parser-output .ev-prize tr:nth-child(even) td{ | |||
background: rgba(107,92,255,.035); | |||
} | |||
.skin-vector-dark .mw-parser-output .ev-prize tr:nth-child(even) td{ | |||
background: rgba(107,92,255,.11); | |||
} | |||
/* ---- Rodapé do card de evento (onde fica o botão de premiação) ---- */ | |||
.ev-section .ev-footer{ | |||
margin: 12px 4px 0; | |||
padding-top: 10px; | |||
border-top: 1px dashed #e9e7fb; | |||
display: flex; | |||
justify-content: center; | |||
} | |||
/* ===== Eventos – bloco de premiação dentro do card ===== */ | |||
.ev-kv .ev-rewards{ | |||
grid-column: 1 / -1; /* ocupa as 2 colunas do grid */ | |||
margin: 14px 0 4px; | |||
padding-top: 10px; | |||
border-top: 1px dashed #e7e9fb; /* separador sutil */ | |||
text-align: center; | |||
} | |||
/* botão toggle centralizado e com cara de chip */ | |||
.ev-rewards .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
gap: 8px; | |||
margin: 0 auto !important; | |||
padding: 6px 14px; | |||
border-radius: 999px; | |||
background: #f1efff; | |||
border: 1px solid #d9d6ff; | |||
box-shadow: 0 1px 0 rgba(60,45,140,.06); | |||
} | |||
.ev-rewards .mw-collapsible-toggle a{ | |||
font-weight: 800; | |||
font-size: 13px; | |||
color: #4b3ecf; | |||
text-decoration: none !important; | |||
} | |||
.ev-rewards .mw-collapsible-toggle a::before{ | |||
content: "🎁"; | |||
font-size: 14px; | |||
transform: translateY(-1px); | |||
} | |||
/* conteúdo expandido centralizado */ | |||
.ev-rewards .mw-collapsible-content{ | |||
margin-top: 12px; | |||
} | |||
/* ===== Tabela da premiação (visual de cartão) ===== */ | |||
.wikitable.ev-prize{ | |||
border-collapse: collapse !important; | |||
margin: 0 auto !important; | |||
width: min(720px, 96%) !important; | |||
background: #fff; | |||
border: 1px solid #e6e6f5 !important; | |||
border-radius: 10px; | |||
overflow: hidden; | |||
box-shadow: 0 4px 12px rgba(37,21,96,.08); | |||
} | |||
.wikitable.ev-prize th{ | |||
background: linear-gradient(180deg,#f6f4ff 0%, #eeecff 100%); | |||
color: #362f6d; | |||
font-weight: 800; | |||
padding: 10px 12px; | |||
border-bottom: 1px solid #e6e6f5 !important; | |||
text-align: center; | |||
} | |||
.wikitable.ev-prize td{ | |||
padding: 10px 12px !important; | |||
border-top: 1px solid #f0f1fb !important; | |||
text-align: center; | |||
} | |||
.wikitable.ev-prize tr:nth-child(even) td{ background:#fafafe; } | |||
/* remove qualquer float/resíduo do toggle padrão */ | |||
.ev-rewards .mw-collapsible-toggle-default{ float:none !important; } | |||
.mw-parser-output .gif-120 img.mw-file-element{ | |||
width:120px; | |||
height:auto; | |||
image-rendering:pixelated; | |||
} | |||
/* ===== Card principal do Sistema VIP ===== */ | |||
.mw-parser-output .vip-panel{ | |||
position: relative; | |||
max-width: 1100px; | |||
margin: 26px auto 24px; | |||
padding: 20px 22px 18px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient(140% 200% at 50% -40%, rgba(255,166,90,.20), transparent 60%), | |||
radial-gradient(120% 180% at 50% 140%, rgba(140,110,255,.26), transparent 60%), | |||
linear-gradient(180deg,#140824,#25184a); | |||
border: 1px solid color-mix(in oklab,#8e6bff 70%,#ffb35a 30%); | |||
box-shadow: | |||
0 22px 40px rgba(0,0,0,.75), | |||
0 0 0 1px rgba(35,10,70,.7) inset, | |||
0 0 28px rgba(143,110,255,.32); | |||
color:#fdf7ff; | |||
font-family:"Nunito", system-ui, sans-serif; | |||
} | |||
/* halo suave na borda */ | |||
.mw-parser-output .vip-panel::after{ | |||
content:""; | |||
pointer-events:none; | |||
position:absolute; inset:0; border-radius:18px; | |||
box-shadow: | |||
0 0 0 1px rgba(255,176,100,.3) inset, | |||
0 0 30px rgba(255,176,100,.18); | |||
} | |||
/* “chip” SISTEMA VIP sobre a borda, sem fundo branco */ | |||
.mw-parser-output .vip-panel-chip{ | |||
position:absolute; | |||
top:-20px; | |||
left:50%; | |||
transform:translateX(-50%); | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
min-height:32px; | |||
padding:0 26px; | |||
border-radius:999px; | |||
font-weight:900; | |||
letter-spacing:.16em; | |||
text-transform:uppercase; | |||
color:#26100a; | |||
background:linear-gradient(180deg,#ffe6c0 0%, #ffb347 55%, #ff9334 100%); | |||
border:1px solid #b86322; | |||
box-shadow: | |||
0 10px 24px rgba(255,167,90,.45), | |||
0 1px 0 rgba(255,245,220,.8) inset, | |||
0 -1px 0 rgba(150,70,30,.8) inset, | |||
0 0 18px rgba(255,170,90,.7); | |||
} | |||
/* Lista de informações do VIP */ | |||
.mw-parser-output .vip-panel-list{ | |||
margin: 6px 0 4px; | |||
padding-left: 1.2em; | |||
list-style: disc; | |||
font-size: 14px; | |||
} | |||
.mw-parser-output .vip-panel-list li{ | |||
margin: 6px 0; | |||
padding-top: 8px; | |||
border-top:1px dashed rgba(255,210,150,.40); | |||
} | |||
/* primeiro item sem linha em cima */ | |||
.mw-parser-output .vip-panel-list li:first-child{ | |||
border-top:0; | |||
padding-top:0; | |||
} | |||
/* marcador e labels em destaque */ | |||
.mw-parser-output .vip-panel-list li::marker{ | |||
color:#ffb347; | |||
} | |||
.mw-parser-output .vip-panel-list b{ | |||
color:#ffe9c9; | |||
} | |||
/* responsivo: em telas menores, só ajusta o padding */ | |||
@media (max-width:640px){ | |||
.mw-parser-output .vip-panel{ | |||
margin-top: 30px; | |||
padding: 18px 14px 16px; | |||
} | |||
} | |||
/* ======================================================= | |||
PÁGINA DE MASCOTES (PETS) | |||
Tema roxo profundo + neon violeta/rosa/ciano | |||
(sobrescreve qualquer tema anterior dos .pet-*) | |||
======================================================= */ | |||
/* Paleta base escopada na página de pets */ | |||
.mw-parser-output .pet-page{ | |||
--pet-bg: #0b0612; | |||
--pet-card: #140821; | |||
--pet-card-soft: #1b0d2c; | |||
--pet-border: #3e2469; | |||
--pet-soft-bd: #593993; | |||
--pet-text: #f7f1ff; | |||
--pet-subtext: #ccc1f5; | |||
--pet-accent-1: #b46bff; /* violeta */ | |||
--pet-accent-2: #ff6fb1; /* rosa */ | |||
--pet-accent-3: #46e3ff; /* ciano */ | |||
--pet-shadow: 0 20px 45px rgba(1,0,20,.9); | |||
--pet-shadow-strong: 0 26px 60px rgba(3,0,30,.95); | |||
} | |||
/* texto geral */ | |||
.mw-parser-output .pet-page{ | |||
color: var(--pet-text); | |||
} | |||
/* ------------------------------------------------------- | |||
HERO (título "Mascotes (Pets)") | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-hero{ | |||
background: | |||
radial-gradient(130% 200% at 0% 0%, rgba(180,107,255,.25), transparent 60%), | |||
radial-gradient(130% 200% at 100% 100%, rgba(70,227,255,.20), transparent 60%), | |||
linear-gradient(135deg,#0c0416,#180a27); | |||
border-radius: 16px; | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 70%, #ffffff 10%); | |||
box-shadow: | |||
var(--pet-shadow), | |||
0 0 0 1px rgba(255,255,255,.02) inset; | |||
} | |||
/* título gradiente violeta/rosa/ciano */ | |||
.mw-parser-output .pet-hero-title{ | |||
background: linear-gradient(90deg, | |||
var(--pet-accent-1), | |||
var(--pet-accent-2), | |||
var(--pet-accent-3) | |||
); | |||
-webkit-background-clip: text; | |||
background-clip: text; | |||
color: transparent; | |||
} | |||
/* subtítulo */ | |||
.mw-parser-output .pet-hero-sub{ | |||
color: var(--pet-subtext); | |||
} | |||
/* chips "4 categorias", etc. */ | |||
.mw-parser-output .pet-hero-tags{ | |||
margin-top: 10px; | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
} | |||
.mw-parser-output .pet-hero-tag{ | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.25), | |||
transparent 55%) | |||
,rgba(15,6,40,.96) !important; | |||
border-radius: 999px; | |||
padding: 4px 11px; | |||
border: 1px solid rgba(180,107,255,.85) !important; | |||
font-size: 11px; | |||
text-transform: uppercase; | |||
letter-spacing: .16em; | |||
color: #eaf6ff !important; | |||
box-shadow: | |||
0 10px 22px rgba(4,0,28,.9), | |||
0 0 14px rgba(180,107,255,.6); | |||
} | |||
/* ------------------------------------------------------- | |||
CATEGORIAS (cards) | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-cats{ | |||
margin: 10px 0 20px; | |||
display:grid; | |||
grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); | |||
gap: 14px; | |||
} | |||
.mw-parser-output .pet-card{ | |||
position:relative; | |||
border-radius: 16px; | |||
padding: 12px 14px 14px; | |||
background: | |||
radial-gradient(120% 200% at 0 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(120% 200% at 100% 100%, rgba(70,227,255,.18), transparent 60%), | |||
linear-gradient(180deg,#110418,#190a27); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 75%, #ffffff 5%); | |||
box-shadow: var(--pet-shadow); | |||
} | |||
/* título da categoria */ | |||
.mw-parser-output .pet-card-title{ | |||
text-align:center; | |||
margin: 0 0 8px; | |||
font-weight: 800; | |||
font-size: 15px; | |||
letter-spacing: .14em; | |||
text-transform: uppercase; | |||
color: #fdf7ff; | |||
} | |||
.mw-parser-output .pet-card-title span{ | |||
display:block; | |||
margin-top: 2px; | |||
font-size: 11px; | |||
letter-spacing:.16em; | |||
text-transform:uppercase; | |||
color: color-mix(in srgb, var(--pet-accent-3) 65%, #ffffff 20%); | |||
} | |||
/* key–value interno */ | |||
.mw-parser-output .pet-card-kv{ | |||
display:grid; | |||
grid-template-columns: 120px 1fr; | |||
column-gap: 10px; | |||
row-gap: 6px; | |||
} | |||
.mw-parser-output .pet-card-k{ | |||
font-weight: 800; | |||
font-size: 12px; | |||
color: color-mix(in srgb, var(--pet-accent-1) 70%, #ffffff 10%); | |||
} | |||
.mw-parser-output .pet-card-v{ | |||
font-size: 13px; | |||
color: var(--pet-text); | |||
} | |||
/* ------------------------------------------------------- | |||
REFINO (bloco + tabela) | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-refine{ | |||
margin: 14px 0 18px; | |||
padding: 12px 14px 14px; | |||
border-radius: 16px; | |||
background: | |||
radial-gradient(130% 220% at 0 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(120% 200% at 100% 140%, rgba(70,227,255,.18), transparent 60%), | |||
linear-gradient(135deg,#100318,#1a0927); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 80%, #ffffff 4%); | |||
box-shadow: var(--pet-shadow-strong); | |||
} | |||
.mw-parser-output .pet-refine-title{ | |||
margin: 0 0 6px; | |||
font-weight: 800; | |||
font-size: 16px; | |||
letter-spacing: .16em; | |||
text-transform: uppercase; | |||
color: #fdf7ff; | |||
} | |||
/* texto */ | |||
.mw-parser-output .pet-refine p{ | |||
font-size: 13px; | |||
color: var(--pet-subtext); | |||
} | |||
/* bullets dos passos de múltiplos de 3 */ | |||
.mw-parser-output .pet-refine-steps{ | |||
margin: 6px 0 4px; | |||
padding-left: 0; | |||
list-style:none; | |||
font-size: 13px; | |||
} | |||
.mw-parser-output .pet-refine-steps li{ | |||
margin: 3px 0; | |||
padding-left: 20px; | |||
position:relative; | |||
} | |||
.mw-parser-output .pet-refine-steps li::before{ | |||
content:"●"; | |||
position:absolute; | |||
left:0; | |||
top:0; | |||
font-size:10px; | |||
color: var(--pet-accent-3); | |||
} | |||
/* tabela de refino */ | |||
.mw-parser-output table.pet-refine-table{ | |||
width:100%; | |||
border-collapse:collapse; | |||
margin: 10px 0 0; | |||
background: #100418; | |||
border: 1px solid color-mix(in srgb, var(--pet-soft-bd) 85%, #ffffff 4%); | |||
box-shadow: var(--pet-shadow); | |||
font-size: 13px; | |||
} | |||
.mw-parser-output .pet-refine-table th, | |||
.mw-parser-output .pet-refine-table td{ | |||
border: 1px solid color-mix(in srgb, var(--pet-soft-bd) 80%, #000000 20%); | |||
padding: .5em .6em; | |||
} | |||
.mw-parser-output .pet-refine-table th{ | |||
background: linear-gradient(180deg,#321c57,#221238); | |||
color: #f5f0ff; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-refine-table td{ | |||
color: var(--pet-text); | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-refine-table tr:nth-child(even) td{ | |||
background: rgba(180,107,255,.16); | |||
} | |||
/* ------------------------------------------------------- | |||
GRADE DE PET – “mini card VIP” roxo | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-grade{ | |||
position:relative; | |||
margin: 18px 0 12px; | |||
padding: 16px 16px 16px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient(140% 220% at 100% 0, rgba(180,107,255,.30), transparent 65%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 85%, #ffffff 5%); | |||
box-shadow: var(--pet-shadow-strong); | |||
} | |||
/* chip flutuando */ | |||
.mw-parser-output .pet-grade-chip{ | |||
position:absolute; | |||
top: -16px; | |||
left:50%; | |||
transform: translateX(-50%); | |||
padding: 6px 20px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 900; | |||
text-transform: uppercase; | |||
letter-spacing: .18em; | |||
color:#10071f; | |||
background: linear-gradient(180deg, | |||
#f7f2ff 0%, | |||
var(--pet-accent-1) 45%, | |||
var(--pet-accent-2) 100%); | |||
border:1px solid color-mix(in srgb, var(--pet-accent-1) 70%, #3a164c 30%); | |||
box-shadow: | |||
0 12px 26px rgba(66,30,140,.65), | |||
0 1px 0 rgba(255,255,255,.75) inset, | |||
0 -1px 0 rgba(45,16,90,.95) inset; | |||
} | |||
/* texto e lista dentro da grade */ | |||
.mw-parser-output .pet-grade p{ | |||
margin: 10px 0 6px; | |||
font-size: 13px; | |||
color: var(--pet-subtext); | |||
} | |||
.mw-parser-output .pet-grade-list{ | |||
margin: 6px 0 0; | |||
padding-left: 1.2em; | |||
font-size: 13px; | |||
} | |||
.mw-parser-output .pet-grade-list li{ | |||
margin: 4px 0; | |||
} | |||
.mw-parser-output .pet-grade-list li::marker{ | |||
color: var(--pet-accent-2); | |||
} | |||
/* ------------------------------------------------------- | |||
LISTA DE MASCOTES (card + tabela) | |||
------------------------------------------------------- */ | |||
.mw-parser-output .pet-list.mw-collapsible{ | |||
max-width:1100px; | |||
margin: 10px auto 24px; | |||
padding: 12px 14px 14px; | |||
border-radius: 18px; | |||
background: | |||
radial-gradient(140% 220% at 100% 0, rgba(180,107,255,.30), transparent 65%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
border: 1px solid color-mix(in srgb, var(--pet-border) 85%, #ffffff 5%); | |||
box-shadow: var(--pet-shadow-strong); | |||
} | |||
/* toggle Expandir/Ocultar (mesmo tema neon) */ | |||
.mw-parser-output .pet-page .mw-collapsible-toggle{ | |||
float:none !important; | |||
display:flex !important; | |||
justify-content:center; | |||
margin:0 0 8px !important; | |||
} | |||
.mw-parser-output .pet-page .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .mw-collapsible-toggle a:visited{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
gap:6px; | |||
padding:6px 18px; | |||
border-radius:999px; | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.35), | |||
transparent 60%), | |||
linear-gradient(180deg, | |||
var(--pet-accent-3), | |||
var(--pet-accent-2)); | |||
border:1px solid color-mix(in srgb, var(--pet-accent-3) 70%, #0b0612 30%); | |||
color:#050412 !important; | |||
font-weight:800; | |||
font-size:12px; | |||
text-transform:uppercase; | |||
letter-spacing:.16em; | |||
text-decoration:none !important; | |||
box-shadow: | |||
0 10px 24px rgba(3,0,30,.95), | |||
0 1px 0 rgba(255,255,255,.75) inset, | |||
0 -1px 0 rgba(12,30,45,.9) inset; | |||
} | |||
.mw-parser-output .pet-page .mw-collapsible-toggle a:hover{ | |||
filter:brightness(1.08); | |||
} | |||
/* tabela interna */ | |||
.mw-parser-output table.pet-list-table{ | |||
width:100%; | |||
border-collapse:collapse; | |||
background:#0f0317; | |||
border:1px solid color-mix(in srgb, var(--pet-soft-bd) 85%, #000000 10%); | |||
box-shadow:var(--pet-shadow); | |||
font-size:13px; | |||
} | |||
.mw-parser-output .pet-list-table th, | |||
.mw-parser-output .pet-list-table td{ | |||
border:1px solid color-mix(in srgb, var(--pet-soft-bd) 80%, #000000 20%); | |||
padding:.55em .7em; | |||
} | |||
.mw-parser-output .pet-list-table th{ | |||
background:linear-gradient(180deg,#341d58,#241139); | |||
color:#f5f0ff; | |||
font-weight:800; | |||
text-align:center; | |||
} | |||
.mw-parser-output .pet-list-table td{ | |||
color:var(--pet-text); | |||
} | |||
.mw-parser-output .pet-list-table tr:nth-child(even) td{ | |||
background:rgba(180,107,255,.16); | |||
} | |||
.mw-parser-output .pet-list-table td:nth-child(1){ | |||
text-align:center; | |||
} | |||
.mw-parser-output .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-list-table td:nth-child(3){ | |||
text-align:left; | |||
} | |||
/* links dentro da lista de mascotes */ | |||
.mw-parser-output .pet-list-table a, | |||
.mw-parser-output .pet-list-table a:visited{ | |||
color:var(--pet-accent-3); | |||
text-decoration:underline; | |||
} | |||
.mw-parser-output .pet-list-table a:hover{ | |||
color:var(--pet-accent-2); | |||
} | |||
/* sprites dos pets em pixel-art bonitinho */ | |||
.mw-parser-output .pet-list-table img.mw-file-element{ | |||
image-rendering: pixelated; | |||
vertical-align: middle; | |||
} | |||
/* ===== Pets – destaque do título principal ===== */ | |||
/* opcional: se tiver apagado os imports de fonte, pode usar esse de novo */ | |||
@import url('https://fonts.googleapis.com/css2?family=Paytone+One&display=swap'); | |||
.mw-parser-output .pet-hero{ | |||
padding: 16px 20px 18px; /* um pouco mais de respiro */ | |||
} | |||
.mw-parser-output .pet-hero-title{ | |||
font-family: "Paytone One", system-ui, sans-serif; | |||
font-size: clamp(20px, 2.4vw, 28px); /* bem maior */ | |||
line-height: 1.1; | |||
margin: 2px 0 8px; | |||
text-transform: uppercase; | |||
letter-spacing: .18em; | |||
} | |||
/* subtítulo um pouco menor pra dar hierarquia */ | |||
.mw-parser-output .pet-hero-sub{ | |||
font-size: 14px; | |||
} | |||
/* ===== Pets – categorias centralizadas e mais compactas ===== */ | |||
/* Container das categorias: coluna única, centralizada */ | |||
.mw-parser-output .pet-cats{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; /* centraliza os cards */ | |||
gap: 18px; | |||
} | |||
/* Todos os blocos principais de Pets com a MESMA largura do pet-card */ | |||
.mw-parser-output .pet-page .pet-hero, | |||
.mw-parser-output .pet-page .pet-refine, | |||
.mw-parser-output .pet-page .pet-grade, | |||
.mw-parser-output .pet-page .pet-cats .pet-card, | |||
.mw-parser-output .pet-page .drops-inline.is-pet120, | |||
.mw-parser-output .pet-page .drops-inline.is-pet60, | |||
.mw-parser-output .pet-page .drops-inline.is-pet30, | |||
.mw-parser-output .pet-page .drops-inline.is-pet10{ | |||
width: min(720px, 100% - 32px); /* mesmo “tijolinho” pra tudo */ | |||
margin: 10px auto 18px; /* centralizado + respiro vertical */ | |||
box-sizing: border-box; | |||
} | |||
/* ======================================================= | |||
LISTA DE MASCOTES (PETS) – colapsáveis por categoria | |||
Usa drops-inline com badge + botão expandir/ocultar | |||
======================================================= */ | |||
.mw-parser-output .pet-page .drops-inline.mw-collapsible{ | |||
/* cartao base */ | |||
border-radius: 18px; | |||
border: 1px solid rgba(90,60,150,.9); | |||
background: | |||
radial-gradient(130% 220% at 100% 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(130% 220% at 0 100%, rgba(70,227,255,.20), transparent 60%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
box-shadow: | |||
0 22px 44px rgba(3,0,30,.95), | |||
0 0 0 1px rgba(15,4,40,.9) inset; | |||
padding: 10px 12px; | |||
margin: 10px auto 18px; | |||
max-width: 1100px; | |||
display: flex; | |||
flex-wrap: wrap; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 12px; | |||
} | |||
/* badge "PETS 120%" gerado via data-badge */ | |||
.mw-parser-output .pet-page .drops-inline::before{ | |||
content: attr(data-badge); | |||
text-transform: uppercase; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: 150px; | |||
height: 30px; | |||
padding: 0 20px; | |||
border-radius: 999px; | |||
font: 900 13px/1 system-ui, sans-serif; | |||
letter-spacing: .18em; | |||
color: #0a0515; | |||
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1); | |||
box-shadow: | |||
0 12px 26px rgba(70,30,140,.7), | |||
0 1px 0 rgba(255,255,255,.8) inset, | |||
0 -1px 0 rgba(40,12,90,.95) inset; | |||
} | |||
/* variações de cor suave por categoria (opcional) */ | |||
.mw-parser-output .pet-page .drops-inline.is-pet120::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1); | |||
} | |||
.mw-parser-output .pet-page .drops-inline.is-pet60::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#9b8bff,#46e3ff); | |||
} | |||
.mw-parser-output .pet-page .drops-inline.is-pet30::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#c27bff,#ff9ae0); | |||
} | |||
.mw-parser-output .pet-page .drops-inline.is-pet10::before{ | |||
background: linear-gradient(180deg,#f7f2ff,#8d7bff,#8df3ff); | |||
} | |||
/* Toggle Expandir/Ocultar centralizado e destacado */ | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle{ | |||
order: 2 !important; | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
margin: 0 !important; | |||
position: static !important; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:visited{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
height: 30px; | |||
padding: 0 16px; | |||
border-radius: 999px; | |||
font-weight: 800; | |||
font-size: 11px; | |||
letter-spacing: .18em; | |||
text-transform: uppercase; | |||
text-decoration: none !important; | |||
color: #050413 !important; | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.35), | |||
transparent 60%), | |||
linear-gradient(180deg,#46e3ff,#ff6fb1); | |||
border: 1px solid rgba(70,227,255,.9); | |||
box-shadow: | |||
0 10px 22px rgba(3,0,30,.95), | |||
0 1px 0 rgba(255,255,255,.75) inset, | |||
0 -1px 0 rgba(12,30,45,.9) inset; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.06); | |||
} | |||
/* conteúdo abre abaixo ocupando toda a largura do card */ | |||
.mw-parser-output .pet-page .drops-inline .mw-collapsible-content{ | |||
order: 10; | |||
flex-basis: 100%; | |||
width: 100% !important; | |||
margin-top: 10px; | |||
background: rgba(5,0,20,.65); | |||
border-radius: 14px; | |||
padding: 10px 10px 14px; | |||
} | |||
/* tabela interna reaproveita o tema roxo dos pets */ | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table{ | |||
width: 100%; | |||
border-collapse: collapse; | |||
linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%) | |||
border: 1px solid rgba(120,90,230,.22) | |||
box-shadow: 0 14px 34px rgba(35,12,70,.10) | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table th, | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td{ | |||
border: 1px solid rgba(90,60,150,.9); | |||
padding: .55em .7em; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table th{ | |||
background: linear-gradient(180deg,#341d58,#241139); | |||
color: #f5f0ff; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td{ | |||
color: #f7f1ff; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table tr:nth-child(even) td{ | |||
background: rgba(180,107,255,.16); | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(1){ | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(3){ | |||
text-align: left; | |||
} | |||
/* sprites dentro da lista */ | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table img.mw-file-element{ | |||
image-rendering: pixelated; | |||
vertical-align: middle; | |||
} | |||
/* Pets – centralizar texto das colunas Forma de Obtenção / Bônus */ | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-page .drops-inline .pet-list-table td:nth-child(3){ | |||
text-align: center; /* centraliza horizontalmente */ | |||
} | |||
/* Pets – botão Expandir/Ocultar combinando com a badge */ | |||
.mw-parser-output .pet-page .drops-inline{ | |||
justify-content: center; | |||
gap: 10px; | |||
} | |||
/* botão do toggle */ | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle{ | |||
order: 2 !important; | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
margin: 0 !important; | |||
position: static !important; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:visited{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 4px 14px; | |||
border-radius: 999px; | |||
font-weight: 800; | |||
font-size: 11px; | |||
letter-spacing: .16em; | |||
text-transform: uppercase; | |||
text-decoration: none !important; | |||
color: #0a0515 !important; | |||
background: radial-gradient(circle at 0 0, | |||
rgba(70,227,255,.35), | |||
transparent 60%), | |||
linear-gradient(180deg,#46e3ff,#ff6fb1); | |||
border: 1px solid rgba(70,227,255,.9); | |||
box-shadow: | |||
0 10px 22px rgba(3,0,30,.9), | |||
0 1px 0 rgba(255,255,255,.8) inset, | |||
0 -1px 0 rgba(12,30,45,.9) inset; | |||
} | |||
.mw-parser-output .pet-page .drops-inline > .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.08); | |||
} | |||
/* ======================================================= | |||
LISTA DE MASCOTES – cards colapsáveis próprios | |||
(não usa .drops-inline pra não brigar com o JS antigo) | |||
======================================================= */ | |||
.mw-parser-output .pet-page .pet-list-box{ | |||
max-width: 1100px; | |||
margin: 10px auto 18px; | |||
padding: 10px 12px 12px; | |||
border-radius: 18px; | |||
border: 1px solid rgba(90,60,150,.9); | |||
background: | |||
radial-gradient(130% 220% at 100% 0, rgba(180,107,255,.30), transparent 60%), | |||
radial-gradient(130% 220% at 0 100%, rgba(70,227,255,.20), transparent 60%), | |||
linear-gradient(135deg,#0f0216,#1b0928); | |||
box-shadow: | |||
0 22px 44px rgba(3,0,30,.95), | |||
0 0 0 1px rgba(15,4,40,.9) inset; | |||
} | |||
/* Toggle padrão centralizado */ | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: flex !important; | |||
justify-content: center; | |||
margin: 0 0 6px !important; | |||
} | |||
/* Botão PETS 120% ▸ | 60% ▸ etc. */ | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a, | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a:visited{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 5px 22px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
font-size: 12px; | |||
letter-spacing: .22em; | |||
text-transform: uppercase; | |||
text-decoration: none !important; | |||
color: #0a0515 !important; | |||
background: linear-gradient(180deg,#f7f2ff,#b46bff,#ff6fb1); | |||
box-shadow: | |||
0 12px 26px rgba(70,30,140,.7), | |||
0 1px 0 rgba(255,255,255,.8) inset, | |||
0 -1px 0 rgba(40,12,90,.95) inset; | |||
border: 1px solid rgba(255,255,255,.35); | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-toggle a:hover{ | |||
filter: brightness(1.06); | |||
} | |||
/* variações suaves por categoria (gradiente diferente) */ | |||
.mw-parser-output .pet-page .pet-list-60 .mw-collapsible-toggle a{ | |||
background: linear-gradient(180deg,#f7f2ff,#9b8bff,#46e3ff); | |||
} | |||
.mw-parser-output .pet-page .pet-list-30 .mw-collapsible-toggle a{ | |||
background: linear-gradient(180deg,#f7f2ff,#c27bff,#ff9ae0); | |||
} | |||
.mw-parser-output .pet-page .pet-list-10 .mw-collapsible-toggle a{ | |||
background: linear-gradient(180deg,#f7f2ff,#8d7bff,#8df3ff); | |||
} | |||
/* Conteúdo aberto: mesma cara roxa dos outros blocos */ | |||
.mw-parser-output .pet-page .pet-list-box .mw-collapsible-content{ | |||
margin-top: 10px; | |||
padding: 10px 10px 14px; | |||
border-radius: 14px; | |||
background: rgba(5,0,20,.65); | |||
} | |||
/* Reaproveita a tabela que você já tem */ | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table{ | |||
width: 100%; | |||
border-collapse: collapse; | |||
background: #0f0317; | |||
border: 1px solid rgba(90,60,150,.9); | |||
box-shadow: 0 12px 28px rgba(3,0,30,.95); | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table th, | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td{ | |||
border: 1px solid rgba(90,60,150,.9); | |||
padding: .55em .7em; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table th{ | |||
background: linear-gradient(180deg,#341d58,#241139); | |||
color: #f5f0ff; | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td{ | |||
color: #f7f1ff; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table tr:nth-child(even) td{ | |||
background: rgba(180,107,255,.16); | |||
} | |||
/* alinhamento bonitinho das colunas */ | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(1){ | |||
text-align: center; | |||
} | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(2), | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table td:nth-child(3){ | |||
text-align: center; | |||
} | |||
/* sprites */ | |||
.mw-parser-output .pet-page .pet-list-box .pet-list-table img.mw-file-element{ | |||
image-rendering: pixelated; | |||
vertical-align: middle; | |||
} | |||
/* PETS – botão Expandir/Ocultar com mesma cor da badge */ | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle{ | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 3px 14px !important; | |||
margin: 4px 0 6px !important; | |||
border-radius: 999px !important; | |||
font-weight: 700 !important; | |||
font-size: 11px !important; | |||
letter-spacing: .12em !important; | |||
text-transform: uppercase !important; | |||
background: #c8b0ff !important; /* mesmo roxo da badge */ | |||
color: #160f2a !important; /* texto roxo bem escuro */ | |||
border: 1px solid #a489f0 !important; /* mesma borda da badge */ | |||
box-shadow: 0 2px 6px rgba(0,0,0,.28) !important; | |||
} | |||
/* link herda cor e tira sublinhado */ | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle a, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle a, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle a, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle a{ | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
/* hover só um tiquinho mais claro */ | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-toggle:hover, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-toggle:hover, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-toggle:hover, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-toggle:hover{ | |||
filter: brightness(1.04); | |||
} | |||
/* PETS – badge roxa com um pouco mais de destaque */ | |||
body .mw-parser-output .drops-inline.is-pet120::before, | |||
body .mw-parser-output .drops-inline.is-pet60::before, | |||
body .mw-parser-output .drops-inline.is-pet30::before, | |||
body .mw-parser-output .drops-inline.is-pet10::before{ | |||
/* roxo escuro com gradiente bem suave */ | |||
background: radial-gradient(120% 160% at 50% 0%, | |||
#443074 0%, #2a1846 55%, #1c102f 100%) !important; | |||
color: #ffffff !important; | |||
/* borda um pouco mais clara pra “descolar” do fundo */ | |||
border: 1px solid #8a74d0 !important; | |||
/* halo sutil + sombra */ | |||
box-shadow: | |||
0 0 0 1px rgba(255,255,255,.05) inset, | |||
0 4px 10px rgba(0,0,0,.55) !important; | |||
text-transform: uppercase; | |||
letter-spacing: .12em; | |||
font-weight: 800; | |||
text-shadow: 0 1px 0 rgba(0,0,0,.6); /* leitura melhor */ | |||
} | |||
body .mw-parser-output .drops-inline.is-pet120 .mw-collapsible-content, | |||
body .mw-parser-output .drops-inline.is-pet60 .mw-collapsible-content, | |||
body .mw-parser-output .drops-inline.is-pet30 .mw-collapsible-content, | |||
body .mw-parser-output .drops-inline.is-pet10 .mw-collapsible-content{ | |||
background: #c8b0ff !important; | |||
border-radius: 14px !important; | |||
padding: 8px 10px 10px !important; /* borda roxa clara aparecendo nos cantos */ | |||
} | |||
/******************************* | |||
* TEMA ROXO-ESCURO – BASE MVP * | |||
*******************************/ | |||
:root{ | |||
--rt-bg-main: #120e22; | |||
--rt-bg-card: #1c122f; | |||
--rt-border: #3a285a; | |||
--rt-text-main: #f5f3ff; | |||
--rt-text-soft: #c9c3e6; | |||
--rt-radius-card:16px; | |||
--rt-shadow-soft:0 10px 26px rgba(0,0,0,.55); | |||
} | |||
/* containers principais da página */ | |||
.mw-parser-output .rt-section, | |||
.mw-parser-output .mvp-hero, | |||
.mw-parser-output .mvp-func, | |||
.mw-parser-output .mvp-ranking, | |||
.mw-parser-output .mvp-shop{ | |||
max-width: 1100px; | |||
margin: 10px auto 24px; | |||
padding: 12px 16px 16px; | |||
border-radius: var(--rt-radius-card); | |||
background: | |||
radial-gradient(160% 200% at 0% 0%, #271247 0%, transparent 55%), | |||
radial-gradient(140% 180% at 100% 100%, #151b3b 0%, transparent 55%), | |||
#120e22; | |||
border: 1px solid #2f204b; | |||
box-shadow: var(--rt-shadow-soft); | |||
color: var(--rt-text-main); | |||
box-sizing: border-box; | |||
} | |||
/* título padrão das seções */ | |||
.mw-parser-output .rt-title{ | |||
margin: 2px 0 10px; | |||
font-family: "Paytone One", system-ui, sans-serif; | |||
font-size: 22px; | |||
letter-spacing: .16em; | |||
text-transform: uppercase; | |||
color: #ffffff; | |||
text-shadow: 0 2px 8px rgba(0,0,0,.6); | |||
} | |||
/* subtítulo/label embaixo do texto introdutório */ | |||
.mw-parser-output .rt-subtag{ | |||
display: inline-block; | |||
margin-top: 8px; | |||
padding: 4px 12px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
letter-spacing: .1em; | |||
text-transform: uppercase; | |||
background: rgba(200,176,255,.12); | |||
border: 1px solid rgba(200,176,255,.5); | |||
color: var(--rt-text-soft); | |||
} | |||
/* texto dentro das seções */ | |||
.mw-parser-output .mvp-hero p, | |||
.mw-parser-output .mvp-func p, | |||
.mw-parser-output .mvp-ranking p, | |||
.mw-parser-output .mvp-shop p{ | |||
margin: 6px 0 8px; | |||
color: var(--rt-text-soft); | |||
} | |||
/************************ | |||
* CARDS – FUNCIONAMENTO * | |||
************************/ | |||
.mw-parser-output .rt-card-grid{ | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); | |||
gap: 14px; | |||
margin-top: 8px; | |||
} | |||
.mw-parser-output .rt-card{ | |||
background: linear-gradient(135deg,#201235,#16162d); | |||
border-radius: 12px; | |||
border: 1px solid var(--rt-border); | |||
box-shadow: 0 6px 18px rgba(0,0,0,.55); | |||
padding: 10px 12px 12px; | |||
color: var(--rt-text-main); | |||
} | |||
.mw-parser-output .rt-card-title{ | |||
font-weight: 800; | |||
letter-spacing: .12em; | |||
text-transform: uppercase; | |||
margin: 2px 0 8px; | |||
} | |||
/* key–value dentro dos cards */ | |||
.mw-parser-output .rt-kv{ | |||
display: grid; | |||
grid-template-columns: 150px 1fr; | |||
gap: 4px 10px; | |||
} | |||
.mw-parser-output .rt-kv .k{ | |||
color: var(--rt-text-soft); | |||
} | |||
.mw-parser-output .rt-kv .v{ | |||
font-weight: 700; | |||
} | |||
/********************* | |||
* TABELAS – RANK/LOJA | |||
*********************/ | |||
.mw-parser-output table.rt-table{ | |||
width: 100%; | |||
border-collapse: collapse; | |||
margin: 10px 0 4px; | |||
background: var(--rt-bg-card); | |||
color: var(--rt-text-main); | |||
box-shadow: var(--rt-shadow-soft); | |||
} | |||
.mw-parser-output table.rt-table th, | |||
.mw-parser-output table.rt-table td{ | |||
border: 1px solid #372454; | |||
padding: .55em .7em; | |||
} | |||
.mw-parser-output table.rt-table th{ | |||
background: linear-gradient(180deg,#26163f,#1c122f); | |||
font-weight: 800; | |||
text-align: center; | |||
} | |||
.mw-parser-output table.rt-table tr:nth-child(even) td{ | |||
background-color: #181028; | |||
} | |||
/* colunas específicas podem ser centralizadas se quiser */ | |||
.mw-parser-output .mvp-ranking-table td:nth-child(1), | |||
.mw-parser-output .mvp-ranking-table td:nth-child(3){ | |||
text-align: center; | |||
} | |||
.mw-parser-output .mvp-shop-table td:nth-child(3){ | |||
text-align: center; | |||
} | |||
/* bullets e listas dentro das seções */ | |||
.mw-parser-output .mvp-func ul, | |||
.mw-parser-output .mvp-ranking ul, | |||
.mw-parser-output .mvp-shop ul{ | |||
margin: 8px 0 4px 18px; | |||
color: var(--rt-text-soft); | |||
} | |||
.ev-wrap .ev-h{ | |||
line-height: 1.25; /* ou só: line-height: normal; */ | |||
margin: 0 0 6px; | |||
} | |||
/* Éden ocupando toda a largura disponível do conteúdo */ | |||
.mw-parser-output .eden-page.ev-wrap{ | |||
max-width: none; /* remove o limite de 980px */ | |||
width: 100%; | width: 100%; | ||
} | } | ||
. | /* ===== LOJAS – CARDS GERAIS (Turn In / Quests) v2 ===== */ | ||
.eden-page .loja-card { | |||
border-radius: 14px; | |||
border: 1px solid #d2c5ff; | |||
background: #ede3ff; | |||
/* roxinho bem suave preenchendo o bloco todo */ | |||
box-shadow: 0 4px 10px rgba(44, 25, 101, 0.08); | |||
overflow: hidden; | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
padding: 10px 12px 12px; | |||
} | |||
/* Título do card */ | |||
.eden-page .loja-card-title { | |||
margin: -6px -8px 8px; /* “encaixa” o título no topo do card */ | |||
padding: 6px 10px; | |||
text-align: center; | |||
font-weight: 700; | |||
font-size: 14px; | |||
color: #4a2cc5; | |||
background: #e7ddff; | |||
border-bottom: 1px solid #d8cdff; | |||
} | |||
/* Colapsível dentro do card */ | |||
.eden-page .loja-card .mw-collapsible { | |||
margin: 0 !important; | |||
text-align: center; | |||
} | |||
/* Botão Mostrar/Ocultar dos cards */ | |||
.eden-page .loja-card .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 4px; | |||
margin: 4px auto 10px !important; | |||
padding: 4px 12px !important; | |||
background: #ffffff !important; | |||
border-radius: 999px !important; | |||
border: 1px solid #e0d8ff !important; | |||
font-size: 12px; | |||
font-weight: 600; | |||
color: #5e3cd9 !important; | |||
cursor: pointer; | |||
} | |||
.eden-page .loja-card .mw-collapsible-content { | |||
padding: 4px 0 4px !important; | |||
} | |||
/* Garantir que a tabela fique bem centralizada dentro do card */ | |||
.eden-page .loja-card .mw-collapsible-content .wikitable { | |||
margin: 0 auto; | |||
background: #ffffff; | |||
} | |||
/* RESET – conteúdo do colapsível volta a ocupar a largura toda */ | |||
.eden-page .loja-card .mw-collapsible-content { | |||
display: block; | |||
padding: 8px 0 !important; | |||
text-align: center; | |||
background: transparent; /* nada de roxo aqui */ | |||
box-shadow: none; | |||
} | |||
/* “cartão” roxo em volta da tabela da loja */ | |||
.eden-page .loja-card .mw-collapsible-content > .wikitable { | |||
width: 70% !important; /* mantém o que você já usava */ | |||
margin: 0 auto !important; | |||
background: #f3ecff; /* roxo bem clarinho interno */ | |||
border-radius: 16px; | |||
border: 1px solid #d8cdff; | |||
box-shadow: 0 4px 12px rgba(44, 25, 101, 0.15); | |||
overflow: hidden; /* arredonda os cantos certinho */ | |||
} | |||
/* cabeçalho da tabela */ | |||
.eden-page .loja-card .wikitable > * > tr:first-child > th { | |||
background: #ece7ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
} | |||
/* linhas normais da tabela */ | |||
.eden-page .loja-card .wikitable td { | |||
background: #ffffff; | |||
} | |||
/* Fundo da caixa da loja (um pouco mais escuro que #f8f3ff) */ | |||
.eden-page .loja-card { | |||
background: #f1e7ff !important; /* lilás um pouco mais forte */ | |||
box-shadow: 0 10px 25px rgba(90, 65, 180, 0.18); | |||
} | |||
/* Tabela dentro da caixa segue o mesmo fundo */ | |||
.eden-page .loja-card .wikitable { | |||
border-color: #decfff !important; | |||
background: #f1e7ff !important; | |||
} | |||
.eden-page .loja-card .wikitable th, | |||
.eden-page .loja-card .wikitable td { | |||
background: #f1e7ff !important; /* tira o branco */ | |||
border-color: #decfff !important; | |||
} | |||
/* Garante que nenhuma zebra antiga fique ativa */ | |||
.eden-page .loja-card .wikitable tr:nth-child(odd) td, | |||
.eden-page .loja-card .wikitable tr:nth-child(even) td { | |||
background: #f8f3ff !important; | |||
} | |||
/* ===== MAPAS TURN IN – BOTÃO COLAPSÁVEL (Tema Claro) ===== */ | |||
.eden-page .turnin-colapso { | |||
margin-top: 8px; | |||
margin-bottom: 16px; | |||
text-align: center; | |||
} | |||
/* Botão "Mostrar ▸ / Ocultar ▾" dos Mapas */ | |||
.eden-page .turnin-colapso .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 4px; | |||
margin: 6px auto 10px !important; | |||
padding: 4px 14px !important; | |||
background: #ffffff !important; | |||
border-radius: 999px !important; | |||
border: 1px solid #e0d8ff !important; | |||
font-size: 12px; | |||
font-weight: 600; | |||
color: #5e3cd9 !important; | |||
box-shadow: 0 4px 10px rgba(90, 65, 180, 0.18); | |||
cursor: pointer; | |||
} | |||
/* texto "Mostrar ▸" / "Ocultar ▾" */ | |||
.eden-page .turnin-colapso .mw-collapsible-text { | |||
color: inherit; | |||
} | |||
/* área interna do colapsável dos Mapas */ | |||
.eden-page .turnin-colapso .mw-collapsible-content { | |||
padding: 8px 0 4px !important; | |||
text-align: center; | |||
} | |||
/* Caixa da tabela dos Mapas no tema claro */ | |||
.eden-page .turnin-tabela { | |||
background: #f1e7ff !important; /* mesmo lilás da loja */ | |||
border-radius: 16px; | |||
border: 1px solid #decfff !important; | |||
box-shadow: 0 10px 25px rgba(90, 65, 180, 0.18); | |||
overflow: hidden; | |||
} | |||
/* cabeçalho */ | |||
.eden-page .turnin-tabela > * > tr:first-child > th { | |||
background: #ece7ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
} | |||
/* células normais */ | |||
.eden-page .turnin-tabela td { | |||
background: #f8f3ff; | |||
border-color: #decfff !important; | |||
} | |||
/* Botão Mostrar/Ocultar dos Mapas – versão mais "natural" */ | |||
.eden-page .turnin-colapso .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
margin: 6px auto 10px !important; | |||
padding: 4px 14px !important; | |||
background: #ffffff !important; | |||
border-radius: 999px !important; | |||
border: 1px solid #e0d8ff !important; | |||
font-size: 12px; | |||
font-weight: 600; | |||
font-style: normal; | |||
color: #5e3cd9 !important; | |||
box-shadow: 0 4px 10px rgba(90, 65, 180, 0.12); | |||
cursor: pointer; | |||
} | |||
/* Remove o “quadradinho” interno e qualquer borda extra */ | |||
.eden-page .turnin-colapso .mw-collapsible-toggle span, | |||
.eden-page .turnin-colapso .mw-collapsible-toggle a { | |||
display: inline; /* nada de bloco grandão */ | |||
background: transparent !important; | |||
border: 0 !important; | |||
padding: 0 !important; | |||
box-shadow: none !important; | |||
color: inherit !important; | |||
} | |||
/* ===== MAPAS TURN IN – COLAPSÍVEL (Tema Claro) ===== */ | |||
/* Contêiner do colapsível */ | |||
.eden-page .turnin-mapas { | |||
margin: 10px auto 18px !important; | |||
text-align: center; | |||
} | |||
/* Botão Mostrar/Ocultar */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle { | |||
float: none !important; | |||
display: inline-flex !important; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 6px 18px !important; | |||
margin: 6px auto 12px !important; | |||
border-radius: 999px; | |||
border: 1px solid #decfff; | |||
background: #f5f0ff; | |||
box-shadow: 0 6px 18px rgba(90, 65, 180, 0.22); | |||
font-size: 13px; | |||
font-weight: 600; | |||
color: #4a2cc5; | |||
cursor: pointer; | |||
} | |||
/* Remove cara de “botão quadrado” de dentro */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle span, | |||
.eden-page .turnin-mapas .mw-collapsible-toggle a { | |||
display: inline-block; | |||
padding: 0; | |||
border: 0 !important; | |||
background: transparent !important; | |||
} | |||
/* Área interna do colapsível */ | |||
.eden-page .turnin-mapas .mw-collapsible-content { | |||
padding: 4px 0 10px !important; | |||
} | |||
/* Tabela de mapas – centralizada e com cara de card */ | |||
.eden-page .turnin-tabela { | |||
width: 100% !important; | |||
max-width: 1100px; | |||
margin: 0 auto 8px !important; | |||
border-collapse: collapse; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
overflow: hidden; | |||
box-shadow: 0 10px 28px rgba(90, 65, 180, 0.2); | |||
} | |||
/* Cabeçalho */ | |||
.eden-page .turnin-tabela > * > tr:first-child > th { | |||
background: #ece3ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
} | |||
/* Células */ | |||
.eden-page .turnin-tabela th, | |||
.eden-page .turnin-tabela td { | |||
border: 1px solid #e0d5ff; | |||
background: #f8f3ff; | |||
} | |||
/* Tira qualquer zebra antiga */ | |||
.eden-page .turnin-tabela tr:nth-child(odd) td, | |||
.eden-page .turnin-tabela tr:nth-child(even) td { | |||
background: #f8f3ff; | |||
} | |||
/* ----- Botão "Mostrar/Ocultar" dos mapas – limpa o retângulo interno ----- */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle-default, | |||
.eden-page .turnin-mapas .mw-collapsible-text, | |||
.eden-page .turnin-mapas .mw-collapsible-toggle span, | |||
.eden-page .turnin-mapas .mw-collapsible-toggle a { | |||
border: 0 !important; | |||
background: transparent !important; | |||
box-shadow: none !important; | |||
padding: 0 !important; | |||
} | |||
/* Coluna "Nível" sempre centralizada na tabela de mapas */ | |||
.eden-page .turnin-tabela th:nth-child(2), | |||
.eden-page .turnin-tabela td:nth-child(2) { | |||
text-align: center !important; | |||
vertical-align: middle !important; | |||
} | |||
/* Container do colapsível dos mapas */ | |||
.eden-page .turnin-mapas { | |||
text-align: center; | |||
margin: 18px 0 10px; | |||
position: relative; | |||
} | |||
/* Cápsula que junta badge + "Mostrar" */ | |||
.eden-page .turnin-mapas .mw-collapsible-toggle { | |||
display: inline-flex !important; | |||
align-items: center; | align-items: center; | ||
gap: 8px; | |||
padding: 6px 16px; | |||
border-radius: 999px; | |||
background: #f5edff; | |||
border: 1px solid #e1d5ff; | |||
box-shadow: 0 8px 18px rgba(90, 65, 180, 0.22); | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
. | /* Badge à esquerda dentro da cápsula */ | ||
height: 2. | .eden-page .turnin-mapas .mw-collapsible-toggle::before { | ||
padding: 0 | content: "MAPAS TURN IN"; | ||
font-size: | padding: 5px 12px; | ||
background: #fff; | border-radius: 999px; | ||
border-radius: 8px; | background: #ffffff; | ||
justify-content: | border: 1px solid #decfff; | ||
box-shadow: 0 10px | font-size: 11px; | ||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.06em; | |||
color: #5e3cd9; | |||
} | |||
/* Texto [Mostrar ▸] */ | |||
.eden-page .turnin-mapas .mw-collapsible-text { | |||
font-weight: 400; | |||
color: #4c28c9; | |||
text-decoration: none; | |||
} | |||
/* CARD VIP – Pacote Iniciante */ | |||
.pack-simple.pack-vip { | |||
position: relative; | |||
max-width: 480px; | |||
margin: 24px auto 32px; /* centraliza o card */ | |||
padding: 18px 20px 16px; | |||
border-radius: 20px; | |||
background: linear-gradient(145deg, #fdfbff, #f3ecff); | |||
border: 1px solid #e0d6ff; | |||
box-shadow: 0 18px 40px rgba(80, 45, 170, 0.24); | |||
text-align: left; /* pra alinhar o início dos itens */ | |||
} | |||
/* Micro badge VIP – versão roxo-escuro (tema padrão) */ | |||
.pack-simple.pack-vip::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -10px; | |||
left: 20px; | |||
padding: 2px 10px; | |||
font-size: 10px; | |||
font-weight: 700; | |||
letter-spacing: 0.03em; | |||
text-transform: uppercase; | |||
border-radius: 999px; | |||
background: linear-gradient(135deg, #3a237f, #5b3ad1); /* roxo escuro -> roxo médio */ | |||
color: #ffffff; | |||
box-shadow: 0 4px 10px rgba(40, 20, 90, 0.55); | |||
} | |||
/* Título do card */ | |||
.pack-simple .pack-title { | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
font-weight: 800; | |||
font-size: 16px; | |||
color: #4423c0; | |||
padding-bottom: 10px; | |||
margin-bottom: 10px; | |||
border-bottom: 1px solid #e3dafd; | |||
} | |||
/* Lista interna */ | |||
.pack-simple .pack-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* Cada linha do item – alinhadas à esquerda */ | |||
.pack-simple .pack-row { | |||
display: flex; | |||
align-items: center; | |||
justify-content: flex-start; /* começa tudo no mesmo ponto */ | |||
gap: 10px; | |||
padding: 6px 4px; | |||
border-bottom: 1px solid #ece4ff; | |||
} | |||
/* Última linha sem borda */ | |||
.pack-simple .pack-row:last-child { | |||
border-bottom: none; | |||
} | |||
/* Ícone – largura fixa pra alinhar os textos */ | |||
.pack-simple .pack-ico { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: 28px; | |||
max-width: 28px; | |||
flex: 0 0 28px; /* trava o espaço do ícone */ | |||
} | |||
/* Nome do item */ | |||
.pack-simple .pack-name { | |||
font-size: 13px; | |||
font-weight: 500; | |||
color: #3c2a88; | |||
flex: 1; | |||
} | |||
/* Hover leve */ | |||
.pack-simple .pack-row:hover { | |||
background: #f1e9ff; | |||
} | |||
/* GRID DOS CARDS COM WIKITABLE */ | |||
.eden-page .eden-quests-table-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 16px; | |||
margin: 8px 0 4px; | |||
} | |||
/* CAIXA ROXINHA EM VOLTA DA WIKITABLE */ | |||
.eden-page .eden-quest-box { | |||
position: relative; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
border: 1px solid #decfff; | |||
padding: 18px 18px 14px; | |||
box-shadow: 0 10px 24px rgba(94, 60, 217, 0.14); | |||
} | |||
/* WIKITABLE DENTRO DO CARD */ | |||
.eden-page .eden-quest-table { | |||
width: 100% !important; | |||
margin: 0 !important; | |||
border-collapse: collapse; | |||
background: transparent; | |||
border-color: #decfff; | |||
} | |||
.eden-page .eden-quest-table th, | |||
.eden-page .eden-quest-table td { | |||
padding: 6px 10px; | |||
border: 1px solid #decfff; | |||
vertical-align: middle; | |||
} | |||
/* cabeçalho da tabela */ | |||
.eden-page .eden-quest-table th { | |||
background: #ece4ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
text-align: center; | |||
} | |||
/* células normais */ | |||
.eden-page .eden-quest-table td { | |||
background: #fdfbff; | |||
} | |||
/* Badge roxo escuro reaproveitado */ | |||
.eden-page .entry-tag { | |||
position: relative; | |||
overflow: visible; | |||
} | |||
.eden-page .entry-tag::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -14px; | |||
left: 24px; | |||
padding: 4px 14px; | |||
border-radius: 999px; | |||
background: linear-gradient(90deg, #5a2fd6, #8e4fff); | |||
color: #ffffff; | |||
font-size: 11px; | |||
font-weight: 700; | |||
letter-spacing: 0.05em; | |||
text-transform: uppercase; | |||
box-shadow: 0 6px 16px rgba(82, 47, 176, 0.45); | |||
white-space: nowrap; | |||
} | |||
/* GRID dos cards – deixa cada um com sua altura natural */ | |||
.eden-page .eden-quests-table-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | |||
gap: 16px; | |||
margin: 8px 0 4px; | |||
align-items: flex-start; /* não esticar demais os cards vazios */ | |||
} | |||
/* Card das quests */ | |||
.eden-page .eden-quest-box { | |||
position: relative; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
border: 1px solid #decfff; | |||
padding: 18px 18px 14px; | |||
box-shadow: 0 10px 24px rgba(94, 60, 217, 0.14); | |||
} | |||
/* Tabela dentro do card */ | |||
.eden-page .eden-quest-table { | |||
width: 100% !important; | |||
margin: 0 auto !important; | |||
border-collapse: collapse; | |||
background: transparent; | |||
border-color: #decfff; | |||
} | |||
/* Cabeçalho já estava ok, mantemos */ | |||
.eden-page .eden-quest-table th { | |||
background: #ece4ff; | |||
color: #2b1f6b; | |||
font-weight: 700; | |||
text-align: center; | |||
padding: 6px 10px; | |||
} | |||
/* AQUI vem o principal: centralizar conteúdo das células */ | |||
.eden-page .eden-quest-table td { | |||
padding: 8px 10px; | |||
border: 1px solid #decfff; | |||
background: #fdfbff; | |||
text-align: center; /* deixa igual ao primeiro card */ | |||
vertical-align: middle; /* centraliza na altura da linha */ | |||
} | |||
/* Badge genérico do card de quest */ | |||
.eden-page .eden-quest-box::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -14px; | |||
left: 26px; | |||
padding: 4px 14px; | |||
font-size: 11px; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
font-weight: 700; | |||
color: #ffffff; | |||
border-radius: 999px; | |||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.20); | |||
white-space: nowrap; | |||
} | |||
/* 70+ – ciano */ | |||
.eden-page .eden-quest-box.is-70::before { | |||
background: #12c5e9; /* ciano */ | |||
} | |||
/* 150+ – azul escuro */ | |||
.eden-page .eden-quest-box.is-150::before { | |||
background: #2834b5; /* azul escuro */ | |||
} | |||
/* 200+ – vermelho */ | |||
.eden-page .eden-quest-box.is-200::before { | |||
background: #e34040; /* vermelho */ | |||
} | |||
/* CARD GENÉRICO DE QUESTS (mesmo “bloco” das quests 70+/150+/200+) */ | |||
.eden-page .eden-quests-card { | |||
position: relative; | |||
margin: 16px auto 32px; | |||
padding: 22px 24px 18px; | |||
background: #f8f3ff; | |||
border-radius: 18px; | |||
border: 1px solid #e0d4ff; | |||
box-shadow: 0 14px 30px rgba(86, 62, 200, 0.22); | |||
} | |||
/* LABEL / BADGE DO CARD */ | |||
.eden-page .eden-quests-card .eden-quests-label { | |||
position: absolute; | |||
top: -14px; | |||
left: 24px; | |||
display: inline-flex; | |||
align-items: center; | |||
padding: 4px 16px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
letter-spacing: 0.08em; | |||
text-transform: uppercase; | |||
background: #5b3fd9; /* roxo escuro */ | |||
color: #ffffff; | |||
box-shadow: 0 12px 26px rgba(91, 63, 217, 0.45); | |||
} | |||
/* TABELA DENTRO DO CARD – segue o tema claro */ | |||
.eden-page .eden-quests-table { | |||
border-collapse: collapse; | |||
width: 100%; | |||
background: #f8f3ff; | |||
} | |||
.eden-page .eden-quests-table th, | |||
.eden-page .eden-quests-table td { | |||
border: 1px solid #e0d4ff; | |||
padding: 8px 12px; | |||
} | |||
.eden-page .eden-quests-table th { | |||
background: #ebddff; | |||
color: #3f2a94; | |||
font-weight: 700; | |||
} | |||
.eden-page .eden-quests-table td { | |||
background: #f9f4ff; | |||
} | |||
/* tira zebras antigas, se tiver */ | |||
.eden-page .eden-quests-table tr:nth-child(even) td, | |||
.eden-page .eden-quests-table tr:nth-child(odd) td { | |||
background: #f9f4ff; | |||
} | |||
/* Centralizar conteúdo da tabela de Desafios Diários */ | |||
.eden-page .eden-quests-table td { | |||
background: #f9f4ff; | |||
border: 1px solid #e0d4ff; | |||
padding: 10px 12px; | |||
text-align: center; /* centraliza horizontal */ | |||
vertical-align: middle; /* centraliza vertical */ | |||
} | |||
/* Badge do colapsível de Desafios Diários */ | |||
.eden-page .drops-inline.is-daily::before { | |||
background: linear-gradient(90deg, #b85bff, #6b3bff); | |||
} | |||
/* CARD DE DESAFIOS – AJUSTE GERAL */ | |||
.eden-quests-card.is-daily { | |||
background: #f8f1ff; /* roxo bem clarinho */ | |||
border-radius: 20px; | |||
box-shadow: 0 10px 30px rgba(132, 98, 255, 0.18); | |||
padding: 10px 14px 16px; | |||
} | |||
/* TABELA DENTRO DO CARD */ | |||
.eden-quests-card.is-daily .eden-quests-table { | |||
border-collapse: collapse; | |||
width: 100%; | |||
background: transparent; | |||
} | |||
/* CABEÇALHO */ | |||
.eden-quests-card.is-daily .eden-quests-table th { | |||
background: #ebddff; /* faixa lilás do topo */ | |||
color: #4a2b9e; | |||
border-color: #e2d5ff; | |||
padding: 8px 12px; | |||
} | |||
/* CÉLULAS */ | |||
.eden-quests-card.is-daily .eden-quests-table td { | |||
border-color: #f0e6ff; | |||
padding: 10px 14px; | |||
background: #fbf7ff; /* fundo base */ | |||
} | |||
/* ZEBRADO SUAVE NAS LINHAS */ | |||
.eden-quests-card.is-daily .eden-quests-table tr:nth-child(even) td { | |||
background: #f5edff; | |||
} | |||
/* EFEITO LEVE AO PASSAR O MOUSE */ | |||
.eden-quests-card.is-daily .eden-quests-table tr:hover td { | |||
background: #efe4ff; | |||
} | |||
/* Linhas mais marcadas entre as quests */ | |||
.eden-quests-card.is-daily .eden-quests-table td, | |||
.eden-quests-card.is-daily .eden-quests-table th { | |||
border-color: #d5c2ff !important; /* mais escuro que #f0e6ff */ | |||
} | |||
/* Reforça a linha que separa uma quest da outra */ | |||
.eden-quests-card.is-daily .eden-quests-table tr + tr td { | |||
border-top: 1px solid #c9b2ff !important; | |||
} | |||
/* Badge roxo-escuro para colapsíveis de Lista de MVPs */ | |||
.drops-inline.is-mvp::before { | |||
background: linear-gradient(120deg, #b45dff, #6c32ff); | |||
color: #fff; | |||
box-shadow: 0 10px 26px rgba(88, 41, 178, 0.45); | |||
} | |||
/* opcional: deixar o fundo da barra mais clarinho pra combinar */ | |||
.drops-inline.is-mvp { | |||
background: #f7f1ff; | |||
} | |||
/* Container do texto introdutório – agora em formato de card */ | |||
.vip-intro { | |||
max-width: 1100px; /* mesma “largura visual” do card de baixo */ | |||
margin: 8px auto 32px; /* centralizado */ | |||
padding: 18px 32px 22px; | |||
border-radius: 26px; | |||
background: linear-gradient(180deg, #2a0d55 0%, #130322 100%); | |||
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.65); | |||
border: 1px solid rgba(255, 160, 255, 0.18); | |||
position: relative; | |||
color: #fdf7ff; | |||
} | |||
/* linha de brilho em cima pra imitar a borda do painel */ | |||
.vip-intro::before { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
border-radius: inherit; | |||
border-top: 2px solid rgba(255, 210, 255, 0.45); | |||
pointer-events: none; | |||
} | |||
/* “pílula” no topo, combinando com VANTAGENS VIP */ | |||
.vip-intro-chip { | |||
position: absolute; | |||
top: -16px; | |||
left: 50%; | |||
transform: translateX(-50%); | |||
padding: 6px 22px; | |||
border-radius: 999px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.09em; | |||
color: #3c163e; | |||
background: linear-gradient(90deg, #ffb949 0%, #ff9331 100%); | |||
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.6); | |||
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); | |||
} | |||
/* Texto interno */ | |||
.vip-intro p { | |||
margin: 4px 0 0; | |||
font-size: 13px; | |||
line-height: 1.7; | |||
} | |||
/* Destaques dentro do texto */ | |||
.vip-intro b { | |||
color: #ffe8ff; | |||
} | |||
/* Card de introdução de Rates / Temporada */ | |||
.rt-intro { | |||
max-width: 1100px; | |||
margin: 16px auto 32px; | |||
padding: 18px 22px 22px; | |||
border-radius: 22px; | |||
background: radial-gradient(circle at 0 0, #8f5bff 0, #2a164f 55%, #140826 100%); | |||
box-shadow: 0 16px 40px rgba(8, 0, 40, 0.55); | |||
color: #f7f4ff; | |||
position: relative; | |||
font-size: 0.9rem; | |||
line-height: 1.6; | |||
} | |||
/* Badge flutuando no topo */ | |||
.rt-intro-badge { | |||
position: absolute; | |||
top: -18px; | |||
left: 28px; | |||
padding: 6px 18px; | |||
border-radius: 999px; | |||
font-size: 0.78rem; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
font-weight: 700; | |||
background: linear-gradient(90deg, #ffb347, #ff7a3c); | |||
color: #351c3f; | |||
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); | |||
} | |||
/* Corpo do texto */ | |||
.rt-intro-body p { | |||
margin: 6px 0 10px; | |||
} | |||
.rt-intro-body b { | |||
color: #ffe9ff; | |||
} | |||
/* Parágrafo de aviso */ | |||
.rt-intro-warning { | |||
margin-top: 14px; | |||
padding: 10px 12px; | |||
border-radius: 14px; | |||
background: rgba(10, 2, 30, 0.65); | |||
border: 1px solid rgba(255, 204, 120, 0.4); | |||
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03); | |||
} | |||
/* Pílula "Importante" dentro do aviso */ | |||
.rt-intro-warning .rt-pill { | |||
display: inline-block; | |||
margin-right: 8px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 0.72rem; | |||
text-transform: uppercase; | |||
letter-spacing: .08em; | |||
background: rgba(255, 204, 120, 0.18); | |||
border: 1px solid rgba(255, 204, 120, 0.8); | |||
color: #ffe1a6; | |||
} | |||
/* ===== GRID DE GUIAS IMPORTANTES – CONTAINER ===== */ | |||
.home-guides-surface { | |||
max-width: 1200px; | |||
margin: 10px auto 40px; | |||
padding: 26px 30px 30px; | |||
border-radius: 24px; | |||
background: | |||
radial-gradient(circle at 0 0, #fff7ff 0, #f7f1ff 40%, #f3ecff 100%); | |||
border: 1px solid rgba(177, 150, 255, 0.35); | |||
box-shadow: 0 18px 38px rgba(120, 90, 255, 0.18); | |||
} | |||
/* Grid de 4 colunas, bem espaçado */ | |||
.home-guides-surface .home-guides-grid { | |||
display: grid; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
gap: 18px 40px; | |||
} | |||
/* Título de cada coluna */ | |||
.home-guides-surface .col-title { | |||
font-family: "Lilita One", system-ui, -apple-system, BlinkMacSystemFont; | |||
font-size: 16px; | |||
margin-bottom: 10px; | |||
color: #5a34a5; | |||
} | |||
/* Ajuste fino na lista para casar com o fundo novo */ | |||
.home-guides-surface .home-list { | |||
margin: 0; | |||
padding: 0; | |||
} | |||
/* Mantém o estilo de linha clicável já existente, só suaviza o espaçamento */ | |||
.home-guides-surface .home-list li { | |||
margin: 3px 0; | |||
} | |||
/* RESPONSIVO: quebra para 2 colunas e depois 1 */ | |||
@media (max-width: 1024px) { | |||
.home-guides-surface { | |||
padding: 22px 20px 26px; | |||
} | |||
.home-guides-surface .home-guides-grid { | |||
grid-template-columns: repeat(2, minmax(0, 1fr)); | |||
gap: 16px 24px; | |||
} | |||
} | |||
@media (max-width: 700px) { | |||
.home-guides-surface .home-guides-grid { | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
/* ===== BLOCO DE DESTAQUES (TOPO) ===== */ | |||
.rt-featured { | |||
position: relative; | |||
max-width: 1150px; | |||
margin: 32px auto 24px; | |||
padding: 32px 32px 28px; | |||
border-radius: 26px; | |||
background: linear-gradient(135deg, #f7f1ff 0%, #f9f5ff 40%, #f6f0ff 100%); | |||
box-shadow: 0 18px 35px rgba(98, 63, 194, 0.16); | |||
border: 1px solid rgba(140, 92, 255, 0.22); | |||
} | |||
/* Badge “Destaques & Novidades” no topo, estilo Eden */ | |||
.rt-featured::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -18px; | |||
left: 40px; | |||
padding: 8px 26px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 600; | |||
letter-spacing: 0.10em; | |||
text-transform: uppercase; | |||
background: linear-gradient(120deg, #3b1f91, #6f3bff); | |||
color: #fff; | |||
box-shadow: 0 10px 25px rgba(67, 35, 160, 0.45); | |||
} | |||
/* GRID – duas colunas responsivas */ | |||
.rt-featured-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 24px 64px; | |||
} | |||
/* Cada coluna de destaques */ | |||
.rt-featured-col { | |||
flex: 1 1 260px; | |||
min-width: 260px; | |||
} | |||
/* Título da coluna */ | |||
.rt-featured-col-title { | |||
font-size: 13px; | |||
font-weight: 700; | |||
letter-spacing: 0.14em; | |||
text-transform: uppercase; | |||
color: #6a3dd6; | |||
margin-bottom: 10px; | |||
} | |||
/* Lista básica */ | |||
.rt-featured-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 4px 0 0; | |||
} | |||
/* Cada linha */ | |||
.rt-featured-list li { | |||
margin: 0; | |||
padding: 0; | |||
border-bottom: 1px dashed rgba(125, 94, 210, 0.25); | |||
} | |||
/* Remove a borda do último item da coluna */ | |||
.rt-featured-list li:last-child { | |||
border-bottom: none; | |||
} | |||
/* Link ocupando a linha toda */ | |||
.rt-featured-list li a { | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
padding: 8px 10px; | |||
text-decoration: none; | |||
color: #41228b; | |||
font-size: 14px; | |||
border-radius: 999px; | |||
transition: | |||
background 0.18s ease, | |||
box-shadow 0.18s ease, | |||
transform 0.12s ease, | |||
color 0.18s ease; | |||
} | |||
/* Bolinha decorativa à esquerda (tipo “bullet”) */ | |||
.rt-featured-list li a::before { | |||
content: ""; | |||
width: 6px; | |||
height: 6px; | |||
border-radius: 999px; | |||
margin-right: 10px; | |||
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b6bff 55%, #5a32c8 100%); | |||
box-shadow: 0 0 0 2px rgba(155, 107, 255, 0.2); | |||
} | |||
/* Hover – linha inteira roxo claro */ | |||
.rt-featured-list li a:hover { | |||
background: radial-gradient(circle at 0% 0%, #ffffff 0%, #f1e7ff 55%, #e6d6ff 100%); | |||
box-shadow: 0 8px 20px rgba(94, 55, 189, 0.28); | |||
color: #2b176b; | |||
transform: translateY(-1px); | |||
} | |||
/* Opcional: estado “ativo”/selecionado (se quiser forçar em algum item via classe) */ | |||
.rt-featured-list li.is-active a { | |||
background: linear-gradient(120deg, #6f3bff, #9a5dff); | |||
color: #ffffff; | |||
box-shadow: 0 10px 24px rgba(80, 49, 180, 0.45); | |||
} | |||
/* ===== BLOCO DE DESTAQUES – compacto ===== */ | |||
.rt-featured { | |||
position: relative; | |||
max-width: 900px; /* um pouco menor */ | |||
margin: 24px auto 18px; | |||
padding: 16px 18px 14px; /* menos “alto” e mais compacto */ | |||
border-radius: 18px; | |||
background: linear-gradient(135deg, #f9f5ff 0%, #f3ecff 40%, #efe6ff 100%); | |||
border: 1px solid rgba(140, 92, 255, 0.22); | |||
box-shadow: | |||
0 10px 22px rgba(96, 63, 191, 0.22), | |||
0 0 0 1px rgba(255, 255, 255, 0.4) inset; | |||
} | |||
/* Badge roxo escuro, também um pouco menor */ | |||
.rt-featured::before { | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: -16px; | |||
left: 26px; | |||
padding: 6px 18px; | |||
border-radius: 999px; | |||
font-size: 10px; | |||
font-weight: 600; | |||
letter-spacing: 0.14em; | |||
text-transform: uppercase; | |||
background: linear-gradient(120deg, #3b1f8c, #6a38f5); | |||
color: #fff; | |||
box-shadow: 0 10px 22px rgba(63, 35, 150, 0.55); | |||
} | |||
/* Grid um pouco mais fechado */ | |||
.rt-featured-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 12px 40px; | |||
} | |||
/* ===== TÍTULOS DAS COLUNAS ===== */ | |||
.rt-featured-col-title { | |||
font-size: 11px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.15em; | |||
color: #7a60d0; | |||
margin-bottom: 4px; | |||
} | |||
/* ===== LISTA E HOVER ===== */ | |||
.rt-featured-list { | |||
list-style: none; | |||
margin: 0; | |||
padding: 2px 0 0; | |||
} | |||
.rt-featured-list li { | |||
margin: 0; | |||
padding: 0; | |||
border-bottom: 1px dashed rgba(125, 94, 210, 0.18); | |||
} | |||
.rt-featured-list li:last-child { | |||
border-bottom: none; | |||
} | |||
.rt-featured-list li a { | |||
display: flex; | |||
align-items: center; | |||
width: 100%; | |||
padding: 4px 8px; /* mais compacto */ | |||
text-decoration: none; | |||
color: #41228b; | |||
font-size: 13px; | |||
border-radius: 10px; | |||
transition: | |||
background 0.15s ease, | |||
box-shadow 0.15s ease, | |||
transform 0.10s ease, | |||
color 0.15s ease; | |||
} | |||
/* bolinha decorativa ao lado do texto */ | |||
.rt-featured-list li a::before { | |||
content: ""; | |||
width: 6px; | |||
height: 6px; | |||
border-radius: 999px; | |||
margin-right: 8px; | |||
background: radial-gradient(circle at 30% 30%, #ffffff 0%, #9b6bff 55%, #5a32c8 100%); | |||
box-shadow: 0 0 0 2px rgba(155, 107, 255, 0.2); | |||
} | |||
/* HOVER – mesma vibe do exemplo (roxinho chapado claro) */ | |||
.rt-featured-list li a:hover { | |||
background: #ecdafe; /* cor principal do hover */ | |||
box-shadow: 0 6px 14px rgba(122, 80, 209, 0.25); | |||
color: #2b176b; | |||
transform: translateY(-1px); | |||
} | |||
/* opcional: item fixo selecionado */ | |||
.rt-featured-list li.is-active a { | |||
background: linear-gradient(120deg, #6f3bff, #9a5dff); | |||
color: #ffffff; | |||
box-shadow: 0 10px 24px rgba(80, 49, 180, 0.45); | |||
} | |||
/* Dá mais espaço entre a borda superior do card e o conteúdo */ | |||
.rt-featured-grid { | |||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 12px 40px; | |||
margin-top: 10px; /* <-- adiciona esse espaçamento */ | |||
} | |||
/* Linha especial da TRAVA da roleta */ | |||
.rt-roulette-lock-row td { | |||
background: #fff4f8; /* leve rosinha */ | |||
border-bottom: 2px solid #f1c1d8; | |||
} | |||
.rt-roulette-lock-row td:first-child { | |||
border-left: 3px solid #ff82b8; /* faixa lateral chamando atenção */ | |||
} | |||
/* Badge "TRAVA" ao lado do item */ | |||
.rt-roulette-lock-badge { | |||
display: inline-block; | |||
margin-left: 6px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 10px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
font-weight: 600; | |||
background: linear-gradient(90deg, #ff7bbd, #ffb6dd); | |||
color: #ffffff; | |||
vertical-align: middle; | |||
} | |||
/* --- Card da Roleta (colapsível) --- */ | |||
.rt-roulette-box { | |||
background: radial-gradient(circle at top left, #fdf8ff 0, #f3ecff 45%, #efe6ff 100%); | |||
border-radius: 22px; | |||
border: 1px solid rgba(140, 110, 255, 0.25); | |||
padding: 20px 26px; | |||
margin: 18px auto 28px; | |||
box-shadow: 0 14px 35px rgba(80, 40, 190, 0.18); | |||
} | |||
/* tira espaçamento estranho padrão do collapsible */ | |||
.rt-roulette-box .mw-collapsible-content { | |||
padding-top: 10px; | |||
} | |||
/* --- Tabela da Roleta --- */ | |||
.wikitable.rt-roulette-table { | |||
background: transparent; | |||
border-collapse: collapse; | |||
} | |||
.wikitable.rt-roulette-table th, | |||
.wikitable.rt-roulette-table td { | |||
border: none; | |||
border-bottom: 1px dashed rgba(170, 130, 255, 0.35); | |||
padding: 10px 16px; | |||
} | |||
/* cabeçalho padrão (igual aos outros cards roxos claros) */ | |||
.wikitable.rt-roulette-table th { | |||
background: #f5e9ff; | |||
font-weight: 600; | |||
color: #5b2cff; | |||
text-transform: uppercase; | |||
font-size: 11px; | |||
} | |||
.wikitable.rt-roulette-table tr:last-child td { | |||
border-bottom: none; | |||
} | |||
/* --- Linha especial da TRAVA --- */ | |||
.rt-roulette-lock-row td { | |||
background: #f3ecff; /* lilás suave */ | |||
border-bottom: 2px solid rgba(125, 90, 255, 0.35); /* linha um pouco mais forte */ | |||
} | |||
.rt-roulette-lock-row td:first-child { | |||
border-left: 3px solid #5b2cff; /* faixa roxo escuro */ | |||
border-top-left-radius: 12px; | |||
border-bottom-left-radius: 12px; | |||
} | |||
.rt-roulette-lock-row td:last-child { | |||
border-top-right-radius: 12px; | |||
border-bottom-right-radius: 12px; | |||
} | |||
/* --- Badge TRAVA em roxo escuro --- */ | |||
.rt-roulette-lock-badge { | |||
display: inline-block; | |||
margin-left: 8px; | |||
padding: 2px 10px; | |||
border-radius: 999px; | |||
font-size: 10px; | |||
text-transform: uppercase; | |||
letter-spacing: 0.08em; | |||
font-weight: 700; | |||
background: linear-gradient(90deg, #4b1fd9, #8e54ff); /* roxo escuro -> roxo médio */ | |||
color: #ffffff; | |||
box-shadow: | |||
0 0 0 1px rgba(255, 255, 255, 0.75) inset, | |||
0 2px 6px rgba(56, 26, 140, 0.45); | |||
vertical-align: middle; | |||
} | |||
/* ----- CONTAINER DO NÍVEL (card roxo claro) ----- */ | |||
.roleta-sorte .mw-collapsible-content { | |||
background: #fbf5ff; | |||
border-radius: 18px; | |||
padding: 18px 22px; | |||
box-shadow: 0 14px 40px rgba(130, 88, 255, 0.16); | |||
} | |||
/* CARD da Roleta (mesmo esquema de antes) */ | |||
.roleta-sorte .mw-collapsible-content { | |||
background: #fbf5ff; | |||
border-radius: 18px; | |||
padding: 18px 22px; | |||
box-shadow: 0 14px 40px rgba(130, 88, 255, 0.16); | |||
} | |||
/* Roleta da Sorte – área interna do colapsível */ | |||
.roleta-sorte .mw-collapsible { | |||
background: transparent !important; | |||
border: none !important; | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
} | |||
.roleta-sorte .mw-collapsible-content { | |||
background: transparent !important; | |||
border: none !important; | |||
padding: 10px 0 0 !important; /* só um respiro abaixo do cabeçalho */ | |||
} | |||
/* Tabela da Roleta */ | |||
.roleta-sorte .rt-lottery-table { | |||
width: 70%; /* deixa mais estreita */ | |||
margin: 0 auto 24px; /* centralizada */ | |||
background: #f7eeff; /* roxo claro */ | |||
border-collapse: collapse; | |||
} | |||
.roleta-sorte .rt-lottery-table th, | |||
.roleta-sorte .rt-lottery-table td { | |||
background: #f7eeff !important; /* todas as linhas com a MESMA cor */ | |||
border-color: #f0ddff; /* borda suave em roxo bem clarinho */ | |||
} | |||
/* opcional: dar uma leve arredondada na “caixa” da tabela */ | |||
.roleta-sorte .rt-lottery-table tr:first-child th:first-child { | |||
border-top-left-radius: 14px; | |||
} | |||
.roleta-sorte .rt-lottery-table tr:first-child th:last-child { | |||
border-top-right-radius: 14px; | |||
} | |||
.roleta-sorte .rt-lottery-table tr:last-child td:first-child { | |||
border-bottom-left-radius: 14px; | |||
} | |||
.roleta-sorte .rt-lottery-table tr:last-child td:last-child { | |||
border-bottom-right-radius: 14px; | |||
} | |||
/* Badge TRAVA — roxo escuro, como já estava */ | |||
.rt-lottery-trava-tag { | |||
display: inline-block; | |||
margin-left: 6px; | |||
margin-top: 2px; | |||
padding: 2px 10px; | |||
font-size: 11px; | |||
font-weight: 700; | |||
text-transform: uppercase; | |||
letter-spacing: 0.05em; | |||
border-radius: 999px; | |||
background: #5b2aff; | |||
color: #ffffff; | |||
box-shadow: 0 4px 12px rgba(91, 42, 255, 0.55); | |||
} | |||
/* Opção 2 – recomendado */ | |||
.roleta-sorte .drops-inline { | |||
margin: 0 auto 8px !important; /* centralizado e com espaçamento vertical */ | |||
} | |||
/* Banner da Roleta da Sorte – wrapper */ | |||
.roleta-page .banner-true { | |||
display: inline-block; | |||
border-radius: 24px; | |||
overflow: hidden; /* faz a borda arredondada cortar a imagem dentro */ | |||
box-shadow: 0 18px 40px rgba(30, 10, 80, 0.45); | |||
border: 2px solid #f5e7ff; | |||
} | |||
/* Garante que a imagem dentro acompanhe e fique sem margem */ | |||
.roleta-page .banner-true img { | |||
display: block; | |||
border-radius: 0; /* a borda já vem do wrapper */ | |||
box-shadow: none; /* sombra só no wrapper */ | |||
} | |||
/* GRID da progressão de EXP do Passe de Batalha */ | |||
.bp-exp-summary { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); | |||
gap: 12px; | |||
margin: 12px 0 24px; | |||
} | |||
/* Card individual */ | |||
.bp-exp-card { | |||
background: #faf5ff; /* roxo bem clarinho */ | |||
border-radius: 14px; | |||
padding: 10px 16px 12px; | |||
box-shadow: 0 10px 25px rgba(123, 58, 245, 0.08); | |||
border: 1px solid rgba(123, 58, 245, 0.12); | |||
} | |||
/* Label pequena em cima */ | |||
.bp-exp-label { | |||
font-size: 11px; | |||
font-weight: 600; | |||
text-transform: uppercase; | |||
letter-spacing: 0.06em; | |||
color: #7b3af5; | |||
margin-bottom: 4px; | |||
} | |||
/* Valor principal */ | |||
.bp-exp-value { | |||
font-size: 14px; | |||
font-weight: 600; | |||
color: #2c2250; | |||
} | |||
/* Observação opcional (linha de baixo) */ | |||
.bp-exp-note { | |||
font-size: 11px; | |||
color: #6c6a80; | |||
margin-top: 2px; | |||
} | |||
/* ============================= | |||
Recompensa Bônus do Passe | |||
============================= */ | |||
/* Card mais compacto e centrado */ | |||
.bp-bonus-card { | |||
background: #faf5ff; | |||
border-radius: 20px; | |||
padding: 14px 18px 18px; | |||
margin: 8px auto 24px; | |||
border: 1px solid rgba(123, 58, 245, 0.12); | |||
box-shadow: 0 10px 28px rgba(123, 58, 245, 0.15); | |||
max-width: 260px; /* deixa esse formato “cartinha” */ | |||
} | |||
/* Como você está usando praticamente só a coluna, | |||
força o layout vertical em qualquer largura */ | |||
.bp-bonus-main { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 12px; | |||
text-align: center; | |||
} | |||
/* Título "Recompensa Bônus (0,5%)" dentro do card */ | |||
.bp-bonus-title { | |||
font-size: 14px; | |||
font-weight: 600; | |||
color: #5b34c9; | |||
margin-bottom: 2px; | |||
} | |||
/* Bloco da esquerda (ovo + textos) agora é coluna também */ | |||
.bp-bonus-left { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 8px; | |||
} | |||
/* Círculo do ovo – só ajustei tamanho e sombra pra combinar com o card menor */ | |||
.bp-bonus-icon-wrap { | |||
width: 54px; | |||
height: 54px; | |||
border-radius: 50%; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
background: radial-gradient( | |||
circle at 20% 0%, | |||
#ffffff 0%, | |||
#c8a8ff 55%, | |||
#9b6bff 100% | |||
); | |||
box-shadow: 0 6px 16px rgba(99, 55, 214, 0.35); | |||
overflow: hidden; | |||
margin-top: 2px; | |||
} | |||
.bp-bonus-icon { | |||
max-width: 32px !important; | |||
height: auto !important; | |||
} | |||
/* Textos do ovo */ | |||
.bp-bonus-text { | |||
line-height: 1.3; | |||
} | |||
.bp-bonus-label { | |||
font-size: 10px; | |||
letter-spacing: 0.14em; | |||
text-transform: uppercase; | |||
color: #aa7cff; | |||
font-weight: 600; | |||
margin-top: 4px; | |||
margin-bottom: 1px; | |||
} | |||
.bp-bonus-name { | |||
font-size: 15px; | |||
font-weight: 700; | |||
color: #3b2b67; | |||
} | |||
.bp-bonus-desc { | |||
font-size: 11px; | |||
color: #6b5a99; | |||
} | |||
/* Pet */ | |||
.bp-bonus-right { | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
gap: 4px; | |||
margin-top: 6px; | |||
} | |||
.bp-bonus-pet { | |||
max-height: 120px !important; /* um pouco menor pra não “pesar” o card */ | |||
width: auto !important; | |||
} | |||
.bp-bonus-pet-name { | |||
font-size: 11px; | |||
color: #6b5a99; | |||
font-weight: 600; | |||
margin-bottom: 2px; | |||
} | |||
.roxo-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
background: #160c22; /* roxo bem escuro */ | |||
color: #f5e9ff; | |||
border: 1px solid rgba(220, 180, 255, 0.16); | |||
border-radius: 10px; | |||
overflow: hidden; | |||
} | |||
.roxo-table th { | |||
background: linear-gradient(90deg, #7b3af5, #a855f7); | |||
color: #ffffff; | |||
padding: 8px 10px; | |||
text-align: left; | |||
font-weight: 600; | |||
border-bottom: 1px solid rgba(255, 255, 255, 0.12); | |||
font-size: 13px; | |||
} | |||
.roxo-table td { | |||
padding: 6px 10px; | |||
border-top: 1px solid rgba(220, 180, 255, 0.10); | |||
font-size: 13px; | |||
} | |||
.roxo-table tr:nth-child(even) td { | |||
background: rgba(255, 255, 255, 0.02); | |||
} | |||
.roxo-table tr:hover td { | |||
background: rgba(148, 93, 255, 0.18); | |||
} | |||
/* ====== CARD / CAIXA GERAL ====== */ | |||
.rt-rewards-card { | |||
background: #f7ecff; | |||
border-radius: 24px; | |||
padding: 18px 22px 22px; | |||
box-shadow: 0 16px 40px rgba(149, 90, 255, 0.25); | |||
max-width: 960px; | |||
margin: 0 auto 32px; | |||
} | |||
/* Título (ex: "Recompensas") – opcional */ | |||
.rt-rewards-title { | |||
font-size: 24px; | |||
font-weight: 800; | |||
color: #5b2aa8; | |||
margin-bottom: 14px; | |||
} | |||
/* Badge / aba roxa (ex: "RECOMPENSAS – DESAFIOS DIÁRIOS") */ | |||
.rt-rewards-chip { | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 26px; | |||
border-radius: 999px; | |||
background: linear-gradient(90deg, #a546ff, #d067ff); | |||
color: #ffffff; | |||
font-size: 12px; | |||
font-weight: 700; | |||
letter-spacing: 0.04em; | |||
text-transform: uppercase; | |||
box-shadow: 0 8px 24px rgba(133, 70, 255, 0.45); | |||
margin-bottom: 18px; | |||
} | |||
/* ====== TABELA ====== */ | |||
.rt-rewards-table { | |||
width: 100%; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 16px; | |||
overflow: hidden; | |||
font-size: 14px; | |||
font-family: inherit; | |||
} | |||
/* Cabeçalho (linha "Prêmio | Chance") */ | |||
.rt-rewards-table .rt-head th { | |||
background: #f0ddff; | |||
color: #5b2aa8; | |||
font-weight: 600; | |||
padding: 10px 18px; | |||
text-align: left; /* base: esquerda */ | |||
} | |||
/* "Prêmio" centralizado */ | |||
.rt-rewards-table .rt-head th:first-child { | |||
text-align: center; | |||
} | |||
/* "Chance" centralizado */ | |||
.rt-rewards-table .rt-head th:last-child { | |||
text-align: center; | |||
} | |||
/* Corpo da tabela */ | |||
.rt-rewards-table tr td { | |||
background: #fdfbff; | |||
color: #3c215f; | |||
padding: 10px 18px; | |||
border-bottom: 1px solid #f0e2ff; /* listrinha horizontal suave */ | |||
} | |||
/* Remove a borda da última linha */ | |||
.rt-rewards-table tr:last-child td { | |||
border-bottom: none; | |||
} | |||
/* Primeira coluna: conteúdo alinhado à esquerda */ | |||
.rt-rewards-table tr td:first-child { | |||
text-align: left; | |||
} | |||
/* Segunda coluna (Chance) centralizada */ | |||
.rt-rewards-table tr td:last-child { | |||
text-align: center; | |||
} | |||
/* Linha vertical separando as colunas */ | |||
.rt-rewards-table .rt-head th:nth-child(2), | |||
.rt-rewards-table tr td:nth-child(2) { | |||
border-left: 1px solid rgba(224, 203, 255, 0.9); | |||
} | |||
/* Canto arredondado — topo */ | |||
.rt-rewards-table .rt-head th:first-child { | |||
border-top-left-radius: 16px; | |||
} | |||
.rt-rewards-table .rt-head th:last-child { | |||
border-top-right-radius: 16px; | |||
} | |||
/* Canto arredondado — base */ | |||
.rt-rewards-table tr:last-child td:first-child { | |||
border-bottom-left-radius: 16px; | |||
} | |||
.rt-rewards-table tr:last-child td:last-child { | |||
border-bottom-right-radius: 16px; | |||
} | |||
/* BOX ROXINHO AO REDOR DA TABELA */ | |||
.rt-rewards-box { | |||
margin: 30px auto 0; | |||
max-width: 980px; /* mais larga */ | |||
padding: 20px 22px 24px; | |||
background: radial-gradient(circle at top left, #ffe9ff 0, #f7e7ff 38%, #f8edff 100%); | |||
border-radius: 26px; | |||
border: 1px solid rgba(171, 119, 255, 0.45); | |||
box-shadow: | |||
0 18px 40px rgba(124, 79, 255, 0.25), | |||
0 0 0 1px rgba(255, 255, 255, 0.65); | |||
} | |||
/* TABELA */ | |||
.rt-rewards-table { | |||
width: 100%; | |||
border-collapse: collapse; | |||
font-size: 13px; | |||
line-height: 1.45; | |||
color: #5a2a90; | |||
} | |||
/* Cabeçalho */ | |||
.rt-rewards-table .rt-head th { | |||
background: linear-gradient(90deg, #f2d8ff, #f3d1ff); | |||
padding: 10px 18px; | |||
font-weight: 600; | |||
border-bottom: 1px solid #e3c4ff; | |||
color: #6e33c9; | |||
} | |||
/* "Prêmio" centralizado */ | |||
.rt-rewards-table .rt-head th:first-child { | |||
text-align: center; | |||
} | |||
/* "Nível" à direita + divisória */ | |||
.rt-rewards-table .rt-head th:last-child { | |||
text-align: center; | |||
border-left: 1px solid #e3c4ff; | |||
width: 120px; /* coluna de nível mais estreita */ | |||
white-space: nowrap; | |||
} | |||
/* Células do corpo */ | |||
.rt-rewards-table td { | |||
background: #fff9ff; | |||
padding: 8px 18px; | |||
border-bottom: 1px solid #f0e0ff; /* linha que separa as linhas */ | |||
box-shadow: inset 0 -1px 0 rgba(240, 224, 255, 0.7); | |||
} | |||
/* Primeira coluna alinhada à esquerda */ | |||
.rt-rewards-table td:first-child { | |||
text-align: left; | |||
} | |||
/* Segunda coluna à direita + divisória */ | |||
.rt-rewards-table td:last-child { | |||
text-align: center; | |||
border-left: 1px solid #f0d4ff; | |||
white-space: nowrap; | |||
} | |||
/* Última linha com borda mais suave */ | |||
.rt-rewards-table tr:last-child td { | |||
border-bottom-color: rgba(240, 224, 255, 0.4); | |||
} | } | ||
. | /* Pequeno efeito ao passar o mouse nas linhas */ | ||
.rt-rewards-table tr:hover td { | |||
background: #fff3ff; | |||
} | } | ||
. | /* Passe de Batalha – banner com bordas curvas */ | ||
.banner-passe { | |||
display: block; | |||
margin: 0 auto; /* mantém centralizado */ | |||
border-radius: 24px; /* deixa as bordas curvas */ | |||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); /* opcional: destaque */ | |||
} | } | ||
. | /* Container do banner do Passe */ | ||
display: | .banner-passe { | ||
display: inline-block; | |||
border-radius: 24px; /* bordas curvas */ | |||
overflow: hidden; /* corta os cantos da imagem */ | |||
box-shadow: 0 10px 30px rgba(0,0,0,0.25); /* destaque (opcional) */ | |||
box-shadow: 0 10px | |||
} | } | ||
. | /* Garante que a imagem ocupe certinho o container */ | ||
.banner-passe img { | |||
display: block; | display: block; | ||
} | |||
/* HERO (topo) */ | |||
.rtp-hero{ | |||
background: rgba(130, 90, 200, 0.08); | |||
border-radius: 18px; | |||
padding: 14px; | |||
margin: 6px 0 14px; | |||
box-shadow: 0 10px 22px rgba(0,0,0,0.10); | |||
} | |||
.rtp-hero-title{ font-weight: 950; font-size: 18px; } | |||
.rtp-hero-sub{ opacity: .92; margin-top: 6px; line-height: 1.35; } | |||
.rtp-quick{ display:flex; gap:8px; flex-wrap:wrap; margin-top: 10px; } | |||
.rtp-pill{ | |||
display:inline-block; | |||
padding:7px 11px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
background: rgba(130, 90, 200, 0.14); | |||
} | |||
/* Grids */ | |||
.rtp-grid-featured{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(360px,1fr)); | |||
gap:16px; | |||
margin-top: 10px; | |||
} | |||
.rtp-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); | |||
gap:14px; | |||
margin-top: 10px; | |||
} | |||
.rtp-muted{ opacity:.85; margin: 6px 0 8px; } | |||
/* Card do criador */ | |||
.rtp-card{ | |||
background: rgba(255,255,255,0.94); | |||
border-radius: 18px; | |||
overflow:hidden; | |||
box-shadow: 0 12px 26px rgba(0,0,0,0.14); | |||
position: relative; | |||
} | |||
.rtp-card:before{ | |||
content:""; | |||
position:absolute; | |||
left:0; top:0; right:0; | |||
height: 4px; | |||
background: rgba(130, 90, 200, 0.55); | |||
opacity: .75; | |||
} | |||
.rtp-top{ | |||
display:flex; | |||
gap:14px; | |||
padding: 14px; | |||
align-items:flex-start; | |||
} | |||
.rtp-avatar img{ | |||
border-radius: 14px; | |||
box-shadow: 0 10px 18px rgba(0,0,0,0.16); | |||
display:block; | |||
} | |||
.rtp-main{ flex:1; min-width:0; } | |||
.rtp-name{ font-weight: 950; font-size: 18px; line-height: 1.15; } | |||
.rtp-line{ opacity: .92; margin-top: 6px; line-height: 1.35; } | |||
.rtp-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 8px; } | |||
.rtp-chip{ | |||
display:inline-block; | |||
padding:4px 10px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 900; | |||
background: rgba(130, 90, 200, 0.12); | |||
} | |||
.rtp-links{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 10px; } | |||
.rtp-btn{ | |||
display:inline-block; | |||
padding:8px 12px; | |||
border-radius:12px; | |||
font-weight: 950; | |||
text-decoration:none !important; | |||
background: rgba(130, 90, 200, 0.18); | |||
} | |||
.rtp-btn:hover{ filter:brightness(1.06); } | |||
.rtp-btn-soft{ background: rgba(130, 90, 200, 0.10); } | |||
/* Benefícios */ | |||
.rtp-benefits{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); | |||
gap:14px; | |||
margin-top: 10px; | |||
} | |||
.rtp-box{ | |||
background: rgba(255,255,255,0.94); | |||
border-radius: 18px; | |||
box-shadow: 0 12px 26px rgba(0,0,0,0.12); | |||
padding: 14px; | |||
} | |||
.rtp-box-title{ font-weight: 950; font-size: 16px; margin-bottom: 8px; } | |||
.rtp-list{ margin: 0; padding-left: 18px; line-height: 1.45; } | |||
/* Mobile */ | |||
@media (max-width: 560px){ | |||
.rtp-top{ flex-direction:column; } | |||
} | |||
/* Visão Geral */ | |||
.rtp-overview{ | |||
display:grid; | |||
grid-template-columns: 1.35fr .65fr; | |||
gap:14px; | |||
background: rgba(130, 90, 200, 0.06); | |||
border-radius: 18px; | |||
padding: 14px; | |||
box-shadow: 0 10px 22px rgba(0,0,0,0.10); | |||
margin: 8px 0 14px; | |||
} | |||
.rtp-ov-title{ | |||
font-weight: 950; | |||
font-size: 18px; | |||
margin-bottom: 6px; | |||
} | |||
.rtp-ov-text{ | |||
opacity: .92; | |||
line-height: 1.4; | |||
} | |||
.rtp-ov-bullets{ | |||
margin-top: 10px; | |||
display:grid; | |||
gap:6px; | |||
opacity: .92; | |||
} | |||
.rtp-ov-item{ | |||
background: rgba(255,255,255,0.70); | |||
border-radius: 14px; | |||
padding: 8px 10px; | |||
} | |||
.rtp-ov-box{ | |||
background: rgba(255,255,255,0.90); | |||
border-radius: 18px; | |||
padding: 12px; | |||
box-shadow: 0 10px 22px rgba(0,0,0,0.10); | |||
} | |||
.rtp-ov-box-title{ | |||
font-weight: 950; | |||
margin-bottom: 8px; | |||
} | |||
.rtp-ov-links{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
} | |||
.rtp-ov-btn{ | |||
display:inline-block; | |||
padding: 8px 12px; | |||
border-radius: 999px; | |||
font-weight: 950; | |||
background: rgba(130, 90, 200, 0.14); | |||
} | |||
/* Mobile */ | |||
@media (max-width: 650px){ | |||
.rtp-overview{ grid-template-columns: 1fr; } | |||
} | |||
.rtp-intro{ | |||
margin: 6px 0 10px; | |||
opacity: .92; | |||
line-height: 1.4; | |||
} | |||
.rtp-quicklinks{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:8px; | |||
margin: 0 0 14px; | |||
} | |||
.rtp-q{ | |||
display:inline-block; | |||
padding: 7px 11px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
background: rgba(130, 90, 200, 0.12); | |||
} | |||
/* ================================ | |||
RagnaTrue - Tooltip ItemInfo (BRANCO) | |||
================================ */ | |||
.rt-item{ | |||
cursor:pointer; | |||
text-decoration:underline dotted; | |||
} | |||
/* Caixa do tooltip */ | |||
#rt-tooltip{ | |||
position:fixed; | |||
z-index:999999; | |||
max-width:560px; | |||
background:#ffffff; /* FUNDO BRANCO */ | |||
color:#1f1f1f; | |||
border:1px solid rgba(0,0,0,0.12); | |||
border-radius:16px; | |||
padding:12px 14px; | |||
box-shadow:0 14px 34px rgba(0,0,0,0.16); | |||
display:none; | |||
font-size:14px; | |||
line-height:1.35; | |||
} | |||
/* Layout: ícone + texto */ | |||
#rt-tooltip .rt-top{ | |||
display:flex; | |||
gap:18px; | |||
align-items:center; /* centraliza verticalmente */ | |||
} | |||
/* Ícone 75x100 */ | |||
#rt-tooltip .rt-icon{ | |||
width:75px; | |||
height:100px; | |||
flex:0 0 75px; | |||
display:block; | |||
background:transparent !important; | |||
border:0 !important; | |||
box-shadow:none !important; | |||
border-radius:0 !important; | |||
object-fit:contain; | |||
object-position:center; | |||
image-rendering:pixelated; | |||
} | |||
/* Texto */ | |||
#rt-tooltip .rt-text{ | |||
min-width:0; | |||
flex:1 1 auto; | |||
} | |||
#rt-tooltip .rt-title{ | |||
font-weight:900; | |||
margin:0 0 6px 0; | |||
color:#111; | |||
} | |||
#rt-tooltip .rt-body{ | |||
color:#222; | |||
} | |||
/* Separador (linhas do RO viram <hr>) */ | |||
#rt-tooltip hr{ | |||
border:0; | |||
border-top:1px solid rgba(0,0,0,0.12); | |||
margin:10px 0; | |||
} | |||
/* Ajuste pra cores muito neon ficarem legíveis no branco */ | |||
#rt-tooltip span[style*="color:#0000CC"], | |||
#rt-tooltip span[style*="color:#0000cc"]{ | |||
color:#2f49ff !important; | |||
} | |||
#rt-tooltip span[style*="color:#FF0000"], | |||
#rt-tooltip span[style*="color:#ff0000"]{ | |||
color:#d11a2a !important; | |||
} | |||
/* ===== Tooltip: modo colunas quando necessário ===== */ | |||
#rt-tooltip.is-cols .rt-top{ | |||
align-items:flex-start; /* só no modo colunas */ | |||
} | |||
#rt-tooltip .rt-body{ | |||
/* default: 1 coluna (normal) */ | |||
column-count:1; | |||
column-gap:22px; | |||
} | |||
#rt-tooltip.is-cols .rt-body{ | |||
/* o JS vai setar column-count dinamicamente (2 ou 3) */ | |||
column-fill:auto; | |||
} | |||
#rt-tooltip.is-compact{ | |||
font-size:13px; | |||
line-height:1.28; | |||
} | |||
#rt-tooltip .rt-body hr{ | |||
break-after:avoid; | |||
} | |||
/* === Tooltip: modo colunas por ALTURA === */ | |||
#rt-tooltip.is-cols .rt-top{ | |||
align-items:flex-start; | |||
} | |||
#rt-tooltip .rt-body{ | |||
column-count: 1; | |||
column-gap: 22px; | |||
} | |||
/* (opcional) evita ficar largo demais no desktop */ | |||
#rt-tooltip.is-cols{ | |||
/* JS vai ajustar maxWidth dinamicamente, isso é só "base" */ | |||
max-width: 980px; | |||
} | |||
/* ===== Criadores Parceiros: Visual do Streamer ===== */ | |||
.criadores-page .rtp-visual-center{ | |||
display:flex; | |||
justify-content:center; | |||
margin: 14px 0 22px; | |||
} | |||
.criadores-page .rtp-visual-card{ | |||
width: min(360px, 92vw); | |||
padding: 18px 18px 16px; | |||
border-radius: 22px; | |||
background: rgba(245, 242, 255, .75); | |||
border: 1px solid rgba(122, 92, 255, .25); | |||
box-shadow: 0 16px 42px rgba(20, 10, 60, .10); | |||
text-align:center; | |||
backdrop-filter: blur(6px); | |||
} | |||
.criadores-page .rtp-visual-top{ | |||
font-weight: 900; | |||
font-size: 15px; | |||
letter-spacing: .2px; | |||
color: rgba(95, 70, 220, .95); | |||
margin-bottom: 8px; | |||
} | |||
.criadores-page .rtp-visual-mini{ | |||
margin: 2px 0 10px; | |||
opacity: .95; | |||
} | |||
.criadores-page .rtp-visual-kicker{ | |||
font-weight: 800; | |||
font-size: 11px; | |||
letter-spacing: .9px; | |||
text-transform: uppercase; | |||
color: rgba(120, 100, 230, .85); | |||
margin-bottom: 6px; | |||
} | |||
.criadores-page .rtp-visual-name{ | |||
font-weight: 900; | |||
font-size: 15px; | |||
color: rgba(35, 25, 80, .92); | |||
margin-bottom: 12px; | |||
text-decoration: underline; | |||
text-decoration-color: rgba(120, 100, 230, .40); | |||
text-underline-offset: 4px; | |||
} | |||
.criadores-page .rtp-visual-sprite{ | |||
display:flex; | |||
justify-content:center; | |||
align-items:center; | |||
padding: 6px 0 10px; | |||
} | |||
.criadores-page .rtp-visual-sprite img{ | |||
image-rendering: pixelated; | |||
filter: drop-shadow(0 10px 22px rgba(70, 40, 200, .18)); | |||
} | |||
.criadores-page .rtp-visual-foot{ | |||
font-weight: 700; | |||
font-size: 12px; | |||
color: rgba(95, 80, 170, .92); | |||
margin-top: 6px; | |||
} | |||
/* ========================================= | |||
Criadores Parceiros - Cards por Plataforma | |||
(YouTube / Twitch / TikTok) | |||
========================================= */ | |||
.rtp-platform{ | |||
position:relative; | |||
margin:18px 0; | |||
border-radius:18px; | |||
border:1px solid rgba(120,90,255,.22); | |||
background:linear-gradient(180deg, rgba(120,90,255,.12), rgba(120,90,255,.06)); | |||
box-shadow:0 14px 30px rgba(0,0,0,.06); | |||
overflow:hidden; | |||
transition:transform .12s ease, box-shadow .12s ease, background .12s ease; | |||
} | |||
/* barrinha lateral suave */ | |||
.rtp-platform::before{ | |||
content:""; | |||
position:absolute; | |||
left:0; top:0; bottom:0; | |||
width:6px; | |||
background:linear-gradient(180deg, rgba(120,90,255,.70), rgba(120,90,255,.18)); | |||
opacity:.55; | |||
} | |||
.rtp-platform:hover{ | |||
transform:translateY(-1px); | |||
box-shadow:0 18px 40px rgba(0,0,0,.08); | |||
} | |||
/* header */ | |||
.rtp-platform > .rtp-platform-head{ | |||
display:flex; | |||
align-items:center; | |||
padding:18px 18px 18px 22px; | |||
padding-right:150px; /* espaço pro botão Mostrar */ | |||
box-sizing:border-box; | |||
} | |||
.rtp-platform-left{ | |||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
min-width:0; | |||
} | |||
/* ícone */ | |||
.rtp-platform-icon{ | |||
width:44px; | |||
height:44px; | |||
border-radius:14px; | |||
display:flex; | |||
align-items:center; | |||
justify-content:center; | |||
background:rgba(120,90,255,.14); | |||
border:1px solid rgba(120,90,255,.22); | |||
font-size:18px; | |||
line-height:1; | |||
} | |||
/* títulos */ | |||
.rtp-platform-titles{ min-width:0; } | |||
.rtp-platform-name{ | |||
font-weight:900; | |||
font-size:20px; | |||
line-height:1.1; | |||
} | |||
.rtp-platform-desc{ | |||
margin-top:3px; | |||
font-size:13px; | |||
opacity:.75; | |||
} | |||
/* conteúdo expandido */ | |||
.rtp-platform > .mw-collapsible-content{ | |||
padding:0 18px 18px 22px; | |||
} | |||
.rtp-platform > .mw-collapsible-content::before{ | |||
content:""; | |||
display:block; | |||
height:1px; | |||
background:rgba(120,90,255,.18); | |||
margin:0 0 14px 0; | |||
} | |||
/* ========================================= | |||
Toggle Mostrar/Ocultar (MediaWiki) | |||
========================================= */ | |||
.rtp-platform > .mw-collapsible-toggle{ | |||
position:absolute !important; | |||
top:50%; | |||
right:14px; | |||
transform:translateY(-50%); | |||
float:none !important; | |||
margin:0 !important; | |||
z-index:5; | |||
} | |||
/* remove os colchetes [ ] */ | |||
.rtp-platform .mw-collapsible-toggle-bracket{ | |||
display:none !important; | |||
} | |||
/* botão */ | |||
.rtp-platform > .mw-collapsible-toggle a{ | |||
display:inline-flex; | |||
align-items:center; | |||
gap:8px; | |||
padding:10px 14px; | |||
border-radius:999px; | |||
background:rgba(120,90,255,.14); | |||
border:1px solid rgba(120,90,255,.24); | |||
font-weight:900; | |||
text-decoration:none !important; | |||
white-space:nowrap; | |||
transition:transform .12s ease, background .12s ease; | |||
} | |||
.rtp-platform > .mw-collapsible-toggle a:hover{ | |||
transform:translateY(-1px); | |||
background:rgba(120,90,255,.18); | |||
} | |||
/* opcional: dá um "ar" extra pro grid dentro */ | |||
.rtp-platform .rtp-grid{ | |||
margin-top:6px; | |||
} | |||
/* Lista simples de criadores dentro do collapsible */ | |||
.rtp-list{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:10px; | |||
} | |||
.rtp-row{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
gap:12px; | |||
padding:12px 14px; | |||
border-radius:14px; | |||
background:rgba(255,255,255,.55); | |||
border:1px solid rgba(120,90,255,.18); | |||
box-shadow:0 10px 20px rgba(0,0,0,.04); | |||
} | |||
.rtp-row-name{ | |||
font-weight:900; | |||
font-size:14px; | |||
white-space:nowrap; | |||
overflow:hidden; | |||
text-overflow:ellipsis; | |||
} | |||
.rtp-row-links{ | |||
display:flex; | |||
gap:8px; | |||
flex-wrap:wrap; | |||
justify-content:flex-end; | |||
} | |||
/* deixa os links com cara de botão sem precisar usar rtp-btn */ | |||
.rtp-row-links a{ | |||
display:inline-flex; | |||
align-items:center; | |||
padding:7px 10px; | |||
border-radius:999px; | |||
background:rgba(120,90,255,.12); | |||
border:1px solid rgba(120,90,255,.22); | |||
text-decoration:none !important; | |||
font-weight:800; | |||
font-size:12px; | |||
} | |||
.rtp-row-links a:hover{ | |||
background:rgba(120,90,255,.18); | |||
} | |||
/* =============================== | |||
Criadores Parceiros - Benefícios (clean) | |||
=============================== */ | |||
.criadores-page .rtp-benefits{ | |||
display:grid; | |||
grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); | |||
gap:18px; | |||
margin:14px 0 6px; | |||
} | |||
.criadores-page .rtp-box{ | |||
position:relative; | |||
overflow:hidden; | |||
border-radius:18px; | |||
padding:0; /* título vira barra, então o padding vai no conteúdo */ | |||
border:1px solid rgba(120,90,255,.22); | |||
background:linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.04)); | |||
box-shadow:0 10px 26px rgba(20,10,60,.10); | |||
transition:transform .18s ease, box-shadow .18s ease; | |||
} | |||
.criadores-page .rtp-box.is-creator{ --rtp-acc:120,90,255; } | |||
.criadores-page .rtp-box.is-viewer { --rtp-acc:70,170,255; } | |||
.criadores-page .rtp-box.is-creator{ | |||
border-color:rgba(var(--rtp-acc), .24); | |||
background:linear-gradient(180deg, rgba(var(--rtp-acc), .11), rgba(var(--rtp-acc), .04)); | |||
} | |||
.criadores-page .rtp-box.is-viewer{ | |||
border-color:rgba(var(--rtp-acc), .22); | |||
background:linear-gradient(180deg, rgba(var(--rtp-acc), .10), rgba(var(--rtp-acc), .03)); | |||
} | |||
.criadores-page .rtp-box:hover{ | |||
transform:translateY(-2px); | |||
box-shadow:0 14px 34px rgba(20,10,60,.14); | |||
} | |||
/* Título como “barra” do card */ | |||
.criadores-page .rtp-box-title{ | |||
padding:14px 16px; | |||
font-weight:900; | |||
font-size:1.05rem; | |||
border-bottom:1px solid rgba(var(--rtp-acc), .18); | |||
background:linear-gradient(90deg, rgba(var(--rtp-acc), .16), rgba(var(--rtp-acc), .06)); | |||
} | |||
/* Conteúdo interno */ | |||
.criadores-page .rtp-box .rtp-list{ | |||
list-style:disc; | |||
margin:0; | |||
padding:14px 22px 16px 38px; /* recuo bonito pro bullet padrão */ | |||
} | |||
.criadores-page .rtp-box .rtp-list li{ | |||
margin:10px 0; | |||
line-height:1.35; | |||
} | |||
/* Remove qualquer estilo antigo de “check” caso exista no seu CSS anterior */ | |||
.criadores-page .rtp-list li::before{ | |||
content:none !important; | |||
} | |||
.rtp-platform-head .rtp-platform-left{ | |||
display:flex; | |||
align-items:center; /* centraliza verticalmente */ | |||
gap:14px; | |||
} | |||
.rtp-platform-head .rtp-platform-left{ | |||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
} | |||
/* Head vira flex pra alinhar conteúdo + botão de mostrar */ | |||
.rtp-platform-head{ | |||
display:flex; | |||
align-items:center; | |||
justify-content:space-between; | |||
} | |||
/* Lado esquerdo vira flex: o ::before entra como 1º item */ | |||
.rtp-platform-left{ | |||
display:flex; | |||
align-items:center; | |||
gap:14px; | |||
} | |||
/* Caixa do ícone (NÃO absoluto, então nunca cobre texto) */ | |||
.rtp-platform-left::before{ | |||
content:""; | |||
width:64px; | |||
height:64px; | |||
flex:0 0 64px; | |||
border-radius:16px; | |||
border:1px solid rgba(120,90,255,.25); | |||
background-color:rgba(255,255,255,.55); | |||
background-repeat:no-repeat; | |||
background-position:center; | |||
background-size:52px 52px; | |||
} | |||
/* YouTube (usa icon_ytb1.png) */ | |||
.rtp-platform.is-yt .rtp-platform-left::before{ | |||
background-image: | |||
url("/index.php/Special:Redirect/file/icon_ytb2.png"), | |||
url("/w/index.php/Special:Redirect/file/icon_ytb2.png"), | |||
url("/index.php/Special:FilePath/icon_ytb2.png"), | |||
url("/w/index.php/Special:FilePath/icon_ytb2.png"); | |||
} | |||
/* Twitch (troque o nome do arquivo se necessário) */ | |||
.rtp-platform.is-tw .rtp-platform-left::before{ | |||
background-image: | |||
url("/index.php/Special:Redirect/file/icon_twitch2.png"), | |||
url("/w/index.php/Special:Redirect/file/icon_twitch2.png"), | |||
url("/index.php/Special:FilePath/icon_twitch2.png"), | |||
url("/w/index.php/Special:FilePath/icon_twitch2.png"); | |||
} | |||
/* ========================================= | |||
Criadores Parceiros — Toggle Mostrar/Ocultar | |||
========================================= */ | |||
/* o card vira referência pro botão */ | |||
.rtp-platform{ | |||
position: relative; | |||
} | |||
/* dá espaço à direita pra não encobrir o conteúdo do header */ | |||
.rtp-platform .rtp-platform-head{ | |||
padding-right: 150px; | |||
} | |||
/* botão "Mostrar ▸ / Ocultar ▾" */ | |||
.rtp-platform .mw-collapsible-toggle{ | |||
position: absolute; | position: absolute; | ||
width: | top: 50%; | ||
box- | right: 18px; | ||
transform: translateY(-50%); | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 6px; | |||
padding: 8px 12px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(120,90,255,.35); | |||
background: rgba(120,90,255,.10); | |||
font-weight: 800; | |||
font-size: 13px; | |||
letter-spacing: .2px; | |||
text-decoration: none !important; | |||
box-shadow: 0 10px 22px rgba(90,60,255,.10); | |||
} | |||
/* cor do link dentro do toggle */ | |||
.rtp-platform .mw-collapsible-toggle a{ | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
/* remove os colchetes [ ] padrão do MediaWiki */ | |||
.rtp-platform .mw-collapsible-toggle-bracket{ | |||
display: none; | |||
} | |||
/* hover/active */ | |||
.rtp-platform .mw-collapsible-toggle:hover{ | |||
background: rgba(120,90,255,.16); | |||
transform: translateY(-50%) scale(1.03); | |||
} | |||
.rtp-platform .mw-collapsible-toggle:active{ | |||
transform: translateY(-50%) scale(.99); | |||
} | |||
/* ========================================= | |||
RTP Platform — fix do toggle (Mostrar/Ocultar) | |||
Não sobrepor conteúdo quando expandir | |||
========================================= */ | |||
/* Grid: [header] [toggle] na 1ª linha, conteúdo na 2ª */ | |||
.rtp-platform.mw-collapsible{ | |||
display: grid; | |||
grid-template-columns: 1fr auto; | |||
grid-template-rows: auto auto; | |||
row-gap: 14px; /* espaço entre header e conteúdo */ | |||
} | |||
/* Header fica na coluna 1 */ | |||
.rtp-platform .rtp-platform-head{ | |||
grid-column: 1; | |||
grid-row: 1; | |||
align-self: center; | |||
margin: 0 !important; | |||
} | |||
/* Conteúdo ocupa a linha inteira abaixo */ | |||
.rtp-platform .mw-collapsible-content{ | |||
grid-column: 1 / -1; | |||
grid-row: 2; | |||
} | |||
/* O toggle (MW injeta como filho direto do mw-collapsible) vai pra coluna 2 */ | |||
.rtp-platform.mw-collapsible > .mw-collapsible-toggle{ | |||
grid-column: 2; | |||
grid-row: 1; | |||
align-self: center; | |||
justify-self: end; | |||
/* mata o comportamento padrão do MW */ | |||
float: none !important; | |||
position: relative !important; | |||
margin: 0 18px auto 18px !important; | |||
/* visual mais destacado */ | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 6px; | |||
padding: 8px 12px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(120,90,255,.35); | |||
background: rgba(120,90,255,.10); | |||
font-weight: 800; | |||
font-size: 13px; | |||
letter-spacing: .2px; | |||
box-shadow: 0 10px 22px rgba(90,60,255,.10); | |||
} | |||
.rtp-platform.mw-collapsible > .mw-collapsible-toggle a{ | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | |||
/* remove os colchetes [ ] padrão */ | |||
.rtp-platform.mw-collapsible > .mw-collapsible-toggle .mw-collapsible-toggle-bracket{ | |||
display: none !important; | |||
} | |||
/* ================================ | |||
RagnaTrue - Top 3 Global (Tabela) | |||
================================ */ | |||
.rt-rewards-table.rt-top3 th, | |||
.rt-rewards-table.rt-top3 td{ | |||
vertical-align: middle; | |||
} | |||
/* Centraliza Colocação + Recompensa */ | |||
.rt-rewards-table.rt-top3 th:nth-child(1), | |||
.rt-rewards-table.rt-top3 td:nth-child(1), | |||
.rt-rewards-table.rt-top3 th:nth-child(2), | |||
.rt-rewards-table.rt-top3 td:nth-child(2){ | |||
text-align: center; | |||
} | |||
/* Pill da colocação (simples e limpo) */ | |||
.rt-top3 .rt-place-pill{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 6px 12px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
letter-spacing: .2px; | |||
border: 1px solid rgba(120,90,255,.28); | |||
background: rgba(120,90,255,.08); | |||
} | |||
/* Card da recompensa (tema roxo claro) */ | |||
.rt-top3 .rt-rewardbox{ | |||
background: linear-gradient(180deg, | |||
rgba(120,90,255,.08), | |||
rgba(120,90,255,.03) | |||
); | |||
border: 1px solid rgba(120,90,255,.20); | |||
box-shadow: 0 10px 22px rgba(40,30,90,.07); | |||
} | |||
.rt-top3 .rt-reward-money{ | |||
font-size: 18px; | |||
font-weight: 900; | |||
} | |||
.rt-top3 .rt-reward-extra{ | |||
font-weight: 700; | |||
opacity: .9; | |||
} | |||
/* Coluna do vencedor (empilha e centraliza bonitinho) */ | |||
.rt-top3 .rt-winner{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 8px; | |||
text-align: center; | |||
} | |||
.rt-top3 .rt-winner-hint{ | |||
font-size: 12px; | |||
opacity: .75; | |||
} | |||
.rt-top3 .rt-winner-name{ | |||
font-weight: 900; | |||
} | |||
.rt-top3 .rt-winner img, | |||
.rt-top3 .rt-winner .rt-winner-sprite{ | |||
max-width: 90px; | |||
height: auto; | |||
image-rendering: pixelated; | |||
} | |||
/* ================================ | |||
Top 3 - cores (Ouro/Prata/Bronze) | |||
================================ */ | |||
/* Base (caso esqueça de pôr a variação) */ | |||
.rt-top3 .rt-place-pill{ | |||
color: #2b1b00; | |||
} | |||
/* OURO (premium mais escuro) */ | |||
.rt-top3 .rt-place-pill.is-gold{ | |||
color:#1b1407; | |||
border:1px solid rgba(140, 96, 18, .85); | |||
background: linear-gradient( | |||
180deg, | |||
rgba(255, 239, 196, .95) 0%, | |||
rgba(229, 196, 110, .92) 42%, | |||
rgba(167, 118, 30, .90) 78%, | |||
rgba(122, 79, 0, .86) 100% | |||
); | |||
box-shadow: | |||
0 0 0 2px rgba(255,255,255,.65), | |||
0 10px 22px rgba(120, 80, 10, .16), | |||
inset 0 1px 0 rgba(255,255,255,.85), | |||
inset 0 -1px 0 rgba(70, 40, 0, .22); | |||
} | |||
/* PRATA (já no padrão “contorno melhor”) */ | |||
.rt-top3 .rt-place-pill.is-silver{ | |||
color:#101826; | |||
border:1px solid rgba(120,140,175,.80); | |||
background: linear-gradient( | |||
180deg, | |||
rgba(235,242,255,.95) 0%, | |||
rgba(214,226,245,.92) 55%, | |||
rgba(198,213,236,.88) 100% | |||
); | |||
box-shadow: | |||
0 0 0 2px rgba(255,255,255,.70), | |||
0 10px 22px rgba(55, 80, 120, .12), | |||
inset 0 1px 0 rgba(255,255,255,.85), | |||
inset 0 -1px 0 rgba(70, 95, 140, .18); | |||
} | |||
/* BRONZE (cobre/bronze elegante, sem “laranjão”) */ | |||
.rt-top3 .rt-place-pill.is-bronze{ | |||
color:#1f120a; | |||
border:1px solid rgba(144, 84, 52, .78); | |||
background: linear-gradient( | |||
180deg, | |||
rgba(255, 231, 220, .95) 0%, | |||
rgba(227, 171, 139, .92) 45%, | |||
rgba(176, 105, 70, .90) 80%, | |||
rgba(120, 63, 34, .86) 100% | |||
); | |||
box-shadow: | |||
0 0 0 2px rgba(255,255,255,.65), | |||
0 10px 22px rgba(120, 70, 40, .14), | |||
inset 0 1px 0 rgba(255,255,255,.82), | |||
inset 0 -1px 0 rgba(70, 30, 10, .20); | |||
} | |||
/* ================================ | |||
Valor em R$ (pill premium) | |||
================================ */ | |||
.rt-reward-money{ | |||
display:inline-flex; | |||
align-items:center; | |||
justify-content:center; | |||
padding:6px 12px; | |||
border-radius:999px; | |||
font-weight:900; | |||
letter-spacing:.2px; | |||
line-height:1; | |||
font-variant-numeric: tabular-nums; | |||
/* texto ouro/âmbar (legível no lilás) */ | |||
color:#6f4200; | |||
text-shadow: | |||
0 1px 0 rgba(255,255,255,.75), | |||
0 6px 14px rgba(60,35,0,.18); | |||
/* pill champagne */ | |||
background: linear-gradient(180deg, | |||
rgba(255,255,255,.92), | |||
rgba(255,246,224,.78) | |||
); | |||
border: 1px solid rgba(176,118,10,.42); | |||
box-shadow: | |||
inset 0 1px 0 rgba(255,255,255,.95), | |||
inset 0 -1px 0 rgba(110,70,0,.10), | |||
0 10px 22px rgba(40,30,90,.10); | |||
} | |||
/* Visual do Top (gif) com cantos arredondados */ | |||
.rtp-visual-card{ | |||
border-radius: 16px; /* ajuste aqui */ | |||
overflow: hidden; /* ESSENCIAL pra recortar o gif */ | |||
} | |||
/* imagem do arquivo (MediaWiki) */ | |||
.rtp-visual-card .rtp-sprite, | |||
.rtp-visual-card .mw-file-element{ | |||
border-radius: 16px; /* mesmo valor do card */ | |||
display: block; /* evita “bordinha/folga” */ | |||
} | |||
/* centraliza toda a premiação dentro da célula */ | |||
.rt-reward-cell{ | |||
text-align: center; | |||
vertical-align: middle; | |||
} | |||
.rt-reward-center{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 6px; | |||
} | |||
/* ========================================= | |||
Pódio / Top3 — Recompensa (Pill + Visual) lado a lado | |||
========================================= */ | |||
.rt-rewards-table.rt-top3 tr > td:nth-child(2){ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 16px; | |||
flex-wrap: nowrap; /* tenta manter na mesma linha */ | |||
padding: 18px 14px; | |||
text-align: center; | |||
font-size: 0; /* mata o "+" e quebras soltas (texto fora de div) */ | |||
line-height: 0; | |||
} | |||
/* some com <br> que sobra em algumas linhas */ | |||
.rt-rewards-table.rt-top3 tr > td:nth-child(2) br{ | |||
display: none; | |||
} | } | ||
. | /* garante que os 2 blocos não ocupem 100% de largura */ | ||
.rt-rewards-table.rt-top3 tr > td:nth-child(2) .rt-reward-money, | |||
.rt-rewards-table.rt-top3 tr > td:nth-child(2) .rtp-visual-center{ | |||
flex: 0 0 auto; | |||
width: auto !important; | width: auto !important; | ||
margin: 0 !important; | |||
} | |||
/* restaura tamanhos de fonte (porque o td está com font-size:0) */ | |||
.rt-rewards-table.rt-top3 .rt-reward-money{ | |||
font-size: 18px; | |||
line-height: 1; | |||
} | |||
.rt-rewards-table.rt-top3 .rtp-visual-foot{ | |||
font-size: 13px; | |||
line-height: 1.25; | |||
} | |||
/* se algum CSS seu estiver forçando a área do visual a quebrar linha */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-center{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
} | |||
/* ========================================= | |||
Legenda do visual: mais respiro + não cortar a 1ª letra | |||
========================================= */ | |||
/* Se você usa a legenda no seu <div class="rtp-visual-foot"> */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-foot{ | |||
margin-top: 10px !important; /* afasta do gif */ | |||
padding: 0 12px 2px !important; /* evita "comer" a 1ª letra */ | |||
line-height: 1.25 !important; | |||
text-align: center; | |||
display: inline-block; | |||
} | |||
/* Se você usa caption no próprio [[File:...|...|Asas...]] (vira .thumbcaption) */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-card .thumbcaption{ | |||
margin-top: 10px !important; | |||
padding: 0 12px 2px !important; | |||
line-height: 1.25 !important; | |||
text-align: center; | |||
} | |||
/* Evita qualquer recorte por overflow de wrapper do thumb */ | |||
.rt-rewards-table.rt-top3 .rtp-visual-card, | |||
.rt-rewards-table.rt-top3 .rtp-visual-card .thumbinner{ | |||
overflow: visible !important; | |||
} | |||
/* Recompensa inline: pill + "+" + visual */ | |||
.rt-top3 td.rt-reward-cell .rt-reward-inline{ | |||
display: flex; | |||
align-items: center; /* centraliza vertical */ | |||
justify-content: center; /* centraliza no meio da coluna */ | |||
gap: 12px; | |||
flex-wrap: wrap; /* no mobile quebra bonito */ | |||
} | |||
/* "+" premium (combina com o dourado do money) */ | |||
.rt-top3 .rt-reward-plus{ | |||
position: relative; | |||
width: 24px; | |||
height: 24px; | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
border-radius: 999px; | |||
line-height: 1; | |||
font-weight: 1000; | |||
font-size: 14px; | |||
color: #6b3f00; | |||
background: linear-gradient(180deg, | |||
rgba(255,255,255,.95), | |||
rgba(255,242,220,.85) | |||
); | |||
border: 1px solid rgba(166,110,0,.48); | |||
box-shadow: | |||
inset 0 1px 0 rgba(255,255,255,.95), | |||
0 8px 16px rgba(40,30,90,.10); | |||
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; | |||
transform: translateZ(0); | |||
} | |||
/* “Conectores” laterais */ | |||
.rt-top3 .rt-reward-plus::before, | |||
.rt-top3 .rt-reward-plus::after{ | |||
content:""; | |||
position:absolute; | |||
top:50%; | |||
width: 12px; | |||
height: 1px; | |||
transform: translateY(-50%); | |||
opacity: .9; | |||
background: linear-gradient(90deg, | |||
rgba(166,110,0,0), | |||
rgba(166,110,0,.55), | |||
rgba(166,110,0,0) | |||
); | |||
} | |||
.rt-top3 .rt-reward-plus::before{ left: -14px; } | |||
.rt-top3 .rt-reward-plus::after { right: -14px; } | |||
.rt-top3 .rt-reward-plus:hover{ | |||
transform: translateY(-1px); | |||
box-shadow: | |||
inset 0 1px 0 rgba(255,255,255,.95), | |||
0 10px 20px rgba(40,30,90,.14); | |||
filter: saturate(1.05); | |||
} | |||
.rt-top3 td.rt-reward-cell .rt-reward-inline{ | |||
gap: 14px; /* um pouco mais “respirado” */ | |||
flex-wrap: nowrap; /* mantém tudo na mesma linha */ | |||
} | |||
@media (max-width: 720px){ | |||
.rt-top3 td.rt-reward-cell .rt-reward-inline{ | |||
flex-wrap: wrap; /* no mobile ele quebra bonitinho */ | |||
justify-content: center; | |||
} | |||
} | |||
/* ========================================= | |||
FIX: legenda do visual “comendo” letras | |||
(Top 1 Classe + Expandidas + Top3) | |||
========================================= */ | |||
/* garante que nada corte a legenda */ | |||
.rtp-visual-card{ | |||
overflow: visible !important; | |||
} | |||
/* legenda (texto abaixo do gif) com respiro e sem clipping */ | |||
.rtp-visual-card .rtp-visual-foot{ | |||
display: block; | |||
margin: 10px auto 0 !important; /* afasta do gif */ | |||
padding: 3px 12px 6px !important; /* evita cortar topo/baixo das letras */ | |||
line-height: 1.25 !important; /* MUITO importante pro “A” não sumir */ | |||
text-indent: 0 !important; | |||
overflow: visible !important; | |||
white-space: normal; | |||
word-break: break-word; | |||
} | |||
/* se algum reset do bloco de recompensa estiver agressivo */ | |||
.rt-reward-center, | |||
.rt-reward-cell{ | |||
line-height: 1.25; | |||
} | |||
/* ================================ | |||
Pets - Tema roxo claro (EV style) | |||
Escopo: .pet-page-light | |||
================================ */ | |||
.pet-page-light{ | |||
--pet-ink: #1d1536; | |||
--pet-muted:#5c527a; | |||
--pet-line: rgba(120,90,255,.22); | |||
--pet-soft: rgba(120,90,255,.10); | |||
--pet-soft2: rgba(120,90,255,.06); | |||
} | |||
/* Intro box */ | |||
.pet-page-light .pet-intro{ | |||
max-width: 980px; | |||
margin: 10px auto 18px; | |||
padding: 14px 16px; | |||
border-radius: 18px; | |||
border: 1px solid var(--pet-line); | |||
background: linear-gradient(180deg, rgba(120,90,255,.12), rgba(120,90,255,.05)); | |||
box-shadow: 0 12px 26px rgba(40,30,90,.08); | |||
color: var(--pet-ink); | |||
} | |||
.pet-page-light .pet-muted{ color: var(--pet-muted); } | |||
.pet-page-light .pet-chips{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap:10px; | |||
margin-top:10px; | |||
} | |||
.pet-page-light .pet-chip{ | |||
display:inline-flex; | |||
align-items:center; | |||
padding:6px 10px; | |||
border-radius:999px; | |||
font-weight:900; | |||
font-size:12px; | |||
color: var(--pet-ink); | |||
background: rgba(255,255,255,.70); | |||
border: 1px solid rgba(120,90,255,.18); | |||
} | |||
/* Categorias grid */ | |||
.pet-page-light .pet-cats-grid{ | |||
max-width: 980px; | |||
margin: 0 auto 10px; | |||
display:grid; | |||
gap:14px; | |||
grid-template-columns: repeat(4, minmax(0, 1fr)); | |||
} | |||
@media (max-width: 980px){ | |||
.pet-page-light .pet-cats-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } | |||
} | |||
@media (max-width: 520px){ | |||
.pet-page-light .pet-cats-grid{ grid-template-columns: 1fr; } | |||
} | |||
.pet-page-light .pet-cat-card{ | |||
padding: 14px; | |||
border-radius: 18px; | |||
border: 1px solid var(--pet-line); | |||
background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55)); | |||
box-shadow: 0 12px 26px rgba(40,30,90,.07); | |||
position: relative; | |||
overflow:hidden; | |||
} | |||
/* filet top premium */ | |||
.pet-page-light .pet-cat-card::before{ | |||
content:""; | |||
position:absolute; | |||
left:0; right:0; top:0; | |||
height:3px; | |||
background: linear-gradient(90deg, rgba(120,90,255,.95), rgba(180,140,255,.95)); | |||
opacity:.9; | |||
} | |||
.pet-page-light .pet-cat-title{ | |||
font-weight:1000; | |||
color: var(--pet-ink); | |||
font-size: 16px; | |||
margin: 2px 0 10px; | |||
} | |||
/* KV estilo “clean” */ | |||
.pet-page-light .pet-kv{ | |||
display:grid; | |||
grid-template-columns: 1fr auto; | |||
gap:8px 10px; | |||
} | |||
.pet-page-light .pet-kv .k{ | |||
color: var(--pet-muted); | |||
font-weight: 700; | |||
padding: 8px 10px; | |||
border-radius: 14px; | |||
background: rgba(120,90,255,.06); | |||
border: 1px solid rgba(120,90,255,.14); | |||
} | |||
.pet-page-light .pet-kv .v{ | |||
color: var(--pet-ink); | |||
font-weight: 1000; | |||
padding: 8px 10px; | |||
border-radius: 14px; | |||
background: rgba(255,255,255,.70); | |||
border: 1px solid rgba(120,90,255,.14); | |||
} | |||
/* Painéis (refino/grade) */ | |||
.pet-page-light .pet-panel{ | |||
max-width: 980px; | |||
margin: 0 auto 12px; | |||
padding: 14px 16px; | |||
border-radius: 18px; | |||
border: 1px solid var(--pet-line); | |||
background: linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.04)); | |||
box-shadow: 0 12px 26px rgba(40,30,90,.08); | |||
} | |||
.pet-page-light .pet-panel-title{ | |||
font-weight:1000; | |||
color: var(--pet-ink); | |||
margin-bottom: 8px; | |||
} | |||
/* Tabelas mais leves */ | |||
.pet-page-light .pet-refine-table{ | |||
width:100%; | |||
margin-top:12px; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 16px; | |||
overflow:hidden; | |||
border: 1px solid rgba(120,90,255,.20); | |||
background: rgba(255,255,255,.58); | |||
} | |||
.pet-page-light .pet-refine-table th{ | |||
padding: 10px 12px; | |||
text-align:center; | |||
font-weight:1000; | |||
color: var(--pet-ink); | |||
background: rgba(120,90,255,.10); | |||
border-bottom: 1px solid rgba(120,90,255,.18); | |||
} | |||
.pet-page-light .pet-refine-table td{ | |||
padding: 10px 12px; | |||
text-align:center; | |||
color: var(--pet-muted); | |||
border-bottom: 1px solid rgba(120,90,255,.14); | |||
} | |||
.pet-page-light .pet-refine-table tr:last-child td{ border-bottom:0; } | |||
/* Lista grade */ | |||
.pet-page-light .pet-grade-list{ | |||
margin: 12px 0 0; | |||
padding-left: 18px; | |||
color: var(--pet-muted); | |||
} | |||
/* Listas (só espaçamento, não mexe no que você já gostou) */ | |||
.pet-page-light .pet-lists{ | |||
max-width: 980px; | |||
margin: 0 auto; | |||
display:grid; | |||
gap:14px; | |||
} | |||
/* ========================================================= | |||
PETS — Tema Roxo Claro (ev-h) | |||
Escopo seguro: .petlite-page | |||
========================================================= */ | |||
.petlite-page{ | |||
--p-accent: rgba(120,90,255,.22); | |||
--p-accent2: rgba(120,90,255,.10); | |||
--p-ink: rgba(35,25,95,.92); | |||
--p-muted: rgba(55,45,115,.78); | |||
--p-card: rgba(255,255,255,.72); | |||
--p-shadow: 0 10px 22px rgba(40,30,90,.08); | |||
} | |||
/* sprite do topo */ | |||
.petlite-page .petlite-sprite{ | |||
margin: 6px auto 10px; | |||
image-rendering: pixelated; | |||
} | |||
/* HERO */ | |||
.petlite-page .petlite-hero{ | |||
max-width: 920px; | |||
margin: 0 auto 18px; | |||
padding: 18px 20px; | |||
border-radius: 18px; | |||
border: 1px solid var(--p-accent); | |||
background: linear-gradient(180deg, var(--p-accent2), rgba(120,90,255,.05)); | |||
box-shadow: var(--p-shadow); | |||
} | |||
.petlite-page .petlite-hero-h{ | |||
font-weight: 900; | |||
font-size: 20px; | |||
letter-spacing: .2px; | |||
margin-bottom: 6px; | |||
color: var(--p-ink); | |||
} | |||
.petlite-page .petlite-muted{ | |||
color: var(--p-muted); | |||
margin: 0; | |||
line-height: 1.55; | |||
} | |||
.petlite-page .petlite-chips{ | |||
display:flex; | |||
flex-wrap:wrap; | |||
gap: 8px; | |||
margin-top: 12px; | |||
} | |||
.petlite-page .petlite-chip{ | |||
display:inline-flex; | |||
align-items:center; | |||
padding: 6px 10px; | |||
border-radius: 999px; | |||
font-size: 12px; | |||
font-weight: 900; | |||
color: var(--p-ink); | |||
background: rgba(120,90,255,.08); | |||
border: 1px solid var(--p-accent); | |||
} | |||
/* GRID CATEGORIAS */ | |||
.petlite-page .petlite-grid{ | |||
max-width: 920px; | |||
margin: 0 auto 16px; | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); | |||
gap: 14px; | |||
} | |||
.petlite-page .petlite-cat{ | |||
padding: 14px 14px 12px; | |||
border-radius: 16px; | |||
border: 1px solid var(--p-accent); | |||
background: var(--p-card); | |||
box-shadow: var(--p-shadow); | |||
} | |||
.petlite-page .petlite-cat-h{ | |||
font-weight: 1000; | |||
color: var(--p-ink); | |||
margin-bottom: 10px; | |||
letter-spacing: .2px; | |||
} | |||
.petlite-page .petlite-kv{ | |||
display:grid; | |||
grid-template-columns: 1fr auto; | |||
gap: 8px 10px; | |||
align-items:center; | |||
} | |||
.petlite-page .petlite-kv .k{ | |||
color: var(--p-muted); | |||
font-weight: 700; | |||
} | |||
.petlite-page .petlite-kv .v{ | |||
color: var(--p-ink); | |||
font-weight: 1000; | |||
} | |||
/* PAINÉIS (Refino / Grade) */ | |||
.petlite-page .petlite-panel{ | |||
max-width: 920px; | |||
margin: 0 auto 16px; | |||
padding: 16px 16px 14px; | |||
border-radius: 18px; | |||
border: 1px solid var(--p-accent); | |||
background: linear-gradient(180deg, rgba(120,90,255,.08), rgba(255,255,255,.62)); | |||
box-shadow: var(--p-shadow); | |||
} | |||
.petlite-page .petlite-panel-h{ | |||
font-weight: 1000; | |||
color: var(--p-ink); | |||
margin: 0 0 8px; | |||
letter-spacing: .2px; | |||
} | |||
/* TABELAS (claras, sem “darkão”) */ | |||
.petlite-page table.petlite-table{ | |||
width: 100%; | |||
margin-top: 12px; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border-radius: 16px; | |||
overflow: hidden; | |||
border: 1px solid var(--p-accent); | |||
background: rgba(255,255,255,.70); | |||
} | |||
.petlite-page table.petlite-table th{ | |||
padding: 10px; | |||
text-align: center; | |||
font-weight: 1000; | |||
color: #fff; | |||
background: linear-gradient(180deg, rgba(120,90,255,.78), rgba(120,90,255,.58)); | |||
} | |||
.petlite-page table.petlite-table td{ | |||
padding: 10px; | |||
text-align: center; | |||
color: var(--p-ink); | |||
background: rgba(120,90,255,.05); | |||
border-top: 1px solid rgba(120,90,255,.14); | |||
} | |||
.petlite-page table.petlite-table tr:nth-child(even) td{ | |||
background: rgba(120,90,255,.08); | |||
} | |||
.petlite-page .petlite-notes{ | |||
margin: 10px 0 0; | |||
padding-left: 18px; | |||
color: var(--p-muted); | |||
} | |||
.petlite-page .petlite-notes li{ margin: 6px 0; } | |||
/* TABELA LISTA DE PETS (simples e leve) */ | |||
.petlite-page table.petlite-list-table{ | |||
width: 100%; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
} | |||
.petlite-page table.petlite-list-table th{ | |||
padding: 10px; | |||
text-align: left; | |||
color: var(--p-ink); | |||
font-weight: 1000; | |||
border-bottom: 1px solid rgba(120,90,255,.18); | |||
} | |||
.petlite-page table.petlite-list-table td{ | |||
padding: 12px 10px; | |||
vertical-align: middle; | |||
border-bottom: 1px solid rgba(120,90,255,.12); | |||
} | |||
.petlite-page table.petlite-list-table img{ | |||
image-rendering: pixelated; | |||
} | |||
/* ================================ | |||
Mascotes - ajuste premium nos cards do bp-exp-summary | |||
(isolado pra não afetar Passe) | |||
================================ */ | |||
.petcats-sum .bp-exp-card{ | |||
border: 1px solid rgba(124,92,255,.22); | |||
background: linear-gradient(180deg, rgba(124,92,255,.08), rgba(255,255,255,.86)); | |||
box-shadow: 0 14px 34px rgba(40,30,90,.10); | |||
} | } | ||
. | /* título maior + linha divisória */ | ||
.petcats-sum .bp-exp-label{ | |||
font-size: 14px; /* aumenta */ | |||
letter-spacing: .6px; | |||
text-transform: uppercase; | |||
color: #5b2cff; | |||
padding-bottom: 10px; | |||
margin-bottom: 10px; | |||
border-bottom: 1px solid rgba(124,92,255,.18); | |||
} | |||
/* se quiser uma linha mais “premium”, troca o border-bottom acima por isso: | |||
.petcats-sum .bp-exp-label{ | |||
... (mantém tudo) | |||
border-bottom: none; | |||
position: relative; | |||
} | |||
.petcats-sum .bp-exp-label::after{ | |||
content:""; | |||
position:absolute; | |||
left:0; right:0; | |||
bottom:-2px; | |||
height:1px; | |||
background: linear-gradient(90deg, | |||
rgba(124,92,255,0), | |||
rgba(124,92,255,.35), | |||
rgba(124,92,255,0)); | |||
} | |||
*/ | |||
/* espaçamento dos itens */ | |||
.petcats-sum .bp-exp-value{ | |||
margin-top: 6px; | |||
} | |||
/* Clique-para-copiar (usado no /navi etc.) */ | |||
.rt-copycode{ | |||
cursor: pointer; | |||
user-select: none; | |||
display: inline-block; | |||
padding: 2px 8px; | |||
border-radius: 10px; | |||
border: 1px solid rgba(140, 120, 255, .35); | |||
background: rgba(140, 120, 255, .08); | |||
transition: transform .12s ease, box-shadow .12s ease, background .12s ease; | |||
} | |||
.rt-copycode:hover{ | |||
background: rgba(140, 120, 255, .12); | |||
box-shadow: 0 8px 18px rgba(70, 40, 160, .12); | |||
transform: translateY(-1px); | |||
} | |||
.rt-copycode.is-copied{ | |||
box-shadow: 0 10px 24px rgba(70, 40, 160, .18); | |||
} | |||
.rt-copycode.is-copied::after{ | |||
content: "Copiado!"; | |||
margin-left: 8px; | |||
font-weight: 700; | |||
font-size: 12px; | |||
opacity: .9; | |||
} | |||
/* Ícone "copiar" no começo */ | |||
.rt-copycode{ | |||
position: relative; | position: relative; | ||
padding-left: 28px; /* espaço pro ícone */ | |||
} | } | ||
. | .rt-copycode::before{ | ||
content: ""; | |||
position: absolute; | |||
left: 9px; | |||
top: 50%; | top: 50%; | ||
width: 14px; | |||
height: 14px; | |||
transform: translateY(-50%); | transform: translateY(-50%); | ||
opacity: .75; | |||
background-repeat: no-repeat; | |||
background-size: 14px 14px; | |||
/* SVG inline (copy icon) */ | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23785aff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'/%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'/%3E%3C/svg%3E"); | |||
} | |||
/* Hover deixa o ícone mais evidente */ | |||
.rt-copycode:hover::before{ | |||
opacity: .95; | |||
} | |||
/* Quando copiar, troca pra "check" */ | |||
.rt-copycode.is-copied::before{ | |||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2323c55e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); | |||
opacity: .95; | |||
} | |||
code.rt-copycode{ | |||
background: transparent; | |||
border: 0; | |||
padding: 0; | |||
} | |||
.rt-copycode{ | |||
position:relative; | |||
display:inline-block; | |||
padding:10px 14px 10px 54px; /* texto mais pra direita (mais “respiro”) */ | |||
line-height:1.1; | |||
} | |||
.rt-copycode::before{ | |||
content:""; | |||
position:absolute; | |||
left:10px; | |||
right:2px; | |||
top:50%; | |||
transform:translateY(-50%); | |||
width:16px; | |||
height:16px; | |||
pointer-events:none; | |||
} | |||
#firstHeading, | |||
.mw-first-heading, | |||
.firstHeading { | |||
display: none !important; | |||
} | |||
/* VIP KV – escopo local */ | |||
.vip-kv{ | |||
margin-top:10px; | |||
border:1px solid rgba(120,90,255,.18); | |||
border-radius:14px; | |||
background:rgba(120,90,255,.06); | |||
overflow:hidden; | |||
} | |||
.vip-kv .vip-k, | |||
.vip-kv .vip-v{ | |||
padding:10px 14px; | |||
border-top:1px solid rgba(120,90,255,.12); | |||
} | |||
.vip-kv .vip-k:nth-child(1), | |||
.vip-kv .vip-v:nth-child(2){ | |||
border-top:none; | |||
} | |||
.vip-kv{ | |||
display:grid; | |||
grid-template-columns: 220px 1fr; | |||
} | |||
.vip-kv .vip-k{ | |||
font-weight:800; | |||
color:#3b2a9b; | |||
background:rgba(120,90,255,.08); | |||
} | |||
.vip-kv .vip-v{ | |||
color:#2b2b2b; | |||
} | |||
/* mobile */ | |||
@media (max-width: 720px){ | |||
.vip-kv{ grid-template-columns: 1fr; } | |||
.vip-kv .vip-k{ border-top:1px solid rgba(120,90,255,.12); } | |||
} | |||
/* ================================ | |||
MVP PAGE (isolado) — roxo claro | |||
================================ */ | |||
.mvp-page .rt-subtag{ | |||
margin: 10px auto 16px; | |||
text-align:center; | |||
font-weight: 800; | |||
letter-spacing:.2px; | |||
color: rgba(55,30,120,.9); | |||
} | |||
/* GRID da Loja (NPC à esquerda + tabela à direita) */ | |||
.mvp-page .mvp-shop-grid{ | |||
display: grid; | |||
grid-template-columns: 240px 1fr; | |||
gap: 16px; | |||
align-items: start; | |||
margin: 10px auto 18px; | |||
} | |||
@media (max-width: 860px){ | |||
.mvp-page .mvp-shop-grid{ grid-template-columns: 1fr; } | |||
} | |||
/* Card “label” estilo voto (novo) */ | |||
.mvp-page .mvp-box{ | |||
border: 1px solid rgba(120,90,255,.22); | |||
background: linear-gradient(180deg, rgba(120,90,255,.10), rgba(120,90,255,.05)); | |||
border-radius: 16px; | |||
box-shadow: 0 10px 22px rgba(40,30,90,.08); | |||
overflow: hidden; /* segura bordas da tabela */ | |||
} | |||
.mvp-page .mvp-box-label{ | |||
text-align: center; | |||
font-weight: 900; | |||
letter-spacing: .6px; | |||
padding: 10px 12px; | |||
color: rgba(45,20,110,.92); | |||
background: linear-gradient(180deg, rgba(120,90,255,.18), rgba(120,90,255,.10)); | |||
border-bottom: 1px solid rgba(120,90,255,.22); | |||
} | |||
/* TABELAS novas (ranking e loja) */ | |||
.mvp-page table.mvp-table, | |||
.mvp-page table.mvp-shop-table{ | |||
width: 100%; | |||
margin: 0; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
table-layout: fixed; /* evita “explodir” */ | |||
background: rgba(255,255,255,.70); | |||
} | |||
.mvp-page table.mvp-table th, | |||
.mvp-page table.mvp-shop-table th{ | |||
padding: 12px 10px; | |||
text-align: center; | |||
font-weight: 900; | |||
color: rgba(35,18,80,.95); | |||
background: rgba(120,90,255,.10); | |||
border-bottom: 1px solid rgba(120,90,255,.18); | |||
} | |||
.mvp-page table.mvp-table td, | |||
.mvp-page table.mvp-shop-table td{ | |||
padding: 12px 12px; | |||
vertical-align: middle; | |||
border-bottom: 1px solid rgba(120,90,255,.12); | |||
overflow-wrap: anywhere; /* segura textos/links longos */ | |||
} | |||
.mvp-page table.mvp-table tr:last-child td, | |||
.mvp-page table.mvp-shop-table tr:last-child td{ | |||
border-bottom: 0; | |||
} | |||
.mvp-page table.mvp-table td:nth-child(1){ text-align:center; font-weight:900; } | |||
.mvp-page table.mvp-table td:nth-child(2){ text-align:center; } | |||
/* Se tiver imagem em célula, não estoura */ | |||
.mvp-page table.mvp-table img, | |||
.mvp-page table.mvp-shop-table img{ | |||
max-width: 100%; | |||
height: auto; | |||
} | |||
/* Pill do /navi copiável dentro do card do NPC (sem quadrado branco) */ | |||
.mvp-page .mvp-navi-pill{ | |||
display:inline-block; | |||
margin: 8px auto 0; | |||
padding: 8px 4px; | |||
border: 1px solid rgba(120,90,255,.25); | |||
border-radius: 999px; | |||
background: rgba(120,90,255,.08); | |||
font-family: monospace; | |||
font-weight: 800; | |||
letter-spacing: .2px; | |||
} | |||
/* Ajuste fino: se seu ícone ::before do rt-copycode encostar no texto */ | |||
.mvp-page .mvp-navi-pill.rt-copycode{ | |||
padding-left: 22px; /* cria espaço pro ::before */ | |||
} | |||
.mvp-page .mvp-navi-pill.rt-copycode::before{ | |||
left: 6px; /* mantém o ícone mais pra esquerda */ | |||
} | |||
/* Loja de Voto: só posicionamento lado a lado (não muda visual do NPC) */ | |||
.vote-shop-grid{ | |||
display: grid; | |||
grid-template-columns: 260px 1fr; | |||
gap: 22px; | |||
align-items: start; | |||
max-width: 1100px; | |||
margin: 8px auto 24px; | |||
} | |||
@media (max-width: 960px){ | |||
.vote-shop-grid{ | |||
grid-template-columns: 1fr; | |||
} | |||
} | |||
/* === PONTOS DE VOTO: NPC + LOJA lado a lado === */ | |||
.vote-shop-grid{ | |||
display: grid; | |||
grid-template-columns: minmax(240px, 260px) minmax(0, 1fr); | |||
gap: 22px; | |||
align-items: start; | |||
margin: 10px 0 24px; | |||
} | |||
/* Responsivo: empilha no mobile */ | |||
@media (max-width: 900px){ | |||
.vote-shop-grid{ grid-template-columns: 1fr; } | |||
.vote-shop-table .eden-quests-card{ max-width: 100% !important; } | |||
} | |||
/* === “Balão” do /navi (mantém o visual premium antigo) === */ | |||
.rt-copycode.rt-navi-pill{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
padding: 8px 14px 8px 24px !important; /* espaço pro ícone */ | |||
border: 1px solid rgba(120,90,255,.25) !important; | |||
border-radius: 999px !important; | |||
background: rgba(120,90,255,.08) !important; | |||
font-family: monospace; | |||
font-weight: 700; | |||
letter-spacing: .2px; | |||
cursor: pointer; | |||
user-select: none; | |||
position: relative; | |||
} | |||
/* Se o seu ícone de copiar vem do ::before do .rt-copycode, garante que ele não “cole” no texto */ | |||
.rt-copycode.rt-navi-pill::before{ | |||
left: 6px !important; | |||
top: 50% !important; | |||
transform: translateY(-50%) !important; | |||
} | |||
/* ===== Loja Pontos de Voto: tabela com cantos arredondados ===== */ | |||
.vote-shop-store .eden-quests-table{ | |||
border-collapse: separate !important; /* necessário p/ radius funcionar */ | |||
border-spacing: 0 !important; | |||
border-radius: 14px; | |||
overflow: hidden; /* recorta o header e as bordas */ | |||
} | |||
/* garante que o “recorte” funcione em todos os browsers */ | |||
.vote-shop-store .eden-quests-table{ | |||
background: rgba(120,90,255,.06); | |||
} | |||
/* arredonda os cantos no header (primeira linha de TH) */ | |||
.vote-shop-store .eden-quests-table tr:first-child th:first-child{ | |||
border-top-left-radius: 14px; | |||
} | |||
.vote-shop-store .eden-quests-table tr:first-child th:last-child{ | |||
border-top-right-radius: 14px; | |||
} | |||
/* arredonda os cantos na última linha */ | |||
.vote-shop-store .eden-quests-table tr:last-child td:first-child{ | |||
border-bottom-left-radius: 14px; | |||
} | |||
.vote-shop-store .eden-quests-table tr:last-child td:last-child{ | |||
border-bottom-right-radius: 14px; | |||
} | |||
/* ================================ | |||
RT • Loja Roxo-Claro (padrão) | |||
(NPC + tabela no mesmo card) | |||
================================ */ | |||
.rt-shop-store{ | |||
max-width: 980px; | |||
margin: 10px auto 26px; | |||
} | |||
.rt-shop-card{ | |||
position: relative; | |||
padding: 22px 22px 18px; | |||
border-radius: 22px; | |||
border: 1px solid rgba(120,90,255,.18); | |||
background: rgba(120,90,255,.06); | |||
box-shadow: 0 16px 34px rgba(20,0,60,.12); | |||
} | |||
.rt-shop-label{ | |||
position: absolute; | position: absolute; | ||
top: -14px; | |||
left: 18px; | |||
padding: 7px 14px; | |||
border-radius: 999px; | |||
background: linear-gradient(180deg, rgba(120,90,255,1), rgba(92,66,240,1)); | |||
color: #fff; | |||
font-weight: 900; | |||
letter-spacing: .7px; | |||
text-transform: uppercase; | |||
font-size: 12px; | |||
box-shadow: 0 12px 26px rgba(60,40,200,.25); | |||
} | |||
.rt-shop-npc{ | |||
display: flex; | |||
justify-content: center; | |||
margin: 6px auto 14px; | |||
} | |||
/* mantém o NPC card intacto, só remove “respiros” extras quando estiver dentro da loja */ | |||
.rt-shop-npc .bp-bonus-card{ | |||
margin: 0 auto 10px !important; | |||
} | } | ||
. | /* ===== Tabela arredondada ===== */ | ||
table.wikitable.rt-shop-table{ | |||
width: 100%; | width: 100%; | ||
margin: 0 !important; | |||
border-collapse: separate !important; | |||
border-radius: | border-spacing: 0 !important; | ||
padding: | overflow: hidden; | ||
border: 1px solid | border-radius: 16px; | ||
background: rgba(255,255,255,.55); | |||
border: 1px solid rgba(120,90,255,.22); | |||
} | |||
/* remove heranças do wikitable */ | |||
table.wikitable.rt-shop-table, | |||
table.wikitable.rt-shop-table th, | |||
table.wikitable.rt-shop-table td{ | |||
box-shadow: none !important; | |||
} | |||
table.wikitable.rt-shop-table th{ | |||
padding: 12px 10px; | |||
background: rgba(120,90,255,.12); | |||
color: #2b176b; | |||
font-weight: 900; | |||
text-transform: uppercase; | |||
letter-spacing: .7px; | |||
font-size: 12px; | |||
border-bottom: 1px solid rgba(120,90,255,.22); | |||
} | } | ||
. | table.wikitable.rt-shop-table td{ | ||
padding | padding: 12px 10px; | ||
border: | border-bottom: 1px solid rgba(120,90,255,.16); | ||
} | } | ||
. | /* linhas verticais */ | ||
table.wikitable.rt-shop-table th + th, | |||
table.wikitable.rt-shop-table td + td{ | |||
border-left: 1px solid rgba(120,90,255,.16); | |||
} | } | ||
. | /* última linha sem borda inferior */ | ||
table.wikitable.rt-shop-table tr:last-child td{ | |||
border-bottom: 0; | |||
} | } | ||
/* mobile: dá uma enxugada */ | |||
@media (max-width: 720px){ | |||
padding | .rt-shop-card{ padding: 18px 14px 14px; } | ||
table.wikitable.rt-shop-table th, | |||
table.wikitable.rt-shop-table td{ padding: 10px 8px; } | |||
} | } | ||
. | /* ===== Ajustes finos (MVP) ===== */ | ||
/* 1) Label menor */ | |||
.rt-shop-label{ | |||
top: -12px; | |||
padding: 6px 12px; | |||
font-size: 11px; | |||
letter-spacing: .55px; | |||
box-shadow: 0 10px 22px rgba(60,40,200,.20); | |||
} | } | ||
. | /* 2) Tabela maior (ocupar mais espaço no card) */ | ||
.rt-shop-card{ | |||
max-width: 980px; /* garante que o card não fique estreito */ | |||
margin: 0 auto; | |||
} | } | ||
. | table.wikitable.rt-shop-table{ | ||
max-width: 900px; /* “tamanho visual” da tabela */ | |||
margin: 10px auto 0 !important; | |||
} | } | ||
. | /* se ainda estiver “miúda” por causa do conteúdo, força colunas mais largas */ | ||
table.wikitable.rt-shop-table th, | |||
table.wikitable.rt-shop-table td{ | |||
min-width: 140px; | |||
} | |||
table.wikitable.rt-shop-table th:first-child, | |||
table.wikitable.rt-shop-table td:first-child{ | |||
min-width: 260px; /* ITEM mais largo */ | |||
} | } | ||
. | table.wikitable.rt-shop-table{ max-width: none; width: 100%; } | ||
/* ================================ | |||
RT - Loja (colapsáveis abaixo do NPC) | |||
================================ */ | |||
.eden-page .rt-shop-sections{ | |||
max-width: 920px; | |||
margin: 14px auto 0; | |||
display: flex; | display: flex; | ||
flex-direction: column; | |||
gap: 12px; | |||
} | |||
.eden-page .rt-shop-coll{ | |||
position: relative; | |||
width: 100%; | |||
border: 1px solid rgba(120,90,255,.28); | |||
border-radius: 18px; | |||
overflow: hidden; | |||
background: linear-gradient(180deg, rgba(120,90,255,.16), rgba(120,90,255,.06)); | |||
box-shadow: 0 18px 40px rgba(40,10,120,.10); | |||
padding-top: 46px; /* altura da “barra” */ | |||
} | |||
/* “barra” (título do colapsável) */ | |||
.eden-page .rt-shop-coll::before{ | |||
content: attr(data-badge); | |||
position: absolute; | |||
top: 0; left: 0; right: 0; | |||
height: 46px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-weight: 900; | |||
letter-spacing: .8px; | |||
text-transform: uppercase; | |||
color: rgba(40, 10, 120, .95); | |||
background: rgba(120,90,255,.10); | |||
border-bottom: 1px solid rgba(120,90,255,.22); | |||
} | |||
/* botão Mostrar/Ocultar (centralizado verticalmente) */ | |||
.eden-page .rt-shop-coll .mw-collapsible-toggle{ | |||
position: absolute; | |||
top: 0; | |||
right: 10px; | |||
height: 46px; | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
font-weight: 800; | |||
font-size: 13px; | |||
line-height: 1; | |||
} | |||
.eden-page .rt-shop-coll .mw-collapsible-toggle a{ | |||
display: inline-flex; | |||
align-items: center; | align-items: center; | ||
padding: . | padding: 8px 12px; | ||
font-size: 1. | border-radius: 999px; | ||
border: 1px solid rgba(120,90,255,.30); | |||
background: rgba(120,90,255,.12); | |||
color: rgba(40, 10, 120, .95); | |||
text-decoration: none !important; | |||
} | |||
/* conteúdo */ | |||
.eden-page .rt-shop-coll .mw-collapsible-content{ | |||
padding: 12px; | |||
} | |||
/* tabela com cantos arredondados dentro do colapsível (sem “explodir”) */ | |||
.eden-page .rt-shop-coll table.eden-quests-table{ | |||
width: 100% !important; | |||
margin: 0 !important; | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
border-radius: 14px; | |||
overflow: hidden; | |||
} | |||
/* garante cantos arredondados nos cantos da tabela */ | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:first-child{ border-top-left-radius: 14px; } | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:last-child{ border-top-right-radius: 14px; } | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:last-child td:first-child{ border-bottom-left-radius: 14px; } | |||
.eden-page .rt-shop-coll table.eden-quests-table tr:last-child td:last-child{ border-bottom-right-radius: 14px; } | |||
/* ================================ | |||
Pacotes de Lançamento (3 cards) | |||
================================ */ | |||
.launch-pack-page .launch-pack-grid{ | |||
display:grid; | |||
grid-template-columns:repeat(3, minmax(0, 1fr)); | |||
gap:16px; | |||
max-width:860px; | |||
margin:12px auto 18px; | |||
} | |||
@media (max-width: 980px){ | |||
.launch-pack-page .launch-pack-grid{ | |||
grid-template-columns:1fr; | |||
} | |||
} | |||
.launch-pack-page .launch-pack-card{ | |||
background:rgba(120,90,255,.06); | |||
border:1px solid rgba(120,90,255,.18); | |||
border-radius:18px; | |||
box-shadow:0 12px 26px rgba(30, 20, 80, .10); | |||
padding:14px 14px 12px; | |||
position:relative; | |||
overflow:hidden; | |||
} | |||
.launch-pack-page .launch-pack-chip{ | |||
display:inline-block; | |||
padding:6px 10px; | |||
border-radius:999px; | |||
background:rgba(120,90,255,.12); | |||
border:1px solid rgba(120,90,255,.22); | |||
font-weight:900; | |||
letter-spacing:.3px; | |||
font-size:12px; | |||
color:#2b1b66; | |||
} | |||
.launch-pack-page .launch-pack-title{ | |||
margin:10px 0 2px; | |||
font-weight:900; | |||
font-size:18px; | |||
color:#1b123f; | |||
} | |||
.launch-pack-page .launch-pack-price{ | |||
margin:4px 0 8px; | |||
font-size:16px; | |||
} | |||
.launch-pack-page .launch-pack-sub{ | |||
opacity:.85; | |||
margin:0 0 10px; | |||
} | |||
.launch-pack-page .launch-pack-badge{ | |||
display:inline-block; | |||
margin-left:8px; | |||
padding:4px 9px; | |||
border-radius:999px; | |||
font-size:12px; | |||
font-weight:800; | |||
background:#5b3df5; | |||
color:#fff; | |||
vertical-align:middle; | |||
} | |||
.launch-pack-page .launch-pack-list ul{ | |||
margin:8px 0 10px 18px; | |||
} | |||
.launch-pack-page .launch-pack-actions{ | |||
display:flex; | |||
flex-direction:column; | |||
gap:8px; | |||
margin-top:10px; | |||
} | |||
.launch-pack-page .launch-pack-note{ | |||
font-size:12.5px; | |||
opacity:.85; | |||
} | |||
/* Colapsáveis */ | |||
.launch-pack-page .launch-pack-coll{ | |||
margin-top:10px; | |||
padding-top:6px; | |||
} | |||
/* Tabela comparativa com bordas arredondadas */ | |||
.launch-pack-page .launch-pack-table{ | |||
border-collapse:separate !important; | |||
border-spacing:0 !important; | |||
overflow:hidden; | |||
border-radius:14px; | |||
} | |||
.launch-pack-page .launch-pack-table th, | |||
.launch-pack-page .launch-pack-table td{ | |||
border-color:rgba(120,90,255,.22) !important; | |||
} | |||
/* FAQ */ | |||
.launch-pack-page .launch-pack-faq{ | |||
max-width:860px; | |||
margin:10px auto 0; | |||
background:rgba(120,90,255,.06); | |||
border:1px solid rgba(120,90,255,.18); | |||
border-radius:16px; | |||
padding:10px 12px; | |||
} | |||
/* ========================================= | |||
Pacotes — Cards Premium (tema roxo claro) | |||
========================================= */ | |||
.lp2-wrap{ | |||
max-width: 1050px; | |||
margin: 18px auto 28px; | |||
padding: 18px; | |||
border-radius: 26px; | |||
background: linear-gradient(180deg, | |||
rgba(120,90,255,.10), | |||
rgba(120,90,255,.06) | |||
); | |||
border: 1px solid rgba(120,90,255,.20); | |||
box-shadow: 0 18px 48px rgba(0,0,0,.08); | |||
} | |||
.lp2-grid{ | |||
display:grid; | |||
grid-template-columns: repeat(3, minmax(0, 1fr)); | |||
gap: 16px; | |||
align-items: stretch; | |||
} | |||
@media (max-width: 980px){ | |||
.lp2-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } | |||
} | |||
@media (max-width: 680px){ | |||
.lp2-grid{ grid-template-columns: 1fr; } | |||
} | |||
/* Card base */ | |||
.lp2-card{ | |||
position:relative; | |||
border-radius: 22px; | |||
overflow:hidden; | |||
background: rgba(255,255,255,.82); | |||
border: 1px solid rgba(120,90,255,.22); | |||
box-shadow: | |||
0 18px 44px rgba(0,0,0,.10), | |||
0 0 0 1px rgba(120,90,255,.06); | |||
backdrop-filter: blur(6px); | |||
-webkit-backdrop-filter: blur(6px); | |||
display:flex; | |||
flex-direction:column; | |||
min-height: 520px; | |||
transition: transform .16s ease, box-shadow .16s ease; | |||
} | |||
.lp2-card:hover{ | |||
transform: translateY(-3px); | |||
box-shadow: | |||
0 26px 64px rgba(0,0,0,.13), | |||
0 0 0 1px rgba(120,90,255,.10); | |||
} | |||
/* Header “faixa” */ | |||
.lp2-head{ | |||
display:flex; | |||
align-items:center; | |||
gap: 12px; | |||
padding: 14px 14px 12px; | |||
border-bottom: 1px solid rgba(0,0,0,.06); | |||
background: linear-gradient(135deg, rgba(120,90,255,.10), rgba(255,255,255,.30)); | |||
} | |||
.lp2-mascot{ | |||
width: 48px; | |||
height: 48px; | |||
flex: 0 0 48px; | |||
object-fit: contain; | |||
image-rendering: pixelated; | |||
filter: drop-shadow(0 10px 16px rgba(0,0,0,.10)); | |||
} | |||
.lp2-hmeta{ min-width:0; flex:1 1 auto; } | |||
.lp2-tier{ | |||
font-weight: 950; | |||
font-size: 18px; | |||
line-height: 1.1; | |||
margin: 0; | |||
color: #141428; | |||
} | |||
.lp2-price{ | |||
font-weight: 900; | |||
font-size: 18px; | |||
margin: 3px 0 0; | |||
color: #1b1b2e; | |||
} | |||
/* Corpo */ | |||
.lp2-body{ | |||
padding: 12px 14px 14px; | |||
display:flex; | |||
flex-direction:column; | |||
gap: 10px; | |||
flex: 1 1 auto; | |||
} | |||
.lp2-sub{ | |||
font-size: 12.5px; | |||
color: rgba(20,20,35,.68); | |||
} | |||
/* Lista com ícones */ | |||
.lp2-list{ | |||
margin: 6px 0 0; | |||
padding: 0; | |||
list-style: none; | |||
display:grid; | |||
gap: 8px; | |||
} | |||
.lp2-list li{ | |||
display:flex; | |||
align-items:flex-start; | |||
gap: 10px; | |||
line-height: 1.25; | |||
color: #1c1c2c; | |||
font-size: 13.5px; | |||
} | |||
.lp2-list .lp2-ico{ | |||
width: 18px; | |||
height: 18px; | |||
flex: 0 0 18px; | |||
margin-top: 1px; | |||
filter: drop-shadow(0 10px 16px rgba(0,0,0,.06)); | |||
} | |||
/* Rodapé com botão */ | |||
.lp2-foot{ | |||
margin-top:auto; | |||
padding: 12px 14px 14px; | |||
border-top: 1px solid rgba(0,0,0,.06); | |||
display:flex; | |||
flex-direction:column; | |||
gap: 10px; | |||
} | |||
.lp2-btn{ | |||
display:block; | |||
text-align:center; | |||
padding: 12px 14px; | |||
border-radius: 14px; | |||
font-weight: 950; | |||
letter-spacing: .2px; | |||
color: #fff !important; | |||
text-decoration: none !important; | |||
background: linear-gradient(90deg, rgba(120,90,255,1), rgba(170,120,255,1)); | |||
box-shadow: 0 16px 32px rgba(120,90,255,.26); | |||
border: 1px solid rgba(120,90,255,.22); | |||
} | |||
.lp2-btn:hover{ | |||
filter: brightness(1.02); | |||
transform: translateY(-1px); | |||
} | |||
.lp2-note{ | |||
text-align:center; | |||
font-size: 11.5px; | |||
color: rgba(20,20,35,.62); | |||
} | |||
/* ========================= | |||
Variações por tier | |||
========================= */ | |||
.lp2-card.is-bronze .lp2-head{ | |||
background: linear-gradient(135deg, rgba(195,130,80,.30), rgba(255,255,255,.38)); | |||
} | |||
.lp2-card.is-bronze .lp2-btn{ | |||
background: linear-gradient(90deg, rgba(160,92,52,1), rgba(195,130,80,1)); | |||
box-shadow: 0 16px 32px rgba(195,130,80,.22); | |||
} | } | ||
.lp2-card.is-silver .lp2-head{ | |||
background: linear-gradient(135deg, rgba(145,160,178,.34), rgba(255,255,255,.40)); | |||
} | |||
background- | .lp2-card.is-silver .lp2-btn{ | ||
background: linear-gradient(90deg, rgba(105,120,140,1), rgba(145,160,178,1)); | |||
box-shadow: 0 16px 32px rgba(145,160,178,.20); | |||
} | } | ||
.lp2-card.is-gold .lp2-head{ | |||
background: linear-gradient(135deg, rgba(215,170,70,.32), rgba(255,255,255,.40)); | |||
} | |||
.lp2-card.is-gold .lp2-btn{ | |||
background: linear-gradient(90deg, rgba(185,130,30,1), rgba(215,170,70,1)); | |||
box-shadow: 0 16px 32px rgba(215,170,70,.22); | |||
} | } | ||
. | /* (Opcional) destaque no card do meio */ | ||
.lp2-card.is-featured{ | |||
box-shadow: | |||
0 28px 72px rgba(0,0,0,.14), | |||
0 0 0 1px rgba(120,90,255,.12), | |||
0 0 44px rgba(120,90,255,.18); | |||
} | } | ||
.lp2-badge{ | |||
position:absolute; | |||
top: 12px; | |||
right: 12px; | |||
padding: 6px 10px; | |||
border-radius: 999px; | |||
background: rgba(120,90,255,.12); | |||
border: 1px solid rgba(120,90,255,.22); | |||
color: #2b2370; | |||
font-weight: 950; | |||
font-size: 12px; | |||
} | |||
/* ================================ | |||
Launch Packs (lp2-*) — Premium Cards (roxo-claro) | |||
================================ */ | |||
.launch-pack-page .lp2-wrap{ | |||
max-width: 1060px; /* <- “engrossa” o conjunto */ | |||
margin: 18px auto 26px; | |||
padding: 18px; | |||
background: linear-gradient(180deg, rgba(120,90,255,.14), rgba(120,90,255,.07)); | |||
border: 1px solid rgba(120,90,255,.26); | |||
border-radius: 30px; | |||
box-shadow: 0 26px 64px rgba(35, 18, 90, .18); | |||
} | } | ||
.launch-pack-page .lp2-grid{ | |||
display: grid; | |||
gap: 18px; | |||
/* <- “engrossa” os cards: cada coluna não fica magrinha */ | |||
grid-template-columns: repeat(3, minmax(290px, 1fr)); | |||
align-items: stretch; | |||
} | } | ||
. | @media (max-width: 980px){ | ||
.launch-pack-page .lp2-grid{ | |||
grid-template-columns: repeat(2, minmax(280px, 1fr)); | |||
} | |||
} | |||
@media (max-width: 640px){ | |||
.launch-pack-page .lp2-wrap{ padding: 14px; } | |||
.launch-pack-page .lp2-grid{ | |||
grid-template-columns: 1fr; | |||
} | |||
} | } | ||
. | /* Card base */ | ||
.launch-pack-page .lp2-card{ | |||
position: relative; | |||
background: rgba(255,255,255,.94); | |||
border: 1px solid rgba(120,90,255,.24); | |||
border-radius: 22px; | |||
overflow: hidden; | |||
box-shadow: 0 18px 44px rgba(25, 10, 60, .12); | |||
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; | |||
} | } | ||
.launch-pack-page .lp2-card:hover{ | |||
transform: translateY(-2px); | |||
box-shadow: 0 22px 58px rgba(25, 10, 60, .16); | |||
border-color: rgba(120,90,255,.34); | |||
} | } | ||
. | |||
/* Head */ | |||
.launch-pack-page .lp2-tier{ | |||
display: inline-flex; | |||
align-items: center; | |||
padding: 6px 12px; | |||
border-radius: 999px; | |||
font-weight: 900; | |||
background: rgba(120,90,255,.10); | |||
border: 1px solid rgba(120,90,255,.20); | |||
color: #24124f; | |||
} | } | ||
. | .launch-pack-page .lp2-price{ | ||
font-weight: 900; | |||
letter-spacing: .2px; | |||
color: #24124f; | |||
} | } | ||
/* Body/lista */ | |||
.launch-pack-page .lp2-body{ | |||
padding: 14px 18px 18px; | |||
} | } | ||
.launch-pack-page .lp2-sub{ | |||
font-size: 12.5px; | |||
opacity: .8; | |||
margin-bottom: 10px; | |||
} | } | ||
.launch-pack-page .lp2-list{ | |||
margin: 0; | |||
padding-left: 0; | |||
list-style: none; | |||
display: grid; | |||
gap: 8px; | |||
} | |||
. | .launch-pack-page .lp2-list li{ | ||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
line-height: 1.25; | |||
} | } | ||
.launch-pack-page .lp2-ico{ | |||
width: 18px; | |||
height: 18px; | |||
image-rendering: pixelated; | |||
filter: drop-shadow(0 2px 2px rgba(0,0,0,.12)); | |||
} | |||
. | /* Featured (se você usar is-featured no Prata, por ex.) */ | ||
.launch-pack-page .lp2-card.is-featured{ | |||
transform: translateY(-4px); | |||
border-color: rgba(120,90,255,.42); | |||
box-shadow: 0 26px 74px rgba(25, 10, 60, .18); | |||
} | |||
. | /* ====== Tiers (cores do topo + “tint” do chip) ====== */ | ||
.launch-pack-page .lp2-card.is-silver{ | |||
--lp2-accent: linear-gradient(90deg, #AEB8D3, #E9EEFF); | |||
--lp2-glow: rgba(160, 180, 220, .35); | |||
} | |||
.launch-pack-page .lp2-card.is-silver .lp2-tier{ | |||
background: rgba(180,190,220,.22); | |||
border-color: rgba(160,170,210,.38); | |||
} | |||
. | .launch-pack-page .lp2-card.is-gold{ | ||
--lp2-accent: linear-gradient(90deg, #F3C55C, #FFE1A3); | |||
--lp2-glow: rgba(255, 205, 90, .28); | |||
} | |||
.launch-pack-page .lp2-card.is-gold .lp2-tier{ | |||
background: rgba(245, 205, 120, .24); | |||
border-color: rgba(230, 175, 70, .40); | |||
} | |||
. | .launch-pack-page .lp2-card.is-bronze{ | ||
--lp2-accent: linear-gradient(90deg, #C98A63, #F2C0A3); | |||
--lp2-glow: rgba(210, 140, 90, .26); | |||
} | |||
.launch-pack-page .lp2-card.is-bronze .lp2-tier{ | |||
background: rgba(210, 150, 120, .22); | |||
border-color: rgba(190, 120, 85, .38); | |||
} | |||
/* ===== Launch Pack (lp2) — CONTRASTE + FOOTER ===== */ | |||
# | /* Barra do topo mais destacada */ | ||
.launch-pack-page .lp2-card::before{ | |||
height: 16px; /* mais presença */ | |||
background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff)); | |||
box-shadow: | |||
0 12px 32px var(--lp2-glow, rgba(120,90,255,.32)), | |||
inset 0 -1px 0 rgba(255,255,255,.25); | |||
} | |||
/* “Gloss” mais discreto (pra não lavar a cor) */ | |||
.launch-pack-page .lp2-card::after{ | |||
height: 16px; | |||
background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0)); | |||
mix-blend-mode: normal; | |||
opacity: .55; | |||
} | |||
. | /* Tier e preço com contraste forte e leve “contorno” */ | ||
.launch-pack-page .lp2-tier, | |||
.launch-pack-page .lp2-price{ | |||
color: var(--lp2-on, #1f1f1f); | |||
text-shadow: 0 1px 0 rgba(255,255,255,.55); | |||
} | } | ||
. | /* Tier vira “badge” mais premium */ | ||
.launch-pack-page .lp2-tier{ | |||
background: rgba(255,255,255,.70); | |||
border: 1px solid rgba(0,0,0,.06); | |||
box-shadow: 0 10px 26px rgba(0,0,0,.06); | |||
} | |||
. | /* Preço mais forte */ | ||
.launch-pack-page .lp2-price{ | |||
font-weight: 950; | |||
letter-spacing: .3px; | |||
} | } | ||
/* | /* FOOTER BAR (faixa no fim do card) */ | ||
.launch-pack-page .lp2-foot{ | |||
margin-top: 14px; | |||
padding: 12px 14px; | |||
border-top: 1px solid rgba(0,0,0,.06); | |||
background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff)); | |||
color: var(--lp2-footOn, #fff); | |||
display: flex; | |||
align-items: baseline; | |||
justify-content: space-between; | |||
gap: 10px; | |||
border-radius: 0 0 22px 22px; /* acompanha o card */ | |||
. | box-shadow: 0 -10px 26px var(--lp2-glow, rgba(120,90,255,.22)); | ||
} | } | ||
. | .launch-pack-page .lp2-foot-price{ | ||
font-weight: 950; | |||
letter-spacing: .2px; | |||
} | } | ||
. | .launch-pack-page .lp2-foot-note{ | ||
font-size: 12px; | |||
opacity: .92; | |||
white-space: nowrap; | |||
} | } | ||
. | /* ====== Tiers (cores MAIS contrastadas) ====== */ | ||
/* PRATA: base mais “grafite frio”, texto branco */ | |||
.launch-pack-page .lp2-card.is-silver{ | |||
--lp2-accent: linear-gradient(90deg, #5E6A86, #9BA9C9); | |||
--lp2-glow: rgba(110, 130, 175, .30); | |||
--lp2-headTint: rgba(130, 150, 190, .12); | |||
--lp2-on: #111827; | |||
--lp2-footOn: #ffffff; | |||
} | } | ||
. | /* OURO: dourado mais “rico” + marrom pra contraste */ | ||
.launch-pack-page .lp2-card.is-gold{ | |||
--lp2-accent: linear-gradient(90deg, #C9961C, #F1C46B); | |||
--lp2-glow: rgba(205, 150, 25, .22); | |||
--lp2-headTint: rgba(245, 205, 120, .16); | |||
--lp2-on: #2a1b06; | |||
--lp2-footOn: #2a1b06; /* fica premium: texto escuro no ouro */ | |||
} | } | ||
/* | /* BRONZE: cobre mais profundo */ | ||
.launch-pack-page .lp2-card.is-bronze{ | |||
--lp2-accent: linear-gradient(90deg, #8E4F33, #D39A75); | |||
--lp2-glow: rgba(150, 85, 55, .22); | |||
--lp2-headTint: rgba(210, 150, 120, .14); | |||
--lp2-on: #24110b; | |||
--lp2-footOn: #ffffff; | |||
} | |||
/* | /* ========================================= | ||
Pets — OVERRIDE Roxo Claro (FORÇADO) | |||
Ativa com: <div class="pet-page is-light"> | |||
Cole DEPOIS do CSS atual de pets | |||
========================================= */ | |||
. | .pet-page.is-light{ | ||
--pet-ink:#1f1633; | |||
--pet-muted:#5a4a7c; | |||
--pet-surface:rgba(255,255,255,.78); | |||
--pet-surface-2:rgba(255,255,255,.92); | |||
--pet-border:rgba(120,90,255,.22); | |||
--pet-line:rgba(120,90,255,.16); | |||
--pet-shadow:0 18px 44px rgba(44,17,88,.14); | |||
} | } | ||
/* Barras (drops-inline) — remove o "pesado" e aplica claro */ | |||
.pet-page.is-light .drops-inline{ | |||
background: | |||
radial-gradient(1200px 220px at 50% 0%, | |||
rgba(120,90,255,.18) 0%, | |||
rgba(120,90,255,.08) 55%, | |||
rgba(255,255,255,0) 100%), | |||
linear-gradient(180deg, | |||
rgba(255,255,255,.70), | |||
rgba(120,90,255,.06)) !important; | |||
border:1px solid var(--pet-border) !important; | |||
border-radius:22px !important; | |||
box-shadow:var(--pet-shadow) !important; | |||
color:var(--pet-ink) !important; | |||
} | } | ||
/* Badge do data-badge (alguns CSS usam :before, outros ::before) */ | |||
.pet-page.is-light .drops-inline:before, | |||
.pet-page.is-light .drops-inline::before{ | |||
background:linear-gradient(180deg, | |||
rgba(255,255,255,.78), | |||
rgba(255,255,255,.45)) !important; | |||
border:1px solid rgba(120,90,255,.22) !important; | |||
color:var(--pet-ink) !important; | |||
box-shadow:0 10px 24px rgba(44,17,88,.10) !important; | |||
} | } | ||
.mw- | /* Toggle expandir/ocultar (botão) */ | ||
.pet-page.is-light .drops-inline .mw-collapsible-toggle, | |||
.pet-page.is-light .drops-inline .mw-collapsible-toggle a{ | |||
color:var(--pet-ink) !important; | |||
} | } | ||
.mw- | .pet-page.is-light .drops-inline .mw-collapsible-toggle{ | ||
background:linear-gradient(180deg, | |||
rgba(255,255,255,.78), | |||
rgba(255,255,255,.45)) !important; | |||
border:1px solid rgba(120,90,255,.22) !important; | |||
border-radius:999px !important; | |||
padding:6px 12px !important; | |||
box-shadow:0 10px 24px rgba(44,17,88,.10) !important; | |||
} | } | ||
/* | /* Área do conteúdo (onde entra a tabela) */ | ||
. | .pet-page.is-light .drops-inline .mw-collapsible-content{ | ||
background:var(--pet-surface) !important; | |||
border:1px solid rgba(120,90,255,.14) !important; | |||
border-radius:18px !important; | |||
padding:14px !important; | |||
margin:12px !important; | |||
} | } | ||
. | /* Tabela clara */ | ||
.pet-page.is-light .pet-list-table{ | |||
width:100% !important; | |||
margin:0 !important; | |||
border-collapse:separate !important; | |||
border-spacing:0 !important; | |||
overflow:hidden !important; | |||
background:var(--pet-surface-2) !important; | |||
border:1px solid rgba(120,90,255,.16) !important; | |||
border-radius:16px !important; | |||
color:var(--pet-ink) !important; | |||
} | } | ||
. | /* Cabeçalho */ | ||
.pet-page.is-light .pet-list-table th{ | |||
background:linear-gradient(180deg, | |||
rgba(120,90,255,.18), | |||
rgba(120,90,255,.10)) !important; | |||
color:var(--pet-ink) !important; | |||
font-weight:900 !important; | |||
text-align:center !important; | |||
padding:12px 10px !important; | |||
border-bottom:1px solid var(--pet-line) !important; | |||
} | } | ||
. | /* Células */ | ||
. | .pet-page.is-light .pet-list-table td{ | ||
background:transparent !important; | |||
color:var(--pet-ink) !important; | |||
padding:12px 10px !important; | |||
border-bottom:1px solid rgba(120,90,255,.12) !important; | |||
border-right:1px solid rgba(120,90,255,.10) !important; | |||
vertical-align:middle !important; | |||
} | } | ||
. | .pet-page.is-light .pet-list-table td:last-child, | ||
.pet-page.is-light .pet-list-table th:last-child{ | |||
border-right:0 !important; | |||
} | } | ||
. | /* Zebra suave */ | ||
.pet-page.is-light .pet-list-table tr:nth-child(even) td{ | |||
background:rgba(120,90,255,.04) !important; | |||
} | } | ||
. | /* Links (se tiver) */ | ||
.pet-page.is-light a{ | |||
color:#3f3bd9 !important; | |||
} | } | ||
. | /* Pixel art nítida */ | ||
.pet-page.is-light .pet-list-table img{ | |||
image-rendering:pixelated; | |||
} | |||
. | /* ========================================= | ||
PETS (tema roxo-claro) — pill + tabela interna | |||
Alvo: <div class="pet-page is-light"> ... drops-inline is-pet* | |||
========================================= */ | |||
. | .pet-page.is-light .drops-inline{ | ||
/* base clara */ | |||
background: linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%) !important; | |||
border: 1px solid rgba(120,90,230,.22) !important; | |||
border-radius: 22px !important; | |||
box-shadow: 0 14px 34px rgba(35,12,70,.10) !important; | |||
} | |||
. | /* se você tiver algum ::after antigo fazendo “glow feio”, desliga */ | ||
.pet-page.is-light .drops-inline::after{ | |||
content: none !important; | |||
} | } | ||
. | /* ====== VARIAÇÃO POR CATEGORIA (só muda a PILL) ====== */ | ||
.pet-page.is-light .drops-inline.is-pet120{ --pet-pill1:#1f0b4d; --pet-pill2:#5a2bd6; } | |||
.pet-page.is-light .drops-inline.is-pet60 { --pet-pill1:#151241; --pet-pill2:#3a43d2; } | |||
.pet-page.is-light .drops-inline.is-pet30 { --pet-pill1:#1b0f3f; --pet-pill2:#7a35d8; } | |||
.pet-page.is-light .drops-inline.is-pet10 { --pet-pill1:#2a1552; --pet-pill2:#9a57ff; } | |||
/* ====== PILL (badge do data-badge) ====== | |||
(assumindo que seu drops-inline usa ::before pra renderizar o badge) | |||
*/ | |||
.pet-page.is-light .drops-inline::before{ | |||
background: linear-gradient(180deg, var(--pet-pill2), var(--pet-pill1)) !important; | |||
color: #fff !important; | |||
. | border: 1px solid rgba(255,255,255,.28) !important; | ||
box-shadow: 0 10px 18px rgba(30,10,60,.22) !important; | |||
. | letter-spacing: .10em !important; | ||
text-transform: uppercase !important; | |||
} | |||
. | /* Toggle [ EXPANDIR / OCULTAR ] */ | ||
.pet-page.is-light .drops-inline .mw-collapsible-toggle{ | |||
background: rgba(255,255,255,.65) !important; | |||
border: 1px solid rgba(120,90,230,.28) !important; | |||
border-radius: 999px !important; | |||
box-shadow: 0 8px 16px rgba(35,12,70,.10) !important; | |||
} | |||
.pet-page.is-light .drops-inline .mw-collapsible-toggle a, | |||
.pet-page.is-light .drops-inline .mw-collapsible-toggle{ | |||
color: #3a1a78 !important; | |||
font-weight: 800 !important; | |||
} | |||
. | /* ====== “CAIXA” INTERNA DA TABELA ====== */ | ||
.pet-page.is-light .drops-inline .mw-collapsible-content{ | |||
background: rgba(255,255,255,.55) !important; | |||
border: 1px solid rgba(120,90,230,.18) !important; | |||
border-radius: 18px !important; | |||
padding: 14px !important; | |||
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55) !important; | |||
} | |||
. | /* ====== TABELA (roxo claro, sem zebra) ====== */ | ||
.pet-page.is-light .pet-list-table{ | |||
width: 100% !important; | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
. | background: #f7f3ff !important; | ||
border: 1px solid rgba(120,90,230,.30) !important; | |||
border-radius: 16px !important; | |||
overflow: hidden !important; | |||
} | |||
. | /* header */ | ||
.pet-page.is-light .pet-list-table th{ | |||
background: linear-gradient(180deg, rgba(120,90,230,.18), rgba(120,90,230,.12)) !important; | |||
color: #1e123a !important; | |||
font-weight: 900 !important; | |||
border-bottom: 1px solid rgba(120,90,230,.28) !important; | |||
border-right: 1px solid rgba(120,90,230,.22) !important; | |||
} | } | ||
.pet-page.is-light .pet-list-table th:last-child{ border-right: 0 !important; } | |||
/* cells */ | |||
.pet-page.is-light .pet-list-table td{ | |||
background: #f7f3ff !important; /* tudo igual (sem zebra) */ | |||
color: #1f1f1f !important; | |||
border-bottom: 1px solid rgba(120,90,230,.22) !important; | |||
border-right: 1px solid rgba(120,90,230,.18) !important; | |||
} | } | ||
.pet-page.is-light .pet-list-table td:last-child{ border-right: 0 !important; } | |||
.pet-page.is-light .pet-list-table tr:last-child td{ border-bottom: 0 !important; } | |||
. | /* mata qualquer zebra herdado */ | ||
. | .pet-page.is-light .pet-list-table tr:nth-child(even) td, | ||
.pet-page.is-light .pet-list-table tr:nth-child(odd) td{ | |||
background: #f7f3ff !important; | |||
} | |||
/* ================================ | |||
Launch Packs (lp2) - Premium | |||
================================ */ | |||
. | .lp2-wrap{ | ||
max-width: 980px; | |||
. | margin: 10px auto 0; | ||
padding: 18px; | |||
border-radius: 22px; | |||
background: linear-gradient(180deg, rgba(160,140,255,.20), rgba(160,140,255,.10)); | |||
border: 1px solid rgba(120,95,230,.25); | |||
box-shadow: 0 22px 70px rgba(40, 20, 80, .12); | |||
} | |||
. | .lp2-grid{ | ||
display: grid; | |||
grid-template-columns: repeat(3, minmax(240px, 1fr)); | |||
gap: 16px; | |||
align-items: stretch; | |||
} | |||
/* | .lp2-card{ | ||
. | display: flex; /* <<< isso fixa o footer */ | ||
flex-direction: column; /* <<< */ | |||
overflow: hidden; /* <<< garante borda certinha */ | |||
border-radius: 22px; | |||
background: #fff; | |||
border: 1px solid rgba(120,95,230,.22); | |||
box-shadow: 0 16px 44px rgba(50, 30, 110, .14); | |||
} | |||
/* Topo vira “faixa imagem” */ | |||
.lp2-head{ | |||
padding: 0; | |||
margin: 0; | |||
background: none; | |||
border-bottom: 1px solid rgba(120,95,230,.18); | |||
} | |||
/* MediaWiki costuma colocar wrapper <a> e <img class="mw-file-element"> */ | |||
.lp2-head a{ | |||
display: block; | |||
line-height: 0; | |||
} | |||
.lp2-head .mw-file-element, | |||
.lp2-headimg{ | |||
display: block; | |||
width: 100% !important; | |||
height: auto !important; | |||
} | |||
/* Garantir cantos do banner batendo com o card */ | |||
.lp2-head .mw-file-element{ | |||
border-radius: 22px 22px 0 0; | |||
} | |||
/* Corpo cresce e empurra o footer pra baixo */ | |||
.lp2-body{ | |||
flex: 1 1 auto; | |||
padding: 14px 16px 10px; | |||
} | |||
.lp2-sub{ | |||
font-weight: 800; | |||
margin: 6px 0 10px; | |||
opacity: .95; | |||
} | |||
.lp2-list{ | |||
margin: 0; | |||
padding: 0; | |||
list-style: none; | |||
} | |||
.lp2-list li{ | |||
display: flex; | |||
align-items: center; | |||
gap: 8px; | |||
padding: 6px 0; | |||
border-bottom: 1px dashed rgba(120,95,230,.18); | |||
} | } | ||
.lp2-list li:last-child{ | |||
border-bottom: 0; | |||
} | } | ||
. | /* Footer com cor por tier (premium, mas claro) */ | ||
.lp2-card.is-bronze .lp2-foot{ | |||
background: linear-gradient(180deg, rgba(196,120,70,.20), rgba(196,120,70,.38)); | |||
} | } | ||
. | .lp2-card.is-silver .lp2-foot{ | ||
background: linear-gradient(180deg, rgba(120,140,170,.20), rgba(120,140,170,.38)); | |||
} | } | ||
. | .lp2-card.is-gold .lp2-foot{ | ||
background: linear-gradient(180deg, rgba(220,175,80,.22), rgba(220,175,80,.44)); | |||
} | } | ||
. | /* “featured” dá um glow leve */ | ||
.lp2-card.is-featured{ | |||
box-shadow: | |||
0 18px 52px rgba(60, 40, 140, .20), | |||
0 0 0 2px rgba(150,120,255,.18); | |||
transform: translateY(-2px); | |||
} | } | ||
/* Responsivo */ | |||
@media (max-width: 900px){ | |||
.lp2-grid{ grid-template-columns: 1fr; } | |||
.lp2-wrap{ padding: 14px; } | |||
} | } | ||
. | /* Topo (banner) preencher 100% do header */ | ||
.lp2-card{ overflow:hidden; } /* garante que o corte respeita as bordas */ | |||
.lp2-card{ | |||
--lp2-head-h: 140px; /* <-- ajuste aqui (ex: 120 / 140 / 160) */ | |||
} | } | ||
. | .lp2-head{ | ||
padding: 0 !important; | |||
margin: 0 !important; | |||
height: var(--lp2-head-h); | |||
position: relative; | |||
} | } | ||
.lp2-head a{ | |||
display:block; | |||
width:100%; | |||
height:100%; | |||
line-height:0; | |||
} | } | ||
. | .lp2-head .mw-file-element, | ||
border- | .lp2-headimg{ | ||
display:block; | |||
width:100% !important; | |||
height:100% !important; /* <<< aqui é o pulo do gato */ | |||
object-fit: cover; /* <<< preenche o topo inteiro */ | |||
object-position: center; /* centraliza o corte */ | |||
border-radius: 22px 22px 0 0; | |||
} | } | ||
/* | /* ============================== | ||
LP2 – Banner colado no topo (sem “fundinho”) | |||
============================== */ | |||
/* garante que nada vaza pra fora das bordas arredondadas */ | |||
.lp2-card{ | |||
overflow: hidden; | |||
} | } | ||
. | /* se o seu card tem padding, esse é o “culpado” do espaço acima do banner. | ||
Ajuste o valor até sumir 100% (normalmente 14px / 16px). */ | |||
.lp2-card{ | |||
--lp2-pad: 4px; /* <<< ajuste aqui se necessário */ | |||
} | } | ||
. | /* faz o topo “invadir” o padding do card e encostar na borda */ | ||
.lp2-head{ | |||
margin-top: calc(var(--lp2-pad) * -1) !important; | |||
margin-left: calc(var(--lp2-pad) * -1) !important; | |||
margin-right: calc(var(--lp2-pad) * -1) !important; | |||
padding: 0 !important; | |||
} | } | ||
/* | /* mantém o banner preenchendo tudo */ | ||
. | .lp2-head a{ | ||
display:block; | |||
width:100%; | |||
height:100%; | |||
line-height:0; | |||
} | } | ||
. | .lp2-head .mw-file-element, | ||
.lp2-headimg{ | |||
display:block; | |||
width:100% !important; | |||
height:100% !important; | |||
object-fit: cover; | |||
object-position: center; | |||
} | } | ||
. | .lp2-list li:last-child{ | ||
border-bottom: 0 !important; | |||
} | } | ||
.lp2-foot{ | |||
border-top: 0 !important; | |||
box-shadow: none !important; | |||
outline: 0 !important; | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
/* ========================================= | |||
LP2 – Fade infinito no rodapé (sem linha) | |||
+ Header image full-width | |||
========================================= */ | |||
/* MediaWiki costuma envolver a imagem em <a class="image"> */ | |||
.lp2-card .lp2-head a.image{ | |||
display: block; | |||
} | } | ||
. | .lp2-card .lp2-head .lp2-headimg{ | ||
display: block; | |||
width: 100% !important; | |||
height: auto !important; | |||
max-width: 100% !important; | |||
} | } | ||
. | /* Base do card */ | ||
.lp2-card{ | |||
position: relative; | |||
overflow: hidden; /* necessário pro fade “sumir” nas quinas */ | |||
} | } | ||
. | /* Cores do fade por tier (RGB pra usar com alpha) */ | ||
.lp2-card.is-bronze{ --lp2-fade-rgb: 196,126,86; } | |||
.lp2-card.is-silver{ --lp2-fade-rgb: 140,158,190; } | |||
.lp2-card.is-gold { --lp2-fade-rgb: 231,188,86; } | |||
/* Empurra o conteúdo pra não encostar no fade */ | |||
.lp2-card .lp2-body{ | |||
padding-bottom: 110px; /* ajusta aqui se quiser mais/menos “área de fade” */ | |||
position: relative; | |||
z-index: 2; | |||
} | } | ||
. | /* O foot vira só o overlay do fade (SEM linha, SEM corte) */ | ||
.lp2-card .lp2-foot{ | |||
position: absolute; | |||
left: 0; right: 0; bottom: 0; | |||
height: 130px; /* altura total do fade */ | |||
pointer-events: none; | |||
z-index: 1; | |||
border: 0 !important; | |||
outline: 0 !important; | |||
box-shadow: none !important; | |||
background: linear-gradient( | |||
to top, | |||
rgba(var(--lp2-fade-rgb), 0.42) 0%, | |||
rgba(var(--lp2-fade-rgb), 0.22) 35%, | |||
rgba(var(--lp2-fade-rgb), 0.10) 60%, | |||
rgba(255,255,255, 0.00) 100% | |||
) !important; | |||
} | } | ||
/* | /* Se tiver “linha” vinda do último item da lista */ | ||
. | .lp2-card .lp2-list li:last-child{ | ||
border-bottom: 0 !important; | |||
} | } | ||
. | /* ========================================================= | ||
Grupo Éden / Turn In — Loja no estilo "Loja Pontos MVP" | |||
Escopo: .eden-loja-mvp | |||
========================================================= */ | |||
.eden-loja-mvp{ | |||
position: relative; | |||
padding: 22px 18px 18px; | |||
border-radius: 26px; | |||
background: rgba(140,110,240,.10); | |||
border: 1px solid rgba(140,110,240,.25); | |||
box-shadow: 0 10px 24px rgba(0,0,0,.08); | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-chip{ | ||
position: absolute; | |||
top: -14px; | |||
left: 18px; | |||
padding: 6px 14px; | |||
border-radius: 999px; | |||
font-weight: 800; | |||
letter-spacing: .06em; | |||
text-transform: uppercase; | |||
font-size: 12px; | |||
color: #fff; | |||
background: rgba(105,70,230,.95); | |||
box-shadow: 0 10px 18px rgba(105,70,230,.25); | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-grid{ | ||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |||
gap: 16px; | |||
align-items: stretch; | |||
} | } | ||
/* | /* Card/Seção */ | ||
. | .eden-loja-mvp .eden-loja-sec{ | ||
border-radius: 22px; | |||
background: rgba(255,255,255,.35); | |||
border: 1px solid rgba(140,110,240,.22); | |||
overflow: hidden; | |||
} | } | ||
. | /* Cabeçalho igual o "UTILIDADES / EQUIPAMENTOS" */ | ||
.eden-loja-mvp .eden-loja-sec > .loja-card-title{ | |||
padding: 14px 16px; | |||
text-align: center; | |||
font-weight: 900; | |||
letter-spacing: .10em; | |||
text-transform: uppercase; | |||
background: rgba(140,110,240,.18); | |||
border-bottom: 1px solid rgba(140,110,240,.20); | |||
position: relative; | |||
} | } | ||
. | /* Toggle do mw-collapsible no canto direito (estilo “[Ocultar ▾]”) */ | ||
.eden-loja-mvp .eden-loja-sec > .loja-card-title .mw-collapsible-toggle{ | |||
position: absolute; | |||
right: 14px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
font-weight: 800; | |||
letter-spacing: 0; | |||
text-transform: none; | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-sec > .loja-card-title .mw-collapsible-toggle a{ | ||
text-decoration: none; | |||
} | } | ||
. | /* Conteúdo (padding interno) */ | ||
.eden-loja-mvp .eden-loja-sec .mw-collapsible-content{ | |||
padding: 14px; | |||
} | } | ||
. | /* Tabela arredondada estilo MVP */ | ||
.eden-loja-mvp table.eden-loja-table{ | |||
width: 100%; | |||
margin: 0; | |||
border-collapse: separate; | |||
border-spacing: 0; | |||
border: 1px solid rgba(140,110,240,.28); | |||
border-radius: 16px; | |||
overflow: hidden; | |||
background: rgba(255,255,255,.40); | |||
} | } | ||
. | .eden-loja-mvp table.eden-loja-table th{ | ||
padding: 12px 10px; | |||
text-align: center; | |||
font-weight: 900; | |||
letter-spacing: .08em; | |||
text-transform: uppercase; | |||
background: rgba(140,110,240,.16); | |||
border-bottom: 1px solid rgba(140,110,240,.22); | |||
} | } | ||
. | .eden-loja-mvp table.eden-loja-table td{ | ||
padding: 10px 12px; | |||
border-top: 1px solid rgba(140,110,240,.18); | |||
vertical-align: middle; | |||
} | } | ||
. | .eden-loja-mvp table.eden-loja-table tr:first-child td{ | ||
border-top: none; | |||
} | } | ||
/* ================================ | |||
Turn In / Éden — ajustes finais | |||
================================ */ | |||
/* 1) Estreitar a caixa (não ocupar a tela toda) */ | |||
.eden-loja-mvp{ | |||
max-width: 1180px; /* ajuste aqui: 1040 / 1120 / 1180 */ | |||
width: calc(100% - 24px); | |||
margin: 16px auto 24px; | |||
} | } | ||
/* | /* 2) Card do NPC (igual vibe MVP) */ | ||
. | .eden-loja-mvp .eden-npc-wrap{ | ||
display: flex; | |||
justify-content: center; | |||
margin: 8px 0 16px; | |||
} | } | ||
. | .eden-loja-mvp .eden-npc-card{ | ||
width: min(380px, 100%); | |||
text-align: center; | |||
padding: 18px 16px 16px; | |||
border-radius: 22px; | |||
background: rgba(255,255,255,.45); | |||
border: 1px solid rgba(140,110,240,.25); | |||
box-shadow: 0 10px 24px rgba(0,0,0,.07); | |||
} | } | ||
.eden-loja-mvp .eden-npc-title{ | |||
font-weight: 900; | |||
letter-spacing: .06em; | |||
text-transform: uppercase; | |||
margin-bottom: 8px; | |||
} | } | ||
.eden-loja-mvp .eden-npc-loc{ | |||
font-size: 12px; | |||
font-weight: 900; | |||
letter-spacing: .12em; | |||
text-transform: uppercase; | |||
opacity: .85; | |||
margin-bottom: 10px; | |||
} | } | ||
/* | /* pill /navi (no mesmo estilo “copiável”) */ | ||
. | .eden-loja-mvp .eden-navi-pill{ | ||
display: inline-block; | |||
margin-top: 10px; | |||
padding: 8px 14px 8px 30px; | |||
border-radius: 999px; | |||
border: 1px solid rgba(140,110,240,.28); | |||
background: rgba(255,255,255,.55); | |||
font-weight: 800; | |||
position: relative; | |||
} | } | ||
. | .eden-loja-mvp .eden-navi-pill::before{ | ||
content: "⌖"; | |||
position: absolute; | |||
left: 10px; | |||
top: 50%; | |||
transform: translateY(-50%); | |||
opacity: .85; | |||
} | } | ||
/* | /* 3) Fix do toggle do mw-collapsible (ficar no header, canto direito) */ | ||
. | .eden-loja-mvp .eden-loja-sec{ | ||
position: relative; | |||
} | } | ||
.eden-loja-mvp .eden-loja-sec > .mw-collapsible-toggle{ | |||
. | position: absolute; | ||
right: 14px; | |||
top: 12px; /* ajusta fino se quiser */ | |||
z-index: 2; | |||
font-weight: 800; | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-sec > .loja-card-title{ | ||
padding-right: 110px; /* espaço pro [Mostrar/Ocultar] */ | |||
} | } | ||
. | .eden-loja-mvp .eden-loja-sec{ | ||
align-self: start; | |||
height: fit-content; | |||
} | } | ||
/* ========================================================= | |||
RagnaTrue — drops-inline: remover a listra (top line) | |||
Use: <div class="drops-inline rt-no-topline ..."> | |||
========================================================= */ | |||
.drops-inline.rt-no-topline > .mw-collapsible-content{ | |||
border-top: 0 !important; | |||
} | } | ||
. | /* ========================================================= | ||
RT — Colapsível com pill + botão "Mostrar" padronizados | |||
Use adicionando a classe: .rt-coll-uniform | |||
========================================================= */ | |||
.drops-inline.rt-coll-uniform{ | |||
/* ajuste fino por variável (pode sobrescrever por inline style) */ | |||
--rt-pill-w: 340px; /* largura da pill */ | |||
--rt-toggle-w: 120px; /* largura do "Mostrar" */ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
gap: 12px; | |||
/* mantém o “roxinho claro” e o layout limpo */ | |||
padding: 10px 14px; | |||
} | } | ||
. | /* A pill (badge) é o ::before do drops-inline */ | ||
.drops-inline.rt-coll-uniform::before{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: var(--rt-pill-w); | |||
text-align: center; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
/* | /* Botão Mostrar/Ocultar */ | ||
.drops-inline.rt-coll-uniform .mw-collapsible-toggle{ | |||
display: inline-flex; | |||
align-items: center; | |||
justify-content: center; | |||
min-width: var(--rt-toggle-w); | |||
text-align: center; | |||
white-space: nowrap; | |||
} | |||
.drops-inline.rt-coll-uniform .mw-collapsible-toggle a{ | |||
display: inline-flex; | |||
width: 100%; | |||
justify-content: center; | |||
text-decoration: none; | |||
} | |||
/* Conteúdo deve “quebrar linha” e ocupar 100% abaixo do header */ | |||
.drops-inline.rt-coll-uniform .mw-collapsible-content{ | |||
flex: 0 0 100%; | |||
width: 100%; | |||
margin-top: 10px; | |||
} | |||
/* Card de Habilidades: troca o "branco" da faixa dos colapsíveis */ | |||
.rt-skill-wrap .drops-inline { | |||
background: rgba(124, 92, 255, .06) !important; /* lilás bem suave */ | |||
border: 1px solid rgba(124, 92, 255, .18) !important; | |||
box-shadow: none !important; | |||
} | |||
/* opcional: hover levinho */ | |||
.rt-skill-wrap .drops-inline:hover { | |||
background: rgba(124, 92, 255, .09) !important; | |||
} | |||
/* ================================ | |||
Alterações > Habilidades (somente nesta seção) | |||
Wrapper: #rt-skills-coll | |||
================================ */ | |||
/* o “cartão” do colapsível (a listra onde fica pill + Mostrar/Ocultar) */ | |||
#rt-skills-coll .drops-inline.mw-collapsible{ | |||
background: rgba(123, 92, 255, .06) !important; /* roxinho bem leve */ | |||
border: 1px solid rgba(123, 92, 255, .18) !important; | |||
box-shadow: 0 10px 22px rgba(76, 29, 149, .08) !important; /* tira o rosa estourado */ | |||
border-radius: 18px !important; | |||
padding: 10px 12px !important; | |||
} | |||
/* quando abre, não aumenta o “branco/rosa” */ | |||
#rt-skills-coll .drops-inline.mw-collapsible.mw-collapsible-expanded{ | |||
background: rgba(123, 92, 255, .05) !important; | |||
box-shadow: 0 10px 20px rgba(76, 29, 149, .07) !important; | |||
} | |||
/* o painel interno do MediaWiki (era o que estava “lavando” a cor) */ | |||
#rt-skills-coll .drops-inline .mw-collapsible-content{ | |||
background: transparent !important; | |||
padding: 8px 0 0 !important; | |||
margin: 0 !important; | |||
border: 0 !important; | |||
box-shadow: none !important; | |||
} | |||
/* o card interno (onde está a tabela) — remove a sombra forte e “desrosa” */ | |||
#rt-skills-coll .drops-inline .eden-quests-card.is-daily-rewards{ | |||
background: rgba(255,255,255,.55) !important; /* branco translúcido (não rosado) */ | |||
border: 1px solid rgba(123, 92, 255, .14) !important; | |||
box-shadow: none !important; /* aqui estava o “estouro” */ | |||
border-radius: 16px !important; | |||
} | |||
/* Habilidades: linhas sempre lavanda (sem zebra) */ | |||
#rt-skills-coll .eden-quests-table th, | |||
#rt-skills-coll .eden-quests-table td{ | |||
background: rgba(123, 92, 255, .045) !important; /* lavanda fixa */ | |||
} | |||
/* | |||
. | /* remove qualquer alternância */ | ||
#rt-skills-coll .eden-quests-table tr:nth-child(even) td, | |||
#rt-skills-coll .eden-quests-table tr:nth-child(odd) td{ | |||
background: rgba(123, 92, 255, .045) !important; | |||
} | } | ||
. | /* tabela por dentro: lavanda suave consistente */ | ||
#rt-skills-coll .eden-quests-table th{ | |||
background: rgba(123, 92, 255, .12) !important; | |||
} | |||
#rt-skills-coll .eden-quests-table td{ | |||
background: rgba(123, 92, 255, .045) !important; | |||
} | |||
/* ========================= | |||
Habilidades (Alterações por Classe) — camadas/sombra | |||
========================= */ | |||
#rt-skills-wrap{ | |||
background: rgba(123, 92, 255, .06); | |||
border: 1px solid rgba(123, 92, 255, .18); | |||
box-shadow: 0 18px 46px rgba(76, 29, 149, .10); | |||
} | } | ||
/* cada colapsível (a “listra”/faixa) vira um cartão com profundidade */ | |||
#rt-skills-wrap .drops-inline{ | |||
background: rgba(123, 92, 255, .05); | |||
border: 1px solid rgba(123, 92, 255, .18); | |||
border-radius: 16px; | |||
box-shadow: 0 14px 34px rgba(76, 29, 149, .10); | |||
margin: 12px 0; | |||
padding: 8px 10px; | |||
} | } | ||
/* quando abre, dá mais “conversa” com o restante */ | |||
#rt-skills-wrap .mw-collapsible-content{ | |||
margin-top: 10px; | |||
} | } | ||
/* card interno (onde fica a tabela) menos “branco estourado” */ | |||
#rt-skills-wrap .eden-quests-card{ | |||
background: rgba(251, 248, 255, .92); | |||
border: 1px solid rgba(123, 92, 255, .16); | |||
border-radius: 16px; | |||
box-shadow: 0 12px 28px rgba(76, 29, 149, .10); | |||
} | } | ||
/* tabela com acabamento (fica “destacadinha”) */ | |||
#rt-skills-wrap .eden-quests-table{ | |||
border-collapse: separate !important; | |||
border-spacing: 0 !important; | |||
border-radius: 14px; | |||
overflow: hidden; | |||
box-shadow: 0 10px 22px rgba(76, 29, 149, .08); | |||
} | } | ||