<commit_before>@import 'nib'
@import 'config'
@import 'fonts'
@import 'type'

html, body
	margin 0
	padding 0
	min-height 100%

body
	background url('/img/background.png') no-repeat, url('/img/back-repeat.jpg') repeat-x 0 0, url('/img/back-repeat-bottom.jpg') repeat, #f5f1e8

.tt-hint
	display none

a:not([href])
	cursor pointer

.schedule-link
	font-size 20px

h2, .subtitle h3
	font-family Montserrat
	text-align center
	text-shadow none
	text-transform uppercase
	letter-spacing 0px

h2
	color color-title-blue
	font-size 42px
	margin-bottom 18px

.content
	background-color #fff
	box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
	padding 1px 18px 18px 18px

#schedule-listing
	h2
		margin-bottom 50px

.subtitle
	background-color color-subtitle-yellow
	position relative
	h3
		color color-subtitle-grey
		font-size 28px
		height 50px
		font-weight normal
		text-align center
		span
			display block
			line-height 50px
		a:nth-child(2)
			float right
		a:nth-child(1)
			float left

#schedule-locations
	background-color #fff
	border-radius 5px
	box-shadow 0 1px 3px 0 rgba(0, 0, 0, .5)
	height 35px
	position absolute
	right 0
	text-align center
	top -40px
	width 200px
	z-index 3
	&.active
		height auto
		.location-items
			display block
	a
		border-bottom 1px solid rgba(0, 0, 0, 0.1)
		cursor pointer
		display block
		font-family Montserrat
		font-size 18px
		line-height 25px
		padding 5px 0
		text-decoration none
		text-transform uppercase
		width 100%
		i
			font-size 20px
		&.location-items
			display none
	&.active
		a.location-items
			display block

.title-icon
	display block
	margin 0 auto 20px auto
	width 140px

.thursday
	.icon-arrow-left
		display none
.monday
	.icon-arrow-right
		display none
.icon
	cursor pointer
	display inline-block
	float left
	font-size 0
	height 50px
	width 50px
	user-select none
	i
		color color-subtitle-grey
		font-size 20px
		line-height 50px
		text-decoration none
		text-indent 0
		text-shadow none
a
	color text-color-link
	text-decoration none
	&:hover, &:active
		color text-color-link-hover
		text-decoration underline

	&.row
		display block
		padding 12px 0

.curr-location, .tips-wrapper

	.details
		background-color #FFF
		border-bottom 2px solid #CCC
		box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
		clear both
		display none
		float left
		padding 20px
		position relative
		width 100%
		.description
			display none
		.expander
			color color-subtitle-grey
			cursor pointer
			font-family Montserrat
			font-size 25px
			line-height 32px
			position absolute
			text-decoration none
			visibility hidden
			z-index 2
			&.active
				visibility visible
		&.less
			span.less
				display none
		&.more
			background-color #FAFAFA
			span.more
				display none
			.description
				display block
				padding 10px 0
	&.to
		.to
			display block
	&.br
		.br
			display block
	&.sc
		.sc
			display block

.tips-wrapper
	margin-left -40px
	.details
		display block

		h4
			margin 20px 0

		h5
			font-size 20px

		.expander
			visibility visible
			.less
				display none
			.more
				display block
			&.active
				.less
					display block
				.more
					display none

		&.active
			background-color #FAFAFA
			.description
				display block
	.inner
		margin-left: 30px

article
	position relative

	.event-wrapper, .tips-wrapper

		section
			display none

			.events
				list-style-type none
				margin 0
				padding 0

				.city
					margin-left 30px

			&.active
				display block

		time
			display block

