/* ============================================================ TIBIA 2 — tema moderno (reskin do tibiacom / backend MyAAC) Shell novo + restyle escuro do conteudo gerado pelo MyAAC. ============================================================ */ /* Fallbacks com metricas CASADAS (size-adjust + ascent/descent-override): forcam a fonte de sistema a ocupar o MESMO espaco que a web font. Quando Cinzel/Inter/ Source Serif chegam (Google Fonts, async), a troca NAO desloca o layout — o CLS da home (0.15, so por causa da troca de fonte) vai pra perto de zero. Valores calculados do a-z avg width + ascent/descent das proprias fontes (fontTools). O src lista fontes de varias plataformas (Georgia/Times no desktop, Noto Serif no Android) para o override valer em todas: o ascent/descent-override fixa a ALTURA da linha (o deslocamento dominante) qualquer que seja a fonte local usada. */ @font-face{font-family:"Cinzel-fb";src:local("Georgia"),local("Times New Roman"),local("Noto Serif");size-adjust:128.5%;ascent-override:75.9%;descent-override:28.9%;line-gap-override:0%} @font-face{font-family:"Inter-fb";src:local("Arial"),local("Helvetica"),local("Roboto");size-adjust:121.4%;ascent-override:79.8%;descent-override:19.9%;line-gap-override:0%} @font-face{font-family:"SrcSerif-fb";src:local("Georgia"),local("Times New Roman"),local("Noto Serif");size-adjust:109.4%;ascent-override:94.7%;descent-override:30.6%;line-gap-override:0%} :root{ /* PALETA — dark fantasy + gold + arcane blue. Proporcao alvo: ~65% escuro, ~20% dourado/marfim, ~15% azul. O dourado nao e metade da marca: se tudo brilha, nada e lendario. Ele fica reservado para RECOMPENSA (titulos, frisos, CTA, conquista) e o azul para INTERACAO (links, hover, selecao, glow, indicadores). */ --ground:#080D12; --ground-2:#050a0e; --surface-a:#101923; --surface-b:#0b1219; --surface-3:#16212e; --line:rgba(120,155,190,.14); --line-strong:rgba(130,175,215,.28); /* Dourado = valor, conquista, progressao. */ --gold:#E8B83E; --gold-light:#FFD96A; --gold-deep:#a9822a; /* Azul = mundo, sistema, interacao. Nasce do proprio T2 do logo (#016092). */ --blue:#1677C8; --blue-bright:#27A7FF; --brand-logo:#016092; /* --brand* sao os nomes que o resto da folha ja usa; apontam para o azul. */ --brand:#27A7FF; --brand-bright:#5CC0FF; --brand-deep:#1677C8; --text:#F3EEDC; --muted:#AFA996; --muted-2:#7c7768; --discord:#5865f2; --maxw:1320px; --radius:14px; --shadow:0 10px 30px rgba(0,0,0,.5); } *{box-sizing:border-box} /* O header e sticky com 64px: sem scroll-padding, toda ancora para com o alvo escondido atras dele. O .t2-feat-card ja tinha um scroll-margin proprio; aqui a regra vale para qualquer alvo, inclusive os que ainda nao existem. */ html{scroll-behavior:smooth; scroll-padding-top:82px} body{ margin:0; padding:0; background-color:var(--ground); color:var(--text); font-family:"Source Serif 4","SrcSerif-fb",Georgia,serif; font-size:17px; line-height:1.62; min-height:100vh; } /* fundo fixo via pseudo-elemento (iOS Safari buga com background-attachment:fixed) */ /* A ARTE (10/10/2026): estrada de pedra com lampioes ate a fortaleza, a noite - pintada para ser fundo de site (fontes em "Tibia2 Midia Kit/fundo-site", opcao B). Ela ja e escura, entao o degrade por cima e leve: o de antes (80% a 94%) servia a arte clara do castelo e apagaria esta por completo. Em cima fica quase sem veu, porque ali a arte e ceu liso e e onde mora o texto do topo da home; embaixo escurece mais, que e onde ficam os lampioes e as figuras. Nome de arquivo novo, e nao o hero-bg.webp por cima: a borda guarda imagem por horas e continuaria servindo a antiga. O hero-bg.jpg segue sendo a imagem de compartilhamento (og:image). */ body::before{ content:""; position:fixed; inset:0; z-index:-1; background-image:linear-gradient(rgba(8,13,18,.22),rgba(5,10,14,.62)), url(images/fundo-site.webp); background-size:cover; background-position:center; background-repeat:no-repeat; } /* Celular em pe: a versao vertical da mesma cena (a faixa central, com o ceu estendido para cima) em vez de um corte de 20% da paisagem; 50 KB em vez de 130. */ @media (max-width:760px) and (orientation:portrait){ body::before{background-image:linear-gradient(rgba(8,13,18,.28),rgba(5,10,14,.68)), url(images/fundo-site-m.webp)} } img{border:none; max-width:100%} a{color:inherit; text-decoration:none} .t2-eyebrow{font-family:"Cinzel","Cinzel-fb",serif; text-transform:uppercase; letter-spacing:.18em; font-size:11px; color:var(--gold); font-weight:700} /* ---------- Top bar / nav ---------- */ .t2-top{position:sticky; top:0; z-index:200; backdrop-filter:blur(9px); /* Preto azulado OPACO, nao o marrom translucido que sobrou da paleta antiga. Opaco de proposito: com a barra semitransparente a arte do hero vazava por baixo e o preto do painel da marca virava um retangulo destacado no meio de um fundo mais claro. */ background:linear-gradient(180deg,#080D12,#060a0e); border-bottom:1px solid var(--line)} /* Barra de ponta a ponta, sem o max-width centrado: no lockup do mockup a marca encosta na BORDA da tela e o grupo da direita na outra ponta. Com a barra centrada num container, os dois ficavam ilhados no meio. */ .t2-bar{max-width:none; margin:0; padding:0; height:64px; display:flex; align-items:center; gap:11px} /* O painel da marca. Ele e MAIS ALTO que a barra: desce 22px abaixo dela e cai por cima do hero, com a ponta direita cortada na diagonal. O margin-bottom negativo e o que faz a sobra descer - a barra continua com 64px, entao nada mais no header se mexe. z-index acima da regua da barra e da borda do header, que senao a atravessariam. Sem margin-right:auto: com a barra de ponta a ponta, quem empurra o grupo da direita e o margin-left:auto do seletor de idioma. Deixar os dois faria o menu flutuar no meio do vazio. */ .t2-brand{display:inline-flex; align-items:center; gap:11px; flex:0 0 auto; align-self:stretch; position:relative; z-index:3; padding:0 40px 0 18px; margin:0 4px -22px 0; /* --sobra e o quanto o painel desce abaixo da barra; --corte, o quanto a diagonal anda para a esquerda nessa descida. Os dois em um lugar so porque a forma e o fio dourado precisam usar EXATAMENTE os mesmos numeros. */ --sobra:22px; --corte:26px; /* Borda direita RETA ate a linha da barra e diagonal so na sobra. Antes a diagonal subia do pe do painel ate o topo do header, e essa linha atravessando a barra inteira era a "divisao em cima". */ clip-path:polygon(0 0, 100% 0, 100% calc(100% - var(--sobra)), calc(100% - var(--corte)) 100%, 0 100%); background:linear-gradient(180deg,#080D12 0,#060a0e 64px)} /* O fio dourado, desenhado como TRACO: contorna a base, sobe a diagonal e para na altura da barra - onde a regua da barra continua, sem emenda. E um clip-path em forma de contorno (vai pela borda de fora e volta por dentro) em vez do truque de fundo dourado com interior recuado. Aquele pintava TODA a borda, inclusive a lateral direita subindo ate o topo, que e justamente o que tinha de sumir. */ .t2-brand::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(232,184,62,.45),rgba(232,184,62,.9)); clip-path:polygon( 0 100%, calc(100% - var(--corte)) 100%, 100% calc(100% - var(--sobra)), calc(100% - 2px) calc(100% - var(--sobra)), calc(100% - var(--corte) - 1.5px) calc(100% - 1.6px), 0 calc(100% - 1.6px))} /* O conteudo acima do traco dourado. */ .t2-brand > *{position:relative; z-index:3} /* image-rendering pixelated: a arte e pixel art, e o filtro suave do navegador borraria justamente as bordas duras que definem o estilo dela. */ /* O escudo nao e quadrado (229x276), entao a ALTURA manda e a largura acompanha - fixar as duas o achataria. Sem image-rendering:pixelated: e ilustracao pintada, e nearest-neighbor serrilha a borda dourada. */ .t2-brand img{height:56px; width:auto; flex:0 0 auto} /* Marca em duas linhas, como no lockup do hero: nome grande e a assinatura embaixo. line-height 1 nos dois porque a caixa da fonte sozinha ja abre um respiro que separaria demais as duas linhas. */ /* white-space:nowrap no nome: o   do HTML segura a quebra, mas nao impede o flex de espremer a caixa ate cortar o "2". */ .t2-brand-txt{display:flex; flex-direction:column; line-height:1; flex:0 0 auto} .t2-brand-txt b{white-space:nowrap} .t2-brand-txt i{font-style:normal; font-family:"Cinzel","Cinzel-fb",serif; font-weight:600; font-size:9.5px; letter-spacing:.245em; text-indent:.245em; color:var(--muted); margin-top:6px; white-space:nowrap} .t2-brand b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:33px; letter-spacing:.12em; background:linear-gradient(#fdf7d2,#f2dc93 52%,#dba838); -webkit-background-clip:text; background-clip:text; color:transparent} .t2-nav{display:flex; align-items:center; gap:2px} .t2-navitem{position:relative} .t2-navtop{display:inline-flex; align-items:center; gap:6px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; letter-spacing:.045em; text-transform:uppercase; font-size:12.5px; color:#ece6d3; padding:9px 13px; border-radius:9px; cursor:pointer} .t2-navitem:hover .t2-navtop,.t2-navsolo:hover,.t2-navtop:hover{color:var(--brand-bright); background:rgba(70,160,215,.10)} .t2-caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.6} .t2-drop{position:absolute; top:100%; left:0; min-width:210px; padding:7px; margin-top:6px; background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line-strong); border-radius:12px; box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(6px); transition:.15s; z-index:210} .t2-navitem:hover .t2-drop{opacity:1; visibility:visible; transform:translateY(0)} .t2-drop a{display:block; padding:8px 11px; border-radius:8px; font-size:13.5px; color:#e6dfca} .t2-drop a:hover{background:rgba(70,160,215,.12); color:var(--brand-bright)} .t2-auth{display:flex; align-items:center; gap:9px} .t2-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:38px; padding:0 10px; background:rgba(70,160,215,.07); border:1px solid var(--line-strong); border-radius:9px; cursor:pointer} .t2-burger span{display:block; height:2px; width:100%; background:var(--brand-bright); border-radius:2px; transition:.2s} body.t2-nav-open .t2-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.t2-nav-open .t2-burger span:nth-child(2){opacity:0} body.t2-nav-open .t2-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} .t2-lang{display:flex; gap:2px; border:1px solid var(--line-strong); border-radius:8px; padding:2px; background:rgba(70,160,215,.05); margin-left:auto} .t2-lang a{font-size:12px; font-weight:700; color:var(--muted); padding:4px 8px; border-radius:6px; cursor:pointer; letter-spacing:.04em; line-height:1} .t2-lang a.on{color:#06121a; background:linear-gradient(#71c6f4,#198ecc)} .t2-lang a:hover:not(.on){color:var(--brand-bright)} /* ---------- Buttons ---------- */ .t2-btn{display:inline-flex; align-items:center; gap:8px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:13.5px; padding:9px 16px; border-radius:10px; border:1px solid transparent; cursor:pointer; white-space:nowrap; transition:.15s} /* CTA: azul preenchido com FRISO dourado, nao dourado macico. O friso custa pouco do orcamento de 20% e ainda marca o botao como caminho principal. */ .t2-btn-green{color:#F3EEDC; background:linear-gradient(180deg,#1f8ad9,#125f9f); border:1px solid var(--gold-deep); box-shadow:inset 0 1px 0 rgba(255,255,255,.18)} .t2-btn-green:hover{background:linear-gradient(180deg,#2b9be9,#1670b5); border-color:var(--gold)} .t2-btn-ghost{color:#dfe6cd; border-color:var(--line-strong); background:rgba(70,160,215,.06)} .t2-btn-ghost:hover{background:rgba(70,160,215,.14); color:var(--brand-bright)} .t2-btn-lg{padding:13px 24px; font-size:15px; border-radius:12px} .t2-btn-discord{color:#fff; background:linear-gradient(#5865f2,#4752c4); box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .t2-btn-discord:hover{filter:brightness(1.08); color:#fff} /* ---------- Hero ---------- */ .t2-hero{position:relative; min-height:100vh; overflow:hidden} .t2-hero::after{content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(circle at 20% 30%,rgba(120,200,245,.08),transparent 30%), radial-gradient(circle at 80% 35%,rgba(214,199,125,.08),transparent 30%)} .t2-container{width:min(1200px,92%); margin:0 auto; position:relative; z-index:2} /* 26px e nao 52: o hero precisa caber numa tela de 1080p, e este era o maior vazio que sobrava depois de tirar os cards do fluxo. */ .t2-hero-content{padding:26px 0 34px; display:flex; flex-direction:column; align-items:center; text-align:center} .t2-hero-left{min-width:0; max-width:1100px} .t2-hero-right{display:none} /* O wordmark. Playfair Display 900 e nao Cinzel: a folha de assets desenhou o TIBIA 2 num serif de alto contraste (hastes grossas, filetes finos), e a Cinzel e uma capital romana de contraste baixo - a diferenca de "interessante" estava ai, nao no tamanho. A Cinzel continua no resto do site. O dourado sai de amostragem da propria folha, nao de estimativa: media das letras por linha, do topo (#f2e494) a base (#f0c44d). O gradiente e recortado no texto, entao o color abaixo e o fallback - navegador sem background-clip:text mostra dourado chapado, nao texto invisivel. */ .t2-hero-title{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:var(--titulo-fs,clamp(3rem,7vw,6rem)); line-height:.95; margin:0 0 14px; letter-spacing:.015em; white-space:nowrap; color:#f4e08c; background:linear-gradient(180deg,#fdf7d2 0%,#f4e494 30%,#f3d97e 56%,#eec24a 84%,#dba838 100%); -webkit-background-clip:text; background-clip:text; text-shadow:0 3px 0 rgba(60,38,6,.28); filter:drop-shadow(0 0 30px rgba(255,190,80,.22)) drop-shadow(0 10px 26px rgba(0,0,0,.55))} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .t2-hero-title{color:transparent} } .t2-headline{font-family:"Cinzel","Cinzel-fb",serif; font-size:clamp(1.5rem,2.35vw,3rem); line-height:1.05; margin-bottom:14px; color:var(--text)} /* Onde os cards ficam nas laterais (fora do fluxo), o titulo tem de caber no CANAL entre eles. Medido a 1425px: canal de 652px e o titulo com 48px pedia ~750px, entao ele passava POR BAIXO dos dois cards. Duas travas, porque uma so nao basta: o corpo menor resolve o caso comum, e o max-width garante que texto mais longo quebre linha em vez de invadir - ele nao depende de eu ter acertado o coeficiente. */ @media (min-width: 1241px){ /* 700 e nao 760: os cards somam 688px e o limite anterior era mais apertado que o canal real, forcando quebra sem necessidade. */ .t2-hero .t2-headline{max-width:calc(100% - 700px); margin-left:auto; margin-right:auto} } /* Hero CTA buttons */ .t2-cta-row{display:flex; flex-wrap:wrap; justify-content:center; gap:16px; margin-bottom:22px} .t2-btn-primary,.t2-btn-secondary{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:16px; font-weight:700; transition:.2s; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; cursor:pointer} /* O CTA grande usa a MESMA peca do botao do header (ver a secao do botao de conta): tres camadas, chanfro nas quinas, dourado por fora e preto por dentro. Aqui so muda o tamanho. Antes esta regra terminava com um segundo 'border:none' que anulava a borda dourada declarada nela mesma tres propriedades antes - a borda nunca apareceu, e o botao ficava um retangulo azul chapado no meio dos outros. */ .t2-btn-primary{min-width:260px; padding:0 34px; height:64px} .t2-btn-primary > b{font-size:1.02rem} .t2-btn-secondary{border:1px solid rgba(214,199,125,.35); color:var(--text); min-width:260px; padding:18px 28px; font-size:1.08rem; background:rgba(255,255,255,.02)} .t2-btn-secondary:hover{border-color:rgba(120,200,245,.55); color:var(--brand-bright)} /* Hero sub-actions (discord + status) */ .t2-sub-actions{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:18px; margin-bottom:24px} .t2-btn-discord-hero{display:inline-flex; align-items:center; gap:8px; padding:12px 18px; border:none; border-radius:14px; color:#fff; font-weight:700; font-size:14px; background:var(--discord); transition:.2s; cursor:pointer} .t2-btn-discord-hero:hover{background:#4752c4; color:#fff; transform:translateY(-1px)} .t2-discord-ico{width:20px; height:20px; flex:none} .t2-status-hero{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:1rem} .t2-dot{display:inline-block; width:10px; height:10px; border-radius:50%; background:#7eff7a; box-shadow:0 0 14px rgba(126,255,122,.8); margin-right:4px; vertical-align:middle} .t2-dot-off{background:#c9553f; box-shadow:0 0 10px #c9553f} /* Hero pillars grid */ /* Next section (Features header inside hero) */ .t2-next-section{padding:50px 0 36px; text-align:center} .t2-next-title{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:clamp(2.9rem,5.2vw,5.2rem); line-height:1.06; margin:14px 0 0; letter-spacing:.03em; color:#eef0cf} /* chips (reused in features) */ .t2-hf{display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border:1px solid var(--line-strong); border-radius:999px; background:rgba(13,21,30,.55); backdrop-filter:blur(3px); font-family:"Source Serif 4","SrcSerif-fb",Georgia,serif; font-weight:600; font-size:13px; color:#e6dfca; letter-spacing:.01em; transition:.15s} .t2-hf:hover{border-color:rgba(70,160,215,.5); color:var(--brand-bright); transform:translateY(-1px)} .t2-hf::before{content:""; width:6px; height:6px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(var(--gold),#d09b28); flex:none; box-shadow:0 0 7px rgba(230,185,63,.4)} /* ---------- Home: seção de features (hero + features) ---------- */ .t2-homewidgets{padding:24px 0 4px} .t2-homewidgets-inner{max-width:var(--maxw); margin:0 auto; padding:0 22px; display:flex; gap:14px; flex-wrap:wrap} .t2-homewidgets-inner .t2-widget{flex:1 1 210px; margin:0} .t2-homefeats{padding:0 0 46px; border-bottom:1px solid var(--line)} .t2-homefeats-inner{max-width:min(1200px,92%); margin:0 auto; padding:0 22px} /* ---------- Main layout ---------- */ .t2-main{max-width:var(--maxw); margin:0 auto; padding:30px 22px 10px} .t2-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start} .t2-content{min-width:0} /* ---------- Content card ---------- */ .t2-card{background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden} /* h1 (era div): o margin:0 mantem o cabecalho colado nas bordas do card */ .t2-card-head{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:19px; letter-spacing:.03em; color:#efe8cf; padding:15px 20px; border-bottom:1px solid var(--line-strong); background:linear-gradient(rgba(70,160,215,.10),rgba(70,160,215,0))} .t2-card-head::before{content:""; display:inline-block; width:4px; height:16px; background:linear-gradient(var(--gold-light),var(--gold-deep)); border-radius:3px; margin-right:11px; vertical-align:-2px} .t2-card-body{padding:20px} /* ---------- Sidebar ---------- */ .t2-side{display:flex; flex-direction:column; gap:14px} .t2-widget{display:block; background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line); border-radius:var(--radius); padding:17px 18px; box-shadow:var(--shadow); transition:.16s} .t2-widget:hover{border-color:var(--line-strong); transform:translateY(-2px)} /* Documentos legais (pages/legal.php + pages/legal/*.php). */ .t2-legal-intro{color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 24px; max-width:78ch} .t2-legal-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px} .t2-legal-card{position:relative; display:block; padding:18px 42px 18px 18px; border:1px solid var(--line); border-radius:12px; background:linear-gradient(var(--surface-a),var(--surface-b)); transition:.16s} .t2-legal-card:hover{border-color:var(--line-strong); transform:translateY(-2px)} .t2-legal-card h4{margin:0 0 6px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:16px; color:var(--gold)} .t2-legal-card p{margin:0; font-size:13px; line-height:1.6; color:var(--muted)} .t2-legal-go{position:absolute; right:16px; top:50%; transform:translateY(-50%); font-size:22px; color:var(--brand-deep)} .t2-legal-note{margin:22px 0 0; font-size:13.5px; line-height:1.7; color:var(--muted)} .t2-legal-note a,.t2-legal-doc a{color:var(--brand-bright); text-decoration:underline} .t2-legal-updated{font-size:12px; color:var(--muted-2)} .t2-legal-intro + .t2-legal-cards + .t2-legal-note + .t2-legal-updated{display:block; margin-top:14px} .t2-legal-top{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; margin-bottom:20px; border-bottom:1px solid var(--line)} .t2-legal-back{font-size:13px; color:var(--gold)} .t2-legal-back:hover{text-decoration:underline} .t2-legal-doc section{margin:0 0 24px} .t2-legal-doc section:last-child{margin-bottom:0} .t2-legal-doc h3{margin:0 0 8px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:16.5px; color:var(--text)} .t2-legal-doc p{margin:0 0 10px; font-size:13.5px; line-height:1.8; color:#cfc9b6; max-width:82ch} .t2-legal-doc p:last-child{margin-bottom:0} .t2-legal-doc b{color:var(--text)} /* Regras (pages/rules.php). Acordeao nativo com
. */ .t2-rules-intro{color:var(--muted); font-size:15px; line-height:1.7; margin:0 0 26px; max-width:78ch} .t2-rules-cat{display:flex; align-items:center; gap:12px; margin:30px 0 12px} .t2-rules-cat:first-of-type{margin-top:6px} .t2-rules-num{flex:none; display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; border:1px solid var(--line-strong); background:rgba(70,160,215,.10); font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:13px; color:var(--brand-bright)} .t2-rules-cat h3{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:19px; color:var(--text); letter-spacing:.01em} .t2-rules-list{display:flex; flex-direction:column; gap:8px} .t2-rule{background:linear-gradient(var(--surface-a),var(--surface-b)); border:1px solid var(--line); border-radius:11px; overflow:hidden; transition:.16s} .t2-rule:hover{border-color:var(--line-strong)} .t2-rule[open]{border-color:var(--line-strong)} .t2-rule summary{display:flex; align-items:flex-start; gap:11px; padding:13px 16px; cursor:pointer; list-style:none} .t2-rule summary::-webkit-details-marker{display:none} .t2-rule summary:focus-visible{outline:2px solid var(--brand-deep); outline-offset:-2px} .t2-rule-caret{flex:none; width:9px; height:9px; margin-top:6px; border-right:2px solid var(--brand-deep); border-bottom:2px solid var(--brand-deep); transform:rotate(-45deg); transition:transform .16s} .t2-rule[open] .t2-rule-caret{transform:rotate(45deg)} .t2-rule-head{display:flex; flex-direction:column; gap:3px; min-width:0} .t2-rule-head b{font-size:14.5px; font-weight:600; color:var(--text)} .t2-rule-head span{font-size:13px; line-height:1.5; color:var(--muted)} .t2-rule-body{padding:0 16px 15px 36px; font-size:13.5px; line-height:1.75; color:#cfc9b6} .t2-rule-body a{color:var(--brand-bright); text-decoration:underline} .t2-rules-outro{margin-top:32px; padding-top:20px; border-top:1px solid var(--line)} .t2-rules-outro p{margin:0 0 12px; font-size:13.5px; line-height:1.7; color:var(--muted); max-width:78ch} .t2-rules-outro p:last-child{margin-bottom:0} .t2-rules-outro a{color:var(--brand-bright); text-decoration:underline} @media (max-width:640px){ .t2-rules-cat h3{font-size:17px} .t2-rule-body{padding-left:16px} } .t2-creator-banner{display:block; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); line-height:0; transition:.16s} .t2-creator-banner:hover{border-color:var(--line-strong); transform:translateY(-2px)} .t2-creator-banner img{display:block; width:100%; height:auto; aspect-ratio:2.5 / 1} .t2-online{text-align:center; cursor:pointer} .t2-w-label{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted)} .t2-w-big{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:40px; line-height:1.1; color:var(--gold); text-shadow:0 0 26px rgba(232,184,62,.22)} .t2-w-sub{font-size:12.5px; color:var(--muted-2)} .t2-w-off{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:20px; color:#d98a72; padding:6px 0} .t2-cta{cursor:pointer} .t2-w-title{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:16px; color:var(--gold); display:flex; align-items:center; gap:8px} .t2-w-desc{font-size:13px; color:#c2baa4; margin-top:4px} .t2-w-go{display:inline-block; margin-top:9px; font-size:12.5px; font-weight:700; color:var(--gold)} .t2-coins .t2-w-title{color:#f2cf72} .t2-coins{background:linear-gradient(160deg,rgba(230,185,63,.12),var(--surface-b))} .t2-discord .t2-w-title{color:#aab4ff} .t2-discord{background:linear-gradient(160deg,rgba(88,101,242,.16),var(--surface-b))} .t2-discord .t2-w-go{color:#aab4ff} /* ---------- Footer ---------- */ .t2-foot{border-top:1px solid var(--line); margin-top:36px; padding:24px 22px; color:var(--muted); font-size:12.5px} .t2-foot-inner{max-width:var(--maxw); margin:0 auto; text-align:center} .t2-foot-links a{color:var(--muted)} .t2-foot-links a:hover{color:var(--brand-bright)} .t2-foot-seo{margin-top:7px; font-size:12px; opacity:.72} .t2-foot-copy{margin-top:8px; color:#948d7a} /* nao usar --muted-2 (#7c7768): 4.3:1 no fundo escuro reprova no contraste AA; este tom da ~5.8:1 e segue discreto */ /* ============================================================ CONTEUDO GERADO PELO MyAAC (restyle escuro), escopo no card ============================================================ */ .t2-card-body{font-family:"Source Serif 4","SrcSerif-fb",Georgia,serif; color:var(--text); font-size:16px} .t2-card-body h1,.t2-card-body h2,.t2-card-body h3,.t2-card-body h4{font-family:"Cinzel","Cinzel-fb",serif; color:#efe8cf; letter-spacing:.02em} .t2-card-body a{color:var(--brand); font-weight:600} .t2-card-body a:hover{color:var(--brand-bright); text-decoration:underline} .t2-card-body p{margin:0 0 10px} .t2-card-body hr{border:none; border-top:1px solid var(--line); margin:14px 0} .t2-card-body img{vertical-align:middle} /* tabelas do MyAAC (highscores, characters, account, guilds...) */ .t2-card-body table{border-collapse:collapse; width:100%; max-width:100%} .t2-card-body .TableContainer{border:1px solid var(--line-strong); border-radius:12px; overflow:hidden; width:100%; margin:0 0 16px; background:rgba(0,0,0,.18)} .t2-card-body .TableContainer .Text, .t2-card-body .CaptionContainer, .t2-card-body .CaptionContainer .CaptionInnerContainer{background:transparent !important} /* COR E FUNDO DO th ANDAM JUNTOS, OS DOIS COM !important. Antes so a cor tinha: toda tabela que trazia fundo proprio no cabecalho (as paginas custom wheel-achievement e mount-drops usam um gradiente verde claro) ganhava a disputa do fundo e perdia a do texto - sobrava dourado em cima de verde claro, ilegivel. Forcar o par garante o contraste em qualquer pagina. */ .t2-card-body th{font-family:"Cinzel","Cinzel-fb",serif !important; font-weight:700; text-align:left; color:var(--gold) !important; background:var(--surface-3) !important; padding:8px 12px !important; font-size:13px} /* titulos de secao (General Information, Characters, etc.) - texto verde claro no escuro */ .t2-card-body .CaptionContainer .Text{font-family:"Cinzel","Cinzel-fb",serif !important; font-weight:700; color:var(--brand-bright) !important; background:transparent !important; font-size:15px; letter-spacing:.02em; padding:6px 2px 9px !important; border-bottom:1px solid var(--line-strong); margin-bottom:10px; display:block} .t2-card-body td{padding:7px 12px; color:#d9d2bd; border-top:1px solid rgba(70,160,215,.10)} .t2-card-body .Odd,.t2-card-body tr.Odd td{background:rgba(255,255,255,.015)} .t2-card-body .Even,.t2-card-body tr.Even td{background:rgba(70,160,215,.05)} .t2-card-body .Table1,.t2-card-body .Table2,.t2-card-body .Table3,.t2-card-body .Table4,.t2-card-body .Table5, .t2-card-body .InnerTableContainer,.t2-card-body .TableContentContainer{background:transparent !important; border:none !important} /* mata as texturas/molduras/sombras gif do tibiacom no conteudo (botoes gif ficam intactos) */ .t2-card-body [class*="Shadow"],.t2-card-body [class*="Frame"],.t2-card-body [class*="Edge"], .t2-card-body [class*="Border"],.t2-card-body [class*="Corner"],.t2-card-body [class*="Caption"]{ background-image:none !important; background-color:transparent !important} /* mata os fundos de pergaminho inline (#D4C0A1/#F1E0C6/#FFF2db) espalhados nas paginas */ .t2-card-body [bgcolor="#D4C0A1"],.t2-card-body [bgcolor="#F1E0C6"], .t2-card-body [style*="D4C0A1"],.t2-card-body [style*="F1E0C6"],.t2-card-body [style*="FFF2"]{background-color:transparent !important} .t2-card-body .Odd:hover td,.t2-card-body .Even:hover td{background:rgba(70,160,215,.13)} /* .myaac-table (skin nova do MyAAC, injetada no com cor de pergaminho) */ .t2-card-body .myaac-table{border-spacing:0; border-collapse:collapse; width:100%; border:1px solid var(--line-strong); border-radius:12px; overflow:hidden} .t2-card-body .myaac-table > tbody > tr:nth-child(even){background:rgba(70,160,215,.05)} .t2-card-body .myaac-table > tbody > tr:nth-child(odd){background:rgba(255,255,255,.015)} .t2-card-body .myaac-table > tbody > tr > td{padding:7px 12px; color:#d9d2bd; border-top:1px solid rgba(70,160,215,.10)} .t2-card-body .myaac-table > thead > tr > td, .t2-card-body .myaac-table > thead > tr > th, .t2-card-body .myaac-table > tfoot > tr > td{padding:8px 12px !important; background:var(--surface-3) !important; color:var(--gold) !important; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700} .t2-card-body .myaac-table > tbody > tr:hover > td{background:rgba(70,160,215,.10)} /* esconde a tralha de gif das bordas/sombras classicas das tabelas */ .t2-card-body .CaptionEdgeLeftTop,.t2-card-body .CaptionEdgeRightTop,.t2-card-body .CaptionEdgeLeftBottom, .t2-card-body .CaptionEdgeRightBottom,.t2-card-body .CaptionBorderTop,.t2-card-body .CaptionBorderBottom, .t2-card-body .CaptionVerticalLeft,.t2-card-body .CaptionVerticalRight, .t2-card-body .TableShadowContainer,.t2-card-body .TableShadowContainerRightTop,.t2-card-body .TableShadowRightTop, .t2-card-body .TableBottomShadow,.t2-card-body .TableBottomLeftShadow,.t2-card-body .TableBottomRightShadow{display:none !important} /* labels de formularios */ .t2-card-body .LabelV,.t2-card-body .LabelV120,.t2-card-body .LabelV150,.t2-card-body .LabelV200,.t2-card-body .LabelH{font-weight:700; color:var(--brand-bright); background:transparent} .t2-card-body .LabelH td{background:transparent} /* inputs */ .t2-card-body input[type=text],.t2-card-body input[type=password],.t2-card-body input[type=email], .t2-card-body input[type=number],.t2-card-body input[type=search],.t2-card-body select,.t2-card-body textarea{ background:var(--surface-3); color:var(--text); border:1px solid var(--line-strong); border-radius:8px; padding:8px 10px; font-family:inherit; font-size:14px} .t2-card-body input:focus,.t2-card-body select:focus,.t2-card-body textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(70,160,215,.18)} /* email ja confirmado pelo provedor (Discord/Google) no /account/create. * * Antes o hook pintava o campo de bege por style inline. Num tema de fundo * escuro com texto marfim isso dava marfim sobre bege - quase ilegivel, e o * cinza-claro le como "campo desativado/quebrado" em vez de "conferido". * * Aqui o fundo escuro do input FICA (o campo continua sendo um campo) e o que * muda e a moldura: borda e check dourados. Dourado porque na paleta ele e a * cor do que ja esta resolvido; azul e reservado para o que ainda pede acao, e * este campo justamente nao pede nenhuma. Verde sairia do branding. */ .t2-card-body input[type=text].t2-verificado{ border-color:var(--gold); background:var(--surface-3); color:var(--text); padding-right:32px; cursor:default} /* readOnly, nao disabled: campo disabled nao viaja no POST e o core le $_POST['email'] no submit - travar assim apagaria o email do cadastro. */ .t2-card-body input[type=text].t2-verificado:focus{ border-color:var(--gold-light); box-shadow:0 0 0 3px rgba(232,184,62,.18)} .t2-verif-wrap{position:relative; display:inline-block} .t2-verif-wrap::after{content:"✓"; position:absolute; right:10px; top:50%; transform:translateY(-50%); color:var(--gold); font-weight:700; font-size:15px; pointer-events:none; line-height:1} .t2-verif-nota{display:block; margin-top:4px; font-size:12px; color:var(--gold); letter-spacing:.01em} /* aviso de cadastro OAuth em andamento */ .oauth-pending{max-width:560px; margin:0 auto 14px; padding:12px 16px; border:1px solid var(--line-strong); border-left:3px solid var(--blue-bright); background:var(--surface-b); color:var(--text); border-radius:6px; text-align:center; font-size:14px} .oauth-pending strong{color:var(--gold)} .oauth-pending span{display:block; margin-top:4px; color:var(--muted); font-size:13px} /* BOTOES DO CORE (.BigButton) NO DESENHO DO SITE. Ate 10/10/2026 eram os do tibia.com, portados iguais: um
de 135x25 com um .gif azul de fundo e o rotulo em Verdana 12px por cima - pequenos para o dedo e de outra epoca ao lado do resto do site. Agora o e o botao. O background do .BigButton e zerado com !important porque o HTML que o core e dois plugins escrevem a mao (referral e guild-apply) traz o .gif em style="background-image:..."; o [style*=...] le dali a cor que o botao pedia. */ .t2-card-body .InnerTableButtonRow{width:100%; padding:0 0 4px 1px; border:0} .t2-card-body .InnerTableButtonRow td{padding-right:4px} .t2-card-body .BigButton{position:relative; display:inline-block; width:auto; height:auto; vertical-align:middle; background:none !important; z-index:1} .t2-card-body .BigButton > div{position:static; height:auto} .t2-card-body .BigButtonOver{display:none !important} .t2-card-body input.BigButtonText, .t2-card-body .BigButtonText{position:static; display:inline-block; box-sizing:border-box; width:auto !important; min-width:112px; max-width:100%; height:auto; min-height:40px; margin:0; padding:9px 18px; cursor:pointer; border-radius:9px; text-align:center; text-shadow:none; white-space:nowrap; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:14px !important; line-height:1.2; color:var(--text); background:rgba(255,255,255,.05); border:1px solid rgba(214,199,125,.45); box-shadow:none; transition:border-color .15s, background .15s, color .15s} .t2-card-body .BigButtonText:hover{border-color:var(--brand-bright); background:rgba(39,167,255,.14); color:#fff} .t2-card-body .BigButtonText:focus-visible{outline:2px solid var(--brand); outline-offset:2px} .t2-card-body .t2-bb-green .BigButtonText, .t2-card-body .BigButton[style*="sbutton_green"] .BigButtonText{color:#1b1405; border-color:var(--gold-deep); background:linear-gradient(180deg,var(--gold-light),var(--gold))} .t2-card-body .t2-bb-green .BigButtonText:hover, .t2-card-body .BigButton[style*="sbutton_green"] .BigButtonText:hover{filter:brightness(1.07); color:#1b1405} .t2-card-body .t2-bb-red .BigButtonText, .t2-card-body .BigButton[style*="sbutton_red"] .BigButtonText{color:#ffb9b9; border-color:rgba(245,94,94,.55); background:rgba(245,94,94,.08)} .t2-card-body .t2-bb-red .BigButtonText:hover, .t2-card-body .BigButton[style*="sbutton_red"] .BigButtonText:hover{border-color:#F55E5E; background:rgba(245,94,94,.18); color:#fff} .t2-card-body .ButtonText{position:static} .t2-card-body .TopButtonContainer{position:relative; right:4px; top:4px; z-index:60} .t2-card-body .TopButtonContainer .TopButton{position:absolute; right:0; z-index:55} .t2-card-body .MediumButtonText{position:absolute; top:0; left:0; height:37px; width:150px; z-index:20} .t2-card-body .MediumButtonBackground{position:relative; width:150px; height:37px; z-index:10} .t2-card-body .MediumButtonOver{position:relative; width:150px; height:37px; visibility:hidden; z-index:15} .t2-card-body .MediumButtonForm{margin:0; padding:0} /* botoes de texto sem gif (skins mais novas do MyAAC) */ .t2-card-body .NewButton,.t2-card-body .RealButton{display:inline-block; color:#06121a; background:linear-gradient(#71c6f4,#198ecc); border:none; border-radius:9px; padding:9px 16px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; font-size:13.5px; cursor:pointer} /* mensagens (sucesso / erro) */ .t2-card-body .SmallBox .Message,.t2-card-body .SmallBox .ErrorMessage{background:var(--surface-3); border:1px solid var(--line-strong); border-radius:10px; padding:12px 14px; color:var(--text)} .t2-card-body .SmallBox .ErrorMessage{border-color:rgba(200,90,70,.45); color:#f0b8a6} /* noticias */ .t2-card-body .NewsHeadlineBackground{background:linear-gradient(rgba(70,160,215,.18),rgba(70,160,215,.04)) !important; border:1px solid var(--line-strong); border-radius:9px; height:auto !important; padding:7px 12px; margin-bottom:8px} .t2-card-body .NewsHeadlineText,.t2-card-body .NewsHeadlineDate,.t2-card-body .NewsHeadlineAuthor{position:static; color:#efe8cf; left:auto; top:auto} .t2-card-body .NewsHeadlineText{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15px} .t2-card-body .NewsHeadlineDate,.t2-card-body .NewsHeadlineAuthor{color:var(--muted); font-size:12px} /* cores semanticas do Tibia (mantem o significado, ajusta pro escuro) */ .t2-card-body .white{color:#ece7d6 !important} .t2-card-body .green{color:#8fe36a !important} /* "color: green/red" inline (ex.: status Online/Offline) fica legivel no escuro */ .t2-card-body [style*="color: green"],.t2-card-body [style*="color:green"]{color:#8fe36a !important} .t2-card-body [style*="color: red"],.t2-card-body [style*="color:red"]{color:#ef6a6a !important} .t2-card-body .yellow{color:#f2cf72 !important} .t2-card-body .red{color:#ef6a6a !important} .t2-card-body .grey{color:#9c9379 !important} .t2-card-body .orange{color:#f0a24a !important} /* ============================================================ PAGINA DE FEATURES (getLink('features')) ============================================================ */ .t2-feat-sub{color:#cbc3ac; font-size:15.5px; line-height:1.7; margin:2px auto 26px; max-width:860px; text-align:center} .t2-feat-lead{font-family:"Cinzel","Cinzel-fb",serif; text-align:center; font-weight:700; font-size:clamp(19px,2.8vw,25px); color:var(--gold); margin:4px 0 18px; letter-spacing:.03em} .t2-feat-chips{display:flex; justify-content:center; gap:8px; flex-wrap:wrap; max-width:1000px; margin:0 auto 28px} .t2-feat-cat{display:flex; align-items:center; gap:12px; margin:26px 0 6px} .t2-feat-cat:first-child{margin-top:4px} .t2-feat-badge{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); border:1px solid rgba(230,185,63,.34); border-radius:9px; padding:6px 12px; background:rgba(230,185,63,.08)} .t2-feat-cat h3{margin:0; font-size:23px; color:#efe8cf} .t2-feat-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:13px; margin-bottom:8px} .t2-feat-card{background:rgba(13,21,30,.74); border:1px solid var(--line); border-radius:12px; padding:14px 15px; transition:.16s; scroll-margin-top:88px} .t2-feat-card:target{border-color:var(--gold) !important; box-shadow:0 0 0 2px rgba(230,185,63,.35); background:rgba(230,185,63,.07)} .t2-feat-card:hover{border-color:var(--line-strong); transform:translateY(-2px)} .t2-feat-card h4{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15.5px; margin:0 0 6px; color:var(--gold); display:flex; align-items:center; gap:7px; flex-wrap:wrap} .t2-feat-card p{margin:0; font-size:13.5px; color:#c2baa4; line-height:1.55} /* Cards com midia viram
: clicar no card expande e mostra as fotos */ .t2-feat-card.has-media{cursor:pointer} .t2-feat-card.has-media > summary{list-style:none; display:block; position:relative; padding-right:20px; outline:none} .t2-feat-card.has-media > summary::-webkit-details-marker{display:none} .t2-feat-card.has-media > summary::after{content:"\25BE"; position:absolute; top:3px; right:0; font-size:13px; color:var(--brand-bright); transition:transform .2s} .t2-feat-card.has-media[open] > summary::after{transform:rotate(180deg)} .t2-feat-card.has-media[open]{border-color:var(--line-strong); background:rgba(13,21,30,.9)} .t2-feat-verall{display:flex; justify-content:center; margin-top:22px} .t2-feat-verall .t2-btn-secondary{min-width:auto; padding:13px 26px; font-size:14px} .t2-feat-media-wrap{display:flex; flex-direction:column; gap:10px; margin-top:12px} .t2-feat-media{display:block; width:100%; max-width:340px; margin:0 auto; border:1px solid var(--line-strong); border-radius:8px} .t2-feat-card.tier{border-color:rgba(200,90,70,.30)} .t2-feat-card.tier h4{color:#f0a58c} .t2-soon{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:10px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:#241802; background:linear-gradient(#f4d267,#d09b28); padding:2px 7px; border-radius:5px} /* ---------- Featured cards (top 6) ---------- */ .t2-feat-featured{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:13px; margin-bottom:22px} .t2-feat-featured .t2-feat-card{border-color:rgba(70,160,215,.28); background:rgba(70,160,215,.06)} .t2-feat-featured .t2-feat-card:hover{border-color:rgba(70,160,215,.45)} /* ---------- Todas as features (direto na pagina) ---------- */ .t2-feat-full{margin-top:0} /* ---------- Chip group labels ---------- */ .t2-chip-group-label{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); padding:6px 0 0 4px; flex-basis:100%} .t2-chip-group-label:first-child{padding-top:0} /* ---------- Como começar / Get started ---------- */ .t2-start{padding:48px 0; border-top:1px solid var(--line); text-align:center} .t2-start-inner{max-width:var(--maxw); margin:0 auto; padding:0 22px} .t2-start h2{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:clamp(22px,3.6vw,34px); margin:0 0 28px; letter-spacing:.03em; background:linear-gradient(#f9f0cf,#f2dc93 52%,#d9a53f); -webkit-background-clip:text; background-clip:text; color:transparent} .t2-start-steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:800px; margin:0 auto 32px} .t2-start-step{background:rgba(13,21,30,.62); border:1px solid var(--line); border-radius:12px; padding:20px 16px; text-align:center} .t2-start-num{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; background:linear-gradient(#71c6f4,#198ecc); color:#06121a; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:15px; margin-bottom:10px} .t2-start-step h3{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15px; color:var(--gold); margin:0 0 6px} .t2-start-step p{margin:0; font-size:13px; color:#b8b19e; line-height:1.5} .t2-start-cta{margin-top:0} /* ---------- Responsive ---------- */ @media(max-width:1100px){ .t2-hero-content{grid-template-columns:1fr} } @media(max-width:920px){ .t2-start-steps{grid-template-columns:1fr} .t2-grid{grid-template-columns:1fr} } /* PONTOS DE CORTE DA BARRA, medidos em 10/10/2026 com a conta logada e deslogada (logada a barra e ~100px mais larga: "Minha conta" + "Sair" no lugar do "Entrar"; o pior caso e o ingles, "My Account" + "Logout"): ate 520px barra do celular; logado, o botao diz so "Conta" e o Sair vai para dentro do menu 521 a 760px barra do celular (marca compacta, conta, hamburguer) 761 a 900px hamburguer; idioma, status e Discord dentro do menu 901 a 1125px hamburguer + status; idioma e Discord dentro do menu 1126 a 1800px hamburguer + idioma, status e Discord 1801 a 1911px menu aberto, busca so com a lupa 1912px ou mais tudo Cada corte e a largura medida + 15px da barra de rolagem. O menu aberto precisa de 1783px com a conta logada; o corte ja foi 1560px, e de 1561 a 1800px a pagina inteira rolava de lado com o botao da conta cortado - em producao, num notebook de 1600px. Historico: o menu vira hamburguer aqui e nao em 920px. Medido a 1600: marca 268 + menu 697 + idioma 108 + status 332 + conta 252, mais os vaos, dao 1737 - e a barra transbordava 159px com o painel de conta saindo da tela. A faixa de 921 a ~1500px nunca coube; so nao aparecia porque ninguem tinha medido nela. Este bloco leva SO as regras do menu. As de conteudo (grade de passos, cards) continuam nos 920px, que e onde elas fazem sentido. */ @media(max-width:1800px){ .t2-burger{display:flex} .t2-nav{display:none; position:absolute; top:64px; left:0; right:0; flex-direction:column; align-items:stretch; gap:2px; background:linear-gradient(#14100a,#0d0904); border-bottom:1px solid var(--line-strong); box-shadow:0 18px 42px rgba(0,0,0,.55); padding:10px; max-height:calc(100vh - 64px); overflow-y:auto} body.t2-nav-open .t2-nav{display:flex} .t2-navitem{width:100%} .t2-navtop{width:100%; justify-content:space-between; font-size:15px; padding:12px 14px} .t2-navitem .t2-caret{transition:transform .15s} .t2-navitem.t2-open .t2-caret{transform:rotate(180deg)} .t2-drop{position:static; opacity:1; visibility:visible; transform:none; display:none; box-shadow:none; border:none; background:rgba(0,0,0,.22); margin:0 0 4px; padding:4px; min-width:0} .t2-navitem.t2-open .t2-drop{display:block} .t2-navsolo{padding:12px 14px; font-size:15px} } @media(max-width:700px){ .t2-cta-row{flex-direction:column} .t2-btn-primary,.t2-btn-secondary{width:100%; min-width:0} .t2-headline{font-size:2rem} } @media(max-width:560px){ .t2-bar{gap:12px; padding:0 14px} .t2-main{padding:18px 14px} .t2-auth .t2-btn-ghost{display:none} } /* Ponte da home e da /features para o catalogo de sistemas. */ .t2-feat-sistemas { text-align: center; margin: -6px 0 18px; font-size: 13px; color: #9a9a9a; } .t2-feat-sistemas a { color: #ffcc66; text-decoration: none; font-weight: 600; } .t2-feat-sistemas a:hover { text-decoration: underline; } /* Botao 'Ler a pagina' dentro do card de feature. So aparece nos cards que tem pagina propria em /sistemas (ver _sistemas_mapa.php). */ .t2-feat-ler { display: inline-block; margin-top: 9px; padding: 5px 12px; font-size: 12px; font-weight: 600; color: #ffcc66; text-decoration: none; border: 1px solid #6a5a2a; border-radius: 4px; background: #00000055; } .t2-feat-ler:hover { background: #ffcc66; color: #1a1a1a; border-color: #ffcc66; } /* Dentro de o cursor padrao e o de abrir/fechar; no link tem de ser de link, senao parece que o clique so expande o card. */ .t2-feat-card summary .t2-feat-ler { cursor: pointer; } /* ===== Bloco de diferenciais na home ==================================== */ /* A home argumenta (por que o servidor e diferente); a /features cataloga. */ .t2-dif { max-width: 900px; margin: 0 auto; text-align: left; } .t2-dif h3 { color: #ffcc66; font-size: 19px; margin: 0 0 10px; } .t2-dif h4 { color: #eaf6cf; font-size: 15px; margin: 0 0 6px; } .t2-dif p { margin: 0 0 11px; color: #cfcfcf; font-size: 14px; line-height: 1.7; } .t2-dif b, .t2-dif strong { color: #ffe08a; } .t2-dif-curta { background: #00000055; border: 1px solid #4a4a4a; border-radius: 6px; padding: 20px 22px; margin-bottom: 26px; } .t2-dif-curta p:last-child { margin-bottom: 0; } .t2-dif-h { text-align: center; margin: 0 0 16px; } .t2-dif-eixos { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; margin-bottom: 26px; } .t2-dif-eixo { background: #00000066; border: 1px solid #444; border-left: 3px solid #26688f; border-radius: 4px; padding: 16px 18px; } .t2-dif-eixo > .t2-dif-eixo-t { color: #ffcc66; font-size: 15.5px; } .t2-dif-d { color: #b9b9b9; font-size: 13px; } .t2-dif-f { border-top: 1px solid #333; padding-top: 10px; margin-top: 10px; } .t2-dif-f strong { display: block; color: #ffe08a; font-size: 13px; margin-bottom: 3px; } .t2-dif-f p { color: #b3b3b3; font-size: 12.5px; line-height: 1.6; margin: 0; } .t2-dif-ler { display: inline-block; margin-top: 7px; font-size: 11.5px; font-weight: 600; color: #ffcc66; text-decoration: none; border-bottom: 1px solid #6a5a2a; } .t2-dif-ler:hover { border-bottom-color: #ffcc66; } .t2-dif-igual { background: #00000055; border: 1px solid #4a4a4a; border-radius: 6px; padding: 18px 20px; } .t2-dif-igual-t { color: #ffcc66; font-size: 16px; font-weight: 700; margin: 0 0 6px; } .t2-dif-igual table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; } .t2-dif-igual td { padding: 8px 10px; border-bottom: 1px solid #2e2e2e; vertical-align: top; color: #b3b3b3; } .t2-dif-igual td:first-child { color: #eaf6cf; font-weight: 700; width: 32%; } .t2-dif-igual tr:last-child td { border-bottom: 0; } @media (max-width: 640px) { .t2-dif-eixos { grid-template-columns: 1fr; } .t2-dif h3 { font-size: 17px; } } /* Icone do hero, acima do TIBIA 2 grande. */ /* Icone a esquerda do TIBIA 2, na mesma linha. O tamanho acompanha o titulo pelo mesmo clamp, em escala menor - assim a proporcao entre os dois nao muda conforme a largura da tela. */ /* Contrapeso: um vazio da largura do icone do outro lado do titulo. Sem ele, o icone empurrava o TIBIA 2 uns 50px para a direita - a LINHA ficava centrada, mas o titulo nao, e ele desalinhava do eyebrow acima (medido: centro do container 953, centro do titulo 1005). Contrapeso em vez de posicionamento absoluto porque o icone continua no fluxo: nada some nem sobrepoe quando a tela encolhe. O gap do flex ja se aplica dos dois lados, entao o vazio so precisa repetir a LARGURA do icone. */ .t2-hero-brand::after{content:""; flex:0 0 auto; width:calc(var(--icone-h) * .830)} .t2-hero-brand{display:flex; align-items:center; justify-content:center; gap:clamp(7px,1vw,14px); margin:0 0 14px} .t2-hero-brand .t2-hero-title{margin:0} /* O icone e o escudo claro, que nao e quadrado (229x276). A ALTURA manda e a largura acompanha; 92px de altura sao 1,38x a altura das maiusculas do wordmark, a proporcao medida na folha de assets. O contrapeso do ::after existe para o lockup ficar centrado na pagina mesmo com o icone so de um lado, entao ele tem de valer a largura RENDERIZADA - dai o 229/276 = .830 do escudo. Errar isso descentraliza o TIBIA 2. */ .t2-hero-brand{--icone-h:clamp(52px,6.1vw,92px); --titulo-fs:clamp(3rem,7vw,6rem); --h1-caixa:calc(var(--titulo-fs) * .95)} /* O icone alinha pelo TITULO, nao pela coluna. Com align-items:center do pai ele centralizava contra titulo+assinatura e caia 14px abaixo do centro das letras. Encostado no topo da coluna, o topo do icone coincide com o topo da caixa do h1, e a margem abaixo centraliza os dois na TINTA das letras. O .434 e onde a tinta das maiusculas cai dentro da caixa do h1, e e PROPRIO DA FONTE - nao e meio. Medido com actualBoundingBox num canvas, com a fonte computada da pagina: Cinzel da 0,4343 (as maiusculas assentam alto na caixa) e a Playfair, que esteve aqui antes, dava 0,504. Trocar a fonte do wordmark sem remedir desalinha o icone: a troca de Playfair para Cinzel derrubou 6px, que e exatamente (0,5 - 0,4343) x 91,2. O white-space:nowrap no titulo nao e enfeite - se o TIBIA 2 quebrasse em duas linhas a caixa dobraria e a conta erraria. */ .t2-hero-icon{flex:0 0 auto; height:var(--icone-h); width:auto; align-self:flex-start; margin-top:calc(var(--h1-caixa) * .434 - var(--icone-h) / 2)} /* SEM image-rendering:pixelated aqui. O escudo claro e ilustracao pintada, e nearest-neighbor nela deixa a borda dourada serrilhada. O icone da BARRA continua pixelado - aquele e pixel art de verdade. */ @media (max-width: 640px){ .t2-brand img{height:28px; width:auto} } /* Status do servidor + Discord na barra do topo. */ .t2-headmeta{display:flex; align-items:center; gap:12px; margin-left:14px} .t2-status-head{display:inline-flex; align-items:center; gap:7px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:12px; color:var(--muted); white-space:nowrap} .t2-btn-discord-head{display:inline-flex; align-items:center; gap:7px; background:#5865F2; border:1px solid #4752c4; color:#fff; font-weight:700; font-size:12.5px; text-decoration:none; padding:7px 12px; border-radius:7px; white-space:nowrap} .t2-btn-discord-head:hover{background:#4752c4} .t2-btn-discord-head .t2-discord-ico{width:16px; height:16px; flex:0 0 auto} /* Abaixo de 1240px a barra fica apertada: some o texto e ficam o ponto e o icone, que continuam dizendo o essencial (esta online, tem Discord). */ /* Abaixo de 1912px o Discord fica so com o icone e o bloco encosta mais. Aqui ja houve um .t2-headmeta-txt{display:none} para esconder o TEXTO do status. Ele nunca valeu: o .t2-status-txt{display:flex}, mais abaixo no arquivo e com a mesma especificidade, vencia. Saiu de vez em 10/10/2026 - o dono quer o numero de jogadores online ao lado do "Servidor online", e uma regra morta voltaria a valer na primeira reordenacao do arquivo. */ @media (max-width: 1911px){ .t2-btn-discord-head{padding:7px 9px} .t2-headmeta{gap:9px; margin-left:10px} } @media (max-width: 640px){ } /* O rotulo da secao dentro do hero: menor que o TIBIA 2 e sem o respiro de quem era cabecalho de secao solta, senao os dois titulos competem. */ .t2-next-hero{padding-top:0; margin:2px 0 10px} .t2-next-hero .t2-next-title{font-size:clamp(1.6rem,2.6vw,2.6rem); margin:4px 0 0} .t2-next-hero .t2-eyebrow{margin-bottom:0} /* 'OT SERVER GLOBAL' sob o TIBIA 2: mesma familia do titulo, bem menor e com muito espacamento entre letras - le como assinatura, nao como outra manchete. */ @media (max-width: 640px){ } /* Coluna com TIBIA 2 + assinatura, ao lado do icone. */ .t2-hero-titulos{display:flex; flex-direction:column; align-items:center} /* A assinatura fica na Cinzel de proposito: os filetes da Playfair somem em corpo pequeno com entreletra larga. Contraste alto no nome, baixo na assinatura - e o que a propria folha faz. */ .t2-hero-subtitulo{display:flex; align-items:center; justify-content:center; gap:clamp(7px,.85vw,13px); margin:2px 0 0; white-space:nowrap} /* A assinatura NAO pode passar da largura do wordmark. A coluna e dimensionada pelo filho mais largo, e o h1 centraliza dentro dela: com a assinatura em 449px contra 349px do TIBIA 2, sobravam 50px de cada lado do nome e o icone ao lado parecia descolado. O vao do flex era 14px o tempo todo - o espaco vinha da coluna, nao do gap. Na folha a assinatura tambem e menor que o nome. */ .t2-hero-subtitulo span{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:clamp(.72rem,1.06vw,1.02rem); letter-spacing:.24em; text-transform:uppercase; text-indent:.24em; color:#eccf72; background:linear-gradient(180deg,#fbf1c2,#e5b74f); -webkit-background-clip:text; background-clip:text} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .t2-hero-subtitulo span{color:transparent} } /* Ornamento: filete que se dissolve para fora e termina num losango junto do texto. Feito em CSS e nao recortado da folha porque ele acompanha o corpo do texto pelo clamp - recorte em PNG borraria nos tamanhos intermediarios. */ .t2-orn{position:relative; flex:0 0 auto; display:block; height:1px; width:clamp(16px,2.2vw,38px); background:linear-gradient(90deg,rgba(226,178,72,0),#e8bd58)} .t2-orn::after{content:""; position:absolute; right:-3px; top:50%; width:7px; height:7px; margin-top:-3.5px; transform:rotate(45deg); background:linear-gradient(135deg,#fdf0bd,#dfa73a); box-shadow:0 0 9px rgba(255,196,80,.5)} .t2-hero-subtitulo .t2-orn:last-child{transform:scaleX(-1)} /* O divisor sob a assinatura fecha o lockup. Estreito e sem a margem dos divisores de secao: aqui ele e parte da marca, nao separador de blocos. */ .t2-divisor.t2-divisor-hero{max-width:min(430px,48%); margin:14px auto 2px} @media (max-width: 640px){ .t2-hero-subtitulo span{letter-spacing:.14em; text-indent:.14em} .t2-orn{width:20px} } /* A resposta curta agora vive na secao de baixo. */ .t2-hero-curta{max-width:760px; margin:0 auto 26px; text-align:left} .t2-hero-curta p{margin:0 0 12px; color:var(--muted); font-size:1.02rem; line-height:1.72} .t2-hero-curta p:last-child{margin-bottom:0} .t2-hero-curta b{color:#eef3d1} /* ===== Os quatro eixos em resumo, no hero =============================== */ /* DUAS colunas, nao quatro: com quatro, cada card ficava com ~215px e o texto era obrigado a ser pequeno para caber. Em 2x2 sobra largura para o tipo crescer de verdade - que era o problema. */ .t2-hero-pilares{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; max-width:1040px; margin:26px auto 0; text-align:left} .t2-pilar{position:relative; overflow:hidden; padding:22px 24px 22px 27px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(150deg, rgba(20,31,43,.92), rgba(13,21,30,.86)); box-shadow:0 6px 22px rgba(0,0,0,.35); transition:border-color .18s, transform .18s, box-shadow .18s} /* Faixa dourada na lateral: da um ponto de cor e marca onde cada card comeca, que e o que faltava para eles se destacarem do fundo do hero. */ .t2-pilar::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:linear-gradient(180deg, var(--gold), var(--brand-deep)); opacity:.85} .t2-pilar:hover{border-color:var(--line-strong); transform:translateY(-3px); box-shadow:0 12px 30px rgba(0,0,0,.5)} .t2-pilar h3{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:clamp(1.18rem,1.5vw,1.42rem); color:#f2e9c8; margin:0 0 9px; line-height:1.25} .t2-pilar p{margin:0; color:#bdb59c; font-size:clamp(1rem,1.1vw,1.08rem); line-height:1.68} @media (max-width: 820px){ .t2-hero-pilares{grid-template-columns:1fr; gap:14px; margin-top:20px} .t2-pilar{padding:18px 20px 18px 23px} } /* ===== Eixos no hero, com capa que revela ao clicar ===================== */ /* Os eixos ocupam duas colunas no hero, como os cards anteriores. */ /* O hero alarga SO na home para os quatro eixos caberem lado a lado. O .t2-container padrao tem 1200px - dividido por quatro sobrariam ~290px por card, estreito demais para o texto que eles carregam. O seletor e escopado no .t2-hero, entao o resto do site mantem a largura de leitura. */ .t2-hero .t2-container{width:min(1760px,94%)} .t2-hero .t2-hero-left{max-width:100%} /* O .t2-dif tem max-width de leitura (900px) - certo para a secao de baixo, errado aqui: era ele, e nao o container, que segurava o grid em ~890px. */ .t2-dif-hero{max-width:none} /* Altura maxima com a capa fechada. Sem isto o card cresce com TODO o conteudo atras (o eixo do PvP tem quatro features), a capa cresce junto, e a palavra - centralizada nela - ia parar fora da tela. Fechados os quatro ficam do mesmo tamanho; ao abrir, o limite sai e o conteudo aparece inteiro. */ /* A altura do card acompanha a TELA, nao um numero fixo. Com 430px cravados a dobra fechava em 1080p mas estourava 141px num notebook de 800px de altura - e o card e a peca mais alta do hero, entao e nele que a folga tem de sair. O 516 e a soma medida de tudo que NAO e o card na primeira tela: header 65, faixa do beta 42, respiro 26, eyebrow 38, lockup 130, divisor e titulo da secao, e a faixa de numeros no pe. O piso de 260px existe porque abaixo disso o cadeado e a chamada comecam a encostar no titulo; dai em diante a pagina rola, que e melhor que sobrepor. */ .t2-dif-eixo{max-height:430px; transition:max-height .3s ease} /* O teto por ALTURA DE TELA vale so onde os quatro cards dividem a dobra com o resto do hero. No celular eles estao empilhados e a pagina rola de qualquer jeito: la a formula nao tem premissa, e o unico efeito seria cortar o corpo borrado por um numero que nao quer dizer nada naquele contexto. O 516 e a soma medida de tudo que NAO e o card na primeira tela do desktop. */ @media (min-width: 1241px){ .t2-dif-eixo{max-height:clamp(260px, calc(100vh - 516px), 430px)} } .t2-dif-eixo.t2-eixo-aberto{max-height:none} .t2-dif-hero .t2-dif-eixos{grid-template-columns:repeat(4,1fr); max-width:none; margin:0 auto} /* Abaixo de 1400px quatro colunas voltam a apertar: caem para duas, e depois para uma. O texto nao encolhe em nenhum dos passos. */ @media (max-width: 1400px){ .t2-dif-hero .t2-dif-eixos{grid-template-columns:repeat(2,1fr); max-width:1060px} } .t2-dif-hero .t2-dif-h{margin-top:0} .t2-dif-eixo{position:relative; overflow:hidden} /* ===== Os quatro pilares - dark fantasy + gold + arcane blue ============= Fechado: pedra escura, fio dourado DISCRETO, medalhao e titulo dourados, corpo borrado com cadeado. O dourado marca a RECOMPENSA; o azul so entra na INTERACAO - glow no hover, halo ao abrir. Card parado nao tem azul nenhum. O titulo saiu de dentro da capa: no modelo anterior o card fechado escondia tudo atras de uma palavra de efeito, e quem chegava na pagina nao sabia o que ia abrir. Agora le o titulo e ve o corpo borrado - a curiosidade vem do conteudo, nao do misterio. O corpo continua no DOM, entao o buscador le tudo. Sistema inteiro documentado em docs/branding-tibia2.md. */ .t2-dif-eixo{text-align:center; padding:24px 18px 20px; background:linear-gradient(180deg,#0d151e,#080d12 72%); border:1px solid rgba(232,184,62,.26); border-left:1px solid rgba(232,184,62,.26); border-radius:0; --chanfro:14px; clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)); transition:border-color .25s ease, box-shadow .25s ease} .t2-dif-eixo:hover{border-color:rgba(232,184,62,.45); box-shadow:0 0 30px rgba(22,119,200,.30), inset 0 0 26px rgba(22,119,200,.10)} .t2-dif-eixo.t2-eixo-aberto{border-color:var(--gold); box-shadow:0 0 38px rgba(22,119,200,.26), inset 0 0 0 1px rgba(39,167,255,.16)} /* O desbloqueio sai AZUL e termina DOURADO: o sistema reconhece a descoberta, e o que fica no fim e a recompensa. */ .t2-dif-eixo.t2-eixo-aberto::after{content:""; position:absolute; inset:0; z-index:4; pointer-events:none; animation:t2Desbloqueio .95s ease-out 1} @keyframes t2Desbloqueio{ 0% {box-shadow:inset 0 0 0 2px rgba(39,167,255,.85), inset 0 0 44px rgba(39,167,255,.40)} 50% {box-shadow:inset 0 0 0 2px rgba(150,175,180,.55), inset 0 0 34px rgba(232,184,62,.32)} 100%{box-shadow:inset 0 0 0 2px rgba(232,184,62,0), inset 0 0 0 rgba(232,184,62,0)} } /* O titulo da capa. Ele comeca pela palavra do pilar, entao a primeira coisa que se le de relance ja identifica o card. */ .t2-dif-hero .t2-dif-eixo-t{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:clamp(1.02rem,1.28vw,1.36rem); line-height:1.28; letter-spacing:.04em; text-transform:uppercase; color:var(--gold); margin:11px 0 0; text-wrap:balance} /* O corpo e o que fica escondido - BORRADO, nao removido. */ .t2-eixo-corpo{transition:filter .5s ease, opacity .5s ease} .t2-dif-eixo:not(.t2-eixo-aberto) .t2-eixo-corpo{filter:blur(5px); opacity:.45; user-select:none; pointer-events:none} /* A capa cobre o card inteiro para o clique pegar em qualquer ponto, mas so escurece EMBAIXO: o titulo em cima continua nitido. */ .t2-eixo-capa{position:absolute; inset:0; z-index:2; width:100%; border:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:9px; font:inherit; text-align:center; padding:0 16px 18px; /* Em PIXELS a partir da base, nao em porcentagem. Com 34%/62% o escurecimento acompanhava a altura do card: num card de 430px comecava em 146px e ficava abaixo do titulo, mas num de 264px comecava em 90px e caia em cima da terceira linha - era isso que apagava o "PERMANENTE" do card de PvP. Ancorado na base, ele fica sempre nos ultimos 130px. */ background:linear-gradient(to top, rgba(8,13,18,.94) 0, rgba(8,13,18,.62) 62px, rgba(8,13,18,0) 130px); transition:opacity .32s ease, visibility .32s} .t2-eixo-capa:focus-visible{outline:2px solid var(--blue-bright); outline-offset:-4px} .t2-eixo-cadeado{color:var(--gold); filter:drop-shadow(0 2px 6px rgba(0,0,0,.6)); transition:color .2s ease, transform .2s ease} .t2-dif-eixo:hover .t2-eixo-cadeado{color:var(--blue-bright); transform:translateY(-2px)} /* Inter: rotulo de UI. Ver docs/branding-tibia2.md. */ .t2-eixo-cta{font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:.8rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); transition:color .2s ease} .t2-dif-eixo:hover .t2-eixo-cta{color:var(--blue-bright)} /* A regua sob o titulo: filete que se dissolve nas pontas, com um losango em cada. Mesma peca da assinatura do hero. */ .t2-eixo-regua{display:block; width:min(70%,190px); height:1px; margin:11px auto 13px; background:linear-gradient(90deg,rgba(232,184,62,0),#E8B83E 22%,#FFD96A 50%,#E8B83E 78%,rgba(232,184,62,0)); position:relative} .t2-eixo-regua::before,.t2-eixo-regua::after{content:""; position:absolute; top:50%; width:6px; height:6px; margin-top:-3px; transform:rotate(45deg); background:linear-gradient(135deg,#FFD96A,#a9822a)} .t2-eixo-regua::before{left:-3px} .t2-eixo-regua::after{right:-3px} /* Aberto: a capa some de cena E deixa de receber clique. A visibility evita que ela continue capturando o cursor com opacidade zero. */ .t2-eixo-aberto .t2-eixo-capa{opacity:0; visibility:hidden; pointer-events:none} /* O selo de desbloqueado so existe depois do clique. */ .t2-eixo-revelado{display:none} .t2-eixo-aberto .t2-eixo-revelado{display:block; margin-top:16px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gold)} @media (max-width: 820px){ .t2-dif-hero .t2-dif-eixos{grid-template-columns:1fr} } /* Quem prefere menos animacao nao ganha transicao nenhuma. */ @media (prefers-reduced-motion: reduce){ .t2-eixo-capa,.t2-eixo-corpo,.t2-eixo-cadeado,.t2-dif-eixo{transition:none} .t2-dif-eixo.t2-eixo-aberto::after{animation:none} .t2-dif-eixo:hover .t2-eixo-cadeado{transform:none} } /* O eyebrow do hero acompanha a LARGURA do bloco da marca (icone + TIBIA 2). Medido: o texto tinha 390px a 11px de fonte, contra 437px do bloco - as duas linhas terminavam em pontos diferentes. O letter-spacing passa a em para crescer junto com a fonte; em px fixo ele desalinharia de novo. */ .t2-hero .t2-eyebrow{font-size:clamp(.95rem,1.25vw,1.25rem); letter-spacing:.18em; margin-bottom:6px} /* Caixa alta por CSS, nao no texto. O _lang.php guarda 'Os Quatro Pilares do Tibia 2' com a capitalizacao certa - e o que o leitor de tela pronuncia e o que vai para qualquer outro uso da chave. Escrever em maiusculas no dado perderia essa informacao para sempre. O letter-spacing compensa o aperto que a caixa alta causa. */ .t2-headline{text-transform:uppercase; letter-spacing:.03em} /* ===== Divisor ornamental ============================================== */ /* Linha em degrade com um losango no centro, e um brilho que percorre. Tudo em CSS: nenhuma imagem para baixar, e escala em qualquer largura. */ .t2-divisor{display:flex; align-items:center; justify-content:center; width:min(760px,86%); margin:52px auto; height:18px} /* Cada metade tem DUAS camadas de fundo: a linha (degrade que morre transparente na ponta, para nascer do fundo em vez de bater numa borda dura) e, por cima, uma faixa clara e estreita que atravessa - e o brilho. */ .t2-divisor::before,.t2-divisor::after{content:""; height:1px; flex:1; background-image:linear-gradient(90deg, transparent, rgba(255,240,190,.95), transparent), linear-gradient(90deg, transparent, rgba(230,185,63,.5) 45%, rgba(230,185,63,.85)); background-size:110px 100%, 100% 100%; background-repeat:no-repeat; background-position:-110px 0, 0 0; animation:t2DivBrilho 5s ease-in-out infinite} /* A metade da direita e a mesma coisa espelhada - inclusive a animacao, entao os dois brilhos partem do centro para as pontas ao mesmo tempo. */ .t2-divisor::after{transform:scaleX(-1)} /* Losango: um quadrado girado, no centro da linha. */ .t2-divisor i{width:9px; height:9px; margin:0 13px; flex:0 0 auto; transform:rotate(45deg); background:var(--gold); box-shadow:0 0 10px rgba(230,185,63,.6); animation:t2DivPulso 3.2s ease-in-out infinite} @keyframes t2DivBrilho{ 0% { background-position:-110px 0, 0 0 } 60%,100%{ background-position:calc(100% + 110px) 0, 0 0 } } @keyframes t2DivPulso{ 0%,100%{ transform:rotate(45deg) scale(1); box-shadow:0 0 10px rgba(230,185,63,.55) } 50% { transform:rotate(45deg) scale(1.22); box-shadow:0 0 18px rgba(230,185,63,.95) } } /* Decoracao nao se move para quem pediu menos animacao. */ @media (prefers-reduced-motion: reduce){ .t2-divisor i,.t2-divisor::before,.t2-divisor::after{animation:none} } /* Medalhao no topo da capa de cada eixo. */ /* O medalhao encolhe junto com a TELA, nao so com a largura: em 780px de altura o card cai para 264px, e com 82px de medalhao o titulo de tres linhas do PvP era cortado no pe do card. */ .t2-eixo-medalha{width:clamp(48px,min(4.6vw,7.4vh),82px); height:auto; margin-bottom:2px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); transition:transform .2s ease} .t2-dif-eixo:hover .t2-eixo-medalha{transform:translateY(-3px) scale(1.04)} @media (prefers-reduced-motion: reduce){ .t2-eixo-medalha{transition:none} .t2-dif-eixo:hover .t2-eixo-medalha{transform:none} } /* O "2" do wordmark em azul: o T2 do logo ja e dourado com azul, entao o nome repete a divisao em vez de virar um bloco dourado unico. Precisa do proprio background-clip - cada elemento recorta o SEU gradiente, herdar nao vale. */ .t2-hero-dois{background:linear-gradient(180deg,#7fd0ff 0%,#27A7FF 45%,#1677C8 100%); -webkit-background-clip:text; background-clip:text; color:#27A7FF} @supports ((-webkit-background-clip:text) or (background-clip:text)){ .t2-hero-dois{color:transparent} } /* ---- Dentro do card do pilar -------------------------------------------- O card e centralizado (medalhao, titulo, regua, cadeado), mas o CORPO e texto de leitura: centralizado, cada linha comeca num ponto diferente e o olho se perde na volta. Alinha a esquerda. */ .t2-eixo-corpo{text-align:left} .t2-eixo-corpo > .t2-dif-d{text-align:center} /* Nome da feature = subtitulo, entao DOURADO. O link e INTERACAO, entao AZUL - e a regra que separa recompensa de acao, aplicada dentro do card. */ .t2-eixo-corpo .t2-dif-f strong{color:var(--gold); font-size:13.5px} .t2-eixo-corpo .t2-dif-f{border-top:1px solid rgba(232,184,62,.16)} .t2-eixo-corpo .t2-dif-f p{color:var(--muted); font-size:13.5px} .t2-eixo-corpo .t2-dif-ler{color:var(--blue-bright); border-bottom-color:rgba(39,167,255,.4)} .t2-eixo-corpo .t2-dif-ler:hover{border-bottom-color:var(--blue-bright)} /* No CARD, a capa (inset:0) cobre estes links; quem interage e a capa, que abre o modal. display:none tira-os POR COMPLETO da arvore de alvos de toque - pointer-events:none sozinho NAO bastou: o Lighthouse mobile continuava contando o por baixo da capa e marcava sobreposicao (capa x dif-ler). O clone no modal (.t2-modal-corpo, fora de .t2-dif-eixo) NAO casa este seletor, entao segue visivel e clicavel. O deep-link continua crawlavel por /features e pelo sitemap. */ .t2-dif-eixo .t2-eixo-corpo .t2-dif-ler{display:none} /* ---- UI que ficou na fonte de leitura ----------------------------------- Item de menu suspenso e seletor de idioma nao tem classe propria, entao herdavam a Source Serif 4 do body enquanto o menu ao lado deles ja estava na Inter - mesma barra, duas fontes. Sao controle, nao texto. */ .t2-drop a,.t2-lang a,.t2-foot-links a,.t2-legal-back,.t2-dif-ler, .t2-btn-discord-head,.t2-btn-discord-hero,.t2-eixo-revelado,.t2-soon{ font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif} .t2-drop a{letter-spacing:.01em} /* ===== A regua dourada da barra ========================================== Um filete atravessa a base do header e o item da pagina ATUAL o corta: um losango sobre a linha e um trecho aceso sob o rotulo. E a mesma peca dos divisores da pagina, aqui dizendo onde voce esta. Vai no ::after da barra e nao em border-bottom porque precisa se dissolver nas pontas - borda solida de ponta a ponta pesa demais numa barra escura. */ .t2-bar{position:relative} .t2-bar::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; pointer-events:none; /* Solida de ponta a ponta: agora ela recebe o fio da diagonal nos DOIS lados, e degrade que morre nas bordas cortaria a linha exatamente nas emendas. */ background:linear-gradient(90deg, rgba(232,184,62,.55), rgba(232,184,62,.5) 50%, rgba(232,184,62,.55))} /* O item atual. O losango fica ACIMA do rotulo (como o brilho do mockup) e o trecho aceso embaixo, sobre a regua. */ .t2-navtop.t2-nav-atual{color:var(--gold)} .t2-navtop.t2-nav-atual::before{content:""; position:absolute; top:2px; left:50%; width:7px; height:7px; margin-left:-3.5px; transform:rotate(45deg); background:linear-gradient(135deg,#FFD96A,#E8B83E); box-shadow:0 0 10px rgba(255,217,106,.75)} .t2-navtop.t2-nav-atual::after{content:""; position:absolute; left:8px; right:8px; bottom:-1px; height:2px; background:linear-gradient(90deg,rgba(255,217,106,0),#FFD96A 50%,rgba(255,217,106,0)); box-shadow:0 0 12px rgba(255,217,106,.55)} /* position:relative para os dois pseudo-elementos acima; o item ja e inline-flex, entao so falta o contexto de posicionamento. */ .t2-navtop{position:relative} /* Losango na regua, logo depois da diagonal do painel da marca - e onde as duas linhas se encontram no mockup. DENTRO de um min-width e nao solto: o position:relative daqui vinha depois do media query do menu mobile no arquivo e, com a mesma especificidade, vencia o position:absolute dele. O menu aberto virava uma tira estreita no meio da tela, com os itens cortados. Como o ornamento so existe onde ha regua na barra, prende-lo ao mesmo ponto de corte do hamburguer resolve os dois. */ @media (min-width: 1801px){ .t2-nav{position:relative} .t2-nav::before{content:""; position:absolute; left:-16px; bottom:-19px; width:7px; height:7px; transform:rotate(45deg); background:linear-gradient(135deg,#FFD96A,#E8B83E); box-shadow:0 0 9px rgba(255,217,106,.6)} } /* ===== Painel da conta: o espelho do painel da marca ====================== Mesma altura, mesma pintura, mesmo fio dourado - so que a diagonal fica na ESQUERDA, para o corte apontar de volta para o centro da barra. As variaveis --sobra e --corte sao as mesmas do painel da marca de proposito: se um lado descesse 22px e o outro 18px, a regua da barra encontraria os dois fios em alturas diferentes e nenhuma emenda fecharia. */ .t2-auth{align-self:stretch; position:relative; z-index:3; display:flex; align-items:center; gap:9px; --sobra:22px; --corte:26px; padding:7px 16px 9px 30px; margin:0 0 calc(var(--sobra) * -1) 4px; clip-path:polygon(0 0, 100% 0, 100% 100%, var(--corte) 100%, 0 calc(100% - var(--sobra))); background:linear-gradient(180deg,#080D12 0,#060a0e 64px)} /* O respiro vertical e pequeno de proposito: o botao ESTICA e ocupa a altura inteira do painel (86px), inclusive a sobra que desce abaixo da barra. Sai o padding-bottom de --sobra que antes o prendia aos 64px da barra. */ /* Traco dourado: base + diagonal da esquerda, parando na altura da regua. */ .t2-auth::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(90deg,rgba(232,184,62,.9),rgba(232,184,62,.45)); clip-path:polygon( 100% 100%, var(--corte) 100%, 0 calc(100% - var(--sobra)), 2px calc(100% - var(--sobra)), calc(var(--corte) + 1.5px) calc(100% - 1.6px), 100% calc(100% - 1.6px))} .t2-auth > *{position:relative; z-index:3} /* Losango na emenda da direita, espelhando o da esquerda. Vai no VIZINHO e nao no proprio painel: o clip-path recorta os pseudo-elementos do elemento tambem, entao um ::before do .t2-auth posicionado fora da forma simplesmente nao aparece. Mesmo tropeco do losango dos quatro pilares. O align-self:stretch faz o bloco do status ocupar os 64px da barra, e so assim o bottom:-3.5px cai exatamente na linha da regua - com ele centrado, a base dependeria da altura do conteudo. */ .t2-headmeta{align-self:stretch; position:relative} .t2-headmeta::after{content:""; position:absolute; right:-24px; bottom:-3.5px; width:7px; height:7px; transform:rotate(45deg); background:linear-gradient(135deg,#FFD96A,#E8B83E); box-shadow:0 0 9px rgba(255,217,106,.6)} /* ===== O botao de conta ================================================== Cantos chanfrados para DENTRO, aresta dourada e o azul no miolo. Sem ornamento nos cantos: o chanfro ja marca as quinas. Sao TRES camadas concentricas em vez de border + box-shadow, e a ORDEM importa - o dourado fica na aresta de FORA e o preto POR DENTRO dele: .t2-btn-cta dourado a aresta externa, 2px ::before preto recuado 2px, separando o ouro do azul ::after azul recuado 4px Preto por fora envolvia a peca inteira e virava uma moldura escura grossa; por dentro ele so separa as duas cores, que e o que da o metal embutido. Por que nao border e box-shadow: clip-path recorta os dois. A borda some nos chanfros e a sombra externa desaparece inteira. Camadas com o MESMO clip-path acompanham o chanfro, e a profundidade vem de filter:drop-shadow, que segue a forma recortada em vez de ser cortada por ela. */ .t2-btn-cta,.t2-btn-primary{ --chanfro:9px; position:relative; z-index:0; display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; align-self:stretch; min-height:56px; padding:0 30px; cursor:pointer; white-space:nowrap; text-decoration:none; border:0; border-radius:0; background:linear-gradient(180deg,#FFD96A 0%,#E8B83E 42%,#a9822a 100%); clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)); filter:drop-shadow(0 3px 9px rgba(0,0,0,.65)); transition:filter .16s ease} /* O preto, POR DENTRO do dourado. */ .t2-btn-cta::before,.t2-btn-primary::before{content:""; position:absolute; inset:2px; z-index:0; clip-path:inherit; background:#010407} /* O miolo azul, recuado do preto - e a indentacao que se ve nas quatro quinas. */ .t2-btn-cta::after,.t2-btn-primary::after{content:""; position:absolute; inset:4px; z-index:1; clip-path:inherit; background:linear-gradient(180deg,#2b6fae 0%,#164c82 44%,#0b2b4d 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.30), inset 0 -10px 20px rgba(0,0,0,.42)} .t2-btn-cta:hover,.t2-btn-primary:hover{filter:drop-shadow(0 3px 13px rgba(0,0,0,.7)) brightness(1.14)} .t2-btn-cta:focus-visible,.t2-btn-primary:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px} /* O texto acima das duas camadas. */ .t2-btn-cta > *,.t2-btn-primary > *{position:relative; z-index:2} /* O rotulo precisa ser ELEMENTO: no de texto solto fica ABAIXO das camadas posicionadas e some. Dai o no HTML do Jogar Gratis. */ .t2-btn-cta b,.t2-btn-primary b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:15px; letter-spacing:.09em; text-transform:uppercase; color:#FFF6DC; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.6)} .t2-btn-cta i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500; font-size:10px; letter-spacing:.055em; text-transform:uppercase; line-height:1; color:rgba(243,238,220,.85); text-shadow:0 1px 2px rgba(0,0,0,.5)} /* O Sair usa a MESMA construcao do botao principal - tres camadas, chanfro, chanfro - mudando so o miolo: ardosia no lugar do azul. A cor e o que separa os dois papeis. Mesma forma diz "sao da mesma familia"; miolo apagado diz "este nao e o caminho principal". Se o Sair fosse azul tambem, sair da conta competiria com entrar nela. Ele divide a largura do painel com o botao principal: 1 para 2, entao a acao que se quer que aconteca fica com o dobro do espaco. */ /* As proporcoes vivem PRESAS ao painel do header: elas existem para dividir a largura dele. Soltas, pegavam qualquer botao da mesma classe - e num container de coluna o flex-basis:0 vence o height, entao o botao do contador colapsava para 0px de altura. */ .t2-auth .t2-btn-sair{flex:1 1 0; min-width:82px; padding:0 16px} .t2-auth .t2-btn-cta:not(.t2-btn-sair){flex:2 1 0} /* O vermelho do Tibia. A matiz vem de #F55E5E, que e o vermelho canonico dos estilos do otclient - nao e escolha de gosto, e o valor que o jogo ja usa. As luminosidades sao as MESMAS do botao azul (L43 / L30 / L17), so trocando a matiz: assim os dois botoes tem o mesmo peso visual e um nao parece mais claro que o outro por acidente. */ .t2-btn-sair::after{background:linear-gradient(180deg,#af2c2c 0%,#831616 44%,#4c0b0b 100%)} .t2-btn-sair b{font-size:13px; color:#E4DECB} .t2-btn-sair{background:linear-gradient(180deg,#E8B83E 0%,#a9822a 45%,#6d5218 100%)} /* ===== Modal dos pilares ================================================= Clicar num pilar abre o conteudo centralizado em vez de expandir o card. O card que expandia empurrava os tres vizinhos e a grade inteira pulava. Moldura na mesma linguagem do botao de conta: chanfro nas quatro quinas e camadas concentricas (escuro -> dourado -> miolo), porque clip-path recorta border e box-shadow. */ .t2-modal{ --chanfro:16px; border:0; padding:0; background:#010407; color:var(--text); width:min(760px,92vw); max-height:88vh; overflow:visible; clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)); filter:drop-shadow(0 18px 50px rgba(0,0,0,.75))} .t2-modal::backdrop{background:rgba(3,7,12,.78); backdrop-filter:blur(4px)} /* O fio dourado, entre o contorno escuro e o miolo. */ .t2-modal-inner{position:relative; margin:5px; padding:3px; background:linear-gradient(180deg,#FFD96A 0%,#E8B83E 38%,#a9822a 100%); clip-path:inherit} .t2-modal-corpo{ background:linear-gradient(180deg,#101c28 0%,#0a121b 60%,#070d14 100%); clip-path:inherit; padding:34px 40px 38px; text-align:center; /* overflow-x explicito: com so overflow-y:auto o outro eixo vira auto sozinho, e o navegador reserva a calha da barra horizontal a toa. */ max-height:calc(88vh - 16px); overflow-y:auto; overflow-x:hidden} .t2-modal-corpo .t2-eixo-medalha{width:clamp(72px,9vw,104px); margin-bottom:6px} .t2-modal-corpo .t2-dif-eixo-t{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:clamp(1.15rem,2.1vw,1.62rem); line-height:1.25; letter-spacing:.045em; text-transform:uppercase; color:var(--gold); margin:8px 0 0; text-wrap:balance} /* Nem blur nem limite de altura aqui: e o conteudo inteiro, e e para isso que o modal existe. */ .t2-modal-corpo .t2-eixo-corpo{text-align:left; max-width:60ch; margin:0 auto} .t2-modal-corpo .t2-dif-d{text-align:center; font-size:1.05rem} .t2-modal-x{position:absolute; top:8px; right:10px; z-index:5; width:34px; height:34px; line-height:1; font-size:22px; background:rgba(3,8,14,.7); color:var(--gold); cursor:pointer; border:1px solid rgba(232,184,62,.45); border-radius:50%; transition:color .15s, border-color .15s, background .15s} .t2-modal-x:hover{color:var(--gold-light); border-color:var(--gold); background:rgba(22,76,130,.6)} /* A entrada repete o desbloqueio azul->dourado que o card fazia ao abrir. */ .t2-modal[open]{animation:t2ModalEntra .22s ease-out} @keyframes t2ModalEntra{ from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none} } @media (prefers-reduced-motion: reduce){ .t2-modal[open]{animation:none} } /* ===== A faixa que fecha o hero ========================================== Tres numeros e o unico CTA da dobra, nos 162px que sobravam no pe do hero. */ .t2-faixa{display:flex; align-items:center; justify-content:center; gap:clamp(20px,3.5vw,64px); flex-wrap:wrap; margin:26px auto 0; padding:16px clamp(18px,3vw,40px); width:min(1180px,94%); background:linear-gradient(180deg,rgba(16,25,35,.72),rgba(8,13,18,.72)); border-top:1px solid rgba(232,184,62,.20); border-bottom:1px solid rgba(232,184,62,.20); backdrop-filter:blur(3px)} .t2-faixa-nums{display:flex; align-items:center; gap:clamp(20px,3.4vw,58px); flex-wrap:wrap; justify-content:center} .t2-faixa-item{display:flex; flex-direction:column; align-items:center; gap:3px; line-height:1} /* O numero e dourado porque e conquista acumulada - a mesma regra que pinta titulo e progressao. O rotulo e cinza quente e some no fundo, que e o papel dele: quem le a faixa le os NUMEROS. */ .t2-faixa-item b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:clamp(1.6rem,2.4vw,2.3rem); color:var(--gold); text-shadow:0 0 22px rgba(232,184,62,.22)} .t2-faixa-item i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500; font-size:.74rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); text-indent:.13em} /* Na faixa o botao nao estica com o painel do header, entao precisa de altura propria. */ .t2-faixa .t2-btn-cta{align-self:auto; height:62px; min-height:0} @media (max-width: 820px){ .t2-faixa{gap:18px; padding:14px 16px} .t2-faixa-item b{font-size:1.5rem} } /* ===== O trio da direita: idioma, status e Discord ======================= Eles vinham com alturas diferentes (19, 26 e 36px) e cada um com um respiro proprio, entao pareciam tres pecas soltas em vez de um grupo. Passam a ser TRES PASTILHAS DA MESMA ALTURA, com a mesma moldura e o mesmo raio: o olho le uma faixa so. A altura vem de uma variavel unica - com 36px escrito em tres regras, a proxima mudanca desalinharia duas delas. Ela fica na BARRA e nao no bloco de status: o seletor de idioma e IRMAO desse bloco, nao filho, entao declarada la dentro a variavel nao chegava nele e o chip ficava com a altura antiga. */ .t2-bar{--pastilha:36px} .t2-headmeta{gap:9px} .t2-lang,.t2-status-head,.t2-btn-discord-head{ height:var(--pastilha); box-sizing:border-box; border-radius:9px; display:inline-flex; align-items:center} /* Respiros apertados de proposito: as pastilhas de 36px comeram a folga da barra e a 1561px ela voltou a transbordar 26px. Aqui o corte custa alguns pixels de ar; a alternativa era o menu virar hamburguer ja em 1600, que e largura de notebook comum. */ .t2-lang,.t2-status-head{ padding:0 3px; background:rgba(13,21,30,.55); border:1px solid var(--line)} .t2-status-head{padding:0 9px} .t2-lang a{padding:6px 7px} .t2-lang{gap:2px; margin-left:auto} .t2-btn-discord-head{padding:0 12px; border-radius:9px} /* O status empilhado: estado em cima, contagem embaixo. line-height apertado porque duas linhas tem de caber nos 36px da pastilha. */ .t2-status-txt{display:flex; flex-direction:column; justify-content:center; line-height:1.16; white-space:nowrap} .t2-status-txt b{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text)} .t2-status-txt i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500; font-size:10px; letter-spacing:.04em; color:var(--muted)} /* O ponto acompanha a altura das duas linhas, alinhado ao topo e nao ao meio - ele marca o ESTADO, que e a primeira linha. */ .t2-status-head .t2-dot{margin-right:0; align-self:center} /* ===== Header no celular ================================================= Medido a 375px: a pagina transbordava 517px. O menu ja virava hamburguer, mas todo o RESTO da barra continuava - marca 245 + idioma 104 + status 148 + Discord + painel de conta 242, numa tela de 375. Aqui a barra fica com o essencial: marca compacta, hamburguer e o botao de entrar. Idioma e Discord nao somem - eles reaparecem dentro do menu. */ .t2-nav-extra{display:none} /* Vale ate 760px e nao so 640px: com a conta logada a barra de tablet precisa de 745px, entao de 641 a 760 e a barra compacta que cabe. */ @media (max-width: 760px){ /* Sem sobra nem diagonal: o painel da marca vira um bloco simples. O recorte so faz sentido quando ha barra larga o bastante para ele apontar para algum lugar. */ .t2-brand{--sobra:0px; --corte:0px; padding:0 12px 0 12px; margin:0} .t2-brand img{height:34px} .t2-brand-txt b{font-size:19px; letter-spacing:.09em} .t2-brand-txt i{display:none} .t2-lang:not(.t2-lang-menu), .t2-status-head, .t2-btn-discord-head{display:none} /* O botao de entrar perde a segunda linha e encolhe - a acao continua clara com uma palavra so. O margin-left:auto vem para ca: quem empurrava o grupo da direita era o seletor de idioma, que aqui esta escondido. Sem isso o botao ficava solto no meio da barra, com 36px de vazio sobrando na direita. */ .t2-auth{--sobra:0px; --corte:0px; padding:0 10px; margin:0 0 0 auto} .t2-btn-cta{min-height:0; height:40px; padding:0 14px; --chanfro:6px} .t2-btn-cta i{display:none} .t2-btn-cta b{font-size:12.5px; letter-spacing:.06em} /* Alvo de toque decente: 22px era metade do minimo recomendado. */ .t2-burger{width:42px; height:38px} .t2-bar{gap:8px; padding:0 8px 0 0} /* Idioma e Discord aparecem no fim do menu aberto. */ .t2-nav-extra{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line)} /* Dentro do menu o chip nao herda a --pastilha da barra: aqui ele precisa de alvo de toque, nao de altura de barra. */ .t2-lang-menu{margin-left:0; height:auto; padding:2px} .t2-lang-menu a{padding:10px 14px; font-size:13px} .t2-nav-extra > .t2-navtop{width:auto; flex:0 0 auto} } /* No celular o alvo de toque manda: 33px de fechar e menos que os 44px minimos recomendados, e errar o X num modal que cobre a tela inteira e frustrante. O corpo tambem cede respiro lateral - numa tela de 375px, 40px de cada lado sao 21% da largura so em margem. */ @media (max-width: 640px){ .t2-modal-x{width:44px; height:44px; font-size:26px; top:6px; right:6px} .t2-modal-corpo{padding:26px 20px 30px} .t2-modal{--chanfro:12px} } /* ===== Contador de lancamento ============================================ Fica a DIREITA do lockup - o ponto de maior valor do hero, porque o olho ja esta ali por causa do logo. */ /* Os cards saem do FLUXO e a linha volta a ter a altura do lockup. Medido: com eles na grade a linha ia a 237px para um lockup de 120px, e sobravam 59px de vao ACIMA e ABAIXO do TIBIA 2. Era isso que afastava o eyebrow do nome e o nome do titulo dos pilares - o meio parecia solto porque estava centralizado num espaco que os cards das laterais inflavam. top:0 nos dois: alinhados pelo topo, cada um com a altura do proprio conteudo, e nenhum deles empurrando o meio. */ .t2-hero-topo{position:relative; display:flex; align-items:center; justify-content:center; margin-bottom:10px} .t2-hero-topo .t2-hero-brand{margin-bottom:0} .t2-hero-topo > .t2-cd{position:absolute; top:0; margin:0; width:344px} .t2-hero-topo > .t2-beta{left:0} .t2-hero-topo > .t2-cd:not(.t2-beta){right:0} /* Abaixo de 1240px os cards nao cabem ao lado: voltam ao fluxo, empilhados. */ @media (max-width: 1240px){ .t2-hero-topo{flex-wrap:wrap; gap:16px} .t2-hero-topo > .t2-cd{position:static; width:min(344px,100%)} } /* A moldura que brilha gira um gradiente conico. Precisa de @property porque angulo em custom property so anima se for declarado com tipo - sem isso o navegador trata como texto e o valor pula de 0 a 360 sem passar pelo meio. */ @property --t2-cd-ang{syntax:""; inherits:false; initial-value:0deg} .t2-cd{position:relative; --chanfro:12px; padding:3px; border-radius:0; clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)); background:#010407; filter:drop-shadow(0 6px 20px rgba(0,0,0,.6))} /* O brilho e um elemento SEM conteudo por cima de tudo: girando no fundo do card ele ficaria atras do miolo opaco, e como filho normal capturaria o clique do botao. */ .t2-cd-brilho{position:absolute; inset:0; z-index:0; pointer-events:none; clip-path:inherit; background:conic-gradient(from var(--t2-cd-ang), rgba(232,184,62,.15) 0deg, #FFD96A 40deg, #E8B83E 70deg, rgba(232,184,62,.12) 150deg, rgba(39,167,255,.55) 210deg, rgba(232,184,62,.12) 270deg, #E8B83E 330deg, rgba(232,184,62,.15) 360deg); animation:t2CdGira 5s linear infinite} @keyframes t2CdGira{to{--t2-cd-ang:360deg}} /* Respiro apertado de proposito: e o contador que define a altura da linha do hero, e cada pixel aqui empurra o resto da pagina para baixo. */ .t2-cd-inner{position:relative; z-index:1; clip-path:inherit; background:linear-gradient(180deg,#101c28 0%,#0a121b 62%,#070d14 100%); padding:12px 20px 13px; display:flex; flex-direction:column; align-items:center; gap:8px} .t2-cd-esq{display:flex; flex-direction:column; align-items:center; gap:9px} .t2-cd-rotulo{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:.86rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); text-indent:.16em} .t2-cd-nums{display:flex; align-items:flex-start; gap:clamp(8px,1vw,16px)} .t2-cd-un{display:flex; flex-direction:column; align-items:center; gap:2px; min-width:50px} /* tabular-nums e o que impede o bloco de tremer: sem ele cada digito tem largura propria e a linha se mexe a cada segundo. */ .t2-cd-un b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:clamp(1.5rem,2.1vw,2rem); line-height:1; color:var(--gold); font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; text-shadow:0 0 20px rgba(232,184,62,.28)} .t2-cd-un i{font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500; font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); text-indent:.13em} .t2-cd .t2-btn-cta{align-self:stretch; min-height:0; height:52px} /* Lancado: some o contador e sobra a chamada com o botao. */ .t2-cd-no-ar .t2-cd-nums{display:none} @media (prefers-reduced-motion: reduce){ .t2-cd-brilho{animation:none; background:linear-gradient(135deg,#E8B83E,#a9822a)} } @media (max-width: 640px){ .t2-cd-un{min-width:44px} .t2-cd-inner{padding:14px 14px 16px} } /* No celular o 'Ler a pagina' tinha 20px de altura - metade do alvo de toque minimo, e sao os unicos links dentro do card. O texto nao cresce; o que cresce e a AREA clicavel, por padding. */ @media (max-width: 640px){ /* Alvo de toque >= 48px: block ocupa a largura do card e o padding leva a altura a ~48px, com folga entre um link e outro (o Lighthouse cobra tamanho E espacamento). O texto continua do mesmo tamanho. */ .t2-dif-ler{display:block; padding:14px 8px; margin-top:8px} } /* ---- Card do beta ------------------------------------------------------- Mesma peca do contador, com o brilho puxado para o AZUL. Pela regra da marca o dourado e recompensa e o azul e interacao - e este card e um convite para agir agora, nao um premio. */ .t2-beta .t2-cd-brilho{ background:conic-gradient(from var(--t2-cd-ang), rgba(39,167,255,.18) 0deg, #7fd0ff 40deg, #27A7FF 70deg, rgba(39,167,255,.12) 150deg, rgba(232,184,62,.5) 210deg, rgba(39,167,255,.12) 270deg, #27A7FF 330deg, rgba(39,167,255,.18) 360deg)} .t2-beta .t2-cd-inner{max-width:340px} .t2-beta-txt{margin:0; font-size:.92rem; line-height:1.5; color:var(--muted); text-align:center; text-wrap:balance} /* O interior estica para preencher a altura que a grade deu ao card, e centraliza o conteudo dentro dela. */ .t2-hero-topo > .t2-cd .t2-cd-inner{flex:1 1 auto; justify-content:center} .t2-beta .t2-cd-inner{max-width:none} /* ===== Faixa de aviso do beta ============================================ No topo de toda pagina, logo ABAIXO do header - acima ela empurraria a barra fixa e quebraria o offset do sticky, o scroll-padding das ancoras e a sobra do painel da marca, todos medidos a partir dos 64px dela. */ .t2-betafaixa{position:relative; overflow:hidden; background:linear-gradient(180deg,#0c1620,#080d12)} /* O brilho vira uma LINHA na base em vez de moldura: numa faixa larga, contorno giratorio inteiro vira ruido atras do texto. */ .t2-betafaixa-brilho{position:absolute; left:0; right:0; bottom:0; top:auto; height:2px; clip-path:none; z-index:0} .t2-betafaixa-inner{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px 14px; padding:9px 18px; text-align:center} .t2-betafaixa-selo{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:700; font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:#06121a; background:linear-gradient(180deg,#FFD96A,#E8B83E); padding:3px 9px; border-radius:4px; white-space:nowrap} .t2-betafaixa-txt{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.86rem; color:var(--text)} /* text-decoration e nao border-bottom: o sublinhado precisa acompanhar o TEXTO. Com border, o padding que aumenta a area de toque empurraria a linha para o pe da area clicavel, a 11px do texto. */ .t2-betafaixa-cta{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600; font-size:.84rem; color:var(--blue-bright); white-space:nowrap; text-decoration:underline; text-decoration-color:rgba(39,167,255,.35); text-underline-offset:3px} .t2-betafaixa-cta:hover{text-decoration-color:var(--blue-bright)} @media (max-width: 640px){ /* Media: 96px, 12% da tela do celular, em tres linhas - caro demais para um aviso, logo abaixo de um header que ja tem 65px. Texto menor e respiro apertado tiram cerca de um terco sem esconder nada. */ .t2-betafaixa-txt{font-size:.74rem; line-height:1.35} .t2-betafaixa-selo{font-size:.6rem; padding:2px 7px} .t2-betafaixa-cta{font-size:.76rem} .t2-betafaixa-inner{padding:6px 10px; gap:3px 8px} } /* A data por extenso, abaixo dos numeros. Menor e em cinza quente: ela confirma o contador, nao compete com ele. */ .t2-cd-data{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.74rem; color:var(--muted); text-align:center; line-height:1.35; margin-top:2px} .t2-cd-data i{font-style:normal; display:block; font-size:.66rem; opacity:.8} /* Acao secundaria: some no fundo ate o cursor chegar. Azul e nao dourado - pela regra da marca, dourado e recompensa e isto e interacao. */ .t2-cd-cal{display:inline-flex; align-items:center; justify-content:center; gap:6px; margin-top:2px; padding:6px 10px; background:0 0; border:0; cursor:pointer; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:500; font-size:.76rem; color:var(--muted); transition:color .15s ease} .t2-cd-cal:hover{color:var(--blue-bright)} .t2-cd-cal:focus-visible{outline:2px solid var(--blue-bright); outline-offset:2px; border-radius:4px} .t2-cd-cal svg{flex:0 0 auto; opacity:.85} /* ===== Cards do hero em tela baixa ======================================= Os cards ficam fora do fluxo, entao a sobra deles desce por cima do que vem depois. Medido a 1440x780: o contador terminava em 421px e a grade dos pilares comeca em 369px - os ultimos 52px, incluindo o "Marcar no calendario", ficavam ATRAS do quarto pilar. Nao era corte de overflow, era sobreposicao. Aqui o card aperta ate a sobra caber. So o que da para encolher sem perder informacao: corpo dos numeros, respiros e a altura do botao. Nada e removido - quem tem tela baixa continua vendo a data, o fuso e o link do calendario. */ /* Vale em QUALQUER altura de tela, nao so nas baixas. Com o card cheio (254px) a sobra tambem passava atras dos pilares em 1920x950 - por 40px. Um card compacto so, com um offset so, resolve os dois casos e tira um breakpoint do caminho: menos lugar para o alinhamento se perder na proxima mudanca. Os 212px resultantes continuam legiveis - e a altura que ja estava no ar em 1440 e que motivou este ajuste. */ @media (min-width: 1241px){ /* Os dois sobem 14px juntos, alinhados como estavam. Subir custa nada: acima deles so ha o eyebrow, que e texto centrado e nao cruza as laterais. */ .t2-hero-topo > .t2-cd{top:-14px} .t2-cd-inner{padding:9px 16px 10px; gap:5px} .t2-cd-rotulo{font-size:.76rem; letter-spacing:.13em} .t2-cd-un b{font-size:clamp(1.2rem,1.7vw,1.6rem)} .t2-cd-un{min-width:44px} .t2-cd-un i{font-size:.56rem} .t2-cd-data{font-size:.68rem; margin-top:0} .t2-cd-data i{font-size:.6rem} .t2-cd .t2-btn-cta{min-height:0; height:44px} .t2-cd-cal{margin-top:0; padding:4px 8px; font-size:.72rem} .t2-beta-txt{font-size:.84rem; line-height:1.42} } /* ===== Alvo de toque dos links secundarios ================================ Medido no celular: "Testar agora" da faixa com 22px e "Marcar no calendario" com 32px, contra os 44px minimos. Sao links pequenos ao lado de botoes grandes, entao errar o toque e facil. O padding cresce a AREA e a margem negativa devolve o espaco ao layout: a faixa continua com os mesmos 75px e o card nao empurra os pilares. O texto nao muda de tamanho - o que cresce e so onde o dedo pode cair. */ @media (max-width: 640px){ .t2-betafaixa-cta{display:inline-block; padding:12px 8px; margin:-12px -8px} .t2-cd-cal{padding:12px 14px; margin-top:-6px; margin-bottom:-6px} } /* ===== Busca de paginas (command palette) — so nas internas ===== Alternativa ao menu: digitar para achar pagina. Botao-lupa no cabecalho abre um ; azul = interacao, dourado reservado pra recompensa (nao usado aqui). */ .t2-search-btn{display:inline-flex; align-items:center; gap:7px; background:var(--surface-3); border:1px solid var(--line-strong); color:var(--muted); border-radius:9px; padding:8px 12px; cursor:pointer; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:12px; font-weight:600; letter-spacing:.03em; line-height:1} .t2-search-btn:hover{border-color:var(--brand); color:var(--text)} .t2-search-btn svg{width:15px; height:15px; flex:none} .t2-search-btn-txt{white-space:nowrap} /* O texto "Buscar paginas" custa 110px de barra: so cabe com tudo aberto. */ @media (max-width:1911px){ .t2-search-btn-txt{display:none} .t2-search-btn{padding:8px} } .t2-search-dlg{border:none; padding:0; background:transparent; width:min(560px, calc(100% - 28px)); margin-top:12vh; color:var(--text)} .t2-search-dlg::backdrop{background:rgba(4,8,12,.62)} .t2-search-inner{background:var(--surface-a); border:1px solid var(--line-strong); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden} .t2-search-top{display:flex; align-items:center; gap:10px; padding:13px 15px; border-bottom:1px solid var(--line)} .t2-search-ico{width:18px; height:18px; color:var(--muted); flex:none} .t2-search-input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text); font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-size:15px; line-height:1.3} .t2-search-input::placeholder{color:var(--muted-2)} .t2-search-esc{font-size:10px; color:var(--muted-2); border:1px solid var(--line-strong); border-radius:5px; padding:3px 6px; text-transform:uppercase; letter-spacing:.08em; flex:none} .t2-search-list{list-style:none; margin:0; padding:6px; max-height:52vh; overflow-y:auto} .t2-search-item{display:flex; align-items:baseline; gap:12px; padding:9px 12px; border-radius:9px; cursor:pointer} .t2-search-item.on{background:var(--surface-3)} .t2-search-item .t2-search-t{color:var(--text); font-size:13.5px; font-weight:600} .t2-search-item .t2-search-u{color:var(--muted-2); font-size:11.5px; margin-left:auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:46%} .t2-search-item.on .t2-search-u{color:var(--muted)} .t2-search-empty{padding:18px 14px; text-align:center; color:var(--muted); font-size:13px} @media (max-width:640px){ .t2-search-dlg{margin-top:6vh} .t2-search-esc{display:none} } /* ---------- Discord em destaque na home (_discord.inc.php + CTA final) ---------- Ate o lancamento o objetivo numero um da home e levar o visitante pro Discord. Azul do Discord (#5865F2) de proposito: o botao precisa ser reconhecido de longe, e o dourado/azul do tema ja e dos botoes de conta. */ .t2-discband{display:flex; align-items:center; gap:18px; max-width:900px; margin:22px auto 4px; padding:16px 20px; border-radius:14px; text-decoration:none; color:#fff; background:linear-gradient(180deg,#5865F2 0%,#4752c4 100%); border:1px solid #7480ff; box-shadow:0 10px 30px rgba(88,101,242,.35), inset 0 1px 0 rgba(255,255,255,.18); transition:transform .12s ease, box-shadow .12s ease} .t2-discband:hover{transform:translateY(-1px); box-shadow:0 14px 36px rgba(88,101,242,.5), inset 0 1px 0 rgba(255,255,255,.18)} .t2-discband:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px} .t2-discband-ico{width:44px; height:44px; flex:0 0 auto} .t2-discband-txt{display:flex; flex-direction:column; gap:3px; min-width:0; text-align:left} .t2-discband-txt b{font-family:"Cinzel","Cinzel-fb",serif; font-size:20px; letter-spacing:.02em; line-height:1.2} .t2-discband-txt i{font-style:normal; font-size:14.5px; line-height:1.4; opacity:.93} .t2-discband-btn{margin-left:auto; flex:0 0 auto; background:#fff; color:#3b44b8; font-weight:800; font-size:14.5px; padding:12px 18px; border-radius:10px; white-space:nowrap} @media (max-width:640px){ .t2-discband{flex-wrap:wrap; gap:12px; padding:16px} .t2-discband-ico{width:34px; height:34px} .t2-discband-txt{flex:1 1 calc(100% - 50px)} .t2-discband-txt b{font-size:17px} .t2-discband-btn{margin-left:0; width:100%; text-align:center} } .t2-start-cta{display:flex; flex-wrap:wrap; gap:14px; justify-content:center; align-items:center} .t2-btn-discord-cta{--chanfro:9px; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-width:260px; height:64px; padding:0 30px; text-decoration:none; color:#fff; font-size:1.02rem; background:linear-gradient(180deg,#6b76ff 0%,#5865F2 45%,#4752c4 100%); clip-path:polygon(var(--chanfro) 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% calc(100% - var(--chanfro)), calc(100% - var(--chanfro)) 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)), 0 var(--chanfro)); filter:drop-shadow(0 3px 9px rgba(0,0,0,.65)); transition:filter .16s ease} .t2-btn-discord-cta:hover{filter:drop-shadow(0 3px 13px rgba(0,0,0,.7)) brightness(1.1)} .t2-btn-discord-cta .t2-discord-ico{width:24px; height:24px; flex:0 0 auto} @media (max-width:640px){ .t2-btn-discord-cta{width:100%; min-width:0} } /* ===== MOBILE: páginas do core do MyAAC (conta, personagens, highscores, guilds, boss-exp, forge-costs, houses, bans...) ===================================== O core envolve o conteúdo nas caixas com borda do Tibia.com (Table1..5 / TableContent / InnerTableContainer) com LARGURA FIXA (~460px) e tabelas de dados largas (highscores ~756px). Dentro do .t2-card (overflow:hidden) isso era CORTADO no celular: os inputs do cadastro sumiam pela direita e metade das colunas do highscores ficava inacessível (a página não rolava para elas). */ /* Rede de segurança: conteúdo largo demais (tabela de dados) ROLA na horizontal DENTRO do card em vez de ser cortado. Em tela grande não há overflow, logo nenhuma barra aparece. */ @media (max-width: 900px){ .t2-card-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; } } /* Celular: as MOLDURAS de borda do core perdem a largura fixa e acompanham a tela — então o que CABE (formulários) reflui sem precisar rolar. Tabela de dados larga continua maior que a tela e usa o scroll do bloco acima. */ @media (max-width: 640px){ .t2-card-body .Table1, .t2-card-body .Table2, .t2-card-body .Table3, .t2-card-body .Table4, .t2-card-body .Table5, .t2-card-body .TableContent, .t2-card-body .TableContentContainer, .t2-card-body .TableContentAndRightShadow, .t2-card-body .InnerTableContainer, .t2-card-body .TableContainer{ width:100% !important; max-width:100%; } /* Campos do core ocupam a largura; 16px impede o ZOOM automático do iOS Safari ao focar. O font-size vai no seletor TYPE-ESPECÍFICO de propósito: o estilo base (.t2-card-body input[type=password]) tem especificidade maior que `.t2-card-body input`, então um seletor type a type é o que vence. */ .t2-card-body input[type=text], .t2-card-body input[type=email], .t2-card-body input[type=password], .t2-card-body input[type=search], .t2-card-body input[type=number], .t2-card-body input:not([type]), .t2-card-body select, .t2-card-body textarea{ font-size:16px; width:100%; max-width:100%; box-sizing:border-box; } /* Radios/checkbox do core (vocação, cidade) eram 13px — alvo de toque pequeno. */ .t2-card-body input[type=radio], .t2-card-body input[type=checkbox]{ width:18px; height:18px; } /* FORMULÁRIOS de autenticação (têm senha: criar conta e login) viram PILHA vertical — o rótulo em cima, o campo full-width embaixo. Antes a tabela label|input de 2 colunas tinha largura fixa e o input sumia pela direita. Escopo por :has(senha) para NÃO atingir as tabelas de dados (que não têm input e seguem rolando na horizontal). A caixa com borda decorativa some no empilhado (o .t2-card do tema já é a moldura). */ .t2-card-body form:has(input[type=password]) table, .t2-card-body form:has(input[type=password]) tbody, .t2-card-body form:has(input[type=password]) tr, .t2-card-body form:has(input[type=password]) td{ display:block; width:auto !important; max-width:100%; border:0 !important; background:transparent !important; box-shadow:none !important; padding-left:0; padding-right:0; } .t2-card-body form:has(input[type=password]) td.LabelV{ padding:10px 0 2px; font-weight:600; } .t2-card-body form:has(input[type=password]) input[type=text], .t2-card-body form:has(input[type=password]) input[type=email], .t2-card-body form:has(input[type=password]) input[type=password]{ width:100% !important; } /* Botões nativos do core no LOGIN (.BigButton: "Login" e "Account lost?") eram float:right e colidiam com o bloco de login social (OU / Discord / Google). No celular entram em fluxo normal, logo apos os campos, e o bloco social (.oauth-buttons) fica embaixo em largura cheia. */ .t2-card-body form:has(input[type=password]) div:has(> .BigButton){ float:none !important; clear:both; text-align:center; margin:6px 0; } .t2-card-body form:has(input[type=password]) .oauth-buttons{ clear:both; } /* Links do rodapé eram 15px de altura e colados — alvo de toque maior. */ .t2-foot-links a{ display:inline-block; padding:6px 3px; } } /* ============================================================ /features - CATALOGO em largura inteira (.t2-fx) A pagina sai do .t2-card (pages/features.php liga t2_fullwidth) e tudo o que aparece nela e estilizado aqui. Visual do tema/cliente: painel escuro com filete dourado, titulo em Cinzel, losango dourado. As classes antigas dos cards (.t2-feat-card etc.) continuam valendo; este bloco so as ajusta dentro de .t2-fx. ============================================================ */ .t2-fx{max-width:1200px; margin:0 auto; padding:26px 20px 56px; box-sizing:border-box; text-align:left; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; color:var(--text)} .t2-fx *, .t2-fx *::before, .t2-fx *::after{box-sizing:border-box} .t2-fx [hidden]{display:none !important} .t2-fx-hero{position:relative; overflow:hidden; padding:28px 28px 22px; margin:0 0 26px; border-radius:var(--radius); border:1px solid var(--line-strong); background:linear-gradient(180deg,rgba(22,33,46,.96),rgba(11,18,25,.96))} .t2-fx-hero::before{content:""; position:absolute; left:0; right:0; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--gold) 22%,var(--gold-light) 50%,var(--gold) 78%,transparent)} .t2-fx-eyebrow{display:inline-flex; align-items:center; gap:8px; margin:0 0 8px; font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold)} .t2-fx-eyebrow::before{content:""; width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(var(--gold-light),#d09b28); box-shadow:0 0 7px rgba(230,185,63,.45)} .t2-fx-hero .t2-fx-tit{margin:0 0 10px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; line-height:1.1; font-size:clamp(30px,5.4vw,46px); letter-spacing:.02em; color:var(--gold-light)} .t2-fx-intro{margin:0; max-width:78ch; font-size:16px; line-height:1.65; color:#d9d1ba} .t2-fx-intro a{color:var(--brand)} .t2-fx-busca{position:relative; display:flex; align-items:center; margin:20px 0 0; max-width:640px} .t2-fx-busca svg{position:absolute; left:15px; width:19px; height:19px; color:var(--muted); pointer-events:none} .t2-fx-busca input{width:100%; min-height:50px; padding:10px 118px 10px 44px; border-radius:12px; font:inherit; font-size:16px; color:var(--text); background:var(--ground); border:1px solid var(--line-strong); color-scheme:dark; -webkit-appearance:none; appearance:none} .t2-fx-busca input::placeholder{color:var(--muted-2)} .t2-fx-busca input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,184,62,.18)} .t2-fx-conta{position:absolute; right:14px; font-size:12.5px; font-weight:600; color:var(--muted); pointer-events:none; white-space:nowrap} .t2-fx-cats{display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 0} .t2-fx-cats a{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:7px 15px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; color:#e6dfca; background:rgba(255,255,255,.04); border:1px solid var(--line-strong)} .t2-fx-cats a:hover{border-color:var(--gold); color:var(--gold-light)} .t2-fx-cats b{padding:1px 8px; border-radius:999px; font-size:12px; color:#1b1405; background:var(--gold)} .t2-fx-filtrando .t2-fx-cats, .t2-fx-filtrando .t2-fx-chips{display:none} .t2-fx-grupo{margin:0 0 34px; scroll-margin-top:96px} .t2-fx-cat{display:flex; align-items:center; gap:12px; margin:0 0 12px} .t2-fx-cat .t2-fx-cat-t{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:clamp(20px,3.2vw,26px); line-height:1.2; color:#efe8cf} .t2-fx-chips{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px} .t2-fx-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px} .t2-fx .t2-feat-card{position:relative; display:flex; flex-direction:column; padding:18px 18px 16px; border-radius:var(--radius); background:var(--surface-a); border:1px solid var(--line); scroll-margin-top:96px; transition:border-color .16s, background .16s, transform .16s, box-shadow .16s} .t2-fx .t2-feat-card:hover{border-color:rgba(232,184,62,.5); background:var(--surface-3); transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.35)} .t2-fx .t2-feat-card .t2-feat-card-t{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:0 0 8px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:17px; line-height:1.3; color:var(--gold)} .t2-fx .t2-feat-card.tier .t2-feat-card-t{color:#f0a58c} .t2-fx .t2-feat-card p{margin:0; font-size:14.5px; line-height:1.6; color:#c9c1ab} .t2-fx .t2-feat-card p strong{color:#f3e9c9} .t2-fx .t2-feat-card.has-media > summary{display:flex; flex-direction:column; flex:1 1 auto; padding-right:0} .t2-fx .t2-feat-card.has-media > summary::after{display:none} .t2-fx-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:auto; padding-top:14px} .t2-fx .t2-feat-ler{display:inline-flex; align-items:center; min-height:38px; margin:0; padding:7px 14px; border-radius:9px; font-size:13.5px; font-weight:700; color:var(--gold-light); background:rgba(232,184,62,.08); border:1px solid rgba(232,184,62,.42)} .t2-fx .t2-feat-ler:hover{background:var(--gold); color:#1b1405; border-color:var(--gold)} .t2-fx-midia{display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:7px 14px; border-radius:9px; font-size:13.5px; font-weight:600; color:var(--brand-bright); background:rgba(39,167,255,.07); border:1px solid rgba(39,167,255,.32)} .t2-fx-midia::after{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-top:-3px; transition:transform .18s} .t2-fx details[open] .t2-fx-midia::after{transform:rotate(-135deg); margin-top:3px} .t2-fx .t2-feat-media-wrap{margin-top:14px} .t2-fx .t2-feat-media{max-width:100%} .t2-fx-vazio{padding:34px 18px; text-align:center; border-radius:var(--radius); border:1px dashed var(--line-strong); color:var(--muted)} .t2-fx-vazio p{margin:0 0 12px} .t2-fx-vazio button{min-height:42px; padding:8px 18px; border-radius:9px; font:inherit; font-weight:700; cursor:pointer; color:#1b1405; background:linear-gradient(180deg,var(--gold-light),var(--gold)); border:1px solid var(--gold-deep)} .t2-fx a:focus-visible, .t2-fx summary:focus-visible, .t2-fx button:focus-visible{outline:2px solid var(--brand); outline-offset:2px} @media (max-width:640px){ .t2-fx{padding:16px 14px 40px} .t2-fx-hero{padding:20px 18px 18px; margin-bottom:22px} .t2-fx-busca input{padding-right:14px} /* o contador sai de dentro do campo (nao cabe ao lado do texto digitado) */ .t2-fx-busca{flex-wrap:wrap} .t2-fx-conta{position:static; flex:1 1 100%; margin-top:8px} .t2-fx-busca svg{top:16px} /* atalhos do grupo: UMA fileira que rola de lado, em vez de varias telas de chips */ .t2-fx-chips{flex-wrap:nowrap; overflow-x:auto; margin:0 -14px 14px; padding:2px 14px 8px; scrollbar-width:none; -webkit-overflow-scrolling:touch} .t2-fx-chips::-webkit-scrollbar{display:none} .t2-fx-chips .t2-hf{flex:0 0 auto; min-height:38px; white-space:nowrap} .t2-fx-grid{grid-template-columns:1fr; gap:12px} .t2-fx .t2-feat-card{padding:16px} .t2-fx .t2-feat-card:hover{transform:none} .t2-fx .t2-feat-ler, .t2-fx-midia{min-height:44px} } @media (prefers-reduced-motion:reduce){ .t2-fx .t2-feat-card{transition:none} .t2-fx .t2-feat-card:hover{transform:none} } /* ============================================================ FUNIL: proposta de valor + acao principal no topo da home (.t2-hx), barra fixa do celular (.t2-barra) e o card de online sem numero. Ver _hx.inc.php e _funil.php. ============================================================ */ /* O .t2-hx mora DENTRO do .t2-hero-topo, logo depois do lockup. A linha do topo passa a quebrar: lockup em cima, este bloco embaixo, ocupando a linha inteira. Os dois cards continuam fora do fluxo, nas laterais (>= 1241px), entao o miolo deste bloco fica no CANAL entre eles - mesma conta do .t2-headline. */ .t2-hero-topo{flex-wrap:wrap} .t2-hx{flex:0 0 100%; display:flex; flex-direction:column; align-items:center; margin:14px 0 6px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif} .t2-hx > *{max-width:680px} @media (min-width:1241px){ .t2-hx > *{max-width:min(680px, calc(100% - 720px))} } /* Entre 1241 e 1380px o canal entre os cards tem menos de 500px: os dois botoes encolhem para continuar lado a lado. */ @media (min-width:1241px) and (max-width:1380px){ .t2-hx .t2-hx-pri{min-width:214px; padding:0 16px} .t2-hx-sec{min-width:196px; padding:0 14px} } .t2-hx-lead{margin:0 0 18px; font-size:clamp(1.02rem,1.25vw,1.2rem); line-height:1.55; color:#e9e2cd; text-wrap:balance} .t2-hx-cta{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%} /* Principal: o botao da marca (azul com aresta dourada), maior que o da barra. */ .t2-hx .t2-hx-pri{height:60px; min-height:0; min-width:250px; padding:0 30px; --chanfro:9px} .t2-hx .t2-hx-pri b{font-size:17px; letter-spacing:.07em} .t2-hx .t2-hx-pri i{display:block; font-size:11.5px} /* Secundaria: contorno, mesma altura, sem disputar com a principal. */ .t2-hx-sec{display:inline-flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:60px; min-width:230px; padding:0 26px; border-radius:10px; text-decoration:none; color:var(--text); background:rgba(8,13,18,.55); border:1px solid rgba(214,199,125,.4); transition:border-color .15s, background .15s, color .15s} .t2-hx-sec:hover{border-color:var(--brand-bright); background:rgba(39,167,255,.12); color:#fff} .t2-hx-sec:focus-visible{outline:2px solid var(--gold-light); outline-offset:3px} .t2-hx-sec b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:15px; letter-spacing:.05em} .t2-hx-sec i{font-style:normal; font-size:11.5px; color:var(--muted)} .t2-hx-nota{margin:12px 0 0; font-size:.8rem; color:var(--muted)} .t2-hx-pontos{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:8px; text-align:left} .t2-hx-pontos li{position:relative; padding-left:20px; font-size:.95rem; line-height:1.5; color:#cfc7b1} .t2-hx-pontos li::before{content:""; position:absolute; left:2px; top:.52em; width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(var(--gold-light),#d09b28); box-shadow:0 0 7px rgba(230,185,63,.4)} .t2-hx-pontos b{color:#f6ecc9; font-weight:700} /* Abaixo de 1240px os cards voltam ao fluxo: o lockup ocupa a linha, depois este bloco, e so entao os dois cards, lado a lado se couberem. */ @media (max-width:1240px){ .t2-hero-topo .t2-hero-brand{flex:0 0 100%} .t2-hx{margin-top:4px} } @media (max-width:640px){ .t2-hx-lead{font-size:1rem; margin-bottom:14px} .t2-hx .t2-hx-pri, .t2-hx-sec{width:100%; min-width:0; height:56px} .t2-hx .t2-hx-pri b{font-size:16px} .t2-hx-cta{gap:10px} .t2-hx-pontos{margin-top:16px} .t2-hx-pontos li{font-size:.92rem} } /* ---- Card "Jogadores online" da sidebar quando o numero nao aparece ---- */ .t2-w-ok{font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.25rem; line-height:1.3; color:var(--gold-light); margin:4px 0 2px} /* ---- Barra fixa do celular ---- */ .t2-barra{position:fixed; left:0; right:0; bottom:0; z-index:150; display:flex; gap:8px; align-items:stretch; padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); background:rgba(5,10,14,.95); backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px); border-top:1px solid rgba(232,184,62,.45); box-shadow:0 -10px 28px rgba(0,0,0,.55)} .t2-barra[hidden]{display:none} .t2-barra a{display:flex; align-items:center; justify-content:center; min-height:50px; border-radius:10px; text-decoration:none; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif} .t2-barra-pri{flex:1 1 auto; flex-direction:column; gap:1px; color:#fff; background:linear-gradient(180deg,#2a7fd0,#124a85); border:1px solid var(--gold); box-shadow:inset 0 1px 0 rgba(255,255,255,.2)} .t2-barra-pri b{font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:16px; letter-spacing:.07em; text-transform:uppercase} .t2-barra-pri i{font-style:normal; font-size:11px; opacity:.85} .t2-barra-sec{flex:0 0 auto; padding:0 16px; font-weight:700; font-size:14px; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line-strong)} /* Com a barra na tela, o fim da pagina ganha a altura dela: nada fica coberto. */ body.t2-barra-on{padding-bottom:calc(74px + env(safe-area-inset-bottom, 0px))} @media (min-width:761px){ .t2-barra{display:none !important} body.t2-barra-on{padding-bottom:0} } /* ============================================================ CADASTRO (#createaccount, account.create.html.twig) O formulario do core e uma pilha de tabelas do tibia.com, com rotulo a esquerda e campos de 30 caracteres. Aqui ele vira UMA coluna, em qualquer largura: rotulo em cima, campo da largura do formulario, opcoes como pastilhas e um botao de enviar grande. As linhas que os plugins injetam por gancho (codigo de apoio, Turnstile) sao e continuam funcionando - por isso a marcacao de tabela ficou e o CSS e que a desmonta. ============================================================ */ /* Na pagina de cadastro a sidebar sai: e o passo em que cada link a mais e uma saida. O card fica sozinho, no centro. */ .t2-grid:has(#createaccount){grid-template-columns:minmax(0,1fr); max-width:640px; margin-left:auto; margin-right:auto} .t2-grid:has(#createaccount) .t2-side{display:none} .t2-card-body #createaccount table, .t2-card-body #createaccount tbody, .t2-card-body #createaccount tr, .t2-card-body #createaccount td{display:block; width:auto !important; max-width:100%; border:0 !important; background:transparent !important; box-shadow:none !important; padding-left:0; padding-right:0} .t2-card-body #createaccount tr.t2-ca-confirm[style*="none"]{display:none} #createaccount .CaptionContainer, #createaccount .TableShadowContainerRightTop, #createaccount .TableShadowContainer{display:none} #createaccount .TableContainer, #createaccount .TableContentAndRightShadow, #createaccount .TableContentContainer, #createaccount .InnerTableContainer{background:none !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; width:auto !important} .t2-card-body #createaccount td.LabelV{padding:14px 0 5px; font-weight:600; font-size:.95rem} .t2-card-body #createaccount td:empty{display:none} .t2-card-body #createaccount input[type=text], .t2-card-body #createaccount input[type=password], .t2-card-body #createaccount input#character_name, .t2-card-body #createaccount select{ width:100% !important; max-width:100%; min-height:48px; padding:10px 13px; font-size:16px; border-radius:9px; box-sizing:border-box} .t2-card-body #createaccount input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(39,167,255,.2)} #createaccount td > div[style*="flex"]{flex-wrap:wrap} #createaccount td > div[style*="flex"] > span:first-child{flex:1 1 100% !important; white-space:normal !important; display:flex; align-items:center; gap:8px} #createaccount .FormFieldError{display:block; font-size:.86rem} #createaccount .FormFieldError:empty{display:none} /* Linha que so carrega um aviso de erro ainda vazio: nao ocupa espaco ate o aviso existir. */ #createaccount tr:has(.FormFieldError:empty):not(:has(input, select, label, .t2-pw-dica)){display:none} /* O nome do personagem nao tem type="text" na marcacao, entao escapava do estilo de campo do tema (ficava branco). */ .t2-card-body #createaccount input#character_name{color:var(--text); background:var(--surface-3); border:1px solid var(--line-strong)} /* Codigo de apoio: opcional, recolhido (ver hooks/create_field.php do plugin de indicacao). */ #createaccount .t2-ca-apoio td{padding-top:12px} #createaccount .t2-ca-apoio summary{display:inline-flex; align-items:center; min-height:40px; cursor:pointer; list-style:none; font-size:.9rem; font-weight:600; color:var(--brand-bright); text-decoration:underline} #createaccount .t2-ca-apoio summary::-webkit-details-marker{display:none} #createaccount .t2-ca-apoio details[open] summary{margin-bottom:6px} #createaccount .t2-ca-apoio-dica{display:block; margin-top:6px; font-size:.8rem; opacity:.8} #createaccount .t2-pw-dica{display:block; margin-top:6px; font-size:.8rem; opacity:.8} /* Senha + "Mostrar" na mesma linha */ #createaccount td:has(> #password){display:flex !important; align-items:center; gap:8px} #createaccount td:has(> #password) #password{flex:1 1 auto; min-width:0} #createaccount .t2-ca-olho{flex:0 0 auto; min-height:48px; padding:0 14px; border-radius:9px; cursor:pointer; font:600 13.5px "Inter","Inter-fb",system-ui,sans-serif; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line-strong)} #createaccount .t2-ca-olho:hover{border-color:var(--brand); color:#fff} #createaccount .t2-ca-olho[hidden]{display:none} /* Vocacao e cidade: pastilhas. O radio continua la (teclado e leitor de tela), so nao e desenhado; a pastilha marcada fica dourada. */ #createaccount .OptionContainer{position:relative; display:inline-flex; margin:0 8px 8px 0 !important} #createaccount .OptionContainer input[type=radio]{position:absolute; opacity:0; width:1px; height:1px; margin:0} #createaccount .OptionContainer label{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 16px; border-radius:999px; cursor:pointer; font-weight:600; font-size:.95rem; color:#e6dfca; background:rgba(0,0,0,.28); border:1px solid var(--line-strong); transition:border-color .12s, background .12s, color .12s} #createaccount .OptionContainer label:hover{border-color:var(--gold)} #createaccount .OptionContainer input:checked + label{color:var(--gold-light); border-color:var(--gold); background:rgba(232,184,62,.15); box-shadow:0 0 0 1px rgba(232,184,62,.35)} #createaccount .OptionContainer input:focus-visible + label{outline:2px solid var(--brand); outline-offset:2px} #createaccount .t2-town-grid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px; margin-top:2px} #createaccount .t2-town-grid .OptionContainer{margin:0 !important} #createaccount .t2-town-grid .OptionContainer label{width:100%; white-space:nowrap} /* (A lista de cidades ja foi um
recolhido; voltou a ficar aberta a pedido do dono - o estilo do saiu junto.) */ /* Regras + enviar */ #createaccount input[type=checkbox]{width:20px; height:20px; vertical-align:-4px; margin-right:6px} #createaccount .SubmitButtonRow table{width:100% !important} #createaccount .t2-ca-enviar{display:block; width:100%; min-height:58px; margin-top:6px; padding:12px 20px; border-radius:11px; cursor:pointer; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:1.08rem; letter-spacing:.06em; text-transform:uppercase; color:#1b1405; background:linear-gradient(180deg,var(--gold-light),var(--gold)); border:1px solid var(--gold-deep); box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); transition:filter .15s} #createaccount .t2-ca-enviar:hover{filter:brightness(1.07)} #createaccount .t2-ca-enviar:focus-visible{outline:2px solid var(--brand); outline-offset:3px} .t2-ca-jatem{margin:16px 0 0; text-align:center; font-size:.92rem; color:var(--muted)} /* ============================================================ PILARES ABERTOS (10/10/2026) - sobrepoe o modelo "borrado com cadeado" acima. No card: titulo, frase do pilar e o NOME de cada feature, tudo legivel. O texto longo de cada feature fica so no que o clique abre (la o corpo e um clone fora de .t2-dif-eixo, entao estas regras nao o alcancam). As regras antigas ficaram no arquivo de proposito: voltar ao modelo fechado e apagar este bloco e devolver o cadeado ao _eixos.inc.php. ============================================================ */ /* Sem teto de altura: o card tem o tamanho do proprio conteudo, e os quatro ficam iguais porque a grade estica a linha. */ .t2-dif-hero .t2-dif-eixo{max-height:none; display:flex; flex-direction:column; padding-bottom:74px} .t2-dif-hero .t2-dif-eixo:not(.t2-eixo-aberto) .t2-eixo-corpo{filter:none; opacity:1; user-select:auto} .t2-dif-hero .t2-dif-eixo .t2-eixo-corpo{flex:1 1 auto} /* Com o card em coluna flex o medalhao (um ) colava na esquerda; volta ao centro. */ .t2-dif-hero .t2-dif-eixo > .t2-eixo-medalha{align-self:center} .t2-dif-hero .t2-dif-eixo .t2-eixo-corpo > .t2-dif-d{margin:0 0 14px; font-size:.93rem; line-height:1.55; color:#cfc7b1; text-wrap:pretty} /* Uma linha por feature: losango + nome. A descricao fica para o dialogo. */ .t2-dif-hero .t2-dif-eixo .t2-dif-f{position:relative; margin:9px 0 0; padding:0 0 0 20px; border-top:0} .t2-dif-hero .t2-dif-eixo .t2-dif-f::before{content:""; position:absolute; left:3px; top:.5em; width:7px; height:7px; border-radius:2px; transform:rotate(45deg); background:linear-gradient(var(--gold-light),#d09b28); box-shadow:0 0 7px rgba(230,185,63,.4)} .t2-dif-hero .t2-dif-eixo .t2-dif-f strong{margin:0; font-size:.98rem; line-height:1.4; color:#f6ecc9} .t2-dif-hero .t2-dif-eixo .t2-dif-f p{display:none} /* A capa: transparente, com o botao na base. */ .t2-dif-hero .t2-eixo-capa{background:none; justify-content:flex-end; padding:0 16px 20px} .t2-dif-hero .t2-eixo-cta{display:inline-flex; align-items:center; justify-content:center; min-height:42px; padding:8px 18px; border-radius:9px; font-size:.86rem; font-weight:600; letter-spacing:.02em; text-transform:none; color:var(--brand-bright); background:rgba(39,167,255,.08); border:1px solid rgba(39,167,255,.42); transition:background .2s ease, color .2s ease, border-color .2s ease} .t2-dif-hero .t2-dif-eixo:hover .t2-eixo-cta{color:#fff; background:rgba(39,167,255,.2); border-color:var(--brand-bright)} @media (max-width:640px){ .t2-dif-hero .t2-dif-eixo{padding-bottom:78px} .t2-dif-hero .t2-eixo-cta{min-height:46px; width:100%} } /* ============================================================ LOGIN (#t2login, account.login.html.twig) - uma coluna, como o cadastro. Os campos continuam numa (os plugins injetam pelos ganchos, ex.: o Turnstile); este bloco a desmonta. Sem a sidebar: quem chegou aqui veio entrar ou criar conta, e cada link a mais e uma saida. ============================================================ */ .t2-grid:has(#t2login){grid-template-columns:minmax(0,1fr); max-width:520px; margin-left:auto; margin-right:auto} .t2-grid:has(#t2login) .t2-side{display:none} .t2-card-body #t2login table, .t2-card-body #t2login tbody, .t2-card-body #t2login tr, .t2-card-body #t2login td{ display:block; width:auto !important; max-width:100%; border:0 !important; background:transparent !important; box-shadow:none !important; padding-left:0; padding-right:0} .t2-card-body #t2login td.LabelV{padding:12px 0 5px; font-weight:600; font-size:.95rem} .t2-card-body #t2login td.LabelV:empty{display:none} .t2-card-body #t2login input[type=text], .t2-card-body #t2login input[type=password]{ width:100% !important; max-width:100%; min-height:48px; padding:10px 13px; font-size:16px; border-radius:9px; box-sizing:border-box} .t2-card-body #t2login input:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(39,167,255,.2)} #t2login .t2-lg-lembrar td{padding-top:12px} #t2login input[type=checkbox]{width:20px; height:20px; vertical-align:-4px; margin-right:6px} #t2login .t2-lg-entrar{display:block; width:100%; min-height:56px; margin-top:16px; padding:12px 20px; border-radius:11px; cursor:pointer; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:1.08rem; letter-spacing:.07em; text-transform:uppercase; color:#1b1405; background:linear-gradient(180deg,var(--gold-light),var(--gold)); border:1px solid var(--gold-deep); box-shadow:0 8px 22px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.35); transition:filter .15s} #t2login .t2-lg-entrar:hover{filter:brightness(1.07)} #t2login .t2-lg-entrar:focus-visible, #t2login .t2-lg-criar:focus-visible{outline:2px solid var(--brand); outline-offset:3px} #t2login .t2-lg-esqueci{margin:12px 0 0; text-align:center; font-size:.92rem} #t2login .t2-lg-esqueci a{display:inline-block; padding:8px 10px; color:var(--brand-bright)} #t2login .oauth-buttons{clear:both} #t2login .t2-lg-novo{margin-top:22px; padding-top:18px; border-top:1px solid var(--line-strong); text-align:center} #t2login .t2-lg-novo p{margin:0 0 12px; font-size:.95rem; color:#cfc7b1} #t2login .t2-lg-novo b{color:var(--gold-light)} #t2login .t2-lg-criar{display:flex; align-items:center; justify-content:center; min-height:50px; padding:10px 20px; border-radius:10px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:.98rem; color:var(--text); background:rgba(255,255,255,.05); border:1px solid rgba(214,199,125,.45); transition:border-color .15s, background .15s, color .15s} #t2login .t2-lg-criar:hover{border-color:var(--brand-bright); background:rgba(39,167,255,.14); color:#fff} /* (Aqui havia um remendo de altura para os botoes do tibia.com no celular. Saiu com eles: ver BOTOES DO CORE, la em cima.) */ /* ---- O catalogo dentro da HOME (.t2-fx-home): no lugar dos quatro pilares ---- */ .t2-homefeats-cat{padding:10px 0 0} .t2-fx-home{padding-top:8px; padding-bottom:26px} .t2-fx-home .t2-fx-hero .t2-fx-tit{font-size:clamp(26px,4.4vw,38px)} /* Do corte em diante os cards ficam recolhidos ate o grupo abrir - menos quando a busca esta filtrando, que ai vale o resultado inteiro. */ .t2-fx-home:not(.t2-fx-filtrando) .t2-fx-grupo:not(.aberto) .t2-fx-extra{display:none} @media (max-width:640px){ .t2-fx-home:not(.t2-fx-filtrando) .t2-fx-grupo:not(.aberto) .t2-fx-extra-m{display:none} } .t2-fx-mais{display:flex; align-items:center; justify-content:center; width:100%; max-width:420px; min-height:48px; margin:16px auto 0; padding:10px 20px; border-radius:10px; cursor:pointer; font:inherit; font-weight:700; font-size:.95rem; color:var(--gold-light); background:rgba(232,184,62,.08); border:1px solid rgba(232,184,62,.45); transition:background .15s, color .15s, border-color .15s} .t2-fx-mais:hover{background:var(--gold); color:#1b1405; border-color:var(--gold)} .t2-fx-filtrando .t2-fx-mais{display:none} /* Caixa de erro (templates/tibia2/error_box.html.twig) */ .t2-card-body .SmallBox .ErrorMessage .t2-err-lista{margin:6px 0 0; padding-left:20px} .t2-card-body .SmallBox .ErrorMessage .t2-err-lista li{margin:2px 0} /* ===== Header no tablet (761 a 1125px) =================================== Medido a 768px: a barra precisava de 941px - marca 268 + busca + idioma 104 + status e Discord 199 + painel de conta 242 + hamburguer - e a PAGINA INTEIRA rolava de lado, com o botao de entrar cortado e o hamburguer fora da tela. Com a conta logada o painel tem 355px e o estouro ia ate 1123px. Idioma e Discord saem da barra e reaparecem dentro do menu, no .t2-nav-extra que ja existia para o celular. O status (onde aparece o numero de jogadores online) fica enquanto cabe: a partir de 901px. O margin-left:auto passa para o bloco do status: quem empurrava o grupo da direita era o seletor de idioma, que aqui esta escondido. Mesmo vazio (abaixo de 901px) o bloco continua na barra - o losango da emenda e um ::after dele. A tabela dos pontos de corte esta no comentario do hamburguer, la em cima. */ @media (min-width:761px) and (max-width:1125px){ .t2-lang:not(.t2-lang-menu), .t2-btn-discord-head{display:none} .t2-headmeta{margin-left:auto} .t2-nav-extra{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; padding-top:10px; border-top:1px solid var(--line)} .t2-lang-menu{margin-left:0; height:auto; padding:2px} .t2-lang-menu a{padding:10px 14px; font-size:13px} .t2-nav-extra > .t2-navtop{width:auto; flex:0 0 auto} } @media (min-width:761px) and (max-width:900px){ .t2-status-head{display:none} } /* ===== CONTA LOGADA NO CELULAR (ate 520px) =============================== Logado, o painel troca "Entrar" por "Minha conta" + "Sair" e a barra passa a precisar de 490px (497 em ingles): num celular de 360px a pagina inteira rolava 145px de lado, em TODA pagina, para quem estava com a conta aberta. O botao fica com o rotulo curto ("Conta") e o Sair sai da barra e reaparece no fim do menu, ao lado do idioma e do Discord. Acima de 520px os dois voltam como eram. */ .t2-rot-curto, .t2-nav-sair{display:none} @media (max-width:520px){ .t2-auth .t2-rot-longo{display:none} .t2-auth .t2-rot-curto{display:inline} .t2-auth .t2-btn-sair{display:none} .t2-nav-extra > .t2-nav-sair{display:inline-flex} } /* Celulares estreitos. A barra do celular precisa de 352px (366 com a conta logada em ingles): em 360px passava raspando e em 320px estourava 32px. Ate 380px a marca e os respiros encolhem um pouco; ate 340px fica so o escudo. */ @media (max-width:380px){ .t2-brand{padding:0 8px} .t2-brand-txt b{font-size:17px; letter-spacing:.07em} .t2-bar{gap:6px} .t2-auth{padding:0 8px} .t2-btn-cta{padding:0 11px} } @media (max-width:340px){ .t2-brand-txt{display:none} } /* ============================================================ PAGINAS DO CORE REFEITAS NO TEMA (10/10/2026) Busca de personagem, guilds, equipe e ultimas mortes tinham o HTML do tibia.com (tabelas com largura fixa) e texto em ingles. Os templates novos estao em templates/tibia2/*.twig; aqui fica o desenho. ============================================================ */ /* Rede de seguranca para o que ainda e tabela do core: no celular a moldura ROLA em vez de cortar. O .TableContainer tem overflow:hidden (por causa do raio da borda) e o overflow-x:auto do .t2-card-body nao alcancava o que ficava preso dentro dele - a coluna da direita sumia sem como chegar nela. */ @media (max-width:640px){ .t2-card-body .TableContainer{overflow-x:auto; -webkit-overflow-scrolling:touch} } /* ---- Busca de personagem ---- */ .t2-busca-char{max-width:560px; margin:14px 0 6px} .t2-busca-char label{display:block; margin:0 0 7px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; font-size:.95rem; color:var(--text)} .t2-busca-linha{display:flex; gap:10px} .t2-card-body .t2-busca-linha input{flex:1 1 auto; min-width:0; width:auto !important; min-height:48px; padding:10px 14px; box-sizing:border-box; font-size:16px; border-radius:10px; color:var(--text); background:var(--surface-3); border:1px solid var(--line-strong)} .t2-card-body .t2-busca-linha input::placeholder{color:var(--muted-2)} .t2-busca-btn, .t2-card-body .t2-gl-btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 24px; border-radius:10px; cursor:pointer; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:.98rem; letter-spacing:.07em; text-transform:uppercase; color:#1b1405; background:linear-gradient(180deg,var(--gold-light),var(--gold)); border:1px solid var(--gold-deep); box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.35); transition:filter .15s} .t2-busca-btn:hover, .t2-card-body .t2-gl-btn:hover{filter:brightness(1.07); color:#1b1405} .t2-busca-btn:focus-visible, .t2-gl-btn:focus-visible, .t2-gl-ver:focus-visible{outline:2px solid var(--brand); outline-offset:3px} .t2-core-intro{margin:0 0 4px; color:#cfc7b1} @media (max-width:520px){ .t2-busca-linha{flex-direction:column} .t2-busca-btn{width:100%} } /* ---- Guilds ---- */ .t2-gl-lista{list-style:none; margin:0; padding:0; display:grid; gap:10px} .t2-gl-item{display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line-strong)} .t2-gl-logo{flex:0 0 auto; width:56px; height:56px; object-fit:contain} .t2-gl-txt{flex:1 1 auto; min-width:0} .t2-card-body .t2-gl-nome{display:block; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.12rem; color:var(--gold-light); overflow-wrap:anywhere} .t2-card-body .t2-gl-nome:hover{color:#fff} .t2-gl-desc{margin:3px 0 0; font-size:.95rem; line-height:1.45; color:#cfc7b1; overflow-wrap:break-word} .t2-gl-admin{display:inline-block; margin-top:4px; font-size:.82rem; color:#ffb9b9} .t2-card-body .t2-gl-ver{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:72px; min-height:42px; padding:8px 16px; border-radius:9px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:.95rem; color:var(--text); background:rgba(255,255,255,.05); border:1px solid rgba(214,199,125,.45); transition:border-color .15s, background .15s, color .15s} .t2-card-body .t2-gl-ver:hover{border-color:var(--brand-bright); background:rgba(39,167,255,.14); color:#fff} .t2-gl-vazio, .t2-time-vazio, .t2-lk-vazio{margin:8px 0; padding:18px; text-align:center; border-radius:12px; color:var(--muted); background:rgba(255,255,255,.025); border:1px dashed var(--line-strong)} .t2-gl-criar{margin-top:20px; padding-top:18px; border-top:1px solid var(--line-strong); text-align:center} .t2-gl-criar p{margin:0 0 12px; color:#cfc7b1} .t2-gl-criar form{margin:0} .t2-gl-ajuda{margin:18px 0 0 !important; font-size:.9rem; line-height:1.6; text-align:left; color:var(--muted) !important} @media (max-width:520px){ .t2-gl-item{gap:12px; padding:10px 12px} .t2-gl-logo{width:44px; height:44px} .t2-card-body .t2-gl-ver{min-width:58px; padding:8px 13px} } /* ---- Equipe ---- */ .t2-time-grupo{margin:18px 0 10px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.15rem; color:var(--gold)} .t2-time-grupo:first-child{margin-top:4px} .t2-time-lista{list-style:none; margin:0; padding:0; display:grid; gap:8px} .t2-time-lista li{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; min-height:56px; padding:8px 14px; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid var(--line-strong)} /* O gerador entrega 64x64 com o boneco encostado embaixo e a direita. */ .t2-time-outfit{position:relative; flex:0 0 44px; width:44px; height:44px} .t2-time-outfit img{position:absolute; right:0; bottom:0; max-width:none} .t2-time-nome{flex:1 1 140px; min-width:0; font-weight:600; font-size:1.05rem; overflow-wrap:anywhere} .t2-time-st{flex:0 0 auto; padding:3px 11px; border-radius:999px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em} .t2-time-st.on{color:#8fe3a1; background:rgba(60,190,100,.14); border:1px solid rgba(60,190,100,.4)} .t2-time-st.off{color:var(--muted); background:rgba(255,255,255,.04); border:1px solid var(--line-strong)} .t2-time-mundo{flex:0 0 auto; font-size:.9rem; color:#cfc7b1} .t2-time-ult{flex:0 1 auto; font-size:.88rem; color:var(--muted)} .t2-time-ult i{font-style:normal; color:var(--muted-2)} @media (max-width:520px){ .t2-time-lista li{gap:4px 12px; padding:8px 12px} .t2-time-nome{flex:1 1 80px} .t2-time-ult{flex:1 1 100%; padding-left:56px} } /* ---- Ultimas mortes ---- */ .t2-lk{list-style:none; margin:0; padding:0} .t2-lk li{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:2px 12px; padding:10px 6px; border-bottom:1px solid rgba(70,160,215,.12)} .t2-lk li:last-child{border-bottom:0} .t2-lk-n{min-width:26px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.85rem; color:var(--muted-2); text-align:right} .t2-lk-txt{font-size:1rem; line-height:1.45; overflow-wrap:break-word} .t2-lk-data{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.82rem; color:var(--muted); white-space:nowrap} @media (max-width:640px){ .t2-lk li{grid-template-columns:auto minmax(0,1fr)} .t2-lk-data{grid-column:2} } /* ---- Recuperar conta (sem e-mail configurado) ---- */ .t2-lo{max-width:620px; margin:6px auto 4px; text-align:center} .t2-lo h2{margin:0 0 12px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.3rem; line-height:1.25; color:var(--gold-light)} .t2-lo p{margin:0 0 12px; line-height:1.55; color:#d9d2bd} .t2-lo .t2-lo-aviso{padding:11px 14px; border-radius:10px; font-size:.95rem; color:#ffd9a8; background:rgba(232,184,62,.09); border:1px solid rgba(232,184,62,.35)} .t2-lo .t2-lo-social{font-size:.93rem; color:var(--muted)} .t2-lo-acoes{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:18px 0 14px} .t2-card-body .t2-lo-discord{display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:50px; padding:10px 22px; border-radius:10px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:1rem; color:#fff; background:#5865F2; border:1px solid #4752c4} .t2-card-body .t2-lo-discord:hover{background:#4752c4; color:#fff} .t2-lo-discord svg{width:22px; height:22px; flex:0 0 auto} .t2-card-body .t2-lo-voltar{display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:10px 22px; border-radius:10px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:700; font-size:1rem; color:var(--text); background:rgba(255,255,255,.05); border:1px solid rgba(214,199,125,.45)} .t2-card-body .t2-lo-voltar:hover{border-color:var(--brand-bright); background:rgba(39,167,255,.14); color:#fff} @media (max-width:520px){ .t2-lo-acoes > a{flex:1 1 100%} } .t2-nf-num{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:4.2rem; line-height:1; color:var(--gold); opacity:.35} /* ---- Casas: filtros, lista e ficha ---- */ .t2-ho-form{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) auto; gap:12px; align-items:end; margin:16px 0 8px} .t2-ho-form label{display:block; min-width:0} /* Com mais de um mundo ha um quinto filtro: ele ocupa a linha de cima inteira. */ .t2-ho-form .t2-ho-mundo{grid-column:1 / -1; max-width:320px} .t2-ho-form label > span{display:block; margin:0 0 6px; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; font-size:.88rem; color:var(--muted)} .t2-card-body .t2-ho-form select{width:100%; min-height:48px; padding:10px 12px; font-size:16px; border-radius:10px; box-sizing:border-box; color:var(--text); background-color:var(--surface-3); border:1px solid var(--line-strong)} .t2-ho-tit{margin:22px 0 10px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.2rem; color:var(--gold)} .t2-ho-tit small{margin-left:6px; padding:2px 9px; border-radius:999px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600; font-size:.8rem; color:var(--muted); background:rgba(255,255,255,.05); border:1px solid var(--line-strong)} .t2-ho-lista{list-style:none; margin:0; padding:0; display:grid; gap:8px} .t2-ho-lista li{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1.2fr) minmax(0,2fr) auto; align-items:center; gap:6px 14px; padding:10px 14px; border-radius:11px; background:rgba(255,255,255,.025); border:1px solid var(--line-strong)} .t2-card-body .t2-ho-nome{font-weight:600; font-size:1.02rem; color:var(--gold-light); overflow-wrap:anywhere} .t2-card-body .t2-ho-nome:hover{color:#fff} .t2-ho-meta{font-size:.95rem; color:#d9d2bd; white-space:nowrap} .t2-ho-meta i{display:block; font-style:normal; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2)} .t2-ho-st{font-size:.95rem; color:#cfc7b1; overflow-wrap:anywhere} .t2-ho-st.livre{justify-self:start; padding:3px 11px; border-radius:999px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:700; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:#8fe3a1; background:rgba(60,190,100,.14); border:1px solid rgba(60,190,100,.4)} .t2-ho-casa{display:flex; gap:18px; align-items:flex-start; margin:4px 0 22px; padding:14px; border-radius:12px; background:rgba(255,255,255,.025); border:1px solid var(--line-strong)} .t2-ho-casa > img{flex:0 0 auto; max-width:min(42%,260px); height:auto; border-radius:8px} .t2-ho-ficha{flex:1 1 auto; min-width:0} .t2-ho-ficha h2{margin:0 0 10px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.3rem; color:var(--gold-light)} .t2-ho-ficha dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:0} .t2-ho-ficha dt{font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.9rem; color:var(--muted)} .t2-ho-ficha dd{margin:0; overflow-wrap:anywhere} @media (max-width:900px){ .t2-ho-form{grid-template-columns:repeat(2,minmax(0,1fr))} .t2-ho-form .t2-busca-btn{grid-column:1 / -1} .t2-ho-lista li{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto} .t2-ho-lista .t2-ho-nome{grid-column:1 / 3} .t2-ho-lista .t2-gl-ver{grid-column:3; grid-row:1} .t2-ho-lista .t2-ho-st{grid-column:1 / -1} } @media (max-width:520px){ .t2-ho-casa{flex-direction:column} .t2-ho-casa > img{max-width:100%} } /* ============================================================ PAINEL "MINHA CONTA" (account.management.html.twig) ============================================================ */ .t2-acc-topo{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin:0 0 16px} .t2-acc-ola{min-width:0} .t2-acc-ola h2{margin:0; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.35rem; line-height:1.25; color:var(--gold-light)} .t2-acc-ola p{margin:3px 0 0; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.92rem; color:var(--muted); overflow-wrap:anywhere} .t2-acc-topo form{margin:0} .t2-card-body .t2-acc-jogar{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 18px; margin:0 0 16px; padding:14px 16px; border-radius:12px; background:linear-gradient(135deg,rgba(232,184,62,.14),rgba(22,119,200,.10)); border:1px solid rgba(232,184,62,.4); color:var(--text)} .t2-acc-jogar span{flex:1 1 220px; min-width:0} .t2-acc-jogar b{display:block; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.1rem; color:var(--gold-light)} .t2-acc-jogar i{display:block; margin-top:2px; font-style:normal; font-size:.95rem; line-height:1.4; color:#d9d2bd} .t2-acc-jogar em{flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:9px 20px; border-radius:10px; font-style:normal; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; color:#1b1405; background:linear-gradient(180deg,var(--gold-light),var(--gold)); border:1px solid var(--gold-deep)} .t2-card-body .t2-acc-jogar:hover em{filter:brightness(1.07)} .t2-acc-aviso{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 16px; padding:13px 16px; border-radius:12px; background:rgba(39,167,255,.07); border:1px solid rgba(39,167,255,.3)} .t2-acc-aviso p{flex:1 1 240px; min-width:0; margin:0; font-size:.97rem; line-height:1.5; color:#d9d2bd} .t2-acc-aviso form{margin:0} .t2-acc-sec{margin:0 0 18px; padding:16px; border-radius:12px; background:rgba(0,0,0,.18); border:1px solid var(--line-strong)} .t2-acc-sec > h2{margin:0 0 12px; font-family:"Cinzel","Cinzel-fb",serif; font-weight:700; font-size:1.12rem; color:var(--brand-bright)} .t2-acc-dl{display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr); gap:0; margin:0} .t2-acc-dl dt, .t2-acc-dl dd{margin:0; padding:9px 4px; border-top:1px solid rgba(70,160,215,.10)} .t2-acc-dl dt:first-of-type, .t2-acc-dl dt:first-of-type + dd{border-top:0} .t2-acc-dl dt{padding-right:16px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600; font-size:.9rem; color:var(--muted)} .t2-acc-dl dd{overflow-wrap:anywhere} .t2-acc-acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px} .t2-acc-acoes form{margin:0} .t2-acc-acoes .t2-acc-fim{margin-left:auto} .t2-acc-chars{list-style:none; margin:0; padding:0} .t2-acc-chars li{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; padding:10px 4px; border-top:1px solid rgba(70,160,215,.10)} .t2-acc-chars li:first-child{border-top:0} .t2-acc-ch-n{flex:0 0 auto; min-width:22px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.85rem; color:var(--muted-2)} .t2-acc-ch-nome{flex:1 1 150px; min-width:0; font-weight:600; font-size:1.03rem; overflow-wrap:anywhere} .t2-acc-ch-nome small{display:block; margin-top:1px; font-weight:400; font-size:.88rem; color:var(--muted)} .t2-acc-ch-del{margin-left:4px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-size:.74rem; letter-spacing:.05em; color:#ff9c9c} .t2-card-body .t2-acc-ch-edit{flex:0 0 auto; padding:6px 12px; border-radius:8px; font-family:"Inter","Inter-fb",system-ui,sans-serif; font-weight:600; font-size:.86rem; color:var(--text); background:rgba(255,255,255,.05); border:1px solid var(--line-strong)} .t2-card-body .t2-acc-ch-edit:hover{border-color:var(--brand-bright); color:#fff} @media (max-width:520px){ .t2-acc-sec{padding:14px 12px} .t2-acc-dl{grid-template-columns:minmax(0,1fr)} .t2-acc-dl dt{padding:9px 4px 0; border-top:1px solid rgba(70,160,215,.10)} .t2-acc-dl dd{padding:2px 4px 9px; border-top:0} .t2-acc-dl dt:first-of-type{border-top:0; padding-top:2px} .t2-acc-acoes form, .t2-acc-aviso form{flex:1 1 100%} .t2-acc-acoes .BigButton, .t2-acc-aviso .BigButton{display:block} .t2-card-body .t2-acc-acoes .BigButtonText, .t2-card-body .t2-acc-aviso .BigButtonText{display:block; width:100% !important} .t2-acc-acoes .t2-acc-fim{margin-left:0} .t2-acc-jogar em{flex:1 1 100%} /* Caixas dos plugins (Programa de Apoio etc.) ainda sao tabela de rotulo|valor: no celular o valor ficava com uma palavra por linha. Empilha. */ .t2-acc .TableContent > tbody > tr{display:block} .t2-acc .TableContent > tbody > tr > td{display:block; width:auto !important} .t2-acc .TableContent > tbody > tr > td.LabelV{padding-bottom:0} } /* ---- Criar personagem (account.characters.create.html.twig) ---- */ .t2-cc{max-width:640px} .t2-cc-max{margin:0 0 14px; padding:11px 14px; border-radius:10px; color:#ffb9b9; background:rgba(245,94,94,.10); border:1px solid rgba(245,94,94,.5)} .t2-cc-campo{margin:16px 0 0} .t2-cc-campo > label, .t2-cc-grupo > legend{display:block; margin:0 0 7px; padding:0; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; font-size:.95rem; color:var(--text)} .t2-cc-nome{display:flex; align-items:center; gap:10px} .t2-card-body .t2-cc-nome input{flex:1 1 auto; min-width:0; width:auto !important; min-height:48px; padding:10px 14px; box-sizing:border-box; font-size:16px; border-radius:10px; color:var(--text); background:var(--surface-3); border:1px solid var(--line-strong)} .t2-cc-campo .FormFieldError{display:block; min-height:1.3em; margin-top:6px; font-size:.9rem; line-height:1.4; text-align:left} .t2-cc-grupo{margin:18px 0 0; padding:0; border:0; min-width:0} .t2-cc-opcoes{display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); gap:8px} .t2-cc-opcoes .OptionContainer{position:relative; display:block; margin:0} .t2-cc-opcoes input[type=radio]{position:absolute; opacity:0; width:0; height:0} .t2-cc-opcoes label{display:flex; align-items:center; justify-content:center; min-height:46px; padding:8px 10px; border-radius:10px; cursor:pointer; text-align:center; font-size:.98rem; color:var(--text); background:rgba(255,255,255,.03); border:1px solid var(--line-strong); transition:border-color .15s, background .15s} .t2-cc-opcoes label:hover{border-color:rgba(232,184,62,.55)} .t2-cc-opcoes input[type=radio]:checked + label{color:var(--gold-light); font-weight:600; border-color:var(--gold); background:rgba(232,184,62,.11); box-shadow:0 0 0 1px var(--gold) inset} .t2-cc-opcoes input[type=radio]:focus-visible + label{outline:2px solid var(--brand); outline-offset:2px} .t2-cc-acoes{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px} @media (max-width:520px){ .t2-cc-opcoes{grid-template-columns:repeat(2,minmax(0,1fr))} .t2-cc-acoes > *{flex:1 1 100%} } /* ============================================================ TELAS DE CONTA: formularios (.t2-fm) e caixa de resultado (.t2-ok) Trocar senha, trocar e-mail, login em 2 etapas, excluir e editar personagem, informacoes publicas. Uma coluna, campo de 48px, botao principal dourado - o mesmo desenho do login e do cadastro. ============================================================ */ .t2-fm{max-width:560px} .t2-fm form{margin:0} /* Onde o core tem ganchos que injetam , os campos continuam numa tabela. */ .t2-card-body .t2-fm table.t2-fm-campos, .t2-card-body .t2-fm table.t2-fm-campos > tbody, .t2-card-body .t2-fm table.t2-fm-campos > tbody > tr, .t2-card-body .t2-fm table.t2-fm-campos > tbody > tr > td{ display:block; width:auto !important; max-width:100%; border:0 !important; background:transparent !important; box-shadow:none !important; padding:0} .t2-card-body .t2-fm table.t2-fm-campos > tbody > tr > td.LabelV{padding:16px 0 7px} .t2-fm-campo{margin:16px 0 0} .t2-fm-campo > label, .t2-fm td.LabelV label, .t2-fm legend{display:block; padding:0; font-family:"Inter","Inter-fb",system-ui,Segoe UI,Arial,sans-serif; font-weight:600; font-size:.95rem; color:var(--text)} .t2-fm-campo > label{margin:0 0 7px} .t2-card-body .t2-fm input[type=text], .t2-card-body .t2-fm input[type=password], .t2-card-body .t2-fm input[type=email], .t2-card-body .t2-fm input:not([type]), .t2-card-body .t2-fm select, .t2-card-body .t2-fm textarea{ width:100% !important; max-width:100%; min-height:48px; padding:10px 14px; box-sizing:border-box; font-size:16px; border-radius:10px; color:var(--text); background-color:var(--surface-3); border:1px solid var(--line-strong)} .t2-card-body .t2-fm textarea{min-height:170px; line-height:1.5; font-family:inherit; resize:vertical} .t2-card-body .t2-fm input:focus, .t2-card-body .t2-fm select:focus, .t2-card-body .t2-fm textarea:focus{outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(39,167,255,.2)} .t2-fm-dica{display:block; margin-top:6px; font-size:.88rem; line-height:1.4; color:var(--muted)} .t2-fm-valor{display:block; padding:11px 14px; border-radius:10px; font-weight:600; background:rgba(255,255,255,.03); border:1px solid var(--line-strong)} .t2-fm-check{display:flex; align-items:flex-start; gap:10px; margin:16px 0 0; cursor:pointer; line-height:1.45} .t2-fm-check input[type=checkbox]{flex:0 0 auto; width:20px; height:20px; margin:2px 0 0} .t2-fm-acoes, .t2-ok-acoes{display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px} .t2-fm-aviso, .t2-fm-perigo{margin:0 0 6px; padding:12px 14px; border-radius:10px; font-size:.95rem; line-height:1.5} .t2-fm-aviso{color:#cfe6ff; background:rgba(39,167,255,.08); border:1px solid rgba(39,167,255,.32)} .t2-fm-perigo{color:#ffc9c9; background:rgba(245,94,94,.09); border:1px solid rgba(245,94,94,.45)} /* Botao de acao que nao tem volta (excluir, desligar): vermelho. */ .t2-card-body .t2-fm-btn-perigo{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:10px 24px; border-radius:10px; cursor:pointer; font-family:"Cinzel","Cinzel-fb",serif; font-weight:800; font-size:.95rem; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:linear-gradient(180deg,#c94343,#8f1f1f); border:1px solid #6e1414; box-shadow:0 6px 18px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.2); transition:filter .15s} .t2-card-body .t2-fm-btn-perigo:hover{filter:brightness(1.1); color:#fff} .t2-card-body .t2-fm-btn-perigo:focus-visible{outline:2px solid var(--brand); outline-offset:3px} /* Botao secundario (mesmo desenho do "Voltar"), para acoes menores em