/* =============================================================
Cricket Portal — Mobile-First CSS
Dark sports portal theme
============================================================= */
/* -------------------------------------------------------
0. CSS CUSTOM PROPERTIES
------------------------------------------------------- */
:root {
--clr-bg: #181d2d;
--clr-surface: #1e2438;
--clr-surface-2: #252c42;
--clr-border: #2e3555;
--clr-text: #dfe1eb;
--clr-text-muted: #8892a4;
--clr-primary: #e8003d; /* Flashscore red */
--clr-primary-dark: #c50034;
--clr-accent: #f59e0b; /* amber for scores */
--clr-live: #e8003d; /* same red for live */
--clr-upcoming: #3b82f6; /* blue */
--clr-finished: #6b7280; /* gray */
--clr-result: #4ade80; /* green for match results */
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 10px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 40px;
--font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--header-h: 60px;
--bottom-nav-h: 60px;
}
/* -------------------------------------------------------
1. RESET & BASE
------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-size: 16px;
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
font-family: var(--font-sans);
background-color: var(--clr-bg);
color: var(--clr-text);
line-height: 1.6;
/* Отступ снизу для нижней навигации */
padding-bottom: var(--bottom-nav-h);
}
a {
color: var(--clr-text-muted);
text-decoration: none;
}
a:hover { color: var(--clr-text); text-decoration: none; }
a:focus-visible {
outline: 2px solid var(--clr-primary);
outline-offset: 2px;
border-radius: 3px;
}
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
button {
font-family: inherit;
cursor: pointer;
border: none;
background: none;
}
input, select, textarea {
font-family: inherit;
}
/* -------------------------------------------------------
2. LAYOUT
------------------------------------------------------- */
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--space-md);
}
.site {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-content {
flex: 1;
}
/* -------------------------------------------------------
3. SITE HEADER
------------------------------------------------------- */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--clr-bg);
border-bottom: 1px solid var(--clr-border);
height: var(--header-h);
display: flex;
align-items: center;
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-md);
height: 100%;
}
.site-header__brand {
display: flex;
align-items: center;
gap: 6px;
color: var(--clr-text);
font-weight: 800;
font-size: 1.15rem;
text-decoration: none !important;
flex-shrink: 0;
letter-spacing: -0.01em;
}
.site-header__icon {
font-size: 1.3rem;
display: flex;
align-items: center;
justify-content: center;
background: var(--clr-primary);
color: #fff;
border-radius: 4px;
width: 28px;
height: 28px;
}
.site-header__name { color: var(--clr-text); }
.site-header__badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 999px;
background: #ef4444;
color: #fff;
font-size: 0.65rem;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.header-matches-strip {
background: var(--clr-surface);
border-top: 1px solid var(--clr-border);
border-bottom: 1px solid var(--clr-border);
}
.header-matches-strip__inner {
display: flex;
align-items: center;
gap: 10px;
min-height: 34px;
}
.header-matches-strip__label {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
color: var(--clr-text);
letter-spacing: 0.04em;
flex-shrink: 0;
}
.header-matches-strip__list {
display: flex;
align-items: center;
gap: 0;
overflow-x: auto;
scrollbar-width: thin;
flex: 1;
}
.header-matches-strip__item {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 0 12px;
min-height: 34px;
border-left: 1px solid var(--clr-border);
color: var(--clr-text-muted);
text-decoration: none !important;
white-space: nowrap;
}
.header-matches-strip__item:last-child {
border-right: 1px solid var(--clr-border);
}
.header-matches-strip__item:hover {
background: var(--clr-surface-2);
color: var(--clr-text);
}
.header-matches-strip__teams {
font-size: 0.74rem;
font-weight: 600;
}
.header-matches-strip__status {
font-size: 0.72rem;
font-weight: 700;
}
.header-matches-strip__status--upcoming {
color: #f5c56c;
}
.header-matches-strip__status--live {
color: #ff6b6b;
}
/* Desktop nav — hidden by default on mobile */
.desktop-nav { display: none; }
/* HAMBURGER */
.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 40px;
height: 40px;
padding: 6px;
border-radius: var(--radius-sm);
transition: background 0.15s;
flex-shrink: 0;
}
.hamburger:hover { background: var(--clr-surface-2); }
.hamburger__line {
display: block;
width: 100%;
height: 2px;
background: var(--clr-text);
border-radius: 2px;
transition: transform 0.2s, opacity 0.2s;
}
.hamburger.is-active .hamburger__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .hamburger__line:nth-child(2) { opacity: 0; }
.hamburger.is-active .hamburger__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* -------------------------------------------------------
4. MOBILE OVERLAY MENU
------------------------------------------------------- */
.mobile-overlay {
position: fixed;
inset: 0;
z-index: 200;
background: rgba(24, 29, 45, 0.99);
display: flex;
flex-direction: column;
opacity: 0;
pointer-events: none;
transition: opacity 0.2s;
}
.mobile-overlay.is-open {
opacity: 1;
pointer-events: all;
}
.mobile-overlay__inner {
padding: var(--space-xl) var(--space-lg);
display: flex;
flex-direction: column;
flex: 1;
}
.mobile-overlay__close {
align-self: flex-end;
width: 44px;
height: 44px;
font-size: 1.3rem;
color: var(--clr-text-muted);
border-radius: var(--radius-sm);
transition: color 0.15s;
}
.mobile-overlay__close:hover { color: var(--clr-text); }
.mobile-nav-list {
margin-top: var(--space-xl);
display: flex;
flex-direction: column;
gap: var(--space-sm);
}
.mobile-nav-list li a {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md) var(--space-sm);
font-size: 1.3rem;
font-weight: 600;
color: var(--clr-text);
border-radius: var(--radius-md);
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.mobile-nav-list li a:hover { background: var(--clr-surface-2); }
.mobile-nav-list__icon { font-size: 1.5rem; }
/* -------------------------------------------------------
5. BOTTOM NAVIGATION (мобильная нижняя панель)
------------------------------------------------------- */
.bottom-nav {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 90;
height: var(--bottom-nav-h);
background: var(--clr-bg);
border-top: 1px solid var(--clr-border);
display: flex;
align-items: stretch;
}
.bottom-nav__item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
color: var(--clr-text-muted);
text-decoration: none;
font-size: 0.65rem;
font-weight: 500;
transition: color 0.15s, background 0.15s;
padding: var(--space-xs);
min-width: 0;
border-top: 2px solid transparent;
}
.bottom-nav__item.is-active {
color: var(--clr-primary);
border-top-color: var(--clr-primary);
}
.bottom-nav__item:hover { color: var(--clr-text); background: var(--clr-surface-2); }
.bottom-nav__icon { font-size: 1.1rem; line-height: 1; }
.bottom-nav__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
/* -------------------------------------------------------
6. SITE FOOTER
------------------------------------------------------- */
.site-footer {
background: var(--clr-bg);
border-top: 1px solid var(--clr-border);
padding: var(--space-xl) 0 calc(var(--bottom-nav-h) + var(--space-lg));
}
.site-footer__inner {
display: flex;
flex-direction: column;
gap: var(--space-xl);
}
.site-footer__logo {
font-size: 1.2rem;
font-weight: 700;
color: var(--clr-text);
text-decoration: none;
}
.site-footer__desc {
margin-top: var(--space-sm);
color: var(--clr-text-muted);
font-size: 0.875rem;
}
.site-footer__links {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.site-footer__col h4 {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-text-muted);
margin-bottom: var(--space-sm);
}
.site-footer__col ul { display: flex; flex-direction: column; gap: var(--space-xs); }
.site-footer__col a { color: var(--clr-text-muted); font-size: 0.9rem; }
.site-footer__col a:hover { color: var(--clr-primary); }
.site-footer__bottom {
margin-top: var(--space-lg);
padding-top: var(--space-md);
border-top: 1px solid var(--clr-border);
font-size: 0.8rem;
color: var(--clr-text-muted);
}
.site-footer__bottom a { color: var(--clr-text-muted); }
.site-footer__bottom a:hover { color: var(--clr-text); }
/* -------------------------------------------------------
7. BUTTONS
------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-sm);
padding: 10px 20px;
border-radius: var(--radius-md);
font-size: 0.9rem;
font-weight: 600;
transition: background 0.15s, transform 0.1s, opacity 0.15s;
cursor: pointer;
text-decoration: none !important;
border: none;
min-height: 44px;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
background: var(--clr-primary);
color: #fff;
}
.btn--primary:hover { background: var(--clr-primary-dark); }
.btn--ghost {
background: transparent;
color: var(--clr-text-muted);
border: 1px solid var(--clr-border);
}
.btn--ghost:hover { background: var(--clr-surface-2); color: var(--clr-text); }
/* -------------------------------------------------------
8. HOME HERO
------------------------------------------------------- */
.home-hero {
padding: var(--space-xl) 0 var(--space-lg);
background: linear-gradient(135deg, var(--clr-bg) 0%, #0f1428 100%);
}
.home-hero .container { text-align: center; }
.home-hero__title {
font-size: clamp(1.8rem, 6vw, 3rem);
font-weight: 800;
color: var(--clr-text);
letter-spacing: -0.02em;
}
.home-hero__subtitle {
margin-top: var(--space-sm);
color: var(--clr-text-muted);
font-size: 1rem;
}
.home-hero__actions {
margin-top: var(--space-lg);
display: flex;
gap: var(--space-md);
justify-content: center;
flex-wrap: wrap;
}
.home-hero-banner { padding: var(--space-md) 0; }
.home-mid-banner { padding: var(--space-md) 0; }
/* -------------------------------------------------------
9. SECTION HEADERS
------------------------------------------------------- */
.home-section { padding: var(--space-xl) 0; }
.home-section--gray { background: var(--clr-surface); }
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-lg);
gap: var(--space-md);
}
.section-header__title {
font-size: 1.2rem;
font-weight: 700;
display: flex;
align-items: center;
gap: var(--space-sm);
}
.section-header__link {
font-size: 0.875rem;
color: var(--clr-text-muted);
white-space: nowrap;
}
.section-block { margin-bottom: var(--space-xl); }
.section-block__title {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: var(--space-md);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--clr-primary);
display: inline-block;
color: var(--clr-text);
}
.section-refresh {
margin-top: var(--space-md);
display: flex;
justify-content: center;
}
/* -------------------------------------------------------
10. LIVE DOT
------------------------------------------------------- */
.live-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--clr-live);
animation: pulse-live 1.4s infinite;
flex-shrink: 0;
}
@keyframes pulse-live {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.7); }
}
/* -------------------------------------------------------
11. MATCH CARD
------------------------------------------------------- */
.matches-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.matches-grid--featured {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.matches-table-section {
margin-top: 0;
}
/* Demo mode notice bar */
.demo-notice {
background: rgba(245, 158, 11, 0.12);
border-bottom: 1px solid rgba(245, 158, 11, 0.35);
padding: 8px 0;
font-size: 0.8rem;
color: var(--clr-accent);
}
.demo-notice .container {
display: flex;
align-items: center;
gap: 8px;
}
.demo-notice__badge {
background: var(--clr-accent);
color: #000;
font-size: 0.65rem;
font-weight: 800;
letter-spacing: 0.08em;
padding: 2px 7px;
border-radius: 4px;
flex-shrink: 0;
}
.match-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
transition: border-color 0.15s, background 0.15s;
}
.match-card:hover { border-color: var(--clr-primary); background: var(--clr-surface-2); }
.match-card.status--live { border-left: 3px solid var(--clr-live); }
.match-card.status--upcoming { border-left: 3px solid var(--clr-upcoming); }
.match-card.status--finished { border-left: 3px solid var(--clr-finished); }
.match-card__link {
display: block;
padding: var(--space-md);
color: inherit;
text-decoration: none !important;
}
.match-card__link:hover { background: transparent; }
.match-card__top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-sm);
}
.match-card__type {
background: var(--clr-surface-2);
color: var(--clr-text-muted);
font-size: 0.7rem;
font-weight: 700;
padding: 2px 8px;
border-radius: 100px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.match-card__status {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
font-weight: 700;
padding: 3px 10px;
border-radius: 100px;
}
.match-card__status.status--live { background: rgba(232,0,61,0.15); color: var(--clr-live); }
.match-card__status.status--upcoming { background: rgba(59,130,246,0.15); color: var(--clr-upcoming); }
.match-card__status.status--finished { background: rgba(107,114,128,0.15); color: var(--clr-text-muted); }
.match-card__series {
font-size: 0.78rem;
color: var(--clr-text-muted);
margin-bottom: var(--space-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.match-card__teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-sm);
}
.match-card__team { text-align: left; }
.match-card__team--away { text-align: right; }
.match-card__team-main {
display: flex;
align-items: center;
gap: 8px;
}
.match-card__team--away .match-card__team-main {
justify-content: flex-end;
}
.match-card__team-logo,
.match-card__team-logo-fallback {
width: 28px;
height: 28px;
border-radius: 50%;
flex-shrink: 0;
}
.match-card__team-logo {
object-fit: cover;
border: 1px solid var(--clr-border);
background: var(--clr-surface-2);
}
.match-card__team-logo-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.68rem;
font-weight: 800;
color: var(--clr-text-muted);
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
}
.match-card__team-name {
display: inline-block;
font-size: 1rem;
font-weight: 700;
color: var(--clr-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.match-card__score {
display: block;
font-size: 0.95rem;
font-weight: 700;
color: var(--clr-accent);
margin-top: 2px;
}
.match-card__vs {
text-align: center;
font-size: 0.75rem;
font-weight: 700;
color: var(--clr-text-muted);
background: var(--clr-surface-2);
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.match-card__result {
font-size: 0.8rem;
color: var(--clr-result);
font-weight: 600;
margin-bottom: var(--space-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.match-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
font-size: 0.75rem;
color: var(--clr-text-muted);
}
.match-card__date,
.match-card__venue {
display: flex;
align-items: center;
gap: 4px;
}
/* Live status line (inside ) */
.match-card__live-status {
font-size: 0.78rem;
color: var(--clr-text-muted);
font-weight: 500;
margin-bottom: var(--space-sm);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ═══════════════════════════════════════
LIVE INFO BLOCK (outside )
═══════════════════════════════════════ */
.match-card__live-info {
padding: var(--space-sm) var(--space-md);
border-top: 1px solid var(--clr-border);
background: rgba(232, 0, 61, 0.04);
display: flex;
flex-direction: column;
gap: 10px;
}
/* Run rates row */
.match-card__rates {
display: flex;
gap: var(--space-lg);
}
.match-card__rate {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.match-card__rate-label {
font-size: 0.65rem;
color: var(--clr-text-muted);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
line-height: 1;
}
.match-card__rate-value {
font-size: 1.1rem;
color: var(--clr-result);
font-weight: 800;
line-height: 1.2;
}
.match-card__rate--req .match-card__rate-value {
color: var(--clr-accent);
}
/* Section (batting / bowling) */
.match-card__live-section {
display: flex;
flex-direction: column;
gap: 4px;
}
.match-card__live-section-title {
display: flex;
align-items: center;
gap: 5px;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--clr-text-muted);
}
/* Tables */
.match-card__live-table {
width: 100%;
border-collapse: collapse;
font-size: 0.76rem;
table-layout: fixed;
}
.match-card__live-table .col-name { width: 50%; text-align: left; }
.match-card__live-table th {
color: var(--clr-text-muted);
font-weight: 600;
font-size: 0.68rem;
text-align: center;
padding: 3px 2px;
border-bottom: 1px solid var(--clr-border);
}
.match-card__live-table th.col-name { text-align: left; }
.match-card__live-table td {
padding: 4px 2px;
color: var(--clr-text-muted);
text-align: center;
}
.match-card__live-table td.col-name {
text-align: left;
color: var(--clr-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 0;
}
.match-card__live-table .col-runs {
color: var(--clr-accent);
font-weight: 700;
font-size: 0.85rem;
}
/* Active row (on-strike / current bowler) */
.match-card__live-table .row--strike td {
color: var(--clr-text);
font-weight: 600;
}
.match-card__live-table .row--strike td.col-runs {
color: var(--clr-accent);
}
/* Strike marker ★ */
.strike-marker {
color: var(--clr-live);
font-size: 0.7rem;
margin-right: 3px;
vertical-align: middle;
flex-shrink: 0;
}
/* Partnership & last wicket footer */
.match-card__live-footer {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.73rem;
color: var(--clr-text-muted);
border-top: 1px solid var(--clr-border);
padding-top: 6px;
}
.match-card__partnership,
.match-card__last-wicket {
display: flex;
align-items: flex-start;
gap: 5px;
line-height: 1.4;
}
.match-card__partnership svg { color: var(--clr-result); flex-shrink: 0; margin-top: 1px; }
.match-card__last-wicket svg { color: var(--clr-live); flex-shrink: 0; margin-top: 1px; }
.match-card__live-summary {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 0.74rem;
color: var(--clr-text-muted);
border-top: 1px solid var(--clr-border);
padding-top: 6px;
}
.match-card__live-summary strong {
color: var(--clr-text);
font-weight: 700;
}
.match-card__live-extra {
color: var(--clr-text-muted);
}
.match-card__live-meta {
border-top: 1px solid var(--clr-border);
padding-top: 6px;
display: flex;
flex-direction: column;
gap: 3px;
}
.match-card__live-meta-item {
font-size: 0.7rem;
color: var(--clr-text-muted);
line-height: 1.35;
}
/* "Full scorecard" link */
.match-card__live-more {
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
color: var(--clr-text-muted);
text-decoration: none;
padding-top: 2px;
}
.match-card__live-more:hover { color: var(--clr-text); text-decoration: underline; }
/* -------------------------------------------------------
12. MATCH HERO (Single Match)
------------------------------------------------------- */
.match-hero {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
}
.match-hero.status--live { border-left: 4px solid var(--clr-live); }
.match-hero.status--upcoming { border-left: 4px solid var(--clr-upcoming); }
.match-hero.status--finished { border-left: 4px solid var(--clr-finished); }
.match-hero__header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--space-md);
}
.match-hero__series {
font-size: 0.85rem;
color: var(--clr-text-muted);
margin-bottom: var(--space-md);
}
.match-hero__teams {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.match-hero__team { text-align: left; }
.match-hero__team:last-of-type { text-align: right; }
.match-hero__team-name {
font-size: 1.3rem;
font-weight: 800;
color: var(--clr-text);
}
.match-hero__team-score {
font-size: 1.5rem;
font-weight: 800;
color: var(--clr-accent);
margin-top: var(--space-xs);
}
.match-hero__vs {
font-size: 1rem;
color: var(--clr-text-muted);
font-weight: 700;
background: var(--clr-surface-2);
border-radius: 50%;
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.match-hero__result {
font-size: 0.95rem;
color: var(--clr-result);
font-weight: 700;
margin-bottom: var(--space-md);
}
.match-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-md);
font-size: 0.85rem;
color: var(--clr-text-muted);
}
/* -------------------------------------------------------
13. SCORECARD
------------------------------------------------------- */
.scorecard-section { margin-bottom: var(--space-xl); }
.scorecard-section__title {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: var(--space-lg);
padding-bottom: var(--space-sm);
border-bottom: 2px solid var(--clr-primary);
display: inline-block;
color: var(--clr-text);
}
.scorecard-inning {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-lg);
}
.top-performers-block {
margin-top: var(--space-xl);
}
.scorecard-inning__title {
padding: var(--space-md);
background: var(--clr-surface-2);
font-size: 1rem;
font-weight: 700;
border-bottom: 1px solid var(--clr-border);
}
.scorecard-total {
padding: var(--space-sm) var(--space-md);
font-size: 1.1rem;
font-weight: 800;
color: var(--clr-accent);
border-bottom: 1px solid var(--clr-border);
}
.scorecard-table-wrap {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.scorecard-table {
width: 100%;
min-width: 500px;
border-collapse: collapse;
font-size: 0.85rem;
}
.scorecard-table caption {
padding: var(--space-sm) var(--space-md);
text-align: left;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
color: var(--clr-text-muted);
background: var(--clr-surface-2);
}
.scorecard-table th,
.scorecard-table td {
padding: 10px var(--space-md);
text-align: left;
border-bottom: 1px solid var(--clr-border);
}
.scorecard-table th {
color: var(--clr-text-muted);
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
}
.scorecard-table th.num,
.scorecard-table td.num { text-align: center; }
.scorecard-table .player-name { font-weight: 600; }
.top-performer-player {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.top-performer-player__avatar {
width: 28px;
height: 28px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--clr-border);
background: var(--clr-surface-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.top-performer-player__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.top-performer-player__avatar-fallback {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.03em;
color: var(--clr-text-muted);
}
.scorecard-table .dismissal { color: var(--clr-text-muted); font-size: 0.78rem; max-width: 180px; }
.scorecard-table tr.row--batting { background: rgba(74,222,128,0.06); }
.scorecard-table tbody tr:hover { background: var(--clr-surface-2); }
.team-recent-results-table {
min-width: 680px;
}
.team-recent-results-table td:nth-child(3),
.team-recent-results-table td:nth-child(4) {
white-space: nowrap;
}
.team-recent-results-table a {
color: var(--clr-text);
text-decoration: none;
}
.team-recent-results-table a:hover {
color: var(--clr-primary);
}
/* -------------------------------------------------------
14. LEAGUES LIST
------------------------------------------------------- */
.leagues-list {
display: flex;
flex-direction: column;
gap: 2px;
}
.league-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.league-card:hover { background: var(--clr-surface-2); border-color: var(--clr-border); }
.league-card__link {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 12px var(--space-md);
color: inherit;
text-decoration: none !important;
}
.league-card__icon { font-size: 1.5rem; flex-shrink: 0; }
.league-card__body { flex: 1; min-width: 0; }
.league-card__name {
font-size: 0.95rem;
font-weight: 700;
margin-bottom: var(--space-xs);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.league-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
font-size: 0.78rem;
color: var(--clr-text-muted);
margin-bottom: var(--space-xs);
}
.league-card__types { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.league-card__arrow { color: var(--clr-text-muted); font-size: 1.3rem; flex-shrink: 0; }
.match-type-badge {
font-size: 0.65rem;
font-weight: 700;
padding: 2px 7px;
border-radius: 3px;
background: rgba(255,255,255,0.08);
color: var(--clr-text-muted);
}
/* -------------------------------------------------------
15. TEAMS GRID
------------------------------------------------------- */
.teams-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.teams-grid__banner-row { grid-column: 1 / -1; }
.team-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.team-card:hover { background: var(--clr-surface-2); border-color: var(--clr-border); }
.team-card__link {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
padding: var(--space-md) var(--space-sm);
color: inherit;
text-decoration: none !important;
}
.team-card__avatar {
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--clr-surface-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.team-card__img { width: 100%; height: 100%; object-fit: cover; }
.team-card__initials { font-size: 1.2rem; font-weight: 800; color: var(--clr-text-muted); }
.team-card__name {
font-size: 0.85rem;
font-weight: 700;
text-align: center;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* -------------------------------------------------------
16. PLAYERS GRID
------------------------------------------------------- */
.players-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-sm);
}
.players-grid__banner-row { grid-column: 1 / -1; }
.player-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
transition: background 0.15s;
}
.player-card:hover { background: var(--clr-surface-2); border-color: var(--clr-border); }
.player-card__link {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
color: inherit;
text-decoration: none !important;
}
.player-card__avatar {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--clr-surface-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.player-card__img { width: 100%; height: 100%; object-fit: cover; }
.player-card__initials { font-size: 1rem; font-weight: 800; color: var(--clr-text-muted); }
.player-card__name {
font-size: 0.9rem;
font-weight: 700;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.player-card__role { font-size: 0.75rem; color: var(--clr-text-muted); }
.player-card__country { font-size: 0.7rem; color: var(--clr-text-muted); }
/* -------------------------------------------------------
17. PLAYER / TEAM HERO
------------------------------------------------------- */
.player-hero {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.player-hero__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--clr-surface-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.player-hero__img { width: 100%; height: 100%; object-fit: cover; }
.player-hero__initials { font-size: 2rem; font-weight: 800; color: var(--clr-text-muted); }
.player-hero__name { font-size: 1.4rem; font-weight: 800; margin-bottom: var(--space-xs); }
.player-hero__country,
.player-hero__role { font-size: 0.9rem; color: var(--clr-text-muted); }
.player-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-sm);
}
.player-info-item {
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
padding: 12px 14px;
min-height: 78px;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
}
.player-info-item__label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--clr-text-muted);
font-weight: 700;
}
.player-info-item__value {
font-size: 0.98rem;
color: var(--clr-text);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 8px;
}
.player-info-item__flag {
font-size: 1.1rem;
line-height: 1;
}
.player-stats-layout {
display: grid;
gap: var(--space-md);
}
.player-stats-section {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: 14px;
}
.player-stats-section__head h3 {
margin: 0 0 12px;
font-size: 1rem;
font-weight: 800;
color: var(--clr-text);
}
.player-stats-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 10px;
}
.player-stat-card {
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
padding: 12px;
}
.player-stat-card__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.player-stat-card__format {
font-size: 0.73rem;
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 800;
color: var(--clr-text-muted);
}
.player-stat-card__primary {
font-size: 0.8rem;
font-weight: 700;
color: var(--clr-text);
}
.player-stat-card__bar {
width: 100%;
height: 6px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
overflow: hidden;
margin-bottom: 10px;
}
.player-stat-card__bar-fill {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--clr-primary), #ff5f8f);
}
.player-stat-card__metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.player-stat-chip {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 7px 8px;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.player-stat-chip__k {
font-size: 0.7rem;
color: var(--clr-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.player-stat-chip__v {
font-size: 0.84rem;
font-weight: 700;
color: var(--clr-text);
}
.team-hero {
display: flex;
align-items: center;
gap: var(--space-lg);
padding: var(--space-lg);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.team-hero__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
background: var(--clr-surface-2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.team-hero__img { width: 100%; height: 100%; object-fit: cover; }
.team-hero__initials { font-size: 2rem; font-weight: 800; color: var(--clr-text-muted); }
.team-hero__name { font-size: 1.4rem; font-weight: 800; }
.team-results-chart {
display: grid;
gap: 14px;
}
.team-results-chart__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
font-size: 14px;
}
.team-results-chart__label {
font-weight: 700;
}
.team-results-chart__value {
color: var(--clr-text-muted);
font-weight: 600;
}
.team-results-chart__bar {
height: 10px;
background: #edf0f3;
border-radius: 999px;
overflow: hidden;
}
.team-results-chart__fill {
display: block;
height: 100%;
border-radius: 999px;
}
.team-results-chart__fill.is-win { background: #1fbf75; }
.team-results-chart__fill.is-loss { background: #ef4f5f; }
.team-results-chart__fill.is-tie { background: #f4a622; }
.team-results-chart__fill.is-noresult { background: #8893a4; }
.team-results-chart__footer {
margin-top: 4px;
color: var(--clr-text-muted);
font-size: 13px;
}
.series-hero {
padding: var(--space-lg);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
margin-bottom: var(--space-lg);
}
.series-hero__title { font-size: 1.4rem; font-weight: 800; margin-bottom: var(--space-sm); }
.series-hero__meta {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
font-size: 0.85rem;
color: var(--clr-text-muted);
margin-bottom: var(--space-sm);
}
.series-hero__types { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
/* -------------------------------------------------------
18. PAGE HEADER
------------------------------------------------------- */
.page-header {
padding: var(--space-xl) 0 var(--space-lg);
}
.page-header__title { font-size: 1.6rem; font-weight: 800; }
.page-header__subtitle { margin-top: var(--space-sm); color: var(--clr-text-muted); }
.page-hero {
padding: var(--space-xl) 0;
text-align: center;
}
.page-hero__title { font-size: 1.8rem; font-weight: 800; }
.page-hero__subtitle { margin-top: var(--space-sm); color: var(--clr-text-muted); }
/* -------------------------------------------------------
19. BREADCRUMB
------------------------------------------------------- */
.breadcrumb {
padding: var(--space-md) 0;
font-size: 0.8rem;
color: var(--clr-text-muted);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-xs);
}
.breadcrumb a { color: var(--clr-text-muted); }
.breadcrumb a:hover { color: var(--clr-text); }
/* Блок ближайших матчей на внутренних страницах */
.inner-nearest-matches {
margin: 0 0 var(--space-lg);
}
.inner-nearest-matches__title {
margin: 0 0 var(--space-sm);
font-size: 0.9rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #94a3b8;
}
.inner-nearest-matches__list {
display: flex;
overflow-x: scroll;
gap: 10px;
scrollbar-width: thin;
padding-bottom: 2px;
}
.inner-nearest-matches__card {
width: min(260px, 78vw);
min-width: min(260px, 78vw);
background: #1E2438;
border: 1px solid #2a364a;
border-radius: 8px;
text-decoration: none !important;
color: #e2e8f0;
overflow: hidden;
}
.inner-nearest-matches__card:hover {
transform: translateY(-1px);
border-color: #3b82f6;
box-shadow: 0 8px 18px rgba(2, 8, 23, 0.45);
}
.inner-nearest-matches__head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.22);
font-size: 0.72rem;
}
.inner-nearest-matches__series {
color: #94a3b8;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.inner-nearest-matches__type {
font-size: 0.66rem;
font-weight: 700;
border-radius: 999px;
padding: 2px 7px;
color: #dbeafe;
background: rgba(59, 130, 246, 0.2);
border: 1px solid rgba(59, 130, 246, 0.4);
}
.inner-nearest-matches__teams {
padding: 10px 10px 8px;
}
.inner-nearest-matches__team {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
font-size: 1rem;
font-weight: 700;
}
.inner-nearest-matches__team + .inner-nearest-matches__team {
margin-top: 8px;
}
.inner-nearest-matches__team-code {
color: #f8fafc;
}
.inner-nearest-matches__team-score {
font-size: 0.86rem;
font-weight: 600;
color: #a5b4fc;
}
.inner-nearest-matches__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
background: rgba(15, 23, 42, 0.45);
border-top: 1px solid rgba(148, 163, 184, 0.2);
}
.inner-nearest-matches__schedule {
font-size: 0.8rem;
font-weight: 600;
color: #cbd5e1;
}
.inner-nearest-matches__arrow {
width: 28px;
height: 28px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
background: #2563eb;
font-size: 0.82rem;
}
/* -------------------------------------------------------
20. TABS
------------------------------------------------------- */
.tabs-nav {
display: flex;
gap: var(--space-sm);
margin-bottom: var(--space-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--space-xs);
scrollbar-width: none;
}
.tabs-nav::-webkit-scrollbar { display: none; }
.tabs-nav__tab {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 8px 16px;
border-radius: 100px;
font-size: 0.875rem;
font-weight: 600;
color: var(--clr-text-muted);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
white-space: nowrap;
text-decoration: none !important;
transition: color 0.15s, border-color 0.15s, background 0.15s;
min-height: 40px;
}
.tabs-nav__tab.is-active {
color: #fff;
border-color: var(--clr-primary);
background: var(--clr-primary);
}
.tabs-nav__tab:hover { color: var(--clr-text); border-color: var(--clr-text-muted); }
/* -------------------------------------------------------
21. SEARCH FORM
------------------------------------------------------- */
.search-form {
margin-bottom: var(--space-lg);
}
.search-form__inner {
display: flex;
gap: var(--space-sm);
max-width: 480px;
}
.search-form__input {
flex: 1;
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
color: var(--clr-text);
padding: 10px var(--space-md);
font-size: 1rem;
min-height: 44px;
}
.search-form__input:focus {
outline: 2px solid var(--clr-border);
outline-offset: -1px;
border-color: var(--clr-primary);
}
.search-form__input::placeholder { color: var(--clr-text-muted); }
.search-form__btn { flex-shrink: 0; }
.search-prompt {
padding: var(--space-xl);
text-align: center;
}
.search-prompt__text { color: var(--clr-text-muted); }
/* -------------------------------------------------------
22. DBBET BANNER COMPONENT (hidden — not used)
------------------------------------------------------- */
.dbbet-banner { display: none; }
/* -------------------------------------------------------
23. QUICK LINKS (home)
------------------------------------------------------- */
.quick-links {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-sm);
}
.quick-link-card {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
color: var(--clr-text);
text-decoration: none !important;
transition: background 0.15s;
}
.quick-link-card:hover { background: var(--clr-surface-2); }
.quick-link-card__icon { font-size: 1.4rem; flex-shrink: 0; }
.quick-link-card__label { flex: 1; font-weight: 600; font-size: 1rem; }
.quick-link-card__arrow { color: var(--clr-text-muted); font-size: 1.3rem; }
/* -------------------------------------------------------
24. NAV / DESKTOP NAV STYLES
------------------------------------------------------- */
.nav-list {
display: flex;
align-items: stretch;
gap: 0;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
}
.nav-list > .menu-item {
display: flex;
align-items: stretch;
position: relative;
}
.nav-list > .menu-item > a {
display: flex;
align-items: center;
padding: 0 14px;
color: var(--clr-text-muted);
font-size: 0.83rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.03em;
text-decoration: none !important;
transition: color 0.15s;
border-bottom: 3px solid transparent;
margin-bottom: -1px;
}
.nav-list > .menu-item > a:hover { color: var(--clr-text); }
.nav-list > .current-menu-item > a,
.nav-list > .current-menu-ancestor > a,
.nav-list > .current-menu-parent > a {
color: var(--clr-text);
border-bottom-color: var(--clr-primary);
}
.nav-list .sub-menu {
position: absolute;
top: calc(100% + 6px);
left: 0;
min-width: 220px;
list-style: none;
margin: 0;
padding: 8px 0;
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
box-shadow: 0 10px 24px rgba(0,0,0,0.24);
z-index: 30;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s ease;
}
.nav-list li:hover > .sub-menu,
.nav-list li:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-list .sub-menu li {
position: relative;
}
.nav-list .sub-menu a {
display: block;
padding: 9px 14px;
color: var(--clr-text-muted);
font-size: 0.82rem;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
text-decoration: none !important;
border-bottom: 0;
margin: 0;
white-space: nowrap;
}
.nav-list .sub-menu a:hover,
.nav-list .sub-menu .current-menu-item > a,
.nav-list .sub-menu .current-menu-ancestor > a {
color: var(--clr-text);
background: var(--clr-surface-2);
}
.nav-list .sub-menu .menu-item-has-children > a {
padding-right: 28px;
}
.nav-list .sub-menu .menu-item-has-children > a::after {
content: '›';
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--clr-text-muted);
}
.nav-list .sub-menu .sub-menu {
top: -8px;
left: auto;
right: calc(100% + 6px);
}
/* -------------------------------------------------------
25. SQUAD DETAILS
------------------------------------------------------- */
.squad-details {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
margin-bottom: var(--space-sm);
overflow: hidden;
}
.squad-details__summary {
padding: var(--space-md);
font-weight: 700;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
transition: background 0.15s;
}
.squad-details__summary:hover { background: var(--clr-surface-2); }
.squad-details__summary::after { content: '›'; font-size: 1.2rem; transition: transform 0.2s; }
.squad-details[open] .squad-details__summary::after { transform: rotate(90deg); }
.squad-players {
padding: var(--space-md);
display: flex;
flex-wrap: wrap;
gap: var(--space-sm);
border-top: 1px solid var(--clr-border);
}
.squad-player-tag {
padding: 5px 12px;
background: var(--clr-surface-2);
border-radius: 100px;
font-size: 0.8rem;
color: var(--clr-text);
text-decoration: none;
transition: background 0.15s;
}
.squad-player-tag:hover { background: rgba(232,0,61,0.1); color: var(--clr-primary); }
/* -------------------------------------------------------
26. PLAYER PROFILE
------------------------------------------------------- */
.player-profile-list {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--space-sm) var(--space-lg);
font-size: 0.9rem;
margin-bottom: var(--space-lg);
}
.player-profile-list dt { color: var(--clr-text-muted); font-weight: 600; }
.player-profile-list dd { color: var(--clr-text); }
.player-desc {
font-size: 0.9rem;
color: var(--clr-text-muted);
line-height: 1.8;
}
.stat-group-title {
font-size: 0.9rem;
font-weight: 700;
color: var(--clr-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
margin: var(--space-md) 0 var(--space-sm);
}
/* -------------------------------------------------------
27. API NOTICES
------------------------------------------------------- */
.api-notice {
text-align: center;
padding: var(--space-xl) var(--space-lg);
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
margin: var(--space-xl) 0;
}
.api-notice__icon { font-size: 2.5rem; margin-bottom: var(--space-md); }
.api-notice__title { font-size: 1.3rem; font-weight: 700; margin-bottom: var(--space-md); }
.api-notice__text { color: var(--clr-text-muted); margin-bottom: var(--space-md); }
.api-notice a { color: var(--clr-text); text-decoration: underline; }
.api-error {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-md);
background: rgba(239,68,68,0.1);
border: 1px solid rgba(239,68,68,0.3);
border-radius: var(--radius-md);
margin: var(--space-md) 0;
}
.api-error__icon { font-size: 1.2rem; flex-shrink: 0; }
.api-error__text { font-size: 0.9rem; color: var(--clr-text-muted); }
.no-data {
color: var(--clr-text-muted);
text-align: center;
padding: var(--space-xl);
}
.no-data-block {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
margin: var(--space-lg) 0;
}
/* -------------------------------------------------------
28. PAGINATION
------------------------------------------------------- */
.pagination {
display: flex;
gap: var(--space-md);
justify-content: center;
margin: var(--space-xl) 0 var(--space-lg);
}
/* -------------------------------------------------------
29. CONTENT CARD (fallback index)
------------------------------------------------------- */
.content-card {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: var(--space-lg);
margin-bottom: var(--space-md);
}
/* -------------------------------------------------------
30. DESKTOP BREAKPOINTS
------------------------------------------------------- */
@media (min-width: 600px) {
.matches-grid { grid-template-columns: repeat(2, 1fr); }
.matches-grid--featured { grid-template-columns: repeat(2, 1fr); }
.teams-grid { grid-template-columns: repeat(3, 1fr); }
.players-grid { grid-template-columns: repeat(3, 1fr); }
.quick-links { grid-template-columns: repeat(3, 1fr); }
.site-footer__inner { flex-direction: row; }
.site-footer__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 768px) {
/* Hide bottom nav on larger screens */
.bottom-nav { display: none; }
body { padding-bottom: 0; }
/* Show desktop nav, hide hamburger */
.desktop-nav { display: flex; }
.hamburger { display: none; }
.matches-grid { grid-template-columns: repeat(2, 1fr); }
.matches-grid--featured { grid-template-columns: repeat(2, 1fr); }
.teams-grid { grid-template-columns: repeat(4, 1fr); }
.players-grid { grid-template-columns: repeat(3, 1fr); }
.match-hero__team-name { font-size: 1.6rem; }
.match-hero__team-score { font-size: 2rem; }
.home-hero__title { font-size: 3rem; }
.site-footer__links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
.header-matches-strip__label {
display: none;
}
.header-matches-strip__inner {
min-height: 32px;
}
.header-matches-strip__item {
min-height: 32px;
padding: 0 10px;
}
.header-matches-strip__teams {
font-size: 0.7rem;
}
.header-matches-strip__status {
font-size: 0.68rem;
}
}
@media (min-width: 1024px) {
.matches-grid { grid-template-columns: repeat(3, 1fr); }
.matches-grid--featured { grid-template-columns: repeat(3, 1fr); }
.teams-grid { grid-template-columns: repeat(5, 1fr); }
.players-grid { grid-template-columns: repeat(4, 1fr); }
.site-footer {
padding-bottom: var(--space-xl);
}
}
/* -------------------------------------------------------
31. UTILITY
------------------------------------------------------- */
.sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
white-space: nowrap;
border: 0;
}
/* Site main top padding */
.site-main { padding-top: var(--space-md);padding-bottom: var(--space-md); }
/* -------------------------------------------------------
FRONT PAGE HERO BANNER
------------------------------------------------------- */
.front-hero {
padding: var(--space-md) 0 var(--space-sm);
}
.front-hero__banner {
position: relative;
min-height: clamp(150px, 24vw, 280px);
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--clr-border);
background-color: #11172c;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.front-hero__overlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: var(--space-md);
min-height: inherit;
padding: clamp(16px, 3vw, 34px);
background: linear-gradient(90deg, rgba(8, 12, 26, 0.82) 0%, rgba(8, 12, 26, 0.5) 55%, rgba(8, 12, 26, 0.35) 100%);
}
.front-hero__title {
margin: 0;
max-width: min(760px, 100%);
font-size: clamp(1.25rem, 2.9vw, 2.15rem);
line-height: 1.2;
font-weight: 800;
color: #fff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.front-hero__actions {
display: flex;
align-items: center;
gap: var(--space-sm);
flex-wrap: wrap;
}
.front-hero__btn {
min-width: 140px;
}
@media (max-width: 600px) {
.front-hero__overlay {
align-items: stretch;
background: linear-gradient(180deg, rgba(8, 12, 26, 0.84) 0%, rgba(8, 12, 26, 0.55) 100%);
}
.front-hero__actions {
justify-content: flex-start;
}
.front-hero__btn {
flex: 1 1 calc(50% - 6px);
min-width: 120px;
padding-left: 12px;
padding-right: 12px;
}
}
/* -------------------------------------------------------
32. SCORES PAGE — Flashscore-style layout
------------------------------------------------------- */
/* Remove top padding on scores main to let banner sit flush */
.scores-main { padding-top: 0; }
.scores-page { padding: 0 0 var(--space-xl); }
.home-content-section {
padding-bottom: var(--space-lg);
}
.home-content-card > :first-child {
margin-top: 0;
}
.home-content-card > :last-child {
margin-bottom: 0;
}
.home-news-section {
padding-bottom: var(--space-xl);
}
.home-news-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
.home-news-card {
display: flex;
flex-direction: column;
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease, transform 0.2s ease;
}
.home-news-card:hover {
border-color: var(--clr-primary);
transform: translateY(-2px);
}
.home-news-card__image-wrap {
position: relative;
aspect-ratio: 16 / 9;
background: var(--clr-surface-2);
}
.home-news-card__category-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
padding: 4px 10px;
border-radius: 999px;
background: rgba(8, 12, 26, 0.8);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.home-news-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.home-news-card__image--placeholder {
background: linear-gradient(135deg, rgba(44, 124, 255, 0.3), rgba(17, 28, 52, 0.65));
}
.home-news-card__content {
padding: var(--space-md);
}
.home-news-card__meta {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 8px;
color: var(--clr-text-muted);
font-size: 0.78rem;
line-height: 1.2;
}
.home-news-card__meta-sep {
font-size: 0.9em;
line-height: 1;
}
.home-news-card__title {
margin: 0 0 6px;
font-size: 1.02rem;
line-height: 1.35;
}
.home-news-card__excerpt {
margin: 0;
color: var(--clr-text-muted);
font-size: 0.88rem;
}
.home-news-link-wrap {
margin-top: var(--space-lg);
text-align: center;
}
@media (min-width: 700px) {
.home-news-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ── Filter Tabs ── */
.scores-tabs {
display: flex;
gap: 4px;
padding: var(--space-md) 0 var(--space-sm);
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.scores-tabs::-webkit-scrollbar { display: none; }
.scores-tab {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
border-radius: 3px;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.04em;
color: var(--clr-text-muted);
background: transparent;
border: 1px solid transparent;
white-space: nowrap;
cursor: pointer;
transition: color 0.15s, background 0.15s;
min-height: 34px;
}
.scores-tab:hover {
color: var(--clr-text);
background: var(--clr-surface-2);
}
.scores-tab.is-active {
color: #fff;
background: var(--clr-primary);
border-color: var(--clr-primary);
}
/* Live pulsing dot in tab */
.scores-tab__live-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--clr-live);
animation: pulse-live 1.4s infinite;
flex-shrink: 0;
}
/* ── Scores List ── */
.scores-list {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ── League Block (accordion) ── */
.league-block {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
/* League header row */
.league-block__header {
display: flex;
align-items: center;
background: var(--clr-surface-2);
border-bottom: 1px solid var(--clr-border);
min-height: 36px;
padding: 0 var(--space-sm);
gap: var(--space-sm);
}
/* Main toggle button (icon + name) */
.league-block__toggle {
flex: 1;
display: flex;
align-items: center;
gap: 7px;
padding: 8px var(--space-sm) 8px 6px;
text-align: left;
color: var(--clr-text);
font-size: 0.82rem;
font-weight: 700;
cursor: pointer;
min-width: 0;
transition: color 0.15s;
}
.league-block__toggle:hover { color: var(--clr-text); }
.league-block__cricket-icon {
flex-shrink: 0;
color: var(--clr-text-muted);
display: flex;
align-items: center;
}
.league-block__name {
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.league-block__live-badge {
display: inline-flex;
align-items: center;
padding: 1px 7px;
border-radius: 3px;
font-size: 0.63rem;
font-weight: 800;
letter-spacing: 0.04em;
background: var(--clr-primary);
color: #fff;
white-space: nowrap;
flex-shrink: 0;
}
/* Details link */
.league-block__details-link {
display: inline-flex;
align-items: center;
gap: 2px;
color: var(--clr-text-muted);
font-size: 0.75rem;
font-weight: 600;
text-decoration: none !important;
white-space: nowrap;
flex-shrink: 0;
padding: 4px 6px;
border-radius: var(--radius-sm);
transition: color 0.15s, background 0.15s;
}
.league-block__details-link:hover {
color: var(--clr-text);
background: rgba(255, 255, 255, 0.06);
}
/* Chevron toggle button */
.league-block__chevron {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-sm);
color: var(--clr-text-muted);
transition: background 0.15s, color 0.15s;
flex-shrink: 0;
}
.league-block__chevron:hover { background: var(--clr-border); color: var(--clr-text); }
.chevron-icon {
transition: transform 0.2s ease;
}
/* Collapsed state: chevron points down */
.league-block.is-collapsed .chevron-icon {
transform: rotate(180deg);
}
/* League body */
.league-block__body {
display: block;
}
.league-block.is-collapsed .league-block__body {
display: none;
}
/* ── Match Row ── */
.match-row {
display: flex;
align-items: stretch;
min-height: 54px;
text-decoration: none !important;
color: inherit;
border-bottom: 1px solid var(--clr-border);
transition: background 0.1s;
}
.match-row:last-child { border-bottom: none; }
.match-row:hover { background: rgba(255, 255, 255, 0.04); }
/* Left accent line by status */
.match-row--live { border-left: 3px solid var(--clr-live); }
.match-row--upcoming { border-left: 3px solid transparent; }
.match-row--finished { border-left: 3px solid transparent; }
/* Time column */
.match-row__time {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
min-width: 78px;
padding: 8px 6px;
border-right: 1px solid var(--clr-border);
flex-shrink: 0;
}
.match-row__live-text {
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.06em;
color: var(--clr-live);
}
.match-row__fin-text {
font-size: 0.68rem;
font-weight: 700;
color: var(--clr-finished);
}
.match-row__time-value {
font-size: 0.82rem;
font-weight: 700;
color: var(--clr-text-muted);
}
.match-row__status-pill {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 52px;
padding: 2px 8px;
border-radius: 999px;
font-size: 0.64rem;
font-weight: 800;
letter-spacing: 0.04em;
background: var(--clr-surface-2);
color: var(--clr-text-muted);
}
.match-row__status-pill--live {
color: var(--clr-live);
}
.match-row__status-pill--finished {
color: var(--clr-finished);
}
.match-row__status-pill--upcoming {
color: var(--clr-text-muted);
}
.match-row__start {
display: flex;
flex-direction: column;
justify-content: center;
gap: 2px;
min-width: 94px;
padding: 8px var(--space-sm);
border-right: 1px solid var(--clr-border);
flex-shrink: 0;
}
.match-row__start-time {
font-size: 0.82rem;
font-weight: 700;
color: var(--clr-text);
line-height: 1.2;
}
.match-row__start-date {
font-size: 0.72rem;
color: var(--clr-text-muted);
line-height: 1.2;
}
/* Teams + Scores column */
.match-row__teams {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 8px var(--space-sm);
min-width: 0;
}
.match-row__team-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
min-width: 0;
}
.match-row__team-main {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
flex: 1;
}
.match-row__team-logo,
.match-row__team-logo-fallback {
width: 20px;
height: 20px;
border-radius: 50%;
flex-shrink: 0;
}
.match-row__team-logo {
object-fit: cover;
border: 1px solid var(--clr-border);
background: var(--clr-surface-2);
}
.match-row__team-logo-fallback {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.58rem;
font-weight: 800;
color: var(--clr-text-muted);
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
}
.match-row__team-name {
font-size: 0.88rem;
font-weight: 600;
color: var(--clr-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1;
min-width: 0;
}
/* Slightly emphasize live batting team */
.match-row--live .match-row__team-name.is-batting {
color: var(--clr-text);
font-weight: 700;
}
.match-row__score {
font-size: 0.82rem;
font-weight: 700;
color: var(--clr-accent);
white-space: nowrap;
flex-shrink: 0;
}
.match-row__vs-dash {
font-size: 0.82rem;
color: var(--clr-text-muted);
flex-shrink: 0;
}
/* Info / Status column */
.match-row__info {
display: flex;
flex-direction: column;
justify-content: center;
gap: 3px;
min-width: 0;
max-width: 200px;
padding: 8px var(--space-sm);
flex-shrink: 1;
}
.match-row__rates {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.match-row__rate {
font-size: 0.7rem;
color: var(--clr-text-muted);
white-space: nowrap;
}
.match-row__rate--crr strong { color: var(--clr-result); font-size: 0.78rem; }
.match-row__rate--rrr strong { color: var(--clr-accent); font-size: 0.78rem; }
.match-row__status-text {
font-size: 0.72rem;
color: var(--clr-live);
line-height: 1.35;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.match-row__result {
font-size: 0.72rem;
color: var(--clr-result);
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
/* Right column: type badge + arrow */
.match-row__right {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
padding: 8px 10px 8px 6px;
flex-shrink: 0;
}
.match-type-badge--t20 { background: rgba(59, 130, 246, 0.12); color: #6fa8ff; }
.match-type-badge--odi { background: rgba(74, 222, 128, 0.1); color: var(--clr-result); }
.match-type-badge--test { background: rgba(245, 158, 11, 0.1); color: var(--clr-accent); }
.match-row__arrow {
color: var(--clr-text-muted);
display: flex;
align-items: center;
}
.match-row:hover .match-row__arrow { color: var(--clr-text); }
/* ── Hidden via filter ── */
.league-block.is-filtered-out { display: none; }
.match-row.is-filtered-out { display: none; }
/* When all rows in league are filtered, hide league */
.league-block__body:empty + .league-block__header { display: none; }
/* ── Scores Redesign (league table + day picker) ── */
.scores-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
flex-wrap: wrap;
}
.scores-date-nav {
display: inline-flex;
align-items: center;
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--clr-surface);
}
.scores-date-nav__btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--clr-text-muted);
background: transparent;
border: none;
cursor: pointer;
}
.scores-date-nav__btn:hover {
color: var(--clr-text);
background: var(--clr-surface-2);
}
.scores-date-nav__select {
min-width: 144px;
height: 34px;
padding: 0 10px;
border: none;
border-left: 1px solid var(--clr-border);
border-right: 1px solid var(--clr-border);
background: transparent;
color: var(--clr-text);
font-size: 0.8rem;
font-weight: 700;
}
.match-row {
display: block;
border-left: none;
padding: 0;
}
.match-row__main {
display: grid;
grid-template-columns: minmax(96px, 114px) minmax(0, 1fr) minmax(90px, 124px);
align-items: stretch;
}
.match-row__datetime {
display: flex;
flex-direction: column;
justify-content: center;
gap: 4px;
padding: 8px 10px;
border-right: 1px solid var(--clr-border);
}
.match-row__teams {
padding: 8px 10px;
}
.match-row__scores {
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
padding: 8px 10px;
border-left: 1px solid var(--clr-border);
}
.match-row__scores .match-row__score {
text-align: right;
}
.match-row__comment {
margin: 0 10px 8px;
padding: 4px 8px;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.04);
color: var(--clr-text-muted);
font-size: 0.76rem;
line-height: 1.35;
}
@media (max-width: 700px) {
.scores-date-nav {
width: 100%;
}
.scores-date-nav__select {
flex: 1;
min-width: 0;
}
.match-row__main {
grid-template-columns: 88px minmax(0, 1fr) 84px;
}
.match-row__team-name {
font-size: 0.84rem;
}
.match-row__score {
font-size: 0.78rem;
}
}
/* ── Quick Links row ── */
.scores-quick-links {
display: flex;
gap: var(--space-sm);
margin-top: var(--space-lg);
flex-wrap: wrap;
}
.scores-quick-link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
color: var(--clr-text-muted);
font-size: 0.85rem;
font-weight: 600;
text-decoration: none !important;
transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.scores-quick-link:hover {
color: var(--clr-text);
border-color: var(--clr-border);
background: var(--clr-surface-2);
}
/* ── Responsive adjustments ── */
@media (max-width: 600px) {
.match-row__info { display: none; }
.match-row__teams { padding: 8px var(--space-sm) 8px var(--space-sm); }
.container--scores { padding: 0 var(--space-sm); }
}
@media (min-width: 768px) {
.match-row__team-name { font-size: 0.92rem; }
.match-row__score { font-size: 0.88rem; }
}
/* =============================================================
MATCH DETAIL PAGE (redesigned)
============================================================= */
/* -------------------------------------------------------
MATCH HERO V2
------------------------------------------------------- */
.match-detail-hero {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: var(--space-md) var(--space-md) var(--space-lg);
margin-bottom: var(--space-lg);
position: relative;
overflow: hidden;
}
.match-detail-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--clr-border);
}
.match-detail-hero.status--live::before { background: var(--clr-live); }
.match-detail-hero.status--upcoming::before { background: var(--clr-upcoming); }
.match-detail-hero.status--finished::before { background: var(--clr-finished); }
/* Breadcrumb inside hero */
.mh-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 0.78rem;
color: var(--clr-text-muted);
margin-bottom: var(--space-md);
}
.mh-breadcrumb a { color: var(--clr-text-muted); }
.mh-breadcrumb a:hover { color: var(--clr-text); }
.mh-breadcrumb span[aria-hidden] { color: var(--clr-border); }
/* Status strip */
.mh-status-strip {
display: flex;
align-items: center;
gap: var(--space-sm);
margin-bottom: var(--space-md);
flex-wrap: wrap;
}
.mh-status-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.72rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 4px 10px;
border-radius: 20px;
}
.mh-status-badge--live { background: rgba(232,0,61,0.15); color: var(--clr-live); }
.mh-status-badge--upcoming { background: rgba(59,130,246,0.15); color: var(--clr-upcoming); }
.mh-status-badge--finished { background: rgba(107,114,128,0.15); color: var(--clr-finished); }
.mh-format-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 4px 10px;
border-radius: 20px;
background: rgba(255,255,255,0.07);
color: var(--clr-text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* Teams row */
.mh-teams-row {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-md);
}
.mh-team {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-sm);
text-align: center;
}
.mh-team--left { align-items: flex-start; text-align: left; }
.mh-team--right { align-items: flex-end; text-align: right; }
@media (max-width: 480px) {
.mh-team--left { align-items: center; text-align: center; }
.mh-team--right { align-items: center; text-align: center; }
}
.mh-team__logo {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--clr-surface-2);
border: 2px solid var(--clr-border);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mh-team__abbr {
font-size: 1rem;
font-weight: 900;
color: var(--clr-text-muted);
letter-spacing: 0.02em;
}
.mh-team__img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.mh-team__name {
font-size: 1.1rem;
font-weight: 800;
color: var(--clr-text);
line-height: 1.2;
}
.mh-team__scores {
display: flex;
flex-direction: column;
gap: 2px;
}
.mh-team__score {
font-size: 1.05rem;
font-weight: 800;
color: var(--clr-accent);
line-height: 1.2;
}
/* Center section */
.mh-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mh-vs {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--clr-surface-2);
border: 1px solid var(--clr-border);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
font-weight: 700;
color: var(--clr-text-muted);
}
.mh-datetime {
text-align: center;
}
.mh-datetime__date {
font-size: 1rem;
font-weight: 700;
color: var(--clr-text);
}
.mh-datetime__time {
font-size: 1.4rem;
font-weight: 800;
color: var(--clr-upcoming);
margin-top: 2px;
}
/* Result line */
.mh-result-line {
text-align: center;
font-size: 0.9rem;
font-weight: 700;
color: var(--clr-result);
margin-bottom: var(--space-md);
padding: var(--space-xs) var(--space-md);
background: rgba(74,222,128,0.06);
border-radius: var(--radius-sm);
border: 1px solid rgba(74,222,128,0.15);
}
/* Meta row */
.mh-meta-row {
display: flex;
flex-wrap: wrap;
gap: var(--space-sm) var(--space-md);
font-size: 0.8rem;
color: var(--clr-text-muted);
border-top: 1px solid var(--clr-border);
padding-top: var(--space-md);
margin-top: var(--space-xs);
}
.mh-meta__item {
display: inline-flex;
align-items: center;
gap: 5px;
}
.mh-meta__item svg { flex-shrink: 0; opacity: 0.6; }
/* -------------------------------------------------------
MATCH PAGE TABS
------------------------------------------------------- */
.match-page-tabs { margin-top: var(--space-sm); }
.match-tabs-nav {
display: flex;
border-bottom: 2px solid var(--clr-border);
margin-bottom: 0;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.match-tabs-nav::-webkit-scrollbar { display: none; }
.match-tab-btn {
flex-shrink: 0;
padding: 12px var(--space-md);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--clr-text-muted);
background: none;
border: none;
border-bottom: 2px solid transparent;
margin-bottom: -2px;
cursor: pointer;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
}
.match-tab-btn:hover { color: var(--clr-text); }
.match-tab-btn.is-active {
color: var(--clr-primary);
border-bottom-color: var(--clr-primary);
}
.match-tab-panel {
padding: var(--space-lg) 0;
}
/* -------------------------------------------------------
MATCH PREVIEW BLOCK
------------------------------------------------------- */
.match-preview-block {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
margin-bottom: var(--space-lg);
}
.match-preview-block__label {
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--clr-text-muted);
margin-bottom: var(--space-sm);
}
.match-preview-block__text {
font-size: 0.92rem;
line-height: 1.7;
color: var(--clr-text);
}
.match-preview-block__text .preview-result {
color: var(--clr-result);
font-weight: 600;
}
.match-preview-block__text .preview-live-status {
color: var(--clr-live);
font-weight: 600;
}
/* -------------------------------------------------------
LIVE STATS WIDGET
------------------------------------------------------- */
.live-stats-widget {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-left: 3px solid var(--clr-live);
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: var(--space-lg);
}
.live-stats-widget__header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: rgba(232,0,61,0.06);
border-bottom: 1px solid var(--clr-border);
}
.live-stats-widget__title {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.08em;
color: var(--clr-live);
text-transform: uppercase;
}
.live-stats-widget__rates {
display: flex;
gap: var(--space-sm);
}
.live-rate-badge {
font-size: 0.72rem;
font-weight: 700;
padding: 3px 8px;
border-radius: 4px;
background: rgba(232,0,61,0.12);
color: var(--clr-live);
}
.live-rate-badge--rrr {
background: rgba(59,130,246,0.12);
color: var(--clr-upcoming);
}
.live-stats-widget__section {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--clr-border);
}
.live-stats-widget__section:last-child { border-bottom: none; }
.live-stats-section-title {
font-size: 0.7rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--clr-text-muted);
margin-bottom: 8px;
}
.live-batter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 5px 0;
font-size: 0.88rem;
}
.live-batter-row.is-on-strike .live-batter-row__name { color: var(--clr-text); font-weight: 700; }
.live-batter-row__name {
display: flex;
align-items: center;
gap: 5px;
color: var(--clr-text-muted);
}
.strike-marker { color: var(--clr-accent); font-size: 0.65rem; }
.live-batter-row__stats {
display: flex;
align-items: center;
gap: var(--space-sm);
font-weight: 700;
color: var(--clr-text);
font-size: 0.88rem;
}
.live-batter-row__sr { color: var(--clr-text-muted); font-weight: 400; font-size: 0.8rem; }
.live-bowler-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-sm);
padding: 5px 0;
font-size: 0.88rem;
}
.live-bowler-row__name { color: var(--clr-text); font-weight: 600; }
.live-bowler-row__stats {
display: flex;
align-items: center;
gap: var(--space-sm);
color: var(--clr-text-muted);
font-size: 0.85rem;
}
.live-bowler-row__eco { color: var(--clr-text-muted); font-size: 0.8rem; }
.live-extra-row {
display: flex;
align-items: center;
gap: var(--space-sm);
font-size: 0.85rem;
color: var(--clr-text-muted);
}
.live-extra-label { font-weight: 600; color: var(--clr-text-muted); }
/* -------------------------------------------------------
MATCH INFO GRID
------------------------------------------------------- */
.match-info-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 2px;
background: var(--clr-border);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.match-info-grid__item {
display: flex;
flex-direction: column;
gap: 4px;
padding: var(--space-md);
background: var(--clr-surface);
}
.match-info-grid__label {
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--clr-text-muted);
}
.match-info-grid__value {
font-size: 0.88rem;
font-weight: 600;
color: var(--clr-text);
line-height: 1.4;
}
.match-info-grid__value a { color: var(--clr-primary); }
.match-info-grid__value a:hover { color: var(--clr-primary-dark); }
/* -------------------------------------------------------
OVERVIEW TEAMS
------------------------------------------------------- */
.match-overview-teams {
margin-top: var(--space-md);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
}
@media (min-width: 700px) {
.match-overview-teams {
grid-template-columns: 1fr 1fr;
}
}
.match-overview-team {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: var(--space-md);
}
.match-overview-team__head {
display: flex;
align-items: center;
gap: var(--space-sm);
}
.match-overview-team__logo {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--clr-border);
background: var(--clr-surface-2);
overflow: hidden;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--clr-text-muted);
font-size: 0.72rem;
font-weight: 800;
flex-shrink: 0;
}
.match-overview-team__logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.match-overview-team__titles {
display: flex;
flex-direction: column;
gap: 1px;
}
.match-overview-team__short {
color: var(--clr-text-muted);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.match-overview-team__titles strong {
font-size: 0.95rem;
color: var(--clr-text);
}
.match-overview-team__meta {
margin-top: var(--space-sm);
display: flex;
flex-direction: column;
gap: 5px;
font-size: 0.82rem;
color: var(--clr-text-muted);
}
.match-overview-team__meta a {
color: var(--clr-primary);
font-weight: 600;
}
.match-overview-team__meta a:hover {
color: var(--clr-primary-dark);
}
/* -------------------------------------------------------
SCORECARD EXTRAS & BATTING BADGE
------------------------------------------------------- */
.scorecard-extras {
padding: var(--space-xs) var(--space-md);
font-size: 0.82rem;
color: var(--clr-text-muted);
border-top: 1px solid var(--clr-border);
background: var(--clr-surface-2);
}
.batting-badge {
display: inline-flex;
align-items: center;
font-size: 0.7rem;
font-weight: 700;
padding: 2px 6px;
border-radius: 3px;
background: rgba(74,222,128,0.15);
color: var(--clr-result);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.scorecard-table td.bold { font-weight: 800; color: var(--clr-text); }
.scorecard-table a { color: var(--clr-text); }
.scorecard-table a:hover { color: var(--clr-primary); }
/* -------------------------------------------------------
TAB EMPTY STATE
------------------------------------------------------- */
.tab-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-md);
padding: var(--space-xl) var(--space-md);
text-align: center;
color: var(--clr-text-muted);
}
.tab-empty-state svg { opacity: 0.3; }
.tab-empty-state p { font-size: 0.9rem; }
/* -------------------------------------------------------
LINEUP COLUMNS
------------------------------------------------------- */
.lineup-columns {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-md);
}
@media (max-width: 540px) {
.lineup-columns { grid-template-columns: 1fr; }
}
.lineup-col {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.lineup-col__header {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-md);
background: var(--clr-surface-2);
border-bottom: 1px solid var(--clr-border);
}
.lineup-col__abbr {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--clr-bg);
border: 1px solid var(--clr-border);
font-size: 0.65rem;
font-weight: 900;
color: var(--clr-text-muted);
flex-shrink: 0;
}
.lineup-col__name {
font-size: 0.88rem;
font-weight: 700;
color: var(--clr-text);
}
.lineup-col__list {
list-style: none;
margin: 0;
padding: 0;
}
.lineup-player-row {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: 10px var(--space-md);
border-bottom: 1px solid var(--clr-border);
transition: background 0.12s;
}
.lineup-player-row:last-child { border-bottom: none; }
.lineup-player-row:hover { background: var(--clr-surface-2); }
.lineup-player-row__num {
font-size: 0.72rem;
font-weight: 700;
color: var(--clr-text-muted);
width: 20px;
flex-shrink: 0;
text-align: right;
}
.lineup-player-row__avatar {
width: 32px;
height: 32px;
border-radius: 50%;
overflow: hidden;
border: 1px solid var(--clr-border);
background: var(--clr-surface-2);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.lineup-player-row__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lineup-player-row__avatar-fallback {
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.03em;
color: var(--clr-text-muted);
}
.lineup-player-row__info {
flex: 1;
min-width: 0;
}
.lineup-player-row__name {
display: block;
font-size: 0.88rem;
font-weight: 600;
color: var(--clr-text);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a.lineup-player-row__name:hover { color: var(--clr-primary); }
.lineup-player-row__role {
display: block;
font-size: 0.72rem;
color: var(--clr-text-muted);
margin-top: 1px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.lineup-player-row__badges {
display: flex;
gap: 4px;
flex-shrink: 0;
}
.lineup-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 4px;
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.02em;
}
.lineup-badge--captain {
background: rgba(245,158,11,0.15);
color: var(--clr-accent);
border: 1px solid rgba(245,158,11,0.3);
}
.lineup-badge--keeper {
background: rgba(59,130,246,0.12);
color: var(--clr-upcoming);
border: 1px solid rgba(59,130,246,0.25);
}
/* -------------------------------------------------------
INNER PAGE TEMPLATE
------------------------------------------------------- */
.page-header--inner {
padding-top: 0;
}
.inner-page-layout {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-lg);
padding-bottom: var(--space-xxl);
}
.inner-page-sidebar {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.inner-sidebar-block {
background: var(--clr-surface);
border: 1px solid var(--clr-border);
border-radius: var(--radius-lg);
padding: var(--space-md);
}
.inner-sidebar-block__title {
margin: 0 0 var(--space-sm);
font-size: 0.9rem;
font-weight: 700;
}
.inner-sidebar-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.inner-sidebar-list__item a {
color: var(--clr-text-muted);
text-decoration: none;
font-size: 0.9rem;
}
.inner-sidebar-list__item a:hover,
.inner-sidebar-list__item a.is-current {
color: var(--clr-primary);
}
.inner-sidebar-list__item--muted {
color: var(--clr-text-muted);
font-size: 0.85rem;
}
.inner-page-content {
padding: var(--space-lg);
}
.inner-page-content > :first-child {
margin-top: 0;
}
.inner-page-content > :last-child {
margin-bottom: 0;
}
.single-post-media {
margin-top: var(--space-md);
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--clr-surface);
}
.single-post-media__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.single-post-meta {
margin: var(--space-sm) 0 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
color: var(--clr-text-muted);
font-size: 0.92rem;
}
.category-featured-news {
margin-bottom: var(--space-lg);
}
.category-featured-news__card {
display: grid;
gap: var(--space-md);
grid-template-columns: 1fr;
text-decoration: none;
color: inherit;
}
.category-featured-news__image-wrap {
border-radius: var(--radius-md);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--clr-surface);
}
.category-featured-news__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.category-featured-news__content {
display: flex;
flex-direction: column;
justify-content: center;
}
.category-featured-news__title {
margin: 0 0 8px;
font-size: clamp(1.4rem, 1.8vw + 0.95rem, 2.2rem);
line-height: 1.25;
transition: color 0.2s ease;
}
.category-featured-news__card:hover .category-featured-news__title {
color: var(--clr-primary);
}
.category-featured-news__meta {
margin: 0;
color: var(--clr-text-muted);
font-size: 0.92rem;
}
.category-news-list-block {
margin-bottom: var(--space-lg);
}
.category-news-list-block__title {
margin: 0 0 var(--space-md);
font-size: clamp(1.25rem, 1.2vw + 0.95rem, 1.7rem);
}
.category-news-list {
display: flex;
flex-direction: column;
gap: var(--space-md);
}
.category-news-list__item {
margin: 0;
}
.category-news-list__link {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-md);
text-decoration: none;
color: inherit;
border: 1px solid var(--clr-border);
border-radius: var(--radius-md);
padding: var(--space-sm);
background: var(--clr-surface-2);
}
.category-news-list__link:hover {
border-color: var(--clr-primary);
}
.category-news-list__image-wrap {
border-radius: var(--radius-sm);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--clr-surface);
}
.category-news-list__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.category-news-list__content {
display: flex;
flex-direction: column;
justify-content: center;
}
.category-news-list__title {
margin: 0 0 6px;
font-size: clamp(1.05rem, 0.45vw + 0.95rem, 1.45rem);
line-height: 1.35;
}
.category-news-list__meta {
margin: 0;
color: var(--clr-text-muted);
font-size: 0.88rem;
}
.category-news-list-block .page-numbers {
list-style: none;
padding: 0;
margin: var(--space-md) 0 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.category-news-list-block .page-numbers a,
.category-news-list-block .page-numbers span {
min-width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--clr-border);
border-radius: 6px;
color: var(--clr-text-muted);
text-decoration: none;
padding: 0 10px;
}
.category-news-list-block .page-numbers .current,
.category-news-list-block .page-numbers a:hover {
border-color: var(--clr-primary);
color: var(--clr-text);
}
.category-archive-description {
border-top: 1px solid var(--clr-border);
padding-top: var(--space-lg);
}
.category-archive-description__title {
margin: 0 0 var(--space-sm);
font-size: clamp(1.15rem, 0.8vw + 0.95rem, 1.45rem);
}
.category-archive-description__content > :first-child {
margin-top: 0;
}
.category-archive-description__content > :last-child {
margin-bottom: 0;
}
@media (min-width: 960px) {
.inner-page-layout {
grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
align-items: start;
}
.inner-page-sidebar {
position: sticky;
top: 90px;
}
.category-featured-news__card {
grid-template-columns: minmax(300px, 46%) minmax(0, 1fr);
align-items: center;
}
.category-news-list__link {
grid-template-columns: minmax(220px, 35%) minmax(0, 1fr);
align-items: center;
}
}
/* -------------------------------------------------------
RESPONSIVE — Match Hero on mobile
------------------------------------------------------- */
@media (max-width: 480px) {
.mh-teams-row { gap: var(--space-sm); }
.mh-team__logo { width: 52px; height: 52px; }
.mh-team__name { font-size: 0.9rem; }
.mh-team__score { font-size: 0.92rem; }
.mh-vs { width: 36px; height: 36px; font-size: 0.75rem; }
.mh-datetime__date { font-size: 0.85rem; }
.mh-datetime__time { font-size: 1.1rem; }
}
@media (min-width: 768px) {
.mh-team__logo { width: 80px; height: 80px; }
.mh-team__abbr { font-size: 1.2rem; }
.mh-team__name { font-size: 1.3rem; }
.mh-team__score { font-size: 1.3rem; }
.mh-vs { width: 52px; height: 52px; font-size: 1rem; }
.mh-datetime__time { font-size: 1.8rem; }
}