header
	height 50px

	nav

		div

			a
				display block
				cursor pointer
				&, &:link, &:visited
					color text-color-secondary

				&.menu-icn
					height 50px
					width 50px

			.menu-back
				float left
				background url('/img/icn-back.png') 50% 50% no-repeat

			ul
				margin 0
				padding 0

			> ul
				float right
				list-style none

				> li
					display block
					position relative

					ul
						position absolute
						width 200px
						right 0px
						top 45px
						z-index 99
						background-color #fff
						border-radius 10px
						box-shadow 0 1px 3px 0 rgba(0, 0, 0, .5)
						display none

						li
							display block

							a
								padding 12px 35px 12px 10px
								background 94% 50% no-repeat url('/img/sandstone/arrow-go.png')

								&:hover
									text-decoration none
									color #fff
									background-image url('/img/sandstone/arrow-go.png'), linear-gradient(#43a6e2, #247ac1)

							&:first-child
								a
									border-radius 10px 10px 0 0

							&:last-child
								a
									border-radius 0 0 10px 10px

							&:first-child:last-child
								a
									border-radius 10px 10px 10px 10px

					&:before
						content ""
						display block
						width 28px
						height 10px
						background no-repeat url('/img/sandstone/menu-point.png')
						position absolute
						left 12px
						top -10px

					&:hover, &:active, &.hover
						ul
							display block

			.menu-dropdown
				background url('/img/sandstone/icn-menu.png') 50% 8px no-repeat

				&:hover, &:active
					background-position 50% -92px

.btn, .btn:link, .btn:visited

	display inline-block
	border-radius 6px
	box-shadow 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset
	background url('/img/button-arrow.png') no-repeat right center, linear-gradient(color-button-blue, darken(color-button-blue, 10%)), color-button-blue
	color #fff
	font-size 18px
	text-align center
	font-weight normal
	padding 15px 70px
	line-height 1.1
	text-decoration none
	min-width 80px
	border 0
	text-shadow 0 1px 0 rgba(0, 0, 0, 0.25)
	font-family 'Open Sans Light', sans-serif
	transition all linear 0.1s

	&:hover, &:focus
		box-shadow 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px saturate(color-button-blue, 10%)
		text-decoration none

	&:focus
		outline-color text-color-secondary

	&:active
		box-shadow inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 2px rgba(0, 0, 0, 0.2)

main
	h2
		text-align center
		text-transform uppercase

#view-login

	.hexicon
		margin-top -30px

	.lead
		font-size 16px

	#action-login
		display block
		padding 10px 0

#view-home

	img
		margin-top -30px

	ul
		list-style none
		margin 20px 0
		padding 0

		li
			display block

			a
				display block
				font-family 'Open Sans Light', sans-serif
				font-size 28px
				padding 7px 0 10px
				margin-bottom 10px
				box-shadow 0 1px 0 rgba(0, 0, 0, 0.1)
				color #fefefe
				background-color color-blue

				&:hover, &:active
					text-decoration none

			&:nth-child(2)
				a
					background-color color-dark-grey
					color color-yellow

			&:nth-child(3)
				a
					background-color color-yellow
					color color-dark-grey

			&:nth-child(4)
				a
					background-color color-light-grey
					color color-blue

#view-questions

	.form-group
		background-color #FFF
		box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
		float left
		margin-bottom 20px
		padding 20px
		text-align center
		width 100%
	.twitter-typeahead
		width 100%
	.tt-dropdown-menu
		width 100%
		background-color #fff
		border-radius 5px
		box-shadow 0 1px 3px 0 rgba(0, 0, 0, .5)
	.tt-suggestions p
		margin 0
		border-bottom 1px solid rgba(0, 0, 0, 0.1)
		padding 5px 10px
		&:first-child
			border-radius 5px 5px 0 0
		&:last-child
			border-radius 0 0 5px 5px
		&:first-child:last-child
			border-radius 5px

	h5
		font-size 28px
		margin-bottom 20px

	.question-icon
		display block
		margin 0 auto 10px auto
		width 42px

	.radio-inline
		display none

	.moods
		margin 0 auto
		position relative
		height 330px
		width 427px
		> a
			background url('/img/mood.png') no-repeat
			background-size 100%
			color color-title-blue
			cursor pointer
			display block
			height 163px
			position absolute
			width 141px
			&:hover, &.on
				background url('/img/mood-active.png') no-repeat
				background-size 100%
				span
					color #fff
			span
				display inline-block
				font-family Montserrat
				font-size 20px
				line-height 30px
				margin-top 70px
				text-transform uppercase
			&.excited
				left 0
			&.worried
				left 145px
			&.proud
				left 290px
			&.confused
				left 73px
				top 122px
			&.curious
				left 218px
				top 122px

	#mozillians-list
		display block
		clear both
		float left
		list-style-type none
		margin 0
		padding 10px 0
		width 100%
		text-align left
		li
			clear both
			float left
			height 50px
			margin-bottom 5px
			position relative
			width 100%
		img
			border-radius 100px
			display inline-block
			float left
			height 50px
			margin-right 15px
			width 50px
		.image-mask
			background-color transparent
			border 3px solid #fff
			border-radius 100px
			height 53px
			left -1px
			overflow hidden
			position absolute
			top -1px
			width 53px
			z-index 2
		.country, .username
			color text-color-light
			text-transform uppercase
			font-size 12px
		p
			float left
			margin-top 5px
			> span
				display block
		.delete
			cursor pointer
			display inline-block
			float right
			font-style italic
			padding 3px 5px

#splash-screen
	position absolute
	top 0
	left 0
	height 100%
	width 100%
	z-index 99
	text-align center
	margin 20px 0 0 0
	display none
	background url('/img/logo-home.png') no-repeat 50% 295px
	background-size 110px 110px

	progress
		margin-top 100px
		width 80%

.hexicon
	text-align center
	margin-bottom 20px
	user-select none
	span
		display block
		// width 140px
		// height 163px
		width 200px
		height 232px
		background-size cover
		background-image url('/img/hexagons.png')
		font-size 130px
		padding-top 6px
		line-height 222px

	&.hexicon-small
		margin-bottom -100px
		span
			transform scale(0.5)
			transform-origin 50% 0;

	&.hexicon-medium
		margin-bottom -40px
		color color-light-grey
		span
			transform scale(0.75)
			transform-origin 50% 0;

#view-getting-around

	.content
		padding 20px
		box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)

