/* CartolaNews Champions Hub — frontend styles. Every rule is scoped under * .cnch-scope so nothing leaks into the Foxiz theme or other plugins. */ .cnch-scope { --cnch-primary: #144b9b; --cnch-secondary: #7494c4; --cnch-light: #e9e9ea; --cnch-text: #2b2b24; --cnch-dark-bg: #0d111b; --cnch-dark-card: #171d29; --cnch-gold: #d8b45a; --cnch-bg: #ffffff; --cnch-card-bg: #ffffff; --cnch-border: #dfe3ea; --cnch-text-muted: #5b6472; --cnch-radius: 12px; --cnch-max-width: 1340px; box-sizing: border-box; color: var(--cnch-text); background: var(--cnch-bg); font-family: inherit; line-height: 1.5; } /* * Quando a página é montada no Elementor com um container "Boxed", o wrapper * .e-con-inner limita a largura (ex.: ~1240px) mesmo com --cnch-max-width * configurado para mais. Neutraliza esse limite só no container que envolve * o hub. */ .e-con-inner:has(.cnch-scope) { max-width: none !important; } .cnch-scope *, .cnch-scope *::before, .cnch-scope *::after { box-sizing: inherit; } /* The Foxiz theme toggles dark mode by setting data-theme="dark" (or * "default" for light) on via its own switcher (foxiz-core * assets/core.js, Module.switchDarkMode) — not on , and not via the * browser/OS "prefers-color-scheme". We follow that attribute so this * section always matches whatever the visitor picked with the site's own * light/dark button, regardless of their OS preference. The OS-level media * query is used only as a last-resort fallback for the rare case this * plugin renders on a page where Foxiz hasn't set the attribute at all. */ body:not([data-theme]) .cnch-scope { --cnch-bg: #ffffff; --cnch-card-bg: #ffffff; --cnch-text: #2b2b24; --cnch-text-muted: #5b6472; --cnch-border: #dfe3ea; } @media (prefers-color-scheme: dark) { body:not([data-theme]) .cnch-scope { --cnch-bg: var(--cnch-dark-bg); --cnch-card-bg: var(--cnch-dark-card); --cnch-text: #f1f2f4; --cnch-text-muted: #aab1bd; --cnch-border: #2a3140; } } body[data-theme="default"] .cnch-scope, .cnch-scope.cnch-theme-light { --cnch-bg: #ffffff; --cnch-card-bg: #ffffff; --cnch-text: #2b2b24; --cnch-text-muted: #5b6472; --cnch-border: #dfe3ea; } body[data-theme="dark"] .cnch-scope, .cnch-scope.cnch-theme-dark { --cnch-bg: var(--cnch-dark-bg); --cnch-card-bg: var(--cnch-dark-card); --cnch-text: #f1f2f4; --cnch-text-muted: #aab1bd; --cnch-border: #2a3140; } .cnch-container { max-width: var(--cnch-max-width); margin: 0 auto; padding: 0 20px; } /* ---------- Hero ---------- */ .cnch-hero { position: relative; background-color: var(--cnch-primary); background-size: cover; background-position: center; color: #fff; padding: 64px 0; overflow: hidden; } .cnch-hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(20, 75, 155, 0.92), rgba(13, 17, 27, 0.85)); } .cnch-hero--overlay-gold .cnch-hero__overlay { background: linear-gradient(135deg, rgba(20, 75, 155, 0.9), rgba(216, 180, 90, 0.55)); } .cnch-hero__content { position: relative; z-index: 1; } .cnch-hero__eyebrow { display: inline-block; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 4px 14px; font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 16px; } .cnch-hero__title { font-size: clamp(1.8rem, 4vw, 3rem); font-weight: 800; margin: 0 0 12px; line-height: 1.1; } .cnch-hero__subtitle { max-width: 640px; font-size: 1.05rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 28px; } .cnch-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; } /* ---------- Buttons & links ---------- */ .cnch-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease; } .cnch-btn--hero { background: #fff; color: var(--cnch-primary); } .cnch-btn--hero:hover, .cnch-btn--hero:focus-visible { background: var(--cnch-gold); color: #142033; } .cnch-btn--small { min-height: 40px; padding: 8px 16px; background: var(--cnch-primary); color: #fff; font-size: 0.9rem; } .cnch-link { color: var(--cnch-primary); font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; } .cnch-scope.cnch-theme-dark .cnch-link, body[data-theme="dark"] .cnch-scope .cnch-link { color: #8fb2e8; } .cnch-link:hover, .cnch-link:focus-visible { text-decoration: underline; } .cnch-scope a:focus-visible, .cnch-scope button:focus-visible, .cnch-scope input:focus-visible, .cnch-scope select:focus-visible { outline: 3px solid var(--cnch-gold); outline-offset: 2px; } /* ---------- Tabs / navigation ---------- */ .cnch-nav { background: var(--cnch-card-bg); border-bottom: 1px solid var(--cnch-border); position: sticky; top: 0; z-index: 5; } .cnch-nav__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .cnch-nav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; white-space: nowrap; } .cnch-nav__link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; color: var(--cnch-text-muted); text-decoration: none; font-weight: 600; border-bottom: 3px solid transparent; } .cnch-nav__link[aria-selected="true"] { color: var(--cnch-primary); border-bottom-color: var(--cnch-primary); } .cnch-scope.cnch-theme-dark .cnch-nav__link[aria-selected="true"], body[data-theme="dark"] .cnch-scope .cnch-nav__link[aria-selected="true"] { color: var(--cnch-gold); border-bottom-color: var(--cnch-gold); } .cnch-panels { padding: 28px 20px 56px; } /* When JS is active, only the selected panel is shown; without JS every * panel stays visible and stacked so content never depends on JS. */ .cnch-hub.cnch-js .cnch-panel { display: none; } .cnch-hub.cnch-js .cnch-panel.is-active { display: block; } .cnch-panel { min-height: 1px; margin-bottom: 40px; scroll-margin-top: 70px; } .cnch-section__title { font-size: 1.5rem; margin: 0 0 20px; } .cnch-section__subtitle { font-size: 1.15rem; margin: 32px 0 16px; } .cnch-updated-at { color: var(--cnch-text-muted); font-size: 0.85rem; margin: 0 0 16px; } .cnch-empty { background: var(--cnch-card-bg); border: 1px dashed var(--cnch-border); border-radius: var(--cnch-radius); padding: 20px; color: var(--cnch-text-muted); } /* ---------- Cards ---------- */ .cnch-card { background: var(--cnch-card-bg); border: 1px solid var(--cnch-border); border-radius: var(--cnch-radius); padding: 20px; margin-bottom: 24px; } .cnch-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .cnch-card__title { margin: 0; font-size: 1.15rem; } /* ---------- Match list ---------- */ .cnch-match-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .cnch-match-card { border: 1px solid var(--cnch-border); border-radius: var(--cnch-radius); padding: 14px 16px; background: var(--cnch-bg); } .cnch-match-card__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 0.85rem; color: var(--cnch-text-muted); margin-bottom: 10px; } .cnch-match-card__time { font-weight: 700; color: var(--cnch-text); } .cnch-badge { background: var(--cnch-light); color: var(--cnch-primary); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; } .cnch-badge--muted { background: transparent; border: 1px solid var(--cnch-border); color: var(--cnch-text-muted); } .cnch-scope.cnch-theme-dark .cnch-badge, body[data-theme="dark"] .cnch-scope .cnch-badge { background: rgba(116, 148, 196, 0.25); color: #cdddf5; } .cnch-match-card__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; font-weight: 600; } .cnch-team { display: flex; align-items: center; gap: 8px; } /* Pull the home team toward the score (right-aligned in its column) and * keep the away team hugging the score on the other side, instead of both * being pinned to the outer edges of the card with a large empty gap. */ .cnch-match-card__teams .cnch-team:first-child { justify-content: flex-end; text-align: right; } .cnch-match-card__teams .cnch-team:last-child { justify-content: flex-start; text-align: left; } .cnch-shield { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; } .cnch-match-card__score { font-weight: 800; font-size: 1.1rem; text-align: center; } .cnch-match-card__footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; font-size: 0.85rem; color: var(--cnch-text-muted); } .cnch-status { margin-left: auto; font-weight: 700; padding: 2px 10px; border-radius: 999px; } .cnch-status--scheduled { background: var(--cnch-light); color: var(--cnch-primary); } .cnch-status--live { background: #ffe4e4; color: #b3261e; } .cnch-status--finished { background: #e3f3e6; color: #1e7a37; } .cnch-status--postponed, .cnch-status--cancelled { background: #f1f1f1; color: #6b6b6b; } .cnch-broadcast { font-weight: 600; } .cnch-broadcast--link { color: var(--cnch-primary); text-decoration: none; } .cnch-broadcast--link:hover, .cnch-broadcast--link:focus-visible { text-decoration: underline; } body[data-theme="dark"] .cnch-scope .cnch-broadcast--link { color: var(--cnch-gold); } .cnch-attribution, .cnch-source-note { font-size: 0.75rem; color: var(--cnch-text-muted); margin-top: 8px; } /* ---------- Filters ---------- */ .cnch-filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; } .cnch-filters select, .cnch-filters input[type="date"] { min-height: 44px; border-radius: 8px; border: 1px solid var(--cnch-border); padding: 6px 10px; background: var(--cnch-card-bg); color: var(--cnch-text); } .cnch-pagination { display: flex; align-items: center; gap: 16px; margin-top: 20px; } /* ---------- Tables (standings / scorers / historical) ---------- */ .cnch-table-scroll { overflow-x: auto; border: 1px solid var(--cnch-border); border-radius: var(--cnch-radius); } .cnch-table { border-collapse: collapse; width: 100%; min-width: 520px; } .cnch-table th, .cnch-table td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--cnch-border); white-space: nowrap; } .cnch-table thead th { background: var(--cnch-light); color: var(--cnch-primary); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.03em; } .cnch-scope.cnch-theme-dark .cnch-table thead th, body[data-theme="dark"] .cnch-scope .cnch-table thead th { background: rgba(116, 148, 196, 0.18); color: #cdddf5; } .cnch-table tbody tr:hover { background: rgba(20, 75, 155, 0.05); } .cnch-sticky { position: sticky; left: 0; background: var(--cnch-card-bg); z-index: 1; } .cnch-sticky:nth-child(1) { left: 0; } .cnch-sticky:nth-child(2) { left: 42px; min-width: 160px; } .cnch-table__club, .cnch-table__player { display: flex; align-items: center; gap: 8px; } .cnch-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; } .cnch-avatar--large { width: 48px; height: 48px; } .cnch-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 0; padding: 0; font-size: 0.85rem; color: var(--cnch-text-muted); } .cnch-legend__item { display: flex; align-items: center; gap: 6px; } .cnch-legend__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; background: var(--cnch-secondary); } /* Zone accents (generic; not tied to a fixed provider vocabulary) */ .cnch-zone-none { } /* ---------- Bracket ---------- */ .cnch-widget-embed { position: relative; width: 100%; min-height: 480px; border: 1px solid var(--cnch-border); border-radius: var(--cnch-radius); overflow: hidden; } .cnch-widget-embed iframe { width: 100%; height: 100%; min-height: 480px; border: 0; } .cnch-bracket-wrap { position: relative; } .cnch-bracket-scroll { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scroll-behavior: smooth; } .cnch-bracket-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cnch-border); background: var(--cnch-card-bg); color: var(--cnch-primary); font-size: 1.4rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); display: none; align-items: center; justify-content: center; } .cnch-bracket-wrap.has-overflow .cnch-bracket-nav { display: flex; } .cnch-bracket-nav--prev { left: -6px; } .cnch-bracket-nav--next { right: -6px; } .cnch-bracket-nav[disabled] { opacity: 0.35; cursor: default; } .cnch-scope.cnch-theme-dark .cnch-bracket-nav, body[data-theme="dark"] .cnch-scope .cnch-bracket-nav { color: var(--cnch-gold); } .cnch-bracket-column { min-width: 220px; flex: 0 0 auto; } .cnch-bracket-column__title { font-size: 0.95rem; margin: 0 0 12px; color: var(--cnch-text-muted); } .cnch-bracket-tie { border: 1px solid var(--cnch-border); border-radius: 10px; padding: 10px; margin-bottom: 14px; background: var(--cnch-card-bg); font-size: 0.9rem; } .cnch-bracket-tie__row { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .cnch-bracket-tie__score { margin-left: auto; font-weight: 700; } .cnch-bracket-tie__date { display: block; margin-top: 6px; color: var(--cnch-text-muted); font-size: 0.75rem; } /* ---------- Scorers mini list (overview) ---------- */ .cnch-scorer-mini-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .cnch-scorer-mini-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--cnch-border); padding-bottom: 8px; font-size: 0.9rem; } .cnch-scorer-mini__player { display: flex; align-items: center; gap: 8px; flex: 1.4; min-width: 0; } .cnch-scorer-mini__player .cnch-avatar, .cnch-scorer-mini__player .cnch-shield { flex-shrink: 0; } .cnch-scorer-mini__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnch-scorer-mini__club { color: var(--cnch-text-muted); flex: 1; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnch-scorer-mini__goals { font-weight: 700; } /* ---------- Statistics ---------- */ .cnch-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; } .cnch-stat-card { background: var(--cnch-card-bg); border: 1px solid var(--cnch-border); border-radius: var(--cnch-radius); padding: 16px; display: flex; flex-direction: column; gap: 4px; } .cnch-stat-card__label { font-size: 0.8rem; color: var(--cnch-text-muted); text-transform: uppercase; letter-spacing: 0.03em; } .cnch-stat-card__value { font-size: 1.6rem; font-weight: 800; color: var(--cnch-primary); } .cnch-scope.cnch-theme-dark .cnch-stat-card__value, body[data-theme="dark"] .cnch-scope .cnch-stat-card__value { color: var(--cnch-gold); } .cnch-stat-card__team { font-size: 0.85rem; color: var(--cnch-text-muted); } /* ---------- Brazilians ---------- */ .cnch-brazilian-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .cnch-brazilian-card { display: flex; gap: 10px; align-items: center; border: 1px solid var(--cnch-border); border-radius: var(--cnch-radius); padding: 12px; background: var(--cnch-card-bg); } .cnch-brazilian-card__info { display: flex; flex-direction: column; gap: 2px; } .cnch-brazilian-card__name { font-weight: 700; } .cnch-brazilian-card__club, .cnch-brazilian-card__stats { font-size: 0.85rem; color: var(--cnch-text-muted); } /* ---------- Featured ---------- */ .cnch-featured__main { display: block; text-decoration: none; color: inherit; } .cnch-featured__main img { width: 100%; height: auto; border-radius: var(--cnch-radius); margin-bottom: 10px; } .cnch-featured__title { display: block; font-weight: 700; font-size: 1.05rem; margin-bottom: 4px; } .cnch-featured__excerpt { display: block; color: var(--cnch-text-muted); font-size: 0.9rem; } .cnch-featured__secondary { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--cnch-border); display: grid; gap: 8px; } .cnch-featured__secondary a { display: flex; align-items: center; gap: 10px; color: var(--cnch-primary); text-decoration: none; font-weight: 600; } .cnch-featured__secondary a:hover, .cnch-featured__secondary a:focus-visible { text-decoration: underline; } .cnch-scope.cnch-theme-dark .cnch-featured__secondary a, body[data-theme="dark"] .cnch-scope .cnch-featured__secondary a { color: #8fb2e8; } .cnch-featured__secondary-thumb { flex-shrink: 0; width: 56px; height: 40px; border-radius: 6px; overflow: hidden; display: block; } .cnch-featured__secondary-thumb img { width: 100%; height: 100%; object-fit: cover; margin: 0; border-radius: 0; } /* ---------- Overview grid (Visão geral) ---------- */ .cnch-overview-grid { display: grid; gap: 20px; align-items: start; margin-bottom: 20px; } .cnch-overview-grid--lead { grid-template-columns: 3fr 2fr; } .cnch-overview-grid--data { grid-template-columns: 1fr 1fr; } .cnch-overview-grid .cnch-card { margin-bottom: 0; } .cnch-stat-grid--compact { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .cnch-brazilian-list--compact { grid-template-columns: 1fr; } @media (max-width: 900px) { .cnch-overview-grid--lead, .cnch-overview-grid--data { grid-template-columns: 1fr; } } /* ---------- Utilities ---------- */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .cnch-scope * { transition: none !important; scroll-behavior: auto !important; } } @media (max-width: 640px) { .cnch-hero { padding: 44px 0; } .cnch-match-card__teams { grid-template-columns: 1fr; text-align: center; } .cnch-match-card__teams .cnch-team:first-child, .cnch-match-card__teams .cnch-team:last-child { justify-content: center; text-align: center; } .cnch-match-card__score { order: -1; } .cnch-card__header { flex-direction: column; align-items: flex-start; } }