website/_sass/_base.sass

@import "reset"

// TEXT
$h1-font-size: 40px
$h1-line-height: 40px

$h2-font-size: 42px
$h2-line-height: 60px

$h3-font-size: 26px
$h3-line-height: 32px

$h4-font-size: 26px
$h4-line-height: 40px

$h5-font-size: 18px
$h5-line-height: 36px

$p-font-size: 16px
$p-line-height: 22px


// header
$full-width-paddingX: 20px

$main-width: 100%
$main-max-width: 100%

$header-height: 80px

$logo-width: 180px

$nav-buttons-margin-left: 30px

$hamburger-size: 50px


// main nav
$main-nav-padding: 140px 0 30px
$main-nav-h5-margin-bottom: 1em
$main-nav-h3-margin-bottom: 0.6em
$nav-box-width: 20%
$nav-box-sibling-margin-left: calc(20% / 3)
$main-nav-main-sibling-margin-top: 60px
$main-nav-left-button-size: 50px
$main-nav-left-button-font-size: 18px


// hero
$hero-padding-top: 80px
$headline-wrapper-margin-bottom: 40px
$quickstart-button-padding: 0 50px
$vendor-strip-height: 88px
$vendor-strip-font-size: 16px

// video
$video-section-height: 200px

@import "size"

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////

body
	background-color: white

section
	position: relative
	background-color: white

section, header, footer
	main
		position: relative
		margin: auto

.button
	display: inline-block
	border-radius: 6px
	padding: 0 20px
	line-height: 40px
	color: white
	background-color: $blue
	text-decoration: none

#cellophane
	position: fixed
	top: 0
	left: 0
	width: 100%
	height: 100%
	display: none


// HEADER
header
	position: fixed
	top: 0
	left: 0
	width: 100%
	z-index: 8888
	background-color: transparent
	box-shadow: 0 0 0 transparent
	overflow: hidden
	transition: 0.3s
	text-align: center


.logo
	position: relative
	float: left
	display: block
	width: 180px
	height: 88px
	top: 0
	left: 0
	transform: none
	background-image: url(../images/nav_logo.svg)
	background-size: contain
	background-position: center center
	background-repeat: no-repeat


#docs
	.flyout-button
		position: fixed
		top: 20px
		left: 20px
		width: 50px
		height: 50px
		background-image: url(../images/toc_icon.png)
		background-position: center center
		background-repeat: no-repeat
		background-size: auto
		border-radius: 50%
		transition: 0.3s
		z-index: 99999

	&.open-nav .flyout-button
		display: none

	.logo
		position: absolute
		top: 40px
		left: 50%
		transform: translate(-50%, -50%)
		display: block
		width: 45px
		height: 44px
		background-image: url(../images/favicon.png)


	&.flip-nav .flyout-button
		background-image: url(../images/toc_icon_grey.png)


.nav-buttons
	float: right

#viewDocs, #tryKubernetes
	display: none

#viewDocs
	border: 2px solid white
	background-color: transparent
	transition: 0.3s

	&:hover
		background-color: white
		color: $dark-grey

#tryKubernetes
	width: 0
	padding: 0 0
	border: 1px solid transparent
	background-color: transparent
	text-align: center
	white-space: nowrap
	vertical-align: middle
	overflow: hidden
	transition: 0.3s

#hamburger
	display: inline-block
	position: relative
	vertical-align: middle
	padding: 0
	border: 0
	background: none

	div, &:before, &:after
		position: absolute
		left: 15%
		width: 70%
		height: 2px
		background-color: $blue
		transition: 0.3s
		content: ""

	div
		top: calc(50% - 1px)

	&:before
		top: 24%

	&:after
		bottom: 24%

	&:hover
		div, &:before, &:after
			background-color: white

#mainNav
	h5
		color: $blue
		font-weight: normal

	main
		white-space: nowrap
		overflow: hidden
		clear: both

	.nav-box
		float: left
		white-space: normal

	h3
		a
			color: $blue
			text-decoration: none

// FLIP NAV
.flip-nav
	header
		background-color: white


