/* ==========================================================================
L2 Sirius — ajustes sobre o template OASIS
========================================================================== */
:root {
/* Cores originais do OASIS (laranja/amarelo) mantidas de propósito */
--title-font: 'Josefin Sans', sans-serif;
--body-font: 'Work Sans', sans-serif;
}
/* Trava contra rolagem horizontal (evita que uma imagem grande desloque a página
inteira e faça títulos centralizados parecerem deslocados) */
html, body { max-width: 100%; overflow-x: hidden; }
/* O OASIS esconde todo
IRMÃO (sibling) pra desenhar um quadradinho customizado via :before. Nos
formulários legados do site (aceite de regras, "não quero sufixo" etc.) o
checkbox fica DENTRO do label, então a regra do template não encontra o par
e o checkbox some por completo. Restaura a visibilidade nesse caso. */
label input[type="checkbox"] {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 15px !important;
height: 15px !important;
vertical-align: middle;
margin-right: 6px;
cursor: pointer;
}
/* Select de sufixo do cadastro: o nativo do OASIS vem com width:100%
e uma seta em SVG; a regra antiga (.formpadrao .camp select) tenta encolher
pra 210px mas perde a seta pelo caminho — força os dois: tamanho compacto e
seta visível, igual ao resto do formulário. */
.formpadrao .camp select {
width: 210px !important;
height: auto !important;
line-height: normal !important;
padding: 6px 28px 5px 8px !important;
font-size: 14px !important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 8px center !important;
background-size: 12px 9px !important;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Idiomas no topo do header */
.lang-switch { display: inline-flex; gap: 4px; }
.lang-switch a { display: inline-block; padding: 2px 8px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,0.55) !important; border: 1px solid rgba(255,255,255,0.15); border-radius: 4px; transition: all .2s ease; }
.lang-switch a:hover, .lang-switch a.active { color: #fff !important; border-color: var(--theme-color); background: rgba(201,154,74,0.15); }
/* Status do servidor (barra superior) */
.status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #ff3333; box-shadow: 0 0 6px rgba(255,51,51,.8); }
.status-dot.on { background: #00ff66; box-shadow: 0 0 6px rgba(0,255,102,.8); }
.header-online-count { color: #00ff66; font-weight: 600; }
/* Painel de conta (sidemenu) */
.vs-account-widget .widget_title,
.vs-status-widget .widget_title { color: #fff; font-family: 'Rajdhani', sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 16px; border-bottom: 2px solid var(--theme-color); padding-bottom: 8px; }
.vs-auth-form .auth-field { position: relative; margin: 0 0 12px; }
.vs-auth-form .auth-field i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,0.4); font-size: 14px; }
.vs-auth-form .auth-field input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 6px; padding: 12px 14px 12px 38px; color: #fff; font-size: 14px; outline: none; transition: border-color .2s ease; }
.vs-auth-form .auth-field input:focus { border-color: var(--theme-color); }
.vs-auth-form .auth-field input::placeholder { color: rgba(255,255,255,0.35); }
.vs-auth-form .error { margin: 0 0 12px; padding: 8px 12px; background: rgba(198,40,40,.25); border: 1px solid rgba(198,40,40,.6); border-radius: 6px; color: #ffb3b3; font-size: 12px; }
.vs-auth-form .ess a, .vs-auth-form .anpc a { color: var(--theme-color2); font-size: 12px; }
.vs-auth-form .ess, .vs-auth-form .anpc { color: rgba(255,255,255,0.55); font-size: 12px; }
.vs-auth-form .anpc { text-align: center; }
.vs-status-widget .status-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: rgba(255,255,255,0.55); padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.vs-status-widget .status-row:first-child { border-top: 0; }
.vs-status-widget .status-row b { font-weight: 700; }
.vs-status-widget .status-row b.on { color: #00ff66; }
.vs-status-widget .status-row b.off { color: #ff3333; }
.sidemenu-content .logged { color: #fff; font-size: 13px; }
.sidemenu-content .logged span { color: var(--theme-color2); font-weight: 700; }
/* Botão de conta no header */
.header-button .vs-btn i { margin-right: 6px; }
/* Header: substitui o roxo padrão do template por um visual premium
(preto profundo + friso dourado sutil), sempre sólido, sem depender do scroll */
.header-layout3 .header-top { background-color: #0a0a0a !important; border-bottom: 1px solid rgba(255,255,255,.06); }
.header-layout3 .header-menu-area { background: linear-gradient(180deg, #131313 0%, #0a0a0a 100%); border-bottom: 1px solid rgba(230,168,63,.25); box-shadow: 0 4px 20px rgba(0,0,0,.5); }
/* Header: garante logo + menu + botão numa linha só (o menu com mais itens
quebrava linha e jogava o botão "Painel do Usuário" pra baixo) */
.header-menu-area .row { flex-wrap: nowrap; }
.header-menu-area .main-menu > ul > li { margin: 0 10px; }
.header-menu-area .main-menu a { font-size: 14px; }
@media (max-width: 1400px) {
.header-menu-area .main-menu > ul > li { margin: 0 7px; }
.header-menu-area .main-menu a { font-size: 13px; }
}
/* Cards de notícias: trava um tamanho fixo pro quadro da imagem (com corte
automático via object-fit) — sem isso, o card "list-style" (que usa flexbox)
deixa a imagem vazar no tamanho natural do arquivo enviado, espremendo o
texto ao lado. Funciona não importa o tamanho exato que o admin enviar. */
.blog-box.list-style .blog-img { width: 280px; flex-shrink: 0; }
.blog-box.list-style .blog-img img { width: 100%; height: 190px; object-fit: cover; }
.blog-box.grid-style .blog-img img { width: 100%; height: 360px; object-fit: cover; }
@media (max-width: 767px) {
.blog-box.list-style .blog-img { width: 140px; }
.blog-box.list-style .blog-img img { height: 100px; }
}
/* Logo do header: flutua devagar e cresce 1.25x no hover */
.header-logo a { display: inline-block; animation: logoFloat 3.5s ease-in-out infinite; }
.header-logo img { transition: transform .3s ease; }
.header-logo a:hover img { transform: scale(1.25); }
@keyframes logoFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.breadcumb-wrapper { position: relative; overflow: hidden; padding-top: 220px !important; }
.breadcumb-wrapper .breadcumb-content { position: relative; z-index: 3; width: 100%; margin: 0 auto; text-align: center; }
.breadcumb-wrapper .breadcumb-menu-wrap { display: flex; justify-content: center; width: 100%; }
.breadcumb-menu li, .breadcumb-menu a, .breadcumb-menu span { color: rgba(255,255,255,.6) !important; }
.breadcumb-menu li.active, .breadcumb-menu li.active span { color: #fff !important; }
.vs-hero-wrapper { position: relative; }
.hero-clip-slider { position: relative; }
/* Ajusta o enquadramento da imagem de fundo do hero pra não cortar a parte de cima
(o padrão do template centraliza e corta simétrico, mas a arte tem os personagens
mais pra cima) */
.vs-hero-wrapper .hero-clip-img { background-position: center 15% !important; }
/* Animação do hero (iframe com a arte animada) */
.hero-clip-anim { display: block; border: 0; pointer-events: none; background: #0a0a0a; }
/* Botões do hero: usa a animação nativa do .vs-btn do OASIS (bordas em L que se
recolhem no hover) — só o espaçamento e a cor do texto em repouso são customizados
(texto preto sobre o fundo laranja sólido dá mais contraste que o branco padrão) */
.hero-clip-btns { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-clip-btns .vs-btn:not(.outline-style) { color: #111 !important; }
.hero-clip-btns .vs-btn:not(.outline-style):hover { color: var(--theme-color2) !important; }
.hero-clip-btns .vs-btn.outline-style:hover { background-color: var(--theme-color2) !important; border-color: var(--theme-color2) !important; }
/* Contagem regressiva centralizada na parte mais baixa da hero */
.hero-countdown-wrap { position: absolute; left: 0; right: 0; bottom: 70px; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; pointer-events: none; }
.hero-countdown-label { display: block; margin-bottom: 6px; font-family: var(--title-font); font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.65); }
.hero-countdown-wrap #soon-hero { font-family: 'Rajdhani', sans-serif; color: var(--theme-color2) !important; background: transparent; }
.hero-countdown-wrap #soon-hero .soon-label { color: var(--theme-color2) !important; text-shadow: 0 0 .3rem rgba(255,192,16,.6); font-size: 11px; letter-spacing: .06em; }
.hero-countdown-wrap #soon-hero .soon-ring-progress { color: var(--theme-color2) !important; background-color: rgba(255,192,16,.18) !important; }
.hero-countdown-wrap #soon-hero.soon[data-layout*="group"] { padding-top: 10px; }
.hero-countdown-wrap #soon-hero.soon[data-face*="glow"] .soon-separator,
.hero-countdown-wrap #soon-hero.soon[data-face*="glow"] .soon-slot-inner { color: #fff !important; text-shadow: 0 0 10px rgba(255,192,16,.9) !important; }
@media (max-width: 992px) { .hero-countdown-wrap { bottom: 40px; } }
@media (max-width: 768px) { .hero-countdown-wrap { bottom: 20px; } .hero-countdown-wrap #soon-hero { transform: scale(.85); } }
@media (max-width: 576px) { .hero-countdown-wrap { bottom: 8px; } .hero-countdown-wrap #soon-hero { transform: scale(.7); } }
/* Logo branca no rodapé */
.logo-footer2 img { filter: brightness(0) invert(1); }
.footer-tagline { margin: 10px 0 0; font-size: 12px; letter-spacing: .04em; color: rgba(255,255,255,.45); }
/* Crédito de desenvolvimento no rodapé */
.footer-credit { color: rgba(255,255,255,.4); }
.footer-credit a { color: var(--theme-color2); font-weight: 600; }
.footer-credit a:hover { text-decoration: underline; }
/* Efeito de faíscas flutuando por cima do site inteiro */
#embers-bg { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
#embers-bg .ember { position: absolute; bottom: -20px; border-radius: 50%; background: radial-gradient(circle, #ffd27a 0%, var(--theme-color) 60%, rgba(255,126,2,0) 100%); box-shadow: 0 0 6px 1px rgba(255,160,40,.7); opacity: 0; animation-name: emberRise; animation-timing-function: ease-in; animation-iteration-count: infinite; }
@keyframes emberRise {
0% { transform: translate(0, 0) scale(1); opacity: 0; }
10% { opacity: .9; }
100% { transform: translate(var(--drift, 30px), -110vh) scale(.3); opacity: 0; }
}