$foreground-blue
	color color-blue
	.hexicon span
		background-position 0 0
$foreground-yellow
	color color-yellow
	.hexicon span
		background-position -200px 0
$foreground-white
	color #fff
	.hexicon span
		background-position -400px 0
$foreground-dark-grey
	color color-dark-grey
	.hexicon span
		background-position -600px 0
$foreground-dark-blue
	color color-dark-blue
	.hexicon span
		background-position -800px 0

$background-yellow
	background-color color-yellow
	.hexicon span
		color color-yellow

$background-dark-grey
	background-color color-dark-grey
	.hexicon span
		color color-dark-grey

$background-blue
	background-color color-blue
	.hexicon span
		color color-blue

$background-light-grey
	background-color color-light-grey
	.hexicon span
		color color-light-grey

$background-purple
	background-color color-purple
	.hexicon span
		color color-purple

$background-red
	background-color color-red
	.hexicon span
		color color-red

$background-orange
	background-color color-orange
	.hexicon span
		color color-orange

.view-dialog

	h2
		color inherit
		font-size 24px
		margin 16px 0 40px
	h3
		@extends h2
		color inherit
		font-size 24px
		margin 40px 0 0

	background-image none

	&.palette-0
		@extend $background-yellow
		main
			@extend $foreground-dark-grey

	&.palette-1
		@extend $background-dark-grey
		main
			@extend $foreground-yellow

	&.palette-2
		@extend $background-blue
		main
			@extend $foreground-white

	&.palette-3
		@extend $background-light-grey
		main
			@extend $foreground-blue

	&.palette-4
		@extend $background-purple
		main
			@extend $foreground-blue

	&.palette-5
		@extend $background-light-grey
		main
			@extend $foreground-dark-blue

	&.palette-6
		@extend $background-red
		main
			@extend $foreground-yellow

	&.palette-7
		@extend $background-orange
		main
			@extend $foreground-white


