Template:SCGE/styles.css

/* Tabs container */
.tabs ul { 
	display: flex; 
	flex-wrap: wrap; 
	margin: 1em 0 0; 
	padding: 0;
} 

/* Tabs */
.tabs li { 
	list-style: none; 
	flex: 1; 
	text-align: center; 
	border-top: 10px #111111 solid; /* near-black */
	margin: 0 0.4ex; 
	padding: 0.6em 0; 
	background: #ffffff;
	transition: all 0.2s ease-in-out;
} 

.tabs li:nth-child(even) { 
	border-top-color: #333333; /* softer black */
} 

.tabs li a { 
	color: #000000; 
	font-weight: 600; 
	font-family: "Sans-Serif", Arial, sans-serif;
	text-decoration: none;
	display: block;
} 

/* ACTIVE TAB — persistent */
.tabs.active-1 li:nth-child(1),
.tabs.active-2 li:nth-child(2),
.tabs.active-3 li:nth-child(3),
.tabs.active-4 li:nth-child(4) { 
	background: #000000;
	border-top-color: #000000;
}

/* Active tab text */
.tabs.active-1 li:nth-child(1) a,
.tabs.active-2 li:nth-child(2) a,
.tabs.active-3 li:nth-child(3) a,
.tabs.active-4 li:nth-child(4) a {
	color: #ffffff;
}

/* Hover effect (does NOT override active) */
.tabs li:hover {
	background: #111111;
}

.tabs li:hover a {
	color: #ffffff;
}

/* Ensure active tab stays unchanged on hover */
.tabs.active-1 li:nth-child(1):hover,
.tabs.active-2 li:nth-child(2):hover,
.tabs.active-3 li:nth-child(3):hover,
.tabs.active-4 li:nth-child(4):hover {
	background: #000000;
}

/* Main heading (black banner) */
.main-heading { 
	background: #000000;  
	color: #ffffff; 
	text-align: center; 
	font-size: 2.2em; 
	font-family: "Sans-Serif", Georgia, serif;
	text-transform: uppercase; 
	letter-spacing: 1.5px; 
	margin: 0 0 1em; 
	border: none; 
	padding: 0.7em; 
	font-weight: bold; 
} 

/* Sub-headings (black variants only) */
.sub-heading {
	font-family: "Sans-Serif", Georgia, serif;
	color: #111111;
	font-size: 1.4em;
	margin-top: 1em;
}

.sub-heading.alt {
	color: #333333;
}

/* Body text */
body {
	font-family: "Sans-Serif", Arial, sans-serif;
	color: #000000;
	background: #ffffff;
}