@import url('https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap'); /* ========================================================================== DESIGN TOKENS Identidade "transmissao de estadio a noite": base quase preta com tom verde-azulado frio (gramado sob refletores), tres acentos com papeis claros - verde (positivo/gramado), ouro (dinheiro/premio) e magenta (assinatura "ao vivo": novidades, urgencia, destaque) - e azul para dados. ========================================================================== */ :root { /* Tokens de fundo agora em rgba (semi-transparentes): com uma foto de estádio atrás de tudo (ver ".bg-onboard/.bg-game/.bg-match" abaixo), cards/sidebar/inputs etc. viram "vidro fosco" em vez de painéis pretos sólidos — a imagem sempre aparece por trás. */ --bg-0: rgba(60,65,68,0.38); --bg-1: rgba(72,78,82,0.50); --bg-2: rgba(85,92,97,0.60); --bg-3: rgba(98,106,112,0.68); --bg-4: rgba(110,118,125,0.74); --line: rgba(180,190,196,0.26); --line-bright: rgba(11,61,58,0.40); --pitch: #22b562; --pitch-dark: #0f7a3e; --pitch-glow: rgba(20,92,82,0.35); --gold: #f9c440; --gold-dark: #c9931a; --gold-glow: rgba(227,167,58,0.32); --live: #ef3ba0; --live-dark: #b5217a; --live-glow: rgba(214,85,63,0.35); --blue: #2b9fe0; --blue-dark: #1c6fa3; --danger: #ef4444; --danger-dark: #b52d2d; --text-0: #f5f8f7; --text-1: #a9b9b9; --text-2: #6d8080; --radius: 10px; --radius-lg: 16px; --cut: 14px; --font-hero: 'Anton', sans-serif; --font-display: 'Oswald', sans-serif; --font-body: 'Inter', sans-serif; } * { box-sizing: border-box; margin: 0; padding: 0; } /* IMPORTANTE: o fundo (cor OU imagem) só é declarado no , nunca no . Se o tivesse um background próprio, o navegador pinta o canvas/rolagem inteiro com ELE em vez de propagar o do — em páginas mais altas que a tela (ex.: "Criar Meu Clube"), a parte que passa da altura da viewport ficava preta sólida, mesmo com a foto aplicada no body. Deixando o sem background, o navegador propaga o do (inclusive a imagem com "fixed") pra tela toda, sem esse "rodapé" preto. */ html { height: 100%; } body { min-height: 100%; background: #3a3e42; /* fallback sólido cinza fosco — sempre coberto por uma das fotos abaixo */ color: var(--text-0); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* ===== FUNDO FOTOGRÁFICO ===== Pedido do usuário: a mesma foto (estadio_menu.jpg) em TODAS as páginas do jogo, não só nas de login -- antes cada "grupo" de tela (login, jogo, partida) tinha sua própria foto de estádio, trocada por App.updateBodyBackground() a cada render(); as 3 classes continuam existindo e sendo trocadas (várias outras regras de CSS dependem delas pra outras coisas), só que agora as 3 apontam pro MESMO fundo. SEM véu escuro nenhum por cima -- pedido explícito do usuário: a foto aparece limpa/transparente, sem gradiente preto sobreposto (os cards/sidebar já têm seu próprio verniz semi-transparente pra manter o texto legível). */ body.bg-onboard, body.bg-game, body.bg-match { background-repeat: no-repeat; background-size: cover; background-position: center; background-attachment: fixed; background-image: url("../img/bg/estadio_menu.jpg"); } #app { min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.03em; font-weight: 600; text-transform: uppercase; } button { font-family: var(--font-body); cursor: pointer; border: none; outline: none; background: none; color: inherit; } input[type="text"], input[type="number"], select { font-variant-numeric: tabular-nums; } a { color: inherit; text-decoration: none; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--bg-1); } ::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 4px; } /* ===== BOTOES - canto cortado, assinatura visual recorrente do app ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); font-family: var(--font-display); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; font-size: 13px; transition: transform 0.12s ease, filter 0.12s ease, box-shadow 0.15s ease; position: relative; } .btn:hover { filter: brightness(1.14); } .btn:active { transform: scale(0.97); } .btn-primary { background: linear-gradient(135deg, var(--pitch) 0%, var(--pitch-dark) 100%); color: #06170c; box-shadow: 0 4px 18px var(--pitch-glow); } .btn-gold { background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: #241a02; box-shadow: 0 4px 18px var(--gold-glow); } .btn-live { background: linear-gradient(135deg, var(--live) 0%, var(--live-dark) 100%); color: #2a0316; box-shadow: 0 4px 18px var(--live-glow); } .btn-ghost { background: var(--bg-3); border: 1px solid var(--line-bright); color: var(--text-1); } .btn-ghost:hover { color: var(--text-0); border-color: var(--pitch); } .btn-danger { background: var(--bg-3); border: 1px solid var(--danger); color: var(--danger); } /* ===== CARDS ===== */ .card { background: #FFFDF8; border: 1px solid rgba(11,61,58,0.35); border-radius: var(--radius); padding: 18px; } .card-title { font-family: var(--font-display); font-size: 12.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-1); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; } .card-title .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); } .pill { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 100px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; background: var(--bg-4); color: var(--text-1); border: 1px solid transparent; } .pill.gold { background: rgba(227,167,58,0.14); color: var(--gold); border-color: rgba(227,167,58,0.25); } .pill.pitch { background: rgba(20,92,82,0.16); color: var(--pitch); border-color: rgba(20,92,82,0.28); } .pill.danger { background: rgba(196,34,44,0.16); color: var(--danger); border-color: rgba(196,34,44,0.28); } .pill.live { background: rgba(214,85,63,0.16); color: var(--live); border-color: rgba(214,85,63,0.3); } .hidden { display: none !important; } .text-input { width: 100%; padding: 11px 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text-0); font-family: var(--font-body); font-size: 14px; } .text-input:focus { outline: none; border-color: var(--pitch); } .text-input:disabled { opacity: .5; cursor: not-allowed; } .stat-bar-track { height: 6px; background: var(--bg-4); border-radius: 100px; overflow: hidden; } .stat-bar-fill { height: 100%; background: linear-gradient(90deg, var(--pitch-dark), var(--pitch)); border-radius: 100px; } /* ===== SPLASH / HOME ===== */ .screen-home { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 34px; text-align: center; position: relative; overflow: hidden; padding: 40px 20px; } .screen-home::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 900px 500px at 8% -15%, rgba(20,92,82,0.22), transparent 60%), radial-gradient(ellipse 900px 500px at 92% -15%, rgba(214,85,63,0.14), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 84px), repeating-linear-gradient(90deg, rgba(255,255,255,0.025) 0px, rgba(255,255,255,0.025) 1px, transparent 1px, transparent 84px); pointer-events: none; } .screen-home::after { content: ""; position: absolute; top: 50%; left: 50%; width: 640px; height: 640px; transform: translate(-50%, -54%); border: 1.5px solid rgba(255,255,255,0.05); border-radius: 50%; pointer-events: none; } .home-kicker { z-index: 1; font-family: var(--font-display); font-size: 11.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--live); display: flex; align-items: center; gap: 10px; } .home-kicker::before, .home-kicker::after { content: ""; width: 30px; height: 1px; background: linear-gradient(90deg, transparent, var(--live)); } .home-kicker::after { background: linear-gradient(90deg, var(--live), transparent); } .home-logo { z-index: 1; font-family: var(--font-hero); font-weight: 400; font-size: 88px; letter-spacing: 0.01em; line-height: 0.92; text-transform: uppercase; background: linear-gradient(180deg, #ffffff 0%, #c9d6d4 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 30px rgba(20,92,82,0.25)); } .home-logo span { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .home-logo small { display: inline-block; font-family: var(--font-display); font-size: 26px; font-weight: 700; vertical-align: super; color: var(--pitch); -webkit-text-fill-color: var(--pitch); margin-left: 6px; } .home-sub { z-index: 1; color: var(--text-1); font-family: var(--font-display); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; margin-top: 4px; } .home-ticker { z-index: 1; display: flex; gap: 0; background: var(--bg-2); border: 1px solid var(--line); border-radius: 100px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,0.35); } .home-ticker-item { padding: 9px 22px; font-family: var(--font-display); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-1); border-right: 1px solid var(--line); display: flex; align-items: baseline; gap: 7px; } .home-ticker-item:last-child { border-right: none; } .home-ticker-item b { font-family: var(--font-hero); font-size: 17px; color: var(--gold); font-weight: 400; } .home-menu { z-index: 1; display: flex; flex-direction: column; gap: 12px; width: 300px; } .home-menu .btn { width: 100%; padding: 16px; font-size: 14px; } .home-menu-row { display: flex; gap: 10px; } .home-menu-row .btn { flex: 1; padding: 13px; font-size: 12px; } .home-account { z-index: 1; font-size: 12px; color: var(--text-2); text-align: center; } .home-account.muted { opacity: 0.6; } .home-account a { color: var(--gold); cursor: pointer; text-decoration: underline; } .home-account a:hover { color: var(--gold-dark); } .auth-label { font-size: 11px; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 6px; } .auth-msg { font-size: 12.5px; padding: 10px 14px; border-radius: 8px; margin-bottom: 16px; } .auth-msg.ok { background: rgba(20,92,82,0.12); color: var(--pitch); border: 1px solid var(--pitch); } .auth-msg.err { background: rgba(196,34,44,0.1); color: var(--danger); border: 1px solid var(--danger); } .badge-strip { display: flex; gap: 12px; z-index: 1; flex-wrap: wrap; justify-content: center; max-width: 640px; } .badge-chip { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 700; border: 2px solid rgba(255,255,255,0.12); box-shadow: 0 4px 14px rgba(0,0,0,0.4); transition: box-shadow 0.15s ease, filter 0.15s ease; } .badge-chip:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.55); filter: brightness(1.12); } /* ===== ESCUDO REAL EM SVG (1 modelo pronto com faixa pro nome) ===== */ .crest-svg-wrap { background-color: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; position: relative; overflow: visible; } .crest-svg-wrap svg, .crest-svg-wrap img { width: 100%; height: 100%; display: block; object-fit: contain; } /* ===== CARROSSEL DE ESCUDO ESTILO FIFA26 (tela de criar clube) ===== */ .crest-carousel { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 10px 0 4px; } .crest-carousel-arrow { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-1); font-size: 16px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.15s ease; } .crest-carousel-arrow:hover { border-color: var(--gold); color: var(--gold); background: var(--bg-1); } .crest-carousel-stage { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 220px; } .crest-carousel-crest { width: 170px; height: 212px; } .crest-carousel-label { font-family: var(--font-display); font-size: 13px; color: var(--text-1); text-align: center; } .crest-carousel-counter { font-size: 11px; color: var(--text-2); letter-spacing: 0.04em; } /* ===== ABAS DE GALERIA DE ESCUDO (Brasileiros Original / Neutros) ===== */ .crest-tabs { display: flex; gap: 8px; flex-wrap: wrap; } .crest-tab-btn { padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); font-size: 12px; font-family: var(--font-display); cursor: pointer; transition: all 0.15s ease; } .crest-tab-btn:hover { border-color: var(--gold); color: var(--text-1); } .crest-tab-btn.active { background: rgba(227,167,58,0.14); border-color: var(--gold); color: var(--gold); } /* ===== LAYOUT ===== */ .layout { flex: 1; display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; } .main-view { padding: 28px 34px 60px; overflow-y: auto; max-height: 100vh; } .view-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; } .view-header h2 { font-size: 25px; color: var(--text-0); position: relative; padding-left: 14px; } .view-header h2::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 4px; background: linear-gradient(180deg, var(--pitch), var(--gold)); border-radius: 2px; } .view-header .sub { color: var(--text-2); font-size: 13px; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } @media (max-width: 900px) { .layout { grid-template-columns: 76px 1fr; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .home-logo { font-size: 56px; } .home-ticker { flex-wrap: wrap; border-radius: var(--radius); justify-content: center; } } /* ===== MODO PAISAGEM NO CELULAR (celular deitado) ===== Pedido do usuário: o jogo fica muito apertado no celular na vertical -- deitando o aparelho sobra bem mais LARGURA, mas a ALTURA da tela desaba pra uns 350-430px (contra 700-900px na vertical). Por isso o gargalo nesse modo é altura, não largura -- os breakpoints normais (max-width) não pegam esse caso (a largura em paisagem costuma passar de 640-900px tranquilo), então usamos orientation:landscape + max-height, que só dispara nesse cenário específico (celular deitado), sem afetar tablet/ desktop. Ideia geral: encolher tudo que é "moldura" (respiro, hero da home, sidebar, barra de atalhos) pra sobrar altura útil pro conteúdo de verdade (tabelas, escalação, calendário etc.), que já rola dentro de .main-view (overflow-y:auto) normalmente. */ @media (orientation: landscape) and (max-height: 500px) { .layout { grid-template-columns: 64px 1fr; } .main-view { padding: 12px 16px 30px; } .view-header { margin-bottom: 12px; } .view-header h2 { font-size: 18px; } .view-header .sub { font-size: 11px; } /* Tela inicial (login/splash) -- normalmente tem MUITO respiro vertical (gap:34px, padding:40px, logo com 88px), pensado pra tela cheia de desktop; aqui vira compacto o bastante pra caber inteira sem rolar. */ .screen-home { gap: 10px; padding: 14px 16px; } .home-kicker { font-size: 9px; letter-spacing: 0.28em; } .home-logo { font-size: 34px; } .home-logo small { font-size: 14px; } .home-sub { font-size: 10px; margin-top: 0; } .home-ticker-item { padding: 6px 12px; font-size: 10px; } .home-ticker-item b { font-size: 13px; } .home-menu { width: 260px; gap: 8px; } .home-menu .btn { padding: 10px; font-size: 12px; } .home-menu-row .btn { padding: 9px; } .badge-strip { display: none; } /* faixa de escudos é só decorativa -- sacrificada primeiro pra sobrar altura */ } .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 999; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 10px; pointer-events: none; max-width: min(360px, calc(100vw - 48px)); } .toast { background: var(--bg-3); border: 1px solid var(--pitch); border-left: 3px solid var(--pitch); color: var(--text-0); padding: 13px 20px; border-radius: 8px; font-size: 13px; box-shadow: 0 12px 30px rgba(0,0,0,0.5); animation: toastIn 0.25s ease; pointer-events: auto; } @keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .golden-icon { height: 1.6em; width: auto; vertical-align: -0.45em; display: inline-block; margin: 0 1px; } .cashpass-icon { height: 1.6em; width: auto; vertical-align: -0.45em; display: inline-block; margin: 0 1px; } /* ========================================================================== "VIDRO FOSCO" — desfoque por trás dos painéis semi-transparentes. Reúne, num só lugar, todo elemento que usa fundo var(--bg-N) e é grande o bastante pra precisar de blur (evita repetir a declaração em cada seletor espalhado por style/menu/dashboard/club.css). Sem isso, o texto dentro dos cards ficaria "boiando" direto sobre a foto do estádio. ========================================================================== */ .card, .profile-card, .club-tag, .text-input, select, .crest-carousel-stage, .home-ticker, .toast, .scoreboard, .commentary-box, .halftime-menu, .sub-option, .ttab, .table-full th, .mini-table th, .next-match-card, .kpi, .fixture-row, .option-item, .sponsor-card, .treasury-banner, .trophy-card, .training-card, .chat-bubble, .nm-kickoff, .window-banner, .ticker-bar, .ticker-brand, .ticker-toggle, .auth-msg { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } /* ========================================================================== CASCA DAS ABAS (view-shell) — Criador e Carreira Envolve o conteúdo de todas as abas dos dois modos numa moldura branca de card, para o conteúdo não ficar solto sobre o fundo. Adicionado em 25/07/2026 a pedido do proprietário ("casca padrão branca em todas as abas, tanto Criador como Carreira"). ========================================================================== */ .view-shell { background: var(--white, #FFFDF8); border: 1px solid var(--line, rgba(11,61,58,0.20)); border-radius: var(--radius); padding: 22px 24px; min-height: calc(100vh - 96px); box-sizing: border-box; } @media (max-width: 760px) { .view-shell { padding: 14px 14px 24px; min-height: calc(100vh - 70px); } }