pillar/src/styles/_homepage.sass

$node-type-asset_image: #e87d86
$node-type-asset_file: #CC91C7
$node-type-asset_video: #7dc5e8
$node-type-comment: #66ccbd
$node-type-group: #c3a280
$node-type-post: #647bce

.dashboard-container
	display: flex
	justify-content: space-around
	align-items: flex-start
	align-content: center
	word-break: break-word

	+container-behavior

	+media-xs
		flex-direction: column

	section#main
		+container-box
		margin: 20px auto
		width: 64%

		+media-xs
			width: 100%
			border-radius: 0

	section#side
		width: 33%
		flex-direction: column
		margin-right: auto

		+media-xs
			width: 100%

	section.announcement,
	section#blog-stream,
	section#random-asset
		+container-box
		margin: 20px auto

		+media-xs
			border-radius: 0

		span.section-lead
			display: block
			padding: 10px 0 10px 15px
			color: $color-text-dark-secondary

	section#main,
	section#side
		h3
			margin: 0
			padding: 15px
			cursor: default
			font:
				family: $font-body
				size: 1.4em

			a
				color: $color-text-dark
				&:hover
					color: $color-primary
					cursor: pointer

	section#nav-tabs,
	section#sub-nav-tabs
		ul#nav-tabs__list,
		ul#sub-nav-tabs__list
			margin: 0
			padding: 0
			list-style: none
			border-bottom: thin solid $color-background
			+clearfix

			li.nav-tabs__list-tab
				float: left
				font:
					size: 1.2em
					weight: 400
				border: none
				border-bottom: 3px solid transparent
				color: $color-text-dark-primary
				user-select: none

				&:hover
					border-color: rgba($color-secondary, .3)
					cursor: pointer
					color: $color-text-dark
					a
						color: $color-text-dark

				a
					display: block
					text-decoration: none
					padding: 15px 20px 10px 20px
					color: $color-text-dark-primary

				i
					margin-right: 5px
					color: $color-text-dark-secondary
					font-size: .9em

					&.pi-blender
						margin-right: 10px

				span
					color: $color-text-dark-hint
					margin-left: 5px

				&.active
					border-color: $color-secondary
					color: $color-secondary-dark
					a, i
						color: $color-secondary-dark

				&.disabled
					border-color: $color-background-light
					color: $color-text-dark-hint
					cursor: default
					a, i
						color: $color-text-dark-hint

					&:hover
						border-color: $color-background-light
						pointer-events: none

			li.create
				float: right
				cursor: pointer
				font:
					size: 1.2em
					weight: 400
				display: inline-block
				padding: 15px 20px 10px 20px
				border-bottom: 3px solid transparent

				&:hover
					border-color: $color-success
				a
					color: $color-success
					text-decoration: none

				&.disabled
					cursor: wait
					border-color: $color-success
					opacity: .8
					a
						cursor: wait

	section#stream
		position: relative
		background-color: $color-background-light
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px

		h3
			padding:
				top: 25px
				left: 20px
				bottom: 0
			span
				padding-left: 5px
				color: $color-text-dark-secondary

		ul#activity-stream__list
			margin: 0
			padding: 15px 0
			list-style: none

			li.activity-stream__list-item
				display: flex
				align-items: center
				margin: 0 10px 10px
				+clearfix

				&:hover
					.title
						text-decoration: underline

				&.asset
					.activity-stream__list-details
						.title
							font-size: 1.2em

					&.video .activity-stream__list-details
						border-color: $node-type-asset_video
						a.image
							&:hover
								i
									font-size: 3.5em
								img
									opacity: .9
							img
								opacity: .7
								z-index: 0
								transition: opacity 150ms ease-in-out

							i
								+position-center-translate
								z-index: 1
								color: rgba(white, .6)
								font-size: 3em
								transition: font-size 100ms ease-in-out

					&.image .activity-stream__list-details
						border-color: $node-type-asset_image
					&.file .activity-stream__list-details
						border-color: $node-type-asset_file

				&.comment
					.activity-stream__list-details
						border-color: $node-type-comment
						.title
							color: $color-text-dark
							padding: 10px 15px 5px 15px
							width: 100%

						li.where-parent:before
							content: '\e83a'
							font-family: 'pillar-font'

						li.when
							float: right
							&:before
								content: ''

				&.post
					.activity-stream__list-thumbnail
						color: $node-type-post
					.activity-stream__list-details
						border-color: $node-type-post

						.title
							color: $color-text-dark-primary
							max-width: 80%
							padding-bottom: 5px
							font:
								size: 1.2em
								weight: 500

				&.asset, &.comment, &.post
					&:hover
						cursor: pointer

					&.active
						.activity-stream__list-details
							border-color: $color-primary
						.spin
							animation-duration: 5s

				&.empty
					display: none
					color: $color-text-dark-primary
					padding: 20px
					text-align: center
					span
						color: $color-primary
						&:hover
							text-decoration: underline
							cursor: pointer

				.activity-stream__list-thumbnail
					display: flex
					align-self: flex-start
					justify-content: center
					font-size: 1.4em
					width: 30px
					height: 30px
					min-width: 30px
					min-height: 30px
					color: $node-type-comment

					+media-xs
						display: none

					&.image
						color: $node-type-asset_image
					&.file
						color: $node-type-asset_file
						font-size: 1.1em
					&.video
						color: $node-type-asset_video
						i.pi-film-thick
							font-size: .8em

					i
						position: relative

					img.thumbnail
						width: 100%
						+position-center-translate

				.activity-stream__list-details
					flex: 1
					overflow: hidden
					position: relative
					max-width: 100%
					background-color: white
					margin-left: 5px
					margin-right: auto
					border-radius: 3px
					border-left: 2px solid $color-background
					box-shadow: 0 0 1px 1px rgba(black, .1), 0 2px 5px rgba(black, .05)

					+media-xs
						margin-left: 0

					.ribbon
						+ribbon
						right: -47px
						top: 5px
						font:
							size: 12px
							weight: 500

						span
							padding: 1px 50px

					.title
						display: inline-block
						padding: 10px 15px
						color: $color-text-dark

						span
							@include badge(hsl(hue($color-success), 60%, 45%), 3px)
							font-size: .7em
							padding: 1px 5px
							margin-right: 5px

					.date
						display: inline-block
						float: right
						color: $color-text-dark-secondary
						padding: 15px
						font-size: .9em

					.date+.ribbon
						box-shadow: 0 0 15px 5px white

					.image
						display: block
						position: relative
						text-align: center
						background-color: $color-background

						img
							max-width: 100%
							display: inline-block
							margin: 0 auto
							border-top-left-radius: 3px
							border-top-right-radius: 3px

					ul.meta
						+list-meta
						padding: 0 10px 5px 15px
						font-size: .85em
						color: $color-text-dark-secondary

						li
							padding-left: 10px
							&:before
								left: -5px
							&.what
								text-transform: capitalize

		ul#activity-stream__filters
			margin: 0
			padding: 0
			list-style: none
			position: absolute
			top: 20px
			right: 15px
			border-radius: 3px

			li
				float: left
				padding: 5px
				cursor: pointer
				border: thin solid $color-background
				border-right: none
				background-color: white
				color: $color-text-dark-primary

				&:hover
					color: $color-primary

				/* First is the 'filter by' label */
				&:first-child
					border: none
					background-color: transparent
					border-top-left-radius: 3px
					border-bottom-left-radius: 3px
					color: $color-text-dark-hint
					font-size: .9em

				&:nth-child(2)
					border-top-left-radius: 3px
					border-bottom-left-radius: 3px

				&:last-child
					border-right: thin solid $color-background
					border-top-right-radius: 3px
					border-bottom-right-radius: 3px

				&:active
					background-color: $color-background-dark

				&.active
					background-color: $color-background

				&.clear:hover
					color: $color-danger


	section#blog-stream
		position: relative

		.feed
			position: absolute
			top: 10px
			right: 10px
			font-size: 1.4em
			color: lighten($color-text-dark-hint, 10%)

			&:hover
				color: $color-primary

		ul#blog-stream__list
			background-color: $color-background-light
			margin: 0
			padding: 0
			list-style: none
			border:
				top: thin solid $color-background
				bottom-left-radius: 3px
				bottom-right-radius: 3px

			.blog-stream__list-item
				display: flex
				padding: 7px 15px
				border-top: thin solid $color-background

				&:first-child
					border-top: none
				&:last-child
					border:
						bottom-left-radius: 3px
						bottom-right-radius: 3px

				&.more
					font-size: .9em
					a
						width: 100%
						text-align: right
						color: $color-text-dark-secondary
						&:hover
							color: $color-primary

				.blog-stream__list-thumbnail
					display: block
					position: relative
					width: 50px
					min-width: 50px
					height: 50px
					min-height: 50px
					margin-right: 15px
					background-color: $node-type-post
					border-radius: 50%
					overflow: hidden

					img
						width: 100%

					i
						+position-center-translate
						font-size: 1.6em
						color: $color-text-light-primary

				.blog-stream__list-details
					.title
						display: block
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em
						color: $color-text-dark-secondary

						li
							padding-left: 10px
							&:before
								left: -5px

				&.featured
					flex-direction: column
					padding: 0

					a.title
						font-size: 1.1em
						padding: 10px 0 0 15px
						display: block
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					a.blog-stream__thumbnail
						display: block
						position: relative
						img
							width: 100%

					ul.meta
						+list-meta
						padding: 5px 15px 10px 15px
						font-size: .9em


	section.announcement
		border-bottom: thin solid $color-background

		.header-icons
			display: flex
			align-items: center
			justify-content: center
			padding: 20px 0 5px 0

			i
				font-size: 2.5em
				color: $color-info

				&.pi-heart-filled
					color: $color-danger
					margin-left: 5px

		img.header
			width: 100%
			margin: 0 auto
			border-top-left-radius: 3px
			border-top-right-radius: 3px

		iframe
			width: 100%
			position: relative
			left: 15px
			margin: 25px auto

			+media-sm
				height: 500px
			+media-md
				height: 520px
			+media-lg
				height: 580px

		.text
			padding: 15px

			.title
				padding-bottom: 10px
				font:
					family: $font-body
					size: 1.4em
					weight: 300

				+media-xs
					font-size: 1.4em

				strong
					color: $color-primary-dark

				a
					color: $color-text-dark-primary

			.lead
				font-size: 1em
				+list-bullets

				ul
					margin-top: 10px
					padding-left: 10px

				hr
					border: none
					height: 1px
					width: 100%
					margin: 10px 0
					background-color: $color-background
					clear: both

				+media-xs
					padding-left: 10px


			.buttons
				margin: 15px auto 0 auto
				display: flex
				align-items: center
				justify-content: space-around
				flex-wrap: wrap

				a
					+button($color-text-light, 3px)
					padding: 5px 0
					margin:
						bottom: 5px
						right: auto
						left: auto
					font-size: .9em
					opacity: 1
					flex: 1

					+media-xs
						margin: 10px auto
						width: 100%

					&:first-child
						margin-right: 15px

					&.blue
						+button(hsl(hue($color-info), 60%, 45%), 3px)

					&.orange
						+button(hsl(hue($color-secondary), 50%, 50%), 3px)
						padding: 5px 15px

					&.green
						+button(hsl(hue($color-success), 60%, 40%), 3px, true)

	section#random-asset

		h3
			padding-bottom: 0

		ul.random-asset__list
			border-top: thin solid $color-background
			background-color: $color-background-light
			border-bottom-left-radius: 3px
			border-bottom-right-radius: 3px
			padding: 0
			margin: 0
			list-style: none

			.random-asset__list-item
				display: flex
				align-items: center
				padding: 7px 15px
				border-top: thin solid $color-background
				position: relative
				overflow: hidden

				&:first-child
					border-top: none

				.ribbon
					+ribbon
					right: -47px
					top: 5px
					font:
						size: 12px
						weight: 500

					span
						padding: 1px 50px

				.random-asset__list-thumbnail
					width: 50px
					min-width: 50px
					height: 50px
					min-height: 50px
					margin-right: 15px
					background-color: $color-background

					border-radius: 50%
					overflow: hidden
					display: block
					position: relative

					img
						width: 100%

					i
						+position-center-translate
						font-size: 1.6em
						color: $color-text-light

					&.image
						background-color: $node-type-asset_image
					&.file
						background-color: $node-type-asset_file
						font-size: .8em
					&.video
						background-color: $node-type-asset_video
						font-size: .8em
					&.None
						background-color: $node-type-group

				.random-asset__list-details
					.title
						display: block
						font-size: 1em
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					ul.meta
						+list-meta
						padding-top: 5px
						font-size: .9em

						li
							&:before
								left: -5px
							&.what
								text-transform: capitalize

				&.featured
					align-items: flex-start
					flex-direction: column
					padding: 0

					a.title
						font-size: 1.1em
						padding: 10px 0 0 15px
						display: block
						color: $color-text-dark-primary
						&:hover
							color: $color-primary

					a.random-asset__thumbnail
						display: block
						position: relative
						width: 100%

						&.video
							background-color: black
							img
								opacity: .7

						img
							width: 100%
							transition: opacity 150ms ease-in-out

						i
							+position-center-translate
							color: white
							font-size: 3em
							text-shadow: 0 0 25px black
							transition: font-size 150ms ease-in-out

						&:hover
							i
								font-size: 3.5em
							img
								opacity: .85

					ul.meta
						+list-meta
						padding: 5px 15px 10px 15px
						font-size: .9em

						li.what
							text-transform: capitalize