@media (max-width: 480px)

	body
		background url('/img/back-repeat.jpg') repeat-x 0 0, url('/img/back-repeat-bottom.jpg') repeat, #f5f1e8

	.title-icon
		width 80px

	.subtitle
		h3
			font-size 26px
			height 47px

	h2
		font-size 30px
		margin-bottom 15px

	#schedule-listing
		h2
			margin-bottom 55px

	h3
		font-size 22px

	#view-questions
		h5
			font-size 24px

	#mood-wrapper.moods
		height 160px
		width 257px
		> a.mood
			height 92px
			width 82px
			span
				font-size 12px
				line-height 22px
				margin-top 36px
			&.excited
				left 0
			&.worried
				left 86px
			&.proud
				left 171px
			&.confused
				left 43px
				top 69px
			&.curious
				left 128px
				top 69px

	#schedule-locations
		left 50%
		margin-left -100px

	// Splash screen only for mobile screens
	#splash-screen
		display block
		cursor progress

	main, nav
		visibility hidden

	// JS and Persona ready!
	.state-ready

		#splash-screen
			display none
		main, nav
			visibility visible


	.hexicon.hexicon-medium
		margin-bottom -100px
		span
			transform scale(0.5)
			transform-origin 50% 0;
<commit_msg>Fixed helicon offset and unified styling<commit_after>@import 'nib'
@import 'config'
@import 'fonts'
@import 'type'

html, body
	margin 0
	padding 0
	min-height 100%

body
	background url('/img/background.png') no-repeat, url('/img/back-repeat.jpg') repeat-x 0 0, url('/img/back-repeat-bottom.jpg') repeat, #f5f1e8

.tt-hint
	display none

a:not([href])
	cursor pointer

.schedule-link
	font-size 20px

h2, .subtitle h3
	font-family Montserrat
	text-align center
	text-shadow none
	text-transform uppercase
	letter-spacing 0px

h2
	color color-title-blue
	font-size 42px
	margin-bottom 18px

main
	transform translateY(-30px)

	h2
		text-align center
		text-transform uppercase

.content
	background-color #fff
	box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
	padding 1px 18px 18px 18px

#schedule-listing
	h2
		margin-bottom 50px

.subtitle
	background-color color-subtitle-yellow
	position relative
	h3
		color color-subtitle-grey
		font-size 28px
		height 50px
		font-weight normal
		text-align center
		span
			display block
			line-height 50px
		a:nth-child(2)
			float right
		a:nth-child(1)
			float left

#schedule-locations
	background-color #fff
	border-radius 5px
	box-shadow 0 1px 3px 0 rgba(0, 0, 0, .5)
	height 35px
	position absolute
	right 0
	text-align center
	top -40px
	width 200px
	z-index 3
	&.active
		height auto
		.location-items
			display block
	a
		border-bottom 1px solid rgba(0, 0, 0, 0.1)
		cursor pointer
		display block
		font-family Montserrat
		font-size 18px
		line-height 25px
		padding 5px 0
		text-decoration none
		text-transform uppercase
		width 100%
		i
			font-size 20px
		&.location-items
			display none
	&.active
		a.location-items
			display block

.title-icon
	display block
	margin 0 auto 20px auto
	width 140px

.thursday
	.icon-arrow-left
		display none
.monday
	.icon-arrow-right
		display none
.icon
	cursor pointer
	display inline-block
	float left
	font-size 0
	height 50px
	width 50px
	user-select none
	i
		color color-subtitle-grey
		font-size 20px
		line-height 50px
		text-decoration none
		text-indent 0
		text-shadow none
