TMZ-43 Hero Widget (Content)

modules/content/assets/js/hello-plus-hero.js

@@ -0,0 +1,22 @@
+window.addEventListener( 'elementor/frontend/init', () => {
+	elementorFrontend.hooks.addAction( 'frontend/element_ready/hero.default', ( $scope ) => {
+		const scope0 = $scope[ 0 ];
+		const motionEffectElements = scope0.querySelectorAll( '.motion-effect-fade-in' );
+		const observer = new IntersectionObserver( heroObserveHandler, { threshold: 0.1 } );
+		motionEffectElements.forEach( () => observer.observe( this ) );
+	} );
+} );
+
+const heroObserveHandler = ( entries, observer ) => {
+	entries.forEach( ( entry ) => {
+		if ( entry.isIntersecting ) {
+			const element = entry.target;
+			const delay = element.dataset.motionEffectDelay || 0;
+			setTimeout( function() {
+				element.classList.add( 'elementor-element-visible' );
+			}, delay );
+
+			observer.unobserve( entry.target );
+		}
+	} );
+};

modules/content/assets/scss/breakpoints.scss

@@ -0,0 +1,27 @@
+$breakpoints: (
+	sm: 480px, // Mobile landscape
+	md: 768px, // Tablet
+	lg: 1025px, // Desktop
+	xl: 1440px, // Larger devices
+	xxl: 1600px // Largest devices
+);
+
+$screen-mobile-min: map_get($breakpoints, sm);
+$screen-mobile-max: map_get($breakpoints, md) - 1;
+$screen-tablet-min: map_get($breakpoints, md);
+$screen-mobile-next: map_get($breakpoints, md);
+$screen-tablet-max: map_get($breakpoints, lg) - 1;
+$screen-desktop-min: map_get($breakpoints, lg);
+$screen-desktop-max: 99999px;
+$screen-tablet-next: map_get($breakpoints, lg);
+
+// Additional Custom Breakpoints - SCSS placeholders
+$screen-mobile-extra-min: -1;
+$screen-mobile-extra-max: -1;
+$screen-mobile-extra-next: -1;
+$screen-tablet-extra-min: -1;
+$screen-tablet-extra-max: -1;
+$screen-tablet-extra-next: -1;
+$screen-laptop-min: -1;
+$screen-laptop-max: -1;
+$screen-widescreen-min: -1;

modules/content/assets/scss/hello-plus-hero.scss

