/* ==========================================================================
Professional Base Reset & Variables
========================================================================== */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
/* Colors */
--primary-color: #085FFF;
--secondary-color: #CDFB0A;
--text-color: #2d3748;
--text-light: #4a5568;
--text-lighter: #718096;
--bg-color: #ffffff;
--bg-alt: #f7fafc;
--bg-dark: #2d3748;
--card-bg: #ffffff;
--border-color: #e2e8f0;
--border-light: #edf2f7;
/* Accent colors */
--accent-red: #fc5c65;
--accent-blue: #45aaf2;
--accent-green: #26de81;
--accent-yellow: #fed330;
/* Semantic colors (theme-aware) */
--color-success: #22c55e;
--color-danger: #ef4444;
--color-warning: #f59e0b;
--color-neutral: #6b7280;
--color-info: #3b82f6;
/* Badge backgrounds (semi-transparent, works on any theme) */
--badge-success-bg: rgba(34, 197, 94, 0.15);
--badge-success-text: #22c55e;
--badge-danger-bg: rgba(239, 68, 68, 0.15);
--badge-danger-text: #ef4444;
--badge-warning-bg: rgba(245, 158, 11, 0.15);
--badge-warning-text: #f59e0b;
--badge-info-bg: rgba(59, 130, 246, 0.15);
--badge-info-text: #3b82f6;
--badge-neutral-bg: rgba(107, 114, 128, 0.15);
--badge-neutral-text: var(--text-light);
--badge-pink-bg: rgba(236, 72, 153, 0.15);
--badge-pink-text: #ec4899;
/* Table header text (always white since bg is primary/dark color) */
--thead-text: #ffffff;
/* Rivalry colors */
--rivalry-home: #EF4444;
--rivalry-away: #3b82f6;
--rivalry-draw: var(--color-neutral);
--rivalry-bg: var(--bg-dark);
--rivalry-bg-alt: var(--card-bg);
/* Typography */
--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-headings: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-size-base: 16px;
/* Spacing */
--spacing-xs: 0.25rem;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 1.5rem;
--spacing-xl: 2rem;
--spacing-2xl: 3rem;
--spacing-3xl: 4rem;
/* Border Radius */
--border-radius: 16px;
--border-radius-sm: calc(16px * 0.5);
--border-radius-lg: calc(16px * 1.5);
--border-radius-xl: calc(16px * 2);
/* Shadows - Professional depth */
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-sm: 0 2px 4px 0 rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
/* Transitions */
--transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
--transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
/* ==========================================================================
Base Styles
========================================================================== */
html {
font-size: var(--font-size-base);
scroll-behavior: smooth;
}
body {
font-family: var(--font-body);
line-height: 1.7;
color: var(--text-color);
background-color: var(--bg-alt);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* ==========================================================================
Typography - Professional Hierarchy
========================================================================== */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-headings);
font-weight: 700;
line-height: 1.2;
margin-bottom: 0.75em;
color: var(--text-color);
}
h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -0.03em; }
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -0.02em; }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -0.01em; }
h4 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h5 { font-size: clamp(1.1rem, 2vw, 1.5rem); }
p {
margin-bottom: var(--spacing-lg);
line-height: 1.8;
}
a {
color: var(--primary-color);
text-decoration: none;
transition: all var(--transition-fast);
position: relative;
}
a:hover {
color: var(--secondary-color);
}
/* ==========================================================================
Layout Components
========================================================================== */
.container {
width: 100%;
max-width: 1280px;
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-md);
}
}
/* ==========================================================================
Professional Header with Dark Background
========================================================================== */
.site-header {
background: var(--bg-dark);
color: white;
box-shadow: var(--shadow-md);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
}
.header-top {
padding: var(--spacing-md) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-lg);
}
.site-logo {
height: 48px;
width: auto;
transition: transform var(--transition-normal);
}
.site-logo:hover {
transform: scale(1.05);
}
.site-title {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.site-title h1 {
margin: 0;
font-size: clamp(1.5rem, 3vw, 2rem);
color: white;
font-weight: 800;
letter-spacing: -0.02em;
}
.site-title h1 a {
color: white;
}
.site-tagline {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
margin-top: var(--spacing-xs);
}
/* ==========================================================================
Professional Navigation
========================================================================== */
.main-nav {
background: rgba(45, 55, 72, 0.95);
backdrop-filter: blur(10px);
}
.nav-list {
display: flex;
gap: var(--spacing-sm);
list-style: none;
flex-wrap: wrap;
padding: var(--spacing-sm) 0;
}
.nav-list a {
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
font-size: 0.95rem;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius-sm);
transition: all var(--transition-fast);
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 0.85rem;
}
.nav-list a:hover {
background: var(--primary-color);
color: white;
transform: translateY(-1px);
}
.nav-list a[aria-current="page"] {
background: var(--primary-color);
color: white;
}
/* ==========================================================================
Hero Section with Gradient
========================================================================== */
.hero-section {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: var(--spacing-md) var(--spacing-lg);
margin-bottom: var(--spacing-xl);
border-radius: var(--border-radius-lg);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 1;
max-width: 800px;
}
.hero-section h1 {
color: white;
margin-bottom: var(--spacing-xs);
font-size: clamp(1.25rem, 3vw, 1.75rem);
}
.hero-section p {
color: rgba(255, 255, 255, 0.95);
font-size: 1rem;
line-height: 1.6;
}
/* Compact hero variant - combined with section header */
.hero-section.hero-compact {
padding: var(--spacing-md) var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.hero-section.hero-compact h1 {
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
margin-bottom: 4px;
position: relative;
z-index: 1;
}
.hero-section.hero-compact p {
font-size: 0.9rem;
opacity: 0.9;
position: relative;
z-index: 1;
}
/* ==========================================================================
Main Content Area
========================================================================== */
.main-content {
padding: var(--spacing-lg) 0 var(--spacing-2xl) 0;
min-height: 60vh;
}
/* ==========================================================================
Professional Card Grid with Images
========================================================================== */
.section-header {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-md) 0;
}
.section-header h2 {
font-size: clamp(1.25rem, 3vw, 1.75rem);
margin-bottom: var(--spacing-xs);
color: var(--text-color);
}
.section-header p {
color: var(--text-light);
font-size: 0.95rem;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-xl);
margin-bottom: var(--spacing-2xl);
}
@media (max-width: 640px) {
.card-grid {
grid-template-columns: 1fr;
}
}
/* Professional Card Design */
.card {
background: var(--card-bg);
color: var(--text-color);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: all var(--transition-normal);
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-2xl);
}
/* Card Image Container */
.card-image {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.card:hover .card-image img {
transform: scale(1.1);
}
/* Placeholder gradient for cards without images */
.card-image.placeholder {
background: linear-gradient(135deg,
var(--primary-color) 0%,
var(--secondary-color) 50%,
var(--primary-color) 100%);
background-size: 200% 200%;
animation: gradientShift 10s ease infinite;
display: flex;
align-items: center;
justify-content: center;
font-size: 3rem;
color: rgba(255, 255, 255, 0.3);
font-weight: 900;
}
@keyframes gradientShift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/* Date Badge - Professional Style */
.date-badge {
position: absolute;
top: var(--spacing-md);
left: var(--spacing-md);
background: var(--accent-red);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--border-radius);
box-shadow: var(--shadow-lg);
font-weight: 700;
font-size: 0.85rem;
text-align: center;
line-height: 1.2;
z-index: 10;
min-width: 60px;
}
.date-badge .day {
display: block;
font-size: 1.5rem;
line-height: 1;
margin-bottom: 2px;
}
.date-badge .month {
display: block;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Card Content */
.card-content {
padding: var(--spacing-lg);
flex: 1;
display: flex;
flex-direction: column;
}
.card-category {
color: var(--primary-color);
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--spacing-sm);
}
.card-title {
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
line-height: 1.4;
flex: 1;
}
.card-title a {
color: var(--text-color);
transition: color var(--transition-fast);
}
.card-title a:hover {
color: var(--primary-color);
}
.card-excerpt {
color: var(--text-light);
font-size: 0.95rem;
line-height: 1.7;
margin-bottom: var(--spacing-lg);
}
.card-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-light);
margin-top: auto;
}
.card-date {
color: var(--text-lighter);
font-size: 0.85rem;
font-weight: 500;
}
/* Share Button */
.share-button {
width: 38px;
height: 38px;
border-radius: 50%;
background: var(--bg-alt);
border: none;
cursor: pointer;
transition: all var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
font-size: 1.1rem;
}
.share-button:hover {
background: var(--primary-color);
color: white;
transform: rotate(15deg) scale(1.1);
}
/* ==========================================================================
Article Content
========================================================================== */
.article {
background: var(--bg-card, var(--card-bg, white));
border-radius: var(--border-radius-lg);
padding: var(--spacing-2xl);
box-shadow: var(--shadow-md);
max-width: 900px;
margin: 0 auto;
}
.article-header {
margin-bottom: var(--spacing-2xl);
padding-bottom: var(--spacing-xl);
border-bottom: 2px solid var(--border-light);
}
.article-header h1 {
color: var(--article-title-color, var(--text-color, var(--bg-dark)));
}
/* Standings Header with League Logo */
.standings-header .standings-header-content {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
.standings-header-logo {
width: 64px;
height: 64px;
object-fit: contain;
flex-shrink: 0;
}
.standings-header-text {
flex: 1;
}
.standings-header-text h1 {
margin-bottom: var(--spacing-xs);
}
@media (max-width: 480px) {
.standings-header .standings-header-content {
flex-direction: column;
text-align: center;
}
.standings-header-logo {
width: 48px;
height: 48px;
}
}
.article-meta {
display: flex;
gap: var(--spacing-lg);
flex-wrap: wrap;
color: var(--text-light);
font-size: 0.9rem;
margin-top: var(--spacing-md);
font-weight: 500;
}
.article-content {
font-size: 1.1rem;
line-height: 1.9;
color: var(--text-color);
}
.article-content h2 {
margin-top: var(--spacing-3xl);
padding-top: var(--spacing-lg);
color: var(--text-color);
}
.article-content h3 {
margin-top: var(--spacing-2xl);
}
.article-content ul,
.article-content ol {
margin: var(--spacing-lg) 0;
padding-left: var(--spacing-xl);
}
.article-content li {
margin-bottom: var(--spacing-sm);
line-height: 1.8;
}
.article-content table {
width: 100%;
border-collapse: collapse;
margin: var(--spacing-xl) 0;
box-shadow: var(--shadow-sm);
border-radius: var(--border-radius);
overflow: hidden;
}
.article-content th,
.article-content td {
padding: var(--spacing-md) var(--spacing-lg);
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.article-content th {
background: var(--bg-dark);
color: white;
font-weight: 700;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
.article-content tr:hover td {
background: var(--bg-alt);
}
/* ==========================================================================
Footer - Professional Dark Theme
========================================================================== */
.site-footer {
background: var(--bg-dark);
color: rgba(255, 255, 255, 0.8);
padding: var(--spacing-3xl) 0 var(--spacing-xl);
margin-top: var(--spacing-3xl);
}
.footer-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-2xl);
margin-bottom: var(--spacing-xl);
}
.footer-section h4 {
color: white;
margin-bottom: var(--spacing-md);
font-size: 1.1rem;
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.footer-links a {
color: rgba(255, 255, 255, 0.7);
transition: color var(--transition-fast);
font-size: 0.95rem;
}
.footer-links a:hover {
color: white;
padding-left: var(--spacing-xs);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: var(--spacing-lg);
text-align: center;
color: rgba(255, 255, 255, 0.6);
font-size: 0.9rem;
}
/* ==========================================================================
Utility Classes
========================================================================== */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.text-center { text-align: center; }
.mt-1 { margin-top: var(--spacing-md); }
.mt-2 { margin-top: var(--spacing-xl); }
.mt-3 { margin-top: var(--spacing-2xl); }
/* ==========================================================================
Responsive Design
========================================================================== */
@media (max-width: 768px) {
.header-content {
flex-direction: column;
text-align: center;
}
.nav-list {
justify-content: center;
}
.card-grid {
gap: var(--spacing-lg);
}
.article {
padding: var(--spacing-lg);
}
}
/* ==========================================================================
Print Styles
========================================================================== */
@media print {
.site-header, .main-nav, .site-footer, .share-button {
display: none;
}
body {
font-size: 12pt;
color: #000;
background: #fff;
}
a {
color: #000;
text-decoration: underline;
}
}
/* Cards Template - Tighter Grid */
.layout-cards .main-content {
background: var(--bg-alt);
}
.layout-cards .card-grid {
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--spacing-md);
}
.layout-cards .card-content {
padding: var(--spacing-md);
}
.layout-cards .card-content h3 {
font-size: 1rem;
}
/* Card Style: Elevated */
.card-style-elevated .card {
box-shadow: var(--shadow-lg);
border: none;
}
.card-style-elevated .card:hover {
box-shadow: var(--shadow-2xl);
transform: translateY(-12px);
}
/* Popular Teams - Centered Horizontal Row */
.popular-teams {
margin-top: var(--spacing-2xl);
padding-top: var(--spacing-xl);
border-top: 1px solid var(--border-light);
}
.popular-teams-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.popular-team-item {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
padding: 6px;
border-radius: var(--border-radius);
transition: all var(--transition-normal);
opacity: 0.8;
}
.popular-team-item:hover {
opacity: 1;
transform: scale(1.15);
background: var(--bg-alt);
}
.popular-team-logo {
width: 36px;
height: 36px;
object-fit: contain;
}
/* ==================== Standings Table Styles ==================== */
.standings-wrapper {
overflow-x: auto;
margin: 1.5rem 0;
}
.standings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
background: var(--card-bg);
color: var(--text-color);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.standings-table thead {
background: {{primary_color}};
color: var(--thead-text);
}
.standings-table th {
padding: 12px 8px;
text-align: center;
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.standings-table th.standings-team {
text-align: left;
padding-left: 12px;
}
.standings-table td {
padding: 10px 8px;
text-align: center;
border-bottom: 1px solid var(--border-light);
}
.standings-table td.standings-team {
text-align: left;
padding-left: 12px;
font-weight: 500;
}
.standings-table td.standings-pos {
font-weight: 700;
color: {{primary_color}};
width: 40px;
}
.standings-table td.standings-logo {
width: 36px;
padding: 6px;
}
.standings-table td.standings-logo img {
display: block;
margin: 0 auto;
object-fit: contain;
}
.standings-table td.standings-pts {
background: var(--bg-alt);
}
.standings-table .standings-gd.positive {
color: var(--color-success);
}
.standings-table .standings-gd.negative {
color: var(--color-danger);
}
.standings-table .standings-gd.neutral {
color: var(--color-neutral);
}
/* Position highlighting */
.standings-row.standings-champions {
background: rgba(255, 215, 0, 0.15);
}
.standings-row.standings-cl {
background: rgba(0, 123, 255, 0.1);
}
.standings-row.standings-europa {
background: rgba(255, 140, 0, 0.1);
}
.standings-row.standings-conference {
background: rgba(0, 200, 83, 0.1);
}
.standings-row.standings-relegation {
background: rgba(220, 53, 69, 0.1);
}
.standings-table tbody tr:hover {
background: rgba(128, 128, 128, 0.1);
}
.standings-empty {
text-align: center;
padding: 2rem;
color: var(--text-light);
font-style: italic;
}
.standings-updated {
text-align: right;
color: var(--text-light);
margin-bottom: 0.5rem;
}
/* Responsive */
@media (max-width: 768px) {
.standings-table {
font-size: 0.8rem;
}
.standings-table th,
.standings-table td {
padding: 8px 4px;
}
.standings-table th.standings-team,
.standings-table td.standings-team {
padding-left: 8px;
}
}
/* ==================== Team Grid Styles (UEFA-style) ==================== */
.card-grid:has(.team-card) {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: var(--spacing-lg);
}
.team-card {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--spacing-xl) var(--spacing-lg);
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
transition: all var(--transition-normal);
text-decoration: none;
color: var(--text-color);
}
.team-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-xl);
color: var(--primary-color);
}
.team-logo {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--spacing-md);
}
.team-logo img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform var(--transition-normal);
}
.team-card:hover .team-logo img {
transform: scale(1.1);
}
.team-initial {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: 700;
font-family: var(--font-headings);
}
.team-name {
font-size: 0.95rem;
font-weight: 600;
text-align: center;
line-height: 1.3;
}
@media (max-width: 640px) {
.card-grid:has(.team-card) {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--spacing-md);
}
.team-card {
padding: var(--spacing-lg) var(--spacing-md);
}
.team-logo {
width: 60px;
height: 60px;
}
.team-initial {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.team-name {
font-size: 0.85rem;
}
}
/* ==================== Enhanced Team Page Styles ==================== */
/* Phase 5: Multi-section team page layout */
/* Team Page Header */
.team-page .team-header {
background: var(--bg-dark);
padding: var(--spacing-3xl) 0;
color: white;
margin-bottom: var(--spacing-2xl);
}
.team-header-content {
display: flex;
align-items: center;
gap: var(--spacing-xl);
}
.team-logo-large {
width: 120px;
height: 120px;
object-fit: contain;
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-md);
box-shadow: var(--shadow-lg);
}
.team-logo-placeholder {
width: 120px;
height: 120px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: var(--border-radius-lg);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 3rem;
font-weight: 800;
font-family: var(--font-headings);
box-shadow: var(--shadow-lg);
}
.team-header-info h1 {
color: white;
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: var(--spacing-sm);
}
.league-badge {
display: inline-block;
background: var(--primary-color);
color: white;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius);
font-size: 0.9rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Stats + Overview Section (2-column) */
.stats-overview-section {
margin-bottom: var(--spacing-2xl);
}
.stats-overview-layout {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--spacing-2xl);
}
@media (max-width: 968px) {
.stats-overview-layout {
grid-template-columns: 1fr;
}
}
.key-stats {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
}
.key-stats h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.stat-item {
text-align: center;
padding: var(--spacing-md);
background: var(--bg-alt);
border-radius: var(--border-radius);
}
.stat-value {
display: block;
font-size: 1.75rem;
font-weight: 800;
color: var(--primary-color);
font-family: var(--font-headings);
}
.stat-label {
display: block;
font-size: 0.8rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: var(--spacing-xs);
}
/* Form Bar (W/D/L visualization) */
.form-bar {
display: flex;
height: 8px;
border-radius: 4px;
overflow: hidden;
margin-bottom: var(--spacing-sm);
}
.form-segment {
transition: width var(--transition-normal);
}
.form-segment.win {
background: var(--accent-green);
}
.form-segment.draw {
background: var(--text-lighter);
}
.form-segment.loss {
background: var(--accent-red);
}
.form-bar-legend {
display: flex;
gap: var(--spacing-md);
justify-content: center;
font-size: 0.8rem;
color: var(--text-light);
}
.legend-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.legend-item .dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.legend-item .dot.win { background: var(--accent-green); }
.legend-item .dot.draw { background: var(--text-lighter); }
.legend-item .dot.loss { background: var(--accent-red); }
/* Circular Form Chart */
.form-chart-container {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-md);
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background: var(--bg-alt);
border-radius: var(--border-radius);
}
.form-donut {
position: relative;
width: 200px;
height: 200px;
flex-shrink: 0;
}
.form-donut-svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.form-donut-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 1;
}
.form-donut-value {
display: block;
font-size: 2.25rem;
font-weight: 800;
color: var(--primary-color);
font-family: var(--font-headings);
line-height: 1;
}
.form-donut-label {
display: block;
font-size: 0.7rem;
color: var(--text-light);
text-transform: uppercase;
line-height: 1.3;
margin-top: 4px;
}
.form-chart-legend {
display: flex;
flex-direction: row;
justify-content: center;
gap: var(--spacing-lg);
font-size: 0.85rem;
color: var(--text-light);
}
/* Team Overview Column */
.team-overview {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
}
.team-overview h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.overview-content {
font-size: 1.05rem;
line-height: 1.8;
color: var(--text-color);
}
.overview-content p {
margin-bottom: var(--spacing-lg);
}
.overview-content p:last-child {
margin-bottom: 0;
}
/* Squad Section */
.squad-section {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-2xl);
}
.squad-section h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.position-group {
margin-bottom: var(--spacing-xl);
}
.position-group:last-child {
margin-bottom: 0;
}
.position-group h3 {
font-size: 1rem;
color: var(--text-light);
margin-bottom: var(--spacing-md);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.players-scroll {
display: flex;
gap: var(--spacing-md);
overflow-x: auto;
padding-bottom: var(--spacing-sm);
scrollbar-width: thin;
scrollbar-color: var(--primary-color) var(--bg-alt);
}
.players-scroll::-webkit-scrollbar {
height: 6px;
}
.players-scroll::-webkit-scrollbar-track {
background: var(--bg-alt);
border-radius: 3px;
}
.players-scroll::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 3px;
}
.player-card {
flex-shrink: 0;
width: 100px;
text-align: center;
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-md);
transition: all var(--transition-fast);
}
.player-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-md);
}
.player-photo {
width: 64px;
height: 64px;
margin: 0 auto var(--spacing-sm);
border-radius: 50%;
overflow: hidden;
background: var(--card-bg);
box-shadow: var(--shadow-sm);
}
.player-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.player-initial {
width: 64px;
height: 64px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
font-weight: 700;
margin: 0 auto;
}
.player-number {
display: block;
font-size: 0.75rem;
color: var(--primary-color);
font-weight: 700;
margin-bottom: var(--spacing-xs);
}
.player-name {
display: block;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-color);
line-height: 1.2;
}
/* Player Statistics Section */
.player-stats-section {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-2xl);
overflow: hidden;
}
.player-stats-section .section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 1px solid var(--border-light);
}
.player-stats-section .section-title-row h2 {
font-size: 1.25rem;
margin: 0;
}
.player-stats-section .season-label {
font-size: 0.8rem;
color: var(--text-light);
}
.ps-tabs {
display: flex;
gap: 0.25rem;
padding: 0 var(--spacing-xl);
overflow-x: auto;
}
.ps-tab {
padding: 0.75rem 1rem;
font-size: 0.8rem;
font-weight: 600;
color: var(--text-light);
background: none;
border: none;
cursor: pointer;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: all 0.2s;
font-family: inherit;
}
.ps-tab.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}
.ps-tab:hover {
color: var(--text-color);
}
.ps-table-scroll {
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.ps-table-scroll::-webkit-scrollbar {
display: none;
}
.ps-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.ps-table thead th {
text-align: left;
padding: 0.75rem 0.5rem;
font-size: 0.78rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-light);
border-bottom: 2px solid var(--border-color);
white-space: nowrap;
}
.ps-table thead th.stat-col {
text-align: center;
}
.ps-table thead th.sortable {
cursor: pointer;
user-select: none;
}
.ps-table thead th.sortable:hover {
color: var(--text-color);
}
.ps-table thead th.sortable::after {
content: ' \2195';
font-size: 0.65rem;
opacity: 0.3;
}
.ps-table thead th.sort-asc::after {
content: ' \2191';
opacity: 1;
}
.ps-table thead th.sort-desc::after {
content: ' \2193';
opacity: 1;
}
.ps-table thead th.active-sort {
color: var(--primary-color);
}
.ps-table tbody tr {
border-bottom: 1px solid var(--border-light);
}
.ps-table tbody tr:nth-child(even) {
background: var(--bg-alt);
}
.ps-table tbody tr:hover {
background: rgba(128, 128, 128, 0.08);
}
.ps-table tbody td {
padding: 0.65rem 0.5rem;
color: var(--text-color);
}
.ps-table tbody td.stat-col {
text-align: center;
font-variant-numeric: tabular-nums;
}
.ps-table tbody td.stat-col.highlight {
font-weight: 700;
color: var(--primary-color);
}
.ps-player-info {
display: flex;
align-items: center;
gap: 0.5rem;
}
.ps-player-photo {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--border-light);
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 700;
color: var(--text-light);
overflow: hidden;
}
.ps-player-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.ps-player-name {
font-weight: 500;
white-space: nowrap;
}
.player-pos-badge {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 600;
text-transform: uppercase;
}
.pos-gk { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.pos-def { background: var(--badge-info-bg); color: var(--badge-info-text); }
.pos-mid { background: var(--badge-success-bg); color: var(--badge-success-text); }
.pos-fwd { background: var(--badge-pink-bg); color: var(--badge-pink-text); }
.rating-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 1.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 700;
color: white;
}
.rating-high { background: var(--color-success); }
.rating-mid { background: var(--color-warning); }
.rating-low { background: var(--color-neutral); }
.ps-table-footer {
padding: 0.75rem var(--spacing-xl);
border-top: 1px solid var(--border-light);
font-size: 0.78rem;
color: var(--text-light);
text-align: right;
}
@media (max-width: 768px) {
.ps-tabs {
padding: 0 var(--spacing-md);
}
.ps-table thead th,
.ps-table tbody td {
padding: 0.5rem 0.35rem;
font-size: 0.78rem;
}
.ps-player-photo {
display: none;
}
}
/* Transfers Section */
.transfers-section {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-2xl);
overflow: hidden;
}
.transfers-section .section-title-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-lg) var(--spacing-xl);
border-bottom: 1px solid var(--border-light);
}
.transfers-section .section-title-row h2 {
font-size: 1.25rem;
margin: 0;
}
.transfers-body {
padding: var(--spacing-xl);
}
.transfers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.transfers-column h3 {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-light);
margin-bottom: var(--spacing-sm);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.transfer-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: 0.65rem 0;
border-bottom: 1px solid var(--border-light);
}
.transfer-item:last-child {
border-bottom: none;
}
.transfers-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin-top: var(--spacing-md);
}
.transfers-nav-btn {
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
border-radius: 50%;
border: 1px solid var(--border-light);
background: var(--card-bg);
color: var(--text-color);
font-size: 1.2rem;
cursor: pointer;
transition: background 0.2s;
font-family: inherit;
line-height: 1;
}
.transfers-nav-btn:hover:not(:disabled) {
background: var(--bg-alt);
}
.transfers-nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.transfers-dots {
display: flex;
align-items: center;
gap: 0.375rem;
}
.transfers-dot {
height: 0.5rem;
width: 0.5rem;
border-radius: 9999px;
background: var(--border-light);
border: none;
padding: 0;
cursor: pointer;
transition: all 0.3s ease;
}
.transfers-dot:hover {
background: var(--text-lighter);
}
.transfers-dot.active {
width: 1.5rem;
background: var(--primary-color);
}
.transfers-page-info {
text-align: center;
font-size: 0.7rem;
color: var(--text-lighter);
margin-top: 0.5rem;
}
.transfer-team-logo {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--bg-alt);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 700;
color: var(--text-lighter);
flex-shrink: 0;
overflow: hidden;
}
.transfer-team-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.transfer-details {
flex: 1;
min-width: 0;
}
.transfer-player-name {
font-weight: 600;
font-size: 0.875rem;
}
.transfer-team-name {
font-size: 0.75rem;
color: var(--text-light);
}
.transfer-meta {
display: flex;
align-items: center;
gap: var(--spacing-xs);
flex-shrink: 0;
}
.transfer-fee {
display: inline-block;
padding: 0.15rem 0.5rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
}
.fee-free { background: var(--badge-success-bg); color: var(--badge-success-text); }
.fee-loan { background: var(--badge-info-bg); color: var(--badge-info-text); }
.fee-paid { background: var(--badge-warning-bg); color: var(--badge-warning-text); }
.transfer-date {
font-size: 0.7rem;
color: var(--text-lighter);
white-space: nowrap;
}
@media (max-width: 768px) {
.transfers-grid {
grid-template-columns: 1fr;
}
}
/* Venue Directory Page */
.venue-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-lg);
}
a.venue-card {
display: block;
text-decoration: none;
color: inherit;
}
.venue-card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
transition: transform 0.2s, box-shadow 0.2s;
}
.venue-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.venue-image {
width: 100%;
height: 160px;
background: var(--bg-alt);
overflow: hidden;
}
.venue-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.venue-info {
padding: var(--spacing-md);
}
.venue-team-row {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.venue-team-logo {
width: 24px;
height: 24px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: var(--bg-alt);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.6rem;
font-weight: 700;
}
.venue-team-logo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.venue-team-name {
font-size: 0.8rem;
color: var(--text-light);
font-weight: 500;
}
.venue-name {
font-size: 1rem;
font-weight: 700;
margin: 0 0 0.25rem 0;
}
.venue-city {
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: var(--spacing-sm);
}
.venue-capacity-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.75rem;
margin-bottom: 0.25rem;
}
.venue-capacity-label {
color: var(--text-light);
}
.venue-capacity-value {
font-weight: 700;
color: var(--text-color);
}
.venue-capacity-bar {
height: 4px;
background: var(--border-light);
border-radius: 2px;
overflow: hidden;
margin-bottom: var(--spacing-sm);
}
.venue-capacity-fill {
height: 100%;
background: var(--primary-color);
border-radius: 2px;
transition: width 0.3s;
}
.venue-surface {
display: inline-block;
padding: 0.1rem 0.5rem;
border-radius: 9999px;
font-size: 0.65rem;
font-weight: 600;
background: var(--badge-success-bg);
color: var(--badge-success-text);
text-transform: capitalize;
}
@media (max-width: 640px) {
.venue-grid {
grid-template-columns: 1fr;
}
}
/* Injuries Section (2-column) */
.injuries-section {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-2xl);
}
.injuries-section h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.injury-summary {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.injury-count {
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius);
font-size: 0.85rem;
font-weight: 600;
}
.injury-count.out {
background: rgba(239, 68, 68, 0.1);
color: var(--accent-red);
}
.injury-count.out::before {
content: '';
width: 8px;
height: 8px;
background: var(--accent-red);
border-radius: 50%;
}
.injury-count.doubtful {
background: rgba(245, 158, 11, 0.1);
color: var(--color-warning);
}
.injury-count.doubtful::before {
content: '';
width: 8px;
height: 8px;
background: var(--color-warning);
border-radius: 50%;
}
.injuries-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
@media (max-width: 768px) {
.injuries-layout {
grid-template-columns: 1fr;
}
}
.injury-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.injury-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--bg-alt);
border-radius: var(--border-radius);
border-left: 4px solid var(--accent-red);
}
.injury-item.questionable {
border-left-color: var(--color-warning);
}
.injury-player-photo {
width: 40px;
height: 40px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
}
.injury-player-photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
.injury-player-initial {
width: 40px;
height: 40px;
background: var(--text-lighter);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 600;
}
.injury-details {
flex: 1;
}
.injury-player-name {
display: block;
font-weight: 600;
font-size: 0.9rem;
color: var(--text-color);
}
.injury-reason {
display: block;
font-size: 0.8rem;
color: var(--text-light);
}
.injury-status {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--border-radius-sm);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
background: var(--accent-red);
color: white;
}
.injury-status.questionable {
background: var(--color-warning);
}
/* Injury List Pagination */
.injury-list-container {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.injury-item.hidden {
display: none;
}
.injury-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) 0;
flex-wrap: wrap;
}
.injury-pagination .page-nav {
width: 32px;
height: 32px;
border: 1px solid var(--border-color);
background: var(--bg-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
}
.injury-pagination .page-nav:hover:not(:disabled) {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.injury-pagination .page-nav:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.injury-pagination .page-numbers {
display: flex;
gap: var(--spacing-xs);
}
.injury-pagination .page-btn {
min-width: 32px;
height: 32px;
border: 1px solid var(--border-color);
background: var(--bg-color);
border-radius: var(--border-radius-sm);
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all var(--transition-fast);
}
.injury-pagination .page-btn:hover {
border-color: var(--primary-color);
color: var(--primary-color);
}
.injury-pagination .page-btn.active {
background: var(--primary-color);
color: white;
border-color: var(--primary-color);
}
.injury-pagination .page-info {
font-size: 0.8rem;
color: var(--text-light);
margin-left: var(--spacing-sm);
}
.injury-analysis h3 {
font-size: 1rem;
margin-bottom: var(--spacing-md);
color: var(--text-color);
}
.no-injuries {
text-align: center;
padding: var(--spacing-xl);
color: var(--accent-green);
font-weight: 500;
background: rgba(34, 197, 94, 0.1);
border-radius: var(--border-radius);
}
/* Form Section (2-column) */
.form-section {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-2xl);
}
.form-section h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.form-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
@media (max-width: 768px) {
.form-layout {
grid-template-columns: 1fr;
}
}
.form-badges {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.form-result {
width: 32px;
height: 32px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.9rem;
}
.form-result.W { background: var(--accent-green); }
.form-result.D { background: var(--text-lighter); }
.form-result.L { background: var(--accent-red); }
.form-result.N\/A { background: var(--text-lighter); font-size: 0.6rem; }
.results-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.result-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-alt);
border-radius: var(--border-radius);
}
.result-item .form-result {
width: 28px;
height: 28px;
font-size: 0.8rem;
flex-shrink: 0;
}
.opponent-logo {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.opponent-logo img {
width: 100%;
height: 100%;
object-fit: contain;
}
.opponent-initial {
width: 28px;
height: 28px;
background: var(--text-lighter);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.8rem;
font-weight: 600;
}
.opponent-name {
flex: 1;
font-weight: 500;
font-size: 0.9rem;
color: var(--text-color);
}
.result-score {
font-weight: 700;
font-size: 0.9rem;
color: var(--text-color);
}
.result-venue {
font-size: 0.8rem;
color: var(--text-light);
}
.form-analysis h3 {
font-size: 1rem;
margin-bottom: var(--spacing-md);
color: var(--text-color);
}
.analysis-content {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-color);
}
.analysis-content p {
margin-bottom: var(--spacing-md);
}
.analysis-content p:last-child {
margin-bottom: 0;
}
/* News Section */
.news-section {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-xl);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-2xl);
}
.news-section h2 {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--border-light);
}
.news-list {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.news-item {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--bg-alt);
border-radius: var(--border-radius);
text-decoration: none;
color: inherit;
transition: all var(--transition-fast);
border: 1px solid transparent;
}
.news-item:hover {
background: var(--bg-color);
border-color: var(--primary-color);
transform: translateX(4px);
}
.news-image {
width: 80px;
height: 60px;
border-radius: var(--border-radius-sm);
overflow: hidden;
flex-shrink: 0;
background: var(--text-lighter);
}
.news-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
}
.news-content {
flex: 1;
min-width: 0;
}
.news-title {
font-size: 0.95rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 var(--spacing-xs) 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-tagline {
font-size: 0.8rem;
color: var(--text-light);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-external-icon {
color: var(--text-lighter);
font-size: 1.2rem;
align-self: center;
}
.news-item:hover .news-external-icon {
color: var(--primary-color);
}
.no-data {
text-align: center;
padding: var(--spacing-xl);
color: var(--text-light);
font-style: italic;
}
/* Page Header for directory indexes - matches hero style */
.page-header {
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
color: white;
padding: var(--spacing-md) var(--spacing-lg);
margin-bottom: var(--spacing-lg);
border-radius: var(--border-radius-lg);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: url('data:image/svg+xml,') no-repeat bottom;
background-size: cover;
opacity: 0.3;
}
.page-header h1 {
margin-bottom: var(--spacing-xs);
color: white;
font-size: clamp(1.1rem, 2.5vw, 1.5rem);
position: relative;
z-index: 1;
}
.page-header p {
color: rgba(255, 255, 255, 0.9);
font-size: 0.9rem;
margin: 0;
position: relative;
z-index: 1;
}
/* Responsive adjustments for team page header */
@media (max-width: 640px) {
.team-header-content {
flex-direction: column;
text-align: center;
}
.team-logo-large,
.team-logo-placeholder {
width: 100px;
height: 100px;
}
.team-logo-placeholder {
font-size: 2.5rem;
}
.team-header-info h1 {
font-size: 1.75rem;
}
}
/* ==========================================================================
Match Preview Carousel (Home Page)
========================================================================== */
.match-previews-section {
margin-bottom: var(--spacing-2xl);
}
.carousel-container {
position: relative;
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.carousel-track {
display: flex;
gap: var(--spacing-lg);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
padding: var(--spacing-sm) 0;
}
.carousel-track::-webkit-scrollbar {
display: none;
}
.carousel-arrow {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--card-bg);
border: 2px solid var(--border-light);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-color);
transition: all var(--transition-fast);
box-shadow: var(--shadow-md);
z-index: 10;
}
.carousel-arrow:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
transform: scale(1.1);
}
.carousel-arrow svg {
width: 24px;
height: 24px;
}
/* Match Preview Card with Team Logos */
.match-preview-card {
flex: 0 0 calc(33.333% - var(--spacing-lg));
min-width: 300px;
max-width: 380px;
scroll-snap-align: start;
height: 450px; /* Fixed height for consistent card sizes */
}
.match-preview-card .card-title {
/* Limit title to 2 lines with ellipsis */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 0 0 auto; /* Don't grow or shrink */
min-height: 3.5rem; /* Space for 2 lines */
margin-bottom: var(--spacing-sm);
}
.match-preview-card .card-content {
flex: 1;
display: flex;
flex-direction: column;
padding: var(--spacing-md) var(--spacing-lg) var(--spacing-lg);
}
.match-preview-card .card-category {
flex: 0 0 auto; /* Don't shrink */
margin-bottom: var(--spacing-xs);
}
.match-preview-card .card-excerpt {
/* Limit excerpt to 3 lines */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
flex: 1 1 auto; /* Take remaining space */
margin-bottom: var(--spacing-md);
font-size: 0.9rem;
}
.match-preview-card .card-meta {
flex: 0 0 auto; /* Don't shrink */
margin-top: auto;
}
.card-image-link {
display: block;
text-decoration: none;
}
.card-image.match-logos {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
background: var(--bg-dark);
height: 180px;
padding: var(--spacing-lg);
}
.match-team {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
}
.team-logo-wrapper {
width: 70px;
height: 70px;
background: var(--card-bg);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: var(--shadow-lg);
transition: transform var(--transition-normal);
}
.match-preview-card:hover .team-logo-wrapper {
transform: scale(1.08);
}
.team-logo-wrapper img {
width: 55px;
height: 55px;
object-fit: contain;
}
.team-logo-wrapper .team-initial {
width: 55px;
height: 55px;
font-size: 1.75rem;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
}
.match-vs {
font-size: 1.25rem;
font-weight: 800;
color: var(--primary-color);
background: var(--card-bg);
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius);
box-shadow: var(--shadow-md);
}
/* Responsive carousel */
@media (max-width: 1024px) {
.match-preview-card {
flex: 0 0 calc(50% - var(--spacing-md));
min-width: 280px;
height: 320px; /* Slightly smaller on tablets */
}
}
@media (max-width: 768px) {
.carousel-arrow {
display: none;
}
.match-preview-card {
flex: 0 0 85%;
min-width: 260px;
height: 300px; /* Compact on mobile */
}
.card-image.match-logos {
height: 150px;
padding: var(--spacing-md);
}
.team-logo-wrapper {
width: 55px;
height: 55px;
}
.team-logo-wrapper img {
width: 40px;
height: 40px;
}
.team-logo-wrapper .team-initial {
width: 40px;
height: 40px;
font-size: 1.25rem;
}
.match-vs {
font-size: 1rem;
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* ==========================================================================
League News Section (Home Page)
========================================================================== */
.league-news-section {
margin-top: var(--spacing-3xl);
margin-bottom: var(--spacing-2xl);
}
.news-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
@media (max-width: 900px) {
.news-layout {
grid-template-columns: 1fr;
}
}
/* Featured News Item (first/biggest) */
.featured-news-item {
display: flex;
flex-direction: column;
background: var(--card-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: all var(--transition-normal);
box-shadow: var(--shadow-md);
height: 100%;
}
.featured-news-item:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-2xl);
}
.featured-news-image {
width: 100%;
height: 220px;
background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
overflow: hidden;
}
.featured-news-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.featured-news-item:hover .featured-news-image img {
transform: scale(1.05);
}
.news-placeholder-icon {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: rgba(255, 255, 255, 0.4);
}
.featured-news-content {
padding: var(--spacing-lg);
display: flex;
flex-direction: column;
flex: 1;
}
.news-category {
color: var(--primary-color);
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--spacing-sm);
}
.featured-news-title {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
margin: 0 0 var(--spacing-sm) 0;
line-height: 1.4;
flex: 1;
}
.news-date {
font-size: 0.85rem;
color: var(--text-light);
}
/* News Grid (smaller items) */
.news-grid {
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.news-grid-item {
display: flex;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--card-bg);
border-radius: var(--border-radius);
text-decoration: none;
color: inherit;
transition: all var(--transition-fast);
box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light);
}
.news-grid-item:hover {
background: var(--bg-alt);
transform: translateX(4px);
border-color: var(--primary-color);
box-shadow: var(--shadow-md);
}
.news-grid-image {
width: 90px;
height: 65px;
border-radius: var(--border-radius-sm);
overflow: hidden;
flex-shrink: 0;
background: var(--bg-alt);
}
.news-grid-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-thumb-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--text-lighter);
}
.news-grid-content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
}
.news-grid-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--text-color);
margin: 0 0 var(--spacing-xs) 0;
line-height: 1.3;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-grid-date {
font-size: 0.8rem;
color: var(--text-light);
}
/* Responsive news grid */
@media (max-width: 640px) {
.featured-news-image {
height: 180px;
}
.featured-news-title {
font-size: 1.1rem;
}
.news-grid-image {
width: 70px;
height: 55px;
}
.news-grid-title {
font-size: 0.85rem;
}
}
/* Margin utilities */
.mt-2 {
margin-top: var(--spacing-2xl);
}
.mt-3 {
margin-top: var(--spacing-3xl);
}
/* ==========================================================================
Match Preview Page Header (Article)
========================================================================== */
.match-header-section {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
text-align: center;
}
.match-header-section h2.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.match-header-updated {
display: block;
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-light);
font-size: 0.85rem;
color: var(--text-light);
font-style: italic;
}
/* Legacy class for backwards compatibility */
.match-preview-header {
text-align: center;
padding: var(--spacing-xl) 0;
margin-bottom: var(--spacing-2xl);
border-bottom: 2px solid var(--border-light);
}
.match-header-teams {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
}
a.match-header-team {
text-decoration: none;
color: inherit;
}
.match-header-team {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-sm);
min-width: 120px;
}
a.match-header-team:hover .match-header-team-name {
color: var(--primary-color);
}
.match-header-logo-wrapper {
width: 90px;
height: 90px;
background: var(--bg-alt);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.match-header-logo {
width: 70px;
height: 70px;
object-fit: contain;
}
.match-header-initial {
width: 70px;
height: 70px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: 800;
font-family: var(--font-headings);
}
.match-header-team-name {
font-size: 1.1rem;
font-weight: 700;
color: var(--text-color);
text-align: center;
max-width: 140px;
}
.match-header-vs {
font-size: 1.75rem;
font-weight: 800;
color: var(--primary-color);
background: var(--bg-alt);
padding: var(--spacing-sm) var(--spacing-lg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-sm);
}
.match-header-info {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
color: var(--text-light);
}
.match-header-date {
font-size: 1rem;
font-weight: 600;
color: var(--text-color);
}
.match-header-venue {
font-size: 0.95rem;
color: var(--text-light);
}
.match-header-venue::before {
content: '📍 ';
}
.match-header-league {
display: inline-block;
background: var(--primary-color);
color: white;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: var(--spacing-sm);
}
/* Responsive Match Preview Header */
@media (max-width: 640px) {
.match-header-teams {
gap: var(--spacing-md);
}
.match-header-team {
min-width: 100px;
}
.match-header-logo-wrapper {
width: 70px;
height: 70px;
}
.match-header-logo {
width: 55px;
height: 55px;
}
.match-header-initial {
width: 55px;
height: 55px;
font-size: 1.5rem;
}
.match-header-team-name {
font-size: 0.95rem;
max-width: 110px;
}
.match-header-vs {
font-size: 1.25rem;
padding: var(--spacing-xs) var(--spacing-md);
}
.match-header-date {
font-size: 0.9rem;
}
.match-header-venue {
font-size: 0.85rem;
}
}
/* ========================================
MATCH PREVIEW PAGE REDESIGN STYLES
======================================== */
/* Match Overview Section */
.match-overview-section {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
}
.match-overview-section h2 {
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
font-size: 1.5rem;
}
.match-overview-content {
line-height: 1.8;
color: var(--text-color);
}
.match-overview-content p {
margin-bottom: var(--spacing-md);
}
/* Predicted Lineups Section */
.predicted-lineups-section {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
}
.predicted-lineups-section h2 {
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
font-size: 1.5rem;
text-align: center;
}
.lineups-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.lineup-card {
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
border-left: 4px solid var(--primary-color);
}
.lineup-card h3 {
font-size: 1.1rem;
color: var(--primary-color);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.lineup-card h3 img {
width: 28px;
height: 28px;
object-fit: contain;
}
.lineup-formation {
font-size: 0.85rem;
color: var(--text-light);
margin-bottom: var(--spacing-sm);
}
.lineup-players {
font-size: 0.95rem;
line-height: 1.7;
color: var(--text-color);
}
@media (max-width: 768px) {
.lineups-grid {
grid-template-columns: 1fr;
}
}
/* Team Form Comparison Section */
.team-form-section {
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.team-form-section h2 {
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
font-size: 1.5rem;
text-align: center;
}
.form-comparison-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.form-column {
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
}
.form-column-header {
text-align: center;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border-color);
}
.form-column-header img {
width: 50px;
height: 50px;
object-fit: contain;
margin-bottom: var(--spacing-sm);
}
.form-column-header h3 {
font-size: 1.1rem;
color: var(--text-color);
margin-bottom: var(--spacing-xs);
}
.form-league-position {
font-size: 0.9rem;
color: var(--text-light);
}
/* Form Badges */
.form-badges-row {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-lg);
}
.form-badge {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
font-weight: 700;
font-size: 0.9rem;
color: white;
}
.form-badge.W {
background: var(--color-success);
}
.form-badge.D {
background: var(--color-neutral);
}
.form-badge.L {
background: var(--color-danger);
}
/* Form Analysis Card */
.form-analysis-card {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
box-shadow: var(--shadow-sm);
}
.form-analysis-card h3 {
font-size: 1rem;
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.form-analysis-card p {
line-height: 1.7;
color: var(--text-color);
font-size: 0.95rem;
}
@media (max-width: 768px) {
.form-comparison-grid {
grid-template-columns: 1fr;
}
}
/* Head-to-Head Section */
.h2h-section {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
}
.h2h-section h2 {
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
font-size: 1.5rem;
text-align: center;
}
/* H2H Stats Visual - 3 Column Grid */
.h2h-stats-visual {
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
.h2h-teams-header {
display: flex;
justify-content: center;
align-items: center;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border-color);
}
.h2h-team-logo {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
}
.h2h-team-logo img {
width: 50px;
height: 50px;
object-fit: contain;
}
.h2h-team-logo span {
font-weight: 600;
color: var(--text-color);
font-size: 0.9rem;
}
.h2h-vs {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-light);
}
.h2h-stats-row {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
align-items: center;
padding: var(--spacing-md) 0;
border-bottom: 1px solid var(--border-color);
}
.h2h-stats-row:last-child {
border-bottom: none;
}
.h2h-stat-home,
.h2h-stat-away {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.h2h-stat-home {
text-align: center;
}
.h2h-stat-away {
text-align: center;
}
.h2h-stat-center {
text-align: center;
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.h2h-stat-value {
font-size: 1.5rem;
font-weight: 700;
color: var(--primary-color);
}
.h2h-stat-value.draws {
color: var(--text-light);
}
.h2h-stat-label {
font-size: 0.85rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Recent Meetings Table */
.recent-meetings {
margin-bottom: var(--spacing-xl);
}
.recent-meetings h3 {
font-size: 1.1rem;
color: var(--text-color);
margin-bottom: var(--spacing-md);
}
.meetings-table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.meetings-table th,
.meetings-table td {
padding: var(--spacing-md);
text-align: center;
border-bottom: 1px solid var(--border-color);
}
.meetings-table th {
background: var(--bg-alt);
font-weight: 600;
color: var(--text-color);
font-size: 0.85rem;
text-transform: uppercase;
}
.meetings-table td {
font-size: 0.95rem;
color: var(--text-color);
}
.meetings-table tr:last-child td {
border-bottom: none;
}
.meetings-table tr:hover {
background: var(--bg-alt);
}
.meeting-score {
font-weight: 700;
color: var(--primary-color);
}
/* H2H Narrative Cards */
.h2h-narrative {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.h2h-narrative-card {
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
border-left: 4px solid var(--primary-color);
}
.h2h-narrative-card h3 {
font-size: 1rem;
color: var(--primary-color);
margin-bottom: var(--spacing-md);
}
.h2h-narrative-card p {
line-height: 1.7;
color: var(--text-color);
font-size: 0.95rem;
}
@media (max-width: 768px) {
.h2h-narrative {
grid-template-columns: 1fr;
}
}
/* Match Preview Injuries Section (Simple Reference List) */
.match-preview-injuries {
background: var(--card-bg);
border-radius: var(--border-radius);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
box-shadow: var(--shadow-sm);
}
.match-preview-injuries h2 {
color: var(--primary-color);
margin-bottom: var(--spacing-lg);
font-size: 1.5rem;
text-align: center;
}
.mp-injuries-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.mp-injuries-column h3 {
font-size: 1rem;
color: var(--text-color);
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
gap: var(--spacing-sm);
}
.mp-injuries-column h3 img {
width: 24px;
height: 24px;
object-fit: contain;
}
.mp-injuries-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.mp-injury-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-alt);
border-radius: var(--border-radius);
font-size: 0.9rem;
}
.mp-injury-player {
font-weight: 600;
color: var(--text-color);
}
.mp-injury-reason {
color: var(--text-light);
font-size: 0.85rem;
}
.mp-injury-status {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
}
.mp-injury-status.out {
background: var(--badge-danger-bg);
color: var(--badge-danger-text);
}
.mp-injury-status.doubtful {
background: var(--badge-warning-bg);
color: var(--badge-warning-text);
}
/* Injuries Team Structure (Mockup-compliant) */
.injuries-team {
background: var(--bg-alt);
border-radius: var(--border-radius);
padding: var(--spacing-lg);
}
.injuries-team-header {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border-color);
}
.injuries-team-logo {
width: 40px;
height: 40px;
object-fit: contain;
}
.injuries-team-name {
font-weight: 700;
font-size: 1rem;
color: var(--text-color);
}
.injury-list {
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
}
.injury-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--card-bg);
border-radius: var(--border-radius);
font-size: 0.9rem;
}
.injury-item > div {
display: flex;
flex-direction: column;
gap: 2px;
}
.injury-name {
font-weight: 600;
color: var(--text-color);
}
.injury-reason {
color: var(--text-light);
font-size: 0.85rem;
}
.injury-status {
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
flex-shrink: 0;
}
.injury-status.out {
background: var(--badge-danger-bg);
color: var(--badge-danger-text);
}
.injury-status.doubtful {
background: var(--badge-warning-bg);
color: var(--badge-warning-text);
}
.mp-no-injuries {
color: var(--text-light);
font-style: italic;
padding: var(--spacing-md);
}
@media (max-width: 768px) {
.mp-injuries-grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Rivalry/Derby Page + Index Cards (Template-Aware)
========================================================================== */
/* ---- Rivalry Index Cards (Split-Screen) ---- */
.rivalry-cards {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.rivalry-card {
display: block;
text-decoration: none;
color: inherit;
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.rivalry-card:hover {
transform: translateY(-3px);
box-shadow: 0 20px 30px -10px rgba(0,0,0,0.25);
}
.rivalry-card-banner {
display: flex;
position: relative;
height: 160px;
overflow: hidden;
}
.rivalry-card-side {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
position: relative;
z-index: 1;
}
.rivalry-card-side.left {
background: linear-gradient(135deg, var(--rivalry-bg, var(--bg-dark)) 0%, var(--bg-dark) 100%);
padding-right: 2rem;
justify-content: flex-end;
clip-path: polygon(0 0, calc(100% + 20px) 0, 100% 100%, 0 100%);
}
.rivalry-card-side.right {
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--rivalry-bg, var(--bg-dark)) 100%);
padding-left: 2rem;
justify-content: flex-start;
clip-path: polygon(20px 0, 100% 0, 100% 100%, 0 100%);
margin-left: -20px;
}
.rivalry-card-vs-badge {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 3;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--bg-dark);
border: 3px solid rgba(255,255,255,0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
color: rgba(255,255,255,0.8);
letter-spacing: 0.05em;
}
.rivalry-card-team-logo {
width: 68px;
height: 68px;
border-radius: 50%;
background: rgba(255,255,255,0.1);
border: 2px solid rgba(255,255,255,0.2);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
}
.rivalry-card-team-logo img {
width: 48px;
height: 48px;
object-fit: contain;
}
.rivalry-card-team-logo .team-initial {
font-size: 1.5rem;
font-weight: 800;
color: rgba(255,255,255,0.6);
}
.rivalry-card-team-name {
font-size: 0.9rem;
font-weight: 700;
color: rgba(255,255,255,0.9);
text-transform: uppercase;
letter-spacing: 0.03em;
}
.rivalry-card-info {
background: var(--card-bg);
padding: 1.1rem 1.75rem;
display: flex;
align-items: center;
justify-content: space-between;
}
.rivalry-card-title-area { flex: 1; }
.rivalry-card-name {
font-size: 1.3rem;
font-weight: 800;
color: var(--text-color);
margin-bottom: 0.1rem;
}
.rivalry-card-subtitle {
font-size: 0.8rem;
color: var(--text-light);
}
.rivalry-card-stats {
display: flex;
gap: 1.25rem;
align-items: center;
}
.rivalry-card-stat { text-align: center; }
.rivalry-card-stat-value {
font-size: 1.2rem;
font-weight: 800;
color: var(--text-color);
}
.rivalry-card-stat-label {
font-size: 0.6rem;
color: var(--text-lighter);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.rivalry-card-arrow {
color: var(--text-lighter);
margin-left: 1rem;
transition: transform 0.2s;
}
.rivalry-card:hover .rivalry-card-arrow {
transform: translateX(4px);
color: var(--primary-color);
}
/* ---- Rivalry Detail Page Header (Split-Screen) ---- */
.rivalry-header {
overflow: hidden;
}
.rivalry-header-banner {
display: flex;
position: relative;
height: 180px;
overflow: hidden;
}
.rivalry-header-banner .rivalry-card-side.left {
clip-path: polygon(0 0, calc(100% + 25px) 0, 100% 100%, 0 100%);
}
.rivalry-header-banner .rivalry-card-side.right {
clip-path: polygon(25px 0, 100% 0, 100% 100%, 0 100%);
margin-left: -25px;
}
.rivalry-header-banner .rivalry-card-team-logo {
width: 80px;
height: 80px;
}
.rivalry-header-banner .rivalry-card-team-logo img {
width: 58px;
height: 58px;
}
.rivalry-header-banner .rivalry-card-team-name {
font-size: 1.1rem;
}
.rivalry-header-banner .rivalry-card-vs-badge {
width: 50px;
height: 50px;
font-size: 0.85rem;
}
.rivalry-header-info {
background: linear-gradient(135deg, var(--bg-dark) 0%, var(--rivalry-bg, var(--bg-dark)) 100%);
color: white;
text-align: center;
padding: 1.25rem 1rem;
}
.rivalry-badge {
display: inline-block;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
padding: 0.25rem 1rem;
border-radius: 9999px;
font-size: 0.7rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 0.75rem;
}
.rivalry-title {
font-size: 1.75rem;
font-weight: 800;
margin-bottom: 0.25rem;
}
.rivalry-subtitle {
color: var(--text-lighter);
font-size: 0.85rem;
}
/* Section Cards (shared across rivalry page) */
.rivalry-page .section-card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
box-shadow: var(--shadow-md);
margin-bottom: var(--spacing-xl);
overflow: hidden;
}
.rivalry-page .section-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid var(--border-light);
}
.rivalry-page .section-header h2 {
font-size: 1.125rem;
font-weight: 700;
margin: 0;
}
.rivalry-page .section-body {
padding: 1.5rem;
}
/* Remove bottom margin from last section card */
.rivalry-page .section-card:last-child {
margin-bottom: 0;
}
/* AI Narrative */
.ai-narrative {
background: linear-gradient(to bottom right, rgba(59,130,246,0.05), var(--bg-alt));
border-left: 4px solid var(--primary-color);
padding: 1.5rem;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
}
.ai-narrative-label {
display: inline-block;
background: var(--primary-color);
color: white;
padding: 0.15rem 0.5rem;
border-radius: 4px;
font-size: 0.65rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.ai-narrative p {
font-size: 0.9rem;
color: var(--text-light);
line-height: 1.7;
margin-bottom: 0.75rem;
}
.ai-narrative p:last-child {
margin-bottom: 0;
}
/* All-Time Record Bar */
.record-bar-container {
margin-bottom: 1.5rem;
}
.record-bar {
display: flex;
height: 40px;
border-radius: var(--border-radius);
overflow: hidden;
margin-bottom: 0.75rem;
}
.record-segment {
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 0.85rem;
transition: width 0.5s;
min-width: 2rem;
}
.record-segment.home {
background: var(--rivalry-home);
}
.record-segment.draw {
background: var(--rivalry-draw);
}
.record-segment.away {
background: var(--rivalry-away);
}
.record-legend {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
}
.record-legend-item {
display: flex;
align-items: center;
gap: 0.4rem;
}
.record-dot {
width: 10px;
height: 10px;
border-radius: 50%;
}
.record-dot.home { background: var(--rivalry-home); }
.record-dot.draw { background: var(--rivalry-draw); }
.record-dot.away { background: var(--rivalry-away); }
.record-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-top: 1.5rem;
}
.record-stat {
text-align: center;
padding: 1rem;
background: var(--bg-alt);
border-radius: var(--border-radius);
}
.record-stat-value {
font-size: 2rem;
font-weight: 800;
}
.record-stat-value.home { color: var(--rivalry-home); }
.record-stat-value.away { color: var(--rivalry-away); }
.record-stat-label {
font-size: 0.75rem;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Recent Meetings Timeline */
.meetings-list {
display: flex;
flex-direction: column;
}
.meeting-entry {
border-bottom: 1px solid var(--border-light);
}
.meeting-entry:last-child {
border-bottom: none;
}
.meeting-date-bar {
background: var(--bg-alt);
text-align: center;
padding: 0.5rem 1.5rem;
font-size: 0.7rem;
font-weight: 600;
color: var(--text-light);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.meeting-row {
display: grid;
grid-template-columns: 1fr 100px 1fr;
align-items: center;
padding: 1rem 1.5rem;
}
.meeting-team-left {
display: flex;
align-items: center;
gap: 0.75rem;
justify-content: flex-start;
}
.meeting-team-right {
display: flex;
align-items: center;
gap: 0.75rem;
justify-content: flex-end;
}
.meeting-team-logo {
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--bg-alt);
border: 1px solid var(--border-light);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
font-weight: 800;
flex-shrink: 0;
overflow: hidden;
}
.meeting-team-logo img {
width: 24px;
height: 24px;
object-fit: contain;
}
.meeting-team-name {
font-size: 0.9rem;
font-weight: 600;
}
.meeting-team-name.winner {
color: var(--text-color);
}
.meeting-team-name.loser {
color: var(--text-lighter);
}
.meeting-score {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
font-size: 1.1rem;
font-weight: 800;
text-align: center;
}
.meeting-score .win-indicator {
font-size: 0.5rem;
line-height: 1;
}
.meeting-score .win-indicator.left { color: var(--rivalry-home); }
.meeting-score .win-indicator.right { color: var(--rivalry-away); }
.meeting-venue {
text-align: center;
padding: 0 1.5rem;
margin-top: -0.5rem;
padding-bottom: 0.25rem;
}
.meeting-venue span {
font-size: 0.7rem;
color: var(--text-lighter);
}
/* Goal Scorers */
.meeting-scorers {
display: grid;
grid-template-columns: 1fr 100px 1fr;
padding: 0 1.5rem 1rem;
}
.meeting-scorers-left,
.meeting-scorers-right {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.meeting-scorers-left { align-items: flex-start; }
.meeting-scorers-right { align-items: flex-end; }
.meeting-scorers-spacer { width: 100px; }
.scorer {
font-size: 0.75rem;
color: var(--text-light);
line-height: 1.5;
}
.scorer .minute {
color: var(--text-lighter);
font-weight: 500;
}
/* AI Last Match Recap */
.last-match-recap {
background: var(--badge-warning-bg);
border: 1px solid var(--color-warning);
border-radius: var(--border-radius);
padding: 1rem 1.25rem;
margin-top: 1rem;
}
.last-match-recap-label {
font-size: 0.7rem;
font-weight: 700;
color: var(--color-warning);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.35rem;
}
.last-match-recap p {
font-size: 0.85rem;
color: var(--text-color);
line-height: 1.6;
}
/* Top Derby Scorers */
.derby-scorers-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.derby-scorers-column {
display: flex;
flex-direction: column;
}
.derby-scorers-team-header {
display: flex;
align-items: center;
gap: 0.6rem;
padding-bottom: 0.75rem;
margin-bottom: 0.75rem;
border-bottom: 2px solid var(--border-light);
font-weight: 700;
font-size: 0.95rem;
}
.derby-scorers-team-logo {
width: 28px;
height: 28px;
object-fit: contain;
border-radius: 50%;
}
.derby-scorer-row {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-light);
}
.derby-scorer-row:last-child {
border-bottom: none;
}
.derby-scorer-rank {
width: 1.5rem;
font-size: 0.75rem;
font-weight: 700;
color: var(--text-lighter);
text-align: center;
flex-shrink: 0;
}
.derby-scorer-name {
flex: 1;
font-size: 0.875rem;
font-weight: 600;
color: var(--text-color);
}
.derby-scorer-goals {
font-size: 0.8rem;
font-weight: 700;
color: var(--primary-color);
white-space: nowrap;
}
.derby-scorer-empty {
padding: 1rem 0;
text-align: center;
font-size: 0.8rem;
color: var(--text-lighter);
font-style: italic;
}
/* Rivalry Page Responsive */
@media (max-width: 768px) {
/* Index card adjustments */
.rivalry-card-banner {
height: 120px;
}
.rivalry-card-team-logo {
width: 50px;
height: 50px;
}
.rivalry-card-team-logo img {
width: 36px;
height: 36px;
}
.rivalry-card-team-name {
font-size: 0.75rem;
}
.rivalry-card-info {
flex-direction: column;
gap: 0.75rem;
text-align: center;
padding: 1rem;
}
.rivalry-card-stats {
justify-content: center;
}
.rivalry-card-arrow {
display: none;
}
/* Detail page header adjustments */
.rivalry-header-banner {
height: 130px;
}
.rivalry-header-banner .rivalry-card-team-logo {
width: 56px;
height: 56px;
}
.rivalry-header-banner .rivalry-card-team-logo img {
width: 40px;
height: 40px;
}
.rivalry-header-banner .rivalry-card-team-name {
font-size: 0.85rem;
}
.rivalry-title {
font-size: 1.35rem;
}
/* Record section */
.record-stats {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.record-legend {
flex-direction: column;
gap: 0.25rem;
}
/* Meetings */
.meeting-row {
grid-template-columns: 1fr 70px 1fr;
padding: 0.75rem 1rem;
}
.meeting-scorers {
grid-template-columns: 1fr 70px 1fr;
padding: 0 1rem 0.75rem;
}
.meeting-team-name {
font-size: 0.8rem;
}
.meeting-score {
font-size: 0.95rem;
}
/* Derby scorers */
.derby-scorers-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ==========================================================================
Round Navigation (Template-Aware)
========================================================================== */
.round-nav-wrapper {
position: relative;
margin: var(--spacing-lg) 0;
}
.round-nav-container {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
background: var(--bg-alt);
padding: var(--spacing-md) var(--spacing-lg);
border-radius: var(--border-radius-lg);
border: 1px solid var(--border-color);
}
.round-nav-arrow {
width: 40px;
height: 40px;
background: transparent;
border: 2px solid var(--border-color);
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
flex-shrink: 0;
color: var(--text-color);
}
.round-nav-arrow:hover {
background: var(--primary-color);
border-color: var(--primary-color);
color: white;
}
.round-nav-arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.round-nav-arrow svg {
stroke: currentColor;
}
.round-nav-display {
text-align: center;
min-width: 200px;
cursor: pointer;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--border-radius);
transition: background var(--transition-fast);
}
.round-nav-display:hover {
background: var(--bg-color);
}
.round-nav-name {
font-size: 1.25rem;
font-weight: 700;
color: var(--text-color);
margin-bottom: 2px;
}
.round-nav-dates {
font-size: 0.85rem;
color: var(--text-muted);
min-height: 1.2em;
}
/* Round Dropdown */
.round-dropdown {
display: none;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--bg-alt);
border: 1px solid var(--border-color);
border-radius: var(--border-radius-lg);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
z-index: 100;
max-height: 400px;
overflow-y: auto;
min-width: 280px;
margin-top: var(--spacing-xs);
}
.round-dropdown.open {
display: block;
}
.round-dropdown-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: var(--spacing-sm) var(--spacing-md);
background: transparent;
border: none;
color: var(--text-color);
cursor: pointer;
text-align: left;
transition: background var(--transition-fast);
gap: var(--spacing-sm);
}
.round-dropdown-item:hover {
background: var(--bg-color);
}
.round-dropdown-item.active {
background: var(--primary-color);
color: white;
}
.round-dropdown-name {
font-weight: 600;
flex: 1;
}
.round-dropdown-dates {
font-size: 0.8rem;
color: var(--text-muted);
}
.round-dropdown-item.active .round-dropdown-dates,
.round-dropdown-item.active .round-dropdown-count {
color: rgba(255, 255, 255, 0.8);
}
.round-dropdown-count {
font-size: 0.8rem;
color: var(--text-muted);
}
/* Mobile responsive */
@media (max-width: 768px) {
.round-nav-container {
padding: var(--spacing-sm) var(--spacing-md);
gap: var(--spacing-sm);
}
.round-nav-arrow {
width: 36px;
height: 36px;
}
.round-nav-display {
min-width: 150px;
}
.round-nav-name {
font-size: 1rem;
}
.round-nav-dates {
font-size: 0.75rem;
}
.round-dropdown {
min-width: 240px;
left: var(--spacing-sm);
right: var(--spacing-sm);
transform: none;
}
}
/* ==========================================================================
Results Page Styles
========================================================================== */
/* Results page uses base .page-header styles */
.results-container {
margin-top: var(--spacing-xl);
}
.results-round {
margin-bottom: var(--spacing-2xl);
}
.round-title {
font-size: 1.25rem;
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-sm);
border-bottom: 2px solid var(--primary-color);
color: var(--text-color);
}
.results-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-lg);
}
.result-card {
background: var(--card-bg);
border-radius: var(--border-radius-lg);
padding: var(--spacing-lg);
box-shadow: var(--shadow-md);
transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}
.result-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-lg);
}
.result-card.home-win .score-home,
.result-card.away-win .score-away {
color: var(--accent-green);
font-weight: 800;
}
.result-card.draw .result-score {
color: var(--text-lighter);
}
.result-date {
font-size: 0.8rem;
color: var(--text-lighter);
text-align: center;
margin-bottom: var(--spacing-md);
}
.result-teams {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-md);
}
.result-teams .team {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-xs);
text-align: center;
}
.result-teams .team-logo {
width: 48px;
height: 48px;
object-fit: contain;
}
.result-teams .team-name {
font-size: 0.85rem;
font-weight: 600;
color: var(--text-color);
}
.result-score {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: 1.75rem;
font-weight: 800;
}
.score-separator {
color: var(--text-lighter);
}
.result-meta {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--border-light);
text-align: center;
min-height: 32px;
}
.view-preview {
font-size: 0.85rem;
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
}
.view-preview:hover {
text-decoration: underline;
}
/* Upcoming match styles */
.result-card.upcoming {
background: linear-gradient(135deg, var(--bg-alt) 0%, var(--bg-color) 100%);
border: 2px dashed var(--border-light);
}
.result-card.upcoming .result-score {
color: var(--text-lighter);
}
.score-vs {
font-size: 1.2rem;
font-weight: 600;
color: var(--text-lighter);
text-transform: uppercase;
letter-spacing: 0.1em;
}
.upcoming-preview {
background: var(--primary-color);
color: white !important;
padding: var(--spacing-xs) var(--spacing-md);
border-radius: var(--radius-sm);
display: inline-block;
}
.upcoming-preview:hover {
background: var(--primary-dark, var(--primary-color));
text-decoration: none !important;
opacity: 0.9;
}
/* Round filtering (JavaScript-controlled) */
.results-round[data-hidden="true"] {
display: none;
}
@media (max-width: 768px) {
.results-grid {
grid-template-columns: 1fr;
}
.result-score {
font-size: 1.5rem;
}
.result-teams .team-logo {
width: 40px;
height: 40px;
}
.result-teams .team-name {
font-size: 0.8rem;
}
}
/* ==========================================================================
Statistics Page Styles
========================================================================== */
/* Statistics page uses base .page-header styles */
.stats-container {
margin-top: var(--spacing-xl);
}
.stats-tabs-nav {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-md);
border-bottom: 2px solid var(--border-light);
}
.stats-tab {
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
background: var(--bg-alt);
color: var(--text-color);
font-size: 0.9rem;
font-weight: 600;
border-radius: var(--border-radius);
cursor: pointer;
transition: all var(--transition-fast);
}
.stats-tab:hover {
background: var(--primary-color);
color: white;
}
.stats-tab.active {
background: var(--primary-color);
color: white;
}
.stats-tab-panel {
display: none;
}
.stats-tab-panel.active {
display: block;
}
.stats-table {
width: 100%;
border-collapse: collapse;
background: var(--card-bg);
border-radius: var(--border-radius-lg);
overflow: hidden;
box-shadow: var(--shadow-md);
}
.stats-table thead {
background: var(--bg-dark);
color: var(--thead-text);
}
.stats-table th,
.stats-table td {
padding: var(--spacing-md);
text-align: left;
vertical-align: middle;
}
.stats-table th {
font-weight: 600;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.stats-table tbody tr {
border-bottom: 1px solid var(--border-light);
transition: background var(--transition-fast);
}
.stats-table tbody tr:hover {
background: var(--bg-alt);
}
.stats-table .player-rank {
font-weight: 700;
color: var(--text-lighter);
width: 40px;
}
.stats-table .player-info-wrapper {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: var(--spacing-sm) !important;
}
.stats-table .player-photo {
width: 36px !important;
height: 36px !important;
min-width: 36px !important;
margin: 0 !important;
border-radius: 50% !important;
object-fit: cover !important;
background: var(--bg-alt) !important;
flex-shrink: 0 !important;
}
.stats-table .player-name {
display: inline !important;
font-weight: 600 !important;
}
.stats-table .team-link {
display: flex;
align-items: center;
gap: var(--spacing-sm);
text-decoration: none;
color: inherit;
transition: opacity var(--transition-fast);
}
.stats-table .team-link:hover {
opacity: 0.7;
}
.stats-table .team-logo-small {
width: 24px;
height: 24px;
min-width: 24px;
object-fit: contain;
flex-shrink: 0;
}
.stats-table .team-name {
color: var(--text-color);
}
.stats-table .stat-value {
font-weight: 800;
font-size: 1.1rem;
color: var(--primary-color);
}
.stats-table .stat-games {
color: var(--text-light);
}
.stats-table .stat-ratio {
color: var(--text-lighter);
font-size: 0.9rem;
}
.no-data {
text-align: center;
padding: var(--spacing-2xl);
color: var(--text-lighter);
}
@media (max-width: 768px) {
.stats-table {
font-size: 0.85rem;
}
.stats-table th,
.stats-table td {
padding: var(--spacing-sm);
}
.player-photo {
width: 32px;
height: 32px;
}
.stats-tabs-nav {
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
}
.stats-tab {
white-space: nowrap;
}
.player-info-wrapper {
gap: var(--spacing-sm);
}
.player-name {
font-size: 0.85rem;
}
}
/* Template Custom CSS: Match Day Live */
/* Match Day Live - Energetic Light Theme */
:root {
--bg-color: #f8fafc;
--bg-alt: #f1f5f9;
--bg-dark: #1e293b;
--bg-card: #ffffff;
--card-bg: #ffffff;
--accent-orange: #f97316;
--accent-orange-dark: #ea580c;
--accent-red: #ef4444;
--text-color: #1e293b;
--text-light: #475569;
--text-lighter: #64748b;
--border-color: #e2e8f0;
--border-light: #f1f5f9;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
.site-header {
background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
padding: 1.5rem 0;
}
.site-header h1 {
color: #ffffff;
font-size: 2.5rem;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 800;
}
.main-nav {
background: var(--bg-dark);
}
.main-nav a {
color: #f1f5f9;
font-weight: 700;
text-transform: uppercase;
}
.main-nav a:hover {
color: var(--accent-orange);
}
.card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 16px;
overflow: hidden;
}
.card:hover {
border-color: var(--accent-orange);
box-shadow: 0 8px 30px rgba(249, 115, 22, 0.12);
transform: translateY(-2px);
transition: all 0.3s ease;
}
.card h3 a {
color: var(--text-color);
}
.card h3 a:hover {
color: var(--accent-orange);
}
.card p {
color: var(--text-light);
}
/* Live indicator */
.live-badge {
display: inline-block;
background: var(--accent-red);
color: #ffffff;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-weight: 700;
font-size: 0.75rem;
text-transform: uppercase;
animation: pulse 2s infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.article-content h2 {
color: var(--accent-orange-dark);
text-transform: uppercase;
border-left: 4px solid var(--accent-orange);
padding-left: 1rem;
}
.article-content h3 {
color: var(--text-color);
}
/* Tables - light theme */
.article-content table {
border: 1px solid var(--border-color);
}
.article-content th {
background-color: var(--bg-dark);
color: #ffffff;
font-weight: 600;
}
.article-content td {
border-bottom-color: var(--border-color);
color: var(--text-color);
}
.article-content tr:hover td {
background-color: #fff7ed;
}
.cta-box {
background: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-orange-dark) 100%);
}
.cta-box a {
background: #ffffff;
color: var(--accent-orange-dark);
font-weight: 700;
}
.site-footer {
background: var(--bg-dark);
border-top: 3px solid var(--accent-orange);
}
.site-footer a {
color: #94a3b8;
}
.site-footer a:hover {
color: var(--accent-orange);
}