/* * CartolaNews - Central de Programação Esportiva * All rules scoped under .cn-schedule-wrap; never touches body/h1/button/table globally. */ .cn-schedule-wrap { --cnprog-blue: #144b9b; --cnprog-blue-2: #7494c4; --cnprog-blue-3: #849cc4; --cnprog-blue-dark: #0e3a7a; --cnprog-blue-bg: #eaf0fa; --cnprog-bg: #e9e9ea; --cnprog-white: #ffffff; --cnprog-text: #2b2b24; --cnprog-text-muted: #6a6a63; --cnprog-border: #dcdce0; --cnprog-live: #d63031; --cnprog-live-bg: #fdeceb; --cnprog-positive: #1f8f4e; --cnprog-positive-bg: #e8f6ee; --cnprog-radius: 10px; --cnprog-radius-lg: 14px; box-sizing: border-box; display: block; color: var(--cnprog-text); background: var(--cnprog-bg); font-size: 15px; line-height: 1.45; overflow-x: hidden; /* Full-bleed: this page is meant to feel like a proper app/tool, not a blog column - stretches the background edge-to-edge regardless of whatever width the surrounding Elementor container/theme applies, without needing that container to be manually set to "Full Width". */ width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } /* The 100vw trick above only escapes the page column if nothing between this element and clips overflow. Elementor's "Boxed" container width (the .e-con-boxed/.e-con-inner pair it wraps a Shortcode widget in by default) does exactly that - it caps width AND clips overflow on the inner wrapper. Reach up and neutralize just that ancestor, only when it's actually wrapping this widget, so no other Elementor content on the site is affected. */ .e-con-boxed:has(.cn-schedule-wrap), .e-con-inner:has(> .cn-schedule-wrap) { max-width: none !important; overflow: visible !important; } /* Foxiz's dark-mode toggle sets data-theme="dark" on - swap the token values, not the markup, so every component below stays correct. */ body[data-theme="dark"] .cn-schedule-wrap { --cnprog-blue-2: #93b3e0; --cnprog-blue-3: #6f8bc0; --cnprog-blue-dark: #bcd3f5; --cnprog-blue-bg: #16223a; --cnprog-bg: #12151c; --cnprog-white: #1c212b; --cnprog-text: #e7e8ea; --cnprog-text-muted: #9aa0ab; --cnprog-border: #2b313d; --cnprog-live-bg: #3a1a1c; --cnprog-positive-bg: #133524; } .cn-schedule-wrap *, .cn-schedule-wrap *::before, .cn-schedule-wrap *::after { box-sizing: inherit; min-width: 0; } .cn-schedule-inner { max-width: 1360px; margin: 0 auto; padding: 16px clamp(16px, 3vw, 32px); } @media (prefers-reduced-motion: reduce) { .cn-schedule-wrap * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ---------- Header ---------- */ .cn-schedule-header { margin-bottom: 14px; } .cn-schedule-header__title { font-size: 1.5rem; font-weight: 800; color: var(--cnprog-blue-dark); margin: 0 0 4px; } .cn-schedule-header__subtitle { margin: 0 0 8px; color: var(--cnprog-text-muted); font-size: 0.95rem; } .cn-schedule-header__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 0.82rem; color: var(--cnprog-text-muted); margin-bottom: 12px; } .cn-schedule-header__meta .is-live-dot { color: var(--cnprog-live); } .cn-schedule-search { position: relative; max-width: 520px; } .cn-schedule-search input { width: 100%; padding: 11px 14px 11px 40px; border: 1px solid var(--cnprog-border); border-radius: 999px; background: var(--cnprog-white) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236a6a63' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") no-repeat 14px center; font-size: 0.95rem; color: var(--cnprog-text); min-height: 44px; } .cn-schedule-search input:focus { outline: 2px solid var(--cnprog-blue); outline-offset: 1px; } /* ---------- Sport chips / filters bar ---------- */ .cn-schedule-chiprow { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 10px; } .cn-schedule-chip { flex: 0 0 auto; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--cnprog-border); background: var(--cnprog-white); color: var(--cnprog-text); font-size: 0.85rem; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .cn-schedule-chip.is-active { background: var(--cnprog-blue); border-color: var(--cnprog-blue); color: var(--cnprog-white); } .cn-schedule-chip[hidden] { display: none; } .cn-schedule-count-badge { display: inline-block; font-size: 0.72rem; color: var(--cnprog-text-muted); margin-left: 4px; } /* ---------- Layout ---------- */ .cn-schedule-layout { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 1024px) { .cn-schedule-layout { grid-template-columns: 220px minmax(0, 1fr) 280px; align-items: start; } } .cn-schedule-main { min-width: 0; } .cn-schedule-section { background: var(--cnprog-white); border-radius: var(--cnprog-radius-lg); padding: 14px; margin-bottom: 16px; border: 1px solid var(--cnprog-border); } .cn-schedule-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .cn-schedule-section__title { font-size: 1.05rem; font-weight: 800; margin: 0; color: var(--cnprog-blue-dark); } .cn-schedule-section__subtitle { font-size: 0.8rem; color: var(--cnprog-text-muted); margin: 0; } .cn-schedule-toggle-group { display: inline-flex; border: 1px solid var(--cnprog-border); border-radius: 999px; overflow: hidden; } .cn-schedule-toggle-group button { border: 0; background: var(--cnprog-white); padding: 6px 12px; font-size: 0.78rem; cursor: pointer; color: var(--cnprog-text); min-height: 32px; } .cn-schedule-toggle-group button.is-active { background: var(--cnprog-blue-bg); color: var(--cnprog-blue-dark); font-weight: 700; } /* ---------- Sidebar: Minha TV ---------- */ .cn-schedule-sidebar { background: var(--cnprog-white); border: 1px solid var(--cnprog-border); border-radius: var(--cnprog-radius-lg); padding: 14px; } .cn-schedule-sidebar h2 { font-size: 0.95rem; margin: 0 0 4px; color: var(--cnprog-blue-dark); } .cn-schedule-sidebar p { font-size: 0.78rem; color: var(--cnprog-text-muted); margin: 0 0 10px; } .cn-schedule-tv-list { display: flex; flex-direction: column; gap: 6px; max-height: 320px; overflow-y: auto; margin-bottom: 10px; } .cn-schedule-tv-list label { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; min-height: 32px; } .cn-schedule-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--cnprog-blue); background: var(--cnprog-blue); color: var(--cnprog-white); font-weight: 700; font-size: 0.85rem; cursor: pointer; width: 100%; } .cn-schedule-btn--ghost { background: var(--cnprog-white); color: var(--cnprog-blue-dark); } .cn-schedule-mytv-drawer-toggle { display: none; } @media (max-width: 1023px) { .cn-schedule-sidebar:not(.is-open) { display: none; } .cn-schedule-mytv-drawer-toggle { display: inline-flex; } } /* ---------- Event rows ---------- */ .cn-schedule-hour-group { margin-bottom: 14px; } .cn-schedule-hour-group__label { font-size: 0.85rem; font-weight: 800; color: var(--cnprog-blue-dark); margin: 0 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--cnprog-blue-bg); } .cn-schedule-event-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 10px 8px; border-radius: var(--cnprog-radius); border-bottom: 1px solid var(--cnprog-border); } .cn-schedule-event-row:last-child { border-bottom: 0; } .cn-schedule-event-row[hidden] { display: none; } .cn-schedule-event-time { font-weight: 800; font-size: 0.9rem; color: var(--cnprog-blue-dark); } .cn-schedule-event-main { min-width: 0; } .cn-schedule-event-competition { font-size: 0.72rem; color: var(--cnprog-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cn-schedule-event-teams { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.92rem; flex-wrap: wrap; } .cn-schedule-event-teams .cn-schedule-vs { color: var(--cnprog-text-muted); font-weight: 400; font-size: 0.8rem; } .cn-schedule-channels { display: flex; flex-wrap: wrap; gap: 4px; max-width: 100%; } .cn-schedule-channel-badge { font-size: 0.68rem; padding: 3px 8px; border-radius: 999px; background: var(--cnprog-blue-bg); color: var(--cnprog-blue-dark); white-space: nowrap; } .cn-schedule-fav-btn { background: none; border: 0; cursor: pointer; font-size: 1rem; color: var(--cnprog-blue-3); min-width: 32px; min-height: 32px; line-height: 1; vertical-align: middle; } .cn-schedule-fav-btn.is-active { color: #e0a800; } .cn-schedule-status-badge { font-size: 0.65rem; font-weight: 800; padding: 3px 8px; border-radius: 999px; background: var(--cnprog-blue-bg); color: var(--cnprog-blue-dark); text-transform: uppercase; letter-spacing: 0.02em; white-space: nowrap; } .cn-schedule-status-badge.is-live { background: var(--cnprog-live-bg); color: var(--cnprog-live); } .cn-schedule-status-badge.is-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cnprog-live); margin-right: 5px; animation: cnprog-pulse 1.4s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .cn-schedule-status-badge.is-live::before { animation: none; } } .cn-schedule-status-badge.is-finished { background: #eeeeee; color: var(--cnprog-text-muted); } .cn-schedule-status-badge.is-tbd { background: #f2f0e8; color: #7a7566; } @keyframes cnprog-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } @media (max-width: 640px) { .cn-schedule-event-row { grid-template-columns: 1fr auto; grid-template-areas: "time status" "main main"; row-gap: 6px; } .cn-schedule-event-time { grid-area: time; } .cn-schedule-status-badge { grid-area: status; justify-self: end; } .cn-schedule-event-main { grid-area: main; } .cn-schedule-channels { max-width: none; } } /* ---------- Live / highlights ---------- */ .cn-schedule-empty { color: var(--cnprog-text-muted); font-size: 0.85rem; padding: 12px 4px; } .cn-schedule-highlights-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; } /* Destaques do dia card: deliberately its own isolated block layout, not sharing .cn-schedule-event-row's grid - that grid is tuned for a full-width desktop row and produced overlapping text once squeezed into a ~240px card. Everything here is a plain stacked flex column instead. */ .cn-schedule-highlight-card { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--cnprog-border); border-radius: var(--cnprog-radius); padding: 10px 12px; background: var(--cnprog-blue-bg); } .cn-schedule-highlight-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cn-schedule-highlight-time { font-weight: 800; font-size: 0.85rem; color: var(--cnprog-blue-dark); } .cn-schedule-highlight-competition { color: var(--cnprog-blue-dark); font-size: 0.72rem; line-height: 1.35; /* Allowed to wrap to a second line - never truncated, the competition name should always be fully readable. */ } .cn-schedule-highlight-teams { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 0.9rem; flex-wrap: nowrap; } .cn-schedule-highlight-abbr { white-space: nowrap; } .cn-schedule-highlight-channel { display: flex; gap: 4px; font-size: 0.7rem; color: var(--cnprog-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---------- Favorites (empty state / prompt) ---------- */ .cn-schedule-favorites-empty { font-size: 0.85rem; color: var(--cnprog-text-muted); background: var(--cnprog-blue-bg); border-radius: var(--cnprog-radius); padding: 12px; } /* ---------- Channel accordion ---------- */ .cn-schedule-channel-accordion { border: 1px solid var(--cnprog-border); border-radius: var(--cnprog-radius); margin-bottom: 8px; overflow: hidden; } .cn-schedule-channel-accordion__header { width: 100%; text-align: left; background: var(--cnprog-white); border: 0; padding: 12px 14px; font-weight: 700; font-size: 0.9rem; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-height: 44px; } .cn-schedule-channel-accordion__body { padding: 0 14px 12px; font-size: 0.82rem; } .cn-schedule-channel-accordion__body[hidden] { display: none; } .cn-schedule-channel-accordion__row { display: flex; gap: 10px; padding: 4px 0; border-bottom: 1px dashed var(--cnprog-border); } .cn-schedule-channel-accordion__row:last-child { border-bottom: 0; } .cn-schedule-channel-accordion__time { font-weight: 700; color: var(--cnprog-blue-dark); flex: 0 0 46px; } /* ---------- Filters bar ---------- */ .cn-schedule-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .cn-schedule-filter-btn { min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--cnprog-border); background: var(--cnprog-white); font-size: 0.78rem; cursor: pointer; color: var(--cnprog-text); } .cn-schedule-filter-btn.is-active { border-color: var(--cnprog-blue); background: var(--cnprog-blue-bg); color: var(--cnprog-blue-dark); font-weight: 700; } /* ---------- Footer note ---------- */ .cn-schedule-footnote { font-size: 0.75rem; color: var(--cnprog-text-muted); text-align: center; margin-top: 8px; }