Refresh styling on /welcome

src/styles/_join.sass

@@ -1,36 +1,255 @@
-.navbar-backdrop.join
-	background-color: white
-	+media-xs
-		background-size: initial
 .join
 	position: relative
 
+	nav.navbar
+		background-color: white
+
+		.navbar-brand
+			color: $color-text
+
+		li a.navbar-item
+			color: $color-text
+
+		.navbar-container
+			+container-behavior
+
 	#page-header
-		display: block
+		min-height: 500px
-		padding: 30px 0 150px 0
-		font-size: .9em
 
-		.container
+		.page-title,
-			+media-sm
+		.page-title-summary
-				margin-left: 0
+			line-height: 1.2em
-
-		.page-title, .page-title-summary
 			text-align: left
-			text-shadow: none
+			text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .5)
 
-			ul
+		.page-title-summary
-				margin-bottom: 25px
+			font-size: 1.4em
-
-				li.special
-					color: $color-danger
-
-		.page-header-cta-container
-			margin: 30px 0 50px 60px
-			justify-content: flex-start
 
 	li.special
 		color: $color-success
 		font-weight: bold
 
-	.page-section-container .page-card-side
+	.page-card
-		padding: 60px 25px
+		&:nth-child(even)
+			background-color: white
+
+		&-header
+			margin-bottom: 0
+
+		&-side
+			+media-xs
+				width: 100%
+				max-width: 100%
+
+			&.text
+				+media-xs
+					padding-left: 50px
+				padding:
+					bottom: 150px
+					top: 150px
+
+		&.right
+			background-color: $color-background-light
+
+			.page-card-title,
+			.page-card-summary
+				padding-left: 25px
+
+			.page-card-title:after
+				left: 25px
+
+			.text
+				+media-xs
+					padding-left: 25px
+
+		&.intro
+			+media-xs
+				margin-left: 50px
+
+			.page-card-side
+				+media-sm
+					max-width: 500px
+				max-width: 600px
+
+			padding:
+				bottom: 0
+				top: 50px
+
+			&+.page-card-header
+				padding-top: 0
+
+			.page-card-summary
+				font-size: 1.2em
+
+			.page-card-image
+				align-items: center
+				display: flex
+				height: 100%
+				justify-content: center
+
+		&.light
+			overflow: hidden
+			position: relative
+
+			.learn
+				color: white
+				font-size: .8em
+				text-decoration: underline
+
+			.page-card
+				&-title
+					color: white
+					font-weight: bold
+
+					&:after
+						border-color: white
+
+				&-summary
+					color: white
+					position: relative
+					text-shadow: 1px 1px 0 rgba(black, .5), 0 0 25px rgba(black, .2)
+					z-index: 1
+
+					p
+						font-size: .9em
+
+					a
+						color: white
+						text-decoration: underline
+
+			a.page-card-cta
+				background: #ff4970
+				border-radius: 3px
+				border: none
+				box-shadow: 1px 1px 0 rgba(black, .2)
+				font-size: .8em
+				font-weight: bold
+				margin-top: 25px
+				padding: 7px 20px
+				text-decoration: none
+				text-shadow: none
+
+				&:hover
+					background: lighten(#ff4970, 5%)
+
+			.page-card-image
+				img
+					+media-xs
+						display: none
+					max-width: initial
+					position: absolute
+					width: initial
+					z-index: 0
+
+		&.training
+			margin-top: 45px
+
+			a.page-card-cta
+				background: #0082ff
+
+			.page-card-image
+				img
+					right: 50px
+					top: 50%
+					transform: translateY(-50%)
+
+		&.open-movies
+			.page-card-image
+				img
+					top: 50px
+					left: 50px
+
+		&.services
+			.page-card-image
+				img
+					left: 50px
+
+		&.subscribe
+			padding: 40px 0
+			text-align: center
+
+			span strong
+				color: $color-danger
+
+			.page-card-side
+				width: 100%
+				max-width: 100%
+
+			.page-card-title
+				line-height: 1.5em
+				color: white
+				text-align: center
+				padding-bottom: 15px
+
+				&:after
+					border: none
+
+			.page-card-summary
+				color: $color-text-light-primary
+
+			.page-card-cta
+				text-align: center
+				font-size: 1.3em
+				padding: 7px 35px
+				margin-right: initial
+				border: thin solid rgba(white, .8)
+				border-radius: 3px
+
+
+	.training-other
+		color: $color-text-dark-secondary
+		font-size: .9em
+		padding: 30px
+		text-align: center
+
+		a
+			color: $color-text-dark-secondary
+
+	.pricing
+		+media-xs
+			padding-top: 30px
+		margin-bottom: 0
+		padding-bottom: 100px
+
+	.supported-by
+		img
+			max-width: 100%
+
+	.assets
+		padding-bottom: 80px
+
+	.flex
+		+media-xs
+			flex-direction: column
+
+		display: flex
+
+		.box
+			flex: 1
+			margin: 20px
+
+	.page-triplet-container
+		.triplet-card
+			+media-xs
+				margin-top: 20px
+
+	.navbar
+		.nav-item-sign-in
+			a.navbar-item
+				background-color: $color-primary
+				border: none
+				border-radius: 3px
+				color: white
+				height: auto
+				font-weight: bold
+				margin-top: 5px
+				margin-left: 10px
+				padding: 10px 20px
+
+				&:hover
+					background-color: lighten($color-primary, 10%)
+					box-shadow: none
+
+.container.wide-on-sm
+	+media-sm
+		width: 100%

src/styles/_pages.sass

@@ -353,35 +353,8 @@ $page-card-icon-size: 75px
 			+position-center-translate
 
 
-	/* Subscribe specifics */
-	&.subscribe
-		background-color: $color-background-nav
-		text-align: center
-		padding: 60px 0
-
-		.page-card-side
-			width: 100%
-			max-width: 100%
-
-		.page-card-title
-			color: white
-			text-align: center
-			padding-bottom: 25px
-
-			&:after
-				border: none
-
-		.page-card-summary
-			color: $color-text-light-primary
-
-		.page-card-cta
-			text-align: center
-			font-size: 1.5em
-			padding: 10px 40px
-			margin-right: initial
 
 a.page-card-cta
-	+button($color-primary, 3px, true)
 	padding: 5px 30px
 	margin-right: 25px
 	font-size: 1em
@@ -457,106 +430,3 @@ a.page-card-cta
 	.page-card-header.dark
 		&:after
 			border: none
-
-.join.navbar-backdrop-overlay
-	background: linear-gradient(rgba(white, .3) 0%, transparent 60%)
-
-.join
-	span.text-background
-		+text-background(white, darken($color-primary, 30%), 2px, 5px 0)
-
-	p
-		padding: 0
-		margin-left: -10px
-
-	ul
-		margin: 0
-		padding: 0
-
-		li span.text-background
-			padding-left: 15px
-			position: relative
-			left: -10px
-			&:before
-				content: "·"
-				color: white
-				position: relative
-				left: -10px
-
-	#page-header
-		padding: 0 0 0 20px
-		.page-title
-			font:
-				size: 2.8em
-
-		.page-title-summary
-			font:
-				style: normal
-				size: 1.4em
-				weight: 400
-
-		.page-header-cta-container
-			margin: 0
-
-	.page-card
-		&:nth-child(even)
-			background-color: white
-		&.right
-			background-color: $color-background-light
-
-			.page-card-title,
-			.page-card-summary
-				padding-left: 25px
-
-			.page-card-title:after
-				left: 25px
-
-		&.dark.right
-			.page-card-title,
-			.page-card-summary
-				padding-left: 0
-
-			.page-card-title:after
-				left: 0
-
-		&.oneofus
-			display: block
-			text-align: center
-			min-height: initial
-			padding: 25px
-			color: transparent
-			background-color: $color-background-light
-			border-top: thin solid $color-background
-			font:
-				size: 1.4em
-
-			transition: color 350ms ease-in-out
-
-			a, strong
-				color: transparent
-				transition: color 350ms ease-in-out
-
-			&.active
-				color: $color-text-dark-primary
-				a
-					color: $color-primary
-				strong
-					color: $color-danger
-
-	.page-card-header
-		margin-bottom: 0
-
-	.page-card-header.dark
-		margin-bottom: -50px
-
-		&:after
-			border: none
-
-	.page-card-side
-		+media-xs
-			width: 100%
-			max-width: 100%
-
-		.page-card-image
-			img
-				border-radius: 3px