/* ========================================================================== Top Torneio — ajustes sobre o Bootstrap 5.3 (mobile first) As cores vêm de variáveis definidas no (tema da arena ou do torneio): --tt-primary, --tt-primary-rgb, --tt-primary-contrast, --tt-secondary, --tt-secondary-contrast Ajustes específicos de uma arena: public/css/arena.css ========================================================================== */ :root { --tt-radius: 1rem; --tt-bg: #f3f4f6; } body { --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-family: var(--bs-body-font-family); background: var(--tt-bg); --bs-primary: var(--tt-primary); --bs-primary-rgb: var(--tt-primary-rgb); --bs-link-color: var(--tt-primary); --bs-link-color-rgb: var(--tt-primary-rgb); --bs-link-hover-color: color-mix(in srgb, var(--tt-primary) 80%, #000); -webkit-tap-highlight-color: transparent; } /* ---------- Botões e cores do tema ---------- */ .btn-primary { --bs-btn-bg: var(--tt-primary); --bs-btn-border-color: var(--tt-primary); --bs-btn-color: var(--tt-primary-contrast); --bs-btn-hover-bg: color-mix(in srgb, var(--tt-primary) 85%, #000); --bs-btn-hover-border-color: color-mix(in srgb, var(--tt-primary) 85%, #000); --bs-btn-hover-color: var(--tt-primary-contrast); --bs-btn-active-bg: color-mix(in srgb, var(--tt-primary) 75%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--tt-primary) 75%, #000); --bs-btn-active-color: var(--tt-primary-contrast); --bs-btn-disabled-bg: var(--tt-primary); --bs-btn-disabled-border-color: var(--tt-primary); --bs-btn-disabled-color: var(--tt-primary-contrast); } .btn-outline-primary { --bs-btn-color: var(--tt-primary); --bs-btn-border-color: var(--tt-primary); --bs-btn-hover-bg: var(--tt-primary); --bs-btn-hover-border-color: var(--tt-primary); --bs-btn-hover-color: var(--tt-primary-contrast); --bs-btn-active-bg: var(--tt-primary); --bs-btn-active-border-color: var(--tt-primary); --bs-btn-active-color: var(--tt-primary-contrast); } .text-bg-primary { background-color: var(--tt-primary) !important; color: var(--tt-primary-contrast) !important; } .bg-tema-secundaria { background: var(--tt-secondary); color: var(--tt-secondary-contrast); } .bg-primary-subtle { background-color: rgba(var(--tt-primary-rgb), .12) !important; } .text-primary { color: var(--tt-primary) !important; } .border-primary { border-color: var(--tt-primary) !important; } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--tt-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--tt-primary-rgb), .2); } .form-check-input:checked { background-color: var(--tt-primary); border-color: var(--tt-primary); } .progress-bar { background-color: var(--tt-primary); } .nav-pills .nav-link.active { background-color: var(--tt-primary); color: var(--tt-primary-contrast); } .nav-pills .nav-link { color: inherit; } /* ---------- Tamanhos pensados para o toque ---------- */ .btn { border-radius: .75rem; font-weight: 500; } .btn-lg { padding: .85rem 1.25rem; font-size: 1.05rem; } .form-control, .form-select { border-radius: .75rem; min-height: 3rem; font-size: 1rem; } /* 16px evita zoom no iOS */ .form-control-lg { min-height: 3.5rem; } textarea.form-control { min-height: 6rem; } .form-label { font-weight: 500; margin-bottom: .35rem; } .card { border: 0; border-radius: var(--tt-radius); box-shadow: 0 1px 3px rgba(0,0,0,.06); } .card-header:first-child { border-radius: var(--tt-radius) var(--tt-radius) 0 0; } .rounded-tt { border-radius: var(--tt-radius) !important; } /* ---------- Estrutura pública ---------- */ .topo { background: var(--tt-secondary); color: var(--tt-secondary-contrast); } .topo a:not(.btn) { color: inherit; text-decoration: none; } .topo .logo { max-height: 36px; width: auto; } .conteudo { max-width: 720px; margin: 0 auto; padding: 1rem; } .conteudo-largo { max-width: 1100px; margin: 0 auto; padding: 1rem; } /* Barra de ação fixa no rodapé (celular) */ .barra-acao { position: sticky; bottom: 0; z-index: 1020; background: rgba(255,255,255,.96); backdrop-filter: blur(6px); border-top: 1px solid rgba(0,0,0,.08); padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom)); margin: 1rem -1rem -1rem; } /* Capa do torneio */ .capa { position: relative; background: var(--tt-secondary) center/cover no-repeat; color: #fff; min-height: 220px; display: flex; align-items: flex-end; } .capa::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.75) 100%); } .capa > * { position: relative; z-index: 1; } @media (min-width: 768px) { .capa { min-height: 320px; } } .info-item { display: flex; gap: .75rem; align-items: flex-start; } .info-item .bi { font-size: 1.25rem; color: var(--tt-primary); line-height: 1.2; } /* Cartão de categoria */ .categoria-card { transition: transform .1s ease; } .categoria-card:active { transform: scale(.99); } .categoria-card .progress { height: .4rem; } .badge-regra { background: #eef0f3; color: #495057; font-weight: 500; } /* Passos da inscrição */ .passos { display: flex; gap: .35rem; } .passos span { flex: 1; height: .3rem; border-radius: 1rem; background: #dee2e6; } .passos span.ativo { background: var(--tt-primary); } /* Opção selecionável grande (radio em cartão) */ .opcao { display: block; border: 2px solid #e5e7eb; border-radius: var(--tt-radius); padding: 1rem; background: #fff; cursor: pointer; } .opcao:has(input:checked), .opcao.selecionada { border-color: var(--tt-primary); background: rgba(var(--tt-primary-rgb), .06); } .opcao.desabilitada { opacity: .55; cursor: not-allowed; } /* Membros da equipe */ .membro { display: flex; align-items: center; gap: .75rem; } .avatar { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--tt-primary-rgb), .15); color: var(--tt-primary); font-weight: 700; flex-shrink: 0; } .avatar.vazio { background: #eef0f3; color: #adb5bd; border: 2px dashed #ced4da; } /* Código de acesso */ .input-codigo { letter-spacing: .6em; text-align: center; font-size: 1.6rem; font-weight: 700; } /* Pix */ .qr-pix { width: 100%; max-width: 260px; image-rendering: pixelated; } /* Ícone de ajuda (ⓘ) */ .ajuda { color: #6c757d; cursor: help; font-size: .9em; } .ajuda:hover { color: var(--tt-primary); } /* Texto longo (regulamento/termos) */ .texto-longo { line-height: 1.7; } .texto-longo h5 { font-weight: 700; } [x-cloak] { display: none !important; } /* ---------- Tabelas responsivas (viram cartões no celular) — usadas no painel ---------- */ .table-card { background: #fff; border-radius: var(--tt-radius); overflow: hidden; } @media (max-width: 991.98px) { .table-responsive-cards thead { display: none; } .table-responsive-cards tr { display: block; border-bottom: 1px solid #eee; padding: .5rem 0; } .table-responsive-cards td { display: flex; justify-content: space-between; gap: 1rem; border: 0 !important; padding: .3rem .75rem !important; text-align: right; } .table-responsive-cards td::before { content: attr(data-label); font-weight: 600; color: #6c757d; text-align: left; } .table-responsive-cards td[data-label=""]::before { content: none; } } .min-w-0 { min-width: 0; } /* ---------- Marca TOP Torneios (logotipo tipográfico) ---------- */ .marca-texto { font-family: 'Barlow Condensed', 'Inter', system-ui, sans-serif; font-style: italic; font-weight: 800; line-height: 1; display: inline-flex; align-items: center; gap: .22em; white-space: nowrap; letter-spacing: .005em; } .marca-texto .marca-top { background: #C8F31D; color: #0B1B2B; padding: .06em .24em .04em .2em; border-radius: .14em; transform: skewX(-10deg); display: inline-block; } .marca-texto .marca-top, .marca-texto .marca-resto { font-style: italic; } .marca-texto .marca-resto { color: inherit; } .marca-sm { font-size: 1.2rem; } .marca-md { font-size: 1.5rem; } .marca-lg { font-size: 2.3rem; } .credito-dev { font-size: .75rem; color: inherit; opacity: .7; } .credito-dev strong { font-weight: 600; } /* ---------- Etiquetas de dados (site e painel) ---------- */ .dados-etiquetas { display: flex; flex-wrap: wrap; gap: .45rem; } .etiqueta { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; background: #f1f5f9; color: #1e293b; border-radius: .55rem; padding: .38rem .65rem; font-size: .85rem; line-height: 1.2; overflow-wrap: anywhere; text-decoration: none; } .etiqueta > .bi:first-child { color: #64748b; font-size: .95em; flex-shrink: 0; } .etiqueta-link:hover { background: #e2e8f0; color: #0f172a; } .etiqueta-destaque { background: rgba(var(--tt-primary-rgb), .08); } /* ---------- Selos em tons suaves (fora do painel, use .selo-suave) ---------- */ .selo-suave { font-weight: 600; font-size: .72rem; padding: .35em .7em; border-radius: 999px; } .selo-suave.text-bg-success { background: #dcfce7 !important; color: #166534 !important; } .selo-suave.text-bg-info { background: #e0f2fe !important; color: #075985 !important; } .selo-suave.text-bg-warning { background: #fef3c7 !important; color: #92400e !important; } .selo-suave.text-bg-danger { background: #fee2e2 !important; color: #991b1b !important; } .selo-suave.text-bg-secondary, .selo-suave.text-bg-dark { background: #f1f5f9 !important; color: #475569 !important; } /* ---------- Minhas inscrições ---------- */ .torneio-topo { display: flex; gap: .85rem; align-items: center; padding: 1rem; color: inherit; text-decoration: none; border-bottom: 1px solid #eef1f5; } .torneio-miniatura { width: 3.5rem; height: 3.5rem; border-radius: .75rem; flex-shrink: 0; background: #0B1B2B center/cover no-repeat; display: grid; place-items: center; color: #fff; font-size: .55rem; } .inscricao-item { padding: 1rem; } .inscricao-item + .inscricao-item { border-top: 1px solid #eef1f5; } .situacao { display: flex; gap: .6rem; align-items: flex-start; border-radius: .7rem; padding: .65rem .8rem; font-size: .88rem; line-height: 1.35; } .situacao .bi { font-size: 1.05rem; line-height: 1.2; } .situacao-reservada { background: #fffbeb; color: #92400e; } .situacao-garantida { background: #eff6ff; color: #1e40af; } .situacao-confirmada { background: #f0fdf4; color: #166534; } .situacao-encerrada { background: #f1f5f9; color: #475569; } /* ---------- Abas da página do torneio ---------- */ .abas-torneio { position: sticky; top: 0; z-index: 1010; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; background: #fff; padding: .25rem; margin: -1.6rem 0 1rem; border-radius: .8rem; box-shadow: 0 4px 14px rgba(15, 23, 42, .08); border: 1px solid #e6e9f0; } .abas-torneio .aba { border: 0; background: transparent; color: #475569; font-weight: 600; font-size: .88rem; padding: .5rem .5rem; border-radius: .6rem; display: flex; align-items: center; justify-content: center; gap: .4rem; line-height: 1.2; white-space: nowrap; } .abas-torneio .aba .bi { font-size: .95em; } .abas-torneio .aba:hover { background: #f1f5f9; color: #0f172a; } .abas-torneio .aba.active { background: var(--tt-primary); color: var(--tt-primary-contrast); box-shadow: 0 1px 4px rgba(var(--tt-primary-rgb), .3); } @media (min-width: 768px) { .abas-torneio { margin-top: -1.9rem; padding: .3rem; } .abas-torneio .aba { font-size: .95rem; padding: .65rem .75rem; } }