:root {
--cfpro-primary: #1976d2;
--cfpro-primary-dark: #1565c0;
--cfpro-primary-light: #42a5f5;
--cfpro-success: #2e7d32;
--cfpro-warning: #ed6c02;
--cfpro-gray-50: #fafafa;
--cfpro-gray-100: #f5f5f5;
--cfpro-gray-200: #eeeeee;
--cfpro-gray-300: #e0e0e0;
--cfpro-gray-500: #9e9e9e;
--cfpro-gray-600: #757575;
--cfpro-gray-700: #616161;
--cfpro-gray-800: #424242;
--cfpro-gray-900: #212121;
--cfpro-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--cfpro-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
--cfpro-radius: 8px;
--cfpro-radius-lg: 12px;
} .cfpro-no-data {
text-align: center;
padding: 40px 20px;
color: var(--cfpro-gray-500);
font-style: italic;
} .cfpro-club-profile {
display: flex;
gap: 32px;
align-items: flex-start;
padding: 24px;
background: #fff;
border-radius: var(--cfpro-radius-lg);
box-shadow: var(--cfpro-shadow);
}
.cfpro-club-badge {
flex-shrink: 0;
}
.cfpro-badge-img {
max-width: 150px;
height: auto;
border-radius: var(--cfpro-radius);
}
.cfpro-club-info {
flex: 1;
}
.cfpro-club-name {
font-size: 28px;
font-weight: 700;
margin: 0 0 12px 0;
color: var(--cfpro-gray-900);
}
.cfpro-club-venue {
display: flex;
align-items: center;
gap: 8px;
color: var(--cfpro-gray-600);
margin-bottom: 16px;
}
.cfpro-club-bio {
color: var(--cfpro-gray-700);
line-height: 1.7;
margin-bottom: 20px;
}
.cfpro-button {
display: inline-flex;
align-items: center;
padding: 12px 24px;
border-radius: var(--cfpro-radius);
font-weight: 500;
text-decoration: none;
transition: all 0.2s ease;
}
.cfpro-button-primary {
background: var(--cfpro-primary);
color: #fff;
}
.cfpro-button-primary:hover {
background: var(--cfpro-primary-dark);
color: #fff;
} .cfpro-fixtures,
.cfpro-results {
overflow-x: auto;
}
.cfpro-fixtures-table,
.cfpro-results-table {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--cfpro-radius-lg);
overflow: hidden;
box-shadow: var(--cfpro-shadow);
}
.cfpro-fixtures-table thead th,
.cfpro-results-table thead th {
background: var(--cfpro-gray-50);
padding: 14px 16px;
text-align: left;
font-weight: 600;
color: var(--cfpro-gray-700);
font-size: 13px;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 2px solid var(--cfpro-gray-200);
}
.cfpro-fixtures-table tbody td,
.cfpro-results-table tbody td {
padding: 14px 16px;
border-bottom: 1px solid var(--cfpro-gray-100);
vertical-align: middle;
}
.cfpro-fixtures-table tbody tr:last-child td,
.cfpro-results-table tbody tr:last-child td {
border-bottom: none;
}
.cfpro-fixture-date,
.cfpro-result-date {
white-space: nowrap;
}
.cfpro-fixture-date .cfpro-date,
.cfpro-fixture-date .cfpro-time {
display: block;
}
.cfpro-fixture-date .cfpro-time {
font-size: 12px;
color: var(--cfpro-gray-500);
}
.cfpro-fixture-vs {
text-align: center;
color: var(--cfpro-gray-400);
font-size: 12px;
}
.cfpro-club-team {
font-weight: 600;
color: var(--cfpro-primary);
}
.cfpro-club-fixture,
.cfpro-club-result {
background: rgba(25, 118, 210, 0.03);
}
.cfpro-result-score {
text-align: center;
font-size: 18px;
font-weight: 700;
}
.cfpro-score {
display: inline-block;
min-width: 24px;
}
.cfpro-score-separator {
margin: 0 8px;
color: var(--cfpro-gray-400);
}
.cfpro-winner {
color: var(--cfpro-success);
} .cfpro-league-table {
overflow-x: auto;
}
.cfpro-table-standings {
width: 100%;
border-collapse: collapse;
background: #fff;
border-radius: var(--cfpro-radius-lg);
overflow: hidden;
box-shadow: var(--cfpro-shadow);
}
.cfpro-table-standings thead th {
background: var(--cfpro-gray-50);
padding: 12px 8px;
text-align: center;
font-weight: 600;
color: var(--cfpro-gray-700);
font-size: 12px;
text-transform: uppercase;
border-bottom: 2px solid var(--cfpro-gray-200);
}
.cfpro-table-standings thead th.cfpro-col-team {
text-align: left;
padding-left: 16px;
}
.cfpro-table-standings tbody td {
padding: 12px 8px;
text-align: center;
border-bottom: 1px solid var(--cfpro-gray-100);
}
.cfpro-table-standings tbody td.cfpro-col-team {
text-align: left;
padding-left: 16px;
}
.cfpro-table-standings tbody tr:last-child td {
border-bottom: none;
}
.cfpro-col-pos {
width: 40px;
font-weight: 600;
}
.cfpro-col-pts {
width: 50px;
font-size: 16px;
}
.cfpro-club-team-row {
background: rgba(25, 118, 210, 0.05);
}
.cfpro-club-indicator {
color: var(--cfpro-primary);
margin-left: 4px;
} .cfpro-players-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 24px;
}
.cfpro-players-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.cfpro-player-card {
background: #fff;
border-radius: var(--cfpro-radius-lg);
overflow: hidden;
box-shadow: var(--cfpro-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cfpro-player-card:hover {
transform: translateY(-4px);
box-shadow: var(--cfpro-shadow-md);
}
.cfpro-player-image {
position: relative;
aspect-ratio: 1;
background: var(--cfpro-gray-100);
}
.cfpro-player-photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.cfpro-player-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 64px;
color: var(--cfpro-gray-300);
}
.cfpro-player-number {
position: absolute;
top: 12px;
right: 12px;
background: var(--cfpro-primary);
color: #fff;
font-weight: 700;
font-size: 14px;
padding: 4px 10px;
border-radius: 9999px;
}
.cfpro-player-info {
padding: 16px;
text-align: center;
}
.cfpro-player-name {
font-size: 16px;
font-weight: 600;
margin: 0 0 4px 0;
color: var(--cfpro-gray-900);
}
.cfpro-player-position {
font-size: 13px;
color: var(--cfpro-gray-500);
margin: 0;
} .cfpro-players-list .cfpro-player-card {
display: flex;
align-items: center;
}
.cfpro-players-list .cfpro-player-image {
width: 80px;
height: 80px;
aspect-ratio: auto;
flex-shrink: 0;
}
.cfpro-players-list .cfpro-player-info {
text-align: left;
flex: 1;
}
.cfpro-players-list .cfpro-player-number {
position: static;
margin-left: auto;
margin-right: 16px;
} .cfpro-sponsors-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 24px;
}
.cfpro-sponsors-list {
display: flex;
flex-direction: column;
gap: 16px;
}
.cfpro-sponsor-card {
background: #fff;
border-radius: var(--cfpro-radius-lg);
overflow: hidden;
box-shadow: var(--cfpro-shadow);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
}
.cfpro-sponsor-card:hover {
transform: translateY(-4px);
box-shadow: var(--cfpro-shadow-md);
}
.cfpro-sponsor-link {
display: block;
text-decoration: none;
}
.cfpro-sponsor-logo {
aspect-ratio: 16/9;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: var(--cfpro-gray-50);
}
.cfpro-sponsor-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.cfpro-sponsor-placeholder {
text-align: center;
padding: 20px;
}
.cfpro-sponsor-name-text {
font-weight: 600;
color: var(--cfpro-gray-700);
}
.cfpro-sponsor-tier-badge {
position: absolute;
top: 8px;
left: 8px;
padding: 4px 10px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
border-radius: 9999px;
}
.cfpro-tier-platinum {
background: linear-gradient(135deg, #e5e4e2, #c0c0c0);
color: #333;
}
.cfpro-tier-gold {
background: linear-gradient(135deg, #ffd700, #ffb700);
color: #333;
}
.cfpro-tier-silver {
background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
color: #333;
}
.cfpro-tier-bronze {
background: linear-gradient(135deg, #cd7f32, #b87333);
color: #fff;
} .cfpro-three-column-header {
display: flex;
align-items: center;
width: 100%;
margin-bottom: 16px;
border-radius: var(--cfpro-radius);
overflow: hidden;
box-shadow: var(--cfpro-shadow);
background: var(--cfpro-gray-50);
border: 1px solid var(--cfpro-gray-200);
}
.cfpro-header-column {
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
min-height: 80px;
}
.cfpro-header-yellow {
background: var(--cfpro-gray-100);
border-right: 1px solid var(--cfpro-gray-200);
flex: 0 0 30%;
}
.cfpro-header-black {
background: var(--cfpro-gray-50);
flex: 1;
min-width: 200px;
}
.cfpro-header-orange {
background: var(--cfpro-gray-100);
border-left: 1px solid var(--cfpro-gray-200);
flex: 0 0 30%;
}
.cfpro-sponsor-with-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
gap: 4px;
}
.cfpro-sponsor-above-text {
color: var(--cfpro-gray-600);
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
line-height: 1;
}
.cfpro-sponsor-logo-container {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
width: 100%;
}
.cfpro-sponsor-image-large {
max-height: 56px;
max-width: 100%;
object-fit: contain;
border-radius: 4px;
}
.cfpro-sponsor-integrated {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 100%;
width: 100%;
}
.cfpro-sponsor-link {
display: block;
text-decoration: none;
transition: transform 0.2s ease;
}
.cfpro-sponsor-link:hover {
transform: scale(1.05);
}
.cfpro-sponsor-image {
max-height: 48px;
max-width: 100%;
object-fit: contain;
border-radius: 4px;
}
.cfpro-sponsor-text {
color: var(--cfpro-gray-600);
font-size: 11px;
font-weight: 600;
opacity: 0.8;
} .cfpro-league-badge-container {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.cfpro-league-badge {
max-height: 48px;
max-width: 100%;
object-fit: contain;
border-radius: 4px;
} .cfpro-division-info {
text-align: center;
color: var(--cfpro-gray-800);
}
.cfpro-division-name {
font-size: 14px;
font-weight: 700;
margin-bottom: 4px;
color: var(--cfpro-gray-900);
}
.cfpro-division-subtitle {
font-size: 11px;
opacity: 0.8;
color: var(--cfpro-gray-600);
} .cfpro-orange-content {
text-align: center;
color: var(--cfpro-gray-600);
font-size: 12px;
font-weight: 600;
} .cfpro-sponsor-box {
background: linear-gradient(135deg, #fef3c7, #fde68a);
border: 1px solid #f59e0b;
border-radius: var(--cfpro-radius);
padding: 12px 16px;
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 16px;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.1);
} @media screen and (max-width: 768px) {
.cfpro-club-profile {
flex-direction: column;
text-align: center;
}
.cfpro-club-venue {
justify-content: center;
}
.cfpro-hide-mobile {
display: none;
}
.cfpro-players-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.cfpro-sponsors-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.cfpro-sponsor-box {
flex-direction: column;
text-align: center;
gap: 8px;
padding: 10px 12px;
}
.cfpro-sponsor-image {
max-width: 100px;
max-height: 35px;
}
.cfpro-three-column-header {
flex-direction: column;
height: auto;
}
.cfpro-header-column {
min-height: 60px;
padding: 12px;
}
.cfpro-header-yellow,
.cfpro-header-black,
.cfpro-header-orange {
flex: 1;
width: 100%;
}
.cfpro-sponsor-image {
max-height: 32px;
}
.cfpro-sponsor-above-text {
font-size: 8px;
}
.cfpro-sponsor-image-large {
max-height: 40px;
}
.cfpro-league-badge {
max-height: 36px;
}
}