@@ -0,0 +1,245 @@
+@import "./breakpoints";
+
+.e-hero {
+	$transition: all .3s;
+	$corners-shape-default: 8px;
+	$corners-shape-sharp: 0;
+	$corners-shape-rounded: 12px;
+	$corners-shape-round: 32px;
+	$breakpoint-tablet-min: 768px;
+	$breakpoint-desktop-min: 1024px;
+
+	--hero-box-height: auto;
+	--hero-box-full-height: 100vh;
+
+	@supports (height: 100dvh) {
+		--hero-box-full-height: 100dvh;
+	}
+
+	--hero-content-position: center;
+	--hero-content-text-align: center;
+
+	--hero-text-heading-width: 100%;
+	--hero-text-subheading-width: 100%;
+
+	--hero-text-default-heading: 252px;
+	--hero-text-narrow-heading: 224px;
+	--hero-text-wide-heading: 280px;
+	--hero-text-default-subheading: 216px;
+	--hero-text-narrow-subheading: 200px;
+	--hero-text-wide-subheading: 240px;
+
+	--hero-heading-color: #28292B;
+	--hero-subheading-color: #28292B;
+
+	--hero-button-icon-size: 16px;
+	--hero-button-icon-spacing: 10px;
+	--hero-button-text-color: #ffffff;
+	--hero-button-text-color-hover: #ffffff;
+	--hero-button-border-width: 1px;
+	--hero-button-border-color: #000000;
+	--hero-button-border-radius: 0;
+	--hero-button-background-color: #0052FF;
+	--hero-button-padding-block-end: 8px;
+	--hero-button-padding-block-start: 8px;
+	--hero-button-padding-inline-end: 16px;
+	--hero-button-padding-inline-start: 16px;
+
+	--hero-image-width: 100%;
+	--hero-image-height: 380px;
+	--hero-image-position: center center;
+
+	display: flex;
+	flex-direction: column;
+	height: var(--hero-box-height);
+	text-align: var(--hero-content-text-align);
+
+	@media screen and (min-width: $breakpoint-tablet-min) {
+		--hero-text-default-heading: 512px;
+		--hero-text-narrow-heading: 408px;
+		--hero-text-wide-heading: 640px;
+		--hero-text-default-subheading: 352px;
+		--hero-text-narrow-subheading: 280px;
+		--hero-text-wide-subheading: 440px;
+	}
+
+	@media screen and (min-width: $breakpoint-desktop-min) {
+		--hero-text-default-heading: 800px;
+		--hero-text-narrow-heading: 640px;
+		--hero-text-wide-heading: 960px;
+		--hero-text-default-subheading: 440px;
+		--hero-text-narrow-subheading: 420px;
+		--hero-text-wide-subheading: 528px;
+	}
+
+	@mixin full-height($min: null, $max: null) {
+		$query: null;
+
+		@if $min != null and $max != null {
+			$query: "(min-width: " + $min + ") and (max-width: " + $max + ")";
+		} @else if $max != null {
+			$query: "(max-width: " + $max + ")";
+		} @else if $min != null {
+			$query: "(min-width: " + $min + ")";
+		}
+
+		@if $query != null {
+			@media #{$query} {
+				--hero-box-height: var(--hero-box-full-height, 100vh);
+
+				.e-hero__image {
+					align-items: flex-end;
+					display: flex;
+					flex-grow: 1;
+				}
+			};
+		}
+	}
+
+	&.is-full-height-mobile {
+		@include full-height(null, $screen-mobile-max);
+	}
+
+	&.is-full-height-mobile_extra {
+		@include full-height($screen-mobile-extra-min, $screen-mobile-extra-max);
+	}
+
+	&.is-full-height-tablet {
+		@include full-height($screen-tablet-min, $screen-tablet-max);
+	}
+
+	&.is-full-height-tablet_extra {
+		@include full-height($screen-tablet-extra-min, $screen-tablet-extra-max);
+	}
+
+	&.is-full-height-laptop {
+		@include full-height($screen-laptop-min, $screen-laptop-max);
+	}
+
+	&.is-full-height-desktop {
+
+		@include full-height($screen-desktop-min, null);
+
+		&.is-full-height-widescreen {
+			@include full-height($screen-desktop-min, $screen-desktop-max);
+		}
+	}
+
+	&.is-full-height-widescreen {
+		@include full-height($screen-widescreen-min, null);
+	}
+
+	&__text-container {
+		align-items: var(--hero-content-position);
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__button-container {
+		align-items: var(--hero-content-position);
+		display: flex;
+		flex-direction: column;
+		margin-bottom: 68px;
+	}
+
+	&__button-icon {
+		fill: currentColor;
+		height: var(--hero-button-icon-size);
+		width: var(--hero-button-icon-size);
+	}
+
+	&__button,
+	&__button:not([href]):not([tabindex]) {
+		align-items: center;
+		color: var(--hero-button-text-color);
+		display: flex;
+		font-weight: 500;
+		font-size: 16px;
+		gap: var(--hero-button-icon-spacing);
+		text-decoration: none;
+		transition: $transition;
+
+		&:hover,
+		&:focus {
+			color: var(--hero-button-text-color-hover);
+			transition: $transition;
+		}
+
+		&.has-border {
+			border-color: var(--hero-button-border-color);
+			border-style: solid;
+			border-width: var(--hero-button-border-width);
+			border-radius: var(--hero-button-border-radius);
+		}
+
+		&.is-type {
+
+			&-button {
+				background-color: var(--hero-button-background-color);
+				padding-block-end: var(--hero-button-padding-block-end);
+				padding-block-start: var(--hero-button-padding-block-start);
+				padding-inline-end: var(--hero-button-padding-inline-end);
+				padding-inline-start: var(--hero-button-padding-inline-start);
+				text-decoration: none;
+			}
+
+			&-link,
+			&-link:not([href]):not([tabindex]) {
+				text-decoration: underline;
+			}
+		}
+
+		&.has-shape {
+
+			&-sharp {
+				border-radius: $corners-shape-sharp;
+			}
+
+			&-rounded {
+				border-radius: $corners-shape-rounded;
+			}
+
+			&-round {
+				border-radius: $corners-shape-round;
+			}
+
+			&-default {
+				border-radius: $corners-shape-default;
+			}
+		}
+	}
+
+	&__heading {
+		color: var(--hero-heading-color);
+		max-width: var(--hero-text-heading-width);
+	}
+
+	&__subheading {
+		color: var(--hero-subheading-color);
+		max-width: var(--hero-text-subheading-width);
+	}
+
+	&__heading,
+	&__subheading {
+		margin-bottom: 20px;
+
+		@media screen and (min-width: $breakpoint-tablet-min) {
+			margin-bottom: 28px;
+		}
+
+		@media screen and (min-width: $breakpoint-desktop-min) {
+			margin-bottom: 40px;
+		}
+	}
+
+	&__image {
+		overflow: hidden;
+
+		.elementor & img {
+			height: var(--hero-image-height);
+			object-fit: cover;
+			object-position: var(--hero-image-position);
+			width: var(--hero-image-width);
+		}
+	}
+}

