/* ===================================================================== Pandot | tema do site (19/10/2026) Artes novas do Pandot (pandot-artes\NOVO ASSETS SITE), cortadas pelo tools/pandot/site-tema-assets_V1.py para images/tema. A estrutura do template e a mesma (logo, login, menus, caixa do meio, caixas da direita): muda o aspeto, no estilo do RubinOT. caixa-cabecalho.webp titulo das caixas laterais (header2.2) caixa-cabecalho-entrar so a caixa Entrar / Minha conta (header2.4) menu-cabecalho.webp so os cabecalhos dos menus (header2.3) caixa-topo/meio/base corpo das caixas (o meio repete, os cantos nunca deformam) pagina-cabecalho-* titulo das caixas do meio barra-topo-* barra de cima (download, online, idioma) pandoria.svg + gif arco animado (v2) com o monstro, no alto da direita Fontes: Cinzel (titulos) e Inter (texto), servidas pelo proprio site (fonts/, licenca OFL), sem pedidos ao Google. ===================================================================== */ @font-face { font-family: 'Cinzel'; src: url('fonts/cinzel-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* Algarismos dos separadores das secoes: o Inter, um pouco menor. No Cinzel o 1 parece um I (Tibia I5.25); o resto do titulo continua em Cinzel. */ @font-face { font-family: 'Pandot Numeros'; src: url('fonts/inter-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; unicode-range: U+0030-0039; size-adjust: 92%; } /* Rye (Sorkin Type, OFL): so nas letras de faroeste do Cartaz de Procurados */ @font-face { font-family: 'Rye'; src: url('fonts/rye-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } :root { --pandot-creme: #f0e6d2; --pandot-texto: #3b2a17; --pandot-texto-suave: #6b5236; --pandot-teal: #1a9fb3; --pandot-teal-escuro: #155f70; --pandot-link: #17697d; --pandot-link-hover: #a35f1f; --pandot-bronze: #9a6a3a; --pandot-titulo: 'Cinzel', Georgia, 'Times New Roman', serif; --pandot-texto-fonte: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --pandot-sombra-titulo: 1px 1px 2px rgba(0, 0, 0, .85), 0 0 8px rgba(0, 0, 0, .35); /* botao principal (Entrar, Enviar...) e o secundario (Criar conta) */ --pandot-btn1-fundo: linear-gradient(#2a6f86, #1b5368 55%, #123d4e); --pandot-btn1-borda: #7cc9d6; --pandot-btn1-texto: #f2fbfd; --pandot-btn1-brilho: inset 0 1px 0 rgba(170, 240, 250, .35), inset 0 -1px 0 rgba(0, 0, 0, .35); --pandot-btn2-fundo: linear-gradient(#9c7549, #7e5933 55%, #614224); --pandot-btn2-borda: #46301a; --pandot-btn2-texto: #f6ecd6; } /* O basic.css do MyAAC poe um contorno pontilhado em tudo o que recebe foco, tambem com o rato (ao clicar no logo ficava uma caixa quadrada). O contorno fica so para quem navega com o teclado (:focus-visible). */ :focus:not(:focus-visible) { outline: none; } /* --------------------------------------------------------------------- Fundo: a arte fica parada no ecra inteiro e o site corre por cima (como nos sites de Tibia). Uma camada fixa, que funciona tambem nos telemoveis (o background-attachment: fixed nao funciona em todos). --------------------------------------------------------------------- */ body { background-color: #102533; } /* coluna: o conteudo ocupa o espaco e o rodape fica sempre no fim do ecra, mesmo nas paginas curtas */ #ArtworkHelper { background: none !important; display: flex; flex-direction: column; min-height: 100vh; height: auto; } #Bodycontainer { flex: 1 0 auto; height: auto; } #PandotRodape { flex: 0 0 auto; } /* Forja Imperial (19/10, backgrounds\02-forja-imperial.png): a 90% a cara do panda fica na margem da direita em 1920 e o dragao voa entre o logo e a Pandoria. A arte e mais larga do que os ecras, por isso a altura manda (a posicao vertical quase nunca conta). */ #PandotFundo { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; background: #102533 url('images/tema/fundo-forja-imperial.webp?v=1') 90% 30% / cover no-repeat; } #PandotFundo::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(8, 22, 32, .04), rgba(8, 22, 32, .22) 70%, rgba(8, 22, 32, .38)); } /* --------------------------------------------------------------------- Caixas: cabecalho (header) + corpo (body cortado em 3) --------------------------------------------------------------------- */ .pandot-caixa-cabecalho { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; width: 226px; height: 31px; margin: 0 auto; box-sizing: border-box; padding: 0 44px 1px; background: url('images/tema/caixa-cabecalho.webp') 0 0 / 100% 100% no-repeat; } .pandot-caixa-cabecalho h2, .pandot-menu-titulo { /* line-height 1.6: com 1 o "overflow: hidden" cortava os acentos das maiusculas (o I de Noticias) */ margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 13px/1.6 var(--pandot-titulo); letter-spacing: .05em; text-transform: uppercase; color: var(--pandot-creme); text-shadow: var(--pandot-sombra-titulo); /* A Cinzel tem descendente grande (372 em 1000): com a linha centrada, as maiusculas ficavam 1 px acima do meio da barra (mais espaco em baixo do que em cima, no ENTRAR via-se bem). Desce 1 px. */ position: relative; top: 1px; } .pandot-caixa { position: relative; z-index: 0; box-sizing: border-box; width: 206px; min-height: 92px; margin: -5px auto 0; padding: 13px 0 14px; background: url('images/tema/caixa-meio.webp') 0 0 / 100% auto repeat-y; background-clip: content-box; background-origin: content-box; } /* o basic.css poe "no-repeat" em todos os div das caixas da direita */ #ThemeboxesColumn .pandot-caixa, #MenuColumn .pandot-caixa { background-repeat: repeat-y; } .pandot-caixa::before, .pandot-caixa::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; pointer-events: none; background-repeat: no-repeat; background-size: 100% 100%; } .pandot-caixa::before { top: 0; aspect-ratio: 412 / 89; background-image: url('images/tema/caixa-topo.webp'); } .pandot-caixa::after { bottom: 0; aspect-ratio: 412 / 92; background-image: url('images/tema/caixa-base.webp'); } .pandot-caixa-dentro { position: relative; z-index: 1; padding: 0 15px; font: 400 12px/1.45 var(--pandot-texto-fonte); color: var(--pandot-texto); text-align: left; } .pandot-caixa-centro { text-align: center; } .pandot-caixa-dentro p { margin: 2px 0 10px; } .pandot-caixa-vazia { color: var(--pandot-texto-suave); font-style: italic; text-align: center; } .pandot-caixa-mais { display: block; margin-top: 6px; text-align: center; font: 600 11px/1.3 var(--pandot-texto-fonte); color: var(--pandot-link) !important; text-decoration: none; } .pandot-caixa-mais:hover { color: var(--pandot-link-hover) !important; text-decoration: underline; } /* --------------------------------------------------------------------- Botoes (como no RubinOT: entrar azul, criar conta bronze, baixar verde) --------------------------------------------------------------------- */ .pandot-botao { display: flex; align-items: center; justify-content: center; gap: 7px; box-sizing: border-box; width: 100%; height: 29px; margin: 0 0 7px; padding: 0 10px; border: 1px solid; border-radius: 2px; cursor: pointer; font: 600 11.5px/1 var(--pandot-texto-fonte); letter-spacing: .02em; text-decoration: none !important; text-shadow: 0 1px 1px rgba(0, 0, 0, .45); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 4px rgba(0, 0, 0, .28); transition: filter .15s ease, transform .15s ease; } .pandot-botao:hover { filter: brightness(1.12) saturate(1.05); } .pandot-botao:active { transform: translateY(1px); } .pandot-botao:focus-visible { outline: 2px solid #f0d79e; outline-offset: 2px; } .pandot-botao svg { width: 15px; height: 15px; flex: none; } .pandot-botao-azul { background: var(--pandot-btn1-fundo); border-color: var(--pandot-btn1-borda); color: var(--pandot-btn1-texto) !important; box-shadow: var(--pandot-btn1-brilho), 0 2px 4px rgba(0, 0, 0, .28); } .pandot-botao-bronze { background: var(--pandot-btn2-fundo); border-color: var(--pandot-btn2-borda); color: var(--pandot-btn2-texto) !important; } .pandot-botao-verde { background: linear-gradient(#41a454, #2d823d 55%, #1f622d); border-color: #154820; color: #fff !important; } /* --------------------------------------------------------------------- Pandoria (coluna da direita, por cima do Boosted) --------------------------------------------------------------------- */ /* v2: arte animada em SVG (1024x1244 desenhado). v3 (19/10): o arco um pouco mais pequeno (204x248, centrado na coluna de 226) e o monstro um pouco maior (76 px, de pe no pedestal). v4: monstro com 86 px, os pes no mesmo sitio (169 px) e o brilho do pedestal um pouco mais largo. */ #PandotPandoria { position: relative; width: 226px; height: 248px; margin: 0 0 6px; } #PandotPandoria picture { display: block; } #PandotPandoria .pandoria-arco { display: block; width: 204px; height: 248px; margin: 0 auto; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .55)); } /* brilho no pedestal, por baixo do monstro */ #PandotPandoria::before { content: ""; position: absolute; left: 50%; top: 161px; width: 74px; height: 14px; margin-left: -37px; z-index: 1; border-radius: 50%; pointer-events: none; background: radial-gradient(ellipse at center, rgba(160, 110, 255, .45), rgba(160, 110, 255, .1) 55%, rgba(160, 110, 255, 0) 72%); animation: pandot-brilho 3.2s ease-in-out infinite; } #PandotPandoria .pandoria-monstro { position: absolute; left: 50%; top: 83px; z-index: 2; width: 86px; height: 86px; margin-left: -43px; filter: drop-shadow(0 0 7px rgba(140, 90, 255, .5)); animation: pandot-flutuar 3.2s ease-in-out infinite; } @keyframes pandot-flutuar { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes pandot-brilho { 0%, 100% { opacity: .75; } 50% { opacity: 1; } } /* --------------------------------------------------------------------- Loja (coluna da direita, por cima do Boosted): obter Panda Coins O cabecalho e o das outras caixas com o azul passado a vermelho e as pedras a ouro (caixa-cabecalho-loja.webp); a arte e a Forja Imperial do fundo do site (loja-forja.webp). Plugin pandot-pagamentos/caixa-loja.php. --------------------------------------------------------------------- */ #ThemeboxesColumn .pandot-loja-cabecalho { background-image: url('images/tema/caixa-cabecalho-loja.webp?v=1'); } .pandot-loja-cabecalho h2 { display: inline-flex; align-items: center; gap: 9px; color: #f6dc8c; } .pandot-loja-cabecalho h2::before, .pandot-loja-cabecalho h2::after { content: ""; flex: none; width: 5px; height: 5px; background: #e9c062; transform: rotate(45deg); box-shadow: 0 0 5px rgba(233, 192, 98, .85); } /* um pouco mais largo do que as outras caixas (12 px de cada lado em vez de 15): o "OBTENER PANDA COINS" cabe numa linha */ #ThemeboxesColumn .pandot-loja { padding: 0 12px; } .pandot-loja-arte { position: relative; display: block; overflow: hidden; line-height: 0; border-radius: 3px; border: 1px solid #6b3f1c; background: #1d120b; box-shadow: 0 2px 7px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(246, 220, 140, .2); } .pandot-loja-arte img { display: block; width: 100%; height: auto; transition: transform .4s ease, filter .4s ease; } .pandot-loja-arte::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(24, 9, 4, .86), rgba(24, 9, 4, .4) 40%, rgba(24, 9, 4, 0) 62%); } .pandot-loja-frase { position: absolute; top: 8px; left: 8px; right: 8px; z-index: 1; font: 700 12.5px/1.25 var(--pandot-titulo); letter-spacing: .03em; text-align: center; color: #f6dc8c; text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 8px rgba(0, 0, 0, .6); } .pandot-loja-arte:hover img { transform: scale(1.05); filter: brightness(1.1) saturate(1.06); } .pandot-botao-ouro { background: linear-gradient(#f6c75a, #e09a2a 52%, #b8641c); border-color: #6e3a10; color: #fffaf0 !important; text-shadow: 0 1px 1px rgba(80, 32, 0, .8); box-shadow: inset 0 1px 0 rgba(255, 244, 200, .55), inset 0 -1px 0 rgba(90, 40, 0, .45), 0 2px 5px rgba(0, 0, 0, .3); } .pandot-loja-botao { height: 34px; margin: 9px 0 2px; padding: 0 6px; gap: 6px; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; } /* a Panda Coin oficial (images/tema/panda-coin-48.webp) */ .pandot-loja-botao .pandot-loja-moeda { flex: none; width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); } /* Pacote Pandot Lancamento (01/11 a 15/11/2026, pacote-lancamento.php): a arte do pacote no lugar da forja e a data por baixo */ .pandot-loja-pacote .pandot-loja-arte { border-color: #8a5f1c; } .pandot-loja-pacote .pandot-loja-arte::after { background: linear-gradient(rgba(24, 9, 4, .8), rgba(24, 9, 4, 0) 34%); } .pandot-loja-ate { margin: 7px 0 0; text-align: center; font: 700 11.5px/1.3 var(--pandot-titulo); letter-spacing: .03em; color: #8a2f1f; } @media (prefers-reduced-motion: reduce) { .pandot-loja-arte img { transition: none; } .pandot-loja-arte:hover img { transform: none; } } /* --------------------------------------------------------------------- Lateral esquerda: login e menus --------------------------------------------------------------------- */ #Loginbox { position: relative; left: 0; top: 0; width: 226px; margin: 0 0 12px; } /* Entrar / Minha conta: cabecalho proprio, mais alto (header2.4-entrar, 226x41: a barra vai de 6 a 35 px, os arabescos passam por cima e por baixo). Os menus tem o header2.3 e as outras caixas o header2.2. O corpo entra 10 px por baixo da barra, como os outros entram 5. */ #Loginbox .pandot-caixa-cabecalho { height: 41px; padding: 0 34px 1px; background-image: url('images/tema/caixa-cabecalho-entrar.webp?v=1'); } #Loginbox .pandot-caixa { margin-top: -10px; } #Loginbox .pandot-login { padding: 4px 15px 0; } #Loginbox .pandot-login .pandot-botao:last-child { margin-bottom: 2px; } .pandot-botao-download { width: 206px; height: 36px; margin: 9px auto 0; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; } .pandot-botao-download svg { width: 17px; height: 17px; } /* Menus: cabecalho (a arte do header) e corpo, como no RubinOT. O corpo fica dentro de uma "mola" (grid de 0fr a 1fr) que abre e fecha com animacao: a pagina nao salta. A mola sobe 15 px e o corpo desce 10, por isso a moldura do corpo entra 5 px por baixo do cabecalho. */ #Menu { left: 0; } #MenuTop, #MenuBottom { display: none; } /* fechado: 22 px por baixo (a mola sobe 15) = 7 px entre cabecalhos; aberto, a mola ocupa o corpo e o espaco por baixo da caixa fica tambem curto (8) */ #Menu .menuitem { margin: 0; padding: 0 0 22px; } #Menu .menuitem.pandot-aberto { padding-bottom: 8px; } #Menu.pandot-menu-pronto .menuitem { transition: padding-bottom .24s ease; } #Menu .pandot-menu-botao { display: block; position: relative; z-index: 2; cursor: pointer; outline: 0; -webkit-tap-highlight-color: transparent; } #Menu .pandot-menu-botao:focus-visible .MenuButton { outline: 2px solid #f0d79e; outline-offset: 1px; border-radius: 4px; } /* So os menus usam o header2.3 (moldura com pedras nos cantos); as caixas laterais continuam no header2.2 e o Entrar no header2.4. */ #Menu .MenuButton { position: relative; z-index: 2; width: 226px; height: 31px; isolation: auto; background: url('images/tema/menu-cabecalho.webp?v=1') 0 0 / 100% 100% no-repeat !important; } /* o pandot.css antigo desenhava uma faixa azul por cima da arte */ #Menu .MenuButton::before { content: none !important; display: none !important; } /* titulo centrado na barra (o mesmo espaco dos dois lados; a seta fica no da direita) */ #Menu .MenuButton > div { position: absolute; top: 0; left: 0; right: 0; bottom: 0; box-sizing: border-box; padding: 0 36px 1px; display: flex; align-items: center; justify-content: center; } #Menu .MenuButton .Button, #Menu .MenuButton .Lights, #Menu .MenuButton .Icon, #Menu .MenuButton .Label { display: none !important; } /* seta dentro da barra do header2.3, entre as pedras dos cantos da direita, centro a 20 px da borda */ #Menu .MenuButton .Extend { position: absolute; top: 50%; right: 16px; left: auto; width: 6px; height: 6px; margin-top: -6px; background: none !important; border-right: 2px solid var(--pandot-creme); border-bottom: 2px solid var(--pandot-creme); transform: rotate(45deg); opacity: .8; transition: transform .24s ease, margin-top .24s ease; } #Menu .menuitem.pandot-aberto .MenuButton .Extend { transform: rotate(-135deg); margin-top: -2px; } #Menu .pandot-menu-botao:hover .pandot-menu-titulo { color: #fff; text-shadow: var(--pandot-sombra-titulo), 0 0 10px rgba(70, 230, 245, .55); } #Menu .pandot-menu-botao:hover .Extend { opacity: 1; } #Menu .pandot-submenu-mola { display: grid; grid-template-rows: 0fr; margin-top: -15px; } #Menu .menuitem.pandot-aberto .pandot-submenu-mola { grid-template-rows: 1fr; } #Menu .pandot-submenu-dentro { min-height: 0; overflow: hidden; visibility: hidden; } #Menu .menuitem.pandot-aberto .pandot-submenu-dentro { visibility: visible; } /* so depois de a pagina abrir (nada anima ao carregar) */ #Menu.pandot-menu-pronto .pandot-submenu-mola { transition: grid-template-rows .24s ease; } #Menu.pandot-menu-pronto .pandot-submenu-dentro { transition: visibility 0s linear .24s; } #Menu.pandot-menu-pronto .menuitem.pandot-aberto .pandot-submenu-dentro { transition: visibility 0s; } #Menu .Submenu.pandot-caixa { display: block; margin: 10px auto 0; width: 206px; background-color: transparent; font-family: var(--pandot-texto-fonte); } #Menu .Submenu > a { display: block; position: relative; z-index: 1; margin: 0 13px; text-decoration: none; } #Menu .Submenuitem { position: relative; padding: 8px 8px 8px 12px; border-bottom: 1px solid rgba(110, 75, 35, .17); transition: background-color .15s ease; } #Menu .Submenu > a:last-child .Submenuitem { border-bottom: 0; } #Menu .Submenuitem:hover { background-color: rgba(26, 159, 179, .13) !important; } #Menu .Submenuitem.pandot-ativo { background-color: rgba(26, 159, 179, .17); box-shadow: inset 3px 0 0 var(--pandot-teal); } #Menu .LeftChain, #Menu .RightChain, #Menu .ActiveSubmenuItemIcon { display: none !important; } #Menu .SubmenuitemLabel { margin: 0; padding: 0; border: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 12px/1.35 var(--pandot-texto-fonte); color: var(--pandot-teal-escuro) !important; text-shadow: none; } #Menu .Submenuitem:hover .SubmenuitemLabel { color: #0a3d4a !important; } #Menu .Submenuitem.pandot-ativo .SubmenuitemLabel { color: #0a3d4a !important; } /* --------------------------------------------------------------------- Coluna do meio: titulos e corpo das caixas (como o RubinOT: titulo das artes por cima de um pergaminho em gradiente) --------------------------------------------------------------------- */ #PandotLogoTopo, #PandotBarraTopo { display: none; } #ContentColumn .Content .Box { margin: 0 0 18px; border: 0; background: none; overflow: visible; } #ContentColumn .Content .Box > .Corner-tl, #ContentColumn .Content .Box > .Corner-tr, #ContentColumn .Content .Box > .Border_1, #ContentColumn .Content .Box > .BorderTitleText, #ContentColumn .Content .Box > .CornerWrapper-b { display: none; } #ContentColumn .Content .Box > .Title.pandot-titulo-pagina { position: relative; top: auto; left: auto; z-index: 2; display: flex; align-items: center; box-sizing: border-box; height: 38px; max-width: none; margin: 0; padding: 0 100px 1px 58px; /* pontas: esquerda 56,5 px, direita 94 px (os bambus da direita comecam a 88 px da borda); o meio estica entre elas (site-tema-assets_V1.py) */ background: url('images/tema/pagina-cabecalho-esq.webp?v=3') left top / auto 100% no-repeat, url('images/tema/pagina-cabecalho-dir.webp?v=3') right top / auto 100% no-repeat, url('images/tema/pagina-cabecalho-meio.webp?v=3') 56px 0 / calc(100% - 149px) 100% no-repeat; font: 700 14px/1 var(--pandot-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--pandot-creme); text-shadow: var(--pandot-sombra-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #ContentColumn .Content .Box > .Border_2 { position: relative; z-index: 1; margin: -5px 10px 0; padding: 0; background: linear-gradient(#f6e9cc, #efe0be 45%, #e6d3aa); border: 1px solid #b38d5b; border-top: 0; border-radius: 0 0 7px 7px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 -2px 5px rgba(80, 50, 20, .1), 0 4px 12px rgba(0, 0, 0, .38); } #ContentColumn .Content .Box > .Border_2 > .Border_3 { margin: 0; border: 0; } #ContentColumn .Content .BoxContent { background: none !important; background-image: none !important; background-color: transparent !important; min-height: 0; padding: 18px 20px 20px; font: 400 13px/1.6 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent td { color: var(--pandot-texto); } #ContentColumn .Content a { color: var(--pandot-link); } #ContentColumn .Content a:hover { color: var(--pandot-link-hover); } #News .BoxContent { min-height: 160px !important; } /* Ticker de noticias */ #newsticker .BoxContent { padding: 6px 12px 8px !important; } #newsticker .Row { border-bottom: 1px solid rgba(110, 75, 35, .16); } #newsticker .Row:last-child { border-bottom: 0; } #newsticker .Odd, #newsticker .Even { background: none !important; } #newsticker .Row:hover { background: rgba(26, 159, 179, .08); } #newsticker .NewsTickerText { font: 400 12px/1.5 var(--pandot-texto-fonte); color: var(--pandot-texto); } #newsticker .NewsTickerDate { color: var(--pandot-texto-suave); font-size: 11px; } /* o resumo tinha 14 px de altura fixa: em duas linhas (telemovel) as linhas ficavam umas por cima das outras */ #newsticker .NewsTickerShortText { height: auto !important; max-height: 3.1em; overflow: hidden; } #ContentColumn #newsticker .NewsTickerExtend { background-image: none !important; width: 6px; height: 6px; margin: 4px 6px 0 10px; border-right: 2px solid var(--pandot-teal-escuro); border-bottom: 2px solid var(--pandot-teal-escuro); transform: rotate(45deg); transition: transform .2s ease; } #ContentColumn #newsticker .NewsTickerExtend[style*="minus"] { transform: rotate(-135deg); margin-top: 8px; } #newsticker .NewsTickerIcon { top: 2px; } /* Noticias: titulo de cada noticia sobre o pergaminho (como no RubinOT) */ #ContentColumn .Content .NewsHeadlineBackground { background: linear-gradient(90deg, rgba(21, 95, 112, .16), rgba(21, 95, 112, .03) 80%) !important; border: 0 !important; border-left: 3px solid var(--pandot-teal) !important; border-bottom: 1px solid rgba(110, 75, 35, .22) !important; border-radius: 2px; color: var(--pandot-texto) !important; } #ContentColumn .Content .NewsHeadlineText { font: 700 14px/1.3 var(--pandot-texto-fonte) !important; color: var(--pandot-texto) !important; } #ContentColumn .Content .NewsHeadlineDate { color: var(--pandot-texto-suave) !important; font-family: var(--pandot-texto-fonte) !important; } @media (min-width: 1024px) { /* o titulo andava 135 px para a direita sem encolher: os titulos compridos saiam da caixa */ #ContentColumn .Content .NewsHeadlineText { left: 0 !important; margin-left: 135px; padding-right: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } /* Tabelas e cabecalhos de tabela dentro das paginas */ #ContentColumn .Content th, #ContentColumn .Content .BoxContent tr.white td, #ContentColumn .Content .BoxContent td.white { background: linear-gradient(#1b4a5e, #11303f) !important; color: var(--pandot-creme) !important; font-family: var(--pandot-texto-fonte); font-weight: 600; } #ContentColumn .Content .BoxContent tr.white a, #ContentColumn .Content .BoxContent tr.white b { color: var(--pandot-creme) !important; } #ContentColumn .Content .CaptionContainer .CaptionInnerContainer, #ContentColumn .Content .CaptionContainer .Text { font-family: var(--pandot-titulo) !important; letter-spacing: .05em; } /* Caixas de tabela do tibia.com (entrar, criar conta, online...): faixa do titulo no azul das artes, com risca de bronze */ #ContentColumn .TableContainer { border: 1px solid #8a6a40; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(60, 35, 10, .18); } #ContentColumn .TableContainer .CaptionContainer, #ContentColumn .TableContainer .CaptionContainer .CaptionInnerContainer { background: linear-gradient(#1d4f63, #10303f) !important; background-color: #143a4b !important; } #ContentColumn .TableContainer .CaptionContainer { border-bottom: 1px solid #b98447; } #ContentColumn .TableContainer .CaptionContainer .CaptionInnerContainer { padding: 6px 0 5px; } #ContentColumn .TableContainer .CaptionContainer [class^="CaptionEdge"], #ContentColumn .TableContainer .CaptionContainer [class^="CaptionBorder"], #ContentColumn .TableContainer .CaptionContainer [class^="CaptionVertical"] { display: none !important; } #ContentColumn .TableContainer .CaptionContainer .Text { padding-left: 12px; font: 700 12.5px/1.3 var(--pandot-titulo) !important; letter-spacing: .05em; color: var(--pandot-creme) !important; text-shadow: var(--pandot-sombra-titulo); } #ContentColumn .TableContentContainer { border-color: rgba(138, 106, 64, .45); background-color: #f3e5c6; } #ContentColumn .TableContainer .Table1, #ContentColumn .TableContainer .Table2, #ContentColumn .TableContainer .Table3, #ContentColumn .TableContainer .Table4, #ContentColumn .TableContainer .Table5 { border-color: rgba(138, 106, 64, .45); background-color: #efdfbd; } #ContentColumn .TableContainer .Odd { background-color: #f7ebd2; } #ContentColumn .TableContainer .Even { background-color: #ecdcba; } #ContentColumn .TableContent td, #ContentColumn .TableContainer td { font-family: var(--pandot-texto-fonte); } /* Botoes do tibia.com (imagens azuis): os do tema novo */ .BigButton { background: var(--pandot-btn1-fundo) !important; border: 1px solid var(--pandot-btn1-borda); border-radius: 2px; box-sizing: border-box; box-shadow: var(--pandot-btn1-brilho), 0 2px 4px rgba(0, 0, 0, .28); transition: filter .15s ease; } .BigButton[style*="sbutton_green"] { background: linear-gradient(#41a454, #2d823d 55%, #1f622d) !important; border-color: #154820; } .BigButton[style*="sbutton_red"] { background: linear-gradient(#c0563f, #9c3b28 55%, #7a2a1b) !important; border-color: #561b10; } .BigButton:hover { filter: brightness(1.12); } .BigButton .BigButtonOver { display: none !important; } .BigButton .BigButtonText { width: 100% !important; height: 100% !important; color: #fff !important; font: 600 12px/1 var(--pandot-texto-fonte) !important; letter-spacing: .02em; text-shadow: 0 1px 1px rgba(0, 0, 0, .5) !important; } /* Botao grande "Criar conta" do entrar (era uma imagem com as letras) */ .MediumButtonBackground { background: var(--pandot-btn2-fundo) !important; border: 1px solid var(--pandot-btn2-borda); border-radius: 3px; box-sizing: border-box; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 2px 6px rgba(0, 0, 0, .3); transition: filter .15s ease; } .MediumButtonBackground:hover { filter: brightness(1.12); } .MediumButtonBackground .MediumButtonOver { display: none !important; } .MediumButtonBackground .MediumButtonText { width: 100% !important; height: 100% !important; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; color: #f6ecd6 !important; font: 700 13px/1 var(--pandot-texto-fonte); letter-spacing: .03em; text-shadow: 0 1px 1px rgba(0, 0, 0, .5); } #ContentColumn .Content input[type=text], #ContentColumn .Content input[type=password], #ContentColumn .Content input[type=email], #ContentColumn .Content input[type=number], #ContentColumn .Content input[type=search], #ContentColumn .Content select, #ContentColumn .Content textarea { border: 1px solid #a98a5c; border-radius: 3px; background: #fffaf0; color: var(--pandot-texto); font-family: var(--pandot-texto-fonte); padding: 4px 6px; } #ContentColumn .Content input:focus, #ContentColumn .Content select:focus, #ContentColumn .Content textarea:focus { outline: 2px solid rgba(26, 159, 179, .55); outline-offset: 0; border-color: var(--pandot-teal); } /* --------------------------------------------------------------------- Rodape (como no RubinOT): mapa do site com os links do menu, marca, jogadores online e a linha legal, a largura toda --------------------------------------------------------------------- */ #PandotRodape { position: relative; z-index: 1; clear: both; text-align: left; background: linear-gradient(rgba(20, 58, 77, .97), rgba(9, 29, 41, .98)); border-top: 2px solid #9a6a3a; box-shadow: inset 0 1px 0 rgba(70, 230, 245, .22), 0 -6px 18px rgba(0, 0, 0, .35); font: 400 12px/1.5 var(--pandot-texto-fonte); color: rgba(240, 230, 210, .7); } .pandot-rodape-dentro { max-width: 1280px; margin: 0 auto; padding: 22px 24px 18px; box-sizing: border-box; } .pandot-rodape-mapa-botao { display: none; } .pandot-rodape-mapa { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 18px 24px; } .pandot-rodape-coluna h3 { margin: 0 0 9px; font: 700 12px/1.3 var(--pandot-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--pandot-creme); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .pandot-rodape-coluna ul { list-style: none; margin: 0; padding: 0; } .pandot-rodape-coluna li { margin: 0 0 5px; } #PandotRodape a { color: rgba(240, 230, 210, .66); text-decoration: none; transition: color .15s ease; } #PandotRodape a:hover { color: #fff; } #PandotRodape a:focus-visible, .pandot-rodape-mapa-botao:focus-visible { outline: 2px solid #f0d79e; outline-offset: 2px; border-radius: 2px; } .pandot-rodape-base { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 12px; border-top: 1px solid rgba(240, 230, 210, .12); } .pandot-rodape-marca { display: block; line-height: 0; } .pandot-rodape-marca img { height: 32px; width: auto; opacity: .92; } #PandotRodape .pandot-rodape-online { display: inline-flex; align-items: center; gap: 7px; color: rgba(240, 230, 210, .82); } .pandot-rodape-online b { color: #4ade80; font-weight: 700; } .pandot-rodape-online .pandot-ponto { width: 8px; height: 8px; border-radius: 50%; background: #4cd964; box-shadow: 0 0 6px #4cd964; } .pandot-rodape-online .pandot-ponto-off { background: #e0584a; box-shadow: 0 0 6px #e0584a; } /* linha final: o copyright a esquerda e, a direita, a hora de Brasilia (a hora do jogo) ao segundo, com o ponto verde de "ao vivo" */ .pandot-rodape-legal { display: flex; align-items: center; justify-content: space-between; gap: 6px 16px; margin-top: 12px; font: 400 12px/1.4 var(--pandot-texto-fonte); color: rgba(240, 230, 210, .58); } .pandot-rodape-legal p { margin: 0; } .pandot-rodape-copyright { letter-spacing: .02em; } /* botao "Cookies": reabre as preferencias de cookies (pandot-cookies.php) */ .pandot-rodape-cookies { margin: 0 0 0 14px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; color: rgba(240, 230, 210, .78); text-decoration: underline; text-underline-offset: 3px; } .pandot-rodape-cookies:hover { color: #fff; } .pandot-rodape-cookies:focus-visible { outline: 2px solid #f0d79e; outline-offset: 2px; border-radius: 2px; } .pandot-rodape-hora { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .pandot-rodape-hora-ponto { position: relative; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #4cd964; box-shadow: 0 0 6px rgba(76, 217, 100, .8); } .pandot-rodape-hora-ponto::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(76, 217, 100, .55); animation: pandot-pulsar 2s ease-out infinite; } @keyframes pandot-pulsar { 0% { box-shadow: 0 0 0 0 rgba(76, 217, 100, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(76, 217, 100, 0); } } /* algarismos da mesma largura: os segundos mudam sem o texto saltar */ .pandot-rodape-hora time { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .03em; color: var(--pandot-creme); } /* --------------------------------------------------------------------- Coluna da direita: Boosted, ranking e caixas --------------------------------------------------------------------- */ #ThemeboxesColumn .Themebox.pandot-themebox { position: relative; top: 0; width: 226px; height: auto; margin: 0 0 12px; background: none !important; text-align: center; } #Themeboxes .pandot-themebox div { font-size: inherit; } .pandot-boosted-lista { display: flex; justify-content: center; gap: 12px; padding: 4px 8px 0 !important; } .pandot-boosted-item { display: block; width: 78px; text-align: center; text-decoration: none !important; color: var(--pandot-texto); } .pandot-boosted-moldura { display: block; position: relative; width: 60px; height: 60px; margin: 0 auto 5px; overflow: hidden; border: 2px solid #8b6238; border-radius: 4px; background: radial-gradient(circle at 50% 62%, #1f5468, #0b2230 75%); box-shadow: inset 0 0 0 1px rgba(70, 230, 245, .35), 0 2px 6px rgba(0, 0, 0, .35); transition: box-shadow .2s ease, transform .2s ease; } a.pandot-boosted-item:hover .pandot-boosted-moldura { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(70, 230, 245, .7), 0 0 12px rgba(70, 230, 245, .45); } .pandot-boosted-moldura img { position: absolute; right: -2px; bottom: -2px; width: 64px; height: 64px; } .pandot-boosted-rotulo { display: block; font: 700 9.5px/1.2 var(--pandot-texto-fonte); letter-spacing: .08em; text-transform: uppercase; color: var(--pandot-teal-escuro); } .pandot-boosted-nome { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 10.5px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } .pandot-top5 { list-style: none; margin: 0; padding: 0; counter-reset: none; } .pandot-top5 li { border-bottom: 1px solid rgba(110, 75, 35, .16); } .pandot-top5 li:last-child { border-bottom: 0; } .pandot-top5 a { display: flex; align-items: center; gap: 7px; padding: 5px 2px; text-decoration: none; color: var(--pandot-texto) !important; } .pandot-top5 a:hover { background: rgba(26, 159, 179, .1); } .pandot-top5-posicao { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(#2d95ae, #155466); color: #fff; font: 700 10px/1 var(--pandot-texto-fonte); } .pandot-top5 li:first-child .pandot-top5-posicao { background: linear-gradient(#e2b552, #a87423); } .pandot-top5-nome { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 600 11.5px/1.3 var(--pandot-texto-fonte); } .pandot-top5-nivel { flex: none; font: 700 11px/1 var(--pandot-texto-fonte); color: var(--pandot-teal-escuro); } .pandot-top5 .online .pandot-top5-nome::after { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 1px 5px; border-radius: 50%; background: #3fc56b; box-shadow: 0 0 5px #3fc56b; } #CurrentPollText { position: static !important; width: auto !important; height: auto !important; font: 600 12px/1.4 var(--pandot-texto-fonte) !important; color: var(--pandot-texto) !important; } #GalleryContent { position: static !important; width: 100% !important; height: auto !important; margin: 0 !important; border-radius: 3px; } /* --------------------------------------------------------------------- Separador das secoes (pagina inicial, Sistemas, Informacoes do Servidor e Stages de EXP): uma gema azul num engaste de ouro, o titulo e uma lamina de ouro que afina ate um losango. As margens ficam em cada pagina. --------------------------------------------------------------------- */ #ContentColumn .Content .BoxContent .pandot-vitrine-titulo, #ContentColumn .Content .BoxContent .pandot-sistemas-grupo, #ContentColumn .Content .BoxContent .pandot-stages-titulo { display: flex; align-items: center; gap: 9px; padding: 0; font: 700 17px/1.3 'Pandot Numeros', var(--pandot-titulo); letter-spacing: .02em; text-transform: none; color: var(--pandot-teal-escuro); text-shadow: 0 1px 0 rgba(255, 250, 236, .85); } .pandot-vitrine-titulo::before, .pandot-sistemas-grupo::before, .pandot-stages-titulo::before { content: ""; flex: none; width: 20px; height: 20px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fdf0cb'/%3E%3Cstop offset='.5' stop-color='%23ddb46a'/%3E%3Cstop offset='1' stop-color='%239c6b37'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M10 .8 19.2 10 10 19.2 .8 10z' fill='url(%23o)' stroke='%235f3d1b' stroke-width='1'/%3E%3Cpath d='M10 3.4 16.6 10 10 16.6 3.4 10z' fill='none' stroke='%237a5228' stroke-opacity='.5' stroke-width='.7'/%3E%3Cpath d='M10 4.8 10 10 4.8 10z' fill='%238fe3ec'/%3E%3Cpath d='M10 4.8 15.2 10 10 10z' fill='%2336b8ca'/%3E%3Cpath d='M4.8 10 10 10 10 15.2z' fill='%231a8c9e'/%3E%3Cpath d='M10 10 15.2 10 10 15.2z' fill='%230d5664'/%3E%3Cpath d='M10 4.8 15.2 10 10 15.2 4.8 10z' fill='none' stroke='%2308333d' stroke-width='.6'/%3E%3Ccircle cx='8.4' cy='8' r='.9' fill='%23fff' fill-opacity='.9'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 1px 1px rgba(60, 35, 10, .35)); } .pandot-vitrine-titulo::after, .pandot-sistemas-grupo::after, .pandot-stages-titulo::after { content: ""; flex: 1 1 24px; min-width: 24px; height: 10px; margin-left: 3px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23f8e3b0'/%3E%3Cstop offset='1' stop-color='%23b07c40'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M5 .7 9.3 5 5 9.3 .7 5z' fill='url(%23o)' stroke='%236f4a22' stroke-width='.9'/%3E%3C/svg%3E") right center / 10px 10px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='v' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23fbeac0'/%3E%3Cstop offset='.5' stop-color='%23cf9f58'/%3E%3Cstop offset='1' stop-color='%238b5f30'/%3E%3C/linearGradient%3E%3ClinearGradient id='h' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23fff'/%3E%3Cstop offset='.7' stop-color='%23fff' stop-opacity='.75'/%3E%3Cstop offset='1' stop-color='%23fff' stop-opacity='.45'/%3E%3C/linearGradient%3E%3Cmask id='m'%3E%3Crect width='100' height='8' fill='url(%23h)'/%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Cpath d='M0 2 100 3.4 100 4.9 0 6.3z' fill='%23000' fill-opacity='.18' transform='translate(0 .9)'/%3E%3Cpath d='M0 1.6 100 3.3 100 4.7 0 6.4z' fill='url(%23v)'/%3E%3C/g%3E%3C/svg%3E") left center / calc(100% - 8px) 8px no-repeat; } /* --------------------------------------------------------------------- Paginas do Pandot: Novidades, Stages de EXP, Comandos, Regras e Casas --------------------------------------------------------------------- */ .pandot-novidades-intro, .pandot-stages-intro, .pandot-comandos-intro, .pandot-regras-intro { margin: 0 0 14px; color: var(--pandot-texto-suave); } .pandot-novidades-admin { margin: -6px 0 14px; font-size: 12px; font-weight: 600; } .pandot-novidades-dia { margin: 0 0 18px; } .pandot-novidades-data { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 700 12px/1.4 var(--pandot-titulo); letter-spacing: .08em; color: var(--pandot-teal-escuro); } .pandot-novidades-data::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(154, 106, 58, .55), rgba(154, 106, 58, 0)); } .pandot-novidade { position: relative; margin: 0 0 10px; padding: 11px 14px 10px 16px; background: rgba(255, 250, 238, .55); border: 1px solid rgba(154, 106, 58, .35); border-left: 3px solid var(--pandot-teal); border-radius: 4px; box-shadow: 0 1px 3px rgba(60, 35, 10, .12); } .pandot-novidade-mudou { border-left-color: var(--pandot-bronze); } .pandot-novidade-corrigido { border-left-color: #3f7fbf; } .pandot-novidade-removido { border-left-color: #b4483a; } .pandot-novidade-escondida { opacity: .6; } .pandot-novidade-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 7px; } .pandot-selo { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 9px; font: 700 10px/1 var(--pandot-texto-fonte); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--pandot-teal-escuro); } .pandot-selo-mudou { background: var(--pandot-bronze); } .pandot-selo-corrigido { background: #2f6aa3; } .pandot-selo-removido { background: #a33b2e; } .pandot-selo-onde { color: var(--pandot-texto); background: rgba(154, 106, 58, .14); box-shadow: inset 0 0 0 1px rgba(154, 106, 58, .35); } .pandot-novidade-titulo { margin: 0 0 6px; font: 700 15px/1.35 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-novidade-lista { margin: 0; padding: 0 0 0 18px; } .pandot-novidade-lista li { margin: 0 0 4px; } .pandot-novidade-lista li::marker { color: var(--pandot-teal); } .pandot-novidade p { margin: 0 0 6px; } .pandot-novidades-paginas { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; font-weight: 600; } .pandot-novidades-vazio, .pandot-stages-erro { color: var(--pandot-texto-suave); font-style: italic; } /* Tabelas da Biblioteca (Comandos e Procurados) */ .pandot-comandos, .pandot-procurados-tabela { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #8a6a40; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(60, 35, 10, .18); } .pandot-comandos th, .pandot-procurados-tabela th { padding: 8px 12px; text-align: left; font: 600 12px/1.2 var(--pandot-texto-fonte); } .pandot-comandos td, .pandot-procurados-tabela td { padding: 7px 12px; vertical-align: top; border-top: 1px solid rgba(138, 106, 64, .3); background: #f7ebd2; } .pandot-comandos tr:nth-child(even) td, .pandot-procurados-tabela tr:nth-child(even) td { background: #ecdcba; } /* --------------------------------------------------------------------- Stages de EXP (/exp-stages, plugins/pandot-paginas/pages/exp-stages.php) Em cima a placa do jogo, na mesma linguagem da contagem do lancamento (azul-escuro, moldura dourada, numeros em Cinzel): nivel, skill e magic level -> multiplicador. Em baixo as faixas: barra dourada num trilho escuro (como as barras do jogo) e o multiplicador numa tabuleta; a faixa de quem esta na placa fica marcada a azul ("Voce"). --------------------------------------------------------------------- */ .pandot-stages { --st-ouro: #f6d79a; --st-ouro-2: #cfac68; --st-ouro-3: #e8cf96; --st-creme: #f0e6d2; --st-fundo: #0b1d29; --st-tabuleta: linear-gradient(#1f4558, #143243 49.5%, #0c2230 50.5%, #0f2837); --st-linha: rgba(138, 106, 64, .32); } /* Placa */ .pandot-stages-placa { position: relative; box-sizing: border-box; margin: 0 0 20px; padding: 16px 18px 18px; border: 1px solid rgba(207, 172, 104, .78); border-radius: 10px; background: radial-gradient(ellipse 58% 62% at 50% 46%, rgba(232, 207, 150, .12), transparent 72%), linear-gradient(180deg, #153646 0%, #0f2735 56%, var(--st-fundo) 100%); box-shadow: inset 0 1px 0 rgba(246, 215, 154, .26), inset 0 0 0 1px rgba(0, 0, 0, .35), 0 8px 20px rgba(40, 24, 8, .35); color: var(--st-creme); text-align: center; } .pandot-stages-placa::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(207, 172, 104, .2); border-radius: 7px; pointer-events: none; } #ContentColumn .Content .BoxContent .pandot-stages-placa-titulo { position: relative; display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 14px; padding: 0; font: 700 17px/1.25 var(--pandot-titulo); letter-spacing: .02em; color: var(--st-creme); text-shadow: var(--pandot-sombra-titulo); } .pandot-stages-placa-titulo::before, .pandot-stages-placa-titulo::after { content: ""; flex: 0 1 90px; height: 9px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 0 10 5 5 10 0 5z' fill='%23e8cf96'/%3E%3C/svg%3E") right center / 9px 9px no-repeat, linear-gradient(90deg, transparent, rgba(207, 172, 104, .9)) left center / calc(100% - 12px) 1px no-repeat; } .pandot-stages-placa-titulo::after { transform: scaleX(-1); } .pandot-stages-calc { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .pandot-stages-calc-item { display: flex; flex-direction: column; align-items: center; gap: 9px; min-width: 0; } .pandot-stages-rotulo { font: 600 12px/1.2 var(--pandot-texto-fonte); letter-spacing: .04em; color: rgba(240, 230, 210, .82); } .pandot-stages-passo { display: inline-flex; align-items: stretch; height: 32px; overflow: hidden; border: 1px solid rgba(207, 172, 104, .55); border-radius: 6px; background: rgba(4, 14, 21, .6); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .55), 0 1px 0 rgba(246, 215, 154, .12); } .pandot-stages-botao { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 30px; margin: 0; padding: 0; border: 0; background: linear-gradient(#1f4558, #143243); color: var(--st-ouro-3); cursor: pointer; } .pandot-stages-botao:hover { background: linear-gradient(#28596f, #193d4f); color: var(--st-ouro); } .pandot-stages-botao:active { background: #0c2230; } .pandot-stages-botao svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .pandot-stages-botao:focus-visible { outline: 2px solid #7cc9d6; outline-offset: -2px; } #ContentColumn .Content .pandot-stages .pandot-stages-campo { width: 66px; height: auto; margin: 0; padding: 0 4px; box-sizing: border-box; border: 0; border-left: 1px solid rgba(207, 172, 104, .3); border-right: 1px solid rgba(207, 172, 104, .3); border-radius: 0; background: transparent; color: var(--st-creme); text-align: center; font: 700 16px/1 var(--pandot-texto-fonte); font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } #ContentColumn .Content .pandot-stages .pandot-stages-campo::-webkit-outer-spin-button, #ContentColumn .Content .pandot-stages .pandot-stages-campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } #ContentColumn .Content .pandot-stages .pandot-stages-campo:focus { outline: none; } #ContentColumn .Content .pandot-stages .pandot-stages-campo:focus-visible { outline: 2px solid #7cc9d6; outline-offset: -2px; background: rgba(124, 201, 214, .1); } .pandot-stages-valor { display: flex; flex-direction: column; align-items: center; gap: 5px; } .pandot-stages-numero { position: relative; display: block; box-sizing: border-box; min-width: 124px; padding: 10px 12px 8px; overflow: hidden; border: 1px solid rgba(207, 172, 104, .6); border-radius: 7px; background: var(--st-tabuleta); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09), inset 0 -2px 6px rgba(0, 0, 0, .35), 0 4px 10px rgba(0, 0, 0, .42); font: 700 38px/1 var(--pandot-texto-fonte); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--st-ouro); white-space: nowrap; text-shadow: 0 2px 0 rgba(0, 0, 0, .55), 0 0 18px rgba(246, 215, 154, .22); } .pandot-stages-numero::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0, 0, 0, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .05); } .pandot-stages-numero > span { display: inline-block; } .pandot-stages-legenda { font: 600 12.5px/1.3 var(--pandot-texto-fonte); color: var(--st-creme); } .pandot-stages-proxima { max-width: 100%; font: 400 12px/1.35 var(--pandot-texto-fonte); color: var(--st-ouro-3); text-wrap: balance; } .pandot-stages-ver { margin: 14px 0 0; padding: 6px 18px; border: 1px solid var(--pandot-btn1-borda); border-radius: 4px; cursor: pointer; background: var(--pandot-btn1-fundo); box-shadow: var(--pandot-btn1-brilho); color: var(--pandot-btn1-texto); font: 700 12.5px/1.2 var(--pandot-texto-fonte); } .pandot-stages-js .pandot-stages-ver { display: none; } /* Faixas */ .pandot-stages-bloco { margin: 0 0 20px; } #ContentColumn .Content .BoxContent .pandot-stages-titulo { margin: 0 0 8px; } #ContentColumn .Content .BoxContent .pandot-stages-faixas { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0 4px; } #ContentColumn .Content .BoxContent .pandot-stages-faixas th, #ContentColumn .Content .BoxContent .pandot-stages-faixas td { padding: 7px 12px; vertical-align: middle; background: #f7ebd2 !important; color: var(--pandot-texto) !important; border-top: 1px solid var(--st-linha); border-bottom: 1px solid var(--st-linha); font-family: var(--pandot-texto-fonte); } #ContentColumn .Content .BoxContent .pandot-stages-faixas tr:nth-child(even) > * { background: #f0e1c1 !important; } #ContentColumn .Content .BoxContent .pandot-stages-faixas th { width: 26%; border-left: 1px solid var(--st-linha); border-radius: 5px 0 0 5px; text-align: left; white-space: nowrap; font: 700 13px/1.2 var(--pandot-texto-fonte); font-variant-numeric: tabular-nums; } #ContentColumn .Content .BoxContent .pandot-stages-faixas td { padding-left: 0; border-right: 1px solid var(--st-linha); border-radius: 0 5px 5px 0; } .pandot-stages-linha { display: flex; align-items: center; gap: 10px; } .pandot-stages-trilho { position: relative; flex: 1; height: 12px; overflow: hidden; border-radius: 3px; background: linear-gradient(#0b2230, #153a4c); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .6); } .pandot-stages-barra { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(#fbe4a8, #e2b65f 48%, #b8842e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset -1px 0 0 rgba(90, 55, 10, .4); } .pandot-stages-x { flex: none; box-sizing: border-box; min-width: 60px; padding: 4px 8px 3px; text-align: center; white-space: nowrap; border: 1px solid rgba(207, 172, 104, .7); border-radius: 5px; background: var(--st-tabuleta); font: 700 13.5px/1.15 var(--pandot-texto-fonte); font-variant-numeric: tabular-nums; color: var(--st-ouro); text-shadow: 0 1px 0 rgba(0, 0, 0, .6); } .pandot-stages-voce { display: none; margin: 0 0 0 8px; padding: 2px 7px; border-radius: 9px; vertical-align: 1px; background: var(--pandot-teal-escuro); color: #fff; font: 700 10px/1.2 var(--pandot-texto-fonte); letter-spacing: .04em; } #ContentColumn .Content .BoxContent .pandot-stages-faixas tr.pandot-stages-atual > * { background: #dcefed !important; border-color: rgba(26, 159, 179, .75); } #ContentColumn .Content .BoxContent .pandot-stages-faixas tr.pandot-stages-atual > th { box-shadow: inset 4px 0 0 var(--pandot-teal); } .pandot-stages-atual .pandot-stages-voce { display: inline-block; } .pandot-stages-atual .pandot-stages-trilho { box-shadow: inset 0 1px 2px rgba(0, 0, 0, .7), 0 0 0 1px rgba(26, 159, 179, .45); } /* Skills e magic level, lado a lado, com o item do jogo num slot */ .pandot-stages-duplo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; margin: 0 0 20px; } .pandot-stages-duplo .pandot-stages-bloco { margin: 0; } .pandot-stages-cartao { padding: 12px 12px 8px; border: 1px solid rgba(154, 106, 58, .35); border-radius: 6px; background: rgba(255, 250, 238, .45); } .pandot-stages-cartao-topo { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 0 0 6px; } .pandot-stages-slot { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; box-sizing: border-box; border: 2px solid #8b6238; border-radius: 4px; background: radial-gradient(circle at 50% 60%, #1f5468, #0b2230 75%); box-shadow: inset 0 0 0 1px rgba(70, 230, 245, .35), 0 2px 5px rgba(0, 0, 0, .3); } .pandot-stages-slot img { width: 32px; height: 32px; image-rendering: pixelated; } #ContentColumn .Content .BoxContent .pandot-stages-cartao-titulo { margin: 0; padding: 0; font: 700 15px/1.2 var(--pandot-titulo); color: var(--pandot-texto); } .pandot-stages-cartao-nota { display: block; margin-top: 2px; font: 400 11.5px/1.35 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-stages-cartao .pandot-stages-faixas th { width: 44%; padding: 5px 8px; font-size: 12px; } #ContentColumn .Content .BoxContent .pandot-stages-cartao .pandot-stages-faixas td { padding: 5px 8px 5px 0; } .pandot-stages-cartao .pandot-stages-trilho { height: 9px; } .pandot-stages-cartao .pandot-stages-x { min-width: 50px; padding: 3px 6px 2px; font-size: 12px; } .pandot-stages-cartao .pandot-stages-voce { margin-left: 6px; } /* Bonus por cima dos stages */ #ContentColumn .Content .BoxContent .pandot-stages-bonus { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-stages-bonus li { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 10px 12px; border: 1px solid rgba(154, 106, 58, .35); border-radius: 6px; background: rgba(255, 250, 238, .55); } .pandot-stages-medalha { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; box-sizing: border-box; border: 1px solid rgba(207, 172, 104, .85); border-radius: 50%; color: var(--st-ouro); background: radial-gradient(circle at 50% 38%, #1f4558, #0b2230 78%); box-shadow: inset 0 1px 0 rgba(246, 215, 154, .3), 0 2px 4px rgba(0, 0, 0, .25); } .pandot-stages-medalha svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pandot-stages-bonus-texto { display: flex; flex-direction: column; min-width: 0; } .pandot-stages-bonus-nome { font: 600 12px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } .pandot-stages-bonus-valor { font: 700 19px/1.25 var(--pandot-texto-fonte); color: var(--pandot-texto); } .pandot-stages-bonus-valor small { margin-right: 4px; font: 600 12px/1 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } .pandot-stages-bonus-detalhe { font: 400 12px/1.45 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-stages-nota { margin: 10px 0 0; font-size: 12px; color: var(--pandot-texto-suave); } @media (prefers-reduced-motion: no-preference) { .pandot-stages-numero > span.pandot-stages-rola { animation: pandot-stages-rola .42s cubic-bezier(.2, .8, .25, 1); } @keyframes pandot-stages-rola { from { transform: translateY(-42%); opacity: .15; } to { transform: none; opacity: 1; } } #ContentColumn .Content .BoxContent .pandot-stages-faixas th, #ContentColumn .Content .BoxContent .pandot-stages-faixas td { transition: background-color .2s ease, border-color .2s ease; } } /* telemovel: cada linha da placa fica deitada (campo a esquerda, numero a direita); skills e magic level um por baixo do outro */ @media (max-width: 600px) { .pandot-stages-placa { padding: 14px 12px; } #ContentColumn .Content .BoxContent .pandot-stages-placa-titulo { font-size: 15px; gap: 10px; margin-bottom: 10px; } .pandot-stages-placa-titulo::before, .pandot-stages-placa-titulo::after { flex-basis: 40px; } .pandot-stages-calc { grid-template-columns: minmax(0, 1fr); gap: 0; } .pandot-stages-calc-item { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "rotulo valor" "passo valor"; align-items: center; justify-items: start; column-gap: 12px; row-gap: 7px; padding: 12px 2px; border-top: 1px solid rgba(207, 172, 104, .22); text-align: left; } .pandot-stages-calc-item:first-child { border-top: 0; padding-top: 2px; } .pandot-stages-rotulo { grid-area: rotulo; align-self: end; } .pandot-stages-passo { grid-area: passo; align-self: start; } .pandot-stages-valor { grid-area: valor; justify-self: end; align-items: flex-end; gap: 4px; text-align: right; } .pandot-stages-numero { min-width: 96px; padding: 8px 10px 6px; font-size: 28px; text-align: center; } .pandot-stages-duplo { grid-template-columns: minmax(0, 1fr); } #ContentColumn .Content .BoxContent .pandot-stages-faixas th { width: 34%; padding: 6px 8px; font-size: 12px; } #ContentColumn .Content .BoxContent .pandot-stages-faixas td { padding: 6px 8px 6px 0; } .pandot-stages-x { min-width: 52px; font-size: 13px; } .pandot-stages-voce { margin-left: 5px; padding: 2px 5px; } } /* --------------------------------------------------------------------- Download (/download, plugins/pandot-download/pages/download.php), como no RubinOT: quatro caixas (o index.php abre uma por cada marca ). Sistemas em cartoes (Windows; macOS e Linux em breve), passos, requisitos e recursos do cliente. As colunas mudam com a largura da caixa (container query), nao com a do ecra. --------------------------------------------------------------------- */ .pandot-dl { container: pandot-dl / inline-size; } #ContentColumn .Content .BoxContent .pandot-dl-intro { margin: 0 0 14px; font-size: 14px; color: var(--pandot-texto); } /* Sistemas */ .pandot-dl-sistemas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .pandot-dl-sistema { display: flex; flex-direction: column; align-items: center; min-width: 0; padding: 20px 16px 16px; text-align: center; background: rgba(255, 250, 238, .62); border: 1px solid rgba(154, 106, 58, .4); border-radius: 6px; box-shadow: 0 1px 3px rgba(60, 35, 10, .14); } .pandot-dl-sistema-pronto { background: rgba(255, 250, 238, .86); border-color: rgba(207, 172, 104, .95); box-shadow: 0 0 0 1px rgba(207, 172, 104, .3), 0 4px 12px rgba(60, 35, 10, .16); } /* medalhao: a placa azul com moldura de ouro dos icones do site */ .pandot-dl-medalhao { display: inline-flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 64px; height: 64px; margin: 0 0 12px; border: 1px solid rgba(207, 172, 104, .85); border-radius: 14px; color: #f6d79a; background: radial-gradient(ellipse 70% 60% at 50% 30%, rgba(232, 207, 150, .14), transparent 70%), linear-gradient(#1f4558, #0f2837); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 3px rgba(11, 29, 41, .35), 0 3px 8px rgba(60, 35, 10, .3); } .pandot-dl-medalhao svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pandot-dl-sistema-off .pandot-dl-medalhao { filter: grayscale(.9); opacity: .6; } .pandot-dl-sistema-texto { min-width: 0; } #ContentColumn .Content .BoxContent .pandot-dl-sistema-nome { margin: 0; font: 700 19px/1.2 var(--pandot-titulo); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-dl-sistema-sub { margin: 4px 0 0; font: 600 12.5px/1.4 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } .pandot-dl-embreve { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 10px; font: 700 11.5px/1 var(--pandot-texto-fonte); color: #7a5228; background: rgba(154, 106, 58, .13); box-shadow: inset 0 0 0 1px rgba(154, 106, 58, .38); } #ContentColumn .Content .pandot-dl-sistema .pandot-dl-botao { height: 40px; margin: 16px 0 0; font-size: 14px; font-weight: 700; letter-spacing: .03em; } .pandot-dl-sistema .pandot-dl-botao svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .pandot-dl-botao-off { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 100%; height: 40px; margin: 16px 0 0; padding: 0 10px; border: 1px solid rgba(110, 75, 35, .28); border-radius: 2px; cursor: not-allowed; font: 600 13px/1 var(--pandot-texto-fonte); color: #866b4c; text-shadow: 0 1px 0 rgba(255, 250, 238, .5); background: linear-gradient(rgba(154, 106, 58, .16), rgba(154, 106, 58, .26)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } #ContentColumn .Content .BoxContent .pandot-dl-sistema-nota { margin: 9px 0 0; font: 600 11.5px/1.4 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } .pandot-dl-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(110, 75, 35, .2); } .pandot-dl-rodape:empty { display: none; } #ContentColumn .Content .BoxContent .pandot-dl-jogo { flex: 1 1 260px; margin: 0; font-size: 13px; color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-dl-conta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 0 auto; font: 600 13px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } #ContentColumn .Content .pandot-dl-conta .pandot-dl-criar { width: auto; height: 34px; margin: 0; padding: 0 18px; font-size: 12.5px; } /* Como instalar: os passos ligados por um fio de ouro */ #ContentColumn .Content .BoxContent .pandot-dl-passos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 2px 0 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-dl-passo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; margin: 0; text-align: center; } .pandot-dl-passo:not(:last-child)::after { content: ""; position: absolute; top: 21px; left: calc(50% + 28px); width: calc(100% - 42px); height: 2px; background: linear-gradient(90deg, rgba(207, 172, 104, .9), rgba(207, 172, 104, .35)); } .pandot-dl-passo-numero { position: relative; z-index: 0; display: inline-flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; font: 700 17px/1 var(--pandot-texto-fonte); color: #f6ecd6; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .pandot-dl-passo-numero::before { content: ""; position: absolute; inset: 6px; z-index: -1; transform: rotate(45deg); border-radius: 5px; border: 1px solid rgba(207, 172, 104, .9); background: linear-gradient(135deg, #1f4558, #0f2837); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 5px rgba(60, 35, 10, .3); } #ContentColumn .Content .BoxContent .pandot-dl-passo-titulo { margin: 0 0 3px; font: 700 14px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-dl-passo-texto { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--pandot-texto-suave); } .pandot-dl-arquivo { white-space: nowrap; font-weight: 600; color: var(--pandot-texto); } .pandot-dl-aviso { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; padding: 11px 14px 12px; border: 1px solid rgba(26, 159, 179, .35); border-left: 4px solid var(--pandot-teal); border-radius: 4px; background: rgba(26, 159, 179, .07); } .pandot-dl-aviso-icone { flex: none; width: 20px; height: 20px; margin-top: 1px; fill: none; stroke: var(--pandot-teal-escuro); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } #ContentColumn .Content .BoxContent .pandot-dl-aviso-titulo { margin: 0 0 3px; font: 700 13px/1.35 var(--pandot-texto-fonte); color: var(--pandot-teal-escuro); } #ContentColumn .Content .BoxContent .pandot-dl-aviso-texto { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-dl-desinstalar { margin: 12px 0 0; font-size: 12.5px; color: var(--pandot-texto-suave); } .pandot-dl-conferir { margin: 6px 0 0; font-size: 12.5px; } .pandot-dl-conferir > summary { cursor: pointer; font-weight: 700; color: var(--pandot-link); } .pandot-dl-conferir > summary:focus-visible { outline: 2px solid var(--pandot-teal); outline-offset: 2px; } #ContentColumn .Content .BoxContent .pandot-dl-conferir p { margin: 6px 0; color: var(--pandot-texto); } #ContentColumn .Content .BoxContent code.pandot-dl-hash { display: block; margin: 0; padding: 7px 10px; white-space: normal; word-break: break-all; font-size: 11.5px; } /* Requisitos: minimo e recomendado lado a lado */ .pandot-dl-requisitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .pandot-dl-req { min-width: 0; padding: 14px 16px 6px; background: rgba(255, 250, 238, .62); border: 1px solid rgba(154, 106, 58, .4); border-radius: 6px; box-shadow: 0 1px 3px rgba(60, 35, 10, .14); } .pandot-dl-req-recomendado { border-color: rgba(207, 172, 104, .95); box-shadow: 0 0 0 1px rgba(207, 172, 104, .3), 0 1px 3px rgba(60, 35, 10, .14); } #ContentColumn .Content .BoxContent .pandot-dl-req-titulo { margin: 0 0 6px; font: 700 17px/1.2 var(--pandot-titulo); color: var(--pandot-teal-escuro); } #ContentColumn .Content .BoxContent .pandot-dl-req dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; } #ContentColumn .Content .BoxContent .pandot-dl-req dt, #ContentColumn .Content .BoxContent .pandot-dl-req dd { margin: 0; padding: 8px 0; border-top: 1px dashed rgba(110, 75, 35, .22); } #ContentColumn .Content .BoxContent .pandot-dl-req dt { padding-right: 16px; font: 600 12.5px/1.4 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-dl-req dd { font: 600 13px/1.4 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-dl-req dt:first-of-type, #ContentColumn .Content .BoxContent .pandot-dl-req dd:first-of-type { border-top: 0; } #ContentColumn .Content .BoxContent .pandot-dl-nota { margin: 12px 0 0; font-size: 12.5px; color: var(--pandot-texto-suave); } /* Recursos do cliente: duas colunas com losangos de ouro */ #ContentColumn .Content .BoxContent .pandot-dl-recursos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-dl-recursos li { position: relative; margin: 0; padding-left: 20px; font-size: 13.5px; line-height: 1.45; color: var(--pandot-texto); } .pandot-dl-recursos li::before { content: ""; position: absolute; left: 3px; top: .5em; width: 7px; height: 7px; transform: rotate(45deg); background: linear-gradient(135deg, #f6d79a, #cfac68); box-shadow: 0 0 0 1px #8a5e2c; } #ContentColumn .Content .BoxContent .pandot-dl-todos { margin: 16px 0 0; font-weight: 700; font-size: 13px; } /* Caixa estreita: os passos uns por baixo dos outros, um requisito e um recurso por linha */ @container pandot-dl (max-width: 600px) { #ContentColumn .Content .BoxContent .pandot-dl-passos { grid-template-columns: minmax(0, 1fr); gap: 0; } #ContentColumn .Content .BoxContent .pandot-dl-passo { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 16px; text-align: left; } #ContentColumn .Content .BoxContent .pandot-dl-passo:last-child { padding-bottom: 0; } .pandot-dl-passo:not(:last-child)::after { top: 46px; bottom: 2px; left: 21px; width: 2px; height: auto; background: linear-gradient(rgba(207, 172, 104, .9), rgba(207, 172, 104, .35)); } .pandot-dl-passo-corpo { padding-top: 10px; } .pandot-dl-requisitos { grid-template-columns: minmax(0, 1fr); } #ContentColumn .Content .BoxContent .pandot-dl-recursos { grid-template-columns: minmax(0, 1fr); gap: 8px; } } /* Telemovel: cada sistema numa linha (medalhao, nome e o botao por baixo) */ @container pandot-dl (max-width: 520px) { .pandot-dl-sistemas { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pandot-dl-sistema { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 14px; text-align: left; } .pandot-dl-medalhao { width: 52px; height: 52px; margin: 0; border-radius: 12px; } .pandot-dl-medalhao svg { width: 27px; height: 27px; } #ContentColumn .Content .pandot-dl-sistema .pandot-dl-botao, .pandot-dl-sistema .pandot-dl-botao-off { grid-column: 1 / -1; margin-top: 12px; } #ContentColumn .Content .BoxContent .pandot-dl-sistema-nota { grid-column: 1 / -1; text-align: center; } #ContentColumn .Content .BoxContent .pandot-dl-conta { margin-left: 0; } } /* Comandos e Regras (paginas da base de dados, editaveis no /admin) */ .pandot-comandos-titulo, .pandot-regras-titulo { margin: 20px 0 8px; font: 700 13px/1.4 var(--pandot-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--pandot-teal-escuro); } .pandot-comandos td:first-child { width: 34%; } #ContentColumn .Content .BoxContent code { display: inline-block; margin: 1px 2px 1px 0; padding: 0 6px; border-radius: 3px; white-space: nowrap; font: 600 12px/1.6 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: #0f4f5e; background: rgba(26, 159, 179, .12); box-shadow: inset 0 0 0 1px rgba(26, 159, 179, .28); } #ContentColumn .Content .BoxContent .pandot-regras-titulo + p, #ContentColumn .Content .BoxContent .pandot-regras-titulo + ul { margin-top: 0; } #ContentColumn .Content .BoxContent ul { margin: 0 0 10px; padding-left: 20px; } #ContentColumn .Content .BoxContent li { margin: 0 0 3px; } .pandot-casas-regras { margin: 0 0 8px; } /* Sistemas do Pandot (/sistemas): cartoes por tema, os exclusivos com borda bronze */ .pandot-sistemas-intro { margin: 0 0 10px; color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-sistemas-selos { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-sistemas-selos li { margin: 0; } #ContentColumn .Content .BoxContent .pandot-sistemas-grupo { margin: 22px 0 10px; } .pandot-sistemas-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; } .pandot-sistema { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-width: 0; padding: 10px 13px 11px; background: rgba(255, 250, 238, .55); border: 1px solid rgba(154, 106, 58, .35); border-left: 3px solid var(--pandot-teal); border-radius: 4px; box-shadow: 0 1px 3px rgba(60, 35, 10, .12); } .pandot-sistema-exclusivo { border-left-color: var(--pandot-bronze); background: rgba(255, 246, 226, .7); } .pandot-selo-exclusivo { background: var(--pandot-bronze); } .pandot-sistema-titulo { margin: 0; font: 700 14px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-sistema-texto { margin: 0; font-size: 12.5px; line-height: 1.45; color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-sistema-comandos { margin: auto 0 0; padding-top: 3px; } #ContentColumn .Content .BoxContent .pandot-sistema-comandos + .pandot-sistema-pagina { margin: 0; } #ContentColumn .Content .BoxContent .pandot-sistema-pagina { margin: auto 0 0; font-size: 12.5px; font-weight: 600; } /* A Jornada no cartao de Contratos: as etapas numa lista que abre */ .pandot-jornada { width: 100%; font-size: 12px; } .pandot-jornada > summary { cursor: pointer; font-weight: 700; color: var(--pandot-teal-escuro); } .pandot-jornada > summary:focus-visible { outline: 2px solid var(--pandot-teal); outline-offset: 2px; } #ContentColumn .Content .BoxContent .pandot-jornada-tabela { width: 100%; margin: 6px 0 0; border-collapse: collapse; font-size: 12px; } #ContentColumn .Content .BoxContent .pandot-jornada-tabela th { padding: 3px 6px; text-align: left; font-size: 11px; color: var(--pandot-texto-suave); background: none; border-bottom: 1px solid rgba(154, 106, 58, .4); } #ContentColumn .Content .BoxContent .pandot-jornada-tabela td { padding: 3px 6px; border-bottom: 1px solid rgba(154, 106, 58, .15); background: none; } #ContentColumn .Content .BoxContent .pandot-jornada-tabela td:first-child, #ContentColumn .Content .BoxContent .pandot-jornada-tabela td:last-child { font-variant-numeric: tabular-nums; } #ContentColumn .Content .BoxContent .pandot-jornada-tabela td:last-child, #ContentColumn .Content .BoxContent .pandot-jornada-tabela th:last-child { text-align: right; } .pandot-sistemas-nota { margin: 16px 0 0; font-size: 12px; color: var(--pandot-texto-suave); } /* Informacoes do Servidor (/ots-info): quatro cartoes de resumo e uma tabela por tema (rotulo a esquerda; no telemovel, o rotulo por cima do texto). Os titulos dos temas sao os da pagina Sistemas (.pandot-sistemas-grupo). */ .pandot-servidor-intro { margin: 0 0 12px; color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-servidor-resumo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-servidor-cartao { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 10px 13px 11px; background: rgba(255, 250, 238, .55); border: 1px solid rgba(154, 106, 58, .35); border-left: 3px solid var(--pandot-teal); border-radius: 4px; box-shadow: 0 1px 3px rgba(60, 35, 10, .12); } .pandot-servidor-cartao-nome { font: 700 11px/1.3 var(--pandot-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--pandot-teal-escuro); } .pandot-servidor-cartao-valor { font: 700 22px/1.15 var(--pandot-texto-fonte); color: var(--pandot-texto); } .pandot-servidor-cartao-detalhe { font-size: 12px; line-height: 1.35; color: var(--pandot-texto-suave); } .pandot-servidor-tabela { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid #8a6a40; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 4px rgba(60, 35, 10, .18); } #ContentColumn .Content .BoxContent .pandot-servidor-tabela th { width: 30%; padding: 8px 12px; vertical-align: top; text-align: left; font: 600 12.5px/1.45 var(--pandot-texto-fonte); color: var(--pandot-texto) !important; background: #ecdcba !important; border-top: 1px solid rgba(138, 106, 64, .3); } #ContentColumn .Content .BoxContent .pandot-servidor-tabela td { padding: 8px 12px; vertical-align: top; line-height: 1.45; background: #f7ebd2; border-top: 1px solid rgba(138, 106, 64, .3); } #ContentColumn .Content .BoxContent .pandot-servidor-tabela tr:first-child > * { border-top: 0; } .pandot-servidor-caveira { width: 22px; height: 22px; margin: -6px 3px -6px -2px; vertical-align: middle; image-rendering: pixelated; } .pandot-servidor-nota { margin: 16px 0 0; font-size: 12px; color: var(--pandot-texto-suave); } @media (max-width: 560px) { #ContentColumn .Content .BoxContent .pandot-servidor-tabela, #ContentColumn .Content .BoxContent .pandot-servidor-tabela tbody, #ContentColumn .Content .BoxContent .pandot-servidor-tabela tr, #ContentColumn .Content .BoxContent .pandot-servidor-tabela th, #ContentColumn .Content .BoxContent .pandot-servidor-tabela td { display: block; width: auto; } #ContentColumn .Content .BoxContent .pandot-servidor-tabela th { padding: 9px 12px 1px; background: #f7ebd2 !important; color: var(--pandot-teal-escuro) !important; } #ContentColumn .Content .BoxContent .pandot-servidor-tabela td { padding: 1px 12px 9px; border-top: 0; } #ContentColumn .Content .BoxContent .pandot-servidor-tabela tr:nth-child(even) > * { background: #ecdcba !important; } } /* Pagina do personagem (templates/pandot/characters.html.twig): o retrato ao lado da ficha (o do MyAAC tinha margem fixa e saia do ecra no telemovel). O gerador da 64x64 com o boneco em baixo a direita: a 2x, deslocado para ficar ao centro do circulo. */ .pandot-personagem-topo { display: flex; align-items: flex-start; gap: 14px; } .pandot-personagem-topo > .pandot-personagem-ficha { flex: 1 1 auto; min-width: 0; } .pandot-personagem-retrato { order: 2; flex: 0 0 auto; position: relative; width: 96px; height: 96px; margin-top: 34px; overflow: hidden; border: 2px solid #c9a46a; border-radius: 50%; background: radial-gradient(circle at 50% 42%, #f6ead0, #dcc79c); box-shadow: 0 2px 6px rgba(60, 35, 10, .25); } .pandot-personagem-retrato img, .Content .BoxContent .pandot-personagem-retrato img { position: absolute; left: -40px; top: -40px; width: 128px; height: 128px; max-width: none; image-rendering: pixelated; } @media (max-width: 560px) { .pandot-personagem-topo { flex-direction: column; align-items: center; } .pandot-personagem-retrato { order: 0; margin-top: 0; } .pandot-personagem-topo > .pandot-personagem-ficha { width: 100%; } } /* Cartaz de Procurados (/procurados): o quadro de madeira com os cartazes, o mesmo da janela do jogo (papel queimado, PROCURADO em Rye, carimbo ANONIMO). Papel e madeira: tools/pandot/site-procurados_V1.py. Do topo: os 3 passos, o quadro (placa, barra com busca e fichas, cartazes, paginas), os mais temidos (podio, lista ate 50, os seus personagens), as ultimas cabecas e as regras com os limites. No telemovel cada cartaz vira uma tira (retrato, nome, recompensa), para muitas cabecas caberem. */ .pandot-procurados { --cartaz-tinta: #6b1a10; --cartaz-vermelho: #7a1f12; --cartaz-texto: #2a1c10; --cartaz-suave: #5a4630; --cartaz-faroeste: 'Rye', 'Cinzel', Georgia, serif; --latao: linear-gradient(#6d4a26, #4e321a); --latao-claro: #f4e4bf; --madeira-escura: #2a1a0c; } #ContentColumn .Content .BoxContent .pandot-procurados-intro { margin: 0 0 12px; color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-procurados-aviso { margin: 0 0 12px; padding: 9px 13px; border: 1px solid #b4483a; border-left-width: 4px; border-radius: 4px; background: rgba(180, 72, 58, .1); color: #6b1f15; font-weight: 600; } /* Os 3 passos: uma faixa de papel, os numeros em tinta vermelha */ .pandot-procurados-como { margin: 0 0 16px; } #ContentColumn .Content .BoxContent .pandot-procurados-passos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border: 1px solid rgba(154, 106, 58, .45); border-radius: 6px; background: rgba(255, 250, 238, .62); box-shadow: 0 1px 3px rgba(60, 35, 10, .12); } #ContentColumn .Content .BoxContent .pandot-procurados-passos > li { display: flex; align-items: flex-start; gap: 11px; margin: 0; padding: 12px 14px 13px; } #ContentColumn .Content .BoxContent .pandot-procurados-passos > li + li { border-left: 1px dashed rgba(154, 106, 58, .55); } .pandot-procurados-passo-numero { flex: 0 0 22px; font: 400 30px/1 var(--cartaz-faroeste); color: var(--cartaz-vermelho); text-align: center; } .pandot-procurados-passo-texto { font-size: 12.5px; line-height: 1.45; color: var(--pandot-texto); } .pandot-procurados-passo-texto b { display: block; margin-bottom: 2px; font: 700 13.5px/1.3 var(--pandot-texto-fonte); color: var(--cartaz-tinta); } /* O quadro de madeira */ .pandot-procurados-quadro { scroll-margin-top: 12px; padding: 14px 16px 24px; border: 1px solid #1e140c; border-radius: 6px; background: #4a2f1b url('images/tema/procurados-madeira.webp') 0 0 / 128px 128px repeat; box-shadow: inset 0 0 0 3px #3a2414, inset 0 0 26px rgba(0, 0, 0, .55), 0 2px 6px rgba(60, 35, 10, .25); } #ContentColumn .Content .BoxContent .pandot-procurados-placa { display: table; margin: 0 auto 14px; padding: 4px 14px; font: 600 12px/1.4 var(--pandot-texto-fonte); color: var(--latao-claro); text-shadow: 0 1px 1px rgba(0, 0, 0, .6); background: var(--latao); border: 1px solid var(--madeira-escura); border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 220, 160, .25), 0 1px 2px rgba(0, 0, 0, .5); } /* A barra (com muitas cabecas): busca em papel, fichas de vocacao e ordem */ .pandot-procurados-barra { margin: 0 0 20px; padding: 10px 12px 11px; border-radius: 4px; background: rgba(24, 14, 6, .58); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .65), 0 1px 0 rgba(255, 220, 160, .12); } #ContentColumn .Content .BoxContent .pandot-procurados-busca { display: flex; gap: 6px; margin: 0 0 9px; } #ContentColumn .Content .BoxContent .pandot-procurados-busca input[type="search"] { flex: 1 1 auto; min-width: 0; height: 32px; margin: 0; padding: 0 10px; box-sizing: border-box; border: 1px solid var(--madeira-escura); border-radius: 3px; background: #f6ead0; color: var(--cartaz-texto); font: 600 13px/1 var(--pandot-texto-fonte); box-shadow: inset 0 1px 2px rgba(60, 35, 10, .35); } #ContentColumn .Content .BoxContent .pandot-procurados-busca input[type="search"]::placeholder { color: #8a7458; font-weight: 400; } #ContentColumn .Content .BoxContent .pandot-procurados-busca input[aria-invalid="true"] { border-color: #e0704f; box-shadow: 0 0 0 1px #e0704f; } #ContentColumn .Content .BoxContent .pandot-procurados-busca button { flex: 0 0 auto; height: 32px; margin: 0; padding: 0 16px; border: 1px solid #2a0a04; border-radius: 3px; cursor: pointer; background: linear-gradient(#8f2c1b, #6b1a10); color: #fbeedd; font: 700 12.5px/1 var(--pandot-texto-fonte); box-shadow: inset 0 1px 0 rgba(255, 200, 170, .25); } #ContentColumn .Content .BoxContent .pandot-procurados-busca button:hover { background: linear-gradient(#a03420, #7a1f12); } .pandot-procurados-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .pandot-procurados-fichas, .pandot-procurados-ordem { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .pandot-procurados-ordem { margin-left: auto; } .pandot-procurados-ordem-rotulo { margin-right: 2px; font: 600 11px/1 var(--pandot-texto-fonte); color: #d9c49a; } #ContentColumn .Content .pandot-procurados-ficha { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; box-sizing: border-box; white-space: nowrap; border: 1px solid var(--madeira-escura); border-radius: 13px; background: #ecdcb8; color: var(--cartaz-texto); font: 600 11.5px/1 var(--pandot-texto-fonte); text-decoration: none; box-shadow: 0 1px 1px rgba(0, 0, 0, .35); } #ContentColumn .Content .pandot-procurados-ficha:hover { background: #f8eed6; color: var(--cartaz-tinta); } #ContentColumn .Content .pandot-procurados-ficha-ligada, #ContentColumn .Content .pandot-procurados-ficha-ligada:hover { background: var(--cartaz-tinta); border-color: #2a0a04; color: #fbeedd; } .pandot-procurados-online::before { content: ""; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #847c6e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); } .pandot-procurados-online.pandot-procurados-ficha-ligada::before { background: #6fdc6a; } #ContentColumn .Content .pandot-procurados-ficha:focus-visible, #ContentColumn .Content .pandot-procurados-pagina:focus-visible, #ContentColumn .Content .BoxContent .pandot-procurados-busca :focus-visible { outline: 2px solid #f4d48a; outline-offset: 2px; } #ContentColumn .Content .BoxContent .pandot-procurados-busca-erro { margin: 8px 0 0; font-size: 12px; color: #ffd2c4; } /* Os cartazes */ #ContentColumn .Content .BoxContent .pandot-procurados-cartazes { display: grid; grid-template-columns: repeat(auto-fit, 204px); justify-content: center; gap: 24px 18px; margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-procurados-cartazes > li { margin: 0; } .pandot-cartaz { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; width: 204px; height: 344px; padding: 19px 15px 19px; background: url('images/tema/procurados-papel.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); transform: rotate(var(--giro, 0deg)); color: var(--cartaz-texto); text-align: center; } .pandot-cartaz > * { flex-shrink: 0; } .pandot-cartaz:nth-child(4n+1) { --giro: -1.2deg; } .pandot-cartaz:nth-child(4n+2) { --giro: .8deg; } .pandot-cartaz:nth-child(4n+3) { --giro: -.4deg; } .pandot-cartaz:nth-child(4n+4) { --giro: 1.3deg; } .pandot-cartaz-titulo { display: block; width: 100%; margin: 0 0 7px; padding-bottom: 4px; border-bottom: 3px double rgba(120, 84, 44, .7); font: 400 25px/1.05 var(--cartaz-faroeste); text-transform: uppercase; color: var(--cartaz-tinta); } .pandot-cartaz-retrato { position: relative; display: block; width: 92px; height: 92px; overflow: hidden; border: 2px solid #60422a; outline: 1px solid rgba(150, 112, 64, .8); outline-offset: 2px; background: radial-gradient(circle at 50% 42%, #f1e3bd, #d8c393); } /* O retrato do gerador (64x64, o boneco em baixo a direita) a 2x, com o boneco ao centro. O "img { max-width: 100% }" do telemovel encolhia-o para a largura da moldura e o boneco saia do centro. */ .pandot-cartaz-retrato img, .Content .BoxContent .pandot-cartaz-retrato img { position: absolute; left: -44px; top: -44px; width: 128px; height: 128px; max-width: none; image-rendering: pixelated; } #ContentColumn .Content .pandot-cartaz-nome { display: block; max-width: 100%; margin-top: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14.5px/1.25 var(--pandot-titulo); letter-spacing: .04em; text-transform: uppercase; color: var(--cartaz-texto); text-decoration: none; } #ContentColumn .Content a.pandot-cartaz-nome:hover, #ContentColumn .Content a.pandot-cartaz-nome:focus-visible { color: var(--cartaz-tinta); text-decoration: underline; } .pandot-cartaz-detalhe { display: block; font: 600 9.5px/1.4 var(--pandot-texto-fonte); letter-spacing: .06em; text-transform: uppercase; color: var(--cartaz-suave); } .pandot-cartaz-vocacao { margin-left: 5px; } .pandot-cartaz-rotulo { display: block; width: 100%; margin-top: 5px; padding-top: 5px; border-top: 1px solid rgba(120, 84, 44, .45); font: 700 9px/1.2 var(--pandot-texto-fonte); letter-spacing: .16em; text-transform: uppercase; color: var(--cartaz-vermelho); } .pandot-cartaz-valor { display: block; font: 400 32px/1 var(--cartaz-faroeste); color: var(--cartaz-vermelho); } .pandot-cartaz-soma { display: block; font: 600 9.5px/1.2 var(--pandot-texto-fonte); color: var(--cartaz-suave); } .pandot-cartaz-contratante { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; font: 600 9px/1 var(--pandot-texto-fonte); letter-spacing: .1em; text-transform: uppercase; color: var(--cartaz-suave); } .pandot-cartaz-carimbo { display: inline-block; padding: 3px 6px 2px; transform: rotate(-6deg); border: 2px solid rgba(176, 34, 24, .85); border-radius: 3px; font: 400 14px/1 var(--cartaz-faroeste); letter-spacing: .03em; text-transform: uppercase; color: #b02218; opacity: .88; mix-blend-mode: multiply; } .pandot-cartaz-rodape { display: flex; justify-content: space-between; width: 100%; margin-top: 7px; font: 600 9px/1 var(--pandot-texto-fonte); letter-spacing: .08em; text-transform: uppercase; color: #6e6252; } .pandot-cartaz-estado::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #847c6e; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); } .pandot-cartaz-online { color: #2f6b2a; } .pandot-cartaz-online::before { background: #5ec85a; } /* Quem aceitou o contrato (nunca fica oculto, como no jogo): 2 nomes e o resto contado. */ .pandot-cartaz-cacadores { display: flex; justify-content: center; gap: 4px; width: 100%; margin-top: 8px; padding-top: 6px; border-top: 1px dashed rgba(120, 84, 44, .55); font: 700 10.5px/1.3 var(--pandot-texto-fonte); color: var(--cartaz-texto); } .pandot-cartaz-cacadores-nomes { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #ContentColumn .Content .pandot-cartaz-cacadores a { color: var(--cartaz-tinta); text-decoration: none; } #ContentColumn .Content .pandot-cartaz-cacadores a:hover, #ContentColumn .Content .pandot-cartaz-cacadores a:focus-visible { text-decoration: underline; } .pandot-cartaz-cacadores b { flex: 0 0 auto; color: var(--cartaz-vermelho); } .pandot-cartaz-cacadores-vazio { font-weight: 600; font-style: italic; color: var(--cartaz-suave); } .pandot-cartaz-vazio { margin: 0 auto; } #ContentColumn .Content .BoxContent .pandot-cartaz-vazio-texto { margin: 48px 0 10px; font: 700 15px/1.35 var(--pandot-titulo); color: var(--cartaz-texto); } #ContentColumn .Content .BoxContent .pandot-cartaz-vazio-dica { margin: 0; font-size: 12px; color: var(--cartaz-suave); } /* Nada com o filtro: um bilhete de papel com o caminho de volta */ .pandot-procurados-nada { max-width: 340px; margin: 6px auto 4px; padding: 26px 22px 24px; text-align: center; background: url('images/tema/procurados-papel.webp') center / 100% 100% no-repeat; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .45)); } #ContentColumn .Content .BoxContent .pandot-procurados-nada p { margin: 0 0 14px; font: 700 14px/1.4 var(--pandot-titulo); color: var(--cartaz-texto); } #ContentColumn .Content .pandot-procurados-limpar { display: inline-block; padding: 7px 14px; border: 1px solid #2a0a04; border-radius: 3px; background: linear-gradient(#8f2c1b, #6b1a10); color: #fbeedd; font: 700 12.5px/1 var(--pandot-texto-fonte); text-decoration: none; } #ContentColumn .Content .pandot-procurados-limpar:hover { background: linear-gradient(#a03420, #7a1f12); color: #fff; } /* As paginas: placas de latao pregadas no fundo do quadro */ .pandot-procurados-paginas { margin: 24px 0 0; text-align: center; } #ContentColumn .Content .BoxContent .pandot-procurados-mostrando { margin: 0 0 9px; font: 600 12px/1.3 var(--pandot-texto-fonte); color: var(--latao-claro); text-shadow: 0 1px 1px rgba(0, 0, 0, .6); } #ContentColumn .Content .BoxContent .pandot-procurados-paginas ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-procurados-paginas li { margin: 0; } #ContentColumn .Content .pandot-procurados-pagina { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 9px; box-sizing: border-box; border: 1px solid var(--madeira-escura); border-radius: 3px; background: var(--latao); color: var(--latao-claro); font: 700 12.5px/1 var(--pandot-texto-fonte); text-decoration: none; text-shadow: 0 1px 1px rgba(0, 0, 0, .55); box-shadow: inset 0 1px 0 rgba(255, 220, 160, .25), 0 1px 2px rgba(0, 0, 0, .5); } #ContentColumn .Content a.pandot-procurados-pagina:hover { background: linear-gradient(#80582e, #5c3c1f); color: #fff; } #ContentColumn .Content .pandot-procurados-pagina-atual { background: #f6ead0; color: var(--cartaz-tinta); text-shadow: none; } .pandot-procurados-pagina-salto { align-self: center; padding: 0 2px; color: #d9c49a; } /* Secoes abaixo do quadro */ .pandot-procurados-secao { min-width: 0; margin-top: 26px; overflow-x: auto; } #ContentColumn .Content .BoxContent .pandot-procurados-subtitulo { margin: 0 0 6px; font: 700 13px/1.4 var(--pandot-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--pandot-teal-escuro); } #ContentColumn .Content .BoxContent .pandot-procurados-nota { margin: 0 0 10px; font-size: 12px; color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-procurados-nota-fim { margin: 10px 0 0; } #ContentColumn .Content .BoxContent .pandot-procurados-tabela th, #ContentColumn .Content .BoxContent .pandot-procurados-tabela td { padding-left: 9px; padding-right: 9px; } #ContentColumn .Content .BoxContent .pandot-procurados-tabela td small { color: var(--pandot-texto-suave); font-size: 11px; white-space: nowrap; } #ContentColumn .Content .BoxContent .pandot-procurados-tabela td small.pandot-procurados-titulo { display: block; font-size: 10.5px; line-height: 1.25; white-space: normal; color: var(--pandot-bronze); } #ContentColumn .Content .BoxContent .pandot-procurados-tabela .pandot-procurados-numero { text-align: right; white-space: nowrap; font-weight: 600; } #ContentColumn .Content .BoxContent .pandot-procurados-tabela .pandot-procurados-posicao { width: 42px; text-align: center; font-weight: 700; color: var(--pandot-bronze); } .pandot-procurados-tabela tr.pandot-procurados-meu td { background: #fbe7b0; box-shadow: inset 0 0 0 9999px rgba(232, 200, 96, .12); } .pandot-procurados-quando { white-space: nowrap; color: var(--pandot-texto-suave); } .pandot-procurados-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #ContentColumn .Content .BoxContent .pandot-procurados-vazio { margin: 0; color: var(--pandot-texto-suave); font-style: italic; } /* Os mais temidos: o podio (1o ao meio e mais alto), a lista e o resto ate 50 */ #ContentColumn .Content .BoxContent .pandot-procurados-podio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 4px 0 14px; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-procurados-podio > li { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; margin: 0; padding: 14px 10px 12px; text-align: center; border: 1px solid rgba(154, 106, 58, .45); border-radius: 6px; background: rgba(255, 250, 238, .68); box-shadow: 0 1px 3px rgba(60, 35, 10, .14); } #ContentColumn .Content .BoxContent .pandot-procurados-podio > li.pandot-procurados-podio-1 { order: 2; padding-top: 22px; padding-bottom: 18px; border-color: #c9a23a; background: linear-gradient(#fff6dc, #f3e1b4); } #ContentColumn .Content .BoxContent .pandot-procurados-podio > li.pandot-procurados-podio-2 { order: 1; } #ContentColumn .Content .BoxContent .pandot-procurados-podio > li.pandot-procurados-podio-3 { order: 3; } /* Com 1 ou 2 no ranking o podio encolhe e fica ao centro */ #ContentColumn .Content .BoxContent .pandot-procurados-podio-com1 { grid-template-columns: minmax(0, 240px); justify-content: center; } #ContentColumn .Content .BoxContent .pandot-procurados-podio-com2 { grid-template-columns: repeat(2, minmax(0, 240px)); justify-content: center; } #ContentColumn .Content .BoxContent .pandot-procurados-podio > li.pandot-procurados-meu { box-shadow: 0 0 0 2px var(--pandot-teal), 0 1px 3px rgba(60, 35, 10, .14); } .pandot-procurados-medalha { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-bottom: 4px; border-radius: 50%; font: 400 19px/1 var(--cartaz-faroeste); color: #3b2a17; border: 2px solid rgba(60, 35, 10, .55); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .45), 0 1px 2px rgba(60, 35, 10, .35); } .pandot-procurados-podio-1 .pandot-procurados-medalha { width: 48px; height: 48px; font-size: 24px; background: radial-gradient(circle at 35% 30%, #fff1b8, #e1b13a 55%, #a87418); } .pandot-procurados-podio-2 .pandot-procurados-medalha { background: radial-gradient(circle at 35% 30%, #ffffff, #c9ccd1 55%, #8d939a); } .pandot-procurados-podio-3 .pandot-procurados-medalha { background: radial-gradient(circle at 35% 30%, #ffe0bf, #c98a52 55%, #85522a); } #ContentColumn .Content .pandot-procurados-podio-nome { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 700 14px/1.3 var(--pandot-titulo); color: var(--cartaz-texto); text-decoration: none; } #ContentColumn .Content a.pandot-procurados-podio-nome:hover, #ContentColumn .Content a.pandot-procurados-podio-nome:focus-visible { color: var(--cartaz-tinta); text-decoration: underline; } .pandot-procurados-podio-1 .pandot-procurados-podio-nome { font-size: 16px; } .pandot-procurados-podio-titulo { font-size: 11px; line-height: 1.25; color: var(--pandot-bronze); } .pandot-procurados-podio-fama { margin-top: 3px; font-size: 11.5px; color: var(--pandot-texto-suave); } .pandot-procurados-podio-fama b { font: 700 19px/1 var(--pandot-texto-fonte); color: var(--cartaz-vermelho); } .pandot-procurados-podio-cabecas { font-size: 11px; color: var(--pandot-texto-suave); } .pandot-procurados-mais { margin: 10px 0 0; } .pandot-procurados-mais > summary { padding: 6px 0; cursor: pointer; font-weight: 700; color: var(--pandot-teal-escuro); } .pandot-procurados-mais > summary:focus-visible { outline: 2px solid var(--pandot-teal); outline-offset: 2px; } .pandot-procurados-mais[open] > summary { margin-bottom: 6px; } /* Os personagens de quem entrou na conta */ .pandot-procurados-seus { margin: 16px 0 0; padding: 10px 14px 11px; border: 1px solid rgba(26, 159, 179, .4); border-left: 4px solid var(--pandot-teal); border-radius: 4px; background: rgba(26, 159, 179, .07); } #ContentColumn .Content .BoxContent .pandot-procurados-seus-titulo { margin: 0 0 6px; font: 700 12px/1.3 var(--pandot-titulo); letter-spacing: .06em; text-transform: uppercase; color: var(--pandot-teal-escuro); } #ContentColumn .Content .BoxContent .pandot-procurados-seus-tabela { width: 100%; border-collapse: collapse; font-size: 12.5px; } #ContentColumn .Content .BoxContent .pandot-procurados-seus-tabela th { padding: 5px 8px; text-align: left; font: 600 11.5px/1.3 var(--pandot-texto-fonte); } #ContentColumn .Content .BoxContent .pandot-procurados-seus-tabela td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid rgba(26, 159, 179, .16); background: none; } #ContentColumn .Content .BoxContent .pandot-procurados-seus-tabela tr:last-child td { border-bottom: 0; } #ContentColumn .Content .BoxContent .pandot-procurados-seus-tabela .pandot-procurados-numero { text-align: right; white-space: nowrap; } #ContentColumn .Content .BoxContent .pandot-procurados-seus-tabela small { color: var(--pandot-bronze); font-size: 11px; } #ContentColumn .Content .pandot-procurados-seus-nome { font-weight: 700; } .pandot-procurados-seus-lugar { color: var(--cartaz-vermelho); } .pandot-procurados-seus-sem { color: var(--pandot-texto-suave); font-style: italic; } .pandot-procurados-seus-procurado, .pandot-procurados-conta-procurado { display: inline-block; margin-left: 4px; padding: 0 7px; border-radius: 9px; background: rgba(122, 31, 18, .12); color: var(--cartaz-vermelho); font-weight: 700; font-size: 11.5px; } /* Regras e limites: os numeros que mandam e o resto em duas colunas */ #ContentColumn .Content .BoxContent .pandot-procurados-limites { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin: 4px 0 14px; border: 1px solid rgba(154, 106, 58, .45); border-radius: 6px; overflow: hidden; background: rgba(154, 106, 58, .4); } #ContentColumn .Content .BoxContent .pandot-procurados-limites > div { padding: 9px 12px 10px; background: #f7ebd2; } #ContentColumn .Content .BoxContent .pandot-procurados-limites dt { margin: 0; font: 700 20px/1.1 var(--pandot-titulo); color: var(--cartaz-vermelho); } #ContentColumn .Content .BoxContent .pandot-procurados-limites dd { margin: 2px 0 0; font-size: 12px; line-height: 1.35; color: var(--pandot-texto-suave); } .pandot-procurados-regras-colunas { display: grid; gap: 4px 22px; } #ContentColumn .Content .BoxContent .pandot-procurados-regras-coluna h4 { margin: 6px 0 5px; font: 700 13px/1.3 var(--pandot-texto-fonte); color: var(--cartaz-tinta); } #ContentColumn .Content .BoxContent .pandot-procurados-regras-coluna ul { margin: 0 0 6px; padding-left: 18px; } #ContentColumn .Content .BoxContent .pandot-procurados-regras-coluna li { margin: 0 0 4px; font-size: 12.5px; line-height: 1.5; } #ContentColumn .Content .BoxContent .pandot-procurados-onde { margin: 8px 0 0; font-size: 12.5px; color: var(--pandot-texto-suave); } /* A caixa na pagina do personagem e na da conta */ .pandot-procurados-personagem-premio { color: #7a1f12; } #ContentColumn .Content .BoxContent .pandot-procurados-conta-nada { margin: 6px 4px; font-size: 12.5px; } @media (min-width: 900px) { .pandot-procurados-regras-colunas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } @media (prefers-reduced-motion: no-preference) { .pandot-procurados-cartazes .pandot-cartaz { transition: transform .18s ease; } .pandot-procurados-cartazes .pandot-cartaz:hover, .pandot-procurados-cartazes .pandot-cartaz:focus-within { transform: rotate(0deg) translateY(-3px); } } @media (max-width: 640px) { .pandot-procurados-quadro { padding: 12px 8px 18px; } #ContentColumn .Content .BoxContent .pandot-procurados-tabela td small, .pandot-procurados-hora { display: none; } #ContentColumn .Content .BoxContent .pandot-procurados-passos { grid-template-columns: 1fr; } #ContentColumn .Content .BoxContent .pandot-procurados-passos > li + li { border-left: 0; border-top: 1px dashed rgba(154, 106, 58, .55); } .pandot-procurados-ordem { margin-left: 0; } #ContentColumn .Content .BoxContent .pandot-procurados-limites { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* O podio em coluna: 1, 2 e 3, a medalha ao lado do nome */ #ContentColumn .Content .BoxContent .pandot-procurados-podio { grid-template-columns: 1fr; gap: 6px; } #ContentColumn .Content .BoxContent .pandot-procurados-podio > li, #ContentColumn .Content .BoxContent .pandot-procurados-podio > li.pandot-procurados-podio-1 { order: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "m n f" "m t c"; align-items: center; column-gap: 10px; row-gap: 0; padding: 8px 12px; text-align: left; } .pandot-procurados-medalha { grid-area: m; margin: 0; } .pandot-procurados-podio-1 .pandot-procurados-medalha { width: 40px; height: 40px; font-size: 20px; } #ContentColumn .Content .pandot-procurados-podio-nome, .pandot-procurados-podio-1 .pandot-procurados-podio-nome { grid-area: n; font-size: 14px; } .pandot-procurados-podio-titulo { grid-area: t; } .pandot-procurados-podio-fama { grid-area: f; margin: 0; text-align: right; } .pandot-procurados-podio-cabecas { grid-area: c; text-align: right; } } /* No telemovel o cartaz vira uma tira: retrato, nome, recompensa, estado e cacadores, para uma pagina cheia caber num ecra pequeno. */ @media (max-width: 520px) { #ContentColumn .Content .BoxContent .pandot-procurados-cartazes { grid-template-columns: minmax(0, 1fr); gap: 10px; } .pandot-procurados-cartazes .pandot-cartaz, .pandot-procurados-cartazes .pandot-cartaz:hover, .pandot-procurados-cartazes .pandot-cartaz:focus-within { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "r n v" "r d d" "r e e" "c c c"; align-items: center; column-gap: 12px; row-gap: 1px; width: auto; height: auto; padding: 10px 12px 9px; text-align: left; transform: none; filter: none; border: 1px solid var(--madeira-escura); border-radius: 4px; background: #f3e3c0; box-shadow: inset 0 0 22px rgba(120, 84, 44, .38), 0 2px 3px rgba(0, 0, 0, .45); } .pandot-procurados-cartazes .pandot-cartaz-titulo, .pandot-procurados-cartazes .pandot-cartaz-rotulo, .pandot-procurados-cartazes .pandot-cartaz-contratante, .pandot-procurados-cartazes .pandot-cartaz-soma { display: none; } .pandot-procurados-cartazes .pandot-cartaz-retrato { grid-area: r; width: 60px; height: 60px; outline: 0; } .pandot-procurados-cartazes .pandot-cartaz-retrato img, .Content .BoxContent .pandot-procurados-cartazes .pandot-cartaz-retrato img { left: -34px; top: -34px; width: 96px; height: 96px; } #ContentColumn .Content .pandot-procurados-cartazes .pandot-cartaz-nome { grid-area: n; margin: 0; font-size: 13.5px; } .pandot-procurados-cartazes .pandot-cartaz-detalhe { grid-area: d; } .pandot-procurados-cartazes .pandot-cartaz-valor { grid-area: v; font-size: 23px; text-align: right; } .pandot-procurados-cartazes .pandot-cartaz-rodape { grid-area: e; justify-content: flex-start; gap: 14px; margin-top: 4px; } .pandot-procurados-cartazes .pandot-cartaz-cacadores { grid-area: c; justify-content: flex-start; margin-top: 7px; padding-top: 5px; } } /* Entrar na conta (account.login.html.twig): dois cartoes; ate 640 px tudo em coluna, campos e botoes na largura toda */ .pandot-entrar { display: grid; gap: 16px; } .pandot-entrar-cartao { border: 1px solid #b38d5b; border-radius: 6px; overflow: hidden; background: rgba(255, 250, 238, .62); box-shadow: 0 2px 6px rgba(60, 35, 10, .16); } #ContentColumn .Content .BoxContent .pandot-entrar-titulo { margin: 0; padding: 9px 16px; font: 700 13px/1.3 var(--pandot-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--pandot-creme); background: linear-gradient(#1f5468, #123d4e); border-bottom: 1px solid #0b2a36; text-shadow: var(--pandot-sombra-titulo); } .pandot-entrar-form { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 14px 24px; align-items: start; padding: 16px; } .pandot-entrar-campos { display: grid; gap: 12px; min-width: 0; } .pandot-entrar-campo { display: grid; gap: 5px; } .pandot-entrar-campo > span { font: 600 12.5px/1.2 var(--pandot-texto-fonte); color: var(--pandot-texto); } .pandot-entrar-campo > span.red { color: #b4372a; } #ContentColumn .Content .pandot-entrar-campo input { box-sizing: border-box; width: 100%; height: 40px; margin: 0; padding: 0 11px; font-size: 14px; border-radius: 4px; } .pandot-entrar-lembrar { display: inline-flex; align-items: center; gap: 8px; justify-self: start; cursor: pointer; font: 400 12.5px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto); } .pandot-entrar-lembrar input { width: 16px; height: 16px; margin: 0; accent-color: var(--pandot-teal-escuro); } .pandot-entrar-acoes { display: grid; gap: 12px; padding-top: 23px; } .pandot-entrar-acoes .pandot-botao, .pandot-entrar-criar { height: 40px; margin: 0; font-size: 13px; letter-spacing: .03em; } #ContentColumn .Content .pandot-entrar-perdeu { justify-self: center; font: 600 12px/1.3 var(--pandot-texto-fonte); } .pandot-entrar-novo-corpo { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 16px 16px; } .pandot-entrar-pergunta { margin: 0 0 6px; font: 700 16px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-entrar-novo ul { margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-entrar-novo li { margin: 0 0 3px; color: var(--pandot-texto-suave); } .pandot-entrar-criar { flex: none; width: 210px; } @media (max-width: 640px) { .pandot-entrar-form { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; } .pandot-entrar-acoes { padding-top: 0; } .pandot-entrar-novo-corpo { flex-direction: column; align-items: stretch; gap: 14px; padding: 14px; } .pandot-entrar-criar { width: 100%; } } /* --------------------------------------------------------------------- Computador (1024 px ou mais): colunas de 226 px como no RubinOT, logo no alto da esquerda (como antes), Pandoria no alto da direita e barra de cima. As tres colunas ficam lado a lado (flex) e o rodape vem depois da coluna mais alta: abrir um menu comprido nunca tapa o rodape. --------------------------------------------------------------------- */ @media (min-width: 1024px) { #ArtworkHelper { min-width: 0; } #Bodycontainer { display: block; width: 100%; min-width: 0; max-width: 1280px; height: auto; margin: 0 auto; padding: 0 12px; box-sizing: border-box; } #ContentRow { position: relative; top: 0; display: flex; align-items: flex-start; gap: 12px; padding: 196px 0 26px; } #MenuColumn { position: relative; left: auto; top: auto; flex: 0 0 226px; width: 226px; margin: 0; font-family: var(--pandot-texto-fonte); font-weight: 400; } #ContentColumn { flex: 1 1 auto; min-width: 0; margin: 0; } #ThemeboxesColumn { position: relative; top: auto; right: auto; flex: 0 0 226px; width: 226px; margin: 0; } /* logo no alto da coluna da esquerda */ #LeftArtwork { display: block; position: absolute; top: -196px; left: 0; z-index: 6; width: 226px; height: 196px; background: none; } #PandotLogoLink { display: block; width: 192px; height: 182px; margin: 4px auto 0; } #LeftArtwork #TibiaLogoArtworkTop { position: static; display: block; width: 192px; height: 182px; object-fit: contain; cursor: pointer; filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6)); transition: transform .25s ease; } #PandotLogoLink:hover #TibiaLogoArtworkTop { transform: translateY(-2px) scale(1.03); } #PandotLogoLink:focus-visible { outline: 2px solid #f0d79e; outline-offset: 2px; border-radius: 6px; } /* Pandoria no alto da direita, a par do logo */ #PandotPandoria { margin-top: -192px; } #PandotBarraTopo { display: flex; align-items: center; justify-content: center; gap: 18px; position: relative; z-index: 3; box-sizing: border-box; height: 46px; margin: 0 0 12px; padding: 0 170px 2px 70px; background: url('images/tema/barra-topo-esq.webp?v=2') left top / auto 100% no-repeat, url('images/tema/barra-topo-dir.webp?v=2') right top / auto 100% no-repeat, url('images/tema/barra-topo-meio.webp?v=2') 56px 0 / calc(100% - 113px) 100% no-repeat; font: 400 12px/1 var(--pandot-texto-fonte); } #PandotBarraTopo a { display: inline-flex; align-items: center; gap: 7px; color: var(--pandot-creme); text-decoration: none; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .7); } #PandotBarraTopo a:hover { color: #fff; } #PandotBarraTopo a:hover span:not(.pandot-ponto) { text-decoration: underline; text-underline-offset: 3px; } #PandotBarraTopo svg { width: 15px; height: 15px; color: #6fe3f0; } #PandotBarraTopo b { color: #4ade80; font-weight: 700; font-size: 12.5px; } .pandot-barra-separador { width: 1px; height: 16px; background: linear-gradient(transparent, rgba(240, 230, 210, .45), transparent); } #PandotBarraTopo .pandot-ponto { width: 8px; height: 8px; border-radius: 50%; background: #4cd964; box-shadow: 0 0 6px #4cd964; } #PandotBarraTopo .pandot-ponto-off { background: #e0584a; box-shadow: 0 0 6px #e0584a; } /* bandeiras do idioma dentro da barra, do lado direito (antes da ponta) */ body #pandot-lang-switcher { position: absolute; top: 207px; right: calc((100% - min(100%, 1280px)) / 2 + 12px + 226px + 12px + 58px); bottom: auto; left: auto; padding: 0; gap: 4px; background: none; border: 0; box-shadow: none; z-index: 20; } body #pandot-lang-switcher a { padding: 3px 4px; border-radius: 3px; } body #pandot-lang-switcher a.is-active { background: rgba(70, 230, 245, .18); box-shadow: inset 0 0 0 1px rgba(70, 230, 245, .45); } body #pandot-lang-switcher .pandot-lang-code { display: none; } body #pandot-lang-switcher .pandot-flag { width: 22px; height: 15px; } } /* --------------------------------------------------------------------- Telemovel e tablet (ate 1023 px): a gaveta do menu usa as caixas novas; o que so faz sentido no computador fica escondido --------------------------------------------------------------------- */ @media (max-width: 1023px) { #PandotPandoria, .pandot-botao-download { display: none !important; } #MenuColumn { width: 258px !important; padding: 16px 16px 40px !important; } #MenuColumn #Loginbox { top: 0; margin-bottom: 14px; } #ContentColumn .Content .Box > .Title.pandot-titulo-pagina { font-size: 12.5px; padding-right: 96px; } #ContentColumn .Content .Box > .Border_2 { margin-left: 6px; margin-right: 6px; } /* o corpo tem 58 px de barra fixa em cima */ #ArtworkHelper { min-height: calc(100vh - 58px); } /* rodape: o mapa do site abre num botao */ .pandot-rodape-dentro { padding: 14px 16px 22px; } .pandot-rodape-mapa-botao { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 6px 0; background: none; border: 0; cursor: pointer; font: 700 12px/1 var(--pandot-titulo); letter-spacing: .07em; text-transform: uppercase; color: var(--pandot-creme); } .pandot-rodape-mapa-botao svg { width: 18px; height: 18px; transition: transform .2s ease; } .pandot-rodape-mapa-botao[aria-expanded="true"] svg { transform: rotate(180deg); } .pandot-rodape-mapa { display: none; grid-template-columns: 1fr 1fr; gap: 16px 18px; margin-top: 12px; } .pandot-rodape-mapa.pandot-aberto { display: grid; } .pandot-rodape-base { margin-top: 12px; flex-wrap: wrap; } .pandot-rodape-legal { flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce) { #PandotPandoria .pandoria-monstro, #PandotPandoria::before, .pandot-rodape-hora-ponto::after { animation: none; } #Menu.pandot-menu-pronto .pandot-submenu-mola, #Menu.pandot-menu-pronto .menuitem, #Menu .MenuButton .Extend { transition: none; } } /* ------------------------------------------------------------------ Aviso de atualizacao do jogo (pandot atualizar | reiniciar): faixa no fundo do ecra durante a contagem (pandot_faixa_atualizacao). ------------------------------------------------------------------ */ .pandot-atualizacao { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 1100; box-sizing: border-box; max-width: 760px; margin: 0 auto; padding: 12px 16px; display: flex; gap: 12px; align-items: center; border-radius: 12px; border: 1px solid rgba(207, 172, 104, .6); background: linear-gradient(160deg, rgba(16, 37, 51, .97), rgba(10, 24, 34, .98)); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); color: #e9dfc8; font: 14px/1.5 Inter, "Segoe UI", Arial, sans-serif; text-align: left; } .pandot-atualizacao[hidden] { display: none; } .pandot-atualizacao p { margin: 0; } .pandot-atualizacao b { color: #f3e9d2; font-weight: 600; } .pandot-atualizacao-relogio { font-variant-numeric: tabular-nums; color: #e8cf96 !important; } .pandot-atualizacao-icone { flex: 0 0 auto; width: 26px; height: 26px; color: #e8cf96; } .pandot-atualizacao.fechando { border-color: rgba(224, 164, 88, .8); } .pandot-atualizacao.fechando .pandot-atualizacao-icone { color: #e0a458; } @media (prefers-reduced-motion: no-preference) { .pandot-atualizacao-icone { animation: pandot-ampulheta 3s ease-in-out infinite; } @keyframes pandot-ampulheta { 0%, 70% { transform: rotate(0); } 85%, 100% { transform: rotate(180deg); } } } /* --------------------------------------------------------------------- Eventos (/eventos, plugins/pandot-paginas/pages/eventos.php) e a caixa "Eventos" da coluna da direita (plugins/pandot-metas/events-public.php). A Meta do Server numa faixa de tinta verde com a barra de bambu (os nos acendem nos marcos de 25, 50 e 75%), os eventos de hoje em cartoes de papel com a cor do tipo e a agenda como folhas de calendario. Os nomes (ate 48 letras), as descricoes (ate 140) e os nomes dos jogadores nunca saem da caixa: quebram (overflow-wrap) ou encurtam com "..." nas linhas curtas. --------------------------------------------------------------------- */ .pandot-eventos { --ev-tinta: #18241d; --ev-ouro: #e2bd52; --ev-ouro-claro: #f6e2a0; --ev-creme: #f1e8d0; --ev-bambu: #6db352; --ev-borda: rgba(154, 106, 58, .42); --ev-papel: rgba(255, 250, 238, .66); --ev-selo: #a63a2e; } #ContentColumn .Content .BoxContent .pandot-eventos p, #ContentColumn .Content .BoxContent .pandot-eventos h3, #ContentColumn .Content .BoxContent .pandot-eventos h4 { margin: 0; } #ContentColumn .Content .BoxContent .pandot-eventos ul, #ContentColumn .Content .BoxContent .pandot-eventos ol { margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-eventos li { margin: 0; } #ContentColumn .Content .BoxContent .pandot-eventos-intro { margin: 0 0 14px; color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-eventos-aviso { margin: 0 0 14px; padding: 9px 13px; border: 1px solid #b38d5b; border-left-width: 4px; border-radius: 4px; background: rgba(154, 106, 58, .12); color: #5a3b17; font-weight: 600; } #ContentColumn .Content .BoxContent .pandot-eventos-bonus-agora { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 8px 14px; border: 1px solid #b8921d; border-radius: 6px; background: linear-gradient(90deg, #f8e7a8, #f3dc8c); font-weight: 600; color: #4a3708; } .pandot-eventos-bonus-agora span { font: 700 22px/1 var(--pandot-titulo); color: #7a5a06; } /* A Meta do Server */ .pandot-eventos-meta { position: relative; margin: 0 0 22px; padding: 16px 18px 18px; border-radius: 8px; scroll-margin-top: 12px; background: radial-gradient(120% 140% at 0 0, #35503b 0, #22342a 55%, var(--ev-tinta) 100%); border: 1px solid #0d150f; color: var(--ev-creme); box-shadow: inset 0 0 0 1px rgba(226, 189, 82, .22), 0 3px 10px rgba(40, 25, 10, .3); } .pandot-eventos-meta-feita { box-shadow: inset 0 0 0 1px rgba(226, 189, 82, .6), 0 0 18px rgba(226, 189, 82, .35), 0 3px 10px rgba(40, 25, 10, .3); } .pandot-eventos-meta-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 8px; } .pandot-eventos-selo { display: inline-block; padding: 2px 9px; border-radius: 3px; white-space: nowrap; vertical-align: 1px; background: var(--ev-selo); color: #fbeedd; font: 700 11px/1.5 var(--pandot-texto-fonte); box-shadow: inset 0 1px 0 rgba(255, 200, 170, .25), 0 1px 1px rgba(0, 0, 0, .3); } .pandot-eventos-selo-pequeno { padding: 0 6px; font-size: 10px; } .pandot-eventos-meta-quando { font-size: 12px; color: #c9cfbf; } .pandot-eventos-meta-quando b { color: var(--ev-ouro); } #ContentColumn .Content .BoxContent .pandot-eventos-meta-nome { font: 700 22px/1.25 var(--pandot-titulo); color: #fff6dd; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); overflow-wrap: anywhere; word-break: break-word; } #ContentColumn .Content .BoxContent .pandot-eventos-meta-sem { font-size: 18px; color: var(--ev-creme); } #ContentColumn .Content .BoxContent .pandot-eventos-meta-tipo { margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--ev-ouro); } #ContentColumn .Content .BoxContent .pandot-eventos-meta-desc { margin-top: 6px; max-width: 64ch; color: #dfe3d6; overflow-wrap: anywhere; } #ContentColumn .Content .BoxContent .pandot-eventos-meta-numeros { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; font-size: 12.5px; color: #c9cfbf; } .pandot-eventos-meta-numeros b { color: #fff6dd; font-variant-numeric: tabular-nums; } .pandot-eventos-meta-colunas { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; margin-top: 16px; } .pandot-eventos-meta-coluna { min-width: 0; padding: 12px 14px; border-radius: 6px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05); } #ContentColumn .Content .BoxContent .pandot-eventos-meta-coluna h4 { margin: 0 0 8px; font: 700 12.5px/1.3 var(--pandot-texto-fonte); color: var(--ev-ouro); } #ContentColumn .Content .BoxContent .pandot-eventos-meta .pandot-eventos-regras li, #ContentColumn .Content .BoxContent .pandot-eventos-meta .pandot-eventos-brotos, #ContentColumn .Content .BoxContent .pandot-eventos-meta .pandot-eventos-nota { color: #d6dccd; } #ContentColumn .Content .BoxContent .pandot-eventos-meta .pandot-eventos-brotos b { color: #a9df8c; } #ContentColumn .Content .BoxContent .pandot-eventos-meta .pandot-eventos-vazio { color: #c9cfbf; } /* A barra (a da Meta e um bambu com nos nos marcos) */ .pandot-eventos-barra { position: relative; height: 8px; margin: 8px 0 6px; border-radius: 999px; background: rgba(80, 50, 20, .16); overflow: hidden; } .pandot-eventos-barra > i { display: block; height: 100%; max-width: 100%; border-radius: inherit; background: linear-gradient(90deg, #4f8f3f, var(--ev-bambu)); } .pandot-eventos-cheia > i { background: linear-gradient(90deg, #b8921d, var(--ev-ouro)); } .pandot-eventos-bambu { height: 18px; margin: 14px 0 8px; overflow: visible; background: linear-gradient(#0c140f, #1a271f); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .07); } .pandot-eventos-bambu > i { min-width: 0; border-radius: 9px; background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(20, 50, 18, .45) 58px 60px), linear-gradient(180deg, #a6dc7c 0, #6db352 42%, #3f7d33 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); } .pandot-eventos-bambu.pandot-eventos-cheia > i { background: repeating-linear-gradient(90deg, transparent 0 58px, rgba(110, 80, 10, .35) 58px 60px), linear-gradient(180deg, #fbe7a6 0, var(--ev-ouro) 45%, #a8820f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 0 12px rgba(226, 189, 82, .55); } .pandot-eventos-no { position: absolute; top: 50%; width: 10px; height: 24px; margin: -12px 0 0 -5px; border-radius: 5px; background: #2b3b30; border: 1px solid rgba(226, 189, 82, .45); box-shadow: 0 1px 2px rgba(0, 0, 0, .5); } .pandot-eventos-no-feito { background: var(--ev-ouro); border-color: var(--ev-ouro-claro); box-shadow: 0 0 8px rgba(226, 189, 82, .85); } /* Os marcos e quem mais ajudou */ #ContentColumn .Content .BoxContent .pandot-eventos-marcos li { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 12.5px; color: #b9c0b0; border-bottom: 1px dashed rgba(255, 255, 255, .1); } #ContentColumn .Content .BoxContent .pandot-eventos-marcos li:last-child { border-bottom: 0; } .pandot-eventos-marcos b { font-weight: 600; text-align: right; } #ContentColumn .Content .BoxContent .pandot-eventos-marcos li.pandot-eventos-marco-feito { color: var(--ev-ouro-claro); } .pandot-eventos-marco-feito span::before { content: "\2713"; margin-right: 6px; color: var(--ev-ouro); } #ContentColumn .Content .BoxContent .pandot-eventos-top li { display: flex; align-items: center; gap: 8px; padding: 3px 0; min-width: 0; font-size: 12.5px; } .pandot-eventos-top-lugar { flex: 0 0 20px; height: 20px; border-radius: 50%; text-align: center; font: 700 11px/20px var(--pandot-texto-fonte); background: rgba(255, 255, 255, .1); color: #e9e2cc; } .pandot-eventos-top li:nth-child(1) .pandot-eventos-top-lugar { background: var(--ev-ouro); color: #3a2c05; } .pandot-eventos-top li:nth-child(2) .pandot-eventos-top-lugar { background: #c9cdd3; color: #2b2f35; } .pandot-eventos-top li:nth-child(3) .pandot-eventos-top-lugar { background: #c98a4b; color: #2e1a07; } #ContentColumn .Content .pandot-eventos-top a.pandot-eventos-top-nome { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #f3ead2; text-decoration: none; } #ContentColumn .Content .pandot-eventos-top a.pandot-eventos-top-nome:hover { color: var(--ev-ouro-claro); text-decoration: underline; } .pandot-eventos-top b { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: #a9df8c; } /* Regras, Brotos e notas (dentro e fora da Meta) */ #ContentColumn .Content .BoxContent .pandot-eventos-regras { margin-top: 10px; } #ContentColumn .Content .BoxContent .pandot-eventos-regras li { position: relative; padding-left: 14px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; } .pandot-eventos-regras li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 5px; height: 5px; border-radius: 50%; background: var(--cor, var(--ev-bambu)); } #ContentColumn .Content .BoxContent .pandot-eventos-brotos { margin-top: 8px; font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere; } .pandot-eventos-brotos b { color: #2f6b2a; } #ContentColumn .Content .BoxContent .pandot-eventos-nota { margin-top: 8px; font-size: 12px; color: var(--pandot-texto-suave); } #ContentColumn .Content .BoxContent .pandot-eventos-vazio { font-style: italic; color: var(--pandot-texto-suave); } /* As secoes */ .pandot-eventos-secao { margin: 0 0 22px; } #ContentColumn .Content .BoxContent .pandot-eventos-subtitulo { margin: 0 0 10px; padding-bottom: 5px; border-bottom: 1px solid var(--ev-borda); font: 700 15px/1.3 var(--pandot-titulo); letter-spacing: .03em; color: var(--pandot-teal-escuro); } /* Os eventos de hoje */ #ContentColumn .Content .BoxContent .pandot-eventos-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 12px; } #ContentColumn .Content .BoxContent .pandot-evento { display: flex; flex-direction: column; min-width: 0; padding: 11px 14px 12px; background: var(--ev-papel); border: 1px solid var(--ev-borda); border-left: 4px solid var(--cor, #888); border-radius: 5px; box-shadow: 0 1px 3px rgba(60, 35, 10, .12); } #ContentColumn .Content .BoxContent .pandot-evento-feito { background: rgba(240, 249, 232, .75); } .pandot-evento-topo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; } .pandot-evento-tipo { font: 700 11.5px/1.3 var(--pandot-texto-fonte); color: var(--cor, var(--pandot-texto-suave)); filter: brightness(.75); } .pandot-evento-estado { padding: 0 7px; border-radius: 9px; font: 600 10.5px/1.6 var(--pandot-texto-fonte); background: rgba(154, 106, 58, .18); color: #5a3b17; } .pandot-evento-estado-feito { background: #2f6b2a; color: #f1fbe9; } #ContentColumn .Content .BoxContent .pandot-evento-nome { margin: 3px 0 0; font: 700 15px/1.3 var(--pandot-texto-fonte); color: var(--pandot-texto); overflow-wrap: anywhere; word-break: break-word; } #ContentColumn .Content .BoxContent .pandot-evento-desc { margin-top: 4px; font-size: 12.5px; line-height: 1.5; color: var(--pandot-texto-suave); overflow-wrap: anywhere; } #ContentColumn .Content .BoxContent .pandot-evento-numeros { font-size: 12px; color: var(--pandot-texto-suave); font-variant-numeric: tabular-nums; } #ContentColumn .Content .BoxContent .pandot-evento-bonus { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; margin-top: 8px; font-size: 12px; color: var(--pandot-texto-suave); } .pandot-evento-bonus b { font: 700 20px/1 var(--pandot-titulo); color: #8a6d10; } .pandot-evento-bonus-aberto b { color: #2f6b2a; } #ContentColumn .Content .BoxContent .pandot-evento-quando { margin-top: auto; padding-top: 8px; font-size: 11.5px; color: var(--pandot-texto-suave); } .pandot-evento .pandot-eventos-regras li::before { background: var(--cor, #888); } /* A agenda: cada dia e uma folha de calendario */ #ContentColumn .Content .BoxContent .pandot-eventos-agenda li { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 7px 10px 7px 7px; margin: 0 0 6px; background: var(--ev-papel); border: 1px solid var(--ev-borda); border-left: 3px solid var(--cor, #888); border-radius: 5px; } #ContentColumn .Content .BoxContent .pandot-eventos-agenda li.pandot-eventos-agenda-meta { border-left-color: var(--ev-selo); background: linear-gradient(90deg, rgba(246, 226, 160, .7), var(--ev-papel) 70%); } .pandot-eventos-agenda-dia { flex: 0 0 46px; overflow: hidden; text-align: center; border-radius: 4px; background: #fffaf0; box-shadow: 0 1px 2px rgba(60, 35, 10, .25), inset 0 0 0 1px rgba(154, 106, 58, .35); } .pandot-eventos-agenda-mes { display: block; padding: 1px 0; background: var(--ev-selo); color: #fbeedd; font: 700 10px/1.4 var(--pandot-texto-fonte); } .pandot-eventos-agenda-dia b { display: block; font: 700 18px/1.15 var(--pandot-titulo); color: var(--pandot-texto); } .pandot-eventos-agenda-semana { display: block; padding-bottom: 2px; font: 600 10px/1.2 var(--pandot-texto-fonte); color: var(--pandot-texto-suave); } .pandot-eventos-agenda-corpo { display: flex; flex-direction: column; min-width: 0; } .pandot-eventos-agenda-nome { font: 700 13.5px/1.35 var(--pandot-texto-fonte); color: var(--pandot-texto); overflow-wrap: anywhere; } .pandot-eventos-agenda-info { font-size: 12px; color: var(--pandot-texto-suave); overflow-wrap: anywhere; } /* Como funciona */ #ContentColumn .Content .BoxContent .pandot-eventos-como { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; } #ContentColumn .Content .BoxContent .pandot-eventos-como dt { margin: 0 0 2px; font: 700 13px/1.35 var(--pandot-texto-fonte); color: var(--pandot-texto); } #ContentColumn .Content .BoxContent .pandot-eventos-como dd { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--pandot-texto-suave); } /* Os ultimos */ #ContentColumn .Content .BoxContent .pandot-eventos-ultimos li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; align-items: center; padding: 6px 2px 6px 10px; border-left: 3px solid var(--cor, #888); border-bottom: 1px solid rgba(154, 106, 58, .22); } .pandot-eventos-ultimo-nome { min-width: 0; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pandot-eventos-ultimo-info { grid-column: 1; min-width: 0; font-size: 11.5px; color: var(--pandot-texto-suave); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pandot-eventos-ultimo-estado { grid-column: 2; grid-row: 1 / span 2; padding: 1px 8px; border-radius: 9px; white-space: nowrap; font: 600 11px/1.6 var(--pandot-texto-fonte); background: rgba(154, 106, 58, .16); color: #5a3b17; } .pandot-eventos-ultimo-cumprido .pandot-eventos-ultimo-estado { background: #2f6b2a; color: #f1fbe9; } .pandot-eventos-ultimo-falhado .pandot-eventos-ultimo-estado { background: #f3d9d4; color: #7a1f12; } /* A caixa "Eventos" da direita */ #ThemeboxesColumn .pandot-eventos-caixa { padding-top: 2px; } #ThemeboxesColumn a.pandot-eventos-caixa-meta { display: block; margin: 0 0 8px; padding: 7px 9px 8px; border-radius: 5px; text-decoration: none; background: linear-gradient(160deg, #2e4634, #1b2a21); box-shadow: inset 0 0 0 1px rgba(226, 189, 82, .3); } #ThemeboxesColumn a.pandot-eventos-caixa-meta:hover { box-shadow: inset 0 0 0 1px rgba(226, 189, 82, .7), 0 0 8px rgba(226, 189, 82, .35); } .pandot-eventos-caixa-rotulo { display: block; font: 700 10px/1.3 var(--pandot-texto-fonte); color: #e2bd52; } .pandot-eventos-caixa-nome { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: 1px 0 5px; font: 700 12.5px/1.3 var(--pandot-texto-fonte); color: #fff6dd; } .pandot-eventos-caixa-barra { display: block; height: 7px; border-radius: 4px; overflow: hidden; background: rgba(0, 0, 0, .45); } .pandot-eventos-caixa-barra i { display: block; height: 100%; max-width: 100%; background: linear-gradient(90deg, #4f8f3f, #8fd16a); } .pandot-eventos-feita .pandot-eventos-caixa-barra i { background: linear-gradient(90deg, #b8921d, #f6e2a0); } .pandot-eventos-caixa-pct { display: block; margin-top: 3px; font: 700 11px/1.3 var(--pandot-texto-fonte); color: #a9df8c; text-align: right; overflow-wrap: anywhere; } .pandot-eventos-feita .pandot-eventos-caixa-pct { color: #f6e2a0; } #ThemeboxesColumn .pandot-eventos-caixa-lista { margin: 0 0 4px; padding: 0; list-style: none; } #ThemeboxesColumn .pandot-eventos-caixa-lista li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 3px 0; border-bottom: 1px dashed rgba(154, 106, 58, .3); font-size: 11.5px; } #ThemeboxesColumn .pandot-eventos-caixa-lista li:last-child { border-bottom: 0; } #ThemeboxesColumn .pandot-eventos-caixa-lista li::before { content: ""; flex: 0 0 7px; height: 7px; border-radius: 2px; background: var(--cor, #888); } .pandot-eventos-caixa-item { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } #ThemeboxesColumn .pandot-eventos-caixa-lista b { flex: 0 0 auto; color: #2f6b2a; font-variant-numeric: tabular-nums; } #ThemeboxesColumn .pandot-eventos-caixa-vazia { margin: 0 0 6px; font-size: 11.5px; color: var(--pandot-texto-suave); text-align: center; overflow-wrap: anywhere; } #ThemeboxesColumn .pandot-eventos-caixa-vazia span { display: block; margin-top: 3px; font-weight: 600; color: var(--pandot-texto); } #ThemeboxesColumn .pandot-eventos-caixa-mais-n { margin: 0; font-size: 11px; color: var(--pandot-texto-suave); text-align: right; } @media (max-width: 760px) { .pandot-eventos-meta { padding: 14px 14px 16px; } .pandot-eventos-meta-colunas { grid-template-columns: minmax(0, 1fr); gap: 12px; } #ContentColumn .Content .BoxContent .pandot-eventos-meta-nome { font-size: 19px; } #ContentColumn .Content .BoxContent .pandot-eventos-como { grid-template-columns: minmax(0, 1fr); } } /* --------------------------------------------------------------------- Outfits (/outfits, 01/11/2026): cada outfit num ladrilho cinzento como o botao da janela de outfits do jogo, com a mesma marca no canto: Classe (dourada) ou Global (prata). Debaixo do nome, de onde vem (Inicial, Store ou No jogo). --------------------------------------------------------------------- */ .pandot-outfits-legenda { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; margin: 4px 0 0; } #ContentColumn .Content .BoxContent .pandot-outfits-tipo { margin: 0; padding: 9px 12px 10px; font-size: 12.5px; line-height: 1.5; color: var(--pandot-texto); background: rgba(255, 250, 238, .55); border: 1px solid rgba(154, 106, 58, .35); border-radius: 4px; } .pandot-outfits-marca { display: inline-block; padding: 0 5px; border-radius: 2px; font: 600 10.5px/16px var(--pandot-texto-fonte); letter-spacing: .02em; white-space: nowrap; background: rgba(0, 0, 0, .55); } .pandot-outfits-marca-classe { color: #e2bf6a; } .pandot-outfits-marca-global { color: #c9d1d6; } .pandot-outfits-tipo .pandot-outfits-marca { margin-right: 4px; vertical-align: 1px; background: #3d3d3d; } #ContentColumn .Content .BoxContent .pandot-outfits-janela { margin: 8px 0 0; } .pandot-outfits-sexo { display: inline-flex; margin: 16px 0 0; border: 1px solid rgba(154, 106, 58, .45); border-radius: 4px; overflow: hidden; } #ContentColumn .Content .BoxContent .pandot-outfits-sexo a { padding: 5px 14px; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--pandot-link); background: rgba(255, 250, 238, .55); } #ContentColumn .Content .BoxContent .pandot-outfits-sexo a + a { border-left: 1px solid rgba(154, 106, 58, .45); } #ContentColumn .Content .BoxContent .pandot-outfits-sexo a[aria-current="page"] { color: #fff; background: var(--pandot-teal-escuro); } #ContentColumn .Content .BoxContent .pandot-outfits-sexo a:focus-visible { outline: 2px solid var(--pandot-teal); outline-offset: -2px; } .pandot-outfits-conta { font: 600 12px/1 var(--pandot-texto-fonte); letter-spacing: 0; color: var(--pandot-texto-suave); text-shadow: none; } #ContentColumn .Content .BoxContent .pandot-outfits-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; } #ContentColumn .Content .BoxContent .pandot-outfit { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0; padding: 18px 4px 7px; background: linear-gradient(#4a4a4a, #3e3e3e); border: 1px solid #2b2b2b; border-radius: 3px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07); } .pandot-outfit .pandot-outfits-marca { position: absolute; top: 4px; left: 4px; } .pandot-outfit img { display: block; width: 64px; height: 64px; image-rendering: pixelated; } .pandot-outfit-nome { margin-top: 2px; max-width: 100%; font: 600 11.5px/1.25 var(--pandot-texto-fonte); text-align: center; color: #dcdcdc; overflow-wrap: anywhere; } .pandot-outfit-origem { margin-top: 2px; font-size: 10.5px; line-height: 1.3; color: #a8a8a8; } .pandot-outfit-origem-store { color: #8fd3df; } .pandot-outfit-origem-inicial { color: #b7d9a0; }