/* Sections for the non-logged in */
section.pricing
	padding: 50px 0
	margin-bottom: 25px
	background-color: $color-background-light
	+clearfix
	+media-xs
		padding: 0

	h2
		text-align: center
		font-size: 2.3em
		text-shadow: 1px 1px 0 white
		margin:
			top: 10px
			bottom: 50px
		padding: 0

		+media-xs
			font-size: 1.6em

	.box
		margin-top: 40px
		padding: 20px 20px 60px 20px
		border: 1px solid $color-text-dark-hint
		background-color: white
		min-height: 340px
		position: relative
		text-align: center
		border-top: 3px solid rgba($color-text-dark-secondary, .5)
		border-bottom-left-radius: 3px
		border-bottom-right-radius: 3px

		+media-xs
			margin-bottom: 15px

		&.yearly
			border-top: 3px solid $color-info
			transform: scale(1.1)

			+media-xs
				transform: scale(1)

			a.sign-up-now
				+button($color-primary, 999em, true)

				&:hover
					+button($color-success, 999em, true)

		&.education
			.pricing-caption
				padding: 25px
				font-size: 1.1em
				transition: color 100ms ease-in-out

			&:hover
				.pricing-caption
					color: $color-text-dark-primary

			a.sign-up-now
				width: 70%

		h3
			font:
				size: 1.8em
				family: $font-body
			padding-bottom: 0
			margin: 25px 0 0 10px


		.pricing-display
			position: relative
			color: $color-info
			padding: 10px 0

			.currency-sign,
			.digit-dec
				font-size: 1.7em
				position: relative
				top: -25px
				font-weight: 100

			.digit-int
				font-size: 4.5em
				font-weight: 100

		.pricing-caption
			color: $color-text-dark
			text-align: center
			padding-bottom: 0

			ul
				text-align: left

		+list-bullets

		ul
			color: $color-text-dark-primary
			padding-left: 10px
			margin-top: 15px

			li
				padding-bottom: 8px

		.sign-up-now
			position: absolute
			bottom: 25px
			width: 65%
			left: 50%
			transform: translateX(-50%)
			font-size: 1.2em

			+button($color-primary, 999em)
			padding: 5px 25px
			white-space: nowrap
			text-align: center

		&:hover
			.sign-up-now
				+button($color-success, 999em, true)


