/* =========================================================================
RoG Tale - Area do Jogador (entrar ou criar conta / recuperar conta)
A tela DEIXOU DE SER UM CARTAO FLUTUANTE. Ela agora e uma pagina do site,
com a mesma casca de /ranking, /guide e /regras: a laje `.content-about`,
o titulo `.about-title`, a coluna de categorias a esquerda e o conteudo a
direita. O HTML usa as classes do PROPRIO site, entao quase tudo aqui e
so o que o site nao tinha: formulario.
02/09/2026 - A TELA ENCOLHEU. O dono: "ficou muita informacao". Sairam a
coluna de apoio da direita (.au-extra, quatro beneficios), a lista de
passos 01/02/03 (.au-steps) e a media de 1240px que existia so para
empilhar as duas colunas. A acao da tela e UM botao; o resto era cerca.
TODO VALOR FOI MEDIDO EM assets/Site/css/style.css
([[identidade-visual-copiar-do-site-nao-inventar]]):
laje da pagina .... rgba(24,20,23,.9) + 1px rgba(36,35,40,.9), SEM raio
(.content .content-about)
titulo ............ #ffb83c 24px / apoio #ab9d85 14px (.about-title)
coluna esquerda ... max 320px, mesma moldura, divisoria #242328 e a
seta dourada #ffb83c no item ativo (.left-side)
moldura do icone .. images/ico-tab.png 40x39 + circulo de 32px
campo ............. h 50, rgba(24,20,23,.87), 1px #3f3733, raio 10,
texto #fff3e2, fonte beaufort (input[type=...])
botao ............. .all-btn / .all-btn.yellow - borda 2px #533f36 /
#ffb83c e o preenchimento subindo de baixo
rotulo de campo ... #ffedbe 14px (mesmo do .cb-f > label do /beta)
POR QUE ESTE ARQUIVO EXISTE e nao entrou no style.css: aquele tem 116 KB,
e servido em TODA pagina e vai com ?version= no - mexer nele obriga
a subir a versao e derrubar o cache do site inteiro por causa de uma tela.
Mesmo motivo de NK/Layout/Site/BetaStyle.php.
E POR QUE ELE E O ULTIMO DO : o painel.css (DashLite, 776 KB)
entra DEPOIS do style.css e traz um reboot de Bootstrap que reescreve
`input`, `button` e `a`. Sem redeclarar aqui, o campo perde a fonte, a
altura e a borda do site.
========================================================================= */
/* =========================================================================
1. A laje
========================================================================= */
/* ATENCAO A ESPECIFICIDADE: as regras do site sao escritas na cadeia inteira
(`.content .content-about .flex-about .left-side` = 4 classes). Um seletor
curto tipo `.au .left-side` perde para elas em silencio - o layout fica
parecido e so uma propriedade nao pega. Aqui a cadeia e repetida com o
`.au` no meio, o que da 5 classes e ganha sem precisar de !important. */
/* O .left-side do site tem margin-bottom:-58px, calibrado para a lista de 8
categorias do /ranking. Aqui a coluna tem 3 itens e o formulario e mais
alto que ela: sem isto a moldura da esquerda esticaria vazia ate embaixo. */
.content .content-about.au .flex-about { align-items: flex-start; }
.content .content-about.au .flex-about .left-side { margin-bottom: 0; }
/* O .ico do site e a moldura ico-tab.png com um circulo de 32px recortado
dentro. Os icones desta tela (assets/Painel/img/auth/) ja trazem a
moldura, entao o fundo sai e a imagem ocupa o slot inteiro. Sao servidos
em 80px e desenhados em 40 - assim nao borram em tela de alta densidade. */
.content .content-about.au .flex-about .left-side ul li a .ico {
width: 40px; height: 40px; background: none; margin-right: 13px;
}
.content .content-about.au .flex-about .left-side ul li a .ico img {
display: block; width: 40px; height: 40px;
}
/* =========================================================================
2. Coluna da esquerda
========================================================================= */
/* o bloco de estado nao pode parecer mais um item da lista: divisoria
propria, do mesmo #242328 que separa os itens */
.au-side { margin-top: 14px; padding: 15px 3px 4px; border-top: 1px solid #242328; }
.au-side .au-live {
display: flex; align-items: center; gap: 9px;
color: #ffefd8; font-size: 14px;
}
.au-side .au-live i {
width: 8px; height: 8px; flex: none; border-radius: 50%; font-style: normal;
background: #c0f162; box-shadow: 0 0 8px rgba(192, 241, 98, .7);
}
.au-side .au-live.off i { background: #5d5459; box-shadow: none; }
.au-side p {
color: #ab9d85; font-size: 12px; margin: 5px 0 0;
font-family: "Gilroy-Regular";
}
.au-side .all-btn { width: 100%; height: 42px; margin-top: 14px; }
/* =========================================================================
3. O conteudo da direita
========================================================================= */
/* O site sublinha TODO dentro da .about-tab, e isso vale para os links
de texto - e a letra do site. So os botoes escapam: `.au-btn` e um
nas telas de erro (link expirado, 404) e sublinhado ele vira link. A
cadeia inteira e necessaria: a regra do site tem 5 classes. */
.content .content-about.au .flex-about .right-side .about-tab a.au-btn,
.content .content-about.au .flex-about .right-side .about-tab a.btn { text-decoration: none; }
/* UMA COLUNA SO. Ate 02/09/2026 a .right-side era um flex com o formulario e
a coluna de apoio lado a lado; a coluna saiu, entao ela volta ao
`display:block; width:100%` do proprio site e so o formulario e limitado.
500px e a medida de leitura confortavel - esticado na laje inteira, um
titulo com um botao embaixo le como pagina de erro. */
.au-tab { max-width: 500px; }
/* o .tab-title do site ja da o titulo (#ffefd8 24px) e o apoio (#ab9d85 12px);
aqui so a medida de linha, porque o texto e mais longo que o do /ranking */
.au-tab .tab-title p { line-height: 18px; max-width: 470px; }
.au-tab .tab-title b { color: #ffedbe; }
/* =========================================================================
4. Campos - a caixa do proprio site, sem icone dentro
========================================================================= */
.au-f { margin-bottom: 16px; }
.au-f > label,
.au-lab > label {
display: block; color: #ffedbe; font-size: 14px; margin-bottom: 8px;
font-family: "beaufort-for-lol-bold";
}
.au-lab {
display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.au-lab a { color: #ffb83c; font-size: 13px; font-family: "Gilroy-Regular"; }
.au-tab input[type="text"],
.au-tab input[type="email"],
.au-tab input[type="password"],
.au-tab input[type="number"] {
display: block; width: 100%; height: 50px; padding: 0 15px;
background: rgba(24, 20, 23, .87); border: 1px solid #3f3733; border-radius: 10px;
color: #fff3e2; font-size: 14px; font-family: "beaufort-for-lol-bold";
transition: border-color .2s ease;
box-shadow: none;
}
.au-tab input:hover { border-color: #533f36; }
.au-tab input:focus { border-color: #ffb83c; outline: 0; }
.au-tab input::placeholder { color: #6d635c; opacity: 1; }
/* o campo de senha divide a caixa com o botao do olho */
.au-pw { position: relative; }
.au-pw input { padding-right: 48px; }
.au-pw .pn-eye {
position: absolute; top: 0; right: 0; width: 46px; height: 50px;
display: flex; align-items: center; justify-content: center;
background: none; border: 0; box-shadow: none;
color: #6d635c; cursor: pointer; padding: 0;
}
.au-pw .pn-eye:hover, .au-pw .pn-eye.on { color: #ffb83c; }
.au-note {
display: block; color: #8d8172; font-size: 12px; margin-top: 7px;
font-family: "Gilroy-Regular";
}
.au-note b { color: #ffb83c; font-family: "Gilroy-Bold"; }
/* duas colunas quando o par de campos e curto (senha / repetir senha) */
.au-2 { display: flex; flex-wrap: wrap; gap: 0 16px; }
.au-2 > .au-f { flex: 1 1 200px; min-width: 0; }
/* =========================================================================
5. Caixa de marcar - a nativa com accent-color, igual a do /beta
========================================================================= */
.au-chk {
display: flex; align-items: center; gap: 10px; cursor: pointer;
color: #ffefd8; font-size: 14px; margin: 0 0 20px;
}
.au-chk input { margin: 0; flex: none; width: 16px; height: 16px; accent-color: #ffb83c; }
/* =========================================================================
6. Botao - o .all-btn do site, so mais alto e ocupando a linha
========================================================================= */
/* LARGURA NATURAL, nao a linha inteira. O .all-btn do site e um botao
compacto (ver os dois do /beta); esticado de ponta a ponta com o
preenchimento so no hover, ele vira uma moldura vazia. */
.au-btn {
height: 46px; min-width: 190px; padding: 0 34px;
font-size: 14px; letter-spacing: .5px; font-family: "Gilroy-Semibold";
}
.au-btn span { line-height: 1; }
/* BOTAO DO DISCORD (01/09/2026).
E o .all-btn.yellow do site com o icone que o dono entregou - o MESMO
arranjo do /beta (.cb-dc). Nao usa o roxo "blurple" da marca do Discord
de proposito: um bloco com a cara de outro produto no meio da tela e
exatamente o que denuncia bloco novo ([[bloco-novo-no-site-nao-pode-ter-cara-de-ia]]).
O .all-btn e um aqui, e o site sublinha todo dentro da .about-tab -
a regra de `text-decoration:none` da secao 3 ja cobre .au-btn. */
.au-dc img {
display: block; width: 22px; height: 22px; margin-right: 10px; flex: 0 0 auto;
}
/* telas herdadas que ainda pedem o botao do painel */
.au-tab .btn-primary,
.au-tab .btn-primary:not(:disabled):not(.disabled) {
display: inline-flex; align-items: center; justify-content: center;
width: max-content; height: 46px; padding: 0 34px; border-radius: 0;
background: none; background-image: none;
border: 2px solid #ffb83c; color: #ffdbcb;
font-family: "Gilroy-Semibold"; font-size: 14px; box-shadow: none;
transition: all .2s ease;
}
.au-tab .btn-primary:hover { background: #ffb83c; color: #000; }
/* =========================================================================
7. Rodape do formulario
========================================================================= */
.au-alt {
margin-top: 18px; padding-top: 16px; border-top: 1px solid #242328;
color: #ab9d85; font-size: 14px; font-family: "Gilroy-Regular";
}
.au-alt a { color: #ffb83c; }
/* o alerta do painel ganha a borda do .cb-alert do /beta */
.au-tab .alert { border-radius: 10px; margin-bottom: 18px; font-size: 14px; }
.au-tab .alert-fill.alert-danger { border: 1px solid #7a3226; }
.au-tab .alert-fill.alert-success { border: 1px solid #4d6b26; }
/* =========================================================================
8. Telas estreitas
========================================================================= */
/* O formulario solta o teto quando a laje aperta. */
@media (max-width: 1240px) {
.au-tab { max-width: 100%; }
}
/* =========================================================================
A COLUNA DA ESQUERDA EM TELA ESTREITA
Abaixo de 1000px o site transforma o .left-side numa GAVETA em tela cheia
(`position:fixed; visibility:hidden`), aberta pelo botao MENU do bloco
.mobile-side que as paginas do site incluem. Aqui sao tres itens - gaveta
e exagero, e sem o .mobile-side no HTML ela ficaria inalcancavel. Entao a
coluna volta a ser um painel comum empilhado, e cada propriedade daquela
regra precisa ser desfeita explicitamente.
========================================================================= */
@media (max-width: 1000px) {
.content .content-about.au .flex-about { flex-wrap: wrap; }
.content .content-about.au .flex-about .left-side {
position: static; display: block;
width: 100%; max-width: 100%; height: auto; top: auto; left: auto;
visibility: visible; opacity: 1; pointer-events: auto;
transform: none; overflow: visible; z-index: auto;
padding: 12px 10px; margin: 0 0 18px;
}
.content .content-about.au .flex-about .left-side ul {
max-width: 100%; margin: 0; padding: 0;
background: none; border: 0;
}
}
@media (max-width: 700px) {
.au-2 > .au-f { flex: 1 1 100%; }
.au-btn { width: 100%; }
}