deus-gaming/assets/css/home-page.css

@charset "UTF-8";

/*=========*/
/* Layout. */
/*=========*/

body.home-page {
	--deus-body-padding: 5rem 5rem 10rem 5rem;

	width: 100%;
	height: 100vh;
}
@media only screen and (max-width: 960px) {
	body.home-page {
		--deus-body-padding: 4rem 4rem 8rem 4rem;
	}
}
@media only screen and (max-width: 520px) {
	body.home-page {
		--deus-body-padding: 3rem 3rem 8rem 3rem;
	}
}
body.home-page::before {
	content: none;
}

/*===============*/
/* Splash image. */
/*===============*/

body.home-page #splash-image {
	width: 100%;
	height: 100%;
	opacity: 1.0;
	transition: opacity 2.5s ease;
}
body.home-page #splash-image.hidden {
	opacity: 0.0;
}
body.home-page #splash-image.fade {
	opacity: 0.15;
	transition: opacity 1s ease;
}
body.home-page #splash-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
body.home-page #splash-image img.tall {
	display: none;
}
@media only screen and (max-width: 960px) {
	body.home-page #splash-image img.tall {
		display: initial;
	}
	body.home-page #splash-image img.wide {
		display: none;
	}
}

/*================*/
/* Navigation UI. */
/*================*/

body.home-page #main-nav {
	top: unset;
	bottom: -2rem;
	opacity: 0.0;
	border-bottom: none;
	box-shadow: none;
	background-color: transparent;
	font-size: 1.75em;
	justify-content: center;
}
body.home-page #main-nav.shown {
	bottom: 0;
	opacity: 1.0;
	transition:
		bottom 1s ease,
		opacity 1s ease;
}

body.home-page #main-nav a.text {
	margin: 0 0.75em;
	width: 4em;
}

body.home-page #main-nav .social-buttons {
	position: fixed;
	top: 0;
	right: 0;
	font-size: 0.75em;
	padding: 0.5em;
}
@media only screen and (max-width: 520px) {
	body.home-page #main-nav .social-buttons {
		flex-flow: column nowrap;
	}
	body.home-page #main-nav .social-buttons a + a {
		margin: 0.5em 0 0 0;
	}
}

body.home-page #main-nav .logo {
	display: none;
}

/*===================*/
/* Copyright notice. */
/*===================*/

body.home-page #copyright {
	top: -0.75rem;
	opacity: 0.0;
}
body.home-page #copyright.shown {
	top: 0.75rem;
	opacity: 0.5;
	transition:
		top 1s ease,
		opacity 1s ease;
}