conference_main/static/conference_main/styles/main.sass

@@ -54,6 +54,25 @@ body.is-scrolled
 	max-height: calc(var(--spacer) * 11.25)
 	min-height: initial
 
+.hero-gradient
+	background: linear-gradient(0deg, var(--body-color-bg) 0%, rgba(0, 0, 0, 0) 100%)
+	bottom: 0
+	height: calc(var(--spacer) * 8)
+	left: 0
+	position: absolute
+	width: 100%
+
+.hero-lg
+	--hero-max-height: calc(var(--spacer) * 50)
+	--hero-min-height: calc(var(--spacer) * 45)
+
+	&.is-container-overlap
+		&+.container
+			--page-with-header-content-offset: calc(var(--spacer) * 16)
+
+			+media-sm
+				--page-with-header-content-offset: calc(var(--spacer) * 14)
+
 .btn-float-right
 	position: absolute
 	right: calc(var(--spacer) * 2)

conference_main/templates/conference_main/base.pug

@@ -4,7 +4,8 @@
 
 | {% block header %}
 | {% block jumbotron %}
-.hero.is-container-overlap
+// TODO: @back-end make '.hero-lg' optional
+.hero.hero-lg.is-container-overlap
 	.container
 		.hero-content
 			{% if edition.logo %}
@@ -22,7 +23,10 @@
 			{% endif %}
 
 	.hero-bg(style="background-image: url({{ edition.header.url }}); background-position-y: 50%")
+	// TODO: @back-end make '.hero-overlay' optional
 	.hero-overlay
+	// TODO: @back-end make '.hero-gradient' optional
+	.hero-gradient
 | {% endblock jumbotron %}
 | {% endblock header %}