/* CartolaNews NFL — Central NFL frontend styles. Namespaced entirely under .cnnfl-wrap: no bare .card/.title/.row/.active class names, everything prefixed cnnfl-. Theme-aware: light tokens are the default on .cnnfl-wrap, overridden under body[data-theme="dark"] .cnnfl-wrap — the same toggle Foxiz's own light/dark switch stamps on , so the visitor's own site-wide choice controls this section too. The Hero stays an intentionally dark, photo-backed band in both themes (like most masthead/hero sections with a background image) — only the content cards below adapt. */ .cnnfl-wrap-outer, .cnnfl-wrap { box-sizing: border-box; } .cnnfl-wrap *, .cnnfl-wrap *::before, .cnnfl-wrap *::after { box-sizing: border-box; } .cnnfl-wrap { --cnnfl-radius-sm: 6px; --cnnfl-radius: 10px; --cnnfl-radius-lg: 16px; --cnnfl-gap-xs: 6px; --cnnfl-gap-sm: 10px; --cnnfl-gap: 16px; --cnnfl-gap-lg: 24px; --cnnfl-transition: .2s ease; --cnnfl-max-width: 1440px; /* Light theme (default) */ --cnnfl-bg: #f2f4f8; --cnnfl-card-bg: #ffffff; --cnnfl-card-hover: #f7f9fc; --cnnfl-border: rgba(15,23,42,.10); --cnnfl-text: #101828; --cnnfl-muted: #5b6472; --cnnfl-surface-1: rgba(15,23,42,.04); --cnnfl-surface-2: rgba(15,23,42,.065); --cnnfl-outline-border: rgba(15,23,42,.18); --cnnfl-navbar-bg: rgba(255,255,255,.92); --cnnfl-neutral-indicator: rgba(15,23,42,.22); --cnnfl-green: #16a34a; --cnnfl-yellow: #ca8a04; --cnnfl-red-indicator: #dc2626; display: block; background: var(--cnnfl-bg); color: var(--cnnfl-text); font-family: inherit; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Dark theme — matches Foxiz's own toggle (body[data-theme="dark"]). */ body[data-theme="dark"] .cnnfl-wrap { --cnnfl-bg: #0a0e14; --cnnfl-card-bg: #12171f; --cnnfl-card-hover: #1a212c; --cnnfl-border: rgba(255,255,255,.08); --cnnfl-text: #ffffff; --cnnfl-muted: #98a6b7; --cnnfl-surface-1: rgba(255,255,255,.05); --cnnfl-surface-2: rgba(255,255,255,.08); --cnnfl-outline-border: rgba(255,255,255,.2); --cnnfl-navbar-bg: rgba(10,14,20,.96); --cnnfl-neutral-indicator: rgba(255,255,255,.3); --cnnfl-green: #22c55e; --cnnfl-yellow: #eab308; --cnnfl-red-indicator: #ef4444; } .cnnfl-sr-h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; } .cnnfl-container { max-width: var(--cnnfl-max-width); margin: 0 auto; padding: 0 20px 48px; display: flex; flex-direction: column; gap: var(--cnnfl-gap-lg); } .cnnfl-empty-state { color: var(--cnnfl-muted); font-size: 14px; padding: 18px 0; margin: 0; } .cnnfl-wrap a { color: inherit; } .cnnfl-wrap :focus-visible { outline: 2px solid var(--cnnfl-red, #d32f2f); outline-offset: 2px; } /* ---------------------------------------------------------------- Buttons */ .cnnfl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 11px 18px; border-radius: var(--cnnfl-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform var(--cnnfl-transition), border-color var(--cnnfl-transition), background var(--cnnfl-transition); } .cnnfl-btn-primary { background: var(--cnnfl-red, #d32f2f); color: #ffffff; } .cnnfl-btn-primary:hover { transform: translateY(-1px); filter: brightness(1.08); } .cnnfl-btn-outline { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.35); color: #ffffff; } .cnnfl-btn-outline:hover { border-color: var(--cnnfl-red, #d32f2f); } .cnnfl-btn-ghost { background: var(--cnnfl-surface-1); color: var(--cnnfl-muted); cursor: default; } .cnnfl-btn-sm { padding: 7px 10px; font-size: 10.5px; } .cnnfl-chip { background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); color: var(--cnnfl-muted); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: all var(--cnnfl-transition); } .cnnfl-chip:hover { border-color: rgba(211,47,47,.4); color: var(--cnnfl-text); } .cnnfl-chip.is-active { background: var(--cnnfl-red, #d32f2f); border-color: var(--cnnfl-red, #d32f2f); color: #ffffff; } /* ------------------------------------------------------------------- Card */ .cnnfl-card { background: var(--cnnfl-card-bg); border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius); box-shadow: 0 8px 24px rgba(15,23,42,.08); padding: 22px; transition: border-color var(--cnnfl-transition); min-width: 0; } body[data-theme="dark"] .cnnfl-card { box-shadow: 0 8px 24px rgba(0,0,0,.2); } .cnnfl-card-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .cnnfl-card-title { font-size: 15px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; margin: 0; position: relative; padding-bottom: 8px; } .cnnfl-card-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 2px; background: var(--cnnfl-red, #d32f2f); } .cnnfl-card-link { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cnnfl-red, #d32f2f); text-decoration: none; } .cnnfl-card-link:hover { text-decoration: underline; } .cnnfl-card-link-static { color: var(--cnnfl-muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; } .cnnfl-team-initials { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; } .cnnfl-team-initials-lg { width: 56px; height: 56px; font-size: 16px; flex-shrink: 0; } /* -------------------------------------------------------------------- Hero */ /* Intentionally always dark (photo-backed masthead) — not themed, see file header note. */ .cnnfl-hero { position: relative; min-height: 420px; background-color: #0a0e14; background-image: var(--cnnfl-hero-bg, none); background-size: cover; background-position: center; display: flex; align-items: center; color: #ffffff; } .cnnfl-hero.has-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(3,8,16,.95) 0%, rgba(3,8,16,.82) 42%, rgba(3,8,16,.3) 75%, rgba(3,8,16,.6) 100%); } .cnnfl-hero.no-image { background: radial-gradient(circle at 15% 20%, #1a212c 0%, #0a0e14 60%); } .cnnfl-hero-inner { position: relative; z-index: 1; max-width: var(--cnnfl-max-width); margin: 0 auto; width: 100%; padding: 52px 20px; } .cnnfl-hero-badge { font-size: 32px; margin-bottom: 8px; } .cnnfl-hero-title { font-size: clamp(44px, 6vw, 68px); font-weight: 800; margin: 0 0 8px; line-height: 1; color: #ffffff; letter-spacing: -.01em; } .cnnfl-hero-subtitle { font-size: 19px; color: #d7dee6; margin: 0 0 10px; max-width: 640px; } .cnnfl-hero-description { color: #b7c2cf; max-width: 640px; margin: 0 0 26px; font-size: 14px; } .cnnfl-hero-actions { display: flex; gap: var(--cnnfl-gap-sm); flex-wrap: wrap; } .cnnfl-season-meta-bar { display: flex; flex-wrap: wrap; gap: 0; background: var(--cnnfl-card-bg); border-bottom: 1px solid var(--cnnfl-border); } .cnnfl-season-meta-item { flex: 1 1 auto; min-width: 130px; padding: 14px 20px; border-right: 1px solid var(--cnnfl-border); display: flex; flex-direction: column; gap: 2px; } .cnnfl-season-meta-item:last-child { border-right: none; } .cnnfl-season-meta-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cnnfl-muted); font-weight: 700; } .cnnfl-season-meta-value { font-size: 15px; font-weight: 800; } /* ------------------------------------------------------------- Quick bar */ .cnnfl-quickbar { background: #0a0e14; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,.08); } .cnnfl-quickbar-inner { max-width: var(--cnnfl-max-width); margin: 0 auto; padding: 16px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--cnnfl-gap); } .cnnfl-quickbar-item { display: flex; align-items: center; gap: 10px; min-width: 0; } .cnnfl-quickbar-item > div { min-width: 0; } .cnnfl-quickbar-icon { font-size: 18px; flex-shrink: 0; } .cnnfl-quickbar-label { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: #98a6b7; } .cnnfl-quickbar-value { display: block; font-size: 13.5px; font-weight: 700; color: #ffffff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnnfl-quickbar-value a { color: #ffffff; text-decoration: none; } .cnnfl-quickbar-value a:hover { color: var(--cnnfl-red-indicator, #ef4444); } /* ------------------------------------------------------------------- Nav */ .cnnfl-nav-bar { position: sticky; top: var(--wp-admin--admin-bar--height, 0); z-index: 50; background: var(--cnnfl-navbar-bg); backdrop-filter: blur(6px); border-bottom: 1px solid var(--cnnfl-border); display: flex; align-items: center; justify-content: space-between; gap: var(--cnnfl-gap); padding: 0 20px; } .cnnfl-nav { display: flex; gap: 4px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .cnnfl-nav::-webkit-scrollbar { display: none; } .cnnfl-nav-link { display: inline-block; padding: 14px 12px; font-size: 13px; font-weight: 700; color: var(--cnnfl-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color var(--cnnfl-transition), border-color var(--cnnfl-transition); } .cnnfl-nav-link:hover, .cnnfl-nav-link.is-active { color: var(--cnnfl-text); border-color: var(--cnnfl-red, #d32f2f); } .cnnfl-season-select-wrap { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .cnnfl-season-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnnfl-muted); font-weight: 700; } .cnnfl-season-select { background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); color: var(--cnnfl-text); border-radius: var(--cnnfl-radius-sm); padding: 6px 10px; font-size: 13px; font-weight: 700; } .cnnfl-filter-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnnfl-muted); font-weight: 700; margin-right: 8px; } /* ----------------------------------------------------------- Games / cards */ .cnnfl-games-filters { display: flex; align-items: center; margin-bottom: 12px; } .cnnfl-games-status-filter { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .cnnfl-games-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--cnnfl-gap-sm); } .cnnfl-games-list-item[data-cnnfl-status] { display: block; } .cnnfl-game-card { background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius); padding: 14px; transition: border-color var(--cnnfl-transition), transform var(--cnnfl-transition); min-width: 0; } .cnnfl-game-card:hover { border-color: rgba(211,47,47,.3); transform: translateY(-2px); } .cnnfl-game-time { font-size: 13px; font-weight: 700; color: var(--cnnfl-muted); margin-bottom: 8px; } .cnnfl-game-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; } .cnnfl-game-badge--live { background: rgba(239,68,68,.15); color: #ef4444; } .cnnfl-game-badge--final { background: var(--cnnfl-surface-2); color: var(--cnnfl-muted); } .cnnfl-live-dot { width: 6px; height: 6px; border-radius: 50%; background: #ef4444; display: inline-block; animation: cnnfl-pulse 1.4s infinite; } @keyframes cnnfl-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .cnnfl-game-teams { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .cnnfl-game-team { display: flex; align-items: center; gap: 8px; } .cnnfl-game-team-name { font-size: 13px; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnnfl-game-score { font-size: 18px; font-weight: 800; } .cnnfl-game-actions { display: flex; gap: 6px; flex-wrap: wrap; } .cnnfl-game-actions .cnnfl-btn { flex: 1; } /* ------------------------------------------------------------- Standings */ .cnnfl-standings-grid-outer { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: var(--cnnfl-gap-lg); align-items: start; } .cnnfl-standings-grid-outer > * { min-width: 0; } .cnnfl-standings-tabs { display: flex; gap: 6px; margin-bottom: 16px; } .cnnfl-standings-divisions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cnnfl-gap); } .cnnfl-standings-division { min-width: 0; } .cnnfl-standings-div-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnnfl-muted); margin: 0 0 10px; } .cnnfl-table-scroll { overflow-x: auto; max-width: 100%; } .cnnfl-standings-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cnnfl-standings-table th { text-align: left; color: var(--cnnfl-muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--cnnfl-border); white-space: nowrap; } .cnnfl-standings-table td { padding: 7px 6px; border-bottom: 1px solid var(--cnnfl-border); white-space: nowrap; } .cnnfl-col-team { display: flex; align-items: center; gap: 6px; min-width: 130px; white-space: nowrap; } .cnnfl-standings-row.cnnfl-playoff-division_leader td:first-child { box-shadow: inset 3px 0 0 var(--cnnfl-green); } .cnnfl-standings-row.cnnfl-playoff-wildcard td:first-child { box-shadow: inset 3px 0 0 var(--cnnfl-yellow); } .cnnfl-standings-row.cnnfl-playoff-in_contention td:first-child { box-shadow: inset 3px 0 0 var(--cnnfl-neutral-indicator); } .cnnfl-standings-row.cnnfl-playoff-eliminated td:first-child { box-shadow: inset 3px 0 0 var(--cnnfl-red-indicator); opacity: .7; } .cnnfl-standings-legend { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--cnnfl-muted); } .cnnfl-legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; vertical-align: middle; } .cnnfl-legend-dot.cnnfl-playoff-division_leader { background: var(--cnnfl-green); } .cnnfl-legend-dot.cnnfl-playoff-wildcard { background: var(--cnnfl-yellow); } .cnnfl-legend-dot.cnnfl-playoff-in_contention { background: var(--cnnfl-neutral-indicator); } .cnnfl-legend-dot.cnnfl-playoff-eliminated { background: var(--cnnfl-red-indicator); } /* ------------------------------------------------------------ NFL no Brasil */ .cnnfl-brazil-col { display: flex; flex-direction: column; gap: var(--cnnfl-gap); min-width: 0; } .cnnfl-brazil-featured { background: linear-gradient(160deg, #0a0e14, #1a212c); color: #ffffff; border-color: rgba(255,255,255,.08); } .cnnfl-brazil-featured .cnnfl-card-title { color: #ffffff; } .cnnfl-brazil-featured .cnnfl-card-title::after { background: var(--cnnfl-red, #d32f2f); } .cnnfl-brazil-matchup { display: flex; align-items: center; justify-content: center; gap: var(--cnnfl-gap); margin: 14px 0; text-align: center; } .cnnfl-brazil-team { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; } .cnnfl-brazil-vs { font-size: 13px; color: #98a6b7; font-weight: 700; } .cnnfl-brazil-date { text-align: center; font-size: 22px; font-weight: 800; margin: 4px 0 2px; } .cnnfl-brazil-venue { text-align: center; font-size: 11px; color: #98a6b7; letter-spacing: .03em; margin: 0 0 12px; } .cnnfl-brazil-countdown { text-align: center; background: rgba(34,197,94,.15); color: #4ade80; font-weight: 700; font-size: 12.5px; padding: 6px 10px; border-radius: 999px; margin: 0 0 14px; } .cnnfl-brazil-btn { width: 100%; } .cnnfl-brazil-history-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cnnfl-brazil-history-list li { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; border-bottom: 1px solid var(--cnnfl-border); padding-bottom: 8px; } .cnnfl-brazil-history-list li:last-child { border-bottom: none; padding-bottom: 0; } .cnnfl-brazil-history-year { font-weight: 800; color: var(--cnnfl-red, #d32f2f); flex-shrink: 0; } .cnnfl-brazil-history-matchup { flex: 1; font-weight: 600; } .cnnfl-brazil-history-city { color: var(--cnnfl-muted); font-size: 11px; flex-shrink: 0; } /* ---------------------------------------------------------------- Leaders */ .cnnfl-leaders-tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 18px; } .cnnfl-leaders-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--cnnfl-gap-sm); } .cnnfl-leader-tile { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius); padding: 18px 12px; position: relative; } .cnnfl-leader-tile.is-featured { background: linear-gradient(160deg, rgba(211,47,47,.12), transparent); border-color: rgba(211,47,47,.3); } .cnnfl-leader-rank { position: absolute; top: 10px; left: 12px; font-size: 12px; font-weight: 800; color: var(--cnnfl-muted); } .cnnfl-leader-tile img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin-top: 6px; } .cnnfl-leader-info { display: flex; flex-direction: column; gap: 1px; } .cnnfl-leader-name { display: block; font-size: 13.5px; font-weight: 800; } .cnnfl-leader-team { display: block; font-size: 11px; color: var(--cnnfl-muted); } .cnnfl-leader-number { display: block; font-size: 24px; font-weight: 800; margin-top: 4px; } .cnnfl-leader-unit { font-size: 10px; color: var(--cnnfl-muted); text-transform: uppercase; letter-spacing: .04em; } /* ------------------------------------------------------------------ Teams */ .cnnfl-teams-filter { display: flex; gap: 6px; margin-bottom: 16px; } .cnnfl-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--cnnfl-gap-sm); } .cnnfl-team-tile { background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius); padding: 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; transition: border-color var(--cnnfl-transition), transform var(--cnnfl-transition); } .cnnfl-team-tile:hover { border-color: rgba(211,47,47,.3); transform: translateY(-2px); } .cnnfl-team-tile img { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; } .cnnfl-team-tile-name { font-size: 12.5px; } .cnnfl-team-tile-div { font-size: 10px; color: var(--cnnfl-muted); text-transform: uppercase; letter-spacing: .03em; } /* --------------------------------------------------------------- Classics */ .cnnfl-classics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--cnnfl-gap); } .cnnfl-classic-tile { background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius); padding: 18px; } .cnnfl-classic-matchup { display: flex; align-items: center; justify-content: center; gap: var(--cnnfl-gap-sm); margin-bottom: 14px; text-align: center; } .cnnfl-classic-team { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; flex: 1; min-width: 0; } .cnnfl-classic-vs { font-size: 12px; color: var(--cnnfl-muted); font-weight: 700; } .cnnfl-classic-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; } .cnnfl-classic-stats > div { text-align: center; } .cnnfl-classic-stat-label { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .03em; color: var(--cnnfl-muted); margin-bottom: 2px; } .cnnfl-classic-stats strong { font-size: 13px; } .cnnfl-classic-last { font-size: 11.5px; margin: 0 0 6px; } .cnnfl-classic-last span { color: var(--cnnfl-muted); } .cnnfl-classic-note { font-size: 11px; color: var(--cnnfl-muted); margin: 0; line-height: 1.4; } /* ----------------------------------------------------------------- Rules */ .cnnfl-accordion { display: flex; flex-direction: column; gap: 8px; } .cnnfl-accordion-item { border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius-sm); overflow: hidden; } .cnnfl-accordion-heading { margin: 0; } .cnnfl-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--cnnfl-surface-1); border: none; padding: 14px 16px; font-size: 13.5px; font-weight: 700; color: var(--cnnfl-text); text-align: left; cursor: pointer; } .cnnfl-accordion-icon { font-size: 16px; font-weight: 400; color: var(--cnnfl-red, #d32f2f); transition: transform var(--cnnfl-transition); flex-shrink: 0; } .cnnfl-accordion-trigger[aria-expanded="true"] .cnnfl-accordion-icon { transform: rotate(45deg); } .cnnfl-accordion-panel { padding: 0 16px 16px; font-size: 13px; color: var(--cnnfl-muted); line-height: 1.6; } .cnnfl-accordion-panel p { margin: 0; } /* -------------------------------------------------------- Champions */ .cnnfl-champions-scroller { display: flex; gap: var(--cnnfl-gap-sm); overflow-x: auto; padding-bottom: 6px; margin-bottom: 20px; } .cnnfl-champion-tile { flex: 0 0 auto; width: 118px; background: var(--cnnfl-surface-1); border: 1px solid var(--cnnfl-border); border-radius: var(--cnnfl-radius); padding: 14px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; position: relative; } .cnnfl-champion-tile-rank { position: absolute; top: 8px; left: 10px; font-size: 11px; font-weight: 800; color: var(--cnnfl-muted); } .cnnfl-champion-tile img { width: 44px; height: 44px; object-fit: contain; margin-top: 8px; flex-shrink: 0; } .cnnfl-champion-tile-name { font-size: 12.5px; margin-top: 2px; } .cnnfl-champion-tile-titles { font-size: 11px; color: var(--cnnfl-red, #d32f2f); font-weight: 700; } .cnnfl-champions-subtitle { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnnfl-muted); margin: 0 0 10px; } .cnnfl-champions-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .cnnfl-champions-table th { text-align: left; color: var(--cnnfl-muted); font-weight: 700; font-size: 10.5px; text-transform: uppercase; padding: 6px; border-bottom: 1px solid var(--cnnfl-border); white-space: nowrap; } .cnnfl-champions-table td { padding: 7px 6px; border-bottom: 1px solid var(--cnnfl-border); white-space: nowrap; } /* -------------------------------------------------------------------- News */ .cnnfl-news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--cnnfl-gap); } .cnnfl-news-item { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; } .cnnfl-news-item img { width: 100%; aspect-ratio: 16/9; border-radius: var(--cnnfl-radius-sm); object-fit: cover; flex-shrink: 0; } .cnnfl-news-item-body { display: flex; flex-direction: column; gap: 4px; } .cnnfl-news-item-title { font-size: 13.5px; font-weight: 700; line-height: 1.35; } .cnnfl-news-item:hover .cnnfl-news-item-title { color: var(--cnnfl-red, #d32f2f); } .cnnfl-news-item-meta { font-size: 11px; color: var(--cnnfl-muted); } /* ---------------------------------------------------------------- Tablet */ @media (max-width: 1024px) { .cnnfl-standings-grid-outer { grid-template-columns: 1fr; } .cnnfl-standings-divisions-grid { grid-template-columns: 1fr; } .cnnfl-quickbar-inner { grid-template-columns: repeat(2, 1fr); } } /* ---------------------------------------------------------------- Mobile */ @media (max-width: 767px) { .cnnfl-container { padding: 0 14px 40px; } .cnnfl-hero { min-height: 0; } .cnnfl-hero-inner { padding: 32px 16px; } .cnnfl-hero-title { font-size: 38px; } .cnnfl-season-meta-bar { flex-wrap: wrap; } .cnnfl-season-meta-item { flex: 1 1 50%; border-bottom: 1px solid var(--cnnfl-border); } .cnnfl-quickbar-inner { grid-template-columns: 1fr 1fr; } .cnnfl-games-list { grid-template-columns: 1fr; } .cnnfl-col-secondary { display: none; } .cnnfl-nav-bar { flex-direction: column; align-items: stretch; padding: 10px 14px; gap: 8px; } .cnnfl-season-select-wrap { justify-content: flex-end; } .cnnfl-classics-grid { grid-template-columns: 1fr; } .cnnfl-news-grid { grid-template-columns: 1fr; } } @media (max-width: 430px) { .cnnfl-hero-title { font-size: 32px; } .cnnfl-quickbar-inner { grid-template-columns: 1fr; } .cnnfl-leaders-body { grid-template-columns: repeat(2, 1fr); } }