/* CartolaNews Estaduais — frontend styles. Every rule is scoped under * .cne-scope so nothing leaks into the Foxiz theme or other plugins. */ .cne-scope { --cne-primary: #144b9b; --cne-primary-light: #7494c4; --cne-secondary: #849cc4; --cne-background: #e9e9ea; --cne-text: #2b2b24; --cne-white: #ffffff; --cne-success: #159447; --cne-warning: #f59e0b; --cne-danger: #dc2626; --cne-gold: #d8b45a; --cne-unknown: #9aa1ab; --cne-bg: #f6f7f9; --cne-card-bg: #ffffff; --cne-border: #e3e6ec; --cne-text-muted: #5b6472; --cne-radius: 12px; --cne-max-width: 1340px; --cne-shadow: 0 4px 18px rgba(20, 30, 60, .06); display: block; box-sizing: border-box; color: var(--cne-text); background: var(--cne-bg); font-family: inherit; line-height: 1.5; overflow-x: hidden; } .e-con-inner:has(.cne-scope) { max-width: none !important; } /* Foxiz's default page template caps the content column narrower than * --cne-max-width above. Plugin.php::body_class() adds cne-estaduais-page * to only on the page that actually renders [cartolanews_estaduais], * so this never affects any other page — same approach and same theme * selectors as cartolanews-brasileirao-hub's own width fix. */ body.cne-estaduais-page .single-page.none-header, body.cne-estaduais-page .single-page .rb-container, body.cne-estaduais-page .single-page .grid-container, body.cne-estaduais-page .single-page .s-ct { max-width: none; } body.cne-estaduais-page .single-page .grid-container { display: block; } .cne-scope *, .cne-scope *::before, .cne-scope *::after { box-sizing: inherit; } body[data-theme="dark"] .cne-scope, .cne-scope.cne-theme-dark { --cne-bg: #0d111b; --cne-card-bg: #171d29; --cne-text: #f1f2f4; --cne-text-muted: #aab1bd; --cne-border: #2a3140; } @media (prefers-color-scheme: dark) { body:not([data-theme]) .cne-scope { --cne-bg: #0d111b; --cne-card-bg: #171d29; --cne-text: #f1f2f4; --cne-text-muted: #aab1bd; --cne-border: #2a3140; } } .cne-scope img { max-width: 100%; height: auto; } .cne-scope a { color: inherit; text-decoration: none; } .cne-scope button { font: inherit; cursor: pointer; } .cne-scope .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; } .cne-scope :focus-visible { outline: 3px solid var(--cne-primary-light); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .cne-scope * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } .cne-container { max-width: var(--cne-max-width); margin: 0 auto; padding: 0 20px; } .cne-section-title { font-size: 22px; font-weight: 800; letter-spacing: .01em; margin: 0 0 6px; color: var(--cne-text); } .cne-section-lead { color: var(--cne-text-muted); margin: 0 0 20px; max-width: 640px; } .cne-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .cne-empty { color: var(--cne-text-muted); background: var(--cne-card-bg); border: 1px dashed var(--cne-border); border-radius: var(--cne-radius); padding: 18px; text-align: center; } .cne-fine-print { color: var(--cne-text-muted); font-size: 13px; margin-top: 10px; } .cne-scope section { padding: 36px 0; } .cne-scope section:first-of-type { padding-top: 0; } /* --------------------------------------------------------------------- Buttons & links --------------------------------------------------------------------- */ .cne-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 20px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid transparent; transition: transform .15s ease, background-color .15s ease; } .cne-btn--primary { background: var(--cne-primary); color: var(--cne-white); } .cne-btn--primary:hover { background: #0f3a79; } .cne-btn--outline { background: transparent; border-color: var(--cne-primary); color: var(--cne-primary); } .cne-btn--outline:hover { background: rgba(20,75,155,.08); } .cne-btn--outline-light { background: transparent; border-color: rgba(255,255,255,.5); color: var(--cne-white); } .cne-btn--outline-light:hover { background: rgba(255,255,255,.12); } .cne-btn--gold { background: linear-gradient(135deg,#e8c877,var(--cne-gold)); color: #402e08; } .cne-btn--gold:hover { transform: translateY(-1px); } .cne-btn--block { width: 100%; } .cne-link-btn { background: none; border: none; color: var(--cne-primary); font-weight: 700; font-size: 14px; padding: 6px 0; } .cne-link-btn:hover { text-decoration: underline; } /* --------------------------------------------------------------------- Badges --------------------------------------------------------------------- */ .cne-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; } .cne-badge--outline { background: rgba(255,255,255,.12); color: var(--cne-white); border: 1px solid rgba(255,255,255,.35); } .cne-badge--live { background: rgba(21,148,71,.16); color: #6fe3a4; border: 1px solid rgba(111,227,164,.35); } .cne-badge__dot { width: 8px; height: 8px; border-radius: 50%; background: #37d67a; display: inline-block; } .cne-badge--upcoming, .cne-badge--warning { background: var(--cne-warning); color: #402c00; } .cne-badge--ongoing, .cne-badge--success { background: var(--cne-success); color: var(--cne-white); } .cne-badge--finished { background: var(--cne-primary); color: var(--cne-white); } .cne-badge--unknown { background: var(--cne-unknown); color: var(--cne-white); } /* --------------------------------------------------------------------- Hero --------------------------------------------------------------------- */ .cne-hero { position: relative; min-height: 340px; display: flex; align-items: flex-end; background: #0b1b3a center/cover no-repeat; background-image: linear-gradient(135deg,#0b1b3a,#144b9b); color: var(--cne-white); overflow: hidden; } .cne-hero__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,10,26,.35) 0%, rgba(4,10,26,.75) 100%); } .cne-hero__content { position: relative; padding: 60px 20px 32px; width: 100%; } .cne-hero__title { font-size: clamp(30px, 5vw, 52px); font-weight: 900; text-transform: uppercase; line-height: 1.05; margin: 0 0 12px; max-width: 720px; } .cne-hero__subtitle { max-width: 560px; font-size: 15px; color: rgba(255,255,255,.85); margin: 0 0 20px; } .cne-hero__badges { display: flex; flex-wrap: wrap; gap: 10px; } /* --------------------------------------------------------------------- Radar --------------------------------------------------------------------- */ .cne-radar { padding: 22px 0; margin-top: -34px; position: relative; z-index: 2; } .cne-radar__grid { background: var(--cne-card-bg); border-radius: var(--cne-radius); box-shadow: var(--cne-shadow); border: 1px solid var(--cne-border); display: grid; grid-template-columns: repeat(4, 1fr); } .cne-radar__card { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-right: 1px solid var(--cne-border); } .cne-radar__card:last-child { border-right: none; } .cne-radar__icon { font-size: 26px; line-height: 1; } .cne-radar__value { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; } .cne-radar__label { display: block; font-size: 13px; font-weight: 600; color: var(--cne-text); } .cne-radar__hint { display: block; font-size: 12px; color: var(--cne-text-muted); } /* --------------------------------------------------------------------- Map --------------------------------------------------------------------- */ .cne-map { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; } .cne-map__svg-wrap { background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: var(--cne-radius); padding: 20px; box-shadow: var(--cne-shadow); display: flex; justify-content: center; } .cne-map__svg { width: 100%; max-width: 560px; height: auto; display: block; overflow: visible; } .cne-map__state { fill: var(--cne-unknown); stroke: var(--cne-card-bg); stroke-width: 300; stroke-linejoin: round; cursor: pointer; transition: filter .15s ease, transform .15s ease; transform-box: fill-box; transform-origin: center; } .cne-map__state:hover, .cne-map__state:focus { filter: brightness(1.12); transform: scale(1.015); outline: none; } .cne-map__state--ongoing { fill: var(--cne-success); } .cne-map__state--finished { fill: var(--cne-primary); } .cne-map__state--upcoming { fill: var(--cne-warning); } .cne-map__state--unknown { fill: var(--cne-unknown); } .cne-map__state.is-active { stroke: var(--cne-gold); stroke-width: 600; } .cne-map__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; font-size: 13px; color: var(--cne-text-muted); } .cne-map__legend span { display: inline-flex; align-items: center; gap: 6px; } .cne-map__dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } .cne-map__dot--ongoing { background: var(--cne-success); } .cne-map__dot--finished { background: var(--cne-primary); } .cne-map__dot--upcoming { background: var(--cne-warning); } .cne-map__dot--unknown { background: var(--cne-unknown); } .cne-map__info { background: var(--cne-primary); background-image: linear-gradient(160deg,#144b9b,#0c2f68); color: var(--cne-white); border-radius: var(--cne-radius); padding: 22px; box-shadow: var(--cne-shadow); min-height: 220px; display: flex; flex-direction: column; gap: 10px; } .cne-map__info-uf { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.7); font-weight: 700; } .cne-map__info-title { margin: 0; font-size: 20px; font-weight: 800; } .cne-map__info-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .cne-map__info-icon { font-size: 20px; } .cne-map__info-label { display: block; font-size: 12px; color: rgba(255,255,255,.7); } .cne-map__info .cne-btn { margin-top: auto; } .cne-map__info .cne-empty { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.25); color: rgba(255,255,255,.8); } .cne-map__browser { margin-top: 22px; } .cne-map__browser-label { display: block; font-weight: 700; margin-bottom: 8px; } .cne-map__search { width: 100%; max-width: 420px; padding: 12px 16px; border-radius: 999px; border: 1px solid var(--cne-border); background: var(--cne-card-bg); color: var(--cne-text); font-size: 14px; margin-bottom: 14px; } .cne-map__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 8px; } .cne-map__list-item, .cne-others__item { display: flex; align-items: center; gap: 8px; text-align: left; background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: var(--cne-text); } .cne-map__list-item:hover, .cne-others__item:hover { border-color: var(--cne-primary-light); } .cne-map__list-uf, .cne-others__item-uf { margin-left: auto; color: var(--cne-text-muted); font-weight: 700; font-size: 12px; } .cne-map__list-item[hidden], .cne-others__item[hidden] { display: none; } /* --------------------------------------------------------------------- Selector — Principais Estaduais --------------------------------------------------------------------- */ .cne-selector__scroller { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .cne-selector__item { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: 999px; padding: 10px 18px; font-weight: 700; font-size: 14px; color: var(--cne-text); min-height: 44px; } .cne-selector__item.is-active { background: var(--cne-primary); border-color: var(--cne-primary); color: var(--cne-white); } .cne-selector__item--others { color: var(--cne-text-muted); } .cne-selector__logo { width: 22px; height: 22px; object-fit: contain; border-radius: 4px; } .cne-selector__logo--placeholder { width: 22px; height: 22px; border-radius: 50%; background: var(--cne-background); display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--cne-text-muted); } /* --------------------------------------------------------------------- Dashboard --------------------------------------------------------------------- */ .cne-dashboard__header { background: linear-gradient(160deg,#0c2f68,#144b9b 60%, #1c5cc4); color: var(--cne-white); padding: 28px 0 24px; } .cne-dashboard__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; } .cne-dashboard__heading { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .cne-dashboard__logo { width: 40px; height: 40px; object-fit: contain; background: rgba(255,255,255,.12); border-radius: 8px; padding: 4px; } .cne-dashboard__title { font-size: clamp(20px, 3vw, 30px); font-weight: 900; letter-spacing: .01em; margin: 0; } .cne-share-btn { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); color: var(--cne-white); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; min-height: 40px; } .cne-share-btn:hover { background: rgba(255,255,255,.2); } .cne-dashboard__grid { display: grid; grid-template-columns: 1fr 300px; gap: 22px; align-items: stretch; } .cne-dashboard__grid > * { min-width: 0; } .cne-dashboard__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; min-width: 0; } .cne-dashboard__body { overflow-x: hidden; } .cne-stat { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 4px; min-height: 100px; } .cne-stat__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.7); font-weight: 700; } .cne-stat__value { font-size: 16px; font-weight: 800; line-height: 1.25; } .cne-stat__hint { font-size: 12px; color: rgba(255,255,255,.7); } .cne-stat__avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: #fff; } .cne-champion-card { background: linear-gradient(160deg,#3a2c0c,#1c1404); border: 1px solid rgba(216,180,90,.4); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 8px; color: #f6e8c4; } .cne-champion-card__trophy { font-size: 30px; } .cne-champion-card__eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--cne-gold); } .cne-champion-card__team { font-size: 22px; font-weight: 900; } .cne-champion-card__final { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; flex-wrap: wrap; } .cne-champion-card__meta { font-size: 13px; color: #e7d6a3; } .cne-champion-card__empty { font-size: 13px; color: #e7d6a3; margin: 0; } .cne-champion-card .cne-btn { margin-top: auto; align-self: flex-start; } /* --------------------------------------------------------------------- Inner tabs --------------------------------------------------------------------- */ .cne-tabs { background: var(--cne-card-bg); border-bottom: 1px solid var(--cne-border); position: sticky; top: 0; z-index: 5; } .cne-tabs__scroller { display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .cne-tabs__item { flex: 0 0 auto; background: none; border: none; border-bottom: 3px solid transparent; padding: 14px 16px; font-weight: 700; font-size: 14px; color: var(--cne-text-muted); min-height: 44px; } .cne-tabs__item.is-active, .cne-tabs__item:hover { color: var(--cne-primary); border-bottom-color: var(--cne-primary); } .cne-dashboard__body { padding-top: 26px; } .cne-tabpanel { display: none; } .cne-tabpanel.is-active { display: block; } .cne-tabpanel__title { font-size: 18px; font-weight: 800; margin: 0 0 16px; } .cne-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 18px; } .cne-overview-grid--secondary { grid-template-columns: 1.4fr 1fr; } /* A CSS grid item's default min-width is "auto", meaning it refuses to * shrink below its content's own intrinsic width — so a wide child (the * knockout bracket can easily have 5+ columns) silently blows the whole * grid, and the page, wider than the viewport instead of scrolling inside * itself. min-width: 0 here is what makes .cne-bracket's own * overflow-x: auto actually take effect. */ .cne-overview-grid > * { min-width: 0; } .cne-panel { background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: var(--cne-radius); box-shadow: var(--cne-shadow); padding: 18px; min-width: 0; overflow: hidden; } .cne-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .cne-panel__head h3 { margin: 0; font-size: 15px; font-weight: 800; } /* --------------------------------------------------------------------- Match cards --------------------------------------------------------------------- */ .cne-match-list { display: flex; flex-direction: column; gap: 10px; } .cne-match-card { border: 1px solid var(--cne-border); border-radius: 10px; padding: 12px 14px; background: var(--cne-card-bg); } .cne-match-card__status { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--cne-text-muted); margin-bottom: 8px; text-transform: uppercase; } .cne-match-card--live .cne-match-card__status-label { color: var(--cne-danger); } .cne-match-card--finished .cne-match-card__status-label { color: var(--cne-primary); } .cne-match-card__teams { display: flex; align-items: center; gap: 10px; } .cne-match-card__team { display: flex; align-items: center; gap: 8px; flex: 1; font-weight: 700; font-size: 14px; } .cne-match-card__team--away { justify-content: flex-end; text-align: right; flex-direction: row-reverse; } .cne-match-card__logo { width: 26px; height: 26px; object-fit: contain; } .cne-match-card__score { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 900; min-width: 60px; justify-content: center; } .cne-match-card__vs { color: var(--cne-text-muted); font-weight: 700; font-size: 13px; } .cne-match-card__meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--cne-text-muted); } .cne-matches-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 16px; } .cne-filter-chip { flex: 0 0 auto; background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; color: var(--cne-text-muted); min-height: 40px; } .cne-filter-chip.is-active { background: var(--cne-primary); border-color: var(--cne-primary); color: var(--cne-white); } .cne-matches-loadmore { text-align: center; margin-top: 18px; } .cne-match-card-wrap[hidden] { display: none; } /* --------------------------------------------------------------------- Standings --------------------------------------------------------------------- */ .cne-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 13px; } .cne-table th, .cne-table td { padding: 9px 6px; text-align: center; border-bottom: 1px solid var(--cne-border); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cne-table th { font-size: 11px; text-transform: uppercase; color: var(--cne-text-muted); font-weight: 800; } .cne-table--standings th:nth-child(2), .cne-table--standings td:nth-child(2) { width: 38%; } .cne-table__team { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; font-weight: 700; } .cne-table__team img { flex: 0 0 auto; object-fit: contain; } .cne-table__team span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cne-table--standings tbody tr:first-child { background: rgba(21,148,71,.06); } .cne-standings-cards { display: none; } /* The "Classificação Final" mini-panel on Visão Geral is narrow (one of * three columns), so its table gets a smaller type scale on top of the * ellipsis truncation above — long team names ("Red Bull Bragantino", * "Atlético de Alagoinhas"…) must never push the card wider than its * grid cell. */ .cne-panel .cne-table { font-size: 11px; } .cne-panel .cne-table th, .cne-panel .cne-table td { padding: 7px 3px; } .cne-panel .cne-table__team { gap: 5px; } .cne-panel .cne-table__team img { width: 18px; height: 18px; } .cne-standings-card { display: grid; grid-template-columns: 28px 28px 1fr auto; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--cne-border); } .cne-standings-card__pos { font-weight: 800; color: var(--cne-text-muted); } .cne-standings-card__team { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; } .cne-standings-card__pts { font-weight: 800; color: var(--cne-primary); } .cne-standings-card__row { grid-column: 1 / -1; display: flex; gap: 10px; font-size: 12px; color: var(--cne-text-muted); } /* --------------------------------------------------------------------- Scorers --------------------------------------------------------------------- */ .cne-scorer-leader { display: flex; align-items: center; gap: 12px; background: var(--cne-background); border-radius: 10px; padding: 12px; margin-bottom: 12px; } .cne-scorer-leader__medal { font-size: 24px; } .cne-scorer-leader__photo { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: #fff; } .cne-scorer-leader div { display: flex; flex-direction: column; flex: 1; } .cne-scorer-leader strong { font-size: 14px; } .cne-scorer-leader span { font-size: 12px; color: var(--cne-text-muted); } .cne-scorer-leader__goals { color: var(--cne-primary); font-size: 16px; } .cne-scorer-list { list-style: none; margin: 0; padding: 0; counter-reset: scorer 1; } .cne-scorer-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--cne-border); font-size: 13px; } .cne-scorer-list li::before { counter-increment: scorer; content: counter(scorer) "."; font-weight: 800; color: var(--cne-text-muted); width: 18px; } .cne-scorer-list__name { font-weight: 700; flex: 1; } .cne-scorer-list__team { color: var(--cne-text-muted); } .cne-scorer-list__goals { font-weight: 800; color: var(--cne-primary); } /* --------------------------------------------------------------------- Bracket --------------------------------------------------------------------- */ .cne-bracket { display: flex; gap: 16px; max-width: 100%; overflow-x: auto; padding-bottom: 8px; } .cne-bracket__column { flex: 0 0 220px; display: flex; flex-direction: column; gap: 10px; } .cne-bracket__column-title { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--cne-text-muted); font-weight: 800; margin: 0; } .cne-bracket__match { border: 1px solid var(--cne-border); border-radius: 10px; overflow: hidden; } .cne-bracket__team { display: flex; align-items: center; gap: 8px; padding: 8px 10px; font-size: 13px; font-weight: 600; } .cne-bracket__team:first-child { border-bottom: 1px solid var(--cne-border); } .cne-bracket__team span { flex: 1; } .cne-bracket__team.is-winner { background: rgba(21,148,71,.08); font-weight: 800; } /* --------------------------------------------------------------------- Destaques --------------------------------------------------------------------- */ .cne-stats-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .cne-stats-list li { display: flex; align-items: center; gap: 10px; font-size: 13px; } .cne-stats-list__icon { font-size: 18px; } .cne-stats-list__label { flex: 1; color: var(--cne-text-muted); } .cne-stats-list__value { font-weight: 800; text-align: right; } /* --------------------------------------------------------------------- Giro dos Estaduais --------------------------------------------------------------------- */ .cne-giro__scroller { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch; } .cne-giro__card { position: relative; flex: 0 0 200px; background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: var(--cne-radius); box-shadow: var(--cne-shadow); padding: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; } .cne-giro__badge { position: absolute; top: 12px; right: 12px; font-size: 10px; padding: 3px 8px; } .cne-giro__logo { width: 36px; height: 36px; object-fit: contain; margin: 4px 0; } .cne-giro__name { font-size: 14px; } .cne-giro__champion { font-size: 12px; color: var(--cne-text-muted); } .cne-giro__champion--muted { font-style: italic; } /* --------------------------------------------------------------------- Bottom grid: artilheiros / campeões / outros --------------------------------------------------------------------- */ .cne-bottom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; max-width: var(--cne-max-width); margin: 0 auto; padding: 0 20px 36px; } .cne-bottom-grid section { padding: 0; } .cne-bottom-grid > section > .cne-container, .cne-national-scorers .cne-container, .cne-champions-brazil .cne-container, .cne-others .cne-container { padding: 0; max-width: none; } .cne-table--national-scorers .cne-table__row--collapsed { display: none; } .cne-table--national-scorers.is-expanded .cne-table__row--collapsed { display: table-row; } .cne-champions-brazil__grid { display: flex; flex-direction: column; gap: 10px; } .cne-champions-brazil__item { display: flex; flex-direction: column; gap: 4px; background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: 10px; padding: 12px 14px; } .cne-champions-brazil__state { font-size: 11px; text-transform: uppercase; color: var(--cne-text-muted); font-weight: 700; } .cne-champions-brazil__club { display: flex; align-items: center; gap: 8px; font-size: 15px; } .cne-champions-brazil__label { font-size: 12px; color: var(--cne-text-muted); } .cne-others__regions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 16px; } .cne-others__region { background: var(--cne-card-bg); border: 1px solid var(--cne-border); border-radius: 10px; padding: 10px 12px; } .cne-others__region-label { display: block; font-size: 11px; color: var(--cne-text-muted); font-weight: 700; } .cne-others__region strong { font-size: 16px; } .cne-others__search { margin-bottom: 12px; } .cne-others__list { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; } /* --------------------------------------------------------------------- Footer CTA --------------------------------------------------------------------- */ .cne-footer-cta { background: linear-gradient(160deg,#0c2f68,#144b9b); color: var(--cne-white); text-align: center; } .cne-footer-cta__inner h2 { margin: 0 0 8px; font-size: 24px; } .cne-footer-cta__inner p { margin: 0 0 20px; color: rgba(255,255,255,.85); } .cne-footer-cta__actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; } /* --------------------------------------------------------------------- Skeleton loading --------------------------------------------------------------------- */ .cne-skeleton { position: relative; overflow: hidden; background: var(--cne-border); border-radius: 8px; } .cne-skeleton::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.4), transparent); animation: cne-shimmer 1.4s infinite; } @keyframes cne-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } } .cne-dashboard-mount.is-loading .cne-dashboard__body, .cne-dashboard-mount.is-loading .cne-dashboard__header { opacity: .45; pointer-events: none; } /* --------------------------------------------------------------------- Breakpoints — mobile-first overrides --------------------------------------------------------------------- */ @media (max-width: 1024px) { .cne-map { grid-template-columns: 1fr; } .cne-overview-grid { grid-template-columns: 1fr 1fr; } .cne-overview-grid--secondary { grid-template-columns: 1fr; } .cne-bottom-grid { grid-template-columns: 1fr; } .cne-dashboard__grid { grid-template-columns: 1fr; } .cne-dashboard__stats { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .cne-scope section { padding: 26px 0; } .cne-hero { min-height: 280px; } .cne-hero__content { padding: 44px 16px 24px; } .cne-container { padding: 0 16px; } .cne-radar__grid { grid-template-columns: repeat(2, 1fr); } .cne-radar__card { border-right: none; border-bottom: 1px solid var(--cne-border); } .cne-radar__card:nth-child(2n) { border-right: none; } .cne-overview-grid { grid-template-columns: 1fr; } .cne-table--standings { display: none; } .cne-standings-cards { display: block; } .cne-table--national-scorers { font-size: 12px; } .cne-others__regions { grid-template-columns: repeat(2, 1fr); } .cne-bottom-grid { padding-bottom: 26px; } .cne-match-card__team span { font-size: 13px; } .cne-map__svg-wrap { padding: 14px; } } @media (max-width: 480px) { .cne-hero__badges { gap: 6px; } .cne-badge { font-size: 11px; padding: 4px 10px; } .cne-dashboard__stats { grid-template-columns: 1fr 1fr; } .cne-champion-card__team { font-size: 18px; } .cne-match-card__teams { flex-wrap: wrap; } .cne-match-card__team { flex-basis: 100%; } .cne-match-card__team--away { flex-direction: row; justify-content: flex-start; text-align: left; } .cne-match-card__score { order: 3; margin-top: 6px; } .cne-others__regions { grid-template-columns: 1fr 1fr; } .cne-section-title { font-size: 19px; } }