index.styl

/*=====================================================
=            Themes Kult by Ricardo Rauch            =
=====================================================*/


/*==========  Vars  ==========*/
color_site = #50E3C2;


/*==========  General Rules  ==========*/
html, body
	background: black;

body 
	color: white;
	-webkit-font-smoothing: antialiased;  
	-moz-font-smoothing: antialiased;  
	font-size: 15px;
	font-family: "calluna";

a 
	color: white;

	&:hover 
		text-decoration: none
		color: #50E3C2

.btn
	padding: 0;
	font-size: 11px;
	color: white
	text-transform: uppercase
	letter-spacing: 1px;
	font-family: "freight-sans-pro";
	border: 1px solid #555;
	padding: 4px 20px;
	border-radius: 100px;

	&:hover 
		background: white
		border-color: white;
		color: black;


h1,h2,h3,h5,.btn
	text-transform: uppercase
	font-weight: bold
	letter-spacing: 1px;

.bg-header 
	background: linear-gradient(120deg,  #50E3C2 0%, #cd78d1 100%);
	display: block
	position: fixed;
	left: 0;
	bottom: 0;
	top: 0;
	width: 4px;
	z-index: 10000;

.content
	margin: 10%;
	max-width: 1000px;
	.container 
		max-width: 100%;

	header
		max-width: 700px;
		margin-bottom: 60px;
		h1 
			font-size: 14px;
			color: color_site
			margin-bottom: 20px;

			span 
				position: relative;
				opacity: 0;

			.t
				-webkit-animation: text_logo .6s ease-in 1s forwards;

			.k 
				-webkit-animation: text_logo .6s ease-in 1.5s forwards;

		nav 
			position: fixed;
			right: 0;
			top: 0;
			// padding: 20px 30px;
			display: block
			opacity: 0;
			font-size: 13px;
			-webkit-animation: header_top 1s ease-in 10s forwards;
			ul 
				list-style: none;
				margin: 0;
				padding: 0;
				margin-top: 20px;
				margin-bottom: 40px;
				overflow: hidden
				li 
					margin-right: 20px;
					display: inline-block

		p
			opacity: 0;
			&.p-1
				-webkit-animation: theme_animation 1s ease-in 3s forwards;
			&.p-2
				-webkit-animation: theme_animation 1s ease-in 4s forwards;


	.theme 
		background: #222;
		height: 300px;
		width: 100%;
		overflow: hidden
		position: relative;
		margin-bottom: 5%;
		opacity: 0;
		-webkit-animation-fill-mode: forwards;

		.theme-img 
			overflow: hidden
			-webkit-filter: grayscale(1);
			-webkit-animation: make_color .5s ease-in 12s forwards;
			img
				max-width: 100%;
				display: block
				-webkit-transition: all .7s ease-in-out;
				-webkit-transform: scale(1) 

		&:hover 
			.theme-img 
				img 
					-webkit-transform: scale(1.1);
					-webkit-filter: blur(5px);		

		.overlay 
			background: rgba(0,0,0,.9);
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			font-size: 30px;
			text-align: center
			font-family: "freight-sans-pro";
			opacity: 0;
			cursor: pointer;
			-webkit-transition: all 0.4s linear;
			&:hover 
				opacity: 1;
				color: white;
				


			span.theme-title
				text-transform: uppercase
				font-family: "freight-sans-pro";
				display: block
				font-weight: bold
				font-size: 12px
				letter-spacing: 1px;
				color: #f1f1f1
				margin-top: 130px;
				margin-bottom: 20px;


		&.urban 
			-webkit-animation: theme_animation .5s ease-in 6s forwards;

			.theme-img 
				img
					margin: 20px auto;
					max-width: 90%;

		&.sidebar 
			-webkit-animation: theme_animation .5s ease-in 9s forwards;

			.theme-img 
				img 
					max-width: 140%;
					margin: 20px;


		&.wpomatic 
			-webkit-animation: theme_animation .5s ease-in 7s forwards;


			span.theme-title
				margin-bottom: 10px;
				margin-top: 100px;

			em 
				font-size: 12px;
				display: block
				padding: 0 10px;
				max-width: 300px
				font-weight: normal;
				font-family: "freight-text-pro";
				font-style: normal;
				font-size: 14px;
				opacity: .8;
				margin: auto;
				margin-bottom: 20px

			.theme-img 
				img 
					max-width: 80%;
					margin: 60px auto;

		&.symbol 
			-webkit-animation: theme_animation .5s ease-in 8s forwards;


.statement
	opacity: 0;
	-webkit-animation: theme_animation .5s ease-in 10s forwards;



/*==========  KeyFrames  ==========*/

@keyframes theme_animation 
	0% 
		opacity: 0;

	30% 
		opacity: 0.3;

	100% 
		opacity: 1;


@keyframes text_logo 
	0% 
		opacity: 0;
		top: -20px

	90% 
		opacity: 0.3;

	100% 
		top: 0;
		opacity: 1;


@keyframes header_top 
	0% 
		top: -100px;
		opacity: 0;

	100% 
		top: 0;
		opacity: 1;


@keyframes make_color 
	0% 
		-webkit-filter: grayscale(1);


	100% 
		-webkit-filter: grayscale(0);


/*==========  Media Queries  ==========*/


@media screen and (max-width: 568px)
	body 
		text-align: center

	.bg-header
		top: 0;
		width: 100%;
		height: 6px;
		right: 0;

	.content 
		header 

			margin-bottom: 10px;
			nav 
				position: static;
				margin-top: 10px;
				ul 
					li 
						margin: 0 10px;

		.theme 
			position: static;
			height: auto;
			.theme-img 
				img 
					max-width: 100%;
					max-height: 100%;
			.overlay
				opacity:1;
				position: static;
				// border-bottom: 1px solid white;
				padding: 20px;
				background-color: rgba(0,0,0,.4)

				span.theme-title
					margin: 0;
					margin-bottom: 10px;