/* ================================================================= * GUILD OVERRIDES — Tema da guild * Cores vem das variaveis CSS injetadas no a partir do guild.php * (--guild-primaria, --guild-secundaria, --guild-hover, etc). * * Carregado APOS Orange/Red.css e ally.css para vencer a cascata. * Estilo: rustico, medieval — vermelho profundo + preto + branco. * ================================================================= */ /* ==================== SIDEBAR ==================== */ /* Translucida — deixa o fundo (assets/img/fundo.jpg) atravessar */ .sidebar-nav { background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(15, 5, 5, 0.65) 50%, rgba(0, 0, 0, 0.55) 100%) !important; backdrop-filter: blur(8px) saturate(120%); -webkit-backdrop-filter: blur(8px) saturate(120%); border-right: 0 !important; box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6), inset -1px 0 0 rgba(211, 16, 39, 0.18) !important; } /* Brand: linha sutil em vez de borda dura */ .sidebar-brand { border-bottom: 1px solid rgba(211, 16, 39, 0.15); padding-bottom: 16px; } /* Footer: linha sutil em cima (era borda vermelha solida) */ .sidebar-footer { border-top: 1px solid rgba(211, 16, 39, 0.15) !important; } /* Logo glow rustico */ .sidebar-logo { filter: drop-shadow(0 0 18px var(--guild-primaria)) !important; } .sidebar-brand:hover .sidebar-logo { filter: drop-shadow(0 0 30px var(--guild-destaque)) !important; } /* Subtitulos da sidebar */ .sidebar-subtitle { color: var(--guild-primaria) !important; font-family: 'Big Shoulders', 'Cinzel', serif; letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.72em; border-bottom: 1px solid rgba(211, 16, 39, 0.25); padding-bottom: 6px; margin-bottom: 8px; } /* Botao TeamSpeak SOMENTE na sidebar — variante OUTLINE. Limitado a .sidebar-nav para nao conflitar com .action-card.ts-connect na home. */ .sidebar-nav .ts-connect, .sidebar-nav .ts-connect-logged { display: flex !important; align-items: center; justify-content: center; gap: 10px; padding: 12px 16px !important; margin: 0 15px 10px; background: transparent !important; border: 2px solid var(--guild-primaria) !important; color: var(--guild-primaria) !important; border-radius: 6px !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease !important; } .sidebar-nav .ts-connect:hover, .sidebar-nav .ts-connect-logged:hover { background: var(--guild-primaria) !important; color: var(--guild-texto) !important; } /* Sistema de botoes da sidebar — bordas FINAS, layout compacto. 3 variantes da paleta da guild. */ .sidebar-btn, .sidebar-btn-login, .sidebar-btn-alistar, .sidebar-btn-user { display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px !important; margin: 0 15px 8px; border-radius: 6px !important; font-weight: 700 !important; font-size: 0.82em !important; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none !important; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important; } /* SECONDARY = branco solido + texto vermelho (login) */ .sidebar-btn-login { background: var(--guild-texto) !important; border: 1px solid var(--guild-texto) !important; color: var(--guild-primaria) !important; } .sidebar-btn-login:hover { background: var(--guild-primaria) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; transform: none !important; } /* PRIMARY = gradient vermelho + texto branco (alistar — CTA principal) */ .sidebar-btn-alistar { background: linear-gradient(180deg, var(--guild-primaria) 0%, var(--guild-secundaria) 100%) !important; border: 1px solid var(--guild-primaria) !important; color: var(--guild-texto) !important; box-shadow: 0 2px 8px rgba(211, 16, 39, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .sidebar-btn-alistar:hover { background: linear-gradient(180deg, var(--guild-destaque) 0%, var(--guild-primaria) 100%) !important; border-color: var(--guild-destaque) !important; color: var(--guild-texto) !important; box-shadow: 0 4px 12px rgba(211, 16, 39, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: none !important; } /* OUTLINE = transparente + borda fina + texto vermelho (perfil logado) */ .sidebar-btn-user, .sidebar-btn { background: transparent !important; border: 1px solid rgba(211, 16, 39, 0.5) !important; color: var(--guild-primaria) !important; } .sidebar-btn-user:hover, .sidebar-btn:hover { background: rgba(211, 16, 39, 0.15) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; } /* Bell ao lado de "Meu Perfil" — agora no FOOTER da sidebar */ .sidebar-footer .sidebar-user-row, .sidebar-user-row { display: flex !important; align-items: stretch; gap: 8px; margin: 0 15px 8px !important; padding: 0 !important; } .sidebar-user-row .sidebar-btn-user { flex: 1; margin: 0 !important; min-width: 0; } /* Sidebar-footer organizada — gap entre user-row e sair */ .sidebar-footer { padding-top: 16px !important; padding-bottom: 14px !important; } .sidebar-footer .sidebar-user-row { margin-bottom: 6px !important; } .sidebar-user-row .sidebar-btn-notification { flex: 0 0 auto; width: 42px; height: auto; padding: 0 !important; border: 1px solid rgba(211, 16, 39, 0.5) !important; background: transparent !important; color: var(--guild-primaria) !important; border-radius: 6px; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; font-size: 1em; overflow: visible; } .sidebar-user-row .sidebar-btn-notification:hover { background: rgba(211, 16, 39, 0.15) !important; color: var(--guild-texto) !important; } /* Badge pequeno redondinho TOP-RIGHT do sino, sem tampar o icone */ .sidebar-user-row .sidebar-btn-notification .notification-badge { position: absolute !important; top: -7px !important; right: -7px !important; left: auto !important; background: var(--guild-primaria) !important; color: var(--guild-texto) !important; border-radius: 50% !important; width: 18px !important; height: 18px !important; padding: 0 !important; font-size: 0.62em !important; font-weight: 700 !important; line-height: 18px !important; text-align: center !important; border: 2px solid var(--guild-fundo) !important; margin: 0 !important; animation: none !important; box-shadow: 0 0 6px rgba(211, 16, 39, 0.6); pointer-events: none; } /* Botao "Meu Perfil" (no rodape) — nome em cima, "ver perfil" pequeno embaixo */ .sidebar-btn-user .sidebar-btn-user-texto { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.1; text-align: left; flex: 1; min-width: 0; } .sidebar-btn-user .sidebar-btn-user-texto strong { font-size: 0.92em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; } .sidebar-btn-user .sidebar-btn-user-texto small { font-size: 0.66em; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; } /* Layout do botao perfil como flex linha (icone + texto vertical) */ .sidebar-btn-user { justify-content: flex-start !important; text-align: left !important; } .sidebar-btn-user > i { font-size: 1.4em; flex: 0 0 auto; } /* TS connect na sidebar — borda fina + compacto */ .sidebar-nav .ts-connect, .sidebar-nav .ts-connect-logged { border-width: 1px !important; padding: 10px 14px !important; margin: 0 15px 8px !important; font-size: 0.82em !important; letter-spacing: 0.05em !important; gap: 8px !important; } /* Subtitulos da sidebar — mais sutis */ .sidebar-subtitle { font-size: 0.68em !important; padding: 14px 20px 6px !important; color: rgba(255, 255, 255, 0.4) !important; border-bottom: 0 !important; letter-spacing: 0.18em !important; } /* Botao sair — borda fina */ .sidebar-logout { display: flex !important; align-items: center; gap: 8px; margin: 0 15px 10px !important; padding: 9px 14px !important; border-radius: 6px !important; border: 1px solid rgba(211, 16, 39, 0.4) !important; color: var(--guild-derrota) !important; text-decoration: none !important; font-size: 0.78em !important; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s ease; justify-content: center; } .sidebar-logout:hover { background: rgba(211, 16, 39, 0.15) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; } /* Override de QUALQUER laranja/amarelo legado da sidebar.css original */ .sidebar-nav .nav-item, .sidebar-nav .nav-item:hover, .sidebar-nav .nav-item.active, .btn-cta, .btn-cta:hover { color: var(--guild-texto) !important; } .sidebar-nav .nav-item:hover, .sidebar-nav .nav-item.active { background: rgba(211, 16, 39, 0.12) !important; border-left-color: var(--guild-primaria) !important; } .btn-cta { background: linear-gradient(135deg, var(--guild-primaria), var(--guild-secundaria)) !important; box-shadow: 0 4px 14px rgba(211, 16, 39, 0.3) !important; } .btn-cta:hover { background: linear-gradient(135deg, var(--guild-hover), var(--guild-secundaria)) !important; box-shadow: 0 6px 18px rgba(211, 16, 39, 0.5) !important; } /* Notificacoes */ .sidebar-btn-notification { background: transparent !important; border: 2px solid var(--guild-primaria) !important; color: var(--guild-primaria) !important; border-radius: 4px !important; } .sidebar-btn-notification:hover { background: var(--guild-primaria) !important; color: var(--guild-texto) !important; } .notification-badge { background: var(--guild-destaque) !important; color: var(--guild-fundo) !important; } /* Badge de pendentes — destaque pulsante */ .sidebar-badge-pendentes { margin-left: auto; background: var(--guild-primaria) !important; color: var(--guild-texto) !important; border-radius: 999px; padding: 2px 8px; font-size: 0.75em; font-weight: 700; line-height: 1.4; animation: pulsoPendentes 1.6s ease-in-out infinite; } @keyframes pulsoPendentes { 0%, 100% { box-shadow: 0 0 0 0 rgba(211, 16, 39, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(211, 16, 39, 0); } } /* Itens de menu */ .sidebar-item { color: var(--guild-texto) !important; border-left: 3px solid transparent; transition: all 0.2s ease; } .sidebar-item:hover { background: rgba(211, 16, 39, 0.12) !important; border-left-color: var(--guild-primaria); color: var(--guild-texto) !important; } .sidebar-item.active, .sidebar-item[aria-current="page"] { background: rgba(211, 16, 39, 0.18) !important; border-left-color: var(--guild-primaria); } .sidebar-item i { color: var(--guild-primaria) !important; } /* Sair */ .sidebar-logout { color: var(--guild-derrota) !important; } .sidebar-logout:hover { color: var(--guild-primaria) !important; } /* Footer */ .sidebar-copyright { color: rgba(255, 255, 255, 0.45) !important; border-top: 1px solid rgba(211, 16, 39, 0.2); padding-top: 12px; } .sidebar-copyright a { color: var(--guild-primaria) !important; } /* ==================== TIPOGRAFIA RUSTICA ==================== */ .memberlist-title, .forumtitle, .hero-content h1, .hero-content h2 { font-family: 'Big Shoulders', 'Cinzel', serif !important; letter-spacing: 0.05em; } .memberlist-title { color: var(--guild-primaria) !important; border-bottom: 2px solid var(--guild-primaria) !important; text-transform: uppercase; } /* ==================== LINKS / DESTAQUES ==================== */ a.postlink, a.postlink:visited, a:not(.sidebar-item):not(.bloco-inicial-acao):not(.btn):not(.button):not(.button2) { color: var(--guild-primaria); } a:not(.sidebar-item):not(.bloco-inicial-acao):not(.btn):not(.button):not(.button2):hover { color: var(--guild-destaque); } .texto-destaque { color: var(--guild-primaria) !important; } /* ==================== HEADERS / FORUMBG ==================== */ .forumbg .header h1, .forumbg.alt_block .header h1 { color: var(--guild-primaria) !important; font-family: 'Big Shoulders', serif; text-transform: uppercase; letter-spacing: 0.08em; } .forumbg.alt_block { background: rgba(0, 0, 0, 0.65) !important; border: 1px solid rgba(211, 16, 39, 0.3); } /* ==================== SISTEMA UNIFICADO DE BOTOES ==================== */ /* Todas as cores vem de --guild-* definidas no guild.php (sem hardcode). 3 variantes principais + 2 estados, todas usando vermelho/branco/preto: DEFAULT = SOLID vermelho (bg primaria + texto branco) .secondary = SOLID branco (bg branco + texto vermelho) .outline = OUTLINE vermelho (transparente + borda+texto vermelho) .negativo = derrota cinza .positivo = vitoria (vermelho mais claro/destaque) */ .button, .btn, .button2, .specialbutton, .bloco-form-acao, .bloco-form-acao-completo { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; padding: 11px 22px !important; min-width: 180px; border-radius: 6px !important; font-size: 0.92em !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none !important; cursor: pointer; border: 2px solid var(--guild-primaria) !important; /* Gradient sutil: claro topo -> escuro base, profundidade */ background: linear-gradient(180deg, var(--guild-primaria) 0%, var(--guild-secundaria) 100%) !important; color: var(--guild-texto) !important; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease !important; line-height: 1.3; box-shadow: 0 2px 8px rgba(211, 16, 39, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12); } .button:hover, .btn:hover, .button2:hover, .specialbutton:hover, .bloco-form-acao:hover, .bloco-form-acao-completo:hover { background: linear-gradient(180deg, var(--guild-destaque) 0%, var(--guild-primaria) 100%) !important; border-color: var(--guild-destaque) !important; color: var(--guild-texto) !important; box-shadow: 0 4px 14px rgba(211, 16, 39, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); transform: translateY(-1px); } /* SECONDARY = SOLID branco (bg branco + texto vermelho). Hover: vira solid vermelho (igual ao primario). */ .button.secondary, .btn.secondary, .button2.secondary { background: var(--guild-texto) !important; border: 2px solid var(--guild-texto) !important; color: var(--guild-primaria) !important; } .button.secondary:hover, .btn.secondary:hover, .button2.secondary:hover { background: var(--guild-primaria) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; } /* OUTLINE = transparente + borda+texto vermelho. Hover: preenche vermelho. */ .button.outline, .btn.outline, .button2.outline { background: transparent !important; border: 2px solid var(--guild-primaria) !important; color: var(--guild-primaria) !important; } .button.outline:hover, .btn.outline:hover, .button2.outline:hover { background: var(--guild-primaria) !important; color: var(--guild-texto) !important; } /* NEGATIVO (recusar / excluir) — usa --guild-derrota (cinza da paleta) */ .button.negativo, .btn.negativo, .button2.negativo { background: var(--guild-derrota) !important; border-color: var(--guild-derrota) !important; color: var(--guild-texto) !important; } .button.negativo:hover, .btn.negativo:hover, .button2.negativo:hover { background: var(--guild-fundo) !important; border-color: var(--guild-derrota) !important; } /* POSITIVO (aprovar / confirmar) — destaque (vermelho mais claro da paleta) */ .button.positivo, .btn.positivo, .button2.positivo, .button2.specialbutton.positivo { background: var(--guild-destaque) !important; border-color: var(--guild-destaque) !important; color: var(--guild-texto) !important; } .button.positivo:hover, .btn.positivo:hover, .button2.positivo:hover { background: var(--guild-primaria) !important; border-color: var(--guild-primaria) !important; } /* ==================== BLOCOS DE ACAO (acesso rapido, listas) ==================== */ /* Layout consistente: icone a esquerda, titulo+descricao empilhados a direita */ .bloco-inicial-acao { border: 1px solid rgba(211, 16, 39, 0.25); border-radius: 6px; padding: 14px 16px !important; transition: background 0.2s ease, border-color 0.2s ease !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px; text-align: left !important; text-decoration: none !important; } .bloco-inicial-acao:hover { border-color: var(--guild-primaria); background: rgba(211, 16, 39, 0.1) !important; box-shadow: 0 0 14px rgba(211, 16, 39, 0.18); } .bloco-inicial-acao > i { color: var(--guild-primaria) !important; flex: 0 0 auto; width: 38px; height: 38px; font-size: 1.4em; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(211, 16, 39, 0.12); } .bloco-inicial-acao .bloco-inicial-acao-texto { flex: 1 !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 3px !important; justify-content: center !important; } .bloco-inicial-acao .forumtitle { font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 0.95em; line-height: 1.15; margin: 0; text-transform: uppercase; letter-spacing: 0.03em; } .bloco-inicial-acao .forum_description { display: block !important; font-size: 0.8em !important; opacity: 0.7 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; } .bloco-inicial-acao-verde { border-color: var(--guild-vitoria) !important; } .bloco-inicial-acao-verde > i { color: var(--guild-vitoria) !important; background: rgba(39, 174, 96, 0.15) !important; } /* ==================== ABAS — numero a esquerda + titulo/descricao empilhados ==================== */ .abas-opcoes { counter-reset: aba; gap: 10px !important; } .abas-opcoes a { padding: 14px 16px !important; border: 2px solid var(--guild-primaria) !important; border-radius: 6px !important; background: rgba(211, 16, 39, 0.08) !important; transition: background 0.2s ease, border-color 0.2s ease !important; counter-increment: aba; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 14px; text-align: left !important; text-decoration: none !important; } .abas-opcoes a:hover { border-color: var(--guild-destaque) !important; background: rgba(211, 16, 39, 0.18) !important; } .abas-opcoes a.active, .abas-opcoes a.bloco-inicial-acao.active, .abas-opcoes a.bloco-inicial-acao.active:hover { background: linear-gradient(135deg, var(--guild-primaria), var(--guild-secundaria)) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; } /* Esconde o icone (vamos usar numero gerado por counter) */ .abas-opcoes a > i { display: none !important; } /* Numero badge a esquerda */ .abas-opcoes a::before { content: counter(aba); flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: var(--guild-texto); font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 1.35em; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid var(--guild-primaria); line-height: 1; } .abas-opcoes a.active::before { background: var(--guild-texto); color: var(--guild-primaria); border-color: var(--guild-texto); } /* Texto: titulo em cima, descricao embaixo */ .abas-opcoes a .bloco-inicial-acao-texto { flex: 1 !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; gap: 3px !important; justify-content: center !important; } .abas-opcoes a .forumtitle { font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 0.95em; line-height: 1.15; letter-spacing: 0.03em; margin: 0; text-transform: uppercase; } .abas-opcoes a .forum_description { display: block !important; font-size: 0.78em !important; opacity: 0.78 !important; line-height: 1.3 !important; text-transform: none !important; letter-spacing: 0 !important; margin: 0 !important; color: inherit !important; } /* ==================== TAGS ==================== */ .video-tag, .jogador-tag { background: var(--guild-primaria) !important; color: var(--guild-texto) !important; border-radius: 3px; padding: 2px 8px; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; } /* ==================== STATS / LEGENDA ==================== */ .stat-block strong[style*="ff3a09"], .stat-block strong[style*="2698fb"], .stat-block strong[style*="f6c916"] { /* Mantem as cores originais dos cargos — nao mexer */ } /* ==================== BG OVERLAY ==================== */ /* Bg cobre o body INTEIRO (sidebar translucida deixa atravessar) sidebar.css recortava o fundo apos a sidebar — sobrescrevemos. */ body.has-sidebar .fundo-bg { left: 0 !important; width: 100% !important; } .fundo-overlay { background: rgba(0, 0, 0, 0.35) !important; } /* ==================== MODAL DE LOGIN ==================== */ #modalLogin { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: modalLoginFadeIn 0.25s ease; } @keyframes modalLoginFadeIn { from { opacity: 0; } to { opacity: 1; } } #modalLogin .modal-content { background: linear-gradient(180deg, rgba(15, 5, 5, 0.98), rgba(0, 0, 0, 0.98)); border: 2px solid var(--guild-primaria); border-radius: 8px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(211, 16, 39, 0.25) inset; width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto; position: relative; margin: 16px; animation: modalLoginScale 0.3s ease; } #modalLogin .modal-box { padding: 32px 36px 24px !important; flex-direction: column !important; gap: 0 !important; align-items: stretch !important; } #modalLogin .modal-header { margin-bottom: 26px; } #modalLogin .form-login { gap: 16px !important; } @keyframes modalLoginScale { from { transform: scale(0.92); opacity: 0; } to { transform: scale(1); opacity: 1; } } #modalLogin .close { position: absolute; top: 8px; right: 14px; font-size: 1.8rem; color: rgba(255, 255, 255, 0.6); cursor: pointer; transition: color 0.2s; line-height: 1; z-index: 2; } #modalLogin .close:hover { color: var(--guild-primaria); } #modalLogin .modal-box { padding: 28px 28px 20px; } #modalLogin .modal-header { text-align: center; margin-bottom: 22px; } #modalLogin .modal-logo { max-width: 110px; max-height: 110px; width: auto; height: auto; object-fit: contain; margin: 0 auto 12px; filter: drop-shadow(0 0 18px var(--guild-primaria)); } #modalLogin .modal-titulo { color: var(--guild-texto); font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 1.6em; margin: 0 0 6px; letter-spacing: 0.08em; text-transform: uppercase; } #modalLogin .modal-subtitulo { color: rgba(255, 255, 255, 0.55); font-size: 0.85em; margin: 0; } #modalLogin .form-login { display: flex; flex-direction: column; gap: 14px; } #modalLogin .form-group { display: flex; flex-direction: column; gap: 6px; } #modalLogin .form-group label { color: rgba(255, 255, 255, 0.85); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; } #modalLogin .form-group label i { color: var(--guild-primaria); margin-right: 6px; } #modalLogin .form-group input[type="text"], #modalLogin .form-group input[type="password"], #modalLogin .form-group input[type="tel"] { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(211, 16, 39, 0.35); border-radius: 4px; padding: 11px 14px; color: var(--guild-texto); font-size: 0.95em; transition: all 0.2s ease; outline: none; width: 100%; box-sizing: border-box; } #modalLogin .form-group input:focus { border-color: var(--guild-primaria); box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.18); background: rgba(0, 0, 0, 0.7); } #modalLogin .form-hint { color: rgba(255, 255, 255, 0.4); font-size: 0.78em; margin-top: 2px; } #modalLogin .form-group-inline { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 4px; } #modalLogin .check-inline { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); font-size: 0.85em; cursor: pointer; text-transform: none; letter-spacing: 0; } #modalLogin .check-inline input { accent-color: var(--guild-primaria); } #modalLogin .link-secondary, #modalLogin .link-primary { color: var(--guild-primaria); font-size: 0.85em; text-decoration: none; transition: color 0.2s; } #modalLogin .link-secondary:hover, #modalLogin .link-primary:hover { color: var(--guild-destaque); } #modalLogin .login-feedback { min-height: 0; font-size: 0.88em; line-height: 1.4; transition: all 0.2s ease; } #modalLogin .login-feedback.erro { color: #ff6b7a; background: rgba(255, 60, 85, 0.1); border-left: 3px solid #ff3d51; padding: 10px 12px; border-radius: 3px; } #modalLogin .login-feedback.sucesso { color: #4ade80; background: rgba(74, 222, 128, 0.1); border-left: 3px solid #4ade80; padding: 10px 12px; border-radius: 3px; } #modalLogin .modal-actions { display: flex; gap: 10px; margin-top: 8px; } #modalLogin .modal-actions button { flex: 1; padding: 12px 16px; border-radius: 4px; font-size: 0.95em; text-transform: uppercase; letter-spacing: 0.06em; cursor: pointer; transition: all 0.2s ease; border: none; } #modalLogin .modal-actions .button2.specialbutton.positivo { background: linear-gradient(135deg, var(--guild-primaria), var(--guild-secundaria)); color: var(--guild-texto); } #modalLogin .modal-actions .button2.specialbutton.positivo:hover:not(:disabled) { background: linear-gradient(135deg, var(--guild-hover), var(--guild-secundaria)); box-shadow: 0 4px 18px rgba(211, 16, 39, 0.45); transform: translateY(-1px); } #modalLogin .modal-actions .button2.secondary { background: transparent; border: 2px solid var(--guild-primaria); color: var(--guild-texto); } #modalLogin .modal-actions .button2.secondary:hover { background: var(--guild-primaria); } #modalLogin .modal-actions button:disabled { opacity: 0.6; cursor: not-allowed; } #modalLogin .modal-extra { text-align: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); font-size: 0.9em; } #modalLogin .modal-extra a { margin-left: 6px; } #modalLogin .status-loading { text-align: center; padding: 30px 0; } #modalLogin .loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: var(--guild-primaria); border-radius: 50%; animation: spinModal 0.8s linear infinite; margin: 0 auto 16px; } @keyframes spinModal { to { transform: rotate(360deg); } } #modalLogin .status-loading h3 { color: var(--guild-primaria); font-family: 'Big Shoulders', serif; margin: 8px 0 4px; font-size: 1.25em; } #modalLogin .status-loading p { color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 0.9em; } body.modal-open { overflow: hidden; } /* ================================================================= LAYOUT PUBLICO — sem sidebar, hero centralizado, cards de acao ================================================================= */ /* Body publico: sem margin-left, ocupa tela inteira */ body.is-public #wrap { margin-left: 0 !important; width: 100% !important; min-height: 100vh; display: flex !important; flex-direction: column; justify-content: flex-start !important; } body.is-public .navbar, body.is-public .navbar_footer { display: none !important; } body.is-public .main_container, body.is-public .inner-wrap { max-width: 1240px !important; margin: 0 auto !important; padding: 24px 24px 60px !important; width: 100%; box-sizing: border-box; } body.is-public .fundo-bg { left: 0 !important; width: 100% !important; } /* PUBLIC TOPBAR — header pequeno em paginas publicas (nao na home) */ .public-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 24px; margin-bottom: 24px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid rgba(211, 16, 39, 0.25); } .public-topbar-logo { display: flex; align-items: center; gap: 12px; text-decoration: none !important; color: var(--guild-texto) !important; } .public-topbar-logo img { height: 44px; width: auto; filter: drop-shadow(0 0 10px var(--guild-primaria)); } .public-topbar-logo span { font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 1.2em; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; } .public-topbar-nav { display: flex; gap: 8px; } .public-topbar-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 4px; color: var(--guild-texto) !important; text-decoration: none !important; font-size: 0.88em; text-transform: uppercase; letter-spacing: 0.05em; transition: background 0.2s ease; } .public-topbar-link:hover { background: rgba(211, 16, 39, 0.18); } @media (max-width: 600px) { .public-topbar { padding: 10px 14px; } .public-topbar-logo span { display: none; } .public-topbar-link { padding: 6px 10px; font-size: 0.82em; } } /* PUBLIC SHELL */ .public-shell { display: flex; flex-direction: column; gap: 28px; padding: 48px 0 24px; } /* HERO */ .public-hero { text-align: center; margin-bottom: 8px; padding: 12px 0; } /* HERO horizontal — logo a esquerda, texto a direita */ .public-hero-row { display: flex; align-items: center; justify-content: center; gap: 32px; text-align: left; flex-wrap: wrap; } .public-hero-row .public-hero-logo { flex: 0 0 auto; } .public-hero-row .public-hero-texto { flex: 1 1 auto; max-width: 560px; min-width: 280px; } @media (max-width: 720px) { .public-hero-row { flex-direction: column; text-align: center; gap: 14px; } .public-hero-row .public-hero-texto { min-width: 0; } } .public-hero-logo { display: inline-block; } .public-hero-logo img { max-width: 180px; width: clamp(130px, 15vw, 180px); height: auto; filter: drop-shadow(0 0 24px var(--guild-primaria)); transition: transform 0.3s ease; } .public-hero-logo:hover img { transform: scale(1.04); filter: drop-shadow(0 0 36px var(--guild-destaque)); } .public-hero-titulo { font-family: 'Big Shoulders', 'Cinzel', serif; font-size: clamp(1.5em, 3.2vw, 2.2em); font-weight: 900; color: var(--guild-texto); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 8px; line-height: 1.15; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.7); } .public-hero-subtitulo { color: var(--guild-primaria); font-size: clamp(0.95em, 1.4vw, 1.1em); margin: 0 0 14px; font-family: 'Big Shoulders', 'Cinzel', serif; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; } .public-hero-apoio { color: rgba(255, 255, 255, 0.6); font-size: 0.92em; margin: 0; line-height: 1.5; } /* GRID PUBLICO */ .public-grid { display: grid; gap: 22px; } .public-grid-3 { grid-template-columns: repeat(3, 1fr); } .public-grid-2 { grid-template-columns: repeat(2, 1fr); } /* ACTION CARD — base (deslogado). Layout HORIZONTAL: icone esquerda + (titulo + descricao empilhados) direita. Mesmo padrao para os 3 cards principais e os 2 secundarios. */ .action-card { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 16px; padding: 22px 24px; background: rgba(12, 5, 6, 0.82); border: 1px solid rgba(211, 16, 39, 0.55); border-radius: 8px; text-decoration: none !important; color: var(--guild-texto); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.2s ease; position: relative; overflow: hidden; min-height: 130px; } .action-card .action-card-corpo { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .action-card::before { /* glow sutil no canto superior direito */ content: ""; position: absolute; top: -40px; right: -40px; width: 140px; height: 140px; background: radial-gradient(circle, rgba(211, 16, 39, 0.18), transparent 70%); pointer-events: none; } .action-card:hover { background: rgba(20, 8, 10, 0.9); border-color: var(--guild-primaria); box-shadow: 0 8px 28px rgba(211, 16, 39, 0.25); transform: translateY(-2px); color: var(--guild-texto); } .action-card-icon { width: 56px; height: 56px; border-radius: 50%; background: rgba(211, 16, 39, 0.12); border: 1px solid rgba(211, 16, 39, 0.4); display: flex; align-items: center; justify-content: center; color: var(--guild-primaria); font-size: 1.6em; flex-shrink: 0; } .action-card-titulo { font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 1.25em; text-transform: uppercase; letter-spacing: 0.06em; margin: 0; color: var(--guild-texto); line-height: 1.1; } .action-card-desc { color: rgba(255, 255, 255, 0.65); font-size: 0.88em; line-height: 1.45; margin: 0; } /* CARD DESTAQUE (alistamento) — chamativo */ .action-card-destaque { background: linear-gradient(135deg, rgba(211, 16, 39, 0.5), rgba(101, 8, 14, 0.85)) !important; border-color: var(--guild-primaria) !important; box-shadow: 0 0 24px rgba(211, 16, 39, 0.35); } .action-card-destaque::before { background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 70%); } .action-card-destaque:hover { background: linear-gradient(135deg, rgba(211, 16, 39, 0.7), rgba(139, 0, 0, 0.95)) !important; box-shadow: 0 8px 32px rgba(211, 16, 39, 0.55); } .action-card-destaque .action-card-icon { background: rgba(255, 255, 255, 0.15); border-color: rgba(255, 255, 255, 0.4); color: var(--guild-texto); } .action-card-destaque .action-card-desc { color: rgba(255, 255, 255, 0.85); } /* QUALQUER card com background-image inline ganha: - background cover/right - overlay degrade (legivel a esquerda, imagem aparece a direita) Sem precisar classe extra. */ .action-card[style*="background-image"] { background-size: cover; background-position: center right; background-repeat: no-repeat; } .action-card[style*="background-image"]::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 5, 6, 0.95) 0%, rgba(12, 5, 6, 0.82) 35%, rgba(12, 5, 6, 0.4) 70%, rgba(12, 5, 6, 0.1) 100%); pointer-events: none; z-index: 0; } .action-card[style*="background-image"]:hover::after { background: linear-gradient(90deg, rgba(20, 8, 10, 0.97) 0%, rgba(20, 8, 10, 0.88) 35%, rgba(20, 8, 10, 0.45) 70%, rgba(20, 8, 10, 0.15) 100%); } .action-card[style*="background-image"] > * { position: relative; z-index: 1; } /* Sub-classe usada para spacing/layout (sem mudar layout da base) */ .action-card-secundario { min-height: 130px; } /* RIFA aberta — verde sutil (NAO chapado) */ .action-card-rifa-aberta { border-color: rgba(39, 174, 96, 0.4) !important; } .action-card-rifa-aberta:hover { border-color: #27ae60 !important; box-shadow: 0 6px 18px rgba(39, 174, 96, 0.18); } .action-card-rifa-aberta .action-card-icon { background: rgba(39, 174, 96, 0.15) !important; border-color: rgba(39, 174, 96, 0.5) !important; color: #4ade80 !important; } .action-card-rifa-aberta .card-tag-aberta { background: rgba(39, 174, 96, 0.18); color: #4ade80; border: 1px solid rgba(39, 174, 96, 0.4); } /* CARD vazio (placeholder "Nenhuma presenca disponivel") */ .action-card-vazio { border-color: rgba(255, 255, 255, 0.1) !important; background: rgba(0, 0, 0, 0.4) !important; cursor: default; opacity: 0.7; pointer-events: none; } .action-card-vazio .action-card-icon { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.5) !important; } /* TAGS dos cards (nao usar mais .video-tag) */ .action-card .card-tag { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 3px; font-size: 0.7em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; background: var(--guild-primaria); color: var(--guild-texto); vertical-align: middle; } /* Grid logged: 2 cards por linha (3 ou 4 cards no total) */ .public-grid-logged { margin-top: 8px; } /* TEMA DOS CARDS — icone com cor que combina com a imagem de fundo */ /* TeamSpeak — vermelho profundo (canal de voz) */ .action-card-tema-ts .action-card-icon { background: linear-gradient(135deg, rgba(211, 16, 39, 0.4), rgba(101, 8, 14, 0.6)) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; box-shadow: 0 0 18px rgba(211, 16, 39, 0.45); } /* Estatisticas CS — vermelho intenso (graficos/poder) */ .action-card-tema-cs .action-card-icon { background: linear-gradient(135deg, rgba(211, 16, 39, 0.35), rgba(139, 0, 0, 0.55)) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; box-shadow: 0 0 18px rgba(211, 16, 39, 0.4); } /* Videos — vermelho com toque de play (vibrante) */ .action-card-tema-videos .action-card-icon { background: linear-gradient(135deg, rgba(255, 61, 81, 0.35), rgba(211, 16, 39, 0.55)) !important; border-color: var(--guild-destaque) !important; color: var(--guild-texto) !important; box-shadow: 0 0 18px rgba(255, 61, 81, 0.4); } /* Sobre — vermelho profundo + sombra mais sutil (institucional) */ .action-card-tema-sobre { background-size: cover; background-position: center right; background-repeat: no-repeat; overflow: hidden; } .action-card-tema-sobre::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12, 5, 6, 0.95) 0%, rgba(12, 5, 6, 0.82) 40%, rgba(12, 5, 6, 0.4) 75%, rgba(12, 5, 6, 0.1) 100%); pointer-events: none; z-index: 0; border-radius: inherit; } .action-card-tema-sobre > * { position: relative; z-index: 1; } .action-card-tema-sobre .page-box-icone { background: linear-gradient(135deg, rgba(139, 0, 0, 0.55), rgba(101, 8, 14, 0.75)) !important; border-color: var(--guild-secundaria) !important; color: var(--guild-texto) !important; box-shadow: 0 0 16px rgba(139, 0, 0, 0.4); } /* PAGE LOGIN — pagina standalone /login.php */ .login-page-shell { max-width: 580px; margin: 0 auto; } .login-hero .public-hero-logo img { max-width: 140px; } .page-box-form { flex-direction: column; align-items: stretch; text-align: left; } .page-box-form .page-box-icone { margin: 0 auto 14px; } .form-login-page { display: flex; flex-direction: column; gap: 14px; margin-bottom: 18px; } .form-login-page .form-group { display: flex; flex-direction: column; gap: 6px; } .form-login-page label { color: rgba(255, 255, 255, 0.85); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; } .form-login-page label i { color: var(--guild-primaria); margin-right: 4px; } .form-login-page input[type="text"], .form-login-page input[type="password"] { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(211, 16, 39, 0.35); border-radius: 4px; padding: 11px 14px; color: var(--guild-texto); font-size: 0.95em; outline: none; transition: all 0.2s ease; } .form-login-page input:focus { border-color: var(--guild-primaria); box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.18); background: rgba(0, 0, 0, 0.7); } .form-login-page .form-group-inline { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; } .form-login-page .check-inline { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); text-transform: none; letter-spacing: 0; font-size: 0.9em; cursor: pointer; } .form-login-page .check-inline input { accent-color: var(--guild-primaria); } .form-login-page .link-secondary { color: var(--guild-primaria); font-size: 0.9em; text-decoration: none; } .form-login-page .link-secondary:hover { color: var(--guild-destaque); } .login-feedback { margin-bottom: 14px; padding: 10px 14px; border-radius: 4px; font-size: 0.9em; } .login-feedback.erro { color: #ff6b7a; background: rgba(255, 60, 85, 0.12); border-left: 3px solid var(--guild-primaria); } .login-feedback.sucesso { color: #4ade80; background: rgba(74, 222, 128, 0.12); border-left: 3px solid #4ade80; } .login-extra { text-align: center; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.55); font-size: 0.92em; } .login-extra .link-primary { margin-left: 6px; color: var(--guild-primaria); text-decoration: none; font-weight: 700; } .login-extra .link-primary:hover { color: var(--guild-destaque); } /* FOOTER da home publica — separador medieval + gradient + glow */ .public-footer { position: relative; text-align: center; margin-top: 24px; padding: 32px 16px 14px; color: rgba(255, 255, 255, 0.45); font-size: 0.85em; line-height: 1.7; } .public-footer::before { /* Linha-gradient horizontal vermelho central, fade nas bordas */ content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; max-width: 720px; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(211, 16, 39, 0.5) 50%, transparent 100%); } .public-footer::after { /* Diamante decorativo central */ content: "◆"; position: absolute; top: -8px; left: 50%; transform: translateX(-50%); color: var(--guild-primaria); font-size: 0.85em; background: var(--guild-fundo); padding: 0 10px; text-shadow: 0 0 8px rgba(211, 16, 39, 0.6); } .public-footer p { margin: 4px 0; } .public-footer-copy { font-family: 'Big Shoulders', 'Cinzel', serif; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(211, 16, 39, 0.65) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; font-size: 1.05em; text-shadow: 0 0 24px rgba(211, 16, 39, 0.25); } .public-footer-credit { font-size: 0.85em; color: rgba(255, 255, 255, 0.4); } .public-footer-credit a { color: var(--guild-primaria); text-decoration: none; font-weight: 700; transition: color 0.2s, text-shadow 0.2s; } .public-footer-credit a:hover { color: var(--guild-destaque); text-shadow: 0 0 8px rgba(255, 61, 81, 0.4); } /* PUBLIC TOPBAR — apenas como fallback mobile (sidebar.css ja tem mobile-topbar do menu hamburguer; public-topbar fica oculto no desktop) */ .public-topbar { display: none; } /* PAGE BOX (componente reutilizavel) */ .page-box { background: rgba(12, 5, 6, 0.82); border: 1px solid rgba(211, 16, 39, 0.55); border-radius: 8px; padding: 28px 32px; display: flex; align-items: flex-start; gap: 24px; position: relative; } .page-box-icone { width: 56px; height: 56px; flex-shrink: 0; border-radius: 6px; background: rgba(211, 16, 39, 0.12); border: 1px solid rgba(211, 16, 39, 0.4); display: flex; align-items: center; justify-content: center; color: var(--guild-primaria); font-size: 1.6em; } .page-box-corpo { flex: 1; } .page-box-titulo { font-family: 'Big Shoulders', 'Cinzel', serif; color: var(--guild-primaria); text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.25em; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(211, 16, 39, 0.35); } .page-box-conteudo { color: rgba(255, 255, 255, 0.85); line-height: 1.65; } .page-box-conteudo p { margin: 0 0 10px; } .page-box-conteudo p:last-child { margin-bottom: 0; } /* TABLET */ @media (max-width: 1024px) { .public-grid-3 { grid-template-columns: repeat(2, 1fr); } .public-grid-3 .action-card-destaque { grid-column: 1 / -1; } } /* MOBILE */ @media (max-width: 700px) { .public-shell { gap: 22px; padding-top: 24px; } .public-grid-3, .public-grid-2 { grid-template-columns: 1fr; } /* Ordem mobile: alistar primeiro, depois login, depois TS */ .public-grid-3 .action-card-destaque { order: -1; } .action-card { min-height: auto; padding: 22px 18px; } .action-card-secundario { padding: 16px 18px; } .page-box { flex-direction: column; padding: 22px 20px; gap: 16px; } .page-box-icone { width: 44px; height: 44px; font-size: 1.3em; } .public-hero-titulo { margin: 14px 0 10px; } } /* ==================== INFO BLOCO (sobre / alistamento) ==================== */ .info-bloco { padding: 20px 24px !important; line-height: 1.7; } .info-bloco p { margin: 0 0 14px; color: rgba(255, 255, 255, 0.88); } .info-bloco p:last-child { margin-bottom: 0; } .info-subheader { color: var(--guild-primaria); font-family: 'Big Shoulders', 'Cinzel', serif; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05em; margin: 18px 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(211, 16, 39, 0.25); } .info-subheader:first-child { margin-top: 0; } .info-lista { margin: 0 0 14px; padding-left: 22px; } .info-lista li { color: rgba(255, 255, 255, 0.88); margin-bottom: 8px; line-height: 1.6; } .info-lista li::marker { color: var(--guild-primaria); } /* CTA do alistamento — herda solido vermelho. Garante que nao estica e centraliza */ .bloco-form-acao-completo, .bloco-form-acoes .bloco-form-acao { width: auto !important; min-width: 200px !important; max-width: 100%; } /* Container de acoes do form: centralizar todos */ .bloco-form-acoes, .modal-actions:not(#modalLogin .modal-actions) { display: flex !important; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; } /* ================================================================= MODAL UNIFICADO (modal-page-box) — visual identico ao .page-box Estrutura: icone topo + titulo + subtitulo + body + botoes ================================================================= */ .modal, .modal-page-box { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); align-items: center; justify-content: center; z-index: 9999; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal-page-box .modal-content { background: linear-gradient(180deg, rgba(15, 5, 5, 0.98), rgba(0, 0, 0, 0.98)) !important; border: 2px solid var(--guild-primaria) !important; border-radius: 10px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 40px rgba(211, 16, 39, 0.25) inset !important; width: 100% !important; max-width: 540px !important; max-height: 92vh; overflow-y: auto; position: relative; margin: 16px; padding: 32px 32px 28px; box-sizing: border-box; animation: modalLoginScale 0.3s ease; } /* VARIANTE COM IMAGEM LATERAL — modal mais largo (TS, alistamento etc) */ .modal-page-box.modal-com-imagem .modal-content { max-width: 760px !important; padding: 0 !important; display: flex; flex-direction: row; overflow: hidden; } .modal-imagem-lateral { flex: 0 0 240px; background: linear-gradient(180deg, rgba(211, 16, 39, 0.18), rgba(0, 0, 0, 0.4)); border-right: 1px solid rgba(211, 16, 39, 0.3); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 22px; gap: 14px; } .modal-imagem-lateral img { max-width: 140px; width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 0 18px var(--guild-primaria)); } /* Variante "so img" — sem titulo/subtitulo, imagem maior centralizada */ .modal-imagem-lateral.modal-imagem-so-img img { max-width: 200px; } .modal-imagem-titulo { font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 1.35em; color: var(--guild-texto); text-transform: uppercase; letter-spacing: 0.1em; margin: 0; line-height: 1.1; } .modal-imagem-subtitulo { font-size: 0.78em; color: var(--guild-primaria); text-transform: uppercase; letter-spacing: 0.12em; margin: 0; font-weight: 700; } .modal-conteudo-lateral { flex: 1; padding: 28px 28px 24px; overflow-y: auto; max-height: 92vh; } .modal-header-compacto { margin-bottom: 18px; } .modal-header-compacto .modal-header-icone { display: none; /* sem icone na variante com imagem */ } .modal-header-compacto .modal-header-titulo { font-size: 1.3em; margin-bottom: 4px; } @media (max-width: 720px) { .modal-page-box.modal-com-imagem .modal-content { flex-direction: column; max-width: 480px !important; } .modal-imagem-lateral { flex: 0 0 auto; border-right: 0; border-bottom: 1px solid rgba(211, 16, 39, 0.3); padding: 18px; flex-direction: row; gap: 16px; text-align: left; } .modal-imagem-lateral img { max-width: 70px; flex: 0 0 70px; } .modal-conteudo-lateral { padding: 22px 22px 18px; } } /* FORM dentro do modal-conteudo-lateral (login no modal-com-imagem) */ .modal-conteudo-lateral .form-container { background: transparent !important; border: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column; gap: 14px; } .modal-conteudo-lateral .form-container .form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; margin: 0 !important; } .modal-conteudo-lateral .form-container .form-group label { color: rgba(255, 255, 255, 0.85) !important; font-size: 0.8em !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-weight: 700; margin: 0 !important; display: block !important; } .modal-conteudo-lateral .form-container .form-group label i { color: var(--guild-primaria) !important; margin-right: 4px; } .modal-conteudo-lateral .form-container input[type="text"], .modal-conteudo-lateral .form-container input[type="password"] { width: 100% !important; box-sizing: border-box !important; background: rgba(0, 0, 0, 0.5) !important; border: 1px solid rgba(211, 16, 39, 0.35) !important; border-radius: 4px !important; padding: 11px 14px !important; color: var(--guild-texto) !important; font-size: 0.95em !important; outline: none; transition: all 0.2s ease; } .modal-conteudo-lateral .form-container input:focus { border-color: var(--guild-primaria) !important; box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.18) !important; background: rgba(0, 0, 0, 0.7) !important; } .modal-conteudo-lateral .form-container .form-group-inline { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 8px !important; margin-top: 4px; } .modal-conteudo-lateral .form-container .form-group-inline > * { flex: 0 0 auto; white-space: nowrap; } .modal-conteudo-lateral .check-inline { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.7); text-transform: none !important; letter-spacing: 0 !important; font-size: 0.85em !important; cursor: pointer; font-weight: normal !important; } .modal-conteudo-lateral .check-inline input { accent-color: var(--guild-primaria); } .modal-conteudo-lateral .link-secondary { color: var(--guild-primaria); font-size: 0.85em; text-decoration: none; } .modal-conteudo-lateral .link-secondary:hover { color: var(--guild-destaque); } .modal-conteudo-lateral .modal-extra { text-align: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.5); font-size: 0.88em; } .modal-conteudo-lateral .modal-extra .link-primary { margin-left: 4px; color: var(--guild-primaria); font-weight: 700; text-decoration: none; } .modal-conteudo-lateral .modal-extra .link-primary:hover { color: var(--guild-destaque); } .modal-page-box .modal-close { position: absolute; top: 12px; right: 14px; width: 32px; height: 32px; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; color: rgba(255, 255, 255, 0.7); font-size: 1em; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; line-height: 1; } .modal-page-box .modal-close:hover { background: var(--guild-primaria); border-color: var(--guild-primaria); color: var(--guild-texto); } /* Header padrao: icone circular grande no topo + titulo + subtitulo */ .modal-header-pb { text-align: center; margin-bottom: 22px; } .modal-header-icone { width: 72px; height: 72px; border-radius: 50%; background: linear-gradient(135deg, rgba(211, 16, 39, 0.3), rgba(139, 0, 0, 0.5)); border: 2px solid var(--guild-primaria); color: var(--guild-texto); font-size: 1.9em; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; box-shadow: 0 0 24px rgba(211, 16, 39, 0.4); } .modal-header-titulo { font-family: 'Big Shoulders', 'Cinzel', serif; color: var(--guild-texto); font-size: 1.55em; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 6px; line-height: 1.1; } .modal-header-subtitulo { color: rgba(255, 255, 255, 0.55); font-size: 0.88em; margin: 0; } .modal-body-pb { display: flex; flex-direction: column; gap: 16px; } /* Status card (no body do modal) — usado pelo TS para mostrar logado/visitante */ .status-card { display: flex; gap: 14px; padding: 16px; border-radius: 6px; border: 1px solid rgba(211, 16, 39, 0.3); background: rgba(211, 16, 39, 0.08); } .status-card-icone { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; background: rgba(211, 16, 39, 0.18); color: var(--guild-primaria); font-size: 1.2em; display: flex; align-items: center; justify-content: center; } .status-card-positivo { border-color: rgba(39, 174, 96, 0.4); background: rgba(39, 174, 96, 0.08); } .status-card-positivo .status-card-icone { background: rgba(39, 174, 96, 0.18); color: #4ade80; } .status-card-aviso .status-card-icone { color: var(--guild-destaque); } .status-card-corpo { flex: 1; } .status-card-titulo { margin: 0 0 6px; font-family: 'Big Shoulders', 'Cinzel', serif; color: var(--guild-texto); font-size: 1.05em; text-transform: uppercase; letter-spacing: 0.04em; } .status-card-corpo p { margin: 0 0 8px; color: rgba(255, 255, 255, 0.78); font-size: 0.88em; line-height: 1.5; } .status-card-lista { margin: 8px 0; padding-left: 0; list-style: none; } .status-card-lista li { color: rgba(255, 255, 255, 0.7); font-size: 0.85em; line-height: 1.6; display: flex; align-items: center; gap: 8px; } .status-card-lista li i { color: var(--guild-destaque); font-size: 0.85em; } .status-card-cta { color: var(--guild-destaque) !important; font-weight: 700; margin-top: 10px !important; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85em !important; } /* Form dentro do modal */ .modal-page-box .form-container { padding: 16px; border-radius: 6px; background: rgba(211, 16, 39, 0.06); border: 1px solid rgba(211, 16, 39, 0.2); } .modal-page-box .form-container .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .modal-page-box .form-container label { color: rgba(255, 255, 255, 0.85); font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.04em; } .modal-page-box .form-container label i { color: var(--guild-primaria); margin-right: 4px; } .modal-page-box .form-container input[type="text"] { background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(211, 16, 39, 0.35); border-radius: 4px; padding: 11px 14px; color: var(--guild-texto); font-size: 0.95em; outline: none; } .modal-page-box .form-container input:focus { border-color: var(--guild-primaria); box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.18); background: rgba(0, 0, 0, 0.7); } .modal-secao-titulo { margin: 0 0 12px; color: var(--guild-texto); font-family: 'Big Shoulders', 'Cinzel', serif; font-size: 1.05em; text-transform: uppercase; letter-spacing: 0.04em; } .modal-secao-titulo i { color: var(--guild-primaria); margin-right: 6px; } /* Botoes do modal — lado a lado no desktop, empilhados no mobile */ .modal-page-box .modal-actions, .modal-actions-row, .modal-page-box .form-container .modal-actions, #modalCanalVoz .modal-actions { display: flex !important; flex-direction: row !important; align-items: stretch !important; justify-content: center; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .modal-page-box .modal-actions .button, .modal-actions-row .button, #modalCanalVoz .modal-actions button, #modalCanalVoz .modal-actions .button { flex: 1 1 0 !important; width: auto !important; min-width: 140px !important; max-width: none !important; } /* Form-container dentro do modal — width 100% sem overflow */ .modal-page-box .form-container { width: 100% !important; box-sizing: border-box; } .modal-page-box .form-container input { width: 100% !important; box-sizing: border-box; } /* Loading */ .modal-page-box .status-loading { text-align: center; padding: 24px 0; } .modal-page-box .status-loading h3 { color: var(--guild-primaria); font-family: 'Big Shoulders', serif; margin: 12px 0 4px; font-size: 1.2em; } .modal-page-box .status-loading p { color: rgba(255, 255, 255, 0.6); margin: 0; font-size: 0.9em; } .modal-page-box .loading-spinner { width: 48px; height: 48px; border: 4px solid rgba(255, 255, 255, 0.1); border-top-color: var(--guild-primaria); border-radius: 50%; animation: spinModal 0.8s linear infinite; margin: 0 auto; } /* Fallback info */ .modal-page-box .ts-fallback-info { margin-top: 14px !important; text-align: center; font-size: 0.82em; color: rgba(255, 255, 255, 0.55); } .modal-page-box .ts-fallback-info code { background: rgba(211, 16, 39, 0.15); color: var(--guild-destaque); padding: 2px 8px; border-radius: 3px; font-family: monospace; font-size: 0.95em; border: 1px solid rgba(211, 16, 39, 0.3); } /* Compatibilidade com botao "close" antigo (modais nao migrados) */ .modal .close, .modal-page-box .close { color: rgba(255, 255, 255, 0.6); cursor: pointer; } /* ==================== PHPBB_ALERT (modal de erro/info nativo) ==================== Aplica a identidade da guild no alert do phpBB (usado pelo phpbb.alert() do JS, que e o que aparece quando o alistamento valida algo). */ .phpbb_alert, #phpbb_alert, #phpbb_confirm { background: linear-gradient(180deg, rgba(15, 5, 5, 0.98), rgba(0, 0, 0, 0.98)) !important; border: 2px solid var(--guild-primaria) !important; border-radius: 10px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.7), 0 0 40px rgba(211, 16, 39, 0.25) inset !important; color: var(--guild-texto) !important; padding: 28px 32px !important; max-width: 460px !important; width: 92% !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; z-index: 10001 !important; animation: modalLoginScale 0.3s ease; } .phpbb_alert .alert_title, #phpbb_alert .alert_title, #phpbb_confirm .alert_title { color: var(--guild-primaria) !important; font-family: 'Big Shoulders', 'Cinzel', serif !important; font-size: 1.3em !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; margin: 0 0 14px !important; padding-bottom: 10px !important; border-bottom: 1px solid rgba(211, 16, 39, 0.35) !important; } .phpbb_alert .alert_text, #phpbb_alert .alert_text, #phpbb_confirm .alert_text { color: rgba(255, 255, 255, 0.9) !important; font-size: 0.95em !important; line-height: 1.5 !important; margin: 0 !important; } .phpbb_alert .alert_close, #phpbb_alert .alert_close, #phpbb_confirm .alert_close { position: absolute !important; top: 12px !important; right: 14px !important; width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; border-radius: 50% !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.7) !important; background: transparent !important; transition: all 0.2s ease !important; text-decoration: none !important; } .phpbb_alert .alert_close:hover, #phpbb_alert .alert_close:hover, #phpbb_confirm .alert_close:hover { background: var(--guild-primaria) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; } .phpbb_alert .alert_close i, #phpbb_alert .alert_close i, #phpbb_confirm .alert_close i { font-size: 1em !important; } /* Botoes dentro do confirm (usado pelo phpbb.confirm) */ #phpbb_confirm input[type="button"], #phpbb_confirm button { margin-top: 14px; margin-right: 8px; } /* Overlay escuro */ #darken, .darken { background: rgba(0, 0, 0, 0.85) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px) !important; z-index: 10000 !important; } /* ==================== ALISTAMENTO — erros inline ==================== */ /* Mensagem "*Este campo e obrigatorio" ao lado do label */ .bloco-form-obrigatorio { display: inline-block; margin-left: 8px; color: var(--guild-destaque); font-size: 0.78em !important; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; } /* Hint/descricao abaixo do input quando ha erro */ .bloco-form-validacao { margin-top: 4px; font-size: 0.82em; color: rgba(255, 255, 255, 0.55); line-height: 1.4; } .bloco-form-validacao.bloco-form-erro { color: var(--guild-destaque) !important; font-weight: 600; } /* Input em erro: borda vermelho-clara + glow */ .bloco-form-item.bloco-form-input-erro, input.bloco-form-input-erro { border-color: var(--guild-destaque) !important; box-shadow: 0 0 0 3px rgba(255, 61, 81, 0.18) !important; background: rgba(255, 61, 81, 0.08) !important; } /* ==================== FORM INPUTS PADRONIZADOS (TODOS IGUAIS) ==================== Mesmo estilo para input/textarea/select/radio/checkbox em qualquer pagina. Fonte normal (NAO usar Big Shoulders), tamanho compacto, borda fina vermelha. */ input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="number"], input[type="search"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], textarea, select, .bloco-form-item, input.bloco-form-item, textarea.bloco-form-item, select.bloco-form-item, .bloco-form input[type="text"], .bloco-form input[type="password"], .bloco-form input[type="email"], .bloco-form input[type="tel"], .bloco-form input[type="number"], .bloco-form textarea, .bloco-form select, .modal-page-box input[type="text"], .modal-page-box input[type="password"], .modal-page-box select { font-family: inherit !important; font-size: 0.9em !important; text-transform: none !important; letter-spacing: 0 !important; font-weight: 400 !important; padding: 9px 12px !important; height: auto !important; min-height: 38px !important; line-height: 1.4 !important; border: 1px solid rgba(211, 16, 39, 0.35) !important; background: rgba(0, 0, 0, 0.55) !important; color: var(--guild-texto) !important; border-radius: 4px !important; box-sizing: border-box; box-shadow: none !important; transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } input::placeholder, textarea::placeholder, select::placeholder { color: rgba(255, 255, 255, 0.35) !important; font-weight: 400 !important; text-transform: none !important; letter-spacing: 0 !important; font-size: inherit !important; } /* Focus consistente em TUDO */ input:focus, textarea:focus, select:focus, .bloco-form-item:focus, input.bloco-form-item:focus, textarea.bloco-form-item:focus, select.bloco-form-item:focus { outline: none !important; border-color: var(--guild-primaria) !important; box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.22) !important; background: rgba(0, 0, 0, 0.7) !important; } /* Hover sutil */ input:hover, textarea:hover, select:hover { border-color: rgba(211, 16, 39, 0.55) !important; } /* Disabled / readonly */ input:disabled, textarea:disabled, select:disabled, input[readonly] { opacity: 0.55 !important; cursor: not-allowed !important; background: rgba(0, 0, 0, 0.3) !important; } /* CHECKBOX e RADIO */ input[type="checkbox"], input[type="radio"] { appearance: none !important; -webkit-appearance: none !important; width: 18px !important; height: 18px !important; min-height: unset !important; padding: 0 !important; margin: 0 6px 0 0 !important; border: 1.5px solid rgba(211, 16, 39, 0.55) !important; background: rgba(0, 0, 0, 0.55) !important; cursor: pointer; position: relative; flex-shrink: 0; vertical-align: middle; transition: all 0.15s ease; } input[type="checkbox"] { border-radius: 3px !important; } input[type="radio"] { border-radius: 50% !important; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--guild-primaria) !important; border-color: var(--guild-primaria) !important; } input[type="checkbox"]:checked::after { content: ""; position: absolute; top: 1px; left: 5px; width: 5px; height: 10px; border: solid var(--guild-texto); border-width: 0 2px 2px 0; transform: rotate(45deg); } input[type="radio"]:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--guild-texto); transform: translate(-50%, -50%); } input[type="checkbox"]:focus, input[type="radio"]:focus { box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.22) !important; outline: none !important; } /* LABEL padronizado em forms */ .bloco-form-label, .bloco-form .form-group label, .bloco-form-vertical-item label { font-size: 0.78em !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: rgba(255, 255, 255, 0.75) !important; font-weight: 600 !important; font-family: inherit !important; margin-bottom: 4px !important; } /* ==================== STATUS CARDS no perfil membro (topo) ==================== Box "CONFIRMADO P/PRÓX", "NÃO JOGOU ÚLT.CS", "NÃO POSSUI ALERTAS" — homogeneizar: mesma altura, mesma borda, fonte titulo menor */ .bloco-sala.status-ok, .bloco-sala.status-ok > .bloco-inicial-acao { background: rgba(39, 174, 96, 0.06) !important; border-color: rgba(39, 174, 96, 0.3) !important; } .bloco-sala.status-ok .action-card-icon, .bloco-sala.status-ok > .bloco-inicial-acao > i { color: #4ade80 !important; background: rgba(39, 174, 96, 0.15) !important; border-color: rgba(39, 174, 96, 0.4) !important; } .panel.detalhes > .bloco-sala { flex: 1 1 calc(33% - 12px); min-width: 220px; margin: 0 !important; } .panel.detalhes { display: flex !important; flex-wrap: wrap; gap: 12px !important; padding: 0 !important; } .panel.detalhes > .bloco-sala > .bloco-inicial-acao { padding: 16px 18px !important; min-height: 76px !important; border-radius: 6px; border: 1px solid rgba(211, 16, 39, 0.25); background: rgba(0, 0, 0, 0.45); transition: all 0.2s ease; } .panel.detalhes > .bloco-sala > .bloco-inicial-acao .forumtitle { font-family: inherit !important; font-size: 0.85em !important; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; color: var(--guild-texto); font-weight: 700; line-height: 1.2; } .panel.detalhes > .bloco-sala > .bloco-inicial-acao .forum_description { font-size: 0.78em !important; color: rgba(255, 255, 255, 0.55); margin-top: 2px; } /* ==================== SELECTS ESTILIZADOS ==================== */ /* Setinha customizada (caret vermelho) + bg preto + texto branco. */ select, select.bloco-form-item, .bloco-form select, .modal-page-box select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-color: rgba(0, 0, 0, 0.6) !important; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23d31027' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 14px !important; padding-right: 36px !important; border: 1px solid rgba(211, 16, 39, 0.4) !important; color: var(--guild-texto) !important; border-radius: 4px !important; cursor: pointer; transition: all 0.2s ease; font-family: inherit; } select:hover { border-color: var(--guild-primaria) !important; background-color: rgba(0, 0, 0, 0.8) !important; } select:focus { outline: none !important; border-color: var(--guild-primaria) !important; box-shadow: 0 0 0 3px rgba(211, 16, 39, 0.22) !important; } /* Options dentro do select: estilizar (suporte limitado por SO, mas Chrome/Edge/Firefox respeitam background-color e color) */ select option, .bloco-form select option, .modal-page-box select option { background-color: #1a0606 !important; color: var(--guild-texto) !important; padding: 8px 12px !important; border: none !important; } select option:hover, select option:focus, select option:checked { background: var(--guild-primaria) linear-gradient(0deg, var(--guild-primaria), var(--guild-primaria)) !important; color: var(--guild-texto) !important; } select option:disabled { color: rgba(255, 255, 255, 0.3) !important; background: rgba(0, 0, 0, 0.4) !important; } /* Placeholder do select quando "" / value 0 */ select:invalid, select option[value=""]:first-child { color: rgba(255, 255, 255, 0.4); } /* Mobile: botoes empilhados em coluna */ @media (max-width: 560px) { .modal-page-box .modal-content { padding: 24px 20px 20px; margin: 12px; } .modal-page-box .modal-actions, .modal-actions-row { flex-direction: column !important; } .modal-page-box .modal-actions .button, .modal-actions-row .button { width: 100%; } .modal-header-icone { width: 60px; height: 60px; font-size: 1.6em; } .modal-header-titulo { font-size: 1.3em; } } /* Override do canal-voz.css legacy — esconde elementos que nao usamos mais */ #modalCanalVoz .modal-logo, #modalCanalVoz .modal-navigation { display: none !important; } #modalCanalVoz .modal-box, #modalCanalVoz .modal-body { all: unset; display: block; } /* ==================== MOBILE ==================== */ .mobile-topbar { background: rgba(0, 0, 0, 0.92) !important; border-bottom: 0 !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55), inset 0 -1px 0 rgba(211, 16, 39, 0.18) !important; } .mobile-menu-toggle, .mobile-ts { color: var(--guild-primaria) !important; background: transparent !important; } .mobile-menu-toggle:hover, .mobile-ts:hover { color: var(--guild-destaque) !important; } /* Mobile login: vermelho preenchido (era gradient laranja) */ .mobile-login { background: linear-gradient(135deg, var(--guild-primaria), var(--guild-secundaria)) !important; color: var(--guild-texto) !important; border-radius: 6px !important; } .mobile-login:hover { background: linear-gradient(135deg, var(--guild-hover), var(--guild-secundaria)) !important; } /* ==================== CONTAINER PRINCIPAL ==================== */ /* sidebar.css ja aplica margin-left = sidebar-width no #wrap. Aqui corrigimos: (1) vertical-center que jogava conteudo pro meio (justify-content: center no flex) e (2) centralizamos o conteudo horizontalmente DENTRO da area disponivel (depois da sidebar). */ body.has-sidebar #wrap { justify-content: flex-start !important; } /* Container interno (logado): usa toda a largura disponivel apos a sidebar. So home (S_INDEX) e alistamento (.section-alistamento) tem max-width. Outras paginas internas precisam de espaco horizontal. */ @media (min-width: 1024px) { body.has-sidebar .main_container, body.has-sidebar .inner-wrap { max-width: 100% !important; margin: 0 !important; padding: 24px 32px !important; } /* Excecoes: home logada + alistamento mantem max-width centralizado */ body.has-sidebar.section-index .main_container, body.has-sidebar.section-index .inner-wrap, body.has-sidebar.section-alistamento .main_container, body.has-sidebar.section-alistamento .inner-wrap { max-width: 1180px !important; margin: 0 auto !important; } } /* Espacamentos verticais profissionais */ .principal, .page-body > .forumbg { margin-bottom: 24px; } /* Cards/blocos com cantos sutis e elevacao */ .forumbg, .forumbg.alt_block, .bloco-sala, .panel { border-radius: 6px; overflow: hidden; } .forumbg .inner { padding: 18px 22px; } .forumbg .header { border-bottom: 2px solid var(--guild-primaria); padding-bottom: 10px; margin-bottom: 14px; } /* Grid de informacoes (Sobre/Alistar/Midia) — abas */ .abas-opcoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .abas-opcoes .bloco-inicial-acao { padding: 16px; border: 1px solid rgba(211, 16, 39, 0.35); border-radius: 6px; background: rgba(0, 0, 0, 0.5); } /* Acesso rapido — 2 cards por linha (logado e deslogado) */ .blocos-iniciais { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 14px !important; padding: 0 !important; } @media (max-width: 700px) { .blocos-iniciais { grid-template-columns: 1fr !important; } } /* Quando ha posicionamento, vai em 1 linha de 2 cards */ .blocos-iniciais.blocos-iniciais-linhaUnica { grid-template-columns: repeat(2, 1fr) !important; } .blocos-iniciais > .panel { all: unset; display: block; } /* Posicionamento — sempre full-width (1 box gigante) */ .principal.com-posicionamento { display: flex; flex-direction: column; gap: 22px; } .bloco-pos { width: 100%; } /* principal-inferior centralizar verticalmente */ .principal-inferior { display: flex; flex-direction: column; gap: 22px; } /* PAGINAS COM TABELA (membros, confirmacao, presenca, etc): forumbg ocupa altura minima de 80vh para nao deixar tela vazia */ body.has-sidebar.section-membros .main_container, body.has-sidebar.section-confirmacao .main_container, body.has-sidebar.section-presenca .main_container, body.has-sidebar.section-rifa .main_container, body.has-sidebar.section-alerta .main_container, body.has-sidebar.section-controle_guild .main_container, body.has-sidebar.section-controle_rifa .main_container, body.has-sidebar.section-controle_alerta .main_container, body.has-sidebar.section-controle_sd .main_container, body.has-sidebar.section-monitoramento .main_container, body.has-sidebar.section-pendentes .main_container, body.has-sidebar.section-acessos .main_container { min-height: calc(100vh - 60px); display: flex; flex-direction: column; } body.has-sidebar.section-membros .forumbg, body.has-sidebar.section-confirmacao .forumbg, body.has-sidebar.section-presenca .forumbg, body.has-sidebar.section-rifa .forumbg, body.has-sidebar.section-pendentes .forumbg, body.has-sidebar.section-alerta .forumbg { flex: 1 1 auto; display: flex; flex-direction: column; } body.has-sidebar.section-membros .forumbg > .inner, body.has-sidebar.section-confirmacao .forumbg > .inner, body.has-sidebar.section-presenca .forumbg > .inner { flex: 1 1 auto; display: flex; flex-direction: column; } /* PAGINACAO compacta (botoes Anterior/Proxima) */ .tabela-paginacao, .bloco-paginacao, .tabela > tfoot, .btn-paginacao, button.anterior, button.proxima, a.anterior, a.proxima, .paginacao a, .paginacao button { font-size: 0.78em !important; padding: 7px 14px !important; min-width: auto !important; height: auto !important; min-height: unset !important; } /* Container da paginacao: justifica centralizado, gap menor */ .paginacao, .tabela-paginacao, .bloco-paginacao { display: flex !important; align-items: center; justify-content: center; gap: 8px !important; padding: 10px 12px !important; margin-top: auto; /* empurra paginacao pra baixo se forumbg for flex */ } /* Texto "Página X / Y" */ .paginacao-info, .pagina-atual, .tabela-paginacao span { font-size: 0.78em; color: rgba(255, 255, 255, 0.55); padding: 0 8px; } /* Linhas da tabela menos pesadas */ .tabela tbody tr { border-color: rgba(211, 16, 39, 0.12) !important; } .tabela thead th { font-size: 0.78em !important; text-transform: uppercase; letter-spacing: 0.04em; padding: 10px 12px !important; } /* PERFIL DE MEMBRO — direita 2/3 via flex (template ja tem flex:1 e flex:2, so reforcamos sem quebrar grid). */ @media (min-width: 1024px) { body.section-membro .blocos-panel { display: flex !important; flex-direction: row !important; gap: 18px; align-items: stretch; flex-wrap: wrap; } body.section-membro .blocos-panel > .panel[style*="flex:1"], body.section-membro .blocos-panel > .panel.detalhes:first-child { flex: 1 1 33% !important; min-width: 280px; } body.section-membro .blocos-panel > .panel[style*="flex:2"] { flex: 2 1 60% !important; min-width: 0; } } /* Estado vazio padronizado (sem videos / sem dados) — icone CENTRALIZADO */ .sem-conteudo, .stat-block.sem-conteudo { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; padding: 24px 16px !important; background: transparent !important; text-align: center; } .sem-conteudo p, .stat-block.sem-conteudo p { margin: 0 !important; color: rgba(255, 255, 255, 0.55); line-height: 1.6; font-size: 0.92em; } .sem-conteudo small { opacity: 0.7; font-size: 0.85em; } .sem-conteudo i, .stat-block.sem-conteudo i { display: block !important; margin: 0 auto 8px !important; font-size: 1.8em !important; color: var(--guild-primaria) !important; opacity: 0.5; } /* Variante cinza — para "sem dados" sem chamar atencao */ .sem-conteudo-cinza i { color: rgba(255, 255, 255, 0.35) !important; opacity: 1 !important; } /* BOTOES DE ACAO COMPACTOS (em tabelas — aprovar/excluir/etc) */ .tabela-acoes, table .acoes, .bloco-form-acoes-tabela { display: inline-flex; gap: 4px; align-items: center; } .btn-acao, .tabela button[class*="acao"], .tabela-acoes button, table td button.btn-acao { width: 32px !important; height: 32px !important; min-width: 32px !important; padding: 0 !important; border-radius: 5px !important; background: transparent !important; border: 1px solid rgba(211, 16, 39, 0.4) !important; color: var(--guild-primaria) !important; font-size: 0.85em !important; cursor: pointer; display: inline-flex !important; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: none !important; } .btn-acao:hover { background: var(--guild-primaria) !important; border-color: var(--guild-primaria) !important; color: var(--guild-texto) !important; } .btn-acao.negativo, .btn-acao.btn-recusar { border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.6) !important; } .btn-acao.negativo:hover, .btn-acao.btn-recusar:hover { background: var(--guild-derrota) !important; border-color: var(--guild-derrota) !important; color: var(--guild-texto) !important; } .btn-acao.positivo, .btn-acao.btn-aprovar { border-color: rgba(39, 174, 96, 0.4) !important; color: #4ade80 !important; } .btn-acao.positivo:hover, .btn-acao.btn-aprovar:hover { background: #27ae60 !important; border-color: #27ae60 !important; color: var(--guild-texto) !important; } /* Videos grid (home logada) */ .videos-grid-publico { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 8px 4px 0; } .video-card-publico { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(211, 16, 39, 0.25); border-radius: 6px; overflow: hidden; text-decoration: none !important; color: var(--guild-texto); transition: all 0.25s ease; } .video-card-publico:hover { border-color: var(--guild-primaria); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(211, 16, 39, 0.2); } .video-thumb-publico { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; } .video-thumb-publico img { width: 100%; height: 100%; object-fit: cover; display: block; } .video-play-publico { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(211, 16, 39, 0.9); color: var(--guild-texto); display: flex; align-items: center; justify-content: center; font-size: 1em; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); } .video-info-publico { padding: 12px 14px; } .video-info-publico h4 { margin: 6px 0 4px; font-size: 0.95em; color: var(--guild-texto); line-height: 1.25; } .video-info-publico .video-meta { font-size: 0.78em; color: rgba(255, 255, 255, 0.5); } /* Modal de notificacoes — usa estilo modal-page-box base + overrides */ .notification-modal-overlay { display: none; } .notification-modal-overlay.active, .notification-modal-overlay[style*="flex"] { display: flex !important; align-items: center; justify-content: center; } .notification-modal { max-width: 540px !important; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; } .notification-modal-body { overflow-y: auto; max-height: 55vh; padding-right: 4px; } .notification-list { list-style: none; padding: 0; margin: 0; } .notification-item { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(211, 16, 39, 0.18); border-radius: 6px; margin-bottom: 8px; transition: background 0.2s ease, border-color 0.2s ease; } .notification-item:hover { background: rgba(211, 16, 39, 0.12); border-color: var(--guild-primaria); } .notification-item.unread { border-color: rgba(211, 16, 39, 0.5); background: rgba(211, 16, 39, 0.1); } .notification-item a { display: block; padding: 12px 14px; text-decoration: none !important; color: var(--guild-texto) !important; } .notification-item .notification-content { gap: 4px; display: flex; flex-direction: column; } .notification-item .notification-title { margin: 0; font-size: 0.92em; line-height: 1.4; color: var(--guild-texto); } .notification-item .new-badge { display: inline-block; background: var(--guild-primaria); color: var(--guild-texto); font-size: 0.65em; padding: 2px 6px; border-radius: 3px; margin-right: 6px; text-transform: uppercase; letter-spacing: 0.05em; vertical-align: middle; } .notification-item .notification-reference, .notification-item .notification-time { margin: 4px 0 0; font-size: 0.78em; color: rgba(255, 255, 255, 0.5); } .no-notifications { text-align: center; padding: 30px 12px; color: rgba(255, 255, 255, 0.55); } .no-notifications i { display: block; font-size: 2em; margin-bottom: 8px; color: var(--guild-primaria); opacity: 0.5; } .notification-load-more { text-align: center; margin-top: 14px; } .notification-load-more .btn-load-more { background: transparent; border: 1px solid var(--guild-primaria); color: var(--guild-primaria); padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 0.85em; text-transform: uppercase; letter-spacing: 0.05em; transition: all 0.2s ease; } .notification-load-more .btn-load-more:hover { background: var(--guild-primaria); color: var(--guild-texto); } .btn-mark-read { color: var(--guild-primaria) !important; text-decoration: none !important; font-size: 0.78em; text-transform: uppercase; letter-spacing: 0.05em; } .btn-mark-read:hover { color: var(--guild-destaque) !important; } /* ==================== CTA HERO ==================== */ .hero-banner { background: linear-gradient(135deg, rgba(0, 0, 0, 0.85), rgba(139, 0, 0, 0.4)) !important; border: 1px solid var(--guild-primaria); } .cta-alistar { background: rgba(0, 0, 0, 0.7) !important; border: 1px solid var(--guild-primaria); } .cta-icon { filter: drop-shadow(0 0 8px var(--guild-primaria)); }