// OPEN NAV
.open-nav
	body
		overflow: hidden

	#cellophane
		display: block
		z-index: 9998

	header
		background-color: #e8e8e8
		z-index: 9999

	#hamburger
		div
			opacity: 0

		&:before, &:after
			left: 12px
			transform-origin: 0 1px

		&:before
			transform: rotate(45deg)

		&:after
			transform: rotate(-45deg)

.open-nav, .y-enough
	#tryKubernetes
		width: 150px
		background-color: $blue
		border-color: $blue


.flip-nav, .open-nav
	header
		box-shadow: 0 1px 2px $medium-grey

	#viewDocs
		border-color: $dark-grey
		color: $dark-grey

		&:hover
			border-color: $blue
			background-color: $blue
			color: white

	#hamburger:hover
		div, &:before, &:after
			background-color: $dark-grey



// HERO
#hero
	background-image: url(../images/texture.png)
	background-color: $dark-grey
	text-align: center
	padding-left: 0
	padding-right: 0
	margin-bottom: 0

// VENDOR STRIP
#vendorStrip
	position: relative
	background-color: transparentize(white, 0.9)
	font-weight: 100
	white-space: nowrap
	text-align: center

// FOOTER
footer
	width: 100%
	background-image: url(../images/texture.png)
	background-color: $dark-grey

	main
		padding: 20px 0

	nav
		a
			width: 100%
			text-align: center
			display: inline-block
			margin: 10px 0
			font-size: 24px
			font-weight: 300
			color: white
			text-decoration: none


	.social
		margin: 20px 0

		div
			text-align: center
			margin-bottom: 20px

		div:last-child
			margin: 30px 0

		span
			display: block
			margin-bottom: 8px

		input
			text-align: center


	//.social
	//	position: relative
	//	text-align: center
	//
	//	a, label
	//		margin: 20px 0
	//
	//	a
	//		vertical-align: middle
	//
	//	a.line-break
	//		display: block
	//
	//
	//	label
	//		//float: right
	//		display: inline-block
	//		width: 100%
	//		height: 50px
	//		line-height: 50px
	//		font-weight: 100
	//		white-space: nowrap
	//
	//		input
	//			margin-left: 8px
	//			width: 300px
	//			max-width: 60%
	//
	//
	//.social
	//	a
	//		float: left
	//		margin-right: 10px
	//
	//	a:nth-child(4)
	//		clear: left




#search, #wishField
	background-color: transparent
	padding: 10px
	font-size: 16px
	font-weight: 100
	color: white
	border: 1px solid white
	transition: 0.3s

	&:focus
		background-color: $light-grey
		color: $dark-grey

.social a
	display: inline-block
	background-image: url(../images/social_sprite.png)
	background-repeat: no-repeat
	background-size: auto
	width: 50px
	height: 50px
	border-radius: 5px
	margin-right: 10px

	&:hover
		background-color: #fff

	span
		position: absolute
		display: block
		height: 0
		overflow: hidden

a.twitter
	background-position: 0 0

	&:hover
		background-position: 0 100%

a.stack-overflow
	background-position: -50px 0

	&:hover
		background-position: -50px 100%

a.slack
	background-position: -100px 0

	&:hover
		background-position: -100px 100%

a.github
	background-position: -150px 0

	&:hover
		background-position: -150px 100%

a.mailing-list
	background-position: -200px 0

	&:hover
		background-position: -200px 100%

a.calendar
	background-position: -250px 0

	&:hover
		background-position: -250px 100%

#viewDocs
	display: none

section
	background-color: white

#hero
	background-color: $dark-grey

	h5
		margin: 20px 0
		line-height: 28px

#vendorStrip
	position: relative

	ul
		float: left

	li
		display: inline-block
		height: 100%

	a
		display: block
		height: 100%
		color: white
		font-size: 0.75em
		font-weight: bold

	li + li
		margin-left: 20px


#docs
	#vendorStrip
		line-height: 44px

		ul
			float: none

		#searchBox
			float: none
			display: block
			width: 80%
			margin: 0 auto
			height: 44px
			line-height: 44px

		#search
			width: 100%
			padding: 0 10px
			height: 30px
			line-height: 30px
			font-size: 16px
			vertical-align: top


