/* Futibola.com.br - Estilos Principais */ /* Mobile-first, responsivo e otimizado */ /* ========== Reset e Base ========== */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* Cores principais */ --primary: #1a73e8; --primary-dark: #1557b0; --secondary: #34a853; --dark: #202124; --dark-secondary: #5f6368; --light: #f8f9fa; --border: #dadce0; --white: #ffffff; --success: #34a853; --warning: #fbbc04; --danger: #ea4335; /* Tipografia */ --font-main: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-base: 16px; --line-height-base: 1.6; /* Espaçamentos */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-2xl: 48px; /* Sombras */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15); /* Border radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-full: 9999px; /* Transições */ --transition: all 0.3s ease; } /* ========================================================================== Design Tokens 2026 (DESIGN.md — "Pure Monochrome") Story 1.1: novo sistema visual. Nomes prefixados com `--fb-` para nunca colidir com os tokens antigos acima, que permanecem intactos até as Stories 1.2–1.5 migrarem as páginas que ainda dependem deles. Nenhum token de cor de clube (--club-accent) é declarado aqui (AD-3) — cor de clube é escopada por página, fora do escopo desta história. Dark mode via `prefers-color-scheme: dark` como fallback; Story 1.6 adiciona override manual via `data-theme="dark"|"light"` em `` (setado a partir do cookie `site_theme`) — ver blocos `:root[data-theme=...]` logo após o media query abaixo, que vencem por especificidade quando o visitante escolheu um tema explicitamente. ========================================================================== */ :root { /* Cores — modo claro (default) */ --fb-color-surface-base: #FFFFFF; --fb-color-surface-elevated: #F7F7F7; --fb-color-text-primary: #111111; --fb-color-text-secondary: #6B6B6B; --fb-color-border: #E0E0E0; --fb-color-ink: #111111; --fb-color-ink-contrast: #FFFFFF; --fb-color-success: #3C7A52; --fb-color-warning: #8A7B45; --fb-color-danger: #B23A3A; --fb-color-neutral-draw: #BFBFBF; /* Tipografia — registro duplo (editorial "display" vs. dados "data") */ --fb-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --fb-display-weight: 900; --fb-display-tracking: -0.02em; --fb-display-sm-weight: 800; --fb-display-sm-tracking: -0.01em; --fb-data-weight: 400; --fb-data-label-weight: 700; --fb-data-label-size: 11px; --fb-data-label-tracking: 0.06em; /* Cantos arredondados */ --fb-radius-sm: 6px; --fb-radius-md: 10px; --fb-radius-lg: 14px; --fb-radius-full: 9999px; /* Espaçamentos */ --fb-space-xs: 6px; --fb-space-sm: 10px; --fb-space-md: 16px; --fb-space-lg: 24px; --fb-space-xl: 32px; --fb-space-2xl: 46px; --fb-space-gutter: 24px; --fb-space-card-padding: 18px; --fb-space-card-padding-lg: 26px; --fb-space-section-padding: 44px; --fb-space-section-padding-dense: 36px; /* Elevação */ --fb-shadow-rest: 0 2px 8px rgba(17, 17, 17, .07); --fb-shadow-hover: 0 6px 16px rgba(17, 17, 17, .12); /* Barra de navegação inferior fixa (mobile ≤480px) */ --fb-bottom-nav-height: 60px; } @media (prefers-color-scheme: dark) { :root { --fb-color-surface-base: #111111; --fb-color-surface-elevated: #1C1C1C; --fb-color-text-primary: #F5F5F5; --fb-color-text-secondary: #A0A0A0; --fb-color-border: #333333; --fb-color-ink: #F5F5F5; --fb-color-ink-contrast: #111111; --fb-color-success: #5FAF7A; --fb-color-warning: #B8A85E; --fb-color-danger: #D9615F; --fb-color-neutral-draw: #4A4A4A; } } /* Story 1.6: toggle manual de tema — sobrepõe a preferência do SO quando o visitante escolhe explicitamente via cookie `site_theme` (data-theme em , lido/emitido por templates/header.php). Seletores de atributo têm especificidade maior que o :root simples dentro do media query acima, então estes blocos vencem independente da ordem de origem, sem precisar tocar no bloco de media query existente. */ :root[data-theme="dark"] { --fb-color-surface-base: #111111; --fb-color-surface-elevated: #1C1C1C; --fb-color-text-primary: #F5F5F5; --fb-color-text-secondary: #A0A0A0; --fb-color-border: #333333; --fb-color-ink: #F5F5F5; --fb-color-ink-contrast: #111111; --fb-color-success: #5FAF7A; --fb-color-warning: #B8A85E; --fb-color-danger: #D9615F; --fb-color-neutral-draw: #4A4A4A; } :root[data-theme="light"] { --fb-color-surface-base: #FFFFFF; --fb-color-surface-elevated: #F7F7F7; --fb-color-text-primary: #111111; --fb-color-text-secondary: #6B6B6B; --fb-color-border: #E0E0E0; --fb-color-ink: #111111; --fb-color-ink-contrast: #FFFFFF; --fb-color-success: #3C7A52; --fb-color-warning: #8A7B45; --fb-color-danger: #B23A3A; --fb-color-neutral-draw: #BFBFBF; } body { font-family: var(--font-main); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--dark); background-color: var(--white); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--primary-dark); } /* ========== Utilities ========== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ========== Container ========== */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-md); } /* ========== Header ========== */ .site-header { background: var(--fb-color-surface-base); border-bottom: 1px solid var(--fb-color-border); padding: var(--spacing-md) 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--fb-shadow-rest); } .site-header .container { /* Habilita a consulta de contêiner usada para recolher o wordmark do logo-lockup quando o header não tem largura suficiente. */ container-type: inline-size; } .main-nav { display: flex; justify-content: space-between; align-items: center; gap: var(--fb-space-md); } .logo { display: flex; align-items: center; gap: var(--fb-space-xs); min-width: 0; font-family: var(--fb-font-family); font-size: 1.375rem; font-weight: var(--fb-display-weight); letter-spacing: var(--fb-display-tracking); text-transform: uppercase; color: var(--fb-color-text-primary); } .logo:hover { opacity: .75; } .logo svg, .logo-mark { width: 32px; height: 32px; flex-shrink: 0; color: var(--fb-color-text-primary); } .logo-wordmark { overflow: hidden; white-space: nowrap; } /* Header estreito: o wordmark completo desaparece antes de truncar, restando só a marca (F dentro do anel). */ @container (max-width: 640px) { .logo-wordmark { display: none; } } .nav-menu { display: flex; list-style: none; gap: var(--fb-space-lg); align-items: center; } .nav-link { font-family: var(--fb-font-family); color: var(--fb-color-text-secondary); font-weight: 600; padding: var(--spacing-sm) var(--spacing-sm); border-radius: var(--fb-radius-sm); transition: color .15s ease; } .nav-link:hover { background: none; color: var(--fb-color-text-primary); } .nav-link.active { color: var(--fb-color-text-primary); font-weight: 800; } /* Indicador de item ativo do nav horizontal (sublinhado 2px, nunca cor). */ .desktop-menu .nav-link { border-bottom: 2px solid transparent; border-radius: 0; padding-bottom: 6px; } .desktop-menu .nav-link.active { border-bottom-color: var(--fb-color-text-primary); } .nav-link:focus-visible, .bottom-nav-link:focus-visible, .logo:focus-visible { outline: 2px solid var(--fb-color-text-primary); outline-offset: 2px; border-radius: var(--fb-radius-sm); } .desktop-menu { display: none; } .mobile-menu-toggle { background: none; border: none; cursor: pointer; color: var(--dark); padding: var(--spacing-sm); } .mobile-menu { display: none; background: var(--white); border-top: 1px solid var(--border); padding: var(--spacing-md); } .mobile-menu.active { display: block; } .mobile-menu .nav-menu { flex-direction: column; gap: 0; } .mobile-menu .nav-link { width: 100%; display: block; padding: var(--spacing-md); border-bottom: 1px solid var(--border); } /* ========== Barra de Navegação Inferior (mobile ≤480px) ========== Substitui o nav horizontal do header nessa largura — mesmos 5 itens, ícone linear + rótulo. Indicador de ativo migra de border-bottom para border-top (mesma regra peso 800 + sem cor). Novo seletor, `.site-header`/`.main-nav`/`.nav-menu`/`.nav-link`/`.logo` continuam intactos para o header horizontal. */ .bottom-nav { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; background: var(--fb-color-surface-base); border-top: 1px solid var(--fb-color-border); padding-bottom: env(safe-area-inset-bottom, 0); } .bottom-nav-list { display: flex; list-style: none; margin: 0; padding: 0; } .bottom-nav-item { flex: 1; min-width: 0; } .bottom-nav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--fb-bottom-nav-height); padding: 8px 4px 6px; font-family: var(--fb-font-family); font-size: 11px; font-weight: 600; line-height: 1.15; text-align: center; color: var(--fb-color-text-secondary); border-top: 2px solid transparent; } .bottom-nav-link svg { width: 22px; height: 22px; flex-shrink: 0; } .bottom-nav-link:hover { color: var(--fb-color-text-primary); } .bottom-nav-link.active { color: var(--fb-color-text-primary); font-weight: 800; border-top-color: var(--fb-color-text-primary); } @media (max-width: 480px) { .bottom-nav { display: block; } /* Evita que a barra fixa cubra o rodapé/conteúdo final da página. */ body { padding-bottom: calc(var(--fb-bottom-nav-height) + env(safe-area-inset-bottom, 0)); } } /* ========== Main Content ========== */ .main-content { min-height: calc(100vh - 300px); } /* ========== Hero Section ========== Story 1.2: migrado para tokens --fb-* (em escopo, não compartilhado com jogo.php/"Jogos de Hoje" — seguro migrar em-lugar).

