/* ═══════════════════════════════════════════════════════ SPORTSBR1 v9 — White/Green Light Theme (default) Dark mode via [data-theme="dark"] on ZERO hardcoded dark colors — 100% CSS variables BUILD: 2026-06-22 ═══════════════════════════════════════════════════════ */ /* ── Design tokens — LIGHT theme (padrão) ───────── */ :root { /* Brand */ --primary: #16a34a; --primary-dark: #15803d; --primary-light: #22c55e; --accent: #16a34a; --accent-bright: #22c55e; --red: #ef4444; --red-dark: #dc2626; --gold: #d97706; --blue: #2563eb; --purple: #7c3aed; /* Backgrounds */ --bg: #f8fafc; --bg2: #f0fdf4; --bg3: #dcfce7; --bg-body: #f8fafc; --card-bg: #ffffff; --card2: #f9fafb; --card3: #f0fdf4; /* Borders */ --border: #e2e8f0; --border2: #cbd5e1; --border3: #94a3b8; --border-color: #e2e8f0; /* Text */ --text: #111827; --text-main: #111827; --text-muted: #166534; --text-dim: #16a34a; --text-sub: #6b7280; /* Component-specific tokens */ --topbar-bg: linear-gradient(90deg, #e8f5e9, #f0fdf4); --topbar-text: #166534; --topbar-date: #6b7280; --ticker-score-bg: var(--primary); --ticker-score-color: #ffffff; --header-bg: #ffffff; --header-border: #e2e8f0; --header-shadow: 0 1px 12px rgba(0,0,0,.07); --header-accent-line: 0; --logo-color: var(--primary); --logo-shadow: none; --nav-link-color: #374151; --nav-hover-bg: #f0fdf4; --nav-hover-color: var(--primary); --nav-active-bg: var(--primary); --nav-active-color: #ffffff; --nav-mobile-bg: #ffffff; --nav-mobile-shadow: 0 8px 24px rgba(0,0,0,.1); --mc-header-bg: #f0fdf4; --mc-header-border: #e2e8f0; --crest-bg: rgba(241,245,249,.6); --sidebar-hdr-bg: linear-gradient(90deg, #f0fdf4, #dcfce7); --sidebar-hdr-color: var(--primary-dark); --article-body-color: var(--text-main); --article-lead-color: #166534; --article-lead-bg: linear-gradient(135deg, #f0fdf4, #dcfce7); --badge-overlay-bg: rgba(255,255,255,.92); --badge-overlay-color: var(--primary); --badge-overlay-border:rgba(22,163,74,.2); --card-hover-shadow: 0 8px 28px rgba(0,0,0,.1),0 0 0 1px rgba(22,163,74,.12); --mc-hover-shadow: 0 8px 24px rgba(0,0,0,.1),0 0 8px rgba(22,163,74,.1); --hl-hover-shadow: 0 6px 20px rgba(0,0,0,.1); --table-hdr-bg: #f0fdf4; --table-hdr-color: var(--primary-dark); --api-notice-bg: #f0fdf4; --api-notice-border: var(--border); --alert-ok-bg: #dcfce7; --alert-ok-border: #22c55e; --alert-ok-color: #166534; --alert-err-bg: #fee2e2; --alert-err-border: var(--red); --alert-err-color: #991b1b; --tv-err-bg: #fef2f2; --tv-err-color: #991b1b; --footer-bg: linear-gradient(180deg, #f0fdf4, #e2e8f0); --footer-border: var(--border); --footer-logo-color: var(--primary); --footer-hdr-color: var(--primary); --btn-danger-bg: #fee2e2; --btn-danger-color: #991b1b; --btn-danger-hbg: var(--red); --btn-danger-hcolor: #ffffff; --btn-warn-bg: #fffbeb; --btn-warn-color: #92400e; --btn-warn-hbg: #d97706; --btn-warn-hcolor: #ffffff; --channel-hover-bg: #f0fdf4; --channel-hover-border:var(--primary); --share-tw-bg: #f8fafc; --share-tw-color: #1d4ed8; --share-tw-border: #e0e7ff; /* UI */ --radius: .8rem; --radius-sm: .5rem; --shadow: 0 2px 12px rgba(0,0,0,.06); --shadow-lg: 0 8px 30px rgba(0,0,0,.1); --header-h: 62px; --glow: 0 0 12px rgba(22,163,74,.12); --glow-lg: 0 0 24px rgba(22,163,74,.18); } /* ── Design tokens — DARK theme ──────────────────── */ [data-theme="dark"] { --bg: #060e06; --bg2: #0a160a; --bg3: #0d1b0d; --bg-body: #060e06; --card-bg: #0e1f0e; --card2: #121f12; --card3: #162116; --border: #1c3a1c; --border2: #264726; --border3: #2d5a2d; --border-color: #1c3a1c; --text: #edfde9; --text-main: #edfde9; --text-muted: #86efac; --text-dim: #4ade80; --text-sub: #5b9c6b; --accent: #4ade80; --accent-bright: #00e676; --topbar-bg: linear-gradient(90deg, #000 0%, #0a1a0a 100%); --topbar-text: #86efac; --topbar-date: #5b9c6b; --ticker-score-bg: var(--primary-dark); --ticker-score-color: var(--accent); --header-bg: linear-gradient(180deg, #071207 0%, #0d230d 100%); --header-border: var(--primary-dark); --header-shadow: 0 2px 24px rgba(0,0,0,.8); --header-accent-line: .25; --logo-color: var(--accent); --logo-shadow: 0 0 24px rgba(74,222,128,.5); --nav-link-color: #5b9c6b; --nav-hover-bg: #121f12; --nav-hover-color: var(--text-muted); --nav-active-bg: var(--primary); --nav-active-color: #ffffff; --nav-mobile-bg: var(--bg2); --nav-mobile-shadow: 0 12px 32px rgba(0,0,0,.85); --mc-header-bg: rgba(0,0,0,.3); --mc-header-border: var(--border); --crest-bg: rgba(0,0,0,.4); --sidebar-hdr-bg: linear-gradient(90deg, var(--primary-dark), #1a3a1a); --sidebar-hdr-color: var(--accent); --article-body-color: #d1fae5; --article-lead-color: #d1fae5; --article-lead-bg: linear-gradient(135deg, var(--card-bg), var(--card2)); --badge-overlay-bg: rgba(6,14,6,.85); --badge-overlay-color: #4ade80; --badge-overlay-border:#264726; --card-hover-shadow: 0 10px 40px rgba(0,0,0,.6),0 0 0 1px rgba(22,163,74,.2); --mc-hover-shadow: 0 12px 40px rgba(0,0,0,.6),0 0 12px rgba(22,163,74,.15); --hl-hover-shadow: 0 8px 32px rgba(0,0,0,.6); --table-hdr-bg: var(--primary-dark); --table-hdr-color: var(--accent); --api-notice-bg: #141f14; --api-notice-border: var(--border2); --alert-ok-bg: #0f2a0f; --alert-ok-border: var(--primary); --alert-ok-color: var(--accent); --alert-err-bg: #1a0505; --alert-err-border: var(--red); --alert-err-color: #fca5a5; --tv-err-bg: #1a0505; --tv-err-color: #fca5a5; --footer-bg: linear-gradient(180deg, var(--bg2), #000); --footer-border: var(--border); --footer-logo-color: var(--accent); --footer-hdr-color: var(--accent); --btn-danger-bg: #7f1d1d; --btn-danger-color: #fca5a5; --btn-danger-hbg: var(--red); --btn-danger-hcolor: #ffffff; --btn-warn-bg: #78350f; --btn-warn-color: #fde68a; --btn-warn-hbg: #92400e; --btn-warn-hcolor: #ffffff; --channel-hover-bg: var(--primary-dark); --channel-hover-border:var(--primary); --share-tw-bg: #1a1a2e; --share-tw-color: #60a5fa; --share-tw-border: #1e3a5f; --shadow: 0 4px 32px rgba(0,0,0,.7); --shadow-lg: 0 12px 48px rgba(0,0,0,.8); --glow: 0 0 20px rgba(22,163,74,.3); --glow-lg: 0 0 40px rgba(22,163,74,.4); } /* ── Reset ──────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth; overflow-x: hidden } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } a { color: inherit; text-decoration: none } img { max-width: 100%; height: auto; display: block } input, button, select, textarea { font: inherit } /* ── Topbar ticker ──────────────────────────────────── */ .topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--border); padding: .28rem 1rem; display: flex; align-items: center; gap: .75rem; overflow: hidden; } .ticker-wrap { flex: 1; overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 5%, black 95%, transparent) } .ticker { display: flex; gap: 3rem; animation: ticker-scroll 60s linear infinite; white-space: nowrap; } .ticker:hover { animation-play-state: paused } .ticker-item { display: inline-flex; align-items: center; gap: .4rem; font-size: .75rem; color: var(--topbar-text); } .ticker-item .score { background: var(--ticker-score-bg); color: var(--ticker-score-color); padding: .1rem .4rem; border-radius: .25rem; font-weight: 800; font-size: .7rem; } @keyframes ticker-scroll { 0% { transform: translateX(100%) } 100% { transform: translateX(-200%) } } .live-label { color: var(--red); font-weight: 800; font-size: .7rem; white-space: nowrap; display: flex; align-items: center; gap: .3rem; flex-shrink: 0; } .live-dot { width: 7px; height: 7px; background: var(--red); border-radius: 50%; animation: blink 1s infinite; flex-shrink: 0; } @keyframes blink { 0%, 100% { opacity: 1 } 50% { opacity: 0 } } /* ── Header ─────────────────────────────────────────── */ .site-header { background: var(--header-bg); border-bottom: 2px solid var(--header-border); position: sticky; top: 0; z-index: 200; box-shadow: var(--header-shadow); transition: background .25s, box-shadow .25s; } .site-header::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, transparent 0%, var(--primary-light) 30%, var(--accent-bright) 50%, var(--primary-light) 70%, transparent 100%); opacity: var(--header-accent-line); } .header-inner { max-width: 1300px; margin: 0 auto; display: flex; align-items: center; gap: .85rem; padding: 0 1rem; height: var(--header-h); } .site-logo { font-size: 1.45rem; font-weight: 900; color: var(--logo-color); display: flex; align-items: center; gap: .4rem; white-space: nowrap; letter-spacing: -.05em; text-shadow: var(--logo-shadow); flex-shrink: 0; } .site-logo img { height: 36px; width: auto; border-radius: .35rem } .logo-badge { background: var(--primary); color: #fff; font-size: .48rem; font-weight: 800; padding: .14rem .4rem; border-radius: .22rem; letter-spacing: .1em; vertical-align: middle; } .header-nav { display: flex; gap: .1rem; flex: 1; overflow-x: auto; scrollbar-width: none; } .header-nav::-webkit-scrollbar { display: none } .nav-link { padding: .38rem .72rem; border-radius: .45rem; font-size: .81rem; font-weight: 600; color: var(--nav-link-color); transition: all .15s; white-space: nowrap; display: flex; align-items: center; gap: .3rem; border: 1px solid transparent; } .nav-link:hover { background: var(--nav-hover-bg); color: var(--nav-hover-color); border-color: var(--border) } .nav-link.active { background: var(--nav-active-bg); color: var(--nav-active-color); border-color: var(--nav-active-bg) } .nav-tv { background: var(--red-dark) !important; color: #fff !important; border-color: var(--red) !important } .nav-tv:hover { background: var(--red) !important } .header-search { display: flex; align-items: center; gap: .4rem; flex-shrink: 0 } .search-input { background: var(--card2); border: 1px solid var(--border2); color: var(--text); border-radius: .5rem; padding: .38rem .75rem; font-size: .82rem; width: 155px; transition: width .2s, border-color .2s; } .search-input:focus { outline: none; border-color: var(--primary); width: 195px } .search-btn { background: var(--primary); border: none; color: #fff; border-radius: .5rem; padding: .38rem .7rem; cursor: pointer; transition: background .15s; font-size: .9rem; } .search-btn:hover { background: var(--primary-dark) } /* ── Layout ─────────────────────────────────────────── */ .container { max-width: 1300px; margin: 0 auto; padding: 0 1rem; overflow-x: hidden } .main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 1.5rem; padding: 1.5rem 0; } @media(max-width:900px) { .main-grid { grid-template-columns: minmax(0, 1fr) } } /* ── Breaking news ──────────────────────────────────── */ .breaking-bar { background: linear-gradient(90deg, var(--red-dark), #7f1d1d 40%, #9b1c1c); padding: .38rem 1rem; display: flex; align-items: center; gap: .75rem; font-size: .78rem; overflow: hidden; } .breaking-label { background: #fff; color: var(--red); font-weight: 900; font-size: .62rem; padding: .1rem .42rem; border-radius: .22rem; letter-spacing: .08em; white-space: nowrap; flex-shrink: 0; } .breaking-text { color: #fff; white-space: nowrap; animation: ticker-scroll 30s linear infinite } /* ── Hero ───────────────────────────────────────────── */ .hero-card { position: relative; border-radius: 1.3rem; overflow: hidden; min-height: 460px; display: flex; align-items: flex-end; background: var(--card-bg); box-shadow: var(--shadow-lg); } .hero-img { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; transition: transform .5s ease; } .hero-card:hover .hero-img { transform: scale(1.04) } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( to top, rgba(0,0,0,.97) 0%, rgba(0,0,0,.65) 40%, rgba(0,0,0,.15) 75%, transparent 100% ); } .hero-content { position: relative; z-index: 1; padding: 2rem } .hero-tag-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem } .hero-badge { display: inline-flex; align-items: center; gap: .35rem; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; padding: .22rem .65rem; border-radius: .35rem; } .hero-exclusive { background: var(--red); color: #fff; font-size: .6rem; font-weight: 900; padding: .12rem .42rem; border-radius: .25rem; letter-spacing: .1em; } .hero-title { font-size: clamp(1.4rem, 3.5vw, 2.3rem); font-weight: 900; line-height: 1.18; color: #ffffff; margin-bottom: .7rem; text-shadow: 0 2px 16px rgba(0,0,0,.9); letter-spacing: -.025em; } .hero-meta { font-size: .78rem; color: rgba(255,255,255,.8); display: flex; gap: 1.2rem; flex-wrap: wrap; } /* ── Sections ───────────────────────────────────────── */ .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; gap: .5rem; overflow: hidden; } .section-title { font-size: .97rem; font-weight: 800; display: flex; align-items: center; gap: .5rem; padding-left: .75rem; position: relative; letter-spacing: -.01em; color: var(--text); flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .section-title::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), var(--primary)); border-radius: 2px; } .section-more { font-size: .76rem; color: var(--text-sub); font-weight: 700; transition: color .15s; display: flex; align-items: center; gap: .2rem; flex-shrink: 0; white-space: nowrap; } .section-more:hover { color: var(--accent) } .section-divider { height: 1px; background: linear-gradient(90deg, var(--primary) 0%, transparent 70%); margin: 1.8rem 0; opacity: .4; } /* ── News cards ─────────────────────────────────────── */ .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem } .news-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .news-grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) } @media(max-width:1100px) { .news-grid.cols-4 { grid-template-columns: repeat(3, minmax(0, 1fr)) } } @media(max-width:900px) { .news-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media(max-width:750px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media(max-width:480px) { .news-grid, .news-grid.cols-2, .news-grid.cols-4 { grid-template-columns: minmax(0, 1fr) !important } } .news-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; display: flex; flex-direction: column; position: relative; max-width: 100%; } .news-card:hover { transform: translateY(-3px); border-color: rgba(22,163,74,.3); box-shadow: 0 8px 28px rgba(0,0,0,.12), 0 0 0 1px rgba(22,163,74,.1); } .card-img-wrap { position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--card2); flex-shrink: 0; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; display: block; } .news-card:hover .card-img-wrap img { transform: scale(1.05) } .card-sport-badge { position: absolute; top: .5rem; left: .5rem; background: var(--badge-overlay-bg); backdrop-filter: blur(6px); color: var(--badge-overlay-color); font-size: .65rem; font-weight: 700; padding: .17rem .42rem; border-radius: .22rem; border: 1px solid var(--badge-overlay-border); } .card-body { padding: .9rem; flex: 1; display: flex; flex-direction: column } .card-cat { font-size: .65rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: .38rem; color: var(--primary-light); } .card-cat.futebol { color: #16a34a } .card-cat.f1 { color: #f87171 } .card-cat.basquete { color: #fb923c } .card-cat.mma { color: #f472b6 } .card-cat.tenis { color: #fbbf24 } .card-title { font-size: .88rem; font-weight: 700; line-height: 1.35; margin-bottom: .45rem; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); } .card-meta { font-size: .7rem; color: var(--text-sub); display: flex; gap: .6rem; margin-top: auto } /* ── List cards ─────────────────────────────────────── */ .news-list { display: flex; flex-direction: column; gap: .55rem } .list-card { display: flex; gap: .7rem; align-items: flex-start; background: var(--card-bg); border: 1px solid var(--border); border-radius: .65rem; padding: .65rem; transition: border-color .18s, background .18s; } .list-card:hover { border-color: var(--border3); background: var(--card2) } .list-thumb { width: 78px; flex-shrink: 0; aspect-ratio: 4/3; border-radius: .4rem; object-fit: cover; background: var(--card2); } .list-content { flex: 1; min-width: 0 } .list-title { font-size: .82rem; font-weight: 700; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .25rem; color: var(--text); } .list-meta { font-size: .68rem; color: var(--text-sub) } /* ── Comp tabs ──────────────────────────────────────── */ .comp-tabs { display: flex; gap: .3rem; /* SEMPRE scroll horizontal — nunca expande o container */ flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .55rem .8rem; border-bottom: 1px solid var(--border); background: var(--bg2); /* Impede que o scroll interno empurre o layout */ min-width: 0; max-width: 100%; } .comp-tabs::-webkit-scrollbar { display: none } .comp-tab { padding: .28rem .6rem; border-radius: .4rem; font-size: .73rem; font-weight: 700; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-sub); cursor: pointer; transition: all .15s; display: flex; align-items: center; gap: .3rem; white-space: nowrap; flex-shrink: 0; /* tabs não encolhem — fazem scroll */ } .comp-tab.active, .comp-tab:hover { background: var(--primary); color: #fff; border-color: var(--primary); } /* ── Match cards ─────────────────────────────────────── */ /* min(270px,100%) garante que NUNCA transborda, mesmo em telas menores que 270px */ .matches-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); gap: .9rem; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; } @media(max-width:700px) { .matches-grid { grid-template-columns: 1fr !important; gap: .6rem } } .mc { background: linear-gradient(145deg, var(--card-bg), var(--card2)); border: 1px solid var(--border); border-radius: 1rem; min-width: 0; max-width: 100%; overflow: hidden; width: 100%; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; } .mc::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--border2); transition: background .2s; } .mc:hover { transform: translateY(-3px); box-shadow: var(--mc-hover-shadow); border-color: var(--border3); } .mc:hover::before { background: linear-gradient(90deg, var(--primary), var(--accent)) } .mc-live { border-color: rgba(239,68,68,.4) } .mc-live::before { background: linear-gradient(90deg, var(--red), #f87171) !important } @keyframes mc-live-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,.12) } 50% { box-shadow: 0 0 20px 4px rgba(239,68,68,.18) } } .mc-live { animation: mc-live-glow 2.5s ease-in-out infinite } .mc-header { display: flex; align-items: center; justify-content: space-between; padding: .5rem .8rem; background: var(--mc-header-bg); border-bottom: 1px solid var(--mc-header-border); overflow: hidden; min-width: 0; } .mc-comp { font-size: .65rem; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .mc-time { font-size: .65rem; color: var(--text-dim); white-space: nowrap; flex-shrink: 0; margin-left: .5rem } .mc-body { display: flex; flex-direction: row; align-items: center; padding: .9rem .8rem; width: 100%; box-sizing: border-box; overflow: hidden; min-width: 0; max-width: 100%; } .mc-team { display: flex; flex-direction: column; align-items: center; gap: .3rem; min-width: 0; overflow: hidden; flex: 2 1 0 } .mc-crest { width: 44px; height: 44px; object-fit: contain; border-radius: .45rem; background: var(--crest-bg); padding: 3px; flex-shrink: 0; } .mc-name { font-size: .74rem; font-weight: 700; color: var(--text); text-align: center; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .mc-center { display: flex; flex-direction: column; overflow: hidden; align-items: center; gap: .32rem; flex: 1 1 60px; /* flex-shrink: 1 — permite encolher. basis: 60px para o placar */ min-width: 0; max-width: 30%; /* nunca ocupa mais de 30% do card */ } .mc-score { font-size: 1.7rem; font-weight: 900; color: var(--accent); letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; } .mc-sep { color: var(--text-sub); font-weight: 400; margin: 0 .08em } .mc-live-badge { display: inline-flex; align-items: center; gap: .28rem; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.5); color: #f87171; font-size: .58rem; font-weight: 900; padding: .14rem .42rem; border-radius: 999px; letter-spacing: .06em; white-space: nowrap; } .mc-live-dot { width: 6px; height: 6px; background: #f87171; border-radius: 50%; animation: blink 1s infinite; flex-shrink: 0 } .mc-status { font-size: .6rem; font-weight: 700; color: var(--text-sub); letter-spacing: .04em; white-space: nowrap } .mc-enc { color: var(--accent) } .matches-ver-todos { margin-top: 1rem; text-align: center } .btn-ver-todos { display: inline-flex; align-items: center; gap: .4rem; background: var(--card2); border: 1px solid var(--border2); color: var(--text-muted); padding: .55rem 1.4rem; border-radius: 999px; font-size: .82rem; font-weight: 700; transition: all .2s ease; } .btn-ver-todos:hover { background: var(--primary); border-color: var(--primary); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 16px rgba(22,163,74,.3); } .btn-ver-todos span { font-size: 1rem; transition: transform .2s } .btn-ver-todos:hover span { transform: translateX(4px) } @media(max-width:600px) { .mc-score { font-size: 1.45rem } .mc-crest { width: 38px; height: 38px } } /* ── Old match card (legacy compat) ─────────────────── */ .match-card { background: var(--card-bg); border: 1px solid var(--border); border-left: 3px solid transparent; border-radius: var(--radius); padding: .9rem 1rem; margin-bottom: .65rem; transition: border-color .2s, transform .15s; } .match-card:hover { border-left-color: var(--primary); transform: translateX(2px) } .match-card.live { border-left-color: var(--red) } .match-comp { font-size: .65rem; color: var(--primary-light); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .55rem } .match-row { display: flex; align-items: center; justify-content: space-between; gap: .65rem } .match-team { flex: 1; display: flex; align-items: center; gap: .45rem; font-size: .88rem; font-weight: 700 } .match-team.away { justify-content: flex-end; flex-direction: row-reverse } .team-crest { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0 } .match-score { background: linear-gradient(135deg, var(--bg), var(--card2)); border: 1px solid var(--border2); border-radius: .5rem; padding: .28rem .85rem; font-size: 1rem; font-weight: 900; color: var(--accent); text-align: center; min-width: 68px; display: flex; flex-direction: column; align-items: center; gap: .05rem; box-shadow: var(--shadow); } .match-status { font-size: .6rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase } .status-live { color: #f87171; animation: blink 1.5s infinite } .match-time { font-size: .73rem; color: var(--text-muted); margin-top: .4rem; text-align: center } /* ── Classificação ──────────────────────────────────── */ .standings-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100% } .standings-table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: .8rem; min-width: 460px; } .standings-table th { background: var(--table-hdr-bg); color: var(--table-hdr-color); padding: .42rem .5rem; text-align: center; font-size: .67rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .standings-table th:nth-child(2), .standings-table td:nth-child(2) { text-align: left; padding-left: .7rem } .standings-table td { padding: .42rem .5rem; text-align: center; border-bottom: 1px solid var(--border); color: var(--text); } .standings-table tr:hover td { background: var(--card2) } .pos-num { font-weight: 700; color: var(--text-sub); width: 22px } .pos-cl { color: #60a5fa } .pos-el { color: #a78bfa } .pos-rel { color: #f87171 } .team-name-cell { display: flex; align-items: center; gap: .42rem; font-weight: 600 } .team-crest-sm { width: 17px; height: 17px; object-fit: contain; flex-shrink: 0 } .pts { font-weight: 900; color: var(--accent) } .form-badges { display: flex; gap: .15rem } .fw, .fd, .fl { width: 16px; height: 16px; border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: .62rem; font-weight: 800; color: #fff; } .fw { background: #16a34a } .fd { background: #475569 } .fl { background: #dc2626 } /* ── Sidebar ─────────────────────────────────────────── */ .sidebar { display: flex; flex-direction: column; gap: 1.1rem } .sidebar-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .sidebar-box-header { background: var(--sidebar-hdr-bg); padding: .62rem 1rem; font-size: .8rem; font-weight: 800; display: flex; align-items: center; gap: .45rem; color: var(--sidebar-hdr-color); border-bottom: 1px solid var(--border); } .sidebar-box-body { padding: .7rem } @media(max-width:900px) { .sidebar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem } } @media(max-width:600px) { .sidebar { grid-template-columns: 1fr } } /* ── Article ─────────────────────────────────────────── */ .article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2rem } .article-main { min-width: 0 } .article-wrap { max-width: 820px } .article-header { margin-bottom: 1.5rem } .article-cat { display: inline-block; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: .22rem .55rem; border-radius: .35rem; background: var(--primary); color: #fff; margin-bottom: .7rem; } .article-title { font-size: clamp(1.45rem, 3vw, 2.15rem); font-weight: 900; line-height: 1.2; margin-bottom: .7rem; letter-spacing: -.025em; color: var(--text); } .article-summary { font-size: 1rem; color: var(--text-muted); line-height: 1.7; margin-bottom: .9rem; border-left: 3px solid var(--primary); padding-left: .9rem; } .article-lead { background: var(--article-lead-bg); border-left: 4px solid var(--primary); border-radius: 0 .6rem .6rem 0; padding: 1rem 1.2rem; margin-bottom: 1.4rem; font-size: 1.03rem; font-weight: 500; color: var(--article-lead-color); line-height: 1.7; font-style: italic; } .article-meta { display: flex; gap: 1.2rem; font-size: .77rem; color: var(--text-sub); padding: .65rem 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin-bottom: 1.3rem; flex-wrap: wrap; } .article-img-wrap, .article-cover { border-radius: var(--radius); overflow: hidden; margin-bottom: 1.4rem; background: var(--card2); } .article-img-wrap img { width: 100%; height: 100%; object-fit: cover } .article-cover img { width: 100%; max-height: 480px; object-fit: cover } .article-cover figcaption { padding: .5rem .75rem; font-size: .73rem; color: var(--text-sub); background: var(--card-bg) } .article-body, .article-content { font-size: 1rem; line-height: 1.85; color: var(--article-body-color); } .article-body p, .article-content p { margin-bottom: 1.1rem } .article-content h2, .article-content h3 { color: var(--accent); margin: 1.5rem 0 .75rem; font-weight: 800 } .article-content img { border-radius: .5rem; margin: 1rem 0; max-width: 100% } .article-source { margin-top: 2rem; padding: .7rem 1rem; background: var(--card2); border-left: 3px solid var(--border2); border-radius: .4rem; font-size: .78rem; color: var(--text-sub); } .article-source a { color: var(--primary-light); text-decoration: underline } /* Share */ .article-share { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.2rem } .share-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .85rem; border-radius: 999px; font-size: .77rem; font-weight: 700; border: none; cursor: pointer; transition: all .15s; } .share-wa { background: #128c7e; color: #fff } .share-wa:hover { background: #075e54 } .share-tw { background: var(--share-tw-bg); color: var(--share-tw-color); border: 1px solid var(--share-tw-border) } .share-tw:hover { opacity: .85 } .share-cp { background: var(--card2); color: var(--text-muted); border: 1px solid var(--border) } .share-cp:hover { border-color: var(--primary); color: var(--accent) } @media(max-width:768px) { .article-layout { grid-template-columns: 1fr } .article-wrap { max-width: 100% } } /* ── Highlights ──────────────────────────────────────── */ .highlights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem } .highlight-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; } .highlight-card:hover { transform: translateY(-3px); box-shadow: var(--hl-hover-shadow) } .highlight-thumb { display: block; position: relative; aspect-ratio: 16/9; overflow: hidden; background: var(--card2) } .highlight-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease } .highlight-card:hover .highlight-thumb img { transform: scale(1.06) } .highlight-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); font-size: 2.2rem; color: #fff; opacity: 0; transition: opacity .2s; } .highlight-card:hover .highlight-play { opacity: 1 } .highlight-info { padding: .75rem } .highlight-league { font-size: .65rem; font-weight: 800; text-transform: uppercase; color: var(--accent); letter-spacing: .06em; display: block; margin-bottom: .22rem } .highlight-title { font-size: .84rem; font-weight: 700; line-height: 1.35; color: var(--text); margin-bottom: .28rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .highlight-date { font-size: .7rem; color: var(--text-sub) } @media(max-width:600px) { .highlights-grid { grid-template-columns: 1fr 1fr } } @media(max-width:380px) { .highlights-grid { grid-template-columns: 1fr } } /* ── Sport chips ─────────────────────────────────────── */ .sport-chips { display: flex; flex-wrap: wrap; gap: .42rem; margin-bottom: 1.2rem } .sport-chip { display: inline-flex; align-items: center; gap: .28rem; padding: .26rem .68rem; border-radius: 999px; font-size: .73rem; font-weight: 700; border: 1px solid var(--border); background: var(--card2); color: var(--text-sub); cursor: pointer; transition: all .15s; } .sport-chip:hover, .sport-chip.active { background: var(--primary); border-color: var(--primary); color: #fff } .rank-badge { position: absolute; top: .5rem; right: .5rem; background: var(--badge-overlay-bg); border: 1px solid var(--border2); color: var(--gold); font-size: .62rem; font-weight: 900; padding: .14rem .42rem; border-radius: .28rem; } /* ── TV ──────────────────────────────────────────────── */ .tv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 1.2rem; padding: 1.2rem 0 } @media(max-width:800px) { .tv-layout { grid-template-columns: 1fr } } .tv-player-wrap { background: #000; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); box-shadow: var(--shadow); } #tv-video { width: 100%; height: 100%; display: none } .tv-placeholder { text-align: center; color: var(--text-sub); padding: 2rem } .tv-placeholder .icon { font-size: 3rem; margin-bottom: .75rem } .tv-info { padding: .9rem 0 } .tv-info h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: .25rem; color: var(--text) } .tv-info p { font-size: .82rem; color: var(--text-sub) } .channel-grid { display: flex; flex-direction: column; gap: .45rem } .channel-item { display: flex; align-items: center; gap: .65rem; padding: .65rem; background: var(--card2); border: 1px solid var(--border); border-radius: .55rem; cursor: pointer; transition: all .15s; } .channel-item:hover, .channel-item.active { background: var(--channel-hover-bg); border-color: var(--channel-hover-border) } .channel-logo { width: 36px; height: 36px; object-fit: contain; border-radius: .35rem; background: var(--bg); flex-shrink: 0 } .channel-name { font-size: .86rem; font-weight: 700; flex: 1; color: var(--text) } .channel-cat { font-size: .68rem; color: var(--text-sub) } .tv-error-msg { background: var(--tv-err-bg); border: 1px solid var(--red); color: var(--tv-err-color); border-radius: .5rem; padding: .65rem .9rem; font-size: .83rem; margin-top: .75rem; display: none; } /* ── Ads ─────────────────────────────────────────────── */ .ad-wrap { text-align: center; margin: 1rem 0 } .ad-header { margin-bottom: 0 } .ad-article-top { margin-bottom: 1.2rem } .ad-article-bottom { margin-top: 1.5rem } .ad-sidebar { margin-bottom: 1rem } .ad-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border) } /* ── Search ──────────────────────────────────────────── */ .search-form { display: flex; gap: .65rem; margin-bottom: 1.5rem } .search-form input[type=text] { flex: 1; background: var(--card-bg); border: 1px solid var(--border2); color: var(--text); border-radius: .6rem; padding: .65rem 1rem; font-size: .93rem; } .search-form input:focus { outline: none; border-color: var(--primary) } .search-form button { background: var(--primary); border: none; color: #fff; border-radius: .6rem; padding: .65rem 1.3rem; cursor: pointer; font-weight: 700; } /* ── Pagination ──────────────────────────────────────── */ .pagination { display: flex; gap: .4rem; justify-content: center; margin: 2rem 0; flex-wrap: wrap } .page-btn { display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: .45rem; background: var(--card-bg); border: 1px solid var(--border); color: var(--text-sub); font-size: .82rem; font-weight: 600; transition: all .15s; padding: 0 .5rem; } .page-btn:hover, .page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff } /* ── Notices ─────────────────────────────────────────── */ .api-notice { background: var(--api-notice-bg); border: 1px solid var(--api-notice-border); border-radius: .65rem; padding: .85rem 1rem; color: var(--text-sub); font-size: .84rem } .api-notice a { color: var(--primary-light); text-decoration: underline } .alert-success { background: var(--alert-ok-bg); border: 1px solid var(--alert-ok-border); color: var(--alert-ok-color); border-radius: .6rem; padding: .75rem 1rem; font-size: .87rem; margin-bottom: 1.2rem } .alert-error { background: var(--alert-err-bg); border: 1px solid var(--alert-err-border); color: var(--alert-err-color); border-radius: .6rem; padding: .75rem 1rem; font-size: .87rem; margin-bottom: 1.2rem } /* ── Spinner ─────────────────────────────────────────── */ .spinner { width: 32px; height: 32px; border: 3px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 1.5rem auto; } @keyframes spin { to { transform: rotate(360deg) } } /* ── Empty state ─────────────────────────────────────── */ .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-sub); font-size: .88rem } .empty-state .icon { font-size: 2.8rem; margin-bottom: .65rem } /* ── Live badge ──────────────────────────────────────── */ .live-badge { display: inline-flex; align-items: center; gap: .3rem; background: rgba(239,68,68,.15); border: 1px solid rgba(239,68,68,.5); color: #f87171; font-size: .63rem; font-weight: 800; padding: .14rem .48rem; border-radius: 999px; letter-spacing: .06em; } /* ── Float TV ────────────────────────────────────────── */ .tv-float { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 300 } .tv-float-btn { display: flex; align-items: center; gap: .5rem; background: var(--red-dark); color: #fff; border: none; border-radius: 999px; padding: .6rem 1.1rem; font-size: .87rem; font-weight: 700; cursor: pointer; box-shadow: 0 4px 20px rgba(185,28,28,.5); transition: transform .2s, box-shadow .2s; } .tv-float-btn:hover { transform: scale(1.06); box-shadow: 0 6px 28px rgba(239,68,68,.6) } /* ── Footer ──────────────────────────────────────────── */ .site-footer { background: var(--footer-bg); border-top: 1px solid var(--footer-border); padding: 2.5rem 0 1.2rem; margin-top: 3rem; } .footer-grid { max-width: 1300px; margin: 0 auto; padding: 0 1rem; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; } .footer-logo { font-size: 1.3rem; font-weight: 900; color: var(--footer-logo-color); margin-bottom: .5rem } .footer-desc { font-size: .82rem; color: var(--text-sub); line-height: 1.65 } .footer-links h4 { font-size: .82rem; font-weight: 800; color: var(--footer-hdr-color); margin-bottom: .65rem } .footer-links ul { list-style: none } .footer-links li { margin-bottom: .38rem } .footer-links a { font-size: .8rem; color: var(--text-sub); transition: color .15s } .footer-links a:hover { color: var(--primary-light) } .footer-bottom { max-width: 1300px; margin: 0 auto; padding: 1rem; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; font-size: .74rem; color: var(--text-sub); } /* ── Scrollbar ───────────────────────────────────────── */ ::-webkit-scrollbar { width: 5px; height: 5px } ::-webkit-scrollbar-track { background: var(--bg) } ::-webkit-scrollbar-thumb { background: var(--border3); border-radius: 3px } ::-webkit-scrollbar-thumb:hover { background: var(--primary) } /* ── Hamburger ───────────────────────────────────────── */ .nav-toggle { display: none; background: none; border: 1px solid var(--border2); border-radius: .45rem; color: var(--text); padding: .32rem .6rem; cursor: pointer; font-size: 1rem; flex-shrink: 0; align-items: center; gap: .3rem; transition: background .15s; } .nav-toggle:hover { background: var(--card2) } .nav-toggle-icon { display: flex; flex-direction: column; gap: 4px; width: 18px } .nav-toggle-icon span { display: block; height: 2px; background: currentColor; border-radius: 2px; transition: all .25s } .nav-toggle.open .nav-toggle-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg) } .nav-toggle.open .nav-toggle-icon span:nth-child(2) { opacity: 0; transform: scaleX(0) } .nav-toggle.open .nav-toggle-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) } /* ── Admin ───────────────────────────────────────────── */ .admin-wrap { display: flex; min-height: 100vh } .admin-sidebar { width: 220px; background: var(--bg2); border-right: 1px solid var(--border); flex-shrink: 0; padding: 1rem 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .admin-logo { padding: .7rem 1rem 1.2rem; font-size: 1rem; font-weight: 900; color: var(--accent); display: flex; align-items: center; gap: .4rem; border-bottom: 1px solid var(--border); margin-bottom: .65rem; } .admin-nav-link { display: flex; align-items: center; gap: .55rem; padding: .5rem 1rem; color: var(--text-sub); font-size: .85rem; font-weight: 600; transition: all .15s; border-left: 3px solid transparent; } .admin-nav-link:hover, .admin-nav-link.active { color: var(--accent); background: var(--card-bg); border-left-color: var(--primary) } .admin-main { flex: 1; padding: 1.5rem; min-width: 0; max-width: 100% } .admin-header { margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem } .admin-header h1 { font-size: 1.3rem; font-weight: 800; color: var(--text) } .admin-logout { padding: .5rem 1rem; margin-top: auto } .admin-logout a { color: #f87171; font-size: .82rem } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); gap: .9rem; margin-bottom: 1.5rem } .stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem } .stat-num { font-size: 1.9rem; font-weight: 900; color: var(--accent) } .stat-lbl { font-size: .76rem; color: var(--text-sub); margin-top: .2rem } .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch } .data-table { width: 100%; border-collapse: collapse; font-size: .82rem } .data-table th { background: var(--table-hdr-bg); color: var(--table-hdr-color); padding: .5rem .7rem; text-align: left; white-space: nowrap } .data-table td { padding: .5rem .7rem; border-bottom: 1px solid var(--border); vertical-align: middle; color: var(--text) } .data-table tr:hover td { background: var(--card2) } .btn { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .8rem; border-radius: .45rem; font-size: .82rem; font-weight: 700; cursor: pointer; border: none; text-decoration: none; transition: all .15s; white-space: nowrap } .btn-primary { background: var(--primary); color: #fff } .btn-primary:hover { background: var(--primary-dark) } .btn-danger { background: var(--btn-danger-bg); color: var(--btn-danger-color) } .btn-danger:hover { background: var(--btn-danger-hbg); color: var(--btn-danger-hcolor) } .btn-warning { background: var(--btn-warn-bg); color: var(--btn-warn-color) } .btn-warning:hover { background: var(--btn-warn-hbg); color: var(--btn-warn-hcolor) } .btn-secondary { background: var(--card-bg); border: 1px solid var(--border); color: var(--text-sub) } .btn-secondary:hover { border-color: var(--primary); color: var(--accent) } .form-input { background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: .5rem; padding: .5rem .75rem; font-size: .88rem } .form-input:focus { outline: none; border-color: var(--primary) } .form-group { margin-bottom: 1.1rem } .form-group label { display: block; font-size: .79rem; font-weight: 700; color: var(--text-sub); margin-bottom: .38rem } .form-group input, .form-group select, .form-group textarea { width: 100%; max-width: 520px; background: var(--bg); border: 1px solid var(--border2); color: var(--text); border-radius: .55rem; padding: .55rem .85rem; font-size: .88rem } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--primary) } .form-group textarea { min-height: 100px; resize: vertical } .section-box { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.3rem; margin-bottom: 1.3rem } .section-box h3 { font-size: .95rem; margin-bottom: .9rem; color: var(--accent); font-weight: 800 } /* Scorers compact */ .scorers-table { width: 100%; border-collapse: collapse; font-size: .8rem } .scorers-table th { background: var(--table-hdr-bg); color: var(--table-hdr-color); padding: .4rem .55rem; text-align: left; font-size: .67rem; text-transform: uppercase } .scorers-table td { padding: .4rem .55rem; border-bottom: 1px solid var(--border); color: var(--text) } .scorers-table tr:hover td { background: var(--card2) } .scorer-rank { font-weight: 800; color: var(--text-dim); width: 22px; text-align: center } .scorer-goals { font-weight: 900; color: var(--accent); text-align: right } /* ── Utilities ───────────────────────────────────────── */ .d-none-mobile { display: block } .resultados-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } @media(max-width:900px) { .resultados-grid { grid-template-columns: 1fr; gap: .75rem } } @media(max-width:480px) { .resultados-grid { gap: .5rem } } /* ════════════════════════════════════════════════════════ RESPONSIVE v10 — Mobile perfeito, CSS Grid cards ════════════════════════════════════════════════════════ */ /* ── Global anti-overflow (base) ─────────────────────── */ html { overflow-x: hidden } body { overflow-x: hidden; position: relative } *, *::before, *::after { box-sizing: border-box } img { max-width: 100%; height: auto; display: block } /* Não sobrescreve max-width: 1300px do .container base — apenas garante anti-overflow */ /* ── 1024px ───────────────────────────────────────────── */ @media(max-width:1024px) { .main-grid { grid-template-columns: minmax(0, 1fr) 260px } } /* ── 900px — coluna única ─────────────────────────────── */ @media(max-width:900px) { .main-grid { grid-template-columns: 1fr; padding: .75rem 0 } .article-layout { grid-template-columns: 1fr } .article-wrap { max-width: 100% } .footer-grid { grid-template-columns: 1fr 1fr } .sidebar { display: none } } /* ── 768px — hamburger, sem busca ────────────────────── */ @media(max-width:768px) { .header-inner { height: 56px; padding: 0 .85rem; gap: .5rem } .site-logo { font-size: 1.15rem; flex: 1; min-width: 0 } .logo-badge { display: none } .header-search { display: none } .nav-toggle { display: inline-flex } .header-nav { display: none; position: fixed; top: 56px; left: 0; right: 0; background: var(--nav-mobile-bg); border-bottom: 2px solid var(--primary); flex-direction: column; padding: .5rem .75rem; z-index: 500; gap: .1rem; box-shadow: var(--nav-mobile-shadow); max-height: calc(100vh - 56px); overflow-y: auto; } .header-nav.open { display: flex } .nav-link { padding: .6rem .85rem; font-size: .9rem; border-radius: .45rem } /* Jogos grid: 1 coluna */ .matches-grid { grid-template-columns: 1fr !important; gap: .6rem !important } /* Comp tabs — padding ajustado */ .comp-tabs { padding: .4rem .75rem; gap: .3rem; } .comp-tab { font-size: .72rem; padding: .25rem .55rem } /* Hero menor */ .hero-card { min-height: 280px } .hero-title { font-size: 1.35rem !important } .hero-content { padding: 1.2rem } /* Layout */ .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .news-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } .section-box-2col { grid-template-columns: minmax(0, 1fr) !important } .tv-layout { grid-template-columns: minmax(0, 1fr) } /* Admin — NÃO sobrescreve o novo sidebar (gerenciado pelo sidebar.php inline CSS) */ .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } } /* ── 600px ─────────────────────────────────────────────── */ @media(max-width:600px) { .footer-grid { grid-template-columns: 1fr } .footer-links { display: none } .matches-grid { grid-template-columns: 1fr !important } .container { padding: 0 .85rem } } /* ── 480px — smartphones ──────────────────────────────── */ @media(max-width:480px) { /* Container e header */ .topbar { display: none } .container { padding: 0 .75rem } .header-inner { height: 54px; padding: 0 .75rem; gap: .45rem } .site-logo { font-size: 1.05rem } /* Hero */ .hero-card { min-height: 230px; border-radius: .8rem } .hero-content { padding: 1rem } .hero-title { font-size: 1.1rem !important } .hero-meta { font-size: .72rem } /* ─ Match cards: colunas % — NUNCA overflow ─ 40% home | 20% score | 40% away = 100% sempre */ .matches-grid { grid-template-columns: 1fr !important; gap: .5rem } .mc { min-width: 0; width: 100%; overflow: hidden } .mc-body { padding: .7rem .6rem !important; overflow: hidden; box-sizing: border-box; } .mc-center { min-width: 0 !important; overflow: hidden } .mc-score { font-size: 1.25rem } .mc-sep { margin: 0 .03em } .mc-crest { width: 36px; height: 36px } .mc-name { font-size: .67rem } .mc-status, .mc-live-badge { font-size: .57rem } .mc-comp { font-size: .6rem } .mc-header { padding: .4rem .7rem; overflow: hidden } /* Comp tabs */ .comp-tabs { padding: .3rem .5rem; gap: .2rem } .comp-tab { font-size: .64rem; padding: .2rem .4rem } /* News — layout horizontal compacto (estilo ESPN/G1 mobile) */ .news-grid, .news-grid.cols-2, .news-grid.cols-4 { grid-template-columns: 1fr !important; gap: .5rem !important; } .section-box-2col { grid-template-columns: 1fr !important } /* Card vira linha horizontal: thumb esquerda + texto direita */ .news-card { flex-direction: row !important; align-items: stretch; max-width: 100%; overflow: hidden; min-height: 88px; max-height: 110px; } .card-img-wrap { width: 110px !important; min-width: 110px !important; height: auto !important; aspect-ratio: unset !important; flex-shrink: 0; border-radius: 0; align-self: stretch; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover; } .card-sport-badge { display: none } .card-body { padding: .6rem .75rem !important; flex: 1; min-width: 0; justify-content: center; gap: .2rem; } .card-cat { margin-bottom: .15rem; font-size: .6rem } .card-title { font-size: .8rem !important; -webkit-line-clamp: 3 !important; line-height: 1.3; margin-bottom: .2rem; } .card-meta { font-size: .65rem; margin-top: .15rem } .section-title { font-size: .9rem } .section-header { margin-bottom: .75rem; overflow: hidden; min-width: 0 } .section-more { flex-shrink: 0; white-space: nowrap } .main-grid { padding: .4rem 0 } .section-box { padding: 1rem } /* Lists */ .list-thumb { width: 72px; height: 72px; flex-shrink: 0 } .list-title { font-size: .8rem } .list-meta { font-size: .7rem } /* Articles */ .article-title { font-size: 1.1rem !important } .article-meta { flex-direction: column; gap: .25rem } .article-body, .article-content { font-size: .93rem; line-height: 1.65 } .article-cover img, .article-img-wrap img { max-height: 230px; object-fit: cover; width: 100% } /* Standings */ .standings-table { font-size: .7rem } .standings-table th, .standings-table td { padding: .3rem .25rem } /* TV */ .tv-layout { gap: .6rem } .channel-grid { grid-template-columns: 1fr 1fr; gap: .4rem } .channel-item { flex-direction: column; text-align: center; padding: .5rem .35rem; gap: .2rem } .channel-logo { width: 34px; height: 34px; margin: 0 auto } .channel-name { font-size: .72rem } .channel-cat { display: none } /* Bolão banner */ .bolao-home-banner { flex-direction: column; align-items: flex-start; padding: 1rem; border-radius: .85rem; margin: .6rem 0; overflow: hidden; max-width: 100%; } .bolao-home-banner-right { flex-direction: row; align-self: stretch; justify-content: center; background: rgba(0,0,0,.1); border-radius: .5rem; padding: .45rem; gap: .75rem; max-width: 100%; overflow: hidden; } .bolao-home-trophies { font-size: 1.5rem } .bolao-home-banner-title { font-size: 1rem } .bolao-home-banner-sub { font-size: .78rem; margin-bottom: .65rem } .bolao-home-btn-primary { font-size: .8rem; padding: .5rem 1rem; white-space: normal } .bolao-home-btn-ghost { font-size: .78rem; padding: .5rem .85rem; white-space: normal } .bolao-home-banner-btns { gap: .5rem } /* Highlights */ .highlights-grid { grid-template-columns: 1fr 1fr } /* Misc */ .d-none-mobile { display: none !important } .ad-wrap { overflow: hidden } .footer-bottom { flex-direction: column; gap: .4rem; text-align: center } .tv-float { bottom: .7rem; right: .7rem } .tv-float-btn { font-size: .78rem; padding: .48rem .8rem } /* Admin */ .admin-main { padding: .65rem } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem } .stat-num { font-size: 1.45rem } .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch } } /* ── 390px — iPhones modernos ─────────────────────────── */ @media(max-width:390px) { .mc-body { padding: .6rem .5rem !important; } .mc-crest { width: 32px; height: 32px } .mc-score { font-size: 1.15rem } .mc-name { font-size: .63rem } .bolao-home-btn-primary, .bolao-home-btn-ghost { font-size: .77rem; padding: .45rem .9rem } } /* ── 360px — pequenos Android ─────────────────────────── */ @media(max-width:360px) { .container { padding: 0 .6rem } .mc-body { padding: .55rem .4rem !important; } .mc-score { font-size: 1.05rem } .mc-crest { width: 28px; height: 28px } .mc-name { font-size: .6rem } .comp-tab { font-size: .58rem; padding: .18rem .32rem } .highlights-grid { grid-template-columns: 1fr } .site-logo { font-size: .95rem } .bolao-home-btn-primary, .bolao-home-btn-ghost { font-size: .72rem; padding: .42rem .75rem } .section-box { padding: .8rem } } /* ── TV page: botões bolão ──────────────────────────── */ .bolao-tv-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .35rem .75rem; border-radius: .5rem; font-size: .78rem; font-weight: 700; border: 1px solid var(--border); background: var(--card2); color: var(--text); text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; } .bolao-tv-btn:hover { background: var(--card-bg); color: var(--primary) } .bolao-tv-btn--green { background: var(--primary); color: #fff; border-color: var(--primary) } .bolao-tv-btn--green:hover { background: var(--primary-d); color: #fff } /* ── Theme toggle button ──────────────────────────── */ .theme-toggle { background: var(--card2); border: 1px solid var(--border); border-radius: .5rem; padding: .28rem .5rem; cursor: pointer; font-size: 1rem; color: var(--text-main); flex-shrink: 0; transition: all .18s; display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; line-height: 1; } .theme-toggle:hover { background: var(--bg3); border-color: var(--primary); transform: scale(1.05) } /* ── Bolão top3 sidebar widget ────────────────────── */ .bolao-top3-widget { margin-top: 1.25rem } .bolao-top3-row { display: flex; align-items: center; gap: .65rem; padding: .55rem .75rem; border-radius: 10px; transition: background .15s; } .bolao-top3-row:hover { background: var(--bg3) } .bolao-top3-pos { width: 22px; font-size: .85rem; text-align: center; flex-shrink: 0 } .bolao-top3-ava { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #fff; flex-shrink: 0; overflow: hidden; } .bolao-top3-ava img { width: 100%; height: 100%; object-fit: cover } .bolao-top3-info { flex: 1; min-width: 0 } .bolao-top3-name { font-size: .83rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .bolao-top3-team { font-size: .7rem; color: var(--text-sub) } .bolao-top3-pts { font-size: .9rem; font-weight: 900; color: var(--primary); flex-shrink: 0 } /* ── Scorers compact in sidebar ──────────────────── */ .scorers-mini { display: flex; flex-direction: column; gap: .3rem } .scorer-mini-row { display: flex; align-items: center; gap: .5rem; font-size: .8rem; padding: .28rem 0 } .scorer-mini-pos { width: 18px; font-weight: 800; color: var(--text-sub); text-align: center; flex-shrink: 0 } .scorer-mini-name { flex: 1; font-weight: 600; color: var(--text) } .scorer-mini-goals { font-weight: 900; color: var(--accent); flex-shrink: 0 } /* ══════════════════════════════════════════════════════ BOLÃO HOME BANNER — v9 ══════════════════════════════════════════════════════ */ .bolao-home-banner { display: flex; align-items: center; justify-content: space-between; background: linear-gradient(135deg, #16a34a 0%, #15803d 60%, #166534 100%); border-radius: 1.2rem; padding: 1.5rem 2rem; margin: 1rem 0; gap: 1rem; box-shadow: 0 8px 32px rgba(22,163,74,.25); overflow: hidden; position: relative; } .bolao-home-banner::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; background: rgba(255,255,255,.06); border-radius: 50%; } .bolao-home-banner-left { flex: 1; min-width: 0 } .bolao-home-banner-tag { display: inline-flex; align-items: center; gap: .3rem; background: rgba(255,255,255,.2); color: #fff; font-size: .7rem; font-weight: 900; padding: .2rem .65rem; border-radius: 999px; letter-spacing: .08em; margin-bottom: .6rem; } .bolao-home-banner-title { font-size: 1.45rem; font-weight: 900; color: #fff; margin-bottom: .4rem; line-height: 1.2; } .bolao-home-banner-sub { font-size: .85rem; color: rgba(255,255,255,.85); margin-bottom: 1rem; line-height: 1.5; } .bolao-home-banner-btns { display: flex; gap: .75rem; flex-wrap: wrap; } .bolao-home-btn-primary { display: inline-flex; align-items: center; gap: .4rem; background: #fff; color: #16a34a; font-size: .9rem; font-weight: 800; padding: .65rem 1.5rem; border-radius: 999px; transition: all .2s; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,.15); } .bolao-home-btn-primary:hover { background: #f0fdf4; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,.2); } .bolao-home-btn-ghost { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.15); color: #fff; font-size: .88rem; font-weight: 700; padding: .65rem 1.3rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); transition: all .2s; white-space: nowrap; } .bolao-home-btn-ghost:hover { background: rgba(255,255,255,.25); transform: translateY(-2px); } .bolao-home-banner-right { display: flex; flex-direction: column; align-items: center; gap: .4rem; flex-shrink: 0; } .bolao-home-trophies { font-size: 2.2rem; line-height: 1 } .bolao-home-stat { font-size: .75rem; color: rgba(255,255,255,.85); font-weight: 700; white-space: nowrap; } /* ── Sidebar Bolão mini CTA ───────────────────────── */ .sidebar-bolao-cta { display: flex; align-items: center; gap: .65rem; background: linear-gradient(135deg, #16a34a, #15803d); border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; } .sidebar-bolao-icon { font-size: 1.6rem; flex-shrink: 0 } .sidebar-bolao-text { flex: 1; min-width: 0 } .sidebar-bolao-text strong { display: block; font-size: .88rem; color: #fff; font-weight: 800 } .sidebar-bolao-text span { font-size: .74rem; color: rgba(255,255,255,.8) } .sidebar-bolao-btn { display: inline-flex; align-items: center; background: rgba(255,255,255,.2); color: #fff; font-size: .78rem; font-weight: 800; padding: .38rem .8rem; border-radius: 999px; white-space: nowrap; transition: background .15s; flex-shrink: 0; } .sidebar-bolao-btn:hover { background: rgba(255,255,255,.35) } /* ══════════════════════════════════════════════════════ SKELETON LOADING — v1 ══════════════════════════════════════════════════════ */ @keyframes skeleton-shimmer { 0% { background-position: -400px 0 } 100% { background-position: 400px 0 } } .skeleton { background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 50%, var(--card2) 75%); background-size: 800px 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: .5rem; display: block; } .sk-line { height: 14px; margin-bottom: .5rem; } .sk-line-sm { height: 10px; width: 60%; margin-bottom: .4rem; } .sk-img { aspect-ratio: 16/9; border-radius: var(--radius); } .sk-circle { border-radius: 50%; width: 44px; height: 44px; } .sk-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow: hidden; } /* ══════════════════════════════════════════════════════ MICRO-ANIMAÇÕES & FEEDBACK VISUAL ══════════════════════════════════════════════════════ */ @keyframes fade-in-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes scale-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } } @keyframes bounce-in { 0% { transform: scale(.8); opacity: 0; } 70% { transform: scale(1.05); } 100% { transform: scale(1); opacity: 1; } } .anim-fade-in-up { animation: fade-in-up .35s ease both; } .anim-fade-in { animation: fade-in .25s ease both; } .anim-scale-in { animation: scale-in .25s ease both; } .anim-bounce-in { animation: bounce-in .45s ease both; } /* Stagger delays */ .anim-delay-1 { animation-delay: .05s; } .anim-delay-2 { animation-delay: .10s; } .anim-delay-3 { animation-delay: .15s; } .anim-delay-4 { animation-delay: .20s; } /* Focus rings acessíveis */ *:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ══════════════════════════════════════════════════════ TV / SMART TV — 1920px+ ══════════════════════════════════════════════════════ */ @media (min-width: 1920px) { body { font-size: 17px; } .container { max-width: 1600px; } .main-grid { grid-template-columns: 1fr 340px; gap: 2.5rem; } .news-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .matches-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } .mc-crest { width: 56px; height: 56px; } .mc-score { font-size: 2rem; } .mc-name { font-size: .9rem; } .card-title { font-size: 1rem !important; } .bolao-hero-title { font-size: 3rem !important; } .bolao-matches-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } } /* ══════════════════════════════════════════════════════ PRINT — Ocultar elementos não essenciais ══════════════════════════════════════════════════════ */ @media print { .topbar, .site-header, .footer, .ad-wrap, .nav-toggle, .theme-toggle, .header-search, .sidebar, .admin-sidebar, .admin-mob-bar { display: none !important; } body { background: #fff; color: #000; font-size: 12pt; } .container { max-width: 100%; padding: 0; } a { color: #000; text-decoration: underline; } } /* ══════════════════════════════════════════════════════ UTILITÁRIOS EXTRAS ══════════════════════════════════════════════════════ */ .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-center { text-align: center; } .text-primary { color: var(--primary); } .text-muted { color: var(--text-muted); } .fw-bold { font-weight: 700; } .fw-black { font-weight: 900; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .d-flex { display: flex; } .d-grid { display: grid; } .d-block { display: block; } .d-none { display: none !important; } .flex-wrap { flex-wrap: wrap; } .align-center { align-items: center; } .justify-between { justify-content: space-between; } .justify-center { justify-content: center; } .w-100 { width: 100%; } .rounded { border-radius: var(--radius); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-full { border-radius: 9999px; } .border { border: 1px solid var(--border); } .bg-card { background: var(--card-bg); } .bg-card2 { background: var(--card2); } .overflow-hidden { overflow: hidden; } .pos-relative { position: relative; } .cursor-pointer { cursor: pointer; } /* ══════════════════════════════════════════════════════ RESPONSIVE v15 — BUILD 2026-06-21 Fix artigo layout, section-box-2col, admin drawer, d-none-tablet, container overflow ══════════════════════════════════════════════════════ */ /* ── Article page flex layout ────────────────────────── */ .article-flex-layout { display: flex; gap: 1.5rem; align-items: flex-start; width: 100%; min-width: 0; } .article-flex-layout > .article-wrap { flex: 1; min-width: 0; max-width: 100%; } .article-side { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1rem; } /* ── section-box-2col base (garante grid no desktop) ── */ .section-box-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } /* ── d-none-tablet: some em ≤900px ─────────────────── */ .d-none-tablet { display: block } /* ── Overrides 900px ──────────────────────────────────── */ @media (max-width: 900px) { /* Article: colapsa para coluna única */ .article-flex-layout { flex-direction: column; gap: 1rem; } .article-flex-layout > .article-wrap { width: 100%; } .article-side { display: none } /* section-box-2col: 1 coluna em tablet */ .section-box-2col { grid-template-columns: 1fr !important; gap: 1rem; } /* Esconde coluna lateral do artigo */ .d-none-tablet { display: none !important } /* Admin: neutraliza o CSS antigo de horizontal-scroll O sidebar.php v3 cuida do drawer com position:fixed */ .admin-wrap { flex-direction: column } .admin-sidebar { width: 100% !important; height: auto !important; position: relative !important; top: auto !important; display: none !important; /* drawer cuida disso via JS */ } .admin-sidebar.open { display: flex !important; flex-direction: column !important; position: fixed !important; top: 0 !important; left: 0 !important; width: var(--sidebar-w, 230px) !important; height: 100vh !important; z-index: 250 !important; } .admin-main { padding: 1rem } } /* ── 768px ────────────────────────────────────────────── */ @media (max-width: 768px) { /* Container: padding menor */ .container { padding-left: .85rem; padding-right: .85rem } /* news-grid: 2 cols */ .news-grid { grid-template-columns: repeat(2, 1fr) } /* section-box-2col: já é 1fr acima */ /* Artigo: padding menor */ .article-header { padding: 0 } .article-wrap { padding: 0 } } /* ── 600px ─────────────────────────────────────────────── */ @media (max-width: 600px) { /* Containers */ .container { padding-left: .75rem; padding-right: .75rem } /* news-grid: 1 coluna */ .news-grid, .news-grid.cols-2, .news-grid.cols-4 { grid-template-columns: 1fr !important; gap: .5rem; } /* news card horizontal compacto */ .news-card { flex-direction: row !important; max-height: 110px; min-height: 88px; overflow: hidden; } .card-img-wrap { width: 110px !important; min-width: 110px !important; height: auto !important; aspect-ratio: unset !important; flex-shrink: 0; align-self: stretch; } .card-img-wrap img { width: 100%; height: 100%; object-fit: cover } .card-body { padding: .55rem .7rem !important; flex: 1; min-width: 0; justify-content: center; } .card-title { font-size: .8rem !important; -webkit-line-clamp: 3 !important; } .card-sport-badge { display: none } /* section-box-2col */ .section-box-2col { gap: .75rem } /* Matches grid */ .matches-grid { grid-template-columns: 1fr !important; gap: .5rem } .mc { min-width: 0; width: 100%; overflow: hidden } .mc-body { padding: .7rem .6rem !important; overflow: hidden; box-sizing: border-box; } .mc-score { font-size: 1.25rem } .mc-crest { width: 36px; height: 36px } .mc-name { font-size: .68rem } /* Hero */ .hero-card { min-height: 220px } .hero-title { font-size: 1.1rem !important } /* Footer */ .footer-grid { grid-template-columns: 1fr } .footer-links { display: none } .footer-bottom { flex-direction: column; gap: .35rem; text-align: center } /* Table scroll */ .standings-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch } /* TV float smaller */ .tv-float { bottom: .7rem; right: .7rem } .tv-float-btn { font-size: .78rem; padding: .45rem .8rem } /* Topbar */ .topbar { display: none } } /* ── 480px — smartphones ──────────────────────────────── */ @media (max-width: 480px) { .header-inner { height: 54px; padding: 0 .75rem; gap: .4rem } .logo-badge { display: none } .site-logo { font-size: 1rem } .header-search { display: none } /* Matches */ .mc-body { padding: .65rem .5rem !important; } .mc-crest { width: 32px; height: 32px } .mc-score { font-size: 1.15rem } .mc-name { font-size: .63rem } .mc-status, .mc-live-badge { font-size: .56rem } .mc-header { padding: .38rem .6rem; overflow: hidden } .mc-comp { font-size: .59rem } /* Comp tabs */ .comp-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .3rem .5rem; gap: .2rem; } .comp-tabs::-webkit-scrollbar { display: none } .comp-tab { flex-shrink: 0; font-size: .63rem; padding: .2rem .42rem } /* Artigo */ .article-title { font-size: 1.1rem !important } .article-meta { flex-direction: column; gap: .2rem } .article-body, .article-content { font-size: .93rem; line-height: 1.65 } .article-img-wrap img { max-height: 220px; object-fit: cover } .article-cover img { max-height: 220px; object-fit: cover } /* Standings smaller font */ .standings-table { font-size: .7rem } .standings-table th, .standings-table td { padding: .3rem .2rem } /* TV channels */ .channel-grid { grid-template-columns: 1fr 1fr; gap: .4rem } .channel-item { flex-direction: column; text-align: center; padding: .5rem .3rem; gap: .15rem } .channel-logo { width: 32px; height: 32px; margin: 0 auto } .channel-name { font-size: .7rem } .channel-cat { display: none } .tv-layout { grid-template-columns: 1fr } /* Bolão banner */ .bolao-home-banner { flex-direction: column; padding: 1rem; border-radius: .85rem; } .bolao-home-banner-right { flex-direction: row; justify-content: center; gap: .75rem; } .bolao-home-banner-title { font-size: .98rem } .bolao-home-banner-sub { font-size: .78rem } .bolao-home-btn-primary, .bolao-home-btn-ghost { font-size: .8rem; padding: .5rem 1rem } .bolao-home-banner-btns { gap: .5rem } .bolao-home-trophies { font-size: 1.5rem } /* Section */ .section-title { font-size: .88rem } .section-box { padding: .9rem } .main-grid { padding: .35rem 0 } /* List cards */ .list-thumb { width: 68px; height: 68px; flex-shrink: 0 } .list-title { font-size: .78rem } .list-meta { font-size: .68rem } /* Misc */ .d-none-mobile { display: none !important } .ad-wrap { overflow: hidden; max-width: 100% } .admin-main { padding: .65rem } .stat-grid { grid-template-columns: repeat(2, 1fr); gap: .5rem } .stat-num { font-size: 1.4rem } .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch } } /* ── 390px — iPhones ──────────────────────────────────── */ @media (max-width: 390px) { .mc-body { padding: .6rem .45rem !important } .mc-crest { width: 30px; height: 30px } .mc-score { font-size: 1.1rem } .mc-name { font-size: .6rem } .site-logo { font-size: .9rem } .comp-tab { font-size: .6rem; padding: .18rem .35rem } .bolao-home-btn-primary, .bolao-home-btn-ghost { font-size: .77rem; padding: .45rem .85rem } } /* ── 360px — pequenos Android ─────────────────────────── */ @media (max-width: 360px) { .container { padding-left: .55rem; padding-right: .55rem } .mc-body { padding: .5rem .35rem !important } .mc-score { font-size: 1rem } .mc-crest { width: 26px; height: 26px } .mc-name { font-size: .57rem } .section-box { padding: .75rem } .highlights-grid { grid-template-columns: 1fr } } /* ═══════════════════════════════════════════════════════ v9 ENHANCEMENTS — Micro-animações, UX e polimento ═══════════════════════════════════════════════════════ */ /* ── Smooth scroll global ── */ html { scroll-behavior: smooth; } /* ── Focus rings acessíveis ── */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; } /* ── Skeleton loader ── */ @keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } .skeleton { background: linear-gradient(90deg, var(--card2) 25%, var(--card3) 37%, var(--card2) 63% ); background-size: 800px 100%; animation: shimmer 1.4s infinite linear; border-radius: var(--radius-sm); } .skeleton-text { height: .9em; width: 80%; margin-bottom: .45rem; } .skeleton-title { height: 1.1em; width: 60%; margin-bottom: .6rem; } .skeleton-img { width: 100%; aspect-ratio: 16/9; border-radius: var(--radius); } /* ── Card hover lift (enhanced) ── */ .news-card, .highlight-card, .match-card, .mc { transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, border-color .2s ease; will-change: transform; } .news-card:hover, .highlight-card:hover, .match-card:hover { transform: translateY(-3px); } /* ── Button press effect ── */ .bolao-btn:active, .nav-cta:active, a[class*="btn"]:active { transform: scale(.97); } /* ── Live dot pulse (globalizar) ── */ .live-dot, .live-indicator { display: inline-block; width: 8px; height: 8px; background: var(--primary); border-radius: 50%; animation: livePulse9 1.8s ease-in-out infinite; margin-right: .3rem; } @keyframes livePulse9 { 0%, 100% { box-shadow: 0 0 0 0 rgba(22,163,74,.5); } 50% { box-shadow: 0 0 0 5px rgba(22,163,74,0); } } /* ── Scrollbar customizada (Webkit) ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); } /* ── Page fade-in ── */ @keyframes pageIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } } .container { animation: pageIn .25s ease both; } /* ── Match card: result highlight ── */ .mc.live { border-left: 3px solid var(--primary); } .mc.ft { border-left: 3px solid var(--border2); opacity:.85; } .mc.ns { border-left: 3px solid var(--blue); } /* ── Notification badge pulse ── */ @keyframes badgePop { 0% { transform: scale(1); } 30% { transform: scale(1.3); } 60% { transform: scale(.9); } 100% { transform: scale(1); } } .badge-count { animation: badgePop .4s ease; } /* ── Section header accent line ── */ .section-title::before { content: ''; display: inline-block; width: 4px; height: 1em; background: var(--primary); border-radius: 2px; margin-right: .5rem; vertical-align: middle; flex-shrink: 0; } .section-title { display: flex; align-items: center; } /* ── Nav links smooth ── */ .nav-link { transition: color .15s, background .15s; } /* ── Image lazy load fade ── */ /* CORRIGIDO: removido opacity:0 pois .loaded nunca era adicionado pelo JS nativo */ img[loading="lazy"] { transition: opacity .3s; } img[loading="lazy"].loaded { opacity: 1; } /* ── Bolão CTA banner (melhorado) ── */ .bolao-home-banner { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); position: relative; overflow: hidden; } .bolao-home-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.1) 0%, transparent 60%); pointer-events: none; } /* ── Input / select focus glow ── */ input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 3px rgba(22,163,74,.15); } /* ── Toast notification ── */ .toast { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 9999; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1.2rem; box-shadow: var(--shadow-lg); font-size: .87rem; animation: toastIn .25s ease both; display: flex; align-items: center; gap: .6rem; max-width: 320px; } .toast-ok { border-left: 4px solid var(--primary); } .toast-err { border-left: 4px solid var(--red); } @keyframes toastIn { from { opacity:0; transform:translateX(30px); } to { opacity:1; transform:none; } } /* ── Admin tabs (novo) ── */ .admin-tabs { display: flex; gap: .4rem; border-bottom: 2px solid var(--border-col,var(--border)); margin-bottom: 1.25rem; flex-wrap: wrap; } .admin-tab { padding: .55rem 1rem; font-size: .84rem; font-weight: 700; color: var(--text-muted); background: none; border: none; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .15s, border-color .15s; } .admin-tab.active, .admin-tab:hover { color: var(--primary); border-bottom-color: var(--primary); } /* ── Responsive helpers ── */ @media (max-width: 768px) { .hide-mobile { display: none !important; } } @media (min-width: 769px) { .show-mobile-only { display: none !important; } } /* ═══════════════════════════════════════════════════════ v10 RESPONSIVE FIX — overflow, nav mobile, mobile UX ═══════════════════════════════════════════════════════ */ /* ── Anti-overflow global ──────────────────────────── */ html, body { overflow-x: hidden; max-width: 100vw; } /* Garante que nenhum elemento ultrapasse o viewport */ img, video, iframe, table, pre, canvas, svg { max-width: 100%; } /* Elementos que podem vazar horizontalmente */ .container, .header-inner, .main-grid, .section-box, .section-header, .news-grid, .matches-grid, .comp-tabs, .footer-inner, .bolao-hero, .bolao-content, .bolao-matches-grid, .bolao-league-list, .ranking-table, .chat-container, .admin-main, .data-table-wrap { min-width: 0; word-break: break-word; } /* Tabelas: sempre scroll horizontal, nunca vazar */ .data-table-wrap, .table-responsive, .standings-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; } /* ── Nav mobile — corrige top ao encolher o header ── */ @media (max-width: 480px) { .header-nav { top: 54px !important; /* header-inner height = 54px nesse breakpoint */ } } /* ── Comp-tabs: scroll horizontal suave ─────────────── */ .comp-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; flex-wrap: nowrap; scroll-snap-type: x mandatory; } .comp-tabs::-webkit-scrollbar { display: none } .comp-tab { scroll-snap-align: start; flex-shrink: 0; } /* ── Header: evita overflow quando logo é grande ─────── */ .site-logo { max-width: 200px; overflow: hidden; text-overflow: ellipsis; } .site-logo img { max-height: 38px; width: auto; object-fit: contain; } /* ── Match cards: nunca overflow ──────────────────────── */ .mc, .match-card { min-width: 0; overflow: hidden; } .mc-name, .team-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* ── Bolão: tabelas e formulários responsivos ─────────── */ /* CORRIGIDO: removido 1fr!important em ≤768px — bolao.css usa 2 colunas em 480-768px */ @media (max-width: 768px) { .bpl-row { flex-wrap: wrap; gap: .4rem; } .bolao-ranking-table th, .bolao-ranking-table td { font-size: .72rem; padding: .35rem .4rem; } } @media (max-width: 480px) { .bolao-palpitar-grid, .bolao-matches-grid { grid-template-columns: 1fr !important; gap: .5rem !important; } .bolao-match-card { padding: .85rem !important; } .score-input-wrap { gap: .5rem } .score-input { width: 44px !important; font-size: 1.2rem !important; } } /* ── Admin: sidebar e tabelas ─────────────────────────── */ @media (max-width: 900px) { .admin-wrap { flex-direction: column; overflow: hidden; } .admin-main { width: 100% !important; max-width: 100vw; overflow-x: hidden; } } /* ── Footer: sempre coluna em mobile ─────────────────── */ @media (max-width: 480px) { .footer { padding: 2rem 0 1rem } .footer-grid { grid-template-columns: 1fr; gap: 1.25rem } .footer-logo { font-size: 1.1rem } } /* ── Hero: sem overflow de texto ──────────────────────── */ .hero-title, .hero-subtitle, .hero-content { word-break: break-word; overflow-wrap: break-word; } /* ── Artigos: imagens nunca excedem container ─────────── */ .article-body img, .article-content img { max-width: 100%; height: auto; border-radius: 8px; } /* ── Seção com grid de 2 cols — força 1 col em mobile ── */ @media (max-width: 600px) { .section-box-2col { grid-template-columns: 1fr !important; gap: .75rem !important; } .highlights-grid { grid-template-columns: 1fr 1fr !important; } } /* ═══════════════════════════════════════════════════════ v20 — CORREÇÃO DEFINITIVA: OVERFLOW & ALINHAMENTO ═══════════════════════════════════════════════════════ */ /* ── Anúncios: nunca vazar horizontalmente ────────────── */ .ad-wrap { overflow: hidden !important; max-width: 100% !important; width: 100%; box-sizing: border-box; } .ad-wrap iframe, .ad-wrap ins, .ad-wrap > div, .ad-wrap > script + * { max-width: 100% !important; } /* ── Topbar: stacking context robusto para clipping ─── */ .topbar { position: relative; /* garante que overflow:hidden clipa o ticker animado */ box-sizing: border-box; } /* ── Alinhamento simétrico: topbar = header = container ─ */ /* Desktop: todos usam 1rem horizontal */ /* 768px: todos passam para 0.85rem */ @media (max-width: 768px) { .topbar { padding-left: .85rem; padding-right: .85rem; gap: .5rem } .header-inner { padding-left: .85rem !important; padding-right: .85rem !important } .container { padding-left: .85rem !important; padding-right: .85rem !important } /* Esconde data no topbar em tablet — libera espaço para o ticker */ .topbar > span:last-child { display: none } } /* 600px: todos passam para 0.75rem */ @media (max-width: 600px) { .topbar { padding-left: .75rem; padding-right: .75rem } .header-inner { padding-left: .75rem !important; padding-right: .75rem !important } .container { padding-left: .75rem !important; padding-right: .75rem !important } } /* 480px: mantém 0.75rem (já definido acima) */ /* ── Notícias: garantia de não-overflow em qualquer tela ── */ .news-grid { width: 100%; max-width: 100%; box-sizing: border-box; } .news-card { box-sizing: border-box; max-width: 100%; min-width: 0; } /* Card horizontal (≤600px): conter texto e imagem no espaço disponível */ @media (max-width: 600px) { .card-img-wrap { max-width: 110px !important; flex-shrink: 0 !important } .card-body { min-width: 0 !important; overflow: hidden } .card-title { word-break: break-word; overflow-wrap: break-word } } /* ── Bolão home banner: simétrico em mobile ─────────── */ .bolao-home-banner { box-sizing: border-box; max-width: 100%; } @media (max-width: 480px) { .bolao-home-banner { border-radius: .65rem } } /* ── Qualquer grid ou flex filho de container ──────── */ .container > * { max-width: 100%; box-sizing: border-box } /* ── Proteção universal: iframes e embeds externos ──── */ iframe, embed, object { max-width: 100%; } /* ── Nav mobile: top alinhado ao header corretamente ── */ @media (max-width: 768px) { .header-nav { top: 56px !important } } @media (max-width: 600px) { .header-nav { top: 56px !important } } @media (max-width: 480px) { .header-nav { top: 54px !important } } /* ═══════════════════════════════════════════════════════ v21 — CORREÇÃO RAIZ: CSS GRID OVERFLOW Problema: `1fr` tem min-size: auto (min-content). Quando o conteúdo não encolhe, o grid ultrapassa o container causando overflow horizontal. Solução: min-width:0 em todos os itens de grid. ═══════════════════════════════════════════════════════ */ /* Todos os filhos diretos de grids: permitir encolher abaixo do min-content */ .main-grid > *, .news-grid > *, .section-box-2col > *, .article-layout > *, .tv-layout > *, .footer-grid > *, .matches-grid > *, .highlights-grid > *, .resultados-grid > *, .stat-grid > *, .sidebar > *, .bolao-matches-grid > *, .bolao-league-list > *, .channel-grid > * { min-width: 0; } /* Container: corta qualquer overflow residual */ .container { overflow-x: hidden; } /* Garantia final: textos longos nunca quebram o layout */ .card-title, .card-cat, .card-meta, .hero-title, .hero-meta, .section-title, .article-title, .nav-link, .site-logo { overflow-wrap: break-word; word-break: break-word; } /* Forçar news-grid em todos os breakpoints a usar minmax(0,1fr) */ @media (max-width: 768px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) } .news-grid.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) } } @media (max-width: 600px) { .news-grid, .news-grid.cols-2, .news-grid.cols-4 { grid-template-columns: minmax(0, 1fr) !important } } @media (max-width: 480px) { .news-grid, .news-grid.cols-2, .news-grid.cols-4 { grid-template-columns: minmax(0, 1fr) !important } }