#encyclopedia
	position: relative
	padding: 50px 50px 20px 20px
	overflow: hidden

	& > div
		height: 100%

#docsToc
	position: fixed
	background-color: white
	top: 0
	left: 0
	width: 0
	height: 100vh
	overflow: hidden
	padding: 50px 0
	z-index: 999999
	transition: 0.3s


	.yah
		& > .title
			background-color: $light-grey
			border-left: 3px solid $blue
			padding: 7.5px 10px 7.5px 18px
			margin-left: -21px
			color: $blue

.open-toc
	body
		overflow: hidden

	#docsToc
		padding: 50px 20px
		width: 400px
		max-width: 100vw
		overflow-y: auto

.pi-accordion
	margin-left: -20px

	.container
		padding-left: 20px

	.item
		overflow: hidden

	.title
		color: $dark-grey
		position: relative
		padding: 7.5px 10px 7.5px 18px
		cursor: pointer
		transition: 0.3s

		&:hover
			color: $blue

	a.item > .title
		color: black
		padding-left: 0

		&:hover
			color: $blue

	div.item > .title
		&:before
			content: ""
			position: absolute
			top: 12px
			left: 2px
			border-style: solid
			border-width: 5px 0 5px 8px
			border-color: transparent transparent transparent $blue
			transform: rotate(0deg)
			transition: 0.3s

	.wrapper
		position: relative
		width: 100%
		transition: height 0.3s

	.content
		padding-left: 20px
		opacity: 0
		transition: 0.3s

	.item.on
		& > .title:before
			transform: rotate(90deg)

		& > .wrapper > .content
			opacity: 1


