/** * CartolaNews LaLiga — frontend styles. Every rule is scoped under * .cnll-wrap / .cnll-wrap-outer so nothing leaks into (or is affected by) * the Foxiz theme or Elementor. Brand palette: blue #144b9b (primary), * #7494c4 / #849cc4 (secondary/light), #e9e9ea (gray), #2b2b24 (text), * red #c8102e used only as a LaLiga-flavoured accent, never as the base. */ .cnll-wrap-outer, .cnll-wrap { --cnll-blue: #144b9b; --cnll-blue-2: #7494c4; --cnll-blue-light: #849cc4; --cnll-gray: #e9e9ea; --cnll-text: #2b2b24; --cnll-accent: #c8102e; --cnll-radius: 16px; --cnll-radius-sm: 10px; --cnll-bg: #f4f5f7; --cnll-card: #ffffff; --cnll-border: #e7e9ee; --cnll-muted: #6b7280; --cnll-green: #1a9c5a; --cnll-yellow: #e0a500; --cnll-red: #d8323f; --cnll-shadow: 0 8px 24px rgba(15, 23, 42, 0.06); --cnll-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.12); --cnll-max-width: 1360px; --cnll-gap: 20px; } .cnll-wrap { background: var(--cnll-bg); color: var(--cnll-text) !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.45; -webkit-font-smoothing: antialiased; } /* * The Foxiz theme's [data-theme='dark'] site-wide toggle redefines * --body-fcolor to white and applies it via selectors (on , on * .entry-content descendants, etc.) that can tie or beat this stylesheet on * specificity depending on load order — turning any of our text that relied * on ordinary inheritance white-on-white, since our cards never change * background with the site's dark mode. Forcing every element here to * `color: inherit !important` makes each one look up its *actual* parent's * color again (blocking the theme's direct override) instead of the value * the theme tried to assign directly — every specific color rule below this * one (blue values, muted labels, the intentionally-dark hero/cards, etc.) * is equally `!important` and declared later, so it still wins where intended. */ .cnll-wrap * { color: inherit !important; } .cnll-wrap *, .cnll-wrap *::before, .cnll-wrap *::after { box-sizing: border-box; } .cnll-wrap a { color: inherit !important; text-decoration: none; } .cnll-wrap button { font: inherit; cursor: pointer; } .cnll-wrap ul, .cnll-wrap ol { list-style: none; margin: 0; padding: 0; } .cnll-wrap img { max-width: 100%; display: block; } .cnll-wrap table { border-collapse: collapse; width: 100%; } .cnll-wrap [hidden] { display: none !important; } .cnll-wrap :focus-visible { outline: 2px solid var(--cnll-blue); outline-offset: 2px; } .cnll-wrap .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); } .cnll-container { max-width: var(--cnll-max-width); margin: 0 auto; padding: 0 20px; } /* ------------------------------------------------------------------ Hero */ .cnll-hero { position: relative; background: linear-gradient(135deg, #0b2451 0%, #123a73 55%, #1a4d8f 100%); background-size: cover; background-position: center; color: #fff !important; padding: 56px 0 40px; min-height: var(--cnll-hero-h-desktop, 360px); display: flex; align-items: center; } .cnll-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6, 18, 41, 0.55) 0%, rgba(6, 18, 41, 0.82) 100%); } .cnll-hero--overlay-dark .cnll-hero__overlay { background: rgba(6, 12, 24, 0.72); } .cnll-hero__inner { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; } .cnll-hero--align-left .cnll-hero__inner { text-align: left; align-items: flex-start; } .cnll-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; letter-spacing: 0.08em; font-size: 13px; color: #ff5468 !important; margin-bottom: 14px; } .cnll-hero__mark { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 6px; background: var(--cnll-accent); color: #fff !important; font-weight: 900; font-size: 15px; } .cnll-hero__title { font-size: clamp(32px, 5vw, 52px); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; } .cnll-hero__subtitle { font-size: 16px; color: rgba(255, 255, 255, 0.85) !important; max-width: 640px; margin: 0 0 26px; } .cnll-hero__controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .cnll-season-picker { display: inline-flex; align-items: center; background: rgba(255, 255, 255, 0.12); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 999px; padding: 4px 6px 4px 16px; } .cnll-season-picker select { appearance: none; background: transparent; border: none; color: #fff !important; font-weight: 600; font-size: 14px; padding: 8px 28px 8px 0; cursor: pointer; } .cnll-season-picker select option { color: #1a1a1a !important; } .cnll-hero__live { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255, 255, 255, 0.85) !important; } .cnll-hero__live-dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); animation: cnll-pulse 2s infinite; } @keyframes cnll-pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); } 70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } } /* -------------------------------------------------------------- Nav bar */ .cnll-nav { position: sticky; top: 0; z-index: 20; background: #fff; box-shadow: var(--cnll-shadow); margin: -28px auto 28px; max-width: calc(var(--cnll-max-width) - 0px); border-radius: 999px; width: calc(100% - 40px); } .cnll-nav__scroll { display: flex; align-items: center; gap: 4px; overflow-x: auto; padding: 6px; scrollbar-width: none; } .cnll-nav__scroll::-webkit-scrollbar { display: none; } .cnll-nav__link { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--cnll-muted) !important; } .cnll-nav__icon { width: 16px; height: 16px; flex: none; } .cnll-nav__link:hover { background: var(--cnll-gray); color: var(--cnll-text) !important; } .cnll-nav__link.is-active { background: var(--cnll-blue); color: #fff !important; } /* ---------------------------------------------------------- Summary cards */ .cnll-summary-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cnll-gap); margin-bottom: var(--cnll-gap); } .cnll-scard { background: var(--cnll-card); border: 1px solid var(--cnll-border); border-radius: var(--cnll-radius); box-shadow: var(--cnll-shadow); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .cnll-scard--dark { background: linear-gradient(150deg, #0b2451, #16386e); border-color: transparent; color: #fff !important; } .cnll-scard__label { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--cnll-muted) !important; text-transform: uppercase; } .cnll-scard--dark .cnll-scard__label { color: rgba(255, 255, 255, 0.7) !important; } .cnll-scard__head { display: flex; align-items: center; gap: 10px; margin-top: 2px; } .cnll-scard__head strong { font-size: 16px; } .cnll-scard__avatar { border-radius: 50%; object-fit: cover; } .cnll-scard__sub { display: block; font-size: 12px; color: var(--cnll-muted) !important; } .cnll-scard__value { font-size: 28px; font-weight: 800; color: var(--cnll-blue) !important; } .cnll-scard--dark .cnll-scard__value { color: #fff !important; } .cnll-scard__value small { font-size: 12px; font-weight: 700; color: var(--cnll-muted) !important; margin-left: 2px; } .cnll-scard__meta { font-size: 13px; color: var(--cnll-muted) !important; } .cnll-scard--dark .cnll-scard__meta { color: rgba(255, 255, 255, 0.75) !important; } .cnll-scard__link { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--cnll-blue) !important; } .cnll-scard__link--light { color: #fff !important; } .cnll-scard__matchup { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 4px 0; } .cnll-scard__vs { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.6) !important; } .cnll-scard__matchup-names { font-size: 14px; text-align: center; } /* ------------------------------------------------------------- Card base */ .cnll-card { background: var(--cnll-card); border: 1px solid var(--cnll-border); border-radius: var(--cnll-radius); box-shadow: var(--cnll-shadow); padding: 20px; display: flex; flex-direction: column; min-width: 0; } .cnll-card--dark { background: linear-gradient(160deg, #0b1f45, #163a72); color: #fff !important; border-color: transparent; } .cnll-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; } .cnll-card__title { font-size: 16px; font-weight: 800; margin: 0; } .cnll-card__title--light { color: #fff !important; } .cnll-card__title-sub { font-size: 13px; font-weight: 500; color: var(--cnll-muted) !important; } .cnll-card__header-link, .cnll-btn--text { background: none; border: none; color: var(--cnll-blue) !important; font-size: 13px; font-weight: 700; padding: 0; } .cnll-card__footer { margin-top: 14px; text-align: center; } .cnll-empty { color: var(--cnll-muted) !important; font-size: 14px; padding: 12px 0; } .cnll-empty--dark { color: rgba(255, 255, 255, 0.75) !important; } .cnll-text-muted { color: var(--cnll-muted) !important; } .cnll-btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; padding: 10px 18px; font-size: 14px; font-weight: 700; border: 1px solid var(--cnll-border); background: #fff; color: var(--cnll-text) !important; } .cnll-btn--primary { background: var(--cnll-blue); border-color: var(--cnll-blue); color: #fff !important; } .cnll-btn--ghost { background: transparent; border-color: rgba(255,255,255,.4); color: #fff !important; } .cnll-btn--block { width: 100%; margin-top: 14px; } .cnll-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; } .cnll-badge--live { background: #fdecec; color: var(--cnll-red) !important; } .cnll-badge--source { background: var(--cnll-gray); color: var(--cnll-text) !important; margin-left: 6px; } /* ---------------------------------------------------------------- Tabs */ .cnll-tabs { display: flex; gap: 4px; background: var(--cnll-gray); border-radius: 999px; padding: 4px; margin-bottom: 14px; } .cnll-tab { flex: 1; background: none; border: none; padding: 8px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--cnll-muted) !important; } .cnll-tab.is-active { background: #fff; color: var(--cnll-blue) !important; box-shadow: var(--cnll-shadow); } /* ----------------------------------------------------------- Main grid */ .cnll-main-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--cnll-gap); margin-bottom: var(--cnll-gap); scroll-margin-top: 88px; } /* ------------------------------------------------------------- Matches */ .cnll-round-switcher { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 13px; font-weight: 700; } .cnll-round-switcher__btn { background: var(--cnll-gray); border: none; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; } .cnll-round-switcher__btn:disabled { opacity: 0.4; cursor: not-allowed; } .cnll-match-day__title { font-size: 12px; font-weight: 800; letter-spacing: 0.04em; color: var(--cnll-muted) !important; margin: 14px 0 8px; } .cnll-match-day:first-child .cnll-match-day__title { margin-top: 0; } .cnll-match { border-top: 1px solid var(--cnll-border); padding: 10px 0; } .cnll-match:first-child { border-top: none; padding-top: 0; } .cnll-match__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .cnll-match__team { display: flex; align-items: center; gap: 8px; min-width: 0; } .cnll-match__team--away { justify-content: flex-end; text-align: right; } .cnll-match__team-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnll-match__score { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 70px; } .cnll-match__score strong { font-size: 16px; font-weight: 800; } .cnll-match__score-live { color: var(--cnll-red) !important; } .cnll-match__time { font-size: 14px; font-weight: 700; } .cnll-match__status { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-match__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .cnll-match__venue { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-match__watch { margin-left: auto; background: var(--cnll-gray); border: none; border-radius: 999px; padding: 4px 10px; font-size: 11px; font-weight: 700; color: var(--cnll-blue) !important; } .cnll-match__watch-panel { margin-top: 6px; font-size: 12px; } .cnll-match__watch-empty { color: var(--cnll-muted) !important; } /* ---------------------------------------------------------- Standings */ .cnll-table-scroll { overflow-x: auto; } .cnll-table { font-size: 13px; } .cnll-table th, .cnll-table td { padding: 9px 6px; text-align: center; white-space: nowrap; } .cnll-table thead th { font-size: 11px; color: var(--cnll-muted) !important; font-weight: 700; border-bottom: 1px solid var(--cnll-border); } .cnll-table tbody tr { border-bottom: 1px solid var(--cnll-border); } .cnll-table tbody tr:last-child { border-bottom: none; } .cnll-table__club { text-align: left; display: flex; align-items: center; gap: 8px; min-width: 150px; } .cnll-table__club img { border-radius: 4px; } .cnll-zone-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; background: transparent; } tr[data-zone="champions_league"] .cnll-zone-dot { background: var(--cnll-blue); } tr[data-zone="europa_league"] .cnll-zone-dot { background: var(--cnll-blue-light); } tr[data-zone="conference_league"] .cnll-zone-dot { background: var(--cnll-green); } tr[data-zone="relegation"] .cnll-zone-dot { background: var(--cnll-accent); } tr[data-zone="champions_league"] { box-shadow: inset 3px 0 0 var(--cnll-blue); } tr[data-zone="europa_league"] { box-shadow: inset 3px 0 0 var(--cnll-blue-light); } tr[data-zone="conference_league"] { box-shadow: inset 3px 0 0 var(--cnll-green); } tr[data-zone="relegation"] { box-shadow: inset 3px 0 0 var(--cnll-accent); } .cnll-text-positive { color: var(--cnll-green) !important; } .cnll-text-negative { color: var(--cnll-accent) !important; } /* Mobile-only per-row detail (V/E/D/GP/GC), inserted as a sibling right after the main row so it never fights the table's column grid — see frontend/partials/standings.php. Always hidden on desktop, where every column already shows inline. */ .cnll-row-detail { display: none; } .cnll-row-detail__grid { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 8px 4px; font-size: 12px; color: var(--cnll-muted) !important; } .cnll-row-detail__grid strong { color: var(--cnll-text) !important; margin-left: 3px; } [data-cnll-row-toggle] { cursor: pointer; } .cnll-zone-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; font-size: 11px; color: var(--cnll-muted) !important; } .cnll-zone-legend .cnll-zone-dot[data-zone="champions_league"] { background: var(--cnll-blue); } .cnll-zone-legend .cnll-zone-dot[data-zone="europa_league"] { background: var(--cnll-blue-light); } .cnll-zone-legend .cnll-zone-dot[data-zone="conference_league"] { background: var(--cnll-green); } .cnll-zone-legend .cnll-zone-dot[data-zone="relegation"] { background: var(--cnll-accent); } /* ------------------------------------------------------------ Title race */ .cnll-titlerace-block { margin-bottom: 18px; } .cnll-titlerace-block:last-child { margin-bottom: 0; } .cnll-titlerace-block__title { font-size: 12px; font-weight: 800; color: var(--cnll-muted) !important; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 10px; } .cnll-titlerace-row { display: grid; grid-template-columns: 120px 1fr 52px; align-items: center; gap: 10px; margin-bottom: 8px; } .cnll-titlerace-row__team { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnll-titlerace-row__bar-track { background: var(--cnll-gray); border-radius: 999px; height: 8px; overflow: hidden; } .cnll-titlerace-row__bar { height: 100%; border-radius: 999px; transition: width 0.6s ease; } .cnll-bar--title { background: var(--cnll-blue); } .cnll-bar--europe { background: var(--cnll-blue-light); } .cnll-bar--relegation { background: var(--cnll-accent); } .cnll-titlerace-row__pts { font-size: 11px; font-weight: 700; color: var(--cnll-muted) !important; text-align: right; } /* --------------------------------------------------------- Secondary grid */ .cnll-secondary-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cnll-gap); margin-bottom: var(--cnll-gap); } /* ------------------------------------------------------------- Leaders */ .cnll-leaders-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--cnll-border); } .cnll-leaders-row:first-child { border-top: none; padding-top: 0; } .cnll-leaders-row__rank { width: 18px; font-size: 12px; font-weight: 800; color: var(--cnll-muted) !important; } .cnll-leaders-row img { border-radius: 50%; object-fit: cover; } .cnll-leaders-row__info { flex: 1; display: flex; flex-direction: column; min-width: 0; } .cnll-leaders-row__info strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnll-leaders-row__info span { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-leaders-row__value { font-size: 15px; font-weight: 800; color: var(--cnll-blue) !important; } /* ------------------------------------------------------------ Season stats */ .cnll-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .cnll-stat-card { background: var(--cnll-card); border: 1px solid var(--cnll-border); border-radius: var(--cnll-radius); box-shadow: var(--cnll-shadow); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .cnll-stat-card__label { font-size: 11px; font-weight: 800; letter-spacing: 0.04em; color: var(--cnll-muted) !important; text-transform: uppercase; } .cnll-stat-card__crest { border-radius: 4px; margin: 2px 0; } .cnll-stat-card__value { font-size: 24px; font-weight: 800; color: var(--cnll-blue) !important; } .cnll-stat-card__suffix { font-size: 12px; color: var(--cnll-muted) !important; } .cnll-stat-card__team { font-size: 13px; font-weight: 700; } /* ----------------------------------------------------------------- Form */ .cnll-form-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 0; border-top: 1px solid var(--cnll-border); } .cnll-form-row:first-child { border-top: none; padding-top: 0; } .cnll-form-row__team { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cnll-form-row__dots { display: flex; gap: 3px; flex: none; } .cnll-form-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; color: #fff !important; } .cnll-form-dot--w { background: var(--cnll-green); } .cnll-form-dot--d { background: var(--cnll-yellow); } .cnll-form-dot--l { background: var(--cnll-accent); } .cnll-momentum-highlights { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--cnll-border); display: flex; flex-direction: column; gap: 6px; font-size: 12px; } /* ------------------------------------------------------------ Brazilians */ .cnll-brazilians-list { display: flex; flex-direction: column; gap: 10px; } .cnll-brazilian-card { display: flex; align-items: center; gap: 10px; } .cnll-brazilian-card img { border-radius: 50%; object-fit: cover; } .cnll-brazilian-card__info { display: flex; flex-direction: column; min-width: 0; } .cnll-brazilian-card__info strong { font-size: 13px; } .cnll-brazilian-card__info span { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-brazilian-card__stats { color: var(--cnll-blue) !important; font-weight: 700; } /* -------------------------------------------------------------- Featured */ .cnll-featured__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; color: var(--cnll-accent) !important; } .cnll-featured__matchup { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 14px 0; } .cnll-featured__team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; } .cnll-featured__team strong { font-size: 12px; font-weight: 800; } .cnll-featured__vs { font-size: 12px; font-weight: 800; color: rgba(255, 255, 255, 0.6) !important; } .cnll-featured__meta, .cnll-featured__venue { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.8) !important; margin: 2px 0; } .cnll-featured__h2h { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .cnll-featured__h2h-title { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.7) !important; text-align: center; margin-bottom: 10px; } .cnll-featured__h2h-row { display: flex; justify-content: space-around; text-align: center; } .cnll-featured__h2h-row strong { display: block; font-size: 18px; font-weight: 800; } .cnll-featured__h2h-row span { font-size: 10px; color: rgba(255, 255, 255, 0.7) !important; } .cnll-featured__h2h-empty { text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.65) !important; margin-top: 14px; } /* -------------------------------------------------------------- Compare */ .cnll-compare { margin-bottom: var(--cnll-gap); } .cnll-compare__pickers { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .cnll-compare__pickers select { flex: 1; padding: 10px 12px; border-radius: var(--cnll-radius-sm); border: 1px solid var(--cnll-border); font-size: 13px; } .cnll-compare__vs { font-weight: 800; color: var(--cnll-muted) !important; font-size: 12px; } .cnll-table--compare th, .cnll-table--compare td { text-align: center; font-size: 13px; } .cnll-table--compare th:first-child, .cnll-table--compare td:first-child, .cnll-table--compare th:last-child, .cnll-table--compare td:last-child { font-weight: 700; } .cnll-table--compare th[scope="row"], .cnll-table--compare td:nth-child(2) { color: var(--cnll-muted) !important; font-size: 12px; font-weight: 500; } /* ---------------------------------------------------------------- Teams */ .cnll-section { margin-bottom: 32px; scroll-margin-top: 88px; } .cnll-section__title { font-size: 20px; font-weight: 800; margin: 0 0 16px; } .cnll-section__header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; } .cnll-teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .cnll-team-card { background: var(--cnll-card); border: 1px solid var(--cnll-border); border-radius: var(--cnll-radius); box-shadow: var(--cnll-shadow); padding: 18px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; } .cnll-team-card:hover { box-shadow: var(--cnll-shadow-lg); transform: translateY(-2px); transition: 0.15s ease; } .cnll-team-card strong { font-size: 13px; } .cnll-team-card span { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-team-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; } .cnll-team-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); } .cnll-team-modal__panel { position: relative; background: #fff; border-radius: var(--cnll-radius); padding: 24px; max-width: 420px; width: 100%; max-height: 86vh; overflow-y: auto; box-shadow: var(--cnll-shadow-lg); } .cnll-team-modal__close { position: absolute; top: 14px; right: 14px; background: var(--cnll-gray); border: none; border-radius: 50%; width: 30px; height: 30px; } .cnll-team-modal__head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .cnll-team-modal__head strong { display: block; font-size: 17px; } .cnll-team-modal__head span { font-size: 12px; color: var(--cnll-muted) !important; } .cnll-team-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; } .cnll-team-modal__grid span { display: block; font-size: 11px; color: var(--cnll-muted) !important; } .cnll-team-modal__grid strong { font-size: 14px; } .cnll-team-modal__col { margin-bottom: 16px; } .cnll-team-modal__col-title { display: block; font-size: 11px; font-weight: 800; color: var(--cnll-muted) !important; text-transform: uppercase; margin-bottom: 8px; } .cnll-team-modal__col li { font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--cnll-border); } /* --------------------------------------------------------------- History */ .cnll-history-grid { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--cnll-gap); } .cnll-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; } .cnll-podium__item { display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--cnll-bg); border-radius: var(--cnll-radius-sm); padding: 14px 8px; } .cnll-podium__medal { font-size: 20px; } .cnll-podium__name { font-size: 11px; font-weight: 700; text-align: center; } .cnll-podium__titles { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-ranking-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--cnll-border); font-size: 13px; } .cnll-ranking-list__rank { width: 18px; color: var(--cnll-muted) !important; font-weight: 700; } .cnll-ranking-list__name { flex: 1; } .cnll-ranking-list__value { font-weight: 700; color: var(--cnll-blue) !important; } .cnll-timeline { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 8px; } .cnll-timeline__item { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; text-align: center; } .cnll-timeline__season { font-size: 11px; color: var(--cnll-muted) !important; font-weight: 700; } .cnll-timeline__trophy { font-size: 18px; } .cnll-timeline__club { font-size: 11px; font-weight: 600; } .cnll-records-list li { padding: 8px 0; border-top: 1px solid var(--cnll-border); } .cnll-records-list li:first-child { border-top: none; padding-top: 0; } .cnll-records-list__main { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; } .cnll-records-list__value { color: var(--cnll-blue) !important; } .cnll-records-list__meta { font-size: 11px; color: var(--cnll-muted) !important; } /* ----------------------------------------------------------- Broadcasts */ .cnll-table--broadcasts th, .cnll-table--broadcasts td { text-align: left; } /* ---------------------------------------------------------------- News */ .cnll-news-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .cnll-news-card { background: var(--cnll-card); border: 1px solid var(--cnll-border); border-radius: var(--cnll-radius); overflow: hidden; box-shadow: var(--cnll-shadow); display: flex; flex-direction: column; } .cnll-news-card:hover { box-shadow: var(--cnll-shadow-lg); } .cnll-news-card__image { position: relative; aspect-ratio: 16/10; background: var(--cnll-gray); } .cnll-news-card__image img { width: 100%; height: 100%; object-fit: cover; } .cnll-news-card__cat { position: absolute; top: 8px; left: 8px; background: var(--cnll-accent); color: #fff !important; font-size: 9px; font-weight: 800; padding: 3px 7px; border-radius: 4px; } .cnll-news-card__body { padding: 12px; display: flex; flex-direction: column; gap: 4px; } .cnll-news-card__title { font-size: 13px; font-weight: 700; margin: 0; line-height: 1.3; } .cnll-news-card__date { font-size: 11px; color: var(--cnll-muted) !important; } .cnll-news-card__excerpt { font-size: 12px; color: var(--cnll-muted) !important; margin: 0; } /* -------------------------------------------------------------- Sources */ .cnll-sources__row { font-size: 13px; color: var(--cnll-muted) !important; margin: 0 0 8px; } .cnll-sources__row:last-child { margin-bottom: 0; } /* ----------------------------------------------------------- Skeletons */ .cnll-skeleton { position: relative; overflow: hidden; background: var(--cnll-gray); border-radius: 6px; } .cnll-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: cnll-shimmer 1.2s infinite; } @keyframes cnll-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ------------------------------------------------------------ Responsive */ @media (max-width: 1199px) { .cnll-main-grid { grid-template-columns: 1fr 1fr; } .cnll-main-grid .cnll-col-titlerace { grid-column: span 2; } .cnll-secondary-grid { grid-template-columns: repeat(2, 1fr); } .cnll-history-grid { grid-template-columns: 1fr 1fr; } .cnll-history-grid .cnll-history-timeline-card { grid-column: span 2; } .cnll-summary-cards { grid-template-columns: repeat(2, 1fr); } .cnll-news-grid { grid-template-columns: repeat(3, 1fr); } .cnll-stats-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .cnll-teams-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); } } @media (max-width: 767px) { .cnll-container { padding: 0 14px; } .cnll-hero { padding: 40px 0 32px; min-height: var(--cnll-hero-h-mobile, 420px); } .cnll-hero__inner { text-align: center; align-items: center; } .cnll-nav { margin-top: -22px; width: calc(100% - 28px); } .cnll-main-grid, .cnll-secondary-grid, .cnll-history-grid { grid-template-columns: 1fr; } .cnll-main-grid .cnll-col-titlerace, .cnll-history-grid .cnll-history-timeline-card { grid-column: span 1; } .cnll-summary-cards { grid-template-columns: repeat(2, 1fr); } .cnll-news-grid { grid-template-columns: repeat(2, 1fr); } .cnll-stats-grid { grid-template-columns: repeat(2, 1fr); } /* Classificação: start compact (#, Clube, SG, P), tap a row to reveal V/E/D/GP/GC in the detail row below it. */ .cnll-table--standings .cnll-col-optional { display: none; } .cnll-row-detail.is-open { display: table-row; } } @media (max-width: 480px) { .cnll-summary-cards, .cnll-news-grid { grid-template-columns: 1fr; } }