/* ================================================================ SPORTS Z — DESIGN SYSTEM Compartilhado por index.html, tv.html, jogo.html, competicao.html ================================================================ */ :root{ /* Sports Z — paleta verde-neon + navy escuro (Apple TV-inspired premium SaaS). Default = dark. Light mode ativado via [data-theme="light"] no . */ /* ---- Surfaces (dark) — navy 365Scores-inspired ---- */ --sz-bg-0: #050816; /* página, preto profundo (mantém) */ --sz-bg-1: #0A1322; /* header / barras fixas */ --sz-bg-2: #142031; /* cards primários — tom 365Scores */ --sz-bg-3: #1A2940; /* hover / surface elevada */ --sz-bg-4: #243450; /* chips / muito elevado */ /* ---- Bordas (sutis) ---- */ --sz-border: #1F2A3F; --sz-border-strong: #2E3E5C; --sz-border-soft: #182234; /* ---- Marca: verde SPORTSZ (neon sobre navy escuro) ---- */ --sz-brand: #15E26B; /* VERDE NEON — cor signature SPORTSZ */ --sz-brand-2: #21F37A; /* hover (mais claro) */ --sz-brand-3: #0FA050; /* pressed (mais escuro) */ --sz-brand-glow: rgba(21,226,107,.22); --sz-brand-text: #052816; /* texto escuro sobre verde */ /* Aliases pra retrocompat */ --sz-primary: #15E26B; --sz-primary-2: #0FA050; --sz-primary-glow: rgba(21,226,107,.18); /* Acento secundário: laranja pra badges/destaques quentes (flame Destaques) */ --sz-accent: #FF6A13; --sz-accent-2: #E25A0A; --sz-accent-glow: rgba(255,106,19,.22); --sz-purple: #A66BFF; /* mantém roxo pra NFL/PPV legados */ /* ---- Estados ---- */ --sz-live: #15E26B; /* LIVE em verde SPORTSZ (não vermelho) */ --sz-live-glow: rgba(21,226,107,.28); --sz-success: #22C55E; --sz-warning: #F59E0B; --sz-danger: #EF4444; /* ---- Cores categóricas por esporte (tons saturados pra contraste em navy) ---- */ --sz-sport-futebol: #15E26B; /* verde brand — futebol é o foco */ --sz-sport-basquete: #F59E0B; /* âmbar */ --sz-sport-nfl: #8B5CF6; /* roxo */ --sz-sport-tenis: #84CC16; /* lima */ --sz-sport-volei: #EC4899; /* rosa */ --sz-sport-beisebol: #EF4444; /* vermelho */ --sz-sport-handebol: #06B6D4; /* ciano */ /* ---- Texto (dark — tom 365Scores) ---- */ --sz-text: #E5E7EB; --sz-text-strong: #FFFFFF; --sz-text-muted: #9AA5B8; --sz-text-dim: #6B7691; --sz-text-faint: #4A5266; /* ---- Raios ---- */ --sz-r-xs: 4px; --sz-r-sm: 6px; --sz-r-md: 10px; --sz-r-lg: 14px; --sz-r-xl: 20px; --sz-r-pill: 999px; /* ---- Sombras ---- */ --sz-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --sz-shadow-md: 0 4px 12px rgba(0,0,0,.35); --sz-shadow-lg: 0 12px 32px rgba(0,0,0,.45); --sz-shadow-glow: 0 0 0 1px var(--sz-primary-glow), 0 8px 24px var(--sz-primary-glow); /* ---- Espaços ---- */ --sz-s-1: 4px; --sz-s-2: 8px; --sz-s-3: 12px; --sz-s-4: 16px; --sz-s-5: 24px; --sz-s-6: 32px; --sz-s-7: 48px; /* ---- Tipografia ---- */ --sz-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --sz-font-display: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --sz-font-mono: 'JetBrains Mono', 'SF Mono', Menlo, monospace; /* ---- Header heights (pra calcular sticky — alto como 365Scores) ---- */ --sz-header-h: 88px; --sz-sports-h: 52px; --sz-date-h: 60px; } /* ================= LIGHT MODE ================= */ /* Mesma paleta navy/azul do dark — só inverte os valores de surfaces e texto. */ html[data-theme="light"] { /* ---- Surfaces (light) — branco e cinza muito claros ---- */ --sz-bg-0: #F7F9FB; /* página */ --sz-bg-1: #FFFFFF; /* header */ --sz-bg-2: #FFFFFF; /* cards */ --sz-bg-3: #F0F3F7; /* hover */ --sz-bg-4: #E5EAF0; /* chips */ /* ---- Bordas ---- */ --sz-border: #E2E7EE; --sz-border-strong: #BBC4D0; --sz-border-soft: #EEF1F5; /* ---- Brand: verde SPORTSZ escuro pra contraste WCAG em fundo claro ---- */ --sz-brand: #0A9B51; /* verde escuro pra contraste em light */ --sz-brand-2: #0FA050; --sz-brand-3: #087A40; --sz-brand-glow: rgba(10,155,81,.18); --sz-brand-text: #FFFFFF; --sz-primary: #0A9B51; --sz-primary-2: #087A40; --sz-primary-glow: rgba(10,155,81,.14); --sz-accent: #E25A0A; --sz-accent-2: #C04A05; --sz-accent-glow: rgba(226,90,10,.18); --sz-purple: #7C3AED; /* ---- Estados ---- */ --sz-live: #0A9B51; --sz-live-glow: rgba(10,155,81,.18); --sz-success: #16A34A; --sz-warning: #D97706; --sz-danger: #DC2626; /* ---- Cores categóricas por esporte (versão light) ---- */ --sz-sport-futebol: #0A9B51; --sz-sport-basquete: #D97706; --sz-sport-nfl: #6D28D9; --sz-sport-tenis: #65A30D; --sz-sport-volei: #BE185D; --sz-sport-beisebol: #DC2626; --sz-sport-handebol: #0891B2; /* ---- Texto (light) ---- */ --sz-text: #0F1729; --sz-text-strong: #050816; --sz-text-muted: #475569; --sz-text-dim: #64748B; --sz-text-faint: #94A3B8; /* ---- Sombras (mais sutis no light) ---- */ --sz-shadow-sm: 0 1px 2px rgba(15,25,40,.06); --sz-shadow-md: 0 4px 14px rgba(15,25,40,.08); --sz-shadow-lg: 0 12px 32px rgba(15,25,40,.12); --sz-shadow-glow: 0 0 0 1px var(--sz-brand-glow), 0 8px 24px var(--sz-brand-glow); } /* ================= TIPOGRAFIA DISPLAY — Instrument Sans nos títulos ================= */ h1, h2, h3, .sz-section-title, .home-destaques-title, .home-section-title, .home-aside-head > span, .sz-hero-title, .sz-page-title, .sz-brand-text, [data-display]{ font-family: var(--sz-font-display); letter-spacing: -0.01em; } /* Logo SPORTSZ — Instrument Sans bold italic */ .sz-brand, .brand-sportsz{ font-family: var(--sz-font-display); font-weight: 700; font-style: italic; letter-spacing: -0.02em; } /* ================= TOGGLE TEMA — ícone sol/lua ================= */ .sz-theme-toggle { position: relative; overflow: hidden; } .sz-theme-toggle .sz-icon-sun, .sz-theme-toggle .sz-icon-moon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18px; height: 18px; transition: opacity .25s, transform .35s cubic-bezier(.5, 0, .25, 1); } /* Default (dark): mostra sol (clique → light) */ .sz-theme-toggle .sz-icon-sun { opacity: 1; } .sz-theme-toggle .sz-icon-moon { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg) scale(.6); } /* Light mode: mostra lua (clique → dark) */ html[data-theme="light"] .sz-theme-toggle .sz-icon-sun { opacity: 0; transform: translate(-50%, -50%) rotate(90deg) scale(.6); } html[data-theme="light"] .sz-theme-toggle .sz-icon-moon { opacity: 1; transform: translate(-50%, -50%) rotate(0); } .sz-theme-toggle:hover { color: var(--sz-brand); } /* ================= TRANSIÇÃO SUAVE entre temas ================= */ html, body, .sz-surface, .sz-card, .sz-hero, .sz-btn, .sz-filter-pill, .sz-tab, .sz-channel-pill, .sz-badge, .sz-league-block, .sz-league-head, .sz-game-row, [data-theme-transition] { transition: background-color .25s ease, border-color .25s ease, color .25s ease; } /* ================= reset / base ================= */ *,*::before,*::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--sz-bg-0); color: var(--sz-text); font-family: var(--sz-font); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; border: 0; background: transparent; padding: 0; } ::selection { background: var(--sz-primary); color: var(--sz-brand-text); } /* scrollbar */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--sz-bg-4); border-radius: 99px; } *::-webkit-scrollbar-thumb:hover { background: var(--sz-border-strong); } /* utilitários sem rolagem visível mas com rolagem */ .sz-noscroll { scrollbar-width: none; -ms-overflow-style: none; } .sz-noscroll::-webkit-scrollbar { display: none; } /* ================= HEADER ================= */ .sz-header { position: sticky; top: 0; z-index: 50; background: rgba(12,16,23,.92); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--sz-border); } .sz-header-top { height: var(--sz-header-h); display: flex; align-items: center; gap: 32px; padding: 0 24px; max-width: 1600px; margin: 0 auto; } .sz-brand { display: flex; align-items: center; gap: 14px; flex-shrink: 0; text-decoration: none; } .sz-brand-mark { width: 48px; height: 48px; border-radius: 12px; background: var(--sz-brand-glow); color: var(--sz-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; } .sz-brand-mark svg { width: 28px; height: 28px; } .sz-brand:hover .sz-brand-mark { background: var(--sz-brand-glow); box-shadow: 0 0 24px var(--sz-brand-glow); } .sz-brand-wordmark { display: flex; align-items: baseline; font-family: var(--sz-font-display); font-size: 28px; font-weight: 700; font-style: italic; letter-spacing: -.02em; line-height: 1; } .sz-brand-wordmark .t-sports { color: var(--sz-text-strong); } .sz-brand-wordmark .t-z { -webkit-text-stroke: 1.5px var(--sz-brand); color: transparent; margin-left: 2px; font-weight: 700; } .sz-nav { display: flex; gap: 4px; align-items: center; height: 100%; flex: 1; } .sz-nav-link { position: relative; height: 100%; display: flex; align-items: center; padding: 0 14px; font-size: 13.5px; font-weight: 600; color: var(--sz-text-muted); transition: color .15s ease; white-space: nowrap; } .sz-nav-link:hover { color: var(--sz-text); } .sz-nav-link.is-active { color: var(--sz-text-strong); } .sz-nav-link.is-active::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: -1px; height: 3px; background: var(--sz-brand); border-radius: 3px 3px 0 0; box-shadow: 0 0 12px var(--sz-brand-glow); } /* === Link destacado FIFA (Copa do Mundo) ============================ */ .sz-nav-link.sz-nav-fifa { color: #FFD700; background: linear-gradient(135deg, rgba(165,0,53,0.18), rgba(255,215,0,0.06)); border-radius: 8px; margin: 0 4px; padding: 0 14px; font-weight: 700; letter-spacing: 0.2px; } .sz-nav-link.sz-nav-fifa:hover { color: #fff; background: linear-gradient(135deg, rgba(165,0,53,0.32), rgba(255,215,0,0.10)); } .sz-nav-link.sz-nav-fifa.is-active { color: #fff; background: linear-gradient(135deg, #A50035, #6b0023); } .sz-nav-link.sz-nav-fifa.is-active::after { background: #FFD700; box-shadow: 0 0 16px rgba(255,215,0,0.55); } .sz-nav-link.sz-nav-fifa .sz-fifa-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #FFD700; margin-right: 8px; box-shadow: 0 0 10px rgba(255,215,0,0.7); animation: sz-fifa-pulse 1.6s ease-in-out infinite; } @keyframes sz-fifa-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } .sz-tools { display: flex; gap: 8px; align-items: center; flex-shrink: 0; } .sz-search { display: flex; align-items: center; gap: 8px; background: var(--sz-bg-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-pill); padding: 6px 14px; width: 240px; transition: border-color .2s, background .2s; } .sz-search:focus-within { border-color: var(--sz-primary); background: var(--sz-bg-3); } .sz-search svg { width: 14px; height: 14px; color: var(--sz-text-dim); flex-shrink: 0; } .sz-search input { flex: 1; background: transparent; border: 0; outline: 0; color: var(--sz-text); font-size: 13px; min-width: 0; } .sz-search input::placeholder { color: var(--sz-text-faint); } /* Dropdown da busca */ .sz-search { position: relative; } .sz-search-dd { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: var(--sz-bg-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); box-shadow: 0 12px 32px rgba(0,0,0,.5); max-height: 480px; overflow-y: auto; z-index: 100; } .sz-search-section { border-top: 1px solid var(--sz-border-soft); } .sz-search-section:first-child { border-top: 0; } .sz-search-section-label { padding: 8px 14px 6px; font-size: 10px; font-weight: 800; color: var(--sz-text-dim); text-transform: uppercase; letter-spacing: .06em; } .sz-search-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; text-decoration: none; color: inherit; transition: background .12s; } .sz-search-item:hover { background: var(--sz-bg-3); } .sz-search-item img { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .sz-search-item-info { min-width: 0; flex: 1; } .sz-search-item-name { font-size: 13px; font-weight: 700; color: var(--sz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sz-search-item-meta { font-size: 11px; color: var(--sz-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sz-search-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--sz-text-muted); } .sz-search-loading { padding: 4px 0; } .sz-icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--sz-text-muted); transition: background .15s, color .15s; } .sz-icon-btn:hover { background: var(--sz-bg-3); color: var(--sz-text); } .sz-icon-btn svg { width: 18px; height: 18px; } /* ================= STRIP DE ESPORTES ================= */ .sz-sports-strip { height: var(--sz-sports-h); background: var(--sz-bg-1); border-bottom: 1px solid var(--sz-border); display: flex; align-items: center; padding: 0 24px; gap: 2px; overflow-x: auto; max-width: 1600px; margin: 0 auto; } .sz-sport-tab { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: var(--sz-r-pill); font-size: 13px; font-weight: 600; color: var(--sz-text-muted); white-space: nowrap; transition: all .15s; } .sz-sport-tab:hover { color: var(--sz-text); background: var(--sz-bg-3); } .sz-sport-tab.is-active { background: var(--sz-bg-3); color: var(--sz-text-strong); box-shadow: inset 0 0 0 1px var(--sz-border-strong); } .sz-sport-icon { font-size: 15px; line-height: 1; } .sz-sport-count { background: var(--sz-bg-4); color: var(--sz-text-muted); font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: var(--sz-r-pill); min-width: 20px; text-align: center; } .sz-sport-tab.is-active .sz-sport-count { background: var(--sz-primary); color: #001216; } /* ================= STRIP DE DATAS ================= */ .sz-date-strip { height: var(--sz-date-h); display: flex; align-items: center; padding: 0 24px; gap: 6px; background: var(--sz-bg-0); border-bottom: 1px solid var(--sz-border-soft); max-width: 1600px; margin: 0 auto; overflow-x: auto; } .sz-date-arrow { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--sz-text-muted); flex-shrink: 0; transition: background .15s, color .15s; } .sz-date-arrow:hover { background: var(--sz-bg-3); color: var(--sz-text); } .sz-date-arrow svg { width: 16px; height: 16px; } .sz-date-btn { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 64px; padding: 6px 12px; border-radius: var(--sz-r-md); color: var(--sz-text-muted); white-space: nowrap; transition: all .15s; flex-shrink: 0; } .sz-date-btn:hover { background: var(--sz-bg-3); color: var(--sz-text); } .sz-date-btn .dow { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; opacity: .8; } .sz-date-btn .dn { font-size: 14px; font-weight: 800; line-height: 1; } .sz-date-btn.is-active { background: var(--sz-primary); color: #001216; } .sz-date-btn.is-active .dow, .sz-date-btn.is-active .dn { color: #001216; opacity: 1; } .sz-date-btn.is-today { color: var(--sz-primary); } .sz-date-btn.is-today.is-active { color: #001216; } /* ================= LAYOUT BASE ================= */ .sz-shell { max-width: 1600px; margin: 0 auto; padding: 24px; } .sz-grid-home { display: grid; grid-template-columns: 320px minmax(0, 1fr) 360px; gap: 20px; align-items: start; } .sz-grid-tv { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; } .sz-grid-game { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; } /* ================= CARDS ================= */ .sz-surface { background: var(--sz-bg-2); border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); overflow: hidden; } .sz-surface-elevated { background: var(--sz-bg-3); } .sz-section-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--sz-border); } .sz-section-title { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; color: var(--sz-text-strong); } .sz-section-title .pretag { font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: var(--sz-r-pill); background: var(--sz-primary); color: #001216; letter-spacing: .04em; } .sz-section-action { font-size: 12px; font-weight: 600; color: var(--sz-text-muted); transition: color .15s; } .sz-section-action:hover { color: var(--sz-primary); } /* ================= LIVE DOT / BADGES ================= */ .sz-live-dot { width: 8px; height: 8px; background: var(--sz-live); border-radius: 50%; animation: szLivePulse 1.8s ease-in-out infinite; box-shadow: 0 0 0 0 var(--sz-live-glow); display: inline-block; flex-shrink: 0; } @keyframes szLivePulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,.55); } 60% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } .sz-badge-live { display: inline-flex; align-items: center; gap: 6px; background: rgba(239,68,68,.13); color: var(--sz-live); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: var(--sz-r-pill); letter-spacing: .05em; text-transform: uppercase; } .sz-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: var(--sz-r-pill); background: var(--sz-bg-4); color: var(--sz-text-muted); letter-spacing: .03em; text-transform: uppercase; } .sz-badge--ppv { background: rgba(245,158,11,.13); color: var(--sz-accent); } .sz-badge--br { background: rgba(6,182,212,.13); color: var(--sz-primary); } .sz-badge--end { background: var(--sz-bg-4); color: var(--sz-text-dim); } /* ================= CHANNEL PILLS ================= */ .sz-channel-row { display: flex; flex-wrap: wrap; gap: 6px; } .sz-channel-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--sz-bg-3); border: 1px solid var(--sz-border); color: var(--sz-text); font-size: 11px; font-weight: 700; padding: 4px 9px 4px 5px; border-radius: var(--sz-r-pill); max-width: 100%; transition: border-color .15s, background .15s; } .sz-channel-pill:hover { border-color: var(--sz-border-strong); background: var(--sz-bg-4); } .sz-channel-pill img { width: 18px; height: 18px; border-radius: 50%; object-fit: contain; background: var(--sz-bg-4); flex-shrink: 0; padding: 2px; } /* Fallback de letra quando logo falha */ .sz-ch-fallback { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--sz-bg-4); color: var(--sz-text); font-size: 10px; font-weight: 800; flex-shrink: 0; text-transform: uppercase; } .sz-ch-fallback.is-lg { width: 32px; height: 32px; font-size: 14px; } .sz-ch-fallback.is-xl { width: 40px; height: 40px; font-size: 16px; } .sz-channel-pill.is-ppv { border-color: rgba(245,158,11,.4); } .sz-channel-pill.is-ppv::before { content: 'PPV'; font-size: 9px; background: var(--sz-accent); color: #2A1604; padding: 1px 4px; border-radius: 3px; font-weight: 800; } /* ================= GAME ROW (sidebar de jogos) ================= */ .sz-league-block { border-bottom: 1px solid var(--sz-border-soft); } .sz-league-block:last-child { border-bottom: 0; } .sz-league-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--sz-bg-1); cursor: pointer; user-select: none; } .sz-league-head:hover { background: var(--sz-bg-3); } .sz-league-flag { width: 18px; height: 18px; border-radius: 3px; object-fit: cover; background: var(--sz-bg-4); } .sz-league-name { font-size: 12px; font-weight: 700; color: var(--sz-text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sz-league-count { font-size: 10px; font-weight: 700; color: var(--sz-text-dim); } .sz-league-toggle { color: var(--sz-text-dim); transition: transform .2s; width: 14px; height: 14px; } .sz-league-block.collapsed .sz-league-toggle { transform: rotate(-90deg); } .sz-league-block.collapsed .sz-league-games { display: none; } .sz-game-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; border-top: 1px solid transparent; transition: background .12s; position: relative; } .sz-game-row:hover { background: var(--sz-bg-3); } .sz-game-row.is-selected { background: var(--sz-bg-3); box-shadow: inset 3px 0 0 var(--sz-primary); } .sz-game-time { font-size: 11px; font-weight: 700; color: var(--sz-text-muted); text-align: center; font-feature-settings: 'tnum'; letter-spacing: .02em; } .sz-game-time.is-live { color: var(--sz-live); display: inline-flex; align-items: center; gap: 4px; justify-content: center; } .sz-game-teams { min-width: 0; } .sz-game-team { display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: center; font-size: 12.5px; line-height: 1.6; } .sz-game-team img { width: 16px; height: 16px; object-fit: contain; } .sz-game-team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; color: var(--sz-text); } .sz-game-team-name.is-winner { font-weight: 700; color: var(--sz-text-strong); } .sz-game-team-name.is-loser { color: var(--sz-text-dim); } .sz-game-team-score { font-weight: 800; font-feature-settings: 'tnum'; color: var(--sz-text); font-size: 13px; min-width: 16px; text-align: right; } .sz-game-team-score.is-loser { color: var(--sz-text-dim); font-weight: 600; } .sz-game-row-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 0; } .sz-game-row-meta .ch-mini { display: flex; gap: 2px; } .sz-game-row-meta .ch-mini img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; background: var(--sz-bg-4); } /* ================= HERO GAME CARD ================= */ .sz-hero { background: radial-gradient(60% 80% at 20% 0%, rgba(6,182,212,.10), transparent 60%), radial-gradient(50% 60% at 80% 100%, rgba(139,92,246,.06), transparent 60%), linear-gradient(180deg, var(--sz-bg-3), var(--sz-bg-2)); border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); overflow: hidden; position: relative; transition: border-color .25s ease; } .sz-hero::after { /* Brilho sutil de "shimmer" no hover */ content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0%, var(--sz-brand-glow), transparent 70%); opacity: 0; transition: opacity .3s ease; pointer-events: none; } .sz-hero:hover::after { opacity: 1; } .sz-hero-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--sz-border-soft); } .sz-hero-comp { display: flex; align-items: center; gap: 10px; min-width: 0; } .sz-hero-comp img { width: 22px; height: 22px; } .sz-hero-comp .nm { font-size: 12px; font-weight: 700; color: var(--sz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sz-hero-comp .phase { font-size: 11px; color: var(--sz-text-muted); margin-left: 8px; } .sz-hero-body { padding: 32px 20px 20px; } .sz-hero-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; } .sz-hero-team { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; } .sz-hero-team img { width: 110px; height: 110px; object-fit: contain; filter: drop-shadow(0 8px 24px rgba(0,0,0,.55)); transition: transform .3s cubic-bezier(.25,.46,.45,.94); } .sz-hero-team:hover img { transform: scale(1.08); } .sz-hero-team .nm { font-size: 16px; font-weight: 800; color: var(--sz-text-strong); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sz-hero-team.is-winner .nm { color: var(--sz-primary); } .sz-hero-center { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 200px; } .sz-hero-score { font-size: 64px; font-weight: 900; font-feature-settings: 'tnum'; letter-spacing: -0.03em; line-height: 1; color: var(--sz-text-strong); display: flex; align-items: center; gap: 16px; text-shadow: 0 4px 24px rgba(0,0,0,.4); } .sz-hero-score .vs { font-size: 24px; font-weight: 800; color: var(--sz-text-faint); } .sz-hero-state { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--sz-text-muted); text-transform: uppercase; letter-spacing: .06em; } .sz-hero-state.is-live { color: var(--sz-live); } .sz-hero-countdown { font-family: var(--sz-font-mono); font-size: 28px; font-weight: 800; font-feature-settings: 'tnum'; color: var(--sz-text); letter-spacing: .04em; } .sz-hero-when { font-size: 32px; font-weight: 900; color: var(--sz-text-strong); text-transform: lowercase; letter-spacing: -0.02em; line-height: 1; } .sz-hero-time { font-size: 14px; font-weight: 700; color: var(--sz-text-muted); font-feature-settings: 'tnum'; } .sz-hero-foot { padding: 16px 20px; border-top: 1px solid var(--sz-border-soft); display: flex; flex-direction: column; gap: 12px; } .sz-hero-foot-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .sz-hero-foot-label { font-size: 10px; font-weight: 800; color: var(--sz-text-dim); text-transform: uppercase; letter-spacing: .08em; } /* ================= ODDS ================= */ .sz-odds-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .sz-odd { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; background: var(--sz-bg-3); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); transition: border-color .15s, transform .1s; cursor: pointer; } .sz-odd:hover { border-color: var(--sz-primary); transform: translateY(-1px); } .sz-odd-name { font-size: 11px; font-weight: 700; color: var(--sz-text-muted); text-transform: uppercase; } .sz-odd-rate { font-size: 16px; font-weight: 800; color: var(--sz-text-strong); font-feature-settings: 'tnum'; display: inline-flex; align-items: center; gap: 4px; } .sz-odd-trend--up { color: var(--sz-success); } .sz-odd-trend--down { color: var(--sz-live); } /* ================= TABS ================= */ .sz-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--sz-border); padding: 0 16px; background: var(--sz-bg-2); overflow-x: auto; } .sz-tab { padding: 12px 14px; font-size: 13px; font-weight: 700; color: var(--sz-text-muted); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color .15s, border-color .15s; } .sz-tab:hover { color: var(--sz-text); } .sz-tab.is-active { color: var(--sz-text-strong); border-bottom-color: var(--sz-primary); } /* ================= BUTTONS ================= */ .sz-btn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: var(--sz-bg-3); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); color: var(--sz-text); font-size: 13px; font-weight: 600; transition: all .15s; } .sz-btn:hover { background: var(--sz-bg-4); border-color: var(--sz-border-strong); } .sz-btn--primary { background: var(--sz-brand); color: var(--sz-brand-text); border-color: var(--sz-brand); font-weight: 800; box-shadow: 0 4px 14px var(--sz-brand-glow); } .sz-btn--primary:hover { background: var(--sz-brand-2); border-color: var(--sz-brand-2); transform: translateY(-1px); box-shadow: 0 6px 20px var(--sz-brand-glow); } .sz-btn--primary:active { transform: translateY(0); } .sz-btn--ghost { background: transparent; } /* ================= FILTRO PILLS ================= */ .sz-filter-row { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--sz-border-soft); background: var(--sz-bg-2); flex-wrap: wrap; } .sz-filter-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; background: transparent; border: 1px solid var(--sz-border); border-radius: var(--sz-r-pill); font-size: 12px; font-weight: 600; color: var(--sz-text-muted); transition: all .15s; } .sz-filter-pill:hover { color: var(--sz-text); border-color: var(--sz-border-strong); } .sz-filter-pill.is-active { background: var(--sz-primary); color: #001216; border-color: var(--sz-primary); } /* ================= CAROUSEL DESTAQUES ================= */ .sz-hl-row { display: flex; gap: 12px; overflow-x: auto; padding: 16px; scroll-snap-type: x mandatory; } .sz-hl-card { flex: 0 0 280px; background: var(--sz-bg-3); border: 1px solid var(--sz-border); border-radius: var(--sz-r-lg); padding: 16px; cursor: pointer; scroll-snap-align: start; transition: transform .15s, border-color .15s; position: relative; } .sz-hl-card:hover { transform: translateY(-3px); border-color: var(--sz-brand); box-shadow: 0 12px 28px rgba(0,0,0,.4), 0 0 0 1px var(--sz-brand-glow); } .sz-hl-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .sz-hl-card-comp { font-size: 11px; font-weight: 700; color: var(--sz-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70%; } .sz-hl-card-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-bottom: 14px; } .sz-hl-card-team { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .sz-hl-card-team img { width: 40px; height: 40px; object-fit: contain; } .sz-hl-card-team .nm { font-size: 11px; font-weight: 700; color: var(--sz-text); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .sz-hl-card-center { font-size: 22px; font-weight: 900; font-feature-settings: 'tnum'; color: var(--sz-text-strong); } .sz-hl-card-center.is-time { font-size: 14px; font-weight: 700; color: var(--sz-text-muted); } /* ================= STATS BAR (página de jogo) ================= */ .sz-stat { display: grid; grid-template-columns: 60px 1fr 60px; align-items: center; gap: 12px; padding: 10px 0; } .sz-stat-val { font-size: 13px; font-weight: 800; font-feature-settings: 'tnum'; color: var(--sz-text-strong); } .sz-stat-val.is-right { text-align: right; } .sz-stat-name { font-size: 11px; font-weight: 600; color: var(--sz-text-muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; } .sz-stat-bar { margin-top: 4px; height: 4px; display: flex; background: var(--sz-bg-4); border-radius: 99px; overflow: hidden; grid-column: 1 / -1; } .sz-stat-bar-h { background: var(--sz-primary); } .sz-stat-bar-a { background: var(--sz-accent); } /* ================= EVENT TIMELINE ================= */ .sz-event-row { display: grid; grid-template-columns: 1fr 60px 1fr; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--sz-border-soft); } .sz-event-row:first-child { border-top: 0; } .sz-event-minute { font-size: 12px; font-weight: 800; color: var(--sz-text-muted); text-align: center; font-feature-settings: 'tnum'; } .sz-event-side { display: flex; align-items: center; gap: 8px; font-size: 13px; min-width: 0; } .sz-event-side.is-away { justify-content: flex-end; flex-direction: row-reverse; } .sz-event-icon { font-size: 14px; flex-shrink: 0; } .sz-event-player { font-weight: 700; color: var(--sz-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* ================= SKELETON ================= */ .sz-skel { background: linear-gradient(90deg, var(--sz-bg-3) 0%, var(--sz-bg-4) 50%, var(--sz-bg-3) 100%); background-size: 200% 100%; animation: szSkel 1.5s ease-in-out infinite; border-radius: var(--sz-r-sm); } @keyframes szSkel { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ================= BYHOUR MINI CARDS ================= */ .byhour-mini { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; background: var(--sz-bg-3); border: 1px solid var(--sz-border); border-radius: var(--sz-r-md); cursor: pointer; transition: all .15s ease; text-align: left; width: 100%; } .byhour-mini:hover { border-color: var(--sz-primary); background: var(--sz-bg-4); transform: translateY(-1px); } .byhour-mini .bh-times { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; gap: 6px; } .byhour-mini .bh-team { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 12px; font-weight: 600; color: var(--sz-text); } .byhour-mini .bh-team:last-child { flex-direction: row-reverse; } .byhour-mini .bh-team img { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; } .byhour-mini .bh-team span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .byhour-mini .bh-vs { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .byhour-mini .bh-ch { display: flex; gap: 3px; padding-top: 6px; border-top: 1px solid var(--sz-border-soft); } /* ================= TRANSIÇÕES (fade-in nas trocas de dados) ================= */ .sz-fade-in { animation: szFadeIn .25s ease-out; } @keyframes szFadeIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } } /* Aplicado nos containers que recebem render dinâmico */ .sz-hero, .sz-hl-card, .sz-game-row, .ch-panel, .scorer-row, .round-game { animation: szFadeIn .2s ease-out; } /* Quando um link/card é clicado */ .sz-hl-card:active, .sz-game-row:active, .round-game:active, .ch-game:active { transform: scale(0.99); } /* Reduz motion pra quem prefere */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ================= EMPTY STATE ================= */ .sz-empty { text-align: center; padding: 60px 20px; color: var(--sz-text-muted); } .sz-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: .5; } .sz-empty-title { font-size: 14px; font-weight: 700; color: var(--sz-text); margin-bottom: 4px; } .sz-empty-sub { font-size: 12px; color: var(--sz-text-muted); } /* ================= BOTTOM NAV (mobile only) ================= */ .sz-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; background: rgba(12,16,23,.95); -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-top: 1px solid var(--sz-border); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); justify-content: space-around; align-items: center; } .sz-bottom-link { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; color: var(--sz-text-muted); font-size: 10px; font-weight: 600; text-decoration: none; flex: 1; min-width: 0; transition: color .15s; } .sz-bottom-link svg { width: 22px; height: 22px; } .sz-bottom-link:hover { color: var(--sz-text); } .sz-bottom-link.is-active { color: var(--sz-primary); } .sz-bottom-link.is-active span:last-child { font-weight: 700; } .sz-bottom-live { width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; background: var(--sz-live); border-radius: 50%; } .sz-bottom-live .sz-live-dot { width: 6px; height: 6px; background: #fff; } /* ================= MOBILE BÁSICO ================= */ @media (max-width: 1200px) { .sz-grid-home { grid-template-columns: 280px minmax(0, 1fr); } .sz-grid-home > .sz-aside-right { display: none; } } @media (max-width: 900px) { .sz-grid-home, .sz-grid-tv, .sz-grid-game { grid-template-columns: 1fr; } .sz-shell { padding: 16px; padding-bottom: 80px; /* espaço pro bottom nav */ } .sz-search { display: none; } .sz-hero-team img { width: 64px; height: 64px; } .sz-hero-score { font-size: 40px; } .sz-hero-team .nm { font-size: 13px; } /* Esconde a nav top em mobile, usa bottom nav */ .sz-nav { display: none; } .sz-bottom-nav { display: flex; } /* Aside com canais/odds vira lista vertical embaixo */ .sz-aside-right, .side-block { width: 100%; } } @media (max-width: 600px) { .sz-header-top { gap: 12px; padding: 0 12px; height: 56px; } --sz-header-h: 56px; .sz-brand img { height: 30px; } .sz-nav { gap: 0; overflow-x: auto; scrollbar-width: none; } .sz-nav::-webkit-scrollbar { display: none; } .sz-nav-link { padding: 0 8px; font-size: 12px; } .sz-tools .sz-icon-btn { width: 32px; height: 32px; } .sz-sports-strip { padding: 0 12px; } .sz-date-strip { padding: 0 12px; } .sz-shell { padding: 12px; } .sz-hero-team img { width: 56px; height: 56px; } .sz-hero-score { font-size: 36px; } .sz-hero-when { font-size: 22px; } .sz-hero-team .nm { font-size: 12px; } .sz-hero-body { padding: 22px 14px 14px; } .sz-section-head { padding: 12px; } .sz-section-title { font-size: 13px; } .sz-hl-card { flex: 0 0 240px; padding: 14px; } .sz-hl-card-team img { width: 32px; height: 32px; } .sz-game-row { padding: 8px 10px; } }