.pi-pushmenu
	display: none
	position: fixed
	top: 0
	width: 100%
	height: 100%
	opacity: 0
	transition: opacity 0.3s

	&.on
		opacity: 1

	.overlay
		position: fixed
		top: 0
		left: 0
		width: 100%
		height: 100%
		background-color: rgba(0, 0, 0, 0.4)

	.sled
		position: absolute
		top: 0
		width: 0
		height: 100%
		background-color: white
		overflow: auto
		transition: 0.3s

	&.on .sled
		width: 400px
		max-width: 100vw

	.top-bar
		height: 0
		line-height: 60px
		background-color: #444

	ul
		margin-top: 25px

	li
		position: relative
		display: block
		width: 100%
		min-height: 45px
		padding: 0 60px 0 20px
		border-bottom: 1px solid #cccccc

	a
		display: inline-block
		width: 100%
		height: 45px
		line-height: 45px
		font-family: "Roboto", sans-serif
		font-size: 20px
		color: $blue

	.button
		background: none
		padding: 0

	ul ul
		padding: 0 20px

		li
			min-height: 40px

		a
			height: 40px
			line-height: 40px
			font-size: 18px
			color: lighten(#222222, 20%)


.push-menu-close-button
	position: absolute
	top: 0
	right: 0
	width: 50px
	height: 50px

	&:before, &:after
		content: ""
		position: absolute
		top: calc(50% - 1px)
		left: 25%
		width: 50%
		height: 2px
		background-color: black

	&:before
		transform: rotate(45deg)

	&:after
		transform: rotate(-45deg)



#docsContent
	position: relative
	float: right
	//width: calc(100% - 400px)
	width: 100%

	$toc-margin: 15px
	$header-clearance: 40px

	* + h2, * + h3, * + h4, * + h5, * + h6
		margin-top: 30px

	h1, h2, h3, h4, h5, h6
		line-height: normal
		font-weight: 500
		margin-bottom: 30px
		padding-bottom: 10px
		border-bottom: 1px solid #cccccc

		&:before
			content: ''
			display: block
			height: 100px
			margin-top: -100px
			background-color: red
			visibility: hidden

	h1
		font-size: 32px
		padding-right: 60px

	h2
		font-size: 28px

	h3
		font-size: 24px

	h4
		font-size: 20px

	h5, h6
		font-size: 16px

	p
		font-size: 16px
		font-weight: 300
		line-height: 1.25em

	p + p
		margin-top: 10px

	code
		display: inline-block
		box-sizing: border-box
		background-color: $light-grey
		color: $dark-grey
		font-family: $mono-font
		vertical-align: bottom
		font-size: 14px
		font-weight: bold
		padding: 2px 4px

	a code
		color: $blue
		text-decoration: underline

	pre .pi, pre .s
		margin: 0
		padding: 0

	.highlight code span, code, pre code
		font-family: "Roboto Mono", monospace

	code, pre code
		color: #303030

	pre code
		padding: 0

	pre
		background-color: #f7f7f7
		display: block
		margin: 20px 0
		padding: 15px
		overflow-x: auto

	h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
		font-family: inherit
		font-size: inherit
		background-color: transparent

	.includecode, .includecode th, .includecode td
		padding: 0 !important

	.includecode th
		text-align: right !important
		padding: 10px !important

	.includecode th a, .includecode th a code
		color: white !important
		background-color: transparent !important

	.includecode pre
		margin: 0 !important

	ul li
		list-style: disc

	ol li
		list-style: decimal

	ul, ol
		margin: 20px 0
		padding-left: 30px
		font-weight: 300

	ul ul, ol ol, ul ol, ol ul
		margin: 0.75em 0

	li
		margin-bottom: 0.75em

	table
		width: 100%
		border: 1px solid #ccc
		border-spacing: 0
		margin-top: 30px
		margin-bottom: 30px

	thead, tr:nth-child(even)
		background-color: $light-grey

	thead
		background-color: #555
		color: white

	th, td
		padding: 8px
		text-align: left
		margin: 0

	th
		font-weight: normal

	td
		font-size: 0.85em
	
	#editPageButton
		position: absolute
		top: -25px
		right: -25px
		width: 50px
		height: 50px
		line-height: 50px
		border-radius: 50%
		white-space: nowrap
		text-indent: 50px
		overflow: hidden
		background: $blue url(../images/pencil.png) no-repeat
		background-position: 1px 1px
		background-size: auto

	#markdown-toc
		margin-bottom: 20px

		ul, li
			list-style: disc
			color: $blue

		ul
			padding: 0 15px
			margin: 0

		li
			padding: 0
			line-height: 1.5em
			margin-bottom: 0

		a
			position: relative
			color: $blue
			font-weight: 700

	img
		max-width: 100%

.fixed footer
	position: fixed
	bottom: 0

#miceType
	clear: both


html.search #docsContent
	position: relative
	float: none
	width: 90%
	max-width: 850px
	margin: 0 auto

	#editPageButton
		display: none

	table
		border: 0
		margin-bottom: 0

	td
		padding: 0

	h1
		margin-bottom: 0
		border-bottom: 0
		padding-bottom: 0
		padding-left: 8px






// ocean nodes
$ocean-nodes-padding-Y: 60px
$ocean-nodes-main-margin-bottom: 60px
$ocean-nodes-h3-margin-bottom: 30px

// video
$video-section-height: 200px

// features
$features-h3-margin-bottom: 20px
$feature-box-div-width: 100%
$feature-box-margin-bottom: 0
$feature-box-div-margin-bottom: 40px


// Home-specific

#home
	&.flip-nav, &.open-nav
		.logo
			background-image: url(../images/nav_logo2.svg)

	#hero
		margin-bottom: 0
		padding-bottom: 1px

		main
			padding: 0 10px
			margin-bottom: 30px

		#vendorStrip
			display: none


// OCEAN NODES
#oceanNodes
	padding-top: $ocean-nodes-padding-Y
	padding-bottom: $ocean-nodes-padding-Y

	main
		margin-bottom: $ocean-nodes-padding-Y

	.image-wrapper
		max-width: 75%
		margin: 0 auto 20px
		text-align: center

		img
			width: 100%
			max-width: 160px

	main:first-child
		.image-wrapper
			max-width: 100%

			img
				max-width: 491px

	h3
		margin-bottom: $ocean-nodes-h3-margin-bottom


// Video thingy
#video
	height: $video-section-height

#video
	width: 100%
	position: relative
	background-image: url(../images/kub_video_thm.jpg)
	background-position: center center
	background-size: cover


	& > .light-text
		display: none
		position: absolute
		top: 50%
		left: 75%
		width: 50%
		max-width: 600px
		min-width: 500px
		padding-right: 10%
		transform: translate(-50%, -50%)
		color: white

	h2
		font-size: 32px
		line-height: 44px
		margin-bottom: 20px

	p
		margin-bottom: 20px

	#desktopShowVideoButton
		position: relative
		font-size: 24px
		background-color: white
		border-radius: 8px
		color: $blue
		padding: 15px 30px 15px 80px

		&:before
			content: ""
			position: absolute
			@include pureCenter(40px)
			width: 0
			height: 0
			border-style: solid
			border-width: 10px 0 10px 20px
			border-color: transparent transparent transparent $blue

	#mobileShowVideoButton
		@include pureCenter
		width: 80px
		height: 80px
		border-radius: 50%
		background-color: transparent
		border: 5px solid rgba(255, 255, 255, 0.2)
		overflow: visible

		&:after
			@include pureCenter
			left: 40px
			content: ""
			width: 0
			height: 0
			border-style: solid
			border-width: 20px 0 20px 30px
			border-color: transparent transparent transparent #ffffff

#videoPlayer
	@include fullScreen
	background-color: rgba(0, 0, 0, 0.9)
	display: none

	iframe
		@include pureCenter
		@include maintain-aspect-ratio

	#closeButton
		position: absolute
		top: 20px
		right: 20px
		width: 50px
		height: 50px
		border: 2px solid transparent
		transition: 0.3s

		&:before, &:after
			content: ""
			position: absolute
			top: calc(50% - 1px)
			left: 10%
			width: 80%
			height: 2px
			background-color: white

		&:before
			transform: rotate(45deg)

		&:after
			transform: rotate(-45deg)

		&:hover
			border-color: white




// Features
#features
	padding-top: 140px
	background-color: $light-grey
	background-image: url(../images/wheel.png)
	background-position: center 60px
	background-repeat: no-repeat
	background-size: auto

.feature-box
	//padding: 50px 0
	width: 100%
	overflow: hidden
	clear: both

	h4
		line-height: normal
		margin-bottom: 15px

	& > div:first-child
		float: left

	& > div:last-child
		float: right

#features
	h3
		margin-bottom: $features-h3-margin-bottom

	.feature-box
		margin-bottom: $feature-box-margin-bottom

		& > div
			width: $feature-box-div-width
			margin-bottom: $feature-box-div-margin-bottom




// Community

#community
	&.open-nav, &.flip-nav
		.logo
			background-image: url(../images/nav_logo2.svg)

	#hero
		padding-bottom: 20px

	#mainContent
		padding: 20px 0

		main
			max-width: none

		a
			color: $blue

		.content
			margin-bottom: 30px
			padding: 30px 0

			h1, h2, h3, h4, h5, h6, p
				line-height: normal
				max-width: 1200px
				padding: 0 20px
				margin: 0 auto 20px

			&:nth-child(even)
				background-color: $light-grey

		.company-logos
			text-align: center
			max-width: 1200px
			margin: 0 auto

			img
				width: auto
				margin: 10px
				background-color: $light-grey

		#calendarWrapper
			position: relative
			width: 80vw
			height: 60vw
			max-width: 1200px
			max-height: 900px
			margin: 20px auto

		iframe
			position: absolute
			border: 0
			width: 100%
			height: 100%

// Talk to us
#talkToUs
	h3, h4
		text-align: center

	h3
		margin-bottom: 15px

	h4
		line-height: normal
		margin-bottom: 50px

		br
			display: none

	#bigSocial
		overflow: hidden

		div
			width: 100%
			float: left
			padding: 30px
			padding-top: 110px
			background-position: center top
			background-size: auto
			background-repeat: no-repeat

		div:nth-child(1)
			background-image: url(../images/twitter_icon.png)

		div:nth-child(2)
			background-image: url(../images/github_icon.png)

		div:nth-child(3)
			background-image: url(../images/slack_icon.png)

		div:nth-child(4)
			background-image: url(../images/stackoverflow_icon.png)

		div + div
			margin-top: 20px
			margin-left: 0

		a
			display: inline-block
			color: $blue
			font-size: 24px
			font-weight: 400
			text-decoration: none
			margin-bottom: 15px

		a, p
			text-align: center
			width: 100%