/* NOTE: You MUST include the Montserrat font link in your HTML for this CSS to work:
*/
/* 1. Global Styles and Primary Font */
body {
font-family: 'Montserrat', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f7f6;
color: #1a1a1a; /* Primary text color: Black */
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 20px auto;
background-color: #fff;
padding: 30px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 8px;
}
/* 2. Header and Navigation Colors */
header {
background-color: #78A93F; /* Black/Dark Background */
color: #ffffff;
padding: 1px 0;
text-align: center;
border-radius: 8px 8px 0 0;
margin-bottom: 1px;
padding-bottom: 1px;
position: relative;
}
/* Base H1 styling, crucial for font-size and spacing */
header h1 {
margin: 0;
font-size: 2.8em;
letter-spacing: 1.5px;
text-shadow: none;
}
/* --- Specific Multi-Colored Title Styling (Requires HTML span structure) --- */
/*
Remember to update your HTML:
tennisnerds league
*/
.league-title span {
font-size: 1em; /* Inherit size from H1 */
letter-spacing: 1.5px;
}
.league-title .tennis {
font-weight: 10; /* Regular weight */
color: #1a1a1a; /* White text for contrast on the black header */
}
.league-title .nerds {
font-weight: 700; /* Bold weight */
color: #ffffff; /* Green accent color */
}
.league-title .league {
font-weight: 700; /* Bold weight */
color: #e76f24; /* Orange accent color */
}
/* Hide the H1 title text visually, keeping the logo prominent */
.league-title {
/* Hide the element, but keep it accessible to screen readers/SEO */
position: absolute;
width: 0px;
height: 0px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
/* Hamburger Menu Button - Hidden on desktop */
.menu-toggle {
display: none;
}
/* Navigation - CHANGED TO GREEN BACKGROUND */
nav ul {
list-style: none;
padding: 0;
margin: 1px 0 0;
display: flex;
justify-content: center;
background-color: #8bc34a; /* Primary color: Green */
border-radius: 0 0 8px 8px;
}
nav li {
margin: 0 15px;
}
nav a {
color: #ffffff; /* Dark text for contrast on green */
text-decoration: none;
padding: 12px 20px;
display: block;
font-weight: bold;
transition: background-color 0.3s ease, color 0.3s ease;
}
nav a:hover, nav a.active {
background-color: #548D0F; /* Dark hover color (Black) */
border-radius: 5px;
color: #ffffff; /* White text on hover */
}
main {
padding: 20px 0;
}
/* 3. Headings and Table Accents */
h2 {
color: #78A93F; /* Green accent color */
font-size: 2.2em;
border-bottom: 2px solid #78A93F; /* Border changed to Orange accent */
padding-bottom: 10px;
margin-top: 30px;
text-align: center;
}
h3 {
color: #78A93F; /* Green accent color (for 'Box A' heading) */
font-size: 1.6em;
margin-top: 25px;
margin-bottom: 15px;
}
/* TABLE WRAPPER FOR HORIZONTAL SCROLLING */
.table-wrapper {
overflow-x: auto;
position: relative;
margin-bottom: 20px;
}
.data-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 0;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.data-table th, .data-table td {
border: 1px solid #ddd;
padding: 12px 15px;
text-align: left;
}
.data-table th {
background-color: #f2f2f2; /* Light grey for contrast */
color: #78A93F; /* Dark text */
font-weight: bold;
text-transform: uppercase;
font-size: 0.9em;
}
/* FROZEN COLUMNS - First two columns */
.data-table th:nth-child(1),
.data-table td:nth-child(1) {
position: sticky;
left: 0;
z-index: 3;
background-color: #f2f2f2;
}
.data-table th:nth-child(2),
.data-table td:nth-child(2) {
position: sticky;
left: 0; /* Will be calculated based on first column width */
z-index: 3;
background-color: #f2f2f2;
}
/* For body cells, use white background */
.data-table tbody td:nth-child(1),
.data-table tbody td:nth-child(2) {
background-color: #fff;
}
/* For alternating row colors on frozen columns */
.data-table tbody tr:nth-child(even) td:nth-child(1),
.data-table tbody tr:nth-child(even) td:nth-child(2) {
background-color: #f9fdfc;
}
/* Hover state for frozen columns */
.data-table tbody tr:hover td:nth-child(1),
.data-table tbody tr:hover td:nth-child(2) {
background-color: #effce0;
}
/* Add a subtle shadow to show frozen column separation */
.data-table th:nth-child(2)::after,
.data-table td:nth-child(2)::after {
content: '';
position: absolute;
top: 0;
right: -1px;
bottom: 0;
width: 3px;
background: linear-gradient(to right, rgba(0,0,0,0.08), transparent);
}
.data-table tbody tr:nth-child(even) {
background-color: #f9fdfc;
}
.data-table tbody tr:hover {
background-color: #effce0; /* A very light shade of the new Green */
cursor: pointer;
}
footer {
text-align: center;
padding: 20px;
margin-top: 40px;
border-top: 1px solid #e0e0e0;
color: #666;
font-size: 0.9em;
}
footer p {
margin: 5px 0;
}
.no-data-message {
text-align: center;
font-size: 1.2em;
color: #777;
padding: 50px 0;
}
/* --- Responsive Design Additions --- */
/* For smaller screens (e.g., phones, up to 768px wide) */
@media (max-width: 768px) {
.container {
margin: 10px;
padding: 15px;
box-shadow: none;
border-radius: 0;
}
/* Mobile header layout: logo left, menu right */
header {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
text-align: left;
flex-wrap: nowrap;
}
.header-logo-link {
display: block;
padding: 0;
text-align: left;
flex-shrink: 0;
margin-right: auto;
}
.header-logo {
width: 60px;
height: 60px;
margin-bottom: 0;
transform: scale(1);
}
header h1 {
display: none; /* Hide title on mobile to save space */
}
/* Hamburger menu button - positioned on extreme right */
.menu-toggle {
display: block;
background-color: #ffffff;
border: 2px solid #8bc34a;
color: #78A93F;
font-size: 1em;
padding: 8px 15px;
cursor: pointer;
border-radius: 5px;
margin: 0;
margin-left: auto;
text-align: center;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
flex-shrink: 0;
white-space: nowrap;
z-index: 999;
position: relative;
}
.menu-toggle:hover,
.menu-toggle:active {
background-color: #8bc34a;
color: #ffffff;
}
/* Popup navigation menu */
nav {
position: fixed;
top: 0;
right: -100%;
width: 70%;
max-width: 300px;
height: 100vh;
background-color: #78A93F;
z-index: 1100;
transition: right 0.3s ease-out;
box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3);
overflow-y: auto;
}
/* Show navigation when active - slides in from right */
nav.active {
right: 0;
transition: right 0.3s ease-in;
}
nav ul {
flex-direction: column;
align-items: stretch;
margin: 0;
padding: 60px 0 20px 0;
border-radius: 0;
background-color: transparent;
max-height: none;
overflow: visible;
}
nav li {
margin: 0;
width: 100%;
text-align: left;
list-style: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
nav a {
padding: 15px 25px;
width: 100%;
display: block;
box-sizing: border-box;
color: #ffffff;
text-decoration: none;
}
nav a:hover,
nav a.active {
background-color: #548D0F;
border-radius: 0;
}
/* Overlay background when menu is open */
nav::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0);
z-index: -1;
pointer-events: none;
transition: background-color 0.3s ease;
}
nav.active::before {
background-color: rgba(0, 0, 0, 0.5);
pointer-events: auto;
}
h2 {
font-size: 1.5em;
margin-top: 20px;
}
h3 {
font-size: 1.2em;
margin-top: 20px;
text-align: center;
}
/* Responsive Table Strategy: Make tables horizontally scrollable with frozen columns */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.data-table {
display: table;
white-space: nowrap;
border: 1px solid #ddd;
}
.data-table td {
border: 1px solid #ddd;
padding-left: 12px;
text-align: left;
white-space: normal;
}
.data-table td::before {
content: none;
}
}
/* For larger tablets and small desktops (screens between 769px and 1024px wide) */
@media (min-width: 769px) and (max-width: 1024px) {
.container {
margin: 15px auto;
padding: 25px;
}
header h1 {
font-size: 2.2em;
}
nav li {
margin: 0 10px;
}
}
/* Styling for the Logo image within the Header */
.header-logo-link {
display: inline-block;
padding: 10px 0;
/* If you want the logo to appear above the title and be centered */
display: block; /* Make it a block element to take its own line */
text-align: center; /* Center the image link itself */
}
.header-logo {
width: 100px; /* Set a fixed width */
height: 100px; /* Set a fixed height - MUST be equal to width for a perfect circle */
object-fit: contain; /* Ensures the whole logo is visible within the circle */
/* --- Make it circular --- */
border-radius: 50%; /* This makes the square image into a circle */
/* Optional: Add a border around the circular logo */
/* border: 2px solid #ffffff; */ /* Example: a thin white border */
transform: scale(1.1);
overflow: hidden;
/* Add a subtle shadow to make it pop */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
/* Optional: margin below the logo to separate it from the title */
margin-bottom:0px;
}