Merge pull request #177 from w3c/feature/logo-hero-video

Feature/logo hero video

Author: jean-gui

assets-src/js/main.js

@@ -7,6 +7,7 @@ import {navigation} from "./main/navigation";
 import {responsiveTables} from "./main/responsive-tables";
 import {flashes} from "./main/flashes";
 import {headingAnchors} from './main/heading-anchors';
+import {videoHero} from './main/video-hero';
 
 function domLoadedActions() {
 	accountMenu();
@@ -17,6 +18,7 @@ function domLoadedActions() {
 	responsiveTables();
 	flashes();
 	headingAnchors();
+	videoHero();
 
 	/* Create a navDoubleLevel object and initiate double-level navigation for a <ul> with the correct data-component attribute */
 	const navDoubleIntro = document.querySelector('ul[data-component="nav-double-intro"]');

assets-src/js/main/video-hero.js

@@ -0,0 +1,81 @@
+let videoHero = function () {
+    /* My refactored code */
+    var heroVid = document.querySelector('[data-video="hero"]');
+    var heroVidControl = document.querySelector('[data-video-control="hero"]');
+
+    if (heroVid && heroVidControl) {
+    // Remove native controls and show custom button
+    heroVid.removeAttribute("controls");
+    heroVidControl.removeAttribute("hidden");
+
+    // Media query for reduced motion preference
+    var motionQuery = window.matchMedia("(prefers-reduced-motion)");
+
+    // Helper to update button text
+    function updateButtonState(isPlaying) {
+        const label = isPlaying ? heroVidControl.dataset.videoPause : heroVidControl.dataset.videoPlay;
+        heroVidControl.querySelector("span").innerText = label;
+        heroVidControl.classList.toggle("js-play-video", isPlaying);
+    }
+
+    // Play video with error handling
+    function playHeroVid() {
+        heroVid.play().then(() => {
+        updateButtonState(true);
+        }).catch((error) => {
+        console.warn("Video play failed:", error);
+        updateButtonState(false);
+        });
+    }
+
+    // Pause video
+    function pauseHeroVid() {
+        heroVid.pause();
+        updateButtonState(false);
+    }
+
+    // Handle user motion preference
+    function handleReduceMotionChanged() {
+        if (motionQuery.matches) {
+        pauseHeroVid();
+        } else {
+        playHeroVid();
+        }
+    }
+
+    // Attempt to autoplay
+    var promise = heroVid.play();
+    if (promise !== undefined) {
+        promise
+        .then(() => {
+            updateButtonState(true);
+        })
+        .catch((error) => {
+            console.warn("Autoplay was prevented:", error);
+            updateButtonState(false);
+        });
+    }
+
+    // Media query listener
+    motionQuery.addEventListener("change", handleReduceMotionChanged);
+    handleReduceMotionChanged();
+
+    // Toggle video playback on control click
+    document.addEventListener("click", function (event) {
+        const button = event.target.closest('[data-video-control="hero"]');
+        if (button) {
+        if (heroVid.paused) {
+            playHeroVid();
+        } else {
+            pauseHeroVid();
+        }
+        }
+    });
+
+    // Unregister media query listener on page unload to prevent memory leaks
+    window.addEventListener("beforeunload", () => {
+        motionQuery.removeEventListener("change", handleReduceMotionChanged);
+    });
+    }
+}
+export {videoHero}

assets-src/styles/sass/00-settings/_colors.scss

@@ -24,7 +24,7 @@ $teal: #39cccc;
 $aqua: #7fdbff;
 $blue: #0073d8;
 $navy: #001f3f;
-$purple: #920ba6;
+$purple: #75336c;
 $fuchsia: #f012be;
 $grey: #aaa;
 $mercury-grey: #e5e5e5;
@@ -38,21 +38,17 @@ $red: #e93737;
 $light-red: #ec7070;
 $coral: #fc7750;
 $light-coral: #fea78d;
-$deep-yellow: #f9c818;
 $yellow: #f9dc4a;
 $deep-green: #0a4343;
 $teal-green: #237978;
 $aqua: #1bc0d7;
 $light-blue: #cbe0fb;
-$sky-blue: #6bc8fe;
-$azure: #0075ff;
 $w3c-blue: #005a9c;
-$blue: #005797;
-$deep-blue: #024488;
+$deep-blue: #002a56;
 $pink: #ddb0c8;
 $light-pink: #eeccdc;
 $storm-gray: #545454;
-$twiki-gray: #bdbdbd;
+$twiki-gray: #cac9c9;
 $mist-gray: #f8f8fb;
 
 
@@ -63,12 +59,12 @@ $border-color:                  $twiki-gray;
 $input-border-color:            $storm-gray;
 $focus-color:                   $yellow;
 
-$link-color:                    $blue;
+$link-color:                    $w3c-blue;
 $link-color--visited:           $purple;
 $link-color--hover:             $deep-blue;
 
 $success-color:                 #046704;
-$info-color:                    $w3c-blue;
+$info-color:                    $deep-blue;
 $warning-color:                 #c28605;
 $error-color:                   #a82615;
 

assets-src/styles/sass/50-core-components/_cards.scss

@@ -39,7 +39,7 @@
 	}
 
 	&.talk {
-		border-color: $deep-yellow;
+		border-color: $deep-blue;
 	}
 
 	&.workshop {

assets-src/styles/sass/50-core-components/_evangelists.scss

@@ -30,7 +30,7 @@
 }
 
 .component--evangelists__list {
-	background-color: $w3c-blue;
+	background-color: $deep-blue;
 	border-radius: rem(6);
 	color: $white;
 	overflow: hidden;

assets-src/styles/sass/50-core-components/_hero.scss

@@ -55,7 +55,21 @@
 }
 
 .hero .button {
+	align-items: center;
 	align-self: flex-start;
+	display: inline-flex;
+	justify-content: center;
+}
+
+
+.hero--video .sidebar__video {
+	margin-inline: auto;
+	max-inline-size: rem(500);
+	position: relative;
+}
+
+.hero--video video {
+	display: block;
 }
 
 .hero--listing {

assets-src/styles/sass/50-core-components/_logo.scss

@@ -3,15 +3,9 @@
 \*------------------------------------*/
 
 .logo {
-	display: block;
-	height: rem(44);
-	position: relative;
-	width: rem(66);
-
-	@include mq($bp-tab-large) {
-		height: rem(52);
-		width: rem(78);
-	}
+    display: block;
+    position: relative;
+	width: clamp(3.75rem, 2.51rem + 6.198vw, 7.5rem);
 }
 
 .logo--member {

assets-src/styles/sass/50-core-components/_navigation.scss

@@ -7,24 +7,18 @@
 }
 
 #global-nav {
-	border-bottom: solid 1px $border-color;
 	display: block;
-	padding-bottom: rem(18);
-	padding-top: rem(18);
-
-	@include mq($max-width) {
-		padding-bottom: 0;
-		padding-top: rem(20);
-	}
+	padding-bottom: em(26);
+	padding-top: em(26);
 }
 
 .global-nav__inner {
 	align-items: center;
 	display: flex;
 	flex-wrap: wrap;
+	gap: em(48);
 
 	@include mq($max-width) {
-		align-items: flex-end;
 		flex-wrap: nowrap;
 		position: relative;
 	}
@@ -108,13 +102,11 @@ li.top-nav-item + li.top-nav-item {
 	}
 
 	@include mq($max-width) {
-		margin-inline-end: rem(25);
-		padding-bottom: rem(5);
 		position: relative;
-
+		
 		&::before {
 			background-color: $w3c-blue;
-			bottom: 0;
+			bottom: rem(-3);
 			content:'';
 			display: none;
 			height: rem(3);

assets-src/styles/sass/50-core-components/_quotes.scss

@@ -4,15 +4,15 @@
 
 .component--quote {
 	@include txt-saturn;
-	color: $w3c-blue;
+	color: $purple;
 	font-weight: bold;
 	margin-inline-end: 0;
 	margin-inline-start: rem(10);
 	padding: rem(20);
 	position: relative;
 
 	&::before {
-		background-color: $w3c-blue;
+		background-color: $purple;
 		border-radius: rem(5);
 		left: rem(-10);
 		width: rem(10);

assets-src/styles/sass/50-core-components/_slide.scss

@@ -40,7 +40,7 @@
 	}
 
 	&::before {
-		background-color: $w3c-blue;
+		background-color: $purple;
 		border-radius: rem(5);
 		content: '';
 		height: 100%;