@require '~styles/variables'
@require '~styles-lib/mixins'
@require '../../../../_common/button/button'
@import url('https://fonts.googleapis.com/css?family=Megrim')

.route-landing-indieaf
	background-color: #0f0005

	.lead
		font-family: 'Megrim', sans-serif
		color: $white
		text-shadow: 0 2px 4px $gj-blue
		font-size: 35px

	.indieaf-header
		position: relative
		text-align: center

		.lead
			position: absolute
			left: 50%
			top: 75px
			width: 400px
			margin-left: -(@width / 2)
			font-size: 60px
			text-transform: uppercase

		.indieaf-logo
			margin: 0 auto
			max-height: 800px

		@media $media-xs
			.lead
				top: 20px
				font-size: 45px
				line-height: 1.1

			.indieaf-logo
				margin-top: 40px

	.indieaf-body
		font-weight: 300
		font-size: 20px
		color: $white

		a
			color: $gj-pink
			font-weight: bold

			&:hover
				color: $gj-blue

		code
			background-color: $gj-pink
			color: $black

		.lead
			max-width: 500px
			text-align: center
			margin: 60px auto

		.underbar
			border-top-color: $gj-pink !important
			border-top-width: 2px
			box-shadow: 0 2px 4px $gj-pink

		h2
			margin-top: 140px
			font-family: 'Megrim', sans-serif
			text-shadow: 0 2px 4px $gj-pink
			font-size: 40px

		.spacer
			margin-top: 140px

		@media $media-xs
			h2, .spacer
				margin-top: 80px

	.indieaf-vs
		&-row
			clearfix()
			position: relative
			margin-bottom: 40px

		&-col
			width: 50%

			&.left
				float: left
				padding-right: 40px
				text-align: right

			&.right
				float: right
				padding-left: 40px
				text-align: left

		&-img
			position: absolute
			top: 5px
			left: 50%
			width: 30px
			margin-left: -(@width / 2)

	.indieaf-quote
		max-width: 400px
		margin: 0 auto
		margin-bottom: 60px

		p
			font-style: italic
			font-size: 20px

		&-who
			font-weight: bold
			text-align: right

	.button-af
		rounded-corners-lg()
		display: inline-block
		text-transform: uppercase
		vertical-align: middle
		cursor: pointer
		outline: 0
		white-space: nowrap
		text-decoration: none !important
		user-select: none
		font-weight: bold
		color: $gj-pink !important
		border-width: $border-width-large
		border-style: solid
		border-color: $gj-blue
		line-height: 60px
		padding-left: 20px
		padding-right: 20px
		text-shadow: 0 0 8px $gj-pink
		box-shadow: 0 0 8px $gj-blue
		font-size: 25px
		transition: all 1000ms

		&:hover
			box-shadow: 0 0 8px $gj-pink
			border-color: $gj-pink
			background-color: rgba($gj-pink, 0.4)
			color: $white !important
