|
|
| Linha 1: |
Linha 1: |
| /************************************************************
| | .changelog__link, |
| * UTILITÁRIOS GERAIS
| | .changelog__link:visited { |
| ************************************************************/
| | color: #680cab; |
| /* === RagnaTrue – Bloco de Especificações do Servidor === */
| | font-family: Verdana, Geneva, Tahoma, sans-serif; |
| @import url('https://fonts.googleapis.com/css2?family=Paytone+One&family=Nunito:wght@500;700&display=swap');
| | font-weight: 500; |
| | font-size: .85rem; |
| | display: flex; |
| | justify-content: space-between; |
| | align-items: center; |
|
| |
|
| :root{
| | padding: .5rem .95rem; |
| --rt-bg: #ffffff;
| | border-bottom: 1px solid rgb(120, 120, 120); |
| --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” */
| | transition: background .25s ease; |
| @media (prefers-reduced-motion: reduce){
| |
| .rt-specs-grid li{ transition: none; }
| |
| .rt-specs-grid li:hover,
| |
| .rt-specs-grid li:focus-within{ transform: none; }
| |
| } | | } |
|
| |
|
| | | .changelog__link:last-child { |
| /* ===== HOME – Mensagem abaixo do banner: ZERA QUALQUER FUNDO ===== */
| | border-bottom: 0; |
| /* 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 */
| | .changelog__link:hover { |
| .mw-parser-output .home-welcome.rt-font-bangers{ font-family: "Bangers", system-ui, sans-serif !important; }
| | text-decoration: none; |
| .mw-parser-output .home-welcome.rt-font-titan { font-family: "Titan One", system-ui, sans-serif !important; }
| | background: #f3eaff; |
| .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” */ | | /*.changelog__link::after {*/ |
| .mw-parser-output .home-welcome .rt-gradient{ | | /* content: ">";*/ |
| background: linear-gradient(#ff6c5c,#ff9550,#ffc95e) !important;
| | /*font-weight:lighter;*/ |
| -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, | | .px-0 { |
| .mw-parser-output .home-welcome,
| | padding-inline: 0!important; |
| #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 */
| | .pt-0 { |
| .home-welcome *, | | padding-top: 0!important; |
| .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 */
| | .pb-0 { |
| .home-welcome .ambox, | | padding-bottom: 0!important; |
| .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 */
| | .changelog { |
| .home-welcome .home-welcome-text {
| | margin-inline: auto; |
| margin: 0 !important;
| | max-width: 256px!important; |
| | padding-bottom: 0!important; |
| | margin-top: 1rem; |
| } | | } |
|
| |
|
| /* bloco do texto abaixo do banner */ | | /*Select search*/ |
| .home-welcome{ | | .selectwithSearch__container { |
| 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%; | | width: 100%; |
| border-collapse: collapse;
| | box-sizing:border-box; |
| linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%)
| | padding: 0 2rem; |
| 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{ | | .selectwithSearch__selectBtn { |
| 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%;
| |
| }
| |
| | |
| /* ===== 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; | | 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; | | cursor: pointer; |
| } | | } |
|
| |
|
| .eden-page .loja-card .mw-collapsible-content { | | .selectwithSearch__selectBtn { |
| padding: 4px 0 4px !important; | | height: 2.8rem; |
| | padding: 0 1rem; |
| | font-size: 1rem; |
| | background: #fff; |
| | border-radius: 8px; |
| | justify-content: space-between; |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| } | | } |
|
| |
|
| /* Garantir que a tabela fique bem centralizada dentro do card */
| | .selectwithSearch__selectBtn svg { |
| .eden-page .loja-card .mw-collapsible-content .wikitable {
| | font-size: 2rem; |
| margin: 0 auto; | | transition: transform .3s linear; |
| background: #ffffff; | |
| } | | } |
|
| |
|
| /* RESET – conteúdo do colapsível volta a ocupar a largura toda */
| | .selectwithSearch__container.active .selectwithSearch__selectBtn svg { |
| .eden-page .loja-card .mw-collapsible-content { | | transform: rotate(-180deg); |
| 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 */
| | .selectwithSearch__content { |
| .eden-page .loja-card .mw-collapsible-content > .wikitable {
| | display: none; |
| width: 70% !important; /* mantém o que você já usava */
| | padding: 1.2rem; |
| margin: 0 auto !important;
| | margin-top: .45rem; |
| background: #f3ecff; /* roxo bem clarinho interno */
| | background: #fff; |
| border-radius: 16px;
| | border-radius: 8px; |
| border: 1px solid #d8cdff;
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| 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;
| |
| 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;
| |
| }
| |
| | |
| /* Badge à esquerda dentro da cápsula */
| |
| .eden-page .turnin-mapas .mw-collapsible-toggle::before {
| |
| content: "MAPAS TURN IN";
| |
| padding: 5px 12px;
| |
| border-radius: 999px;
| |
| background: #ffffff;
| |
| border: 1px solid #decfff;
| |
| 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 */
| | .selectwithSearch__container.active .selectwithSearch__content { |
| .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 */
| |
| .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) */
| |
| }
| |
| | |
| /* 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; |
| top: 50%; | | width: calc(100% - 4rem); |
| right: 18px;
| | box-sizing: border-box; |
| transform: translateY(-50%);
| | z-index: 999; |
| 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 */
| | .selectwithSearch__container.active .selectwithSearch__content.small { |
| .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 */
| | .selectwithSearch__content .selectwithSearch__search { |
| .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{ | | .selectwithSearch__search svg { |
| content: "";
| |
| position: absolute;
| |
| left: 9px;
| |
| top: 50%; | | top: 50%; |
| width: 14px; | | left: 1rem; |
| height: 14px; | | color: #999; |
| | font-size: 1.2rem; |
| | pointer-events: none; |
| 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{ | | .selectwithSearch__search input{ |
| display: flex; | | box-sizing: border-box; |
| justify-content: center;
| | height: 3.25rem; |
| 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; | | outline: none; |
| border-collapse: separate !important; | | font-size: 1rem; |
| border-spacing: 0 !important;
| | border-radius: 8px; |
| overflow: hidden;
| | padding: 0 1.2rem 0 4rem; |
| border-radius: 16px; | | border: 1px solid #B3B3B3; |
| 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{
| | .selectwithSearch__search input:focus { |
| padding: 12px 10px; | | padding-left: 4rem; |
| border-bottom: 1px solid rgba(120,90,255,.16); | | border: 2px solid #4285f4; |
| } | | } |
|
| |
|
| /* linhas verticais */
| | .selectwithSearch__search input::placeholder { |
| table.wikitable.rt-shop-table th + th,
| | color: #bfbfbf; |
| table.wikitable.rt-shop-table td + td{
| |
| border-left: 1px solid rgba(120,90,255,.16); | |
| } | | } |
|
| |
|
| /* última linha sem borda inferior */
| | .selectwithSearch__options { |
| table.wikitable.rt-shop-table tr:last-child td{
| | margin-left: 0!important; |
| border-bottom: 0;
| | margin-right: 0!important; |
| } | | } |
|
| |
|
| /* mobile: dá uma enxugada */
| | .selectwithSearch__content .selectwithSearch__options { |
| @media (max-width: 720px){
| | margin-top: .5rem; |
| .rt-shop-card{ padding: 18px 14px 14px; } | | padding-right: .5rem; |
| table.wikitable.rt-shop-table th, | | max-height: 250px; |
| table.wikitable.rt-shop-table td{ padding: 10px 8px; } | | overflow-y: auto; |
| } | | } |
|
| |
|
| /* ===== Ajustes finos (MVP) ===== */
| | .selectwithSearch__options::-webkit-scrollbar { |
| | | width: 8px; |
| /* 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) */
| | .selectwithSearch__options::-webkit-scrollbar-track { |
| .rt-shop-card{ | | background: #f1f1f1; |
| max-width: 980px; /* garante que o card não fique estreito */ | | border-radius: 25px; |
| margin: 0 auto; | |
| } | | } |
|
| |
|
| table.wikitable.rt-shop-table{
| | .selectwithSearch__options::-webkit-scrollbar-thumb { |
| max-width: 900px; /* “tamanho visual” da tabela */ | | background: #ccc; |
| margin: 10px auto 0 !important; | | border-radius: 25px; |
| } | | } |
|
| |
|
| /* se ainda estiver “miúda” por causa do conteúdo, força colunas mais largas */
| | .selectwithSearch__options::-webkit-scrollbar-thumb:hover { |
| table.wikitable.rt-shop-table th,
| | background: #b3b3b3; |
| 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%; }
| | .selectwithSearch__options li { |
| | |
| /* ================================
| |
| RT - Loja (colapsáveis abaixo do NPC)
| |
| ================================ */
| |
| | |
| .eden-page .rt-shop-sections{
| |
| max-width: 920px;
| |
| margin: 14px auto 0;
| |
| 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; | | display: flex; |
| align-items: center; | | align-items: center; |
| justify-content: center; | | padding: .25rem .75rem; |
| font-weight: 900;
| | font-size: 1.075rem; |
| 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) */
| | cursor: pointer; |
| .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{ | | li.groupTitle { |
| display: inline-flex; | | height: 2.25rem; |
| align-items: center; | | font-size: 1.125rem; |
| padding: 8px 12px; | | background-color: rgb(179 163 255 / 21%); |
| border-radius: 999px; | | cursor: default; |
| border: 1px solid rgba(120,90,255,.30); | | margin-bottom: .25rem; |
| background: rgba(120,90,255,.12); | | margin-top: .35rem; |
| color: rgba(40, 10, 120, .95); | | border-bottom: 1px solid #d1d1d1; |
| text-decoration: none !important; | | border-radius: 12px 12px 0 0 !important; |
| } | | } |
|
| |
|
| /* conteúdo */
| | li.groupTitle:hover { |
| .eden-page .rt-shop-coll .mw-collapsible-content{ | | border-radius: 12px 12px 0 0 !important; |
| padding: 12px; | | background-color: rgb(179 163 255 / 21%) !important; |
| } | | } |
|
| |
|
| /* tabela com cantos arredondados dentro do colapsível (sem “explodir”) */
| | .selectwithSearch__options li:hover, |
| .eden-page .rt-shop-coll table.eden-quests-table{ | | li.selected { |
| width: 100% !important;
| | border-radius: 8px; |
| margin: 0 !important;
| | background: #f2f2f2; |
| border-collapse: separate !important;
| |
| border-spacing: 0 !important;
| |
| border-radius: 14px; | |
| overflow: hidden; | |
| } | | } |
| | /*Select search*/ |
|
| |
|
| /* garante cantos arredondados nos cantos da tabela */ | | /** o código CSS colocado aqui será aplicado a todos os temas */ |
| .eden-page .rt-shop-coll table.eden-quests-table tr:first-child th:first-child{ border-top-left-radius: 14px; }
| | #ca-viewsource { display: none !important; } |
| .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){
| | #ca-history { display: none !important;} |
| .launch-pack-page .launch-pack-grid{
| |
| grid-template-columns:1fr;
| |
| }
| |
| } | |
|
| |
|
| .launch-pack-page .launch-pack-card{ | | /* Efeitos */ |
| background:rgba(120,90,255,.06);
| | .hover-minimizeAndRotateContainer a, |
| border:1px solid rgba(120,90,255,.18);
| | .hover-minimizeAndRotate img{ |
| border-radius:18px;
| | transition: transform .25s ease; |
| box-shadow:0 12px 26px rgba(30, 20, 80, .10);
| | } |
| padding:14px 14px 12px;
| | |
| position:relative;
| | .hover-minimizeAndRotateContainer a:hover, |
| overflow:hidden;
| | .hover-minimizeAndRotate img:hover{ |
| } | | transform: scale(.95) rotateZ(-4deg); |
| | } |
| | |
| | .hover-minimize img, |
| | .hover-minimize a img, |
| | .hover-minimize.initialPage__topicContainer { |
| | transition: transform .25s ease; |
| | } |
| | |
| | .hover-minimize:not(.initialPage__topicContainer) img:hover, |
| | .hover-minimize a img:hover, |
| | .hover-minimize.initialPage__topicContainer:hover{ |
| | transform: scale(.95); |
| | } |
| | /* Efeitos */ |
|
| |
|
| .launch-pack-page .launch-pack-chip{
| | body { |
| display:inline-block;
| | position: relative; |
| 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{ | | body::before { |
| margin:10px 0 2px;
| | content: ''; |
| font-weight:900; | | position: fixed; |
| font-size:18px;
| | top: 0; |
| color:#1b123f;
| | left: 0; |
| | width: 100%; |
| | height: 100vh; |
| | background: url('https://wiki.pokexgames.com//images/a/af/Fundo-wiki.jpeg') no-repeat; |
| | filter: brightness(0.8); |
| | |
| | background-attachment: fixed; |
| | background-position: center; |
| | background-repeat: no-repeat; |
| | background-size: cover; |
| | z-index: -1; |
| } | | } |
|
| |
|
| .launch-pack-page .launch-pack-price{ | | .mw-body { |
| margin:4px 0 8px;
| | border-right: 0 !important; |
| font-size:16px;
| |
| } | | } |
|
| |
|
| .launch-pack-page .launch-pack-sub{ | | .mw-body, .parsoid-body, #mw-panel { |
| opacity:.85;
| | background: #fffffff0; |
| margin:0 0 10px;
| | border-radius: 6px; |
| | border: 5px solid transparent; |
| | border-image: url('https://wiki.pokexgames.com/images/9/9a/Borda-wiki.png') 15 stretch; |
| } | | } |
|
| |
|
| .launch-pack-page .launch-pack-badge{
| | #p-logo a { |
| display:inline-block;
| | background-size: contain; |
| 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{ | | .mw-list-item a { |
| margin:8px 0 10px 18px;
| | color: white; |
| } | | } |
|
| |
|
| .launch-pack-page .launch-pack-actions{ | | .mw-list-item a:visited { |
| display:flex;
| | color: #dddddd; |
| flex-direction:column;
| |
| gap:8px;
| |
| margin-top:10px;
| |
| } | | } |
|
| |
|
| .launch-pack-page .launch-pack-note{ | | @media screen and (min-width: 982px) { |
| font-size:12.5px;
| | .mw-body, #mw-head-base, #left-navigation, #mw-data-after-content, .mw-footer { |
| opacity:.85;
| | margin-left: 13em; |
| | } |
| } | | } |
|
| |
|
| /* Colapsáveis */
| | #mw-panel { |
| .launch-pack-page .launch-pack-coll{ | | width: 10.5em; |
| margin-top:10px;
| | margin-top: 2.2rem; |
| padding-top:6px;
| | border-left: none; |
| } | | } |
|
| |
|
| /* Tabela comparativa com bordas arredondadas */ | | /*Ocultamentos e Remoções de estilo*/ |
| .launch-pack-page .launch-pack-table{
| | #p-tb { display: none; } |
| border-collapse:separate !important;
| |
| border-spacing:0 !important;
| |
| overflow:hidden;
| |
| border-radius:14px;
| |
| } | |
|
| |
|
| .launch-pack-page .launch-pack-table th, | | .css-links { |
| .launch-pack-page .launch-pack-table td{
| | pointer-events: none; |
| border-color:rgba(120,90,255,.22) !important;
| | opacity: 0; |
| | margin: 0 !important; |
| } | | } |
|
| |
|
| /* FAQ */
| | #footer-info-lastmod { display: none; } |
| .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;
| |
| } | |
|
| |
|
| /* =========================================
| | .firstHeading {display: none;} |
| Pacotes — Cards Premium (tema roxo claro)
| |
| ========================================= */
| |
|
| |
|
| .lp2-wrap{ | | .catlinks { display: none; } |
| max-width: 1050px;
| |
| margin: 18px auto 28px;
| |
| padding: 18px;
| |
| border-radius: 26px;
| |
|
| |
|
| background: linear-gradient(180deg,
| | .vector-menu-tabs-legacy .selected { background: none!important; } |
| 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{ | | .vector-menu-tabs-legacy li { background: none!important; } |
| display:grid;
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| gap: 16px;
| |
| align-items: stretch;
| |
| } | |
|
| |
|
| @media (max-width: 980px){
| | #mw-page-base { background: none!important;} |
| .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; }
| | #ca-view { display: none; } |
|
| |
|
| .lp2-tier{
| | #ca-talk {display: none;} |
| font-weight: 950;
| |
| font-size: 18px;
| |
| line-height: 1.1;
| |
| margin: 0;
| |
| color: #141428;
| |
| } | |
|
| |
|
| .lp2-price{ | | .vector-search-box-input:focus, .vector-search-box-inner:hover .vector-search-box-input:focus { |
| font-weight: 900;
| | border-color: #cc7ee0; |
| font-size: 18px;
| | box-shadow: inset 0 0 0 1px #cc7ee0; |
| margin: 3px 0 0;
| |
| color: #1b1b2e;
| |
| } | | } |
|
| |
|
| /* Corpo */
| | .vector-search-box-inner:hover .vector-search-box-input { border-color: #cc7ee0; } |
| .lp2-body{ | |
| padding: 12px 14px 14px;
| |
| display:flex;
| |
| flex-direction:column;
| |
| gap: 10px;
| |
| flex: 1 1 auto;
| |
| } | |
|
| |
|
| .lp2-sub{ | | .vector-search-box-input { |
| font-size: 12.5px;
| | border: 1px solid #9f4eea; |
| color: rgba(20,20,35,.68);
| | background: white; |
| } | | } |
|
| |
|
| /* Lista com ícones */ | | /*Wikitable*/ |
| .lp2-list{
| |
| margin: 6px 0 0;
| |
| padding: 0;
| |
| list-style: none;
| |
| display:grid;
| |
| gap: 8px;
| |
| }
| |
|
| |
|
| .lp2-list li{ | | .wikitable th, |
| display:flex;
| | .wikitable td { |
| align-items:flex-start;
| | color : #202122 !important; |
| gap: 10px;
| |
| line-height: 1.25;
| |
| color: #1c1c2c;
| |
| font-size: 13.5px;
| |
| } | | } |
|
| |
|
| .lp2-list .lp2-ico{ | | .wikitable td.table-no-background { |
| width: 18px;
| | background-color: none; |
| height: 18px;
| |
| flex: 0 0 18px;
| |
| margin-top: 1px;
| |
| filter: drop-shadow(0 10px 16px rgba(0,0,0,.06));
| |
| } | | } |
|
| |
|
| /* Rodapé com botão */
| | .wikitable th { |
| .lp2-foot{ | | background-color: #d1c1e0 !important; |
| 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{ | | .wikitable td { |
| display:block;
| | background-color: #f2e8f8 !important; |
| 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{ | | .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td { |
| filter: brightness(1.02);
| | border-color: white !important; |
| transform: translateY(-1px);
| | border-width: 2px !important; |
| } | | } |
|
| |
|
| .lp2-note{
| | /*Wikitable*/ |
| text-align:center;
| |
| font-size: 11.5px;
| |
| color: rgba(20,20,35,.62);
| |
| }
| |
|
| |
|
| /* ========================= | | /*Ajustes visuais de elementos da wiki*/ |
| Variações por tier
| |
| ========================= */
| |
|
| |
|
| .lp2-card.is-bronze .lp2-head{ | | .vector-menu-tabs, .vector-menu-tabs a, #mw-head .vector-menu-dropdown .vector-menu-heading { |
| background: linear-gradient(135deg, rgba(195,130,80,.30), rgba(255,255,255,.38));
| | background-image: none; |
| }
| |
| .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{
| | #footer-places li a { |
| background: linear-gradient(135deg, rgba(145,160,178,.34), rgba(255,255,255,.40));
| | color: #adadad; |
| }
| |
| .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{
| | #right-navigation { |
| background: linear-gradient(135deg, rgba(215,170,70,.32), rgba(255,255,255,.40));
| | margin-top: 2em; |
| }
| |
| .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 */
| | .mw-list-item.selected{ |
| .lp2-card.is-featured{ | | margin-top: -.2rem; |
| box-shadow:
| | display: block; |
| 0 28px 72px rgba(0,0,0,.14),
| | border-radius: 6px; |
| 0 0 0 1px rgba(120,90,255,.12),
| | border: 5px solid transparent; |
| 0 0 44px rgba(120,90,255,.18);
| | border-image: url('https://wiki.pokexgames.com/images/9/9a/Borda-wiki.png') 15 stretch; |
| } | | } |
| .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;
| | .mw-list-item.selected a { |
| font-size: 12px;
| | padding: .35rem; |
| | background: white; |
| | height: auto !important; |
| } | | } |
|
| |
|
| /* ================================ | | /* Utilitarios */ |
| Launch Packs (lp2-*) — Premium Cards (roxo-claro)
| | .d-none { |
| ================================ */
| | display: none!important; |
| | |
| .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{ | | .d-block { |
| display: grid;
| | display: block!important; |
| 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){
| | .d-flex { |
| .launch-pack-page .lp2-grid{
| | display: flex; |
| 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 */
| | .d-flex > p, |
| .launch-pack-page .lp2-card{ | | .d-flex > br { |
| position: relative;
| | display: none !important; |
| 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{ | | .w-100 { |
| transform: translateY(-2px);
| | width: 100%; |
| box-shadow: 0 22px 58px rgba(25, 10, 60, .16);
| |
| border-color: rgba(120,90,255,.34);
| |
| } | | } |
|
| |
|
| | | .align-center { |
| /* Head */
| | align-items: center; |
| .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{ | | .justify-center, .list-center, .center-tab .tabber__tabs { |
| font-weight: 900;
| | justify-content: center; |
| letter-spacing: .2px;
| |
| color: #24124f;
| |
| } | | } |
|
| |
|
| /* Body/lista */
| | .space-between { justify-content: space-between; } |
| .launch-pack-page .lp2-body{ | |
| padding: 14px 18px 18px;
| |
| } | |
|
| |
|
| .launch-pack-page .lp2-sub{ | | .space-around { justify-content: space-around; } |
| font-size: 12.5px;
| |
| opacity: .8;
| |
| margin-bottom: 10px;
| |
| } | |
|
| |
|
| .launch-pack-page .lp2-list{ | | .align-start { align-items: flex-start !important; } |
| margin: 0;
| |
| padding-left: 0;
| |
| list-style: none;
| |
| display: grid;
| |
| gap: 8px;
| |
| } | |
|
| |
|
| .launch-pack-page .lp2-list li{ | | .flex-center { |
| display: flex;
| | display: flex; |
| align-items: center;
| | justify-content:center; |
| gap: 8px;
| | align-items: center; |
| line-height: 1.25;
| |
| } | | } |
|
| |
|
| .launch-pack-page .lp2-ico{ | | .flex-column { flex-direction: column; } |
| 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.) */
| | .flex-wrap, .break-row { flex-wrap: wrap; } |
| .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) ====== */
| | .bg-none { background: none !important; } |
| .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{ | | .text-center { text-align: center; } |
| --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{ | | .border-0 { border: none !important; } |
| --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 ===== */
| | .gap-1{ gap: .5rem; } |
|
| |
|
| /* Barra do topo mais destacada */
| | .gap-2 { gap: 1rem; } |
| .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) */
| | .gap-3 { gap: 1.5rem; } |
| .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” */
| | .margin-center { |
| .launch-pack-page .lp2-tier, | | margin-left: auto !important; |
| .launch-pack-page .lp2-price{
| | margin-right: auto !important; |
| color: var(--lp2-on, #1f1f1f);
| |
| text-shadow: 0 1px 0 rgba(255,255,255,.55);
| |
| } | | } |
|
| |
|
| /* Tier vira “badge” mais premium */
| | .mx-2 { |
| .launch-pack-page .lp2-tier{
| | margin-right: 1rem; |
| background: rgba(255,255,255,.70);
| | margin-left: 1rem; |
| border: 1px solid rgba(0,0,0,.06);
| |
| box-shadow: 0 10px 26px rgba(0,0,0,.06);
| |
| } | | } |
|
| |
|
| /* Preço mais forte */
| | .mr-2 { margin-right: 1rem !important; } |
| .launch-pack-page .lp2-price{ | | .mr-4 { margin-right: 2rem !important; } |
| font-weight: 950;
| |
| letter-spacing: .3px;
| |
| } | |
|
| |
|
| /* FOOTER BAR (faixa no fim do card) */
| | .mt-1 { margin-top: .5rem; } |
| .launch-pack-page .lp2-foot{ | | .mt-2 { margin-top: 1rem !important; } |
| margin-top: 14px;
| | .mb-2 { margin-bottom: 1rem; } |
| padding: 12px 14px;
| |
| border-top: 1px solid rgba(0,0,0,.06);
| |
|
| |
|
| background: var(--lp2-accent, linear-gradient(90deg, #6f5bff, #b69bff));
| | .p-1 { padding: .5rem; } |
| color: var(--lp2-footOn, #fff);
| | .p-2 { padding: 1rem; } |
| | .p-3 { padding: 1.5rem; } |
|
| |
|
| display: flex;
| | .pr-1 { padding-right: .5rem; } |
| align-items: baseline;
| | /* Utilitarios */ |
| justify-content: space-between;
| |
| gap: 10px;
| |
|
| |
|
| border-radius: 0 0 22px 22px; /* acompanha o card */
| | /* Cartões dos NPCs */ |
| box-shadow: 0 -10px 26px var(--lp2-glow, rgba(120,90,255,.22));
| | .npcCard { |
| }
| | box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px; |
| | background-color: rgb(250, 250, 250); |
| | padding: 1rem .75rem; |
| | margin-top: 1rem; |
| | margin-bottom: 1rem; |
| | height: 9.5rem; |
| | width: 11.5rem; |
|
| |
|
| .launch-pack-page .lp2-foot-price{
| | border-top: 5px solid; |
| font-weight: 950;
| | border-radius: 8px; |
| letter-spacing: .2px;
| |
| }
| |
|
| |
|
| .launch-pack-page .lp2-foot-note{
| | display: flex; |
| font-size: 12px;
| | flex-direction: column; |
| opacity: .92;
| | justify-content: center; |
| white-space: nowrap;
| | align-items: center; |
| | transition: all .25s ease; |
| } | | } |
|
| |
|
| /* ====== Tiers (cores MAIS contrastadas) ====== */
| | h2.npcCard__title{ |
| /* PRATA: base mais “grafite frio”, texto branco */
| | border: none; |
| .launch-pack-page .lp2-card.is-silver{
| | font-size: 1.25rem !important; |
| --lp2-accent: linear-gradient(90deg, #5E6A86, #9BA9C9);
| | font-weight: 400; |
| --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 */
| | .npcCard__link { |
| .launch-pack-page .lp2-card.is-gold{ | | display: table; |
| --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 */
| | .npcCard__link:hover { |
| .launch-pack-page .lp2-card.is-bronze{
| | text-decoration: none !important; |
| --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;
| |
| } | | } |
|
| |
|
| /* =========================================
| | .npcCard__link:hover .npcCard { |
| Pets — OVERRIDE Roxo Claro (FORÇADO)
| | transform: scale(.98); |
| 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 */
| | .npcCard__portrait { |
| .pet-page.is-light .drops-inline{
| | padding: .55rem .8rem; |
| background:
| | border-radius: 50%; |
| radial-gradient(1200px 220px at 50% 0%,
| | margin-bottom: .5rem; |
| 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) */
| | .npcCard__list { |
| .pet-page.is-light .drops-inline:before,
| | display: flex; |
| .pet-page.is-light .drops-inline::before{
| | flex-wrap: wrap; |
| background:linear-gradient(180deg,
| | align-items: center; |
| 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;
| |
| } | | } |
|
| |
|
| /* Toggle expandir/ocultar (botão) */
| | .npcCard__list .npcCard { |
| .pet-page.is-light .drops-inline .mw-collapsible-toggle, | | margin-bottom: 1rem; |
| .pet-page.is-light .drops-inline .mw-collapsible-toggle a{
| |
| color:var(--pet-ink) !important;
| |
| } | | } |
|
| |
|
| .pet-page.is-light .drops-inline .mw-collapsible-toggle{ | | .npcCard__list a { |
| background:linear-gradient(180deg,
| | display: block; |
| rgba(255,255,255,.78),
| | margin-right: 1rem; |
| 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) */ | | /* Cartões dos NPCs - Cores */ |
| .pet-page.is-light .drops-inline .mw-collapsible-content{ | | .npcCard.default .npcCard__portrait { |
| background:var(--pet-surface) !important;
| | background-color: #f7eeff; |
| border:1px solid rgba(120,90,255,.14) !important;
| |
| border-radius:18px !important;
| |
| padding:14px !important;
| |
| margin:12px !important;
| |
| } | | } |
|
| |
|
| /* Tabela clara */
| | .npcCard.default { |
| .pet-page.is-light .pet-list-table{ | | border-color: #e89dff; |
| 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;
| |
| } | | } |
| | /* Cartões dos NPCs - Cores */ |
| | /* Cartões dos NPCs */ |
|
| |
|
| /* Cabeçalho */ | | /* Componente veja mais */ |
| .pet-page.is-light .pet-list-table th{ | | .seeMore { |
| background:linear-gradient(180deg,
| | height: 3.2rem; |
| rgba(120,90,255,.18), | | padding: .5rem .575rem; |
| rgba(120,90,255,.10)) !important;
| | border: 1px dashed #e89dff; |
| color:var(--pet-ink) !important;
| | background-color: #f9f2ff; |
| font-weight:900 !important;
| | border-radius: 12px; |
| text-align:center !important;
| | margin: 1rem auto 1rem 0px; |
| padding:12px 10px !important;
| |
| border-bottom:1px solid var(--pet-line) !important;
| |
| } | | } |
|
| |
|
| /* Células */
| | .flex-center .seeMore { |
| .pet-page.is-light .pet-list-table td{
| | margin: 0; |
| 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, | | .seeMore__image { |
| .pet-page.is-light .pet-list-table th:last-child{
| | text-align: center; |
| border-right:0 !important;
| | width: 2rem; |
| } | | } |
| | /* Componente veja mais */ |
|
| |
|
| /* Zebra suave */ | | /* Cartão*/ |
| .pet-page.is-light .pet-list-table tr:nth-child(even) td{ | | .card { |
| background:rgba(120,90,255,.04) !important;
| | background: white; |
| | box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em; |
| | padding-bottom: .2rem; |
| | margin-bottom: .75rem; |
| | border-radius: 8px; |
| } | | } |
|
| |
|
| /* Links (se tiver) */
| | .card-title { |
| .pet-page.is-light a{ | | text-align: center; |
| color:#3f3bd9 !important;
| | background-color: #944EC7; |
| | color: white; |
| | padding: .25rem 1rem; |
| | letter-spacing: .03rem; |
| | font-size: 1.15rem; |
| | font-weight: bold; |
| | border-radius: 8px 8px 0 0; |
| } | | } |
|
| |
|
| /* Pixel art nítida */
| | .card-container { |
| .pet-page.is-light .pet-list-table img{
| | padding: .75rem 1rem; |
| image-rendering:pixelated;
| |
| } | | } |
|
| |
|
| /* ========================================= | | /* Cartão */ |
| PETS (tema roxo-claro) — pill + tabela interna
| |
| Alvo: <div class="pet-page is-light"> ... drops-inline is-pet*
| |
| ========================================= */
| |
|
| |
|
| .pet-page.is-light .drops-inline{
| | /*Navegação rápida*/ |
| /* base clara */
| | .linkWithIcon__link { |
| background: linear-gradient(180deg,#fbf9ff 0%, #f3eeff 100%) !important;
| | display: flex; |
| border: 1px solid rgba(120,90,230,.22) !important;
| | flex-direction: column; |
| border-radius: 22px !important;
| | align-items: center; |
| box-shadow: 0 14px 34px rgba(35,12,70,.10) !important;
| | justify-content: center; |
| } | | } |
|
| |
|
| /* se você tiver algum ::after antigo fazendo “glow feio”, desliga */
| | .linkWithIcon__imageContainer { |
| .pet-page.is-light .drops-inline::after{
| | height: 10rem; |
| content: none !important;
| | box-sizing: border-box; |
| | padding: 1rem; |
| | display: flex; |
| | align-items: flex-end; |
| } | | } |
|
| |
|
| /* ====== VARIAÇÃO POR CATEGORIA (só muda a PILL) ====== */
| | .linkWithIcon__imageContainer img { |
| .pet-page.is-light .drops-inline.is-pet120{ --pet-pill1:#1f0b4d; --pet-pill2:#5a2bd6; }
| | width: 100%; |
| .pet-page.is-light .drops-inline.is-pet60 { --pet-pill1:#151241; --pet-pill2:#3a43d2; }
| | margin-bottom: .2rem; |
| .pet-page.is-light .drops-inline.is-pet30 { --pet-pill1:#1b0f3f; --pet-pill2:#7a35d8; }
| | height: auto; |
| .pet-page.is-light .drops-inline.is-pet10 { --pet-pill1:#2a1552; --pet-pill2:#9a57ff; }
| | max-height: 9rem; |
| | |
| /* ====== 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 ] */
| | .linkWithIcon__link img{ |
| .pet-page.is-light .drops-inline .mw-collapsible-toggle{
| | height: 100%; |
| 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 ====== */
| | .linkWithIcon__link span { |
| .pet-page.is-light .drops-inline .mw-collapsible-content{ | | font-size: 1rem; |
| background: rgba(255,255,255,.55) !important;
| | font-weight: bold; |
| border: 1px solid rgba(120,90,230,.18) !important;
| | margin-top: .5rem; |
| 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) ====== */
| | .fastNav__linksContainer { |
| .pet-page.is-light .pet-list-table{ | | margin-top: 1rem; |
| width: 100% !important;
| | margin-bottom: 1rem; |
| border-collapse: separate !important;
| | display: flex; |
| border-spacing: 0 !important;
| | gap: 2rem 0; |
| | | flex-wrap: wrap; |
| background: #f7f3ff !important;
| | justify-content: space-between; |
| border: 1px solid rgba(120,90,230,.30) !important;
| | align-items: flex-start; |
| border-radius: 16px !important;
| |
| overflow: hidden !important;
| |
| } | | } |
|
| |
|
| /* header */ | | /*Prevent paragraph spacement*/ |
| .pet-page.is-light .pet-list-table th{ | | .fastNav__linksContainer p { |
| background: linear-gradient(180deg, rgba(120,90,230,.18), rgba(120,90,230,.12)) !important;
| | display: none; |
| 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;
| | .fastNav__linksContainer a:not([href]) { |
| border-right: 1px solid rgba(120,90,230,.18) !important;
| | display: none; |
| } | | } |
| .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 */
| | .fastNav__linksContainer .linkWithIcon__link, |
| .pet-page.is-light .pet-list-table tr:nth-child(even) td,
| | .fastNav__linksContainer a{ |
| .pet-page.is-light .pet-list-table tr:nth-child(odd) td{ | | width: 19.5%; |
| background: #f7f3ff !important;
| | max-width: 13rem; |
| | padding: .65rem; |
| | box-sizing: border-box; |
| } | | } |
|
| |
|
| /* ================================
| | .fastNav__linksContainer a img { |
| Launch Packs (lp2) - Premium
| | width: 100%; |
| ================================ */
| | height: auto; |
| | |
| .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{ | | /*Navegação rápida*/ |
| display: grid;
| | .initialPage__container { |
| grid-template-columns: repeat(3, minmax(240px, 1fr));
| | max-width: 1650px; |
| gap: 16px;
| |
| align-items: stretch;
| |
| } | | } |
|
| |
|
| .lp2-card{ | | .initialPage__contentContainer { |
| display: flex; /* <<< isso fixa o footer */
| | display: flex; |
| flex-direction: column; /* <<< */
| | align-items: flex-start; |
| overflow: hidden; /* <<< garante borda certinha */
| | justify-content: flex-start; |
| border-radius: 22px;
| | padding: 0 1rem; |
| background: #fff;
| | box-sizing: border-box; |
| border: 1px solid rgba(120,95,230,.22);
| |
| box-shadow: 0 16px 44px rgba(50, 30, 110, .14);
| |
| } | | } |
|
| |
|
| /* Topo vira “faixa imagem” */
| | .initialPage__mainContent { |
| .lp2-head{ | | margin-top: 2.5rem; |
| padding: 0;
| | padding: 0 2rem; |
| margin: 0;
| | box-sizing: border-box; |
| background: none;
| | width: 75%; |
| border-bottom: 1px solid rgba(120,95,230,.18);
| |
| } | | } |
|
| |
|
| /* MediaWiki costuma colocar wrapper <a> e <img class="mw-file-element"> */
| | .initialPage__sideContent { |
| .lp2-head a{
| | margin-top: 2.5rem; |
| display: block;
| | width: 25%; |
| line-height: 0;
| | padding: 0 1rem; |
| | box-sizing: border-box; |
| } | | } |
|
| |
|
| .lp2-head .mw-file-element, | | .initialPage__welcomeBadge { |
| .lp2-headimg{
| | text-align: center; |
| display: block;
| |
| width: 100% !important;
| |
| height: auto !important;
| |
| } | | } |
|
| |
|
| /* Garantir cantos do banner batendo com o card */
| | .initialPage__welcomeBadgeImg { |
| .lp2-head .mw-file-element{
| | max-width: 800px; |
| border-radius: 22px 22px 0 0;
| | width: 100%; |
| | border-radius: 12px; |
| } | | } |
|
| |
|
| /* Corpo cresce e empurra o footer pra baixo */
| | .initialPage__highlightCardContainer { |
| .lp2-body{ | | display: flex; |
| flex: 1 1 auto;
| | justify-content: space-between; |
| padding: 14px 16px 10px;
| | align-items: center; |
| | padding: 0 .5rem; |
| | margin-bottom: 1.5rem; |
| | gap: 1.5rem; |
| } | | } |
|
| |
|
| .lp2-sub{ | | .initialPage__highlightCard { |
| font-weight: 800;
| | flex: 1; |
| margin: 6px 0 10px;
| | max-width: 19rem; |
| opacity: .95;
| | min-width: 14rem; |
| } | | } |
|
| |
|
| .lp2-list{ | | .initialPage__highlightCard .badge-img { |
| margin: 0;
| | cursor: pointer; |
| padding: 0;
| |
| list-style: none;
| |
| } | | } |
|
| |
|
| .lp2-list li{ | | .badge-img { |
| display: flex;
| | box-shadow: rgb(67 71 85 / 27%) 0px 0px 0.25em, rgb(90 125 188 / 5%) 0px 0.25em 1em; |
| align-items: center;
| | border-radius: 12px; |
| gap: 8px;
| | width: 100%; |
| padding: 6px 0;
| | transition: transform .35s ease; |
| border-bottom: 1px dashed rgba(120,95,230,.18);
| |
| } | | } |
|
| |
|
| .lp2-list li:last-child{ | | /*Social media*/ |
| border-bottom: 0;
| | .socialMedia__title { |
| | font-weight: bold; |
| | font-size: 1.25rem; |
| | display: block; |
| | text-align: center; |
| | margin-top: 1rem; |
| | color: #747176; |
| | letter-spacing: .02rem; |
| } | | } |
|
| |
|
| /* Footer com cor por tier (premium, mas claro) */
| | .socialMedia__linkContainer { |
| .lp2-card.is-bronze .lp2-foot{
| | display: flex; |
| background: linear-gradient(180deg, rgba(196,120,70,.20), rgba(196,120,70,.38));
| | flex-direction: column; |
| }
| | align-items: center; |
| | | justify-content: center; |
| .lp2-card.is-silver .lp2-foot{
| | gap: .65rem; |
| background: linear-gradient(180deg, rgba(120,140,170,.20), rgba(120,140,170,.38));
| | margin-top: .5rem; |
| }
| |
| | |
| .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,
| |
| .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 */
| | a.socialMedia__link img { |
| .eden-loja-mvp table.eden-loja-table{
| | width: 100%; |
| width: 100%;
| | max-width: 16rem; |
| margin: 0;
| | height: auto; |
| border-collapse: separate;
| | border-radius: 12px; |
| border-spacing: 0;
| | filter: grayscale(.5); |
| border: 1px solid rgba(140,110,240,.28);
| | |
| border-radius: 16px;
| | transition: all .25s ease; |
| overflow: hidden;
| |
| background: rgba(255,255,255,.40);
| |
| } | | } |
|
| |
|
| .eden-loja-mvp table.eden-loja-table th{ | | a.socialMedia__link:hover img{ |
| padding: 12px 10px;
| | filter: grayscale(0); |
| text-align: center;
| | transform: scale(.98); |
| 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{ | | /* Indice da pagina inicial */ |
| padding: 10px 12px;
| | .initialPage__indexContent { |
| border-top: 1px solid rgba(140,110,240,.18);
| | margin-bottom: .75rem; |
| vertical-align: middle;
| |
| } | | } |
|
| |
|
| .eden-loja-mvp table.eden-loja-table tr:first-child td{ | | .initialPage__indexLinks { |
| border-top: none;
| | display: block; |
| | border-bottom: 2px dotted gray; |
| | padding-bottom: .5rem; |
| } | | } |
|
| |
|
| /* ================================ | | /* Formulario poll daddy */ |
| Turn In / Éden — ajustes finais
| | .css-box.pds-box { |
| ================================ */
| | width: 100%!important; |
| | | max-width: 300px; |
| /* 1) Estreitar a caixa (não ocupar a tela toda) */
| | margin: 0 auto !important; |
| .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) */ | | /*Topico componente*/ |
| .eden-loja-mvp .eden-npc-wrap{ | | .initialPage__topicContainer { |
| display: flex;
| | display: block; |
| justify-content: center;
| | width: 30rem; |
| margin: 8px 0 16px;
| | aspect-ratio: 1 / .27; |
| | display: flex; |
| | align-items: stretch; |
| | border: 5px solid transparent; |
| | border-image: url('https://wiki.pokexgames.com/images/9/9a/Borda-wiki.png') 15 stretch; |
| } | | } |
|
| |
|
| .eden-loja-mvp .eden-npc-card{ | | .initialPage__topicContainer h4 { |
| width: min(380px, 100%);
| | font-size: 1.3rem; |
| text-align: center;
| | 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{ | | .initialPage__topicContainer p { |
| font-weight: 900;
| | font-size: 1rem; |
| letter-spacing: .06em;
| | text-align: center; |
| text-transform: uppercase;
| |
| margin-bottom: 8px;
| |
| } | | } |
|
| |
|
| .eden-loja-mvp .eden-npc-loc{ | | .initialPage__topicImage { |
| font-size: 12px;
| | width: 55%; |
| font-weight: 900;
| | height: unset; |
| letter-spacing: .12em;
| | margin-right: .5rem; |
| text-transform: uppercase;
| |
| opacity: .85;
| |
| margin-bottom: 10px;
| |
| } | | } |
|
| |
|
| /* pill /navi (no mesmo estilo “copiável”) */
| | .initialPage__topicContainer img { |
| .eden-loja-mvp .eden-navi-pill{ | | width: 100%; |
| display: inline-block;
| | height: 100%; |
| margin-top: 10px;
| | |
| padding: 8px 14px 8px 30px;
| | border-right: 5px solid transparent; |
| border-radius: 999px;
| | border-image: url('https://wiki.pokexgames.com/images/9/9a/Borda-wiki.png') 15 stretch; |
| 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{ | | .initialPage__topicContent { |
| content: "⌖";
| | width: 100%; |
| position: absolute;
| | padding: .5rem; |
| left: 10px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| opacity: .85;
| |
| } | | } |
|
| |
|
| /* 3) Fix do toggle do mw-collapsible (ficar no header, canto direito) */ | | /*Formulario de boost*/ |
| .eden-loja-mvp .eden-loja-sec{ | | .boostCalc__form { |
| position: relative;
| | width: 35rem; |
| } | | margin: 0 auto; |
| | box-sizing: border-box; |
| | } |
|
| |
|
| .eden-loja-mvp .eden-loja-sec > .mw-collapsible-toggle{ | | .input-group { |
| position: absolute;
| | position: relative; |
| right: 14px;
| | margin-top: 2rem; |
| top: 12px; /* ajusta fino se quiser */
| | } |
| z-index: 2;
| |
| font-weight: 800;
| |
| } | |
|
| |
|
| .eden-loja-mvp .eden-loja-sec > .loja-card-title{ | | .checkbox-group { |
| padding-right: 110px; /* espaço pro [Mostrar/Ocultar] */
| | margin-top: .35rem; |
| } | | padding-left: .7rem; |
| | display: flex; |
| | justify-content: flex-start; |
| | align-items: center; |
| | } |
|
| |
|
| .eden-loja-mvp .eden-loja-sec{ | | .checkbox-group label { |
| align-self: start;
| | padding-left: .35rem; |
| height: fit-content;
| | font-size: .8rem; |
| } | | padding-top: .15rem; |
| | letter-spacing: .02rem; |
| | color: #6e6e6e; |
| | font-weight: bold; |
| | } |
|
| |
|
| /* =========================================================
| | .boostCalc__label { |
| RagnaTrue — drops-inline: remover a listra (top line)
| | position: absolute; |
| Use: <div class="drops-inline rt-no-topline ...">
| | left: .5rem; |
| ========================================================= */
| | top: 50%; |
| | transform: translate(0%, -50%); |
| | font-size: .95rem; |
| | color: #626262; |
| | pointer-events: none; |
| | transition: all .25s ease; |
| | } |
|
| |
|
| .drops-inline.rt-no-topline > .mw-collapsible-content{ | | .boostCalc__input, |
| border-top: 0 !important;
| | .boostCalc__select { |
| } | | position: relative; |
| | width: 100%; |
| | box-sizing: border-box; |
| | padding: .65rem 1.1rem; |
| | border: 1px solid #ced4da; |
| | border-radius: 8px; |
| | font-size: 1.2rem; |
| | transition: all .25s ease; |
| | } |
|
| |
|
| /* =========================================================
| | .boostCalc__input:focus { |
| RT — Colapsível com pill + botão "Mostrar" padronizados
| | border-color: #80bdff; |
| Use adicionando a classe: .rt-coll-uniform
| | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); |
| ========================================================= */
| | outline: 0; |
| | } |
|
| |
|
| .drops-inline.rt-coll-uniform{ | | .boostCalc__input:focus, |
| /* ajuste fino por variável (pode sobrescrever por inline style) */
| | .boostCalc__input:not(:placeholder-shown) { |
| --rt-pill-w: 340px; /* largura da pill */
| | background: rgba(0, 123, 255, .035); |
| --rt-toggle-w: 120px; /* largura do "Mostrar" */
| | } |
|
| |
|
| display: flex;
| | .boostCalc__input:focus+.boostCalc__label, |
| align-items: center;
| | .boostCalc__input:not(:placeholder-shown)+.boostCalc__label, |
| justify-content: center;
| | .boostCalc__select:focus+.boostCalc__label, |
| gap: 12px;
| | .boostCalc__select:not(:placeholder-shown)+.boostCalc__label { |
| | top: -.7rem; |
| | font-size: .9rem; |
| | } |
| | |
| | .boostTo-container { |
| | margin-top: 2rem; |
| | display: flex; |
| | justify-content: space-around; |
| | align-items: center; |
| | } |
|
| |
|
| /* mantém o “roxinho claro” e o layout limpo */
| | .boostTo-container div { |
| padding: 10px 14px;
| | width: 28%; |
| } | | } |
|
| |
|
| /* A pill (badge) é o ::before do drops-inline */
| | .boostTo-container .input-group { |
| .drops-inline.rt-coll-uniform::before{ | | margin-top: 0; |
| display: inline-flex;
| | width: 35%; |
| align-items: center;
| | } |
| justify-content: center;
| |
|
| |
|
| min-width: var(--rt-pill-w);
| | .boostTo-container div img { |
| text-align: center;
| | width: 100%; |
| | padding: 0 1.8rem; |
| | box-sizing: border-box; |
| | } |
| | |
| | .boostCalc__resultContainer { |
| | text-align: center; |
| | background: #ffffff; |
| | width: 32rem; |
| | margin: 0 auto; |
| | padding: 1rem; |
| | padding-top: .35rem; |
| | border-radius: 12px; |
| | border-color: #80bdff; |
| | box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); |
| | outline: 0; |
| | } |
| | |
| | .boostCalc__resultTitle { |
| | margin: 0; |
| | font-size: 1.2rem !important; |
| | padding: 0; |
| | color: #4c4b4b; |
| | font-weight: bolder; |
| | } |
| | |
| | .boostCalc__result { |
| | font-weight: 500; |
| | font-size: .925rem !important; |
| | } |
| | |
| | .boostCalc__result span { |
| | padding-right: .5rem; |
| | font-weight: bold; |
| | } |
| | /*Formulario de boost*/ |
|
| |
|
| white-space: nowrap;
| | .input-default { |
| overflow: hidden;
| | position: relative; |
| text-overflow: ellipsis;
| | width: 100%; |
| | box-sizing: border-box; |
| | padding: .45rem .8rem; |
| | border: 1px solid #ced4da; |
| | border-radius: 8px; |
| | font-size: .9rem; |
| | transition: all .25s ease; |
| } | | } |
|
| |
|
| /* Botão Mostrar/Ocultar */
| | .input-default:focus { |
| .drops-inline.rt-coll-uniform .mw-collapsible-toggle{
| | border-color: #80bdff; |
| display: inline-flex;
| | box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25); |
| align-items: center;
| | outline: 0; |
| 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 */
| | @media screen and (max-width: 1450px) { |
| #rt-skills-wrap .drops-inline{
| | .linkWithIcon__imageContainer { |
| background: rgba(123, 92, 255, .05);
| | height: 8rem; |
| 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 */
| | @media screen and (max-width: 1360px) { |
| #rt-skills-wrap .mw-collapsible-content{
| | html { |
| margin-top: 10px;
| | font-size: 14px; |
| | } |
| } | | } |
|
| |
|
| /* card interno (onde fica a tabela) menos “branco estourado” */
| | @media screen and (max-width: 1250px) { |
| #rt-skills-wrap .eden-quests-card{
| | .initialPage__mainContent { |
| background: rgba(251, 248, 255, .92);
| | padding: 0; |
| border: 1px solid rgba(123, 92, 255, .16);
| | } |
| border-radius: 16px;
| | |
| box-shadow: 0 12px 28px rgba(76, 29, 149, .10);
| | .fastNav__linksContainer { |
| | gap: .5rem 0; |
| | margin-top: 0; |
| | } |
| } | | } |
|
| |
|
| /* tabela com acabamento (fica “destacadinha”) */
| | @media screen and (max-width: 1150px) { |
| #rt-skills-wrap .eden-quests-table{
| | .initialPage__contentContainer { |
| border-collapse: separate !important;
| | flex-direction: column; |
| border-spacing: 0 !important;
| | align-items: center; |
| border-radius: 14px;
| | } |
| overflow: hidden;
| | |
| box-shadow: 0 10px 22px rgba(76, 29, 149, .08);
| | .initialPage__mainContent, |
| | .initialPage__sideContent { |
| | width: 100%; |
| | padding: 0 3rem; |
| | } |
| | |
| | .fastNav__linksContainer { |
| | gap: 1.5rem 0; |
| | padding: 1.5rem 1rem; |
| | } |
| | |
| | .fastNav__linksContainer .linkWithIcon__link, .fastNav__linksContainer a { |
| | max-width: 9.95rem; |
| | } |
| | |
| | .socialMedia__linkContainer { |
| | flex-direction: row; |
| | } |
| } | | } |