mod-build 4.0.91 → 4.0.92

package/src/shared-components/foot-assets/foot-assets.html

@@ -0,0 +1,107 @@
+{{#unless this.page.footAssetsConfig.disableJquery}}
+	<!-- build:js {{#if this.buildRootPath}}{{this.buildRootPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}scripts/vendor/jquery.js -->
+	<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{/if}}node_modules/jquery/dist/jquery.js" {{#if this.page.footAssetsConfig.deferJquery}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncJquery}}async{{/if}}></script>
+	<!-- endbuild -->
+{{/unless}}
+
+{{#unless this.page.footAssetsConfig.disableModUtils}}
+	<script src="/resources/scripts/mod-utils/modutils-bc275eb41af515f626ef.min.js" {{#if this.page.footAssetsConfig.deferModUtils}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncModUtils}}async{{/if}}></script>
+{{/unless}}
+
+<!-- load additionalAssets only from node_modules -->
+{{#if page.footAssetsConfig.additionalAssets}}
+	{{#each page.footAssetsConfig.additionalAssets}}
+		{{#xif "!this.bundleInAllJSChunk && this.isNodeModule"}}
+			<!-- build:js {{#if this.buildPath}}{{this.buildPath}}{{else}}{{#unless ../this.useRelativeBuildPath}}/{{/unless}}scripts/vendor{{/if}}/{{this.chunkName}} -->
+			<script src="{{#if ../this.nodeModulesPath}}{{../this.nodeModulesPath}}{{/if}}node_modules/{{this.src}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
+			<!-- endbuild -->
+		{{/xif}}
+	{{/each}}
+{{/if}}
+
+{{#unless this.page.footAssetsConfig.disableModCarousel}}
+	<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}shared-components/carousel/carousel.min.js" {{#if this.page.footAssetsConfig.deferModCarousel}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncModCarousel}}async{{/if}}></script>
+{{/unless}}
+
+{{#if this.page.footAssetsConfig.includeCallrailJs}}
+	<script src="/resources/scripts/callrail/callrail-14011d73b50a928de4b4.min.js" defer></script>
+{{/if}}
+
+<!-- load additionalAssets from site-level, CDN or third party CDN -->
+{{#if page.footAssetsConfig.additionalAssets}}
+	{{#each page.footAssetsConfig.additionalAssets}}
+		{{#xif "!this.bundleInAllJSChunk && !this.isNodeModule"}}
+				<script src="
+				{{#if ../this.isLocal}}
+					{{#if this.localSrc}}
+						{{this.localSrc}}
+					{{else}}
+						{{#if this.useModCdn}}
+							https://{{../nodeEnv}}/{{this.src}}
+						{{else}}
+							{{this.src}}
+						{{/if}}
+					{{/if}}
+				{{else}}
+					{{#if this.useModCdn}}
+						https://{{../nodeEnv}}/{{this.src}}
+					{{else}}
+						{{this.src}}
+					{{/if}}
+				{{/if}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
+		{{/xif}}
+	{{/each}}
+{{/if}}
+
+{{#xif " !this.page.footAssetsConfig.disableBSTransition && this.path !== 'thankyou' && this.path !== 'sorry' "}}
+	<!-- build:js {{#if this.buildRootPath}}{{this.buildRootPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}scripts/vendor/bootstrap.js -->
+		<script src="{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{/if}}node_modules/bootstrap-sass/assets/javascripts/bootstrap/transition.js" defer></script>
+	<!-- endbuild -->
+{{/xif}}
+
+{{#xif "(this.includeModFormIncludes || (this.path !== 'thankyou' && this.path !== 'sorry'))" }}
+	{{#xif " this.page.footAssetsConfig.useNewModForm === true "}}
+		<script src="/resources/scripts/mod-form/form/homeowner-19a121b0e596042326f4.min.js" {{#if this.page.footAssetsConfig.deferNewModForm}}defer{{/if}} {{#if this.page.footAssetsConfig.asyncNewModForm}}async{{/if}}></script>
+	{{else}}
+		{{#unless this.page.footAssetsConfig.disableModForm}}
+			<script src="https://{{nodeEnv}}/quote/resources/mod-form/mod-form.min.js"></script>
+		{{/unless}}
+		{{#unless this.page.footAssetsConfig.disableQsForm}}
+			<script src="https://{{nodeEnv}}/quote/resources/mod-form/qs-form.min.js"></script>
+		{{/unless}}
+	{{/xif}}
+{{/xif}}
+
+<!-- QS white label assets -->
+{{#xif "this.path !== 'thankyou' && this.path !== 'sorry' && this.isQSPage === true" }}
+	<!-- build:js(src) {{#if this.buildRootPath}}{{this.buildRootPath}}{{else}}{{#unless this.useRelativeBuildPath}}/{{/unless}}{{/if}}scripts/components/all.js -->
+	{{#unless this.page.footAssetsConfig.disableFormJs}}
+		<script src="/scripts/components/form.js" defer></script>
+	{{/unless}}
+	{{#unless this.page.footAssetsConfig.disableProgressBarJS}}
+		<script src="/scripts/components/progress-bar.js" defer></script>
+	{{/unless}}
+	{{#unless this.page.footAssetsConfig.disableExpandCollapse}}
+		<script src="/scripts/components/expand-collapse.js" defer></script>
+	{{/unless}}
+	{{#if page.footAssetsConfig.additionalAssets}}
+		{{#each page.footAssetsConfig.additionalAssets}}
+			{{#xif "this.bundleInAllJSChunk && !this.isNodeModule"}}
+				<script src="{{this.src}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
+			{{/xif}}
+		{{/each}}
+	{{/if}}
+	<!-- endbuild -->
+{{/xif}}
+
+{{#if this.path}}
+	<script src="{{#if this.src}}{{this.src}}{{else}}scripts{{/if}}/{{this.path}}.js" defer></script>
+{{/if}}
+
+{{#unless this.page.footAssetsConfig.disableFooter}}
+	<script src="/resources/scripts/footer/footer-component-46dc0d7ca6af4fc3b76b.min.js" data-type="{{#if isQSPage}}qs{{else}}mod{{/if}}" async defer></script>
+{{/unless}}
+
+{{#if this.page.footAssetsConfig.devOpsTrackingId}}
+	<!-- {{uppercase this.page.footAssetsConfig.devOpsTrackingId}} -->
+{{/if}}

package/src/shared-components/form-tcpa/form-tcpa-spanish.html

@@ -0,0 +1,61 @@
+<div class="tcpa form-tcpa" {{#if this.hidden}}style="display:none;"{{/if}}>
+	{{#unless this.hidehr}}
+		<hr>
+	{{/unless}}
+	<span class="tcpa-copy--spanish">La comunicación quizás sea en inglés.</span>
+	<span id="tcpa-copy" class="tcpa-copy" data-tcpa-loaded>
+		{{{this.tcpaText}}}
+	</span>
+	<span class="tcpa-copy--spanish">Respetamos su privacidad y queremos informarle algunas cosas. Al enviar esta solicitud, autoriza a Modernize y a hasta cuatro empresas de servicios del hogar a llamarlo al número de teléfono proporcionado para analizar su proyecto. Usted acepta que algunos pueden utilizar marcación automática, mensajes pregrabados o mensajes SMS para comunicarse con usted y que de ninguna manera está obligado a comprarles ningún producto o servicio. Es totalmente su elección. Consulte nuestro Aviso de privacidad y nuestros Términos de uso.</span>
+</div>
+<style>
+	.tcpa-copy--spanish {
+		display: block;
+		margin: 10px 0;
+	}
+	.tcpa-copy label {
+		cursor: pointer;
+		font-weight: bold;
+		margin: 0;
+		padding: 0 0 0 18px;
+		position: relative;
+		white-space: nowrap;
+	}
+	.tcpa-copy input[type=checkbox]{
+		background: 0 0;
+		border-radius: 0;
+		left: 2px;
+		margin: 0;
+		position: absolute;
+		top: 1px;
+	}
+	.tcpa-copy input[type=checkbox]:before {
+		background: #FFF;
+		border: 1px solid #949494;
+		border-radius: 2px;
+		box-shadow: none;
+		color: #FFF;
+		content: '';
+		display: block;
+		font-family: 'modicons-fill';
+		height: 12px;
+		text-align: center;
+		transition: color .15s ease;
+		width: 12px;
+	}
+	.tcpa-copy input[type=checkbox]:checked:before{
+		background-color: #3678BA;
+		border: 0;
+		color: #FFF;
+		content: '\e920';
+		font-size: 8px;
+		line-height: 12px;
+	}
+	.tcpa-copy input[type=checkbox]:focus {
+		outline: 1px solid #2E669E !important;
+		outline-offset: 1px;
+	}
+	.tcpa-copy a {
+		font-weight: bold;
+	}
+</style>

package/src/shared-components/form-tcpa/form-tcpa.html

@@ -0,0 +1,55 @@
+<div class="tcpa form-tcpa" {{#if this.hidden}}style="display:none;"{{/if}}>
+	{{#unless this.hidehr}}
+		<hr>
+	{{/unless}}
+	<span id="tcpa-copy" class="tcpa-copy" data-tcpa-loaded>
+		{{{this.tcpaText}}}
+	</span>
+</div>
+<style>
+	.tcpa-copy label {
+		cursor: pointer;
+		font-weight: bold;
+		margin: 0;
+		padding: 0 0 0 18px;
+		position: relative;
+		white-space: nowrap;
+	}
+	.tcpa-copy input[type=checkbox]{
+		background: 0 0;
+		border-radius: 0;
+		left: 2px;
+		margin: 0;
+		position: absolute;
+		top: 1px;
+	}
+	.tcpa-copy input[type=checkbox]:before {
+		background: #FFF;
+		border: 1px solid #949494;
+		border-radius: 2px;
+		box-shadow: none;
+		color: #FFF;
+		content: '';
+		display: block;
+		font-family: 'modicons-fill';
+		height: 12px;
+		text-align: center;
+		transition: color .15s ease;
+		width: 12px;
+	}
+	.tcpa-copy input[type=checkbox]:checked:before{
+		background-color: #3678BA;
+		border: 0;
+		color: #FFF;
+		content: '\e920';
+		font-size: 8px;
+		line-height: 12px;
+	}
+	.tcpa-copy input[type=checkbox]:focus {
+		outline: 1px solid #2E669E !important;
+		outline-offset: 1px;
+	}
+	.tcpa-copy a {
+		font-weight: bold;
+	}
+</style>

package/src/shared-components/gtm-body/gtm-body.html

@@ -0,0 +1,4 @@
+<!-- Google Tag Manager (noscript) -->
+<noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{gtm_container_ID}}"
+height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+<!-- End Google Tag Manager (noscript) -->

package/src/shared-components/head/head.html

@@ -0,0 +1,195 @@
+<head>
+	{{#if page.headConfig.useDynamicGtm}}
+		<script>
+			{{ fileInclude 'node_modules/mod-build/src/scripts/has-qs-params.js' }}
+			var gtm_container_ID = window.isQSPage ? '{{qs_gtm_container_ID}}' : '{{gtm_container_ID}}';
+		</script>
+	{{/if}}
+
+	<!-- assets links afterBegin -->
+	{{#if page.headConfig.useModAnalytics}}
+		<script src="/resources/scripts/mod-alytics/modalytics-be44027508c0438f6709.min.js" {{#if page.headConfig.deferModAnalytics}}defer{{/if}} {{#if page.headConfig.asyncModAnalytics}}async{{/if}}></script>
+	{{/if}}
+
+	{{#if page.headConfig.additionalAssets.afterBegin}}
+		{{#each page.headConfig.additionalAssets.afterBegin}}
+			{{#xif "this.type === 'style' "}}
+				<link href="{{#if isLocal}}
+					{{#if this.localSrc}}
+						{{this.localSrc}}
+					{{else}}
+						{{#if this.useModCdn}}
+							https://{{../nodeEnv}}/{{this.src}}
+						{{else}}
+							{{this.src}}
+						{{/if}}
+					{{/if}}
+				{{else}}
+					{{#if this.useModCdn}}
+						https://{{../nodeEnv}}/{{this.src}}
+					{{else}}
+						{{this.src}}
+					{{/if}}
+				{{/if}}" rel="stylesheet" type="text/css" />
+			{{/xif}}
+			{{#xif "this.type === 'script' "}}
+				<script
+				src="{{#if isLocal}}
+					{{#if this.localSrc}}
+						{{this.localSrc}}
+					{{else}}
+						{{#if this.useModCdn}}
+							https://{{../nodeEnv}}/{{this.src}}
+						{{else}}
+							{{this.src}}
+						{{/if}}
+					{{/if}}
+				{{else}}
+					{{#if this.useModCdn}}
+						https://{{../nodeEnv}}/{{this.src}}
+					{{else}}
+						{{this.src}}
+					{{/if}}
+				{{/if}}"
+				{{#if this.defer}}defer{{/if}}
+				{{#if this.async}}async{{/if}}
+				></script>
+			{{/xif}}
+		{{/each}}
+	{{/if}}
+
+	<!-- Include vwo setup -->
+	{{#xif "this.page.headConfig.vwoSetup.vwoPathArray.indexOf(this.path) > -1" }}
+		<link rel="preconnect" href="https://dev.visualwebsiteoptimizer.com">
+		<!-- Do not double hit our analytical resources (Heap/Google Analytics) if the page is going to be redirected by a VWO a/b test-->
+		{{ fileInclude 'node_modules/mod-build/src/templates/_partials/scripts/vwo-redirect-callback.html'
+			nogtm = true
+			noheap = true
+		}}
+	{{else}}
+		{{ fileInclude 'node_modules/mod-build/src/templates/_partials/scripts/analytics.html'
+			nogtm = true
+			noheap = true
+		}}
+	{{/xif}}
+
+	{{#if this.canonicalURL}}
+		<link rel="canonical" href="{{this.canonicalURL}}" />
+	{{/if}}
+
+	<!-- meta tags -->
+	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+	<meta name="viewport" content="initial-scale=1.0, width=device-width" />
+
+	{{#unless page.headConfig.disableRobots}}
+		<meta name="robots" content="{{#if page.headConfig.robotsCsv}}{{page.headConfig.robotsCsv}}{{else}}noindex,nofollow{{/if}}"/>
+	{{/unless}}
+
+	{{#unless page.headConfig.disableOgTags}}
+		<meta property="og:title" content="{{page.headConfig.title}}" />
+		<meta property="og:description" content="{{page.headConfig.description}}" />
+	{{/unless}}
+
+	<meta name="description" property="description" content="{{#if this.customDescription}}{{this.customDescription}}{{else}}{{page.headConfig.description}}{{/if}}" />
+	<meta name="keywords" property="keywords" content="{{#if this.customKeywords}}{{this.customKeywords}}{{else}}{{page.headConfig.keywords}}{{/if}}" />
+
+	<!-- preconnect google fonts -->
+	<link rel="preconnect" href="https://fonts.googleapis.com">
+	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+	{{#if page.headConfig.preConnect}}
+		{{#each page.headConfig.preConnect}}
+			<link
+			{{#if this.rel}}rel="{{this.rel}}"{{/if}}
+			{{#if this.href}}href="{{this.href}}"{{/if}}
+			{{#if this.as}}as="{{this.as}}"{{/if}}
+			{{#if this.crossorigin}}crossorigin="{{this.crossorigin}}"{{/if}}
+			{{#if this.media}}media="{{this.media}}"{{/if}}
+			{{#if this.type}}type="{{this.type}}"{{/if}}
+			{{#if this.fetchpriority}}fetchpriority="{{this.fetchpriority}}"{{/if}}
+			>
+		{{/each}}
+	{{/if}}
+	<!-- site title -->
+	{{#if this.customTitle}}
+		<title>{{{this.customTitle}}}</title>
+	{{else}}
+		<title>
+			{{#if page.headConfig.inverseTitle}}
+				{{#unless page.headConfig.hideTitleCompanyName}}{{company_name}} | {{/unless}}
+				{{#if this.pageTitle}}
+					{{this.pageTitle}}
+				{{else}}
+					{{#if page.headConfig.title}}
+						{{page.headConfig.title}}
+					{{/if}}
+				{{/if}}
+			{{else}}
+				{{#if this.pageTitle}}
+					{{this.pageTitle}}
+				{{else}}
+					{{#if page.headConfig.title}}
+						{{page.headConfig.title}}
+					{{/if}}
+				{{/if}}
+				{{#unless page.headConfig.hideTitleCompanyName}} | {{company_name}}{{/unless}}
+			{{/if}}
+		</title>
+	{{/if}}
+
+	{{#if page.headConfig.faviconPath}}
+		<!-- favicon link -->
+		<link href="{{page.headConfig.faviconPath}}" rel="shortcut icon" type="image/x-icon" />
+	{{/if}}
+
+	<!-- assets links beforeEnd -->
+	{{#unless page.headConfig.noBsBaseStyles}}
+		<link href="{{#if this.src}}{{this.src}}{{else}}{{#unless this.useRelativePath}}/{{/unless}}{{/if}}styles/vendor/bootstrap-base.css" rel="stylesheet" type="text/css" />
+	{{/unless}}
+
+	{{#if page.headConfig.additionalAssets.beforeEnd}}
+		{{#each page.headConfig.additionalAssets.beforeEnd}}
+			{{#xif "this.type === 'style' "}}
+				<link href="{{#if isLocal}}
+					{{#if this.localSrc}}
+						{{this.localSrc}}
+					{{else}}
+						{{#if this.useModCdn}}
+							https://{{../nodeEnv}}/{{this.src}}
+						{{else}}
+							{{this.src}}
+						{{/if}}
+					{{/if}}
+				{{else}}
+					{{#if this.useModCdn}}
+						https://{{../nodeEnv}}/{{this.src}}
+					{{else}}
+						{{this.src}}
+					{{/if}}
+				{{/if}}" rel="stylesheet" type="text/css" />
+			{{/xif}}
+			{{#xif "this.type === 'script' "}}
+				<script src="{{#if isLocal}}
+					{{#if this.localSrc}}
+						{{this.localSrc}}
+					{{else}}
+						{{#if this.useModCdn}}
+							https://{{../nodeEnv}}/{{this.src}}
+						{{else}}
+							{{this.src}}
+						{{/if}}
+					{{/if}}
+				{{else}}
+					{{#if this.useModCdn}}
+						https://{{../nodeEnv}}/{{this.src}}
+					{{else}}
+						{{this.src}}
+					{{/if}}
+				{{/if}}" {{#if this.defer}}defer{{/if}} {{#if this.async}}async{{/if}}></script>
+			{{/xif}}
+		{{/each}}
+	{{/if}}
+
+	<!-- load styles based on path name -->
+	<link href="{{#if this.src}}{{this.src}}{{else}}{{#unless this.useRelativePath}}/{{/unless}}{{/if}}styles/{{this.path}}.css" rel="stylesheet" type="text/css" />
+</head>

package/src/shared-components/header/_header.scss

@@ -0,0 +1,200 @@
+$header-background-color: $color-white !default;
+$header-padding-desktop: 15px 0 !default;
+$header-padding-mobile: 8px 0 !default;
+
+$header-container-padding: 0 15px !default;
+
+$header-content-align-items: center !default;
+$header-content-display: flex !default;
+$header-content-justify-content-mobile: center !default;
+$header-content-justify-content-desktop: space-between !default;
+
+$header-logo-display: inline-block !default;
+$header-logo-height-desktop: 35px !default;
+$header-logo-width-desktop: 152px !default;
+$header-logo-margin-desktop: 0 !default;
+$header-logo-height-mobile: 25px !default;
+$header-logo-width-mobile: 112px !default;
+$header-logo-margin-mobile: $header-logo-margin-desktop !default;
+
+$header-back-button-background-color: transparent !default;
+$header-back-button-border-right: 1px solid $color-charcoal2 !default;
+$header-back-button-color: $color-charcoal2 !default;
+$header-back-button-font-size: 21px !default;
+$header-back-button-line-height: 1 !default;
+$header-back-button-padding: 0 20px !default;
+$header-show-button-button-flex: 0 15% !default;
+$header-show-button-logo-flex: 0 85% !default;
+$header-show-button-logo-margin: 20px 0 !default;
+$header-show-button-padding: 0 !default;
+
+$header-bbb-logo-height-desktop: 42px !default;
+$header-bbb-logo-width-desktop: 115px !default;
+$header-bbb-logo-height-mobile: 32px !default;
+$header-bbb-logo-width-mobile: 82.5px !default;
+$header-bbb-logo-display: inherit !default;
+
+$header-tagline-color: $color-white !default;
+$header-tagline-font-size: 18px !default;
+$header-tagline-font-weight: 700 !default;
+
+$callrail-display: none !default;
+$call-color: $color-black !default;
+$call-font-size: 18px !default;
+$call-font-weight: 500 !default;
+$call-number-font-weight: 600 !default;
+$call-link-color: inherit !default;
+$call-link-text-decoration: none !default;
+$call-icon-width: 12px !default;
+$call-icon-width-large: 20px !default;
+
+$call-button-align-self: center !default;
+$call-button-background-color: $color-white !default;
+$call-button-border: 1px solid $call-color !default;
+$call-button-border-radius: 15px !default;
+$call-button-color: $call-color !default;
+$call-button-font-size: 12px !default;
+$call-button-font-weight: $call-font-weight !default;
+$call-button-margin: 0 !default;
+$call-button-padding: 4px 14px !default;
+$call-button-text-transform: uppercase !default;
+
+.header {
+	background-color: $header-background-color;
+	padding: $header-padding-mobile;
+
+	.container {
+		padding: $header-container-padding;
+	}
+
+	&__content {
+		align-items: $header-content-align-items;
+		display: $header-content-display;
+		justify-content: $header-content-justify-content-mobile;
+	}
+
+	&__logo{
+		img, svg {
+			display: $header-logo-display;
+			height: $header-logo-height-mobile;
+			margin: $header-logo-margin-mobile;
+			width: $header-logo-width-mobile;
+		}
+	}
+
+	&__bbb-logo {
+		display: $header-bbb-logo-display;
+		height: $header-bbb-logo-height-mobile;
+		width: $header-bbb-logo-width-mobile;
+	}
+
+	&__back-button {
+		background-color: $header-back-button-background-color;
+		border: 0;
+		border-right: $header-back-button-border-right;
+		color: $header-back-button-color;
+		display: none;
+		font-size: $header-back-button-font-size;
+		line-height: $header-back-button-line-height;
+		padding: $header-back-button-padding;
+	}
+
+	&__tagline {
+		color: $header-tagline-color;
+		font-size: $header-tagline-font-size;
+		font-weight: $header-tagline-font-weight;
+	}
+
+	&__call {
+		color: $call-color;
+		font-size: $call-font-size;
+		font-weight: $call-font-weight;
+
+		.header__call-icon {
+			width: $call-icon-width-large;
+		}
+	}
+
+	&__call-link {
+		color: $call-link-color;
+		text-decoration: $call-link-text-decoration;
+	}
+
+	&__call-number {
+		font-weight: $call-number-font-weight;
+	}
+
+	&__call-icon {
+		width: $call-icon-width;
+	}
+
+	&__call-button {
+		align-self: $call-button-align-self;
+		background-color: $call-button-background-color;
+		border: $call-button-border;
+		border-radius: $call-button-border-radius;
+		color: $call-button-color;
+		font-size: $call-button-font-size;
+		font-weight: $call-button-font-weight;
+		margin: $call-button-margin;
+		padding: $call-button-padding;
+		text-transform: $call-button-text-transform;
+	}
+}
+
+.callNowControls {
+	display: $callrail-display;
+}
+
+@include breakpoint-phone {
+	.header {
+		&--transparent {
+			background-color: transparent;
+		}
+
+		&--show-back-button {
+			padding: $header-show-button-padding;
+
+			.header__content {
+				align-items: stretch;
+			}
+
+			.header__back-button {
+				display: block;
+				flex: $header-show-button-button-flex;
+			}
+			.header__logo {
+				flex: $header-show-button-logo-flex;
+				margin: $header-show-button-logo-margin;
+				text-align: center;
+			}
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.header {
+		padding: $header-padding-desktop;
+
+		&__content {
+			justify-content: $header-content-justify-content-desktop;
+		}
+
+		&__back-button {
+			display: none;
+		}
+
+		&__logo {
+			img, svg {
+				height: $header-logo-height-desktop;
+				margin: $header-logo-margin-desktop;
+				width: $header-logo-width-desktop;
+			}
+		}
+
+		&__bbb-logo {
+			height: $header-bbb-logo-height-desktop;
+			width: $header-bbb-logo-width-desktop;
+		}
+	}
+}