usa escala equivalente a {typography.display-sm} (peso 800, ~1.75rem — nunca menor que .section-title) para ceder destaque visual à busca, sem mudar texto nem posição no markup. */ .hero-section { background: var(--fb-color-surface-elevated); color: var(--fb-color-text-primary); padding: var(--spacing-2xl) 0; text-align: center; } .hero-content { max-width: 600px; margin: 0 auto; } .hero-title { font-family: var(--fb-font-family); font-size: 1.75rem; font-weight: var(--fb-display-sm-weight); letter-spacing: var(--fb-display-sm-tracking); margin-bottom: var(--spacing-md); } .hero-subtitle { font-family: var(--fb-font-family); color: var(--fb-color-text-secondary); font-size: 1.125rem; margin-bottom: var(--spacing-xl); } /* ========== Search Form ========== */ .search-form { max-width: 500px; margin: 0 auto; } .search-input-wrapper { position: relative; display: flex; background: var(--fb-color-surface-base); border: 1px solid var(--fb-color-border); border-radius: var(--fb-radius-full); overflow: hidden; box-shadow: var(--fb-shadow-rest); } .search-input { flex: 1; padding: var(--spacing-md) var(--spacing-lg); border: none; font-family: var(--fb-font-family); font-size: 1rem; color: var(--fb-color-text-primary); background: transparent; outline: none; } .search-button { background: var(--fb-color-ink); color: var(--fb-color-ink-contrast); border: none; padding: 0 var(--spacing-lg); cursor: pointer; transition: var(--transition); } .search-button:hover { opacity: 0.85; } /* ========== Buttons ========== */ .btn { display: inline-block; padding: var(--spacing-md) var(--spacing-lg); font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); line-height: 1.5; } .btn-primary { background: var(--primary); color: var(--white); } .btn-primary:hover { background: var(--primary-dark); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-secondary { background: var(--white); color: var(--dark); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--light); border-color: var(--dark-secondary); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .btn-success { background: var(--success); color: var(--white); } .btn-success:hover { background: #2d8e47; color: var(--white); } .btn-danger { background: var(--danger); color: var(--white); } .btn-danger:hover { background: #c5351f; color: var(--white); } /* ========== Buttons (redesigned scope — Story 1.5) ========== Modificador aditivo, mesmo padrão de .section--redesigned. Migra .btn/.btn-primary/.btn-secondary para tokens --fb-* SEM tocar as regras base acima (472-529), que permanecem compartilhadas com 404.php/contato.php/jogos.php/comparar.php (ainda não migradas). Aplicado por enquanto só às 3 instâncias de views/times.php; reutilizável verbatim pelas outras páginas quando suas próprias histórias migrarem. Botão primário usa preenchimento sólido `--fb-color-ink` (DESIGN.md: "botões primários usam {colors.ink} como preenchimento sólido", já o mesmo vocabulário de .search-button acima); secundário segue o padrão de borda que escurece para `--fb-color-text-primary` no hover, já usado em quick-nav-card/efemeride-card. */ .btn--redesigned { border-radius: var(--fb-radius-md); } .btn-primary--redesigned { background: var(--fb-color-ink); color: var(--fb-color-ink-contrast); } .btn-primary--redesigned:hover { background: var(--fb-color-text-primary); color: var(--fb-color-ink-contrast); transform: translateY(-1px); box-shadow: var(--fb-shadow-hover); } .btn-secondary--redesigned { background: var(--fb-color-surface-base); color: var(--fb-color-text-primary); border: 1px solid var(--fb-color-border); } .btn-secondary--redesigned:hover { background: var(--fb-color-surface-elevated); border-color: var(--fb-color-text-primary); color: var(--fb-color-text-primary); transform: translateY(-1px); box-shadow: var(--fb-shadow-hover); } /* ========== Section ========== */ .section { padding: var(--spacing-2xl) 0; } .section.bg-light { background: var(--light); } .section-title { font-size: 1.75rem; font-weight: 700; margin-bottom: var(--spacing-md); color: var(--dark); } .section-subtitle { color: var(--dark-secondary); margin-bottom: var(--spacing-lg); max-width: 700px; } /* ========== Section (redesigned scope — Stories 1.2/1.3) ========== Modificador aditivo. Story 1.2 aplicou-o às 2
em escopo naquela história ("Melhores Times do Mês", "Navegação Rápida"); Story 1.3 passou a aplicá-lo também às 4
em escopo de views/jogo.php ("Sobre a Partida", "Gols", "Escalações", "Arbitragem"). A base .section/ .section.bg-light/.section-title/.section-subtitle logo acima permanece INTOCADA (tokens legados) — ainda é compartilhada com "Jogos de Hoje" nesta mesma view (Home) e com qualquer conteúdo de views/jogo.php fora do escopo da Story 1.3. Migrar essas classes em-lugar quebrou legibilidade em modo escuro nessas páginas numa rodada anterior (ver Spec Change Log) porque o `body` nunca foi migrado e permanece com fundo estático claro. Qualquer conteúdo futuro ainda não migrado em views/jogo.php deve seguir o mesmo padrão aditivo (.section--redesigned) em vez de migrar a base em-lugar. */ .section--redesigned { background: var(--fb-color-surface-base); } .section--redesigned.bg-light { background: var(--fb-color-surface-elevated); } .section--redesigned .section-title { font-family: var(--fb-font-family); color: var(--fb-color-text-primary); } .section--redesigned .section-subtitle { font-family: var(--fb-font-family); color: var(--fb-color-text-secondary); } /* ========== Page Title / Subtitle (redesigned scope — Story 1.5) ========== .page-title/.page-subtitle são consumidas SEM estilo algum por buscar.php/campeonatos.php/contato.php/jogos.php/privacidade.php/ sobre.php (7 páginas ao todo, incluindo times.php). Só os modificadores --redesigned recebem regras aqui — as classes base continuam propositalmente sem CSS, para não afetar as 6 páginas ainda não migradas. Aplicar `.page-title--redesigned`/`.page-subtitle--redesigned` a essas páginas quando suas próprias histórias migrarem. */ .page-title--redesigned { font-family: var(--fb-font-family); font-size: 2rem; font-weight: var(--fb-display-sm-weight); letter-spacing: var(--fb-display-sm-tracking); color: var(--fb-color-text-primary); margin-bottom: var(--spacing-lg); } .page-subtitle--redesigned { font-family: var(--fb-font-family); color: var(--fb-color-text-secondary); } /* ========== Jogos Grid ========== */ .jogos-grid { display: grid; grid-template-columns: 1fr; gap: var(--spacing-md); } .jogo-card { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--spacing-md); transition: var(--transition); display: block; color: var(--dark); } .jogo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } /* ========== Jogo Card (redesigned scope — Story 1.5) ========== Modificador aditivo, mesmo padrão de .section--redesigned. Story 1.5 aplica esta classe só em views/time.php ("Últimos Jogos"/"Próximos Jogos"); .jogo-card base acima permanece intocada — compartilhada com home.php/jogos.php (ainda não migradas) e com templates/partials/ jogo_card.php, cujo