section.supported-by
	padding: 50px 0
	text-align: center
	background-color: $color-background
	border-top: 5px solid $color-background-dark

	img.logos
		max-height: 500px
		padding: 60px 0 100px 0

		+media-xs
			max-width: 100%


section.team
	background:
		color: white
		size: cover
		position: 50% 50%
	padding: 50px 0 40px 0
	text-align: center

	h2
		padding-bottom: 30px
		font-size: 2.2em
		color: $color-text-light

	.people-container
		max-width: $screen-lg
		margin: 0 auto 60px auto

		.people-intro
			opacity: 1
			position: relative
			top: 0
			transition: opacity 100ms ease-in-out, top 150ms ease-out

			&.active
				opacity: 0
				top: 15px

			h3
				font:
					family: $font-body
				color: $color-danger

			span
				color: $color-text-light-primary

		.people-faces
			padding-top: 40px
			display: flex
			flex: row flex
			flex-wrap: wrap
			margin: 0 auto
			align-items: center
			justify-content: center
			width: 100%
			max-width: 750px

			.face
				background-color: $color-background
				border-radius: 50%
				padding: 4px

				opacity: 1
				width: 112px
				height: 112px
				margin-left: 15px
				margin-right: 15px
				z-index: 0
				position: relative
				transition: transform 100ms ease-in-out, background-color 100ms ease-in-out, opacity 100ms ease-in-out

				+media-xs
					height: initial
					margin-top: 20px

				&:hover
					transform: scale(1.1)
					z-index: 1
					background-color: $color-primary

					img
						opacity: .8

				img
					position: relative
					width: 100%
					border-radius: 50%
					transition: opacity 150ms ease-in-out


		.people-bio
			display: block
			width: 100%
			position: relative

			+media-xs
				display: none


			.bio
				opacity: 0
				visibility: hidden
				margin: 0
				padding: 0
				position: absolute
				top: -340px
				left: 50%
				transform: translateX(-50%)

				transition: opacity 180ms ease-in-out, top 150ms ease-out

				&.active
					top: -330px
					opacity: 1
					visibility: visible

				h3
					position: relative
					top: -18px
					font-family: $font-body
					color: $color-info

					small
						position: absolute
						left: 50%
						transform: translateX(-50%)
						bottom: -22px
						white-space: nowrap
						font-size: .6em
						color: $color-text-light-primary
				span
					color: $color-text-light-hint

		&.online
			.people-faces
				max-width: 1000px

			.people-bio
				.bio
					top: -200px
					&.active
						top: -220px