Template:MainPage/styles.css

.t-mainpage-grid {
	--t-mainpage-grid-column-span: 1;
	--t-mainpage-grid-column-min-width: 160px;
	--t-mainpage-grid-template-columns: repeat(
		auto-fit,
		minmax(
			calc(
				var(--t-mainpage-grid-column-min-width) *
					var(--t-mainpage-grid-column-span)
			),
			1fr
		)
	);

	display: grid;
	margin-block: 16px;
	gap: 12px;
	grid-template-columns: var(--t-mainpage-grid-template-columns);
}

.t-mainpage-grid .t-mainpage-card {
	height: 100%;
	box-sizing: border-box;
}

.t-mainpage-grid .t-mainpage-card .t-card__text {
	display: flex;
	flex-direction: column;
}

.t-mainpage-grid .t-mainpage-card .t-card__title {
	flex-grow: 1;
}

.t-mainpage-navcard {
	align-items: center;
	flex-direction: column;
}

.t-mainpage-buttons {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.t-mainpage-buttons > .t-button {
	flex-grow: 1;
}

.t-mainpage-buttons .cdx-button {
	width: 100%;
}

.t-mainpage-card .t-card__title {
	margin-bottom: 8px;
	font-size: 1.25rem;
	line-height: 1.875rem;
}

.t-mainpage-hero {
	max-width: 640px;
	padding-block: 3rem;
}

.t-mainpage-hero-pretitle {
	margin-bottom: 8px;
}

.t-mainpage-hero-title {
	color: var(--color-emphasized);
	font-family: var(--cp-font-family-heading);
	font-size: 3.5rem;
	line-height: 1;
}

.t-mainpage-hero-title-highlight {
	color: var(--color-progressive);
	font-weight: 700;
}

.t-mainpage-hero-stats {
	--size-icon: 1rem;

	margin-top: 16px;
	display: flex;
	align-items: center;
	font-size: 0.875rem;
	color: var(--color-subtle);
	column-gap: 16px;
}

.t-mainpage-hero-stats-item {
	display: flex;
	gap: 4px;
	align-items: center;
}

.t-mainpage-search {
	margin-top: 1.5rem;
	text-align: center;
}

.t-mainpage-search .cdx-button {
	width: 100%;
	min-height: 54px;
}

.t-mainpage-list {
	margin-top: 16px;
}

.t-mainpage-list-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px;
}

.t-mainpage-list-item + .t-mainpage-list-item {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border-color-subtle);
}

.t-mainpage-button-official:hover {
	background-color: #e14431 !important;
	color: #fff !important;
}

.t-mainpage-button-discord:hover {
	background-color: #5865f2 !important;
	color: #fff !important;
}

.t-mainpage-button-instagram:hover {
	background: radial-gradient(
		circle at 30% 107%,
		#fdf497 0%,
		#fdf497 5%,
		#fd5949 45%,
		#d6249f 60%,
		#285aeb 90%
	) !important;
	color: #fff !important;
}

.t-mainpage-button-youtube:hover {
	background-color: #ff0033 !important;
	color: #fff !important;
}

.t-mainpage-button-facebook:hover {
	background-color: #0866ff !important;
	color: #fff !important;
}

.t-mainpage-button-x:hover {
	background-color: #000 !important;
	color: #fff !important;
}

.t-mainpage-button-linkedin:hover {
	background-color: #0077b5 !important;
	color: #fff !important;
}

.t-mainpage-button-playstore:hover {
	background: linear-gradient(
		135deg,
		#4285f4,
		#34a853,
		#fbbc05,
		#ea4335
	) !important;
	color: #fff !important;
}

.t-mainpage-button-appstore:hover {
	background: linear-gradient(135deg, #007aff, #3399ff) !important;
	color: #fff !important;
}

.t-mainpage-button-steam:hover {
	background: linear-gradient(to right, #00adee, #171a21);
	color: #fff !important;
}

.t-mainpage-button-discord:hover .cdx-icon,
.t-mainpage-button-instagram:hover .cdx-icon,
.t-mainpage-button-youtube:hover .cdx-icon,
.t-mainpage-button-facebook:hover .cdx-icon,
.t-mainpage-button-x:hover .cdx-icon,
.t-mainpage-button-linkedin:hover .cdx-icon,
.t-mainpage-button-playstore:hover .cdx-icon,
.t-mainpage-button-appstore:hover .cdx-icon,
.t-mainpage-button-steam:hover .cdx-icon {
	filter: invert(1) !important;
}

/* Welcome card */
.t-mainpage-welcome {
    margin-bottom: 1.5em;
}

.t-mainpage-welcome-title {
    text-align: center;
    font-size: 1.4em;
}

.t-mainpage-welcome-highlight {
    color: #3273dc;
}

.t-mainpage-welcome-subtitle {
    text-align: center;
    font-size: 1.05em;
    color: #555;
    margin-bottom: 0.75em;
}

.t-mainpage-quicklinks {
    margin-top: 0.75em;
    text-align: center;
    font-size: 0.95em;
}