Template:Capacity Exchange/style.css

.header_image { padding:1em 0; }

.header_image img { max-width:100%; height: auto; }

.header_menu {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
	text-align:center;
	padding:2em 0;
	font-family: "Montserrat", sans-serif;
	gap:0.8em;
}

.header_menu a {
	background-color:var(--background-color-neutral, #eaecf0);
	flex:1;
	padding:1em;
	transition: all 500ms ease;
	border-bottom: 0.8em solid var(--color-inverted, #fff);
	text-decoration: none;
	font-size: 1.15em;
	font-weight: normal;
	color:var(--color-base, #202122);
}

.header_menu .active-menu-item + a {
	background-color:var(--background-color-base, #fff);
	transition: none;
	border-bottom: 0.8em solid #851d6a;
	color: #851d6a;
}

.header_menu a:hover {
	background-color:var(--background-color-neutral-subtle, #f8f9fa);
	border-bottom: 0.8em solid #851d6a;
	text-decoration: none;
	color: #851d6a;
}
.header_menu .active-menu-item + a:hover {
	background-color: var(--background-color-base, #fff);
}

.sub_header_menu {
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	flex-wrap:wrap;
	text-align:center;
	padding:0.5em 0;
	gap:0.8em;
}

.sub_header_menu a:not(.selflink) {
	background-color:var(--background-color-neutral, #eaecf0);
	flex:1;
	padding:0.8em;
	transition: all 500ms ease;
	border-bottom: 0.5em solid var(--color-inverted, #fff);
	text-decoration: none;
	font-size: 1em;
	color: var(--color-base, #202122);
}

.sub_header_menu a.selflink {
	background-color:#851d6a;
	flex:1;
	padding:0.8em;
	border-bottom: 0.5em solid #851d6a;
	text-decoration: none;
	font-size: 1em;
	color: var(--color-inverted, #fff);
}

.sub_header_menu a:hover:not(.selflink) {
	background-color:var(--background-color-neutral-subtle, #f8f9fa);
	border-bottom: 0.5em solid #851d6a;
	text-decoration: none;
	color: var(--color-base, #202122);
}

.content-block { padding: 1em; }

.highlight-content {
	display:flex;
	flex-direction: column;
	gap: 2em;
	padding: 2em 0;
}

.highlight-odd, .highlight-even {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 2em;
	justify-content: space-evenly;
	align-items: center;
	padding: 1em 0;
	border-radius: 0.25em;
}

.highlight-odd {
	flex-direction: row-reverse;
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	color: var(--color-base, #202122);
}

.capx-buttons-container {
	display: flex;
	flex-direction: row;
	gap: 2em;
	text-align:center;
	font-weight:bold;
	justify-content: center;
}

.blue-button {
	background-color: #851d6a !important;
	color: var(--color-inverted, #fff) !important;
	border: none !important;
}

.blue-button:hover {
	background-color: var(--color-icon-success, #099979) !important;
	color: var(--color-base-fixed, #202122) !important;
}

@media screen and (max-width: 600px) {
	.header_menu a { padding: 0.5em !important;	}
	.sub_header_menu a { padding: 0.5em !important;	}
	.content-block { padding: 0 0.5em !important; }
	.highlight-content div { flex-direction: column; }
	.capx-buttons-container { flex-direction: column; }
}

/* Dark mode */
html.skin-theme-clientpref-night .header_menu .active-menu-item + a,
html.skin-theme-clientpref-night .header_menu a:hover {
	border-bottom-color: #ffa9f6;
	color: #ffa9f6;
}
html.skin-theme-clientpref-night .sub_header_menu a.selflink {
	background-color: #ffa9f6;
	border-bottom-color: #ffa9f6;
}
html.skin-theme-clientpref-night .sub_header_menu a:hover:not(.selflink) {
	border-bottom-color: #ffa9f6;
}
html.skin-theme-clientpref-night .blue-button:not(:hover) {
	background-color: #ffa9f6 !important;
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .header_menu .active-menu-item + a,
	html.skin-theme-clientpref-os .header_menu a:hover {
		border-bottom-color: #ffa9f6;
		color: #ffa9f6;
	}
	html.skin-theme-clientpref-os .sub_header_menu a.selflink {
		background-color: #ffa9f6;
		border-bottom-color: #ffa9f6;
	}
	html.skin-theme-clientpref-os .sub_header_menu a:hover:not(.selflink) {
		border-bottom-color: #ffa9f6;
	}
	html.skin-theme-clientpref-os .blue-button:not(:hover) {
		background-color: #ffa9f6 !important;
	}
}