/* ============================================================ MU OLDSCHOOL — responsive.css Adicione APÓS o style.css no ============================================================ */ /* ── BREAKPOINTS USADOS ≤ 1200px → tablet / notebook pequeno ≤ 900px → tablet retrato ≤ 600px → celular ≤ 400px → celular pequeno ============================================================ */ /* ── CONTAINER ── */ @media (max-width: 1600px) { #container { width: 100%; padding: 0 10px; } } /* ── TABLET ── */ @media (max-width: 1200px) { /* Logo menor */ .logo-title { font-size: 72px; letter-spacing: 5px; } .logo-subtitle { font-size: 20px; letter-spacing: 10px; } /* Laterais um pouco mais estreitas */ .col-lateral { flex: 0 0 220px; width: 220px; min-width: 220px; } /* Navbar: padding menor */ #navbar ul li a { padding: 16px 30px; font-size: 12px; } } /* ── TABLET RETRATO ── */ @media (max-width: 900px) { /* Logo */ .logo-title { font-size: 54px; letter-spacing: 4px; } .logo-subtitle { font-size: 15px; letter-spacing: 8px; } #header { padding: 24px 0 18px; } /* Navbar: itens menores e quebram linha */ #navbar ul li a { padding: 12px 16px; font-size: 11px; letter-spacing: 1px; } #navbar ul li + li a::before { display: none; } /* Layout: remove colunas laterais → empilha tudo */ .layout-row { flex-direction: column; gap: 12px; } .col-lateral { flex: none; width: 100%; min-width: 0; } /* Lateral direita sobe abaixo do centro */ .col-centro { order: 1; } .col-lateral-esq { order: 0; } .col-lateral-dir { order: 2; } /* Rankings laterais: empilha em coluna */ .panel-sidebar .panel-body > div[style*="display:flex"], .panel-sidebar .panel-body > div[style*="display: flex"] { flex-direction: column !important; } .panel-sidebar .panel-body > div > div[style*="flex:1"] { min-width: 0 !important; width: 100% !important; } } /* ── CELULAR ── */ @media (max-width: 600px) { body { font-size: 16px; } /* Logo */ .logo-title { font-size: 38px; letter-spacing: 3px; } .logo-subtitle { font-size: 12px; letter-spacing: 5px; } .ornament-line { width: 60px; } #header { padding: 16px 0 12px; } /* Navbar */ #navbar { width: 100%; border-left: none; border-right: none; border-radius: 0; } #navbar ul { flex-wrap: wrap; } #navbar ul li { flex: 1 1 auto; text-align: center; min-width: 80px; } #navbar ul li a { padding: 10px 6px; font-size: 10px; letter-spacing: 0.5px; } /* Container / Conteúdo */ #container { padding: 0 6px; margin: 10px auto; } .module-contents { padding: 12px 10px; } /* Títulos */ .page-title { font-size: 18px; letter-spacing: 1px; } .module-contents h2 { font-size: 16px; } .module-contents p { font-size: 16px; } /* Botões sociais — empilha */ .social-btn { font-size: 10px; padding: 10px; } /* Painéis: garante que caixas de ranking internas virem colunas */ [style*="display:flex"][style*="gap:10px"] { flex-direction: column !important; } /* Rankings de reset/kills/online — colunas internas */ .panel-sidebar-events .panel-body, .panel-sidebar .panel-body { padding: 8px; } /* Tabelas de ranking: reduz padding e fonte */ .rankings-table tr td { font-size: 14px; padding: 7px 5px; } .rankings-table { width: 100%; } .rankings-menu a { width: 100px; font-size: 10px; } /* Info-table */ .info-table td { padding: 8px 10px; font-size: 14px; } /* Castle Siege */ div[style*="castle_owner_bg"] { padding: 20px 10px !important; } div[style*="castle_owner_bg"] h2 { font-size: 24px !important; } /* Footer */ .footer { padding: 30px 0 24px; font-size: 12px; } .footer .col-xs-8 { width: 100%; } /* Modal */ .modal-dialog { margin: 10px; } .modal-content { padding: 0; } /* Inputs */ input[type=text], input[type=email], input[type=password], input[type=number], .form-control { font-size: 16px !important; } /* evita zoom automático no iOS */ } /* ── CELULAR PEQUENO ── */ @media (max-width: 400px) { .logo-title { font-size: 30px; letter-spacing: 2px; } .logo-subtitle { font-size: 10px; letter-spacing: 3px; } #navbar ul li a { padding: 8px 4px; font-size: 9px; } .rankings-menu a { width: 80px; } } /* ── CORREÇÕES GERAIS MOBILE ── */ /* Evita overflow horizontal em toda a página */ html, body { max-width: 100%; overflow-x: hidden; } /* Imagens responsivas */ img { max-width: 100%; height: auto; } /* Tabelas não explodem a largura */ table { max-width: 100%; } .table-responsive-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Grids de ranking internos (flex inline) viram coluna no mobile */ @media (max-width: 600px) { /* Captura os divs de ranking gerados pelo PHP que usam style inline com flex */ .panel-sidebar > .panel-body > div { flex-wrap: wrap !important; } } /* Canvas de partículas — não interfere no scroll mobile */ #particles-canvas { pointer-events: none; } /* Scroll suave em dispositivos touch */ @media (hover: none) { * { -webkit-tap-highlight-color: transparent; } #navbar ul li a { min-height: 44px; display: flex; align-items: center; justify-content: center; } }