a
	color text-color-link
	text-decoration none
	&:hover, &:active
		color text-color-link-hover
		text-decoration underline

	&.row
		display block
		padding 12px 0

.curr-location, .tips-wrapper

	.details
		background-color #FFF
		border-bottom 2px solid #CCC
		box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
		clear both
		display none
		float left
		padding 20px
		position relative
		width 100%
		.description
			display none
		.expander
			color color-subtitle-grey
			cursor pointer
			font-family Montserrat
			font-size 25px
			line-height 32px
			position absolute
			text-decoration none
			visibility hidden
			z-index 2
			&.active
				visibility visible
		&.less
			span.less
				display none
		&.more
			background-color #FAFAFA
			span.more
				display none
			.description
				display block
				padding 10px 0
	&.to
		.to
			display block
	&.br
		.br
			display block
	&.sc
		.sc
			display block

.tips-wrapper
	margin-left -40px
	.details
		display block

		h4
			margin 20px 0

		h5
			font-size 20px

		.expander
			visibility visible
			.less
				display none
			.more
				display block
			&.active
				.less
					display block
				.more
					display none

		&.active
			background-color #FAFAFA
			.description
				display block
	.inner
		margin-left: 30px

article
	position relative

	.event-wrapper, .tips-wrapper

		section
			display none

			.events
				list-style-type none
				margin 0
				padding 0

				.city
					margin-left 30px

			&.active
				display block

		time
			display block