modules/content/assets/scss/hello-plus-content.scss → modules/content/assets/scss/hello-plus-zigzag.scss

@@ -1,14 +1,12 @@
+@import "./breakpoints";
+
 .e-zigzag {
     $transition: all .3s;
 	$corners-shape-default: 8px;
 	$corners-shape-sharp: 0;
 	$corners-shape-rounded: 12px;
 	$corners-shape-round: 32px;
 
-	$breakpoint-tablet-max: 767px;
-	$breakpoint-tablet-min: 768px;
-	$breakpoint-desktop-min: 1024px;
-
 	--zigzag-button-icon-size: 16px;
 	--zigzag-button-icon-spacing: 10px;
 	--zigzag-button-text-color: #555963;
@@ -41,12 +39,12 @@
 	display: flex;
 	flex-direction: column;
 
-	@media screen and (min-width: $breakpoint-tablet-min) {
+	@media screen and (min-width: $screen-tablet-min) {
 		--zigzag-elements-gap: 40px;
 		--zigzag-rows-spacing: 100px;
 	}
 
-	@media screen and (min-width: $breakpoint-desktop-min) {
+	@media screen and (min-width: $screen-desktop-min) {
 		--zigzag-elements-gap: 120px;
 	}
 
@@ -143,14 +141,14 @@
 
 		.row-even & {
 
-			@media screen and (min-width: $breakpoint-tablet-min) {
+			@media screen and (min-width: $screen-tablet-min) {
 				padding-inline-end: var(--zigzag-elements-gap);
 			}
 		}
 
 		.row-odd & {
 
-			@media screen and (min-width: $breakpoint-tablet-min) {
+			@media screen and (min-width: $screen-tablet-min) {
 				padding-inline-start: var(--zigzag-elements-gap);
 			}
 		}
@@ -219,12 +217,12 @@
 			flex-direction: row-reverse;
 		}
 
-		@media screen and (max-width: $breakpoint-tablet-max) {
+		@media screen and (max-width: $screen-tablet-max) {
 			gap: var(--zigzag-elements-gap);
 		}
 	}
 
-	@media screen and (max-width: $breakpoint-tablet-max) {
+	@media screen and (max-width: $screen-tablet-max) {
 		.e-zigzag__item-container {
 			flex-direction: column;
 		}