header
	height 50px
	z-index 10
	position relative

	nav

		div

			a
				display block
				cursor pointer
				&, &:link, &:visited
					color text-color-secondary

				&.menu-icn
					height 50px
					width 50px

			.menu-back
				float left
				background url('/img/icn-back.png') 50% 50% no-repeat

			ul
				margin 0
				padding 0

			> ul
				float right
				list-style none

				> li
					display block
					position relative

					ul
						position absolute
						width 200px
						right 0px
						top 45px
						z-index 99
						background-color #fff
						border-radius 10px
						box-shadow 0 1px 3px 0 rgba(0, 0, 0, .5)
						display none

						li
							display block

							a
								padding 12px 35px 12px 10px
								background 94% 50% no-repeat url('/img/sandstone/arrow-go.png')

								&:hover
									text-decoration none
									color #fff
									background-image url('/img/sandstone/arrow-go.png'), linear-gradient(#43a6e2, #247ac1)

							&:first-child
								a
									border-radius 10px 10px 0 0

							&:last-child
								a
									border-radius 0 0 10px 10px

							&:first-child:last-child
								a
									border-radius 10px 10px 10px 10px

					&:before
						content ""
						display block
						width 28px
						height 10px
						background no-repeat url('/img/sandstone/menu-point.png')
						position absolute
						left 12px
						top -10px

					&:hover, &:active, &.hover
						ul
							display block

			.menu-dropdown
				background url('/img/sandstone/icn-menu.png') 50% 8px no-repeat

				&:hover, &:active
					background-position 50% -92px

.btn, .btn:link, .btn:visited

	display inline-block
	border-radius 6px
	box-shadow 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset
	background url('/img/button-arrow.png') no-repeat right center, linear-gradient(color-button-blue, darken(color-button-blue, 10%)), color-button-blue
	color #fff
	font-size 18px
	text-align center
	font-weight normal
	padding 15px 70px
	line-height 1.1
	text-decoration none
	min-width 80px
	border 0
	text-shadow 0 1px 0 rgba(0, 0, 0, 0.25)
	font-family 'Open Sans Light', sans-serif
	transition all linear 0.1s

	&:hover, &:focus
		box-shadow 0px 2px 0px 0px rgba(0, 0, 0, 0.1), inset 0px -2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 2px saturate(color-button-blue, 10%)
		text-decoration none

	&:focus
		outline-color text-color-secondary

	&:active
		box-shadow inset 0px 2px 0px 0px rgba(0, 0, 0, 0.2), inset 0px 12px 24px 6px rgba(0, 0, 0, 0.2), inset 0px 0px 2px 2px rgba(0, 0, 0, 0.2)

#view-login

	.lead
		font-size 16px

	#action-login
		display block
		padding 10px 0

#view-home

	ul
		list-style none
		margin 20px 0
		padding 0

		li
			display block

			a
				display block
				font-family 'Open Sans Light', sans-serif
				font-size 28px
				padding 7px 0 10px
				margin-bottom 10px
				box-shadow 0 1px 0 rgba(0, 0, 0, 0.1)
				color #fefefe
				background-color color-blue
				position relative

				&:hover, &:active
					text-decoration none

			&:nth-child(2)
				a
					background-color color-dark-grey
					color color-yellow

			&:nth-child(3)
				a
					background-color color-yellow
					color color-dark-grey

			&:nth-child(4)
				a
					background-color color-light-grey
					color color-blue

#view-questions

	.form-group
		background-color #FFF
		box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)
		float left
		margin-bottom 20px
		padding 20px
		text-align center
		width 100%
	.twitter-typeahead
		width 100%
	.tt-dropdown-menu
		width 100%
		background-color #fff
		border-radius 5px
		box-shadow 0 1px 3px 0 rgba(0, 0, 0, .5)
	.tt-suggestions p
		margin 0
		border-bottom 1px solid rgba(0, 0, 0, 0.1)
		padding 5px 10px
		&:first-child
			border-radius 5px 5px 0 0
		&:last-child
			border-radius 0 0 5px 5px
		&:first-child:last-child
			border-radius 5px

	h5
		font-size 28px
		margin-bottom 20px

	.question-icon
		display block
		margin 0 auto 10px auto
		width 42px

	.radio-inline
		display none

	.moods
		margin 0 auto
		position relative
		height 330px
		width 427px
		> a
			background url('/img/mood.png') no-repeat
			background-size 100%
			color color-title-blue
			cursor pointer
			display block
			height 163px
			position absolute
			width 141px
			&:hover, &.on
				background url('/img/mood-active.png') no-repeat
				background-size 100%
				span
					color #fff
			span
				display inline-block
				font-family Montserrat
				font-size 20px
				line-height 30px
				margin-top 70px
				text-transform uppercase
			&.excited
				left 0
			&.worried
				left 145px
			&.proud
				left 290px
			&.confused
				left 73px
				top 122px
			&.curious
				left 218px
				top 122px

	#mozillians-list
		display block
		clear both
		float left
		list-style-type none
		margin 0
		padding 10px 0
		width 100%
		text-align left
		li
			clear both
			float left
			height 50px
			margin-bottom 5px
			position relative
			width 100%
		img
			border-radius 100px
			display inline-block
			float left
			height 50px
			margin-right 15px
			width 50px
		.image-mask
			background-color transparent
			border 3px solid #fff
			border-radius 100px
			height 53px
			left -1px
			overflow hidden
			position absolute
			top -1px
			width 53px
			z-index 2
		.country, .username
			color text-color-light
			text-transform uppercase
			font-size 12px
		p
			float left
			margin-top 5px
			> span
				display block
		.delete
			cursor pointer
			display inline-block
			float right
			font-style italic
			padding 3px 5px

#splash-screen
	position absolute
	top 0
	left 0
	height 100%
	width 100%
	z-index 99
	text-align center
	margin 20px 0 0 0
	display none
	background url('/img/logo-home.png') no-repeat 50% 295px
	background-size 110px 110px

	progress
		margin-top 100px
		width 80%

.hexicon
	text-align center
	margin-bottom 20px
	user-select none
	span
		display inline-block
		// width 140px
		// height 163px
		width 200px
		height 232px
		background-size cover
		background-image url('/img/hexagons.png')
		font-size 130px
		padding-top 6px
		line-height 222px

	&.hexicon-small
		margin-bottom -100px
		span
			transform scale(0.5)
			transform-origin 50% 0;

	&.hexicon-medium
		margin-bottom -40px
		color color-light-grey
		span
			transform scale(0.75)
			transform-origin 50% 0;

#view-getting-around

	.content
		padding 20px
		box-shadow 0px 1px 3px rgba(0, 0, 0, 0.1)

$foreground-blue
	color color-blue
	.hexicon span
		background-position 0 0
$foreground-yellow
	color color-yellow
	.hexicon span
		background-position -200px 0
$foreground-white
	color #fff
	.hexicon span
		background-position -400px 0
$foreground-dark-grey
	color color-dark-grey
	.hexicon span
		background-position -600px 0
$foreground-dark-blue
	color color-dark-blue
	.hexicon span
		background-position -800px 0

$background-yellow
	background-color color-yellow
	.hexicon span
		color color-yellow

$background-dark-grey
	background-color color-dark-grey
	.hexicon span
		color color-dark-grey

$background-blue
	background-color color-blue
	.hexicon span
		color color-blue

$background-light-grey
	background-color color-light-grey
	.hexicon span
		color color-light-grey

$background-purple
	background-color color-purple
	.hexicon span
		color color-purple

$background-red
	background-color color-red
	.hexicon span
		color color-red

$background-orange
	background-color color-orange
	.hexicon span
		color color-orange

.view-dialog

	h2
		color inherit
		font-size 24px
		margin 16px 0 40px
	h3
		@extends h2
		color inherit
		font-size 24px
		margin 40px 0 0

	main
		transform none

	background-image none

	&.palette-0
		@extend $background-yellow
		main
			@extend $foreground-dark-grey

	&.palette-1
		@extend $background-dark-grey
		main
			@extend $foreground-yellow

	&.palette-2
		@extend $background-blue
		main
			@extend $foreground-white

	&.palette-3
		@extend $background-light-grey
		main
			@extend $foreground-blue

	&.palette-4
		@extend $background-purple
		main
			@extend $foreground-blue

	&.palette-5
		@extend $background-light-grey
		main
			@extend $foreground-dark-blue

	&.palette-6
		@extend $background-red
		main
			@extend $foreground-yellow

	&.palette-7
		@extend $background-orange
		main
			@extend $foreground-white


@media (max-width: 480px)

	body
		background url('/img/back-repeat.jpg') repeat-x 0 0, url('/img/back-repeat-bottom.jpg') repeat, #f5f1e8

	.title-icon
		width 80px

	.subtitle
		h3
			font-size 26px
			height 47px

	h2
		font-size 30px
		margin-bottom 15px

	#schedule-listing
		h2
			margin-bottom 55px

	h3
		font-size 22px

	#view-questions
		h5
			font-size 24px

	#mood-wrapper.moods
		height 160px
		width 257px
		> a.mood
			height 92px
			width 82px
			span
				font-size 12px
				line-height 22px
				margin-top 36px
			&.excited
				left 0
			&.worried
				left 86px
			&.proud
				left 171px
			&.confused
				left 43px
				top 69px
			&.curious
				left 128px
				top 69px

	#schedule-locations
		left 50%
		margin-left -100px

	// Splash screen only for mobile screens
	#splash-screen
		display block
		cursor progress

	main, nav
		visibility hidden

	// JS and Persona ready!
	.state-ready

		#splash-screen
			display none
		main, nav
			visibility visible


	.hexicon.hexicon-medium
		margin-bottom -100px
		span
			transform scale(0.5)
			transform-origin 50% 0;

{'fraction_non_alphanumeric': 0.08066015806601581, 'fraction_numerical': 0.053231055323105535, 'mean_word_length': 2.5384509938313915, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1414798', 'n_tokens_mistral': 12528, 'n_tokens_neox': 9072, 'n_words': 2738}