From 731a929bee325e0dc3e86ddddad458e4ae732529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Wed, 15 Apr 2026 14:48:24 +0500
Subject: [PATCH 01/16] Add header-atlas-beacon

---
 parts/header-atlas-beacon.html |  40 ++++++++++++
 style.css                      | 116 +++++++++++++++++++++++++++++++++
 theme.json                     |   5 ++
 3 files changed, 161 insertions(+)
 create mode 100644 parts/header-atlas-beacon.html

diff --git a/parts/header-atlas-beacon.html b/parts/header-atlas-beacon.html
new file mode 100644
index 00000000..3582af61
--- /dev/null
+++ b/parts/header-atlas-beacon.html
@@ -0,0 +1,40 @@
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 header-overlay-sticky header-atlas-beacon","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<div
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 header-overlay-sticky header-atlas-beacon"
+	style="padding-top: 0; padding-bottom: 0"
+>
+	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+	<div
+		class="wp-block-group alignwide"
+		style="
+			border-top-left-radius: 1rem;
+			border-top-right-radius: 1rem;
+			border-bottom-left-radius: 1rem;
+			border-bottom-right-radius: 1rem;
+			padding-top: var(--wp--preset--spacing--20);
+			padding-bottom: var(--wp--preset--spacing--20);
+		"
+	>
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"shouldSyncIcon":false} /-->
+
+			<!-- wp:group -->
+			<div class="wp-block-group">
+				<!-- wp:site-title {"style":{"typography":{"textTransform":"none"}},"fontSize":"medium"} /-->
+			</div>
+			<!-- /wp:group -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+			<!-- /wp:navigation -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/style.css b/style.css
index 5bf5fd38..550045d8 100644
--- a/style.css
+++ b/style.css
@@ -553,4 +553,120 @@ input, textarea {
     top: -1px;
     pointer-events: none;
     z-index: 1;
+}
+
+/*
+ * --------------------------------------------------------
+ *  Overlay Sticky Header with Scroll-Driven Animation - header-atlas-beacon
+ * --------------------------------------------------------
+ */
+
+:root {
+	--ext-header-height: 96px;
+	--ext-header-offset: 1rem;
+	--ext-header-blur-start: 8px;
+	--ext-header-blur-end: 12px;
+	--ext-header-bg-opacity-start: 0.75;
+	--ext-header-bg-opacity-end: 0.95;
+	--ext-header-shadow: 0 4px 20px;
+	--ext-header-padding: 1.5rem;
+	--ext-header-animation-distance: 100px;
+}
+
+body {
+	timeline-scope: --ext-hero-timeline;
+}
+
+header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) {
+	position: sticky;
+	top: 0;
+	z-index: 12;
+
+	body.admin-bar & {
+		top: var(--wp-admin--admin-bar--height, 32px);
+	}
+
+	body:has(.ext-hero-section.ext-hero-section--full-screen) & {
+		top: var(--ext-header-offset);
+	}
+
+	body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) & {
+		top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 32px));
+	}
+
+	@media (width <= 782px) {
+		body.admin-bar & {
+			top: var(--wp-admin--admin-bar--height, 46px);
+		}
+
+		body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) & {
+			top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 46px));
+		}
+	}
+}
+
+body:has(.header-overlay-sticky.header-atlas-beacon) .ext-hero-section.ext-hero-section--full-screen {
+	margin-top: calc(-1 * var(--ext-header-height)) !important;
+	position: relative;
+	z-index: 0;
+
+	& > * {
+		position: relative;
+		z-index: 1;
+	}
+}
+
+@supports (animation-timeline: scroll()) {
+	.ext-hero-section.ext-hero-section--full-screen {
+		view-timeline: --ext-hero-timeline block;
+	}
+
+	.header-atlas-beacon > :first-child {
+		header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) &.ext-animate {
+			opacity: 1 !important;
+		}
+
+		body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) & {
+			background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
+			backdrop-filter: blur(var(--ext-header-blur-start));
+			padding-inline: var(--ext-header-padding) !important;
+			animation: ext-header-fade-in linear both !important;
+			animation-timeline: --ext-hero-timeline !important;
+			animation-range: exit 0% exit 80% !important;
+		}
+
+		body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) & {
+			animation: ext-header-fade-in-no-hero linear forwards !important;
+			animation-timeline: scroll() !important;
+			animation-range: 0px var(--ext-header-animation-distance) !important;
+		}
+	}
+}
+
+@keyframes ext-header-fade-in {
+	from {
+		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
+		backdrop-filter: blur(var(--ext-header-blur-start));
+	}
+	to {
+		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
+		backdrop-filter: blur(var(--ext-header-blur-end));
+	}
+}
+
+@keyframes ext-header-fade-in-no-hero {
+	from {
+		background-color: transparent;
+		backdrop-filter: blur(0);
+		padding-inline: 0;
+		box-shadow: none;
+		translate: 0 0;
+	}
+	to {
+		background-color: oklch(from var(--wp--preset--color--background) l c h / 0.85);
+		backdrop-filter: blur(var(--ext-header-blur-end));
+		padding-inline: var(--ext-header-padding);
+		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);
+		translate: 0 var(--ext-header-offset);
+	}
 }
\ No newline at end of file
diff --git a/theme.json b/theme.json
index 4389360d..5e84b634 100644
--- a/theme.json
+++ b/theme.json
@@ -1087,6 +1087,11 @@
 			"title": "Header",
 			"area": "header"
 		},
+		{
+			"name": "header-atlas-beacon",
+			"title": "Header Atlas Beacon",
+			"area": "header"
+		},
 		{
 			"name": "header-title-nav-button",
 			"title": "Header with Button",

From e168c549c15c457619fef2a8a7c0a8aea6fcf716 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Wed, 15 Apr 2026 14:56:57 +0500
Subject: [PATCH 02/16] Tweak css

---
 style.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/style.css b/style.css
index 550045d8..6be56c4f 100644
--- a/style.css
+++ b/style.css
@@ -567,7 +567,7 @@ input, textarea {
 	--ext-header-blur-start: 8px;
 	--ext-header-blur-end: 12px;
 	--ext-header-bg-opacity-start: 0.75;
-	--ext-header-bg-opacity-end: 0.95;
+	--ext-header-bg-opacity-end: 0.85;
 	--ext-header-shadow: 0 4px 20px;
 	--ext-header-padding: 1.5rem;
 	--ext-header-animation-distance: 100px;
@@ -651,6 +651,7 @@ body:has(.header-overlay-sticky.header-atlas-beacon) .ext-hero-section.ext-hero-
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
+		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);
 	}
 }
 
@@ -663,7 +664,7 @@ body:has(.header-overlay-sticky.header-atlas-beacon) .ext-hero-section.ext-hero-
 		translate: 0 0;
 	}
 	to {
-		background-color: oklch(from var(--wp--preset--color--background) l c h / 0.85);
+		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
 		padding-inline: var(--ext-header-padding);
 		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);

From 331d183653a18fcd9a2f124dbe08c2e0a7457909 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Thu, 16 Apr 2026 14:22:30 +0500
Subject: [PATCH 03/16] Tweaks

---
 parts/header-atlas-beacon.html |   4 +-
 style.css                      | 143 +++++++++++++++++++++++----------
 2 files changed, 101 insertions(+), 46 deletions(-)

diff --git a/parts/header-atlas-beacon.html b/parts/header-atlas-beacon.html
index 3582af61..63db7471 100644
--- a/parts/header-atlas-beacon.html
+++ b/parts/header-atlas-beacon.html
@@ -1,6 +1,6 @@
-<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 header-overlay-sticky header-atlas-beacon","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header-atlas-beacon","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
 <div
-	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 header-overlay-sticky header-atlas-beacon"
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header-atlas-beacon"
 	style="padding-top: 0; padding-bottom: 0"
 >
 	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
diff --git a/style.css b/style.css
index 6be56c4f..ba8b15de 100644
--- a/style.css
+++ b/style.css
@@ -557,8 +557,21 @@ input, textarea {
 
 /*
  * --------------------------------------------------------
- *  Overlay Sticky Header with Scroll-Driven Animation - header-atlas-beacon
+ *  Modular Header System: Sticky, Overlay & Header-Specific Styles
  * --------------------------------------------------------
+ *
+ *  Base Utility Classes (work on any header):
+ *    - .ext-header-sticky   → position: sticky + admin-bar handling
+ *    - .ext-header-overlay  → hero section overlap (negative margin)
+ *
+ *  Header-Specific Modifier Classes (optional customizations):
+ *    - .ext-header-atlas-beacon → glassmorphism animation on first-child
+ *
+ *  Usage Examples:
+ *    - ext-header-sticky                                    → just sticky
+ *    - ext-header-overlay                                   → just overlay, scrolls away
+ *    - ext-header-sticky ext-header-overlay                 → sticky + overlay (base)
+ *    - ext-header-sticky ext-header-overlay ext-header-atlas-beacon → full glassmorphism
  */
 
 :root {
@@ -577,73 +590,115 @@ body {
 	timeline-scope: --ext-hero-timeline;
 }
 
-header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) {
+/* Base: Sticky Header Positioning
+----------------------------------------------------------*/
+header.wp-block-template-part:has(.ext-header-sticky) {
 	position: sticky;
 	top: 0;
 	z-index: 12;
+	border-bottom: 1px solid  oklch(from var(--wp--preset--color--foreground) l c h / 0.05);
+}
 
-	body.admin-bar & {
-		top: var(--wp-admin--admin-bar--height, 32px);
-	}
+header.wp-block-template-part.ext-header-sticky:not(.has-background) {
+	background-color: var(--wp--preset--color--background);
+}
 
-	body:has(.ext-hero-section.ext-hero-section--full-screen) & {
-		top: var(--ext-header-offset);
-	}
+body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
+	top: var(--wp-admin--admin-bar--height, 32px);
+}
 
-	body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) & {
-		top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 32px));
+@media (max-width: 782px) {
+	body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
+		top: var(--wp-admin--admin-bar--height, 46px);
 	}
+}
 
-	@media (width <= 782px) {
-		body.admin-bar & {
-			top: var(--wp-admin--admin-bar--height, 46px);
-		}
+/* Base: Overlay Header - Hero Section Overlap
+----------------------------------------------------------*/
+body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-overlay) {
+	position: relative;
+    top: 0;
+    z-index: 12;
 
-		body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) & {
-			top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 46px));
-		}
-	}
+			background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 }
 
-body:has(.header-overlay-sticky.header-atlas-beacon) .ext-hero-section.ext-hero-section--full-screen {
+header.wp-block-template-part.ext-header-overlay:not(.has-background) {
+	background-color: oklch(from var(--wp--preset--color--background) l c h / 0.90);
+}
+
+body:has(.ext-header-overlay) .ext-hero-section.ext-hero-section--full-screen {
 	margin-top: calc(-1 * var(--ext-header-height)) !important;
 	position: relative;
 	z-index: 0;
-
-	& > * {
-		position: relative;
-		z-index: 1;
-	}
 }
 
+/* Base: Hero Timeline for Scroll-Driven Animations
+----------------------------------------------------------*/
 @supports (animation-timeline: scroll()) {
 	.ext-hero-section.ext-hero-section--full-screen {
 		view-timeline: --ext-hero-timeline block;
 	}
+}
+
+/*  Header-Specific: Atlas Beacon (ext-header-atlas-beacon)
+----------------------------------------------------------*/
+
+	header.wp-block-template-part .ext-header-atlas-beacon.ext-animate {
+		opacity: 1 !important;
+	}
 
-	.header-atlas-beacon > :first-child {
-		header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) &.ext-animate {
-			opacity: 1 !important;
-		}
+header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+	position: sticky;
+	top: 0;
+	z-index: 12;
+	border-bottom: none;
+}
 
-		body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) & {
+body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-overlay.ext-header-atlas-beacon) {
+	top: var(--ext-header-offset);
 			background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
-			backdrop-filter: blur(var(--ext-header-blur-start));
-			padding-inline: var(--ext-header-padding) !important;
-			animation: ext-header-fade-in linear both !important;
-			animation-timeline: --ext-hero-timeline !important;
-			animation-range: exit 0% exit 80% !important;
-		}
-
-		body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.header-overlay-sticky.header-atlas-beacon) & {
-			animation: ext-header-fade-in-no-hero linear forwards !important;
-			animation-timeline: scroll() !important;
-			animation-range: 0px var(--ext-header-animation-distance) !important;
-		}
+		backdrop-filter: blur(var(--ext-header-blur-start));		max-width: var(--wp--style--global--wide-size);
+    	margin-left: auto;
+    	margin-right: auto;
+		border-radius: 1rem;
+}
+
+
+
+body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+	top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 32px));
+}
+
+@media (max-width: 782px) {
+	body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+		top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 46px));
 	}
 }
 
-@keyframes ext-header-fade-in {
+@supports (animation-timeline: scroll()) {
+
+
+	body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-atlas-beacon {
+
+		animation: ext-header-atlas-beacon-fade-in linear both !important;
+		animation-timeline: --ext-hero-timeline !important;
+		animation-range: exit 0% exit 80% !important; 
+
+	}
+
+	body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-atlas-beacon {
+		animation: ext-header-atlas-beacon-fade-in-no-hero linear forwards !important;
+		animation-timeline: scroll() !important;
+		animation-range: 0px var(--ext-header-animation-distance) !important;
+		max-width: var(--wp--style--global--wide-size);
+    	margin-left: auto;
+    	margin-right: auto;
+		border-radius: 1rem;
+	}
+}
+
+@keyframes ext-header-atlas-beacon-fade-in {
 	from {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
 		backdrop-filter: blur(var(--ext-header-blur-start));
@@ -655,9 +710,9 @@ body:has(.header-overlay-sticky.header-atlas-beacon) .ext-hero-section.ext-hero-
 	}
 }
 
-@keyframes ext-header-fade-in-no-hero {
+@keyframes ext-header-atlas-beacon-fade-in-no-hero {
 	from {
-		background-color: transparent;
+		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
 		backdrop-filter: blur(0);
 		padding-inline: 0;
 		box-shadow: none;

From e03d7869f9175401c051f634b0d536c158a8b5dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Sun, 19 Apr 2026 08:25:39 +0500
Subject: [PATCH 04/16] add offset from vr

---
 style.css | 30 +++++++++++++++++++++++-------
 1 file changed, 23 insertions(+), 7 deletions(-)

diff --git a/style.css b/style.css
index ba8b15de..a1ccae78 100644
--- a/style.css
+++ b/style.css
@@ -604,12 +604,18 @@ header.wp-block-template-part.ext-header-sticky:not(.has-background) {
 }
 
 body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-	top: var(--wp-admin--admin-bar--height, 32px);
+	top: var(
+		--wp-admin--admin-bar--position-offset,
+		var(--wp-admin--admin-bar--height, 32px)
+	);
 }
 
 @media (max-width: 782px) {
 	body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-		top: var(--wp-admin--admin-bar--height, 46px);
+			top: var(
+		--wp-admin--admin-bar--position-offset,
+		var(--wp-admin--admin-bar--height, 46px)
+	);
 	}
 }
 
@@ -664,15 +670,25 @@ body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-templa
 		border-radius: 1rem;
 }
 
-
-
 body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
-	top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 32px));
+	top: calc(
+		var(--ext-header-offset) +
+			var(
+				--wp-admin--admin-bar--position-offset,
+				var(--wp-admin--admin-bar--height, 32px)
+			)
+	);
 }
 
 @media (max-width: 782px) {
 	body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
-		top: calc(var(--ext-header-offset) + var(--wp-admin--admin-bar--height, 46px));
+			top: calc(
+			var(--ext-header-offset) +
+				var(
+					--wp-admin--admin-bar--position-offset,
+					var(--wp-admin--admin-bar--height, 46px)
+				)
+		);
 	}
 }
 
@@ -725,4 +741,4 @@ body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-bl
 		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);
 		translate: 0 var(--ext-header-offset);
 	}
-}
\ No newline at end of file
+}

From 52de12c913d8621a04372506c0c3d7e47fa12e65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Tue, 21 Apr 2026 14:43:21 +0500
Subject: [PATCH 05/16] Finalize the header

---
 .stylelintignore  |   2 +
 .stylelintrc.json |   2 +-
 style.css         | 397 ++++++++++++++++++++++++----------------------
 3 files changed, 213 insertions(+), 188 deletions(-)
 create mode 100644 .stylelintignore

diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 00000000..28f249ae
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,2 @@
+node_modules/
+tribe-events/
diff --git a/.stylelintrc.json b/.stylelintrc.json
index 2c501105..244450b8 100644
--- a/.stylelintrc.json
+++ b/.stylelintrc.json
@@ -1,3 +1,3 @@
 {
-	"extends": "stylelint-config-recommended"
+	"extends": "@wordpress/stylelint-config"
 }
diff --git a/style.css b/style.css
index a1ccae78..e8a91269 100644
--- a/style.css
+++ b/style.css
@@ -28,16 +28,16 @@ Extendable therefore is also distributed under the terms of the GNU GPL.
 	--wp--custom--spacing--medium: var(--wp--preset--spacing--50, clamp(2.5rem, 8vw, 4rem));
 	--wp--custom--spacing--large: var(--wp--preset--spacing--60, clamp(2.5rem, 8vw, 6rem));
 	--wp--custom--spacing--outer: max(1.25rem, 4vw);
-    --wp--preset--spacing--80: min(8rem, 12vw);
+	--wp--preset--spacing--80: min(8rem, 12vw);
 }
 
 /*
  * Smooth scrolling
  */
 
- html {
+html {
 	scroll-behavior: smooth;
-  }
+}
 
 /*
  * Font smoothing.
@@ -68,8 +68,8 @@ a:focus {
 }
 
 :where(.wp-site-blocks *:focus) {
-	outline-width:1px;
-	outline-style:solid
+	outline-width: 1px;
+	outline-style: solid;
 }
 
 a:active {
@@ -80,45 +80,47 @@ a:active {
  * Navigation Block
  */
 
- @media (min-width: 600px) {
-    .site-logo-title {
-        display:none
-    }
+@media (min-width: 600px) {
+
+	.site-logo-title {
+		display: none;
+	}
 
-	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, 
-	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, 
+	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
+	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
 	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
 		align-items: flex-start !important;
 	}
 }
 
- @media (max-width: 600px) {
-	.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item, 
-	.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container, 
+@media (max-width: 600px) {
+
+	.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
+	.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
 	.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
 		align-items: flex-start !important;
 	}
 }
 
 .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title {
-    display: flex;
+	display: flex;
 	flex-wrap: nowrap;
 	max-width: 100%;
-    align-items: center;
-    gap: 0.5rem;
-    padding-bottom: var(--wp--preset--spacing--30);
-    position: relative;
+	align-items: center;
+	gap: 0.5rem;
+	padding-bottom: var(--wp--preset--spacing--30);
+	position: relative;
 	padding-inline-end: 52px;
 }
 
 .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title::after {
-    content: "";
-    position: absolute;
-    left: calc(-1 * var(--wp--preset--spacing--30));
-    right: calc(-1 * var(--wp--preset--spacing--30));
-    bottom: 0;
-    height: 1px;
-    background: #8080801d;
+	content: "";
+	position: absolute;
+	left: calc(-1 * var(--wp--preset--spacing--30));
+	right: calc(-1 * var(--wp--preset--spacing--30));
+	bottom: 0;
+	height: 1px;
+	background: #8080801d;
 }
 
 .wp-block-navigation__responsive-container.has-modal-open.is-menu-open .site-logo-title img {
@@ -133,9 +135,9 @@ a:active {
 	font-weight: 700;
 	color: var(--wp--preset--color--foreground);
 	text-transform: uppercase;
-    letter-spacing: -0.02em;
-    box-sizing: border-box;
-    line-height: 1.15;
+	letter-spacing: -0.02em;
+	box-sizing: border-box;
+	line-height: 1.15;
 }
 
 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
@@ -143,10 +145,10 @@ a:active {
 }
 
 .has-modal-open .wp-block-navigation__responsive-container-close {
-	background-color:var(--wp--preset--color--tertiary);
+	background-color: var(--wp--preset--color--tertiary);
 	padding: 0.625rem;
 	border-radius: 100%;
-    top: -2.5px !important;
+	top: -2.5px !important;
 }
 
 .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
@@ -154,10 +156,11 @@ a:active {
 	width: 100%;
 }
 
-.has-modal-open .wp-block-navrigation__containe, .has-modal-open .wp-block-navigation__container ul {
-    row-gap: 0.75rem !important;
-    width: -webkit-fill-available;
-  	max-width: 100%;
+.has-modal-open .wp-block-navrigation__containe,
+.has-modal-open .wp-block-navigation__container ul {
+	row-gap: 0.75rem !important;
+	width: -webkit-fill-available;
+	max-width: 100%;
 }
 
 .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container > li.wp-block-navigation-item:not(.wp-block-navigation__submenu-container) {
@@ -170,20 +173,20 @@ a:active {
 
 .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container {
 	padding: 0.75rem 0.75rem 0 0.75rem !important;
-    gap: 0.75rem !important;
- }
+	gap: 0.75rem !important;
+}
 
 .has-modal-open .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container > li:not(.wp-block-navigation__submenu-container) > a.wp-block-navigation-item__content {
-    font-size: 1.25rem;
+	font-size: 1.25rem;
 	font-weight: 600;
 }
 
 .has-modal-open .wp-block-navigation__submenu-container {
-   padding-top: 0.75rem !important;
+	padding-top: 0.75rem !important;
 }
 
 .has-modal-open .wp-block-navigation__responsive-dialog ul.wp-block-navigation__container .wp-block-navigation-submenu .wp-block-navigation-item a {
-    font-size: 1rem !important;
+	font-size: 1rem !important;
 }
 
 .wp-block-navigation .wp-block-navigation-item a:hover,
@@ -217,19 +220,20 @@ nav .wp-block-pages-list__item.wp-block-navigation-item.menu-item-home {
  * --------------------------------------------------------
  */
 
- /* Button
+/* Button
 ----------------------------------------------------------*/
 .wp-element-button {
 	transition: background-color 0.15s ease;
 }
+
 .wp-block-button .wp-block-button__link.is-style-outline:not(.has-background):hover,
-.wp-block-button.is-style-outline>.wp-block-button__link:not(.has-background):hover {
+.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background):hover {
 	background-color: rgba(159, 159, 159, 0.2);
 }
 
 /* Table
 ----------------------------------------------------------*/
-.wp-block-table.is-style-stripes tbody tr:nth-child(odd){
+.wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
 	background-color: var(--wp--custom--blocks--core-table--variant-stripes--color--background, var(--wp--preset--color--tertiary));
 }
 
@@ -256,16 +260,20 @@ blockquote:is(.is-style-plain) {
 	border-radius: var(--wp--custom--elements--button--border--radius);
 	border-width: var(--wp--custom--elements--input--border--width);
 }
+
 :where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) .wp-block-search__input {
 	border-color: transparent;
 }
+
 .wp-block-search .wp-block-search__input {
 	border-radius: var(--wp--custom--elements--button--border--radius);
 }
 
 /* Image
 ----------------------------------------------------------*/
-.wp-block-image[style*="-radius"]:not([style*="overflow"]) { overflow: hidden }
+.wp-block-image[style*="-radius"]:not([style*="overflow"]) {
+	overflow: hidden;
+}
 
 /*
  * --------------------------------------------------------
@@ -275,9 +283,9 @@ blockquote:is(.is-style-plain) {
 
 .block-editor-block-list__block.wp-block.is-default-size.wp-block-site-logo .components-resizable-box__container,
 .wp-block-site-logo.is-default-size img {
-    max-height: 42px !important;
-    height: auto !important;
-    width: auto !important;
+	max-height: 42px !important;
+	height: auto !important;
+	width: auto !important;
 }
 
 /* Ensure default logo works well on light and dark backgrounds
@@ -293,6 +301,7 @@ blockquote:is(.is-style-plain) {
  * for people that prefer not to see them.
  */
 @media (prefers-reduced-motion: reduce) {
+
 	html:focus-within {
 		scroll-behavior: auto;
 	}
@@ -310,7 +319,8 @@ blockquote:is(.is-style-plain) {
 /*
  * Matching caret and focus outline colors.
  */
-input, textarea {
+input,
+textarea {
 	caret-color: inherit;
 	outline-color: inherit;
 }
@@ -318,7 +328,7 @@ input, textarea {
 /*
  * Matching input with outline button style.
  */
-:where(.wp-block-post-comments-form) input:not([type=submit]),
+:where(.wp-block-post-comments-form) input:not([type="submit"]),
 :where(.wp-block-post-comments-form) textarea {
 	background-color: var(--wp--preset--color--background);
 	color: var(--wp--preset--color--foreground);
@@ -330,16 +340,18 @@ input, textarea {
  * Woocommerce temporarily customization until the woo blocks offer support
  */
 
-.woocommerce-Tabs-panel--description h2, .woocommerce-Reviews-title {
+.woocommerce-Tabs-panel--description h2,
+.woocommerce-Reviews-title {
 	font-size: var(--wp--preset--font-size--medium);
 }
 
 .wp-block-button.wc-block-components-product-button {
 	flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: start;
+	flex-wrap: wrap;
+	justify-content: start;
 	gap: 1rem;
 }
+
 .wp-block-button.wc-block-components-product-button a.added_to_cart {
 	margin-top: 0;
 }
@@ -350,19 +362,22 @@ input, textarea {
 
 .wp-site-blocks .wp-block-group.woocommerce.product {
 	margin-top: 0;
-	margin-bottom: 0; 
+	margin-bottom: 0;
 }
+
 .wc-block-product-template__responsive {
 	grid-row-gap: 2rem;
 }
+
 .wc-block-components-product-button__button {
 	z-index: 1;
 }
+
 /*
  * Adds offset for sticky header overlap
  */
 
- .sticky-header-offset-container .entry-content > .wp-block-group {
+.sticky-header-offset-container .entry-content > .wp-block-group {
 	scroll-margin-top: var(--wp--preset--spacing--60);
 }
 
@@ -371,35 +386,35 @@ input, textarea {
  */
 
 :not(.block-editor-block-preview__content-iframe)
-.has-tertiary-background-color.has-background 
-[class*='is-style-ext-preset--group--'][class*='item-card-1']:not(.has-background)
-{
-    background-color: var(--wp--preset--color--background);
+.has-tertiary-background-color.has-background
+[class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background) {
+	background-color: var(--wp--preset--color--background);
 }
 
 :not(.block-editor-block-preview__content-iframe)
-.has-tertiary-background-color.has-background 
-[class*='is-style-ext-preset--group--'][class*='item-card-1']:not(.has-background)::before {
-    background-color: var(--wp--preset--color--background) !important;
+.has-tertiary-background-color.has-background
+[class*="is-style-ext-preset--group--"][class*="item-card-1"]:not(.has-background)::before {
+	background-color: var(--wp--preset--color--background) !important;
 }
 
 :not(.block-editor-block-preview__content-iframe)
-.has-tertiary-background-color.has-background 
-[class*='is-style-ext-preset--image--']:not(.has-background)::before {
-    background-color: var(--wp--preset--color--tertiary) !important;
+.has-tertiary-background-color.has-background
+[class*="is-style-ext-preset--image--"]:not(.has-background)::before {
+	background-color: var(--wp--preset--color--tertiary) !important;
 }
 
 :not(.block-editor-block-preview__content-iframe)
-.has-tertiary-background-color.has-background 
-[class*='is-style-ext-preset--group--'][class*='item-card-1']::before,:not(.block-editor-block-preview__content-iframe)
-.has-tertiary-background-color.has-background 
-[class*='is-style-ext-preset--media-text--']:before {
-    background-color: var(--wp--preset--color--background) !important;
+.has-tertiary-background-color.has-background
+[class*="is-style-ext-preset--group--"][class*="item-card-1"]::before,
+:not(.block-editor-block-preview__content-iframe)
+.has-tertiary-background-color.has-background
+[class*="is-style-ext-preset--media-text--"]::before {
+	background-color: var(--wp--preset--color--background) !important;
 }
 
-.block-editor-block-preview__content-iframe 
-[class*='is-style-ext-preset--group--natural-1'][class*='item-card-1'] {
-    background-color: transparent !important;
+.block-editor-block-preview__content-iframe
+[class*="is-style-ext-preset--group--natural-1"][class*="item-card-1"] {
+	background-color: transparent !important;
 }
 
 :root {
@@ -415,32 +430,30 @@ input, textarea {
  */
 
 [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has(
-  + .has-background-background-color > .wp-block-cover.alignfull
++ .has-background-background-color > .wp-block-cover.alignfull
 )::after {
-  content: none !important;
+	content: none !important;
 }
 
 [class*="is-style-ext-preset--group--"][class*="--section"].has-tertiary-background-color:has(
-  + .has-background-background-color > .wp-block-cover.alignfull
++ .has-background-background-color > .wp-block-cover.alignfull
 ) {
-  margin-bottom: 0 !important;
+	margin-bottom: 0 !important;
 }
 
-[class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull)
-+ .has-tertiary-background-color::before {
-  content: none !important;
+[class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color::before {
+	content: none !important;
 }
 
-[class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull)
-+ .has-tertiary-background-color {
-  margin-top: 0 !important;
+[class*="is-style-ext-preset--group--"][class*="--section"].has-background-background-color:has(.wp-block-cover.alignfull) + .has-tertiary-background-color {
+	margin-top: 0 !important;
 }
 
 /*
  * utilities
  */
 
- .m-0 {
+.m-0 {
 	margin: 0 !important;
 }
 
@@ -451,108 +464,114 @@ input, textarea {
 .z-10 {
 	z-index: 10 !important;
 }
+
 .z-20 {
 	z-index: 20 !important;
 }
+
 .z-30 {
 	z-index: 30 !important;
 }
 
 
 .d-none {
-  display: none;
+	display: none;
 }
 
 .d-block {
-  display: block;
+	display: block;
 }
 
 @media (min-width: 640px) {
-  .sm-d-none {
-    display: none;
-  }
 
-  .sm-d-block {
-    display: block;
-  }
+	.sm-d-none {
+		display: none;
+	}
+
+	.sm-d-block {
+		display: block;
+	}
 }
 
 @media (min-width: 768px) {
-  .md-d-none {
-    display: none;
-  }
 
-  .md-d-block {
-    display: block;
-  }
+	.md-d-none {
+		display: none;
+	}
+
+	.md-d-block {
+		display: block;
+	}
 }
 
 @media (min-width: 1024px) {
-  .lg-d-none {
-    display: none;
-  }
 
-  .lg-d-block {
-    display: block;
-  }
+	.lg-d-none {
+		display: none;
+	}
+
+	.lg-d-block {
+		display: block;
+	}
 }
 
 /* RTL-only fix for Gutenberg Group left justification */
 
-[dir="rtl"] [class*="wp-container-core-group-is-layout-"].ext-is-logical-start.is-content-justification-left
-	> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
+[dir="rtl"] [class*="wp-container-core-group-is-layout-"].ext-is-logical-start.is-content-justification-left > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
 	margin-inline-start: 0 !important;
 	margin-inline-end: auto !important;
 }
 
-.no-underline, .no-underline a {
-  text-decoration: none;
+.no-underline,
+.no-underline a {
+	text-decoration: none;
 }
 
 /* CSS for extendify-agent vibe previews */
 
 .extendify-agent .preview-is-style-ext-preset--group--matrix-1--section .preview-is-style-ext-preset--group--matrix-1--item-card-1--align-center {
-    border: solid 6px color-mix(in oklab, var(--wp--preset--color--foreground) 10%, transparent) !important;
+	border: solid 6px color-mix(in oklab, var(--wp--preset--color--foreground) 10%, transparent) !important;
 }
 
 
 .extendify-agent .preview-is-style-ext-preset--group--wave-1--section {
-    --wave-ratio: 1440 / 80;
-    overflow: visible;
+	--wave-ratio: 1440 / 80;
+	overflow: visible;
 }
 
 .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center {
-    position: relative;
-    overflow: visible;
+	position: relative;
+	overflow: visible;
 }
 
 .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::after {
-    content: "";
-    position: absolute;
-    width: 150%;
-    left: 50%;
-    transform: translateX(-35%);
-    aspect-ratio: var(--wave-ratio);
-    background-color: var(--wp--preset--color--background);
-    -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%;
-    mask: var(--wave-mask) no-repeat center / 100% 100%;
-    bottom: -1px;
-    pointer-events: none;
-    z-index: 1;
+	content: "";
+	position: absolute;
+	width: 150%;
+	left: 50%;
+	transform: translateX(-35%);
+	aspect-ratio: var(--wave-ratio);
+	background-color: var(--wp--preset--color--background);
+	-webkit-mask: var(--wave-mask) no-repeat center / 100% 100%;
+	mask: var(--wave-mask) no-repeat center / 100% 100%;
+	bottom: -1px;
+	pointer-events: none;
+	z-index: 1;
 }
+
 .extendify-agent .preview-is-style-ext-preset--group--wave-1--section .preview-is-style-ext-preset--group--wave-1--item-card-1--align-center::before {
-    content: "";
-    position: absolute;
-    width: 150%;
-    left: 50%;
-    transform: translateX(-65%) scale(-1, -1);
-    aspect-ratio: var(--wave-ratio);
-    background-color: var(--wp--preset--color--background);
-    -webkit-mask: var(--wave-mask) no-repeat center / 100% 100%;
-    mask: var(--wave-mask) no-repeat center / 100% 100%;
-    top: -1px;
-    pointer-events: none;
-    z-index: 1;
+	content: "";
+	position: absolute;
+	width: 150%;
+	left: 50%;
+	transform: translateX(-65%) scale(-1, -1);
+	aspect-ratio: var(--wave-ratio);
+	background-color: var(--wp--preset--color--background);
+	-webkit-mask: var(--wave-mask) no-repeat center / 100% 100%;
+	mask: var(--wave-mask) no-repeat center / 100% 100%;
+	top: -1px;
+	pointer-events: none;
+	z-index: 1;
 }
 
 /*
@@ -577,10 +596,10 @@ input, textarea {
 :root {
 	--ext-header-height: 96px;
 	--ext-header-offset: 1rem;
-	--ext-header-blur-start: 8px;
+	--ext-header-blur-start: 4px;
 	--ext-header-blur-end: 12px;
 	--ext-header-bg-opacity-start: 0.75;
-	--ext-header-bg-opacity-end: 0.85;
+	--ext-header-bg-opacity-end: 0.95;
 	--ext-header-shadow: 0 4px 20px;
 	--ext-header-padding: 1.5rem;
 	--ext-header-animation-distance: 100px;
@@ -604,18 +623,15 @@ header.wp-block-template-part.ext-header-sticky:not(.has-background) {
 }
 
 body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-	top: var(
-		--wp-admin--admin-bar--position-offset,
-		var(--wp-admin--admin-bar--height, 32px)
-	);
+	top:
+ var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px));
 }
 
 @media (max-width: 782px) {
+
 	body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-			top: var(
-		--wp-admin--admin-bar--position-offset,
-		var(--wp-admin--admin-bar--height, 46px)
-	);
+		top:
+ var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px));
 	}
 }
 
@@ -623,14 +639,13 @@ body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
 ----------------------------------------------------------*/
 body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-overlay) {
 	position: relative;
-    top: 0;
-    z-index: 12;
-
-			background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
+	top: 0;
+	z-index: 12;
+	background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 }
 
 header.wp-block-template-part.ext-header-overlay:not(.has-background) {
-	background-color: oklch(from var(--wp--preset--color--background) l c h / 0.90);
+	background-color: oklch(from var(--wp--preset--color--background) l c h / 0.9);
 }
 
 body:has(.ext-header-overlay) .ext-hero-section.ext-hero-section--full-screen {
@@ -642,6 +657,7 @@ body:has(.ext-header-overlay) .ext-hero-section.ext-hero-section--full-screen {
 /* Base: Hero Timeline for Scroll-Driven Animations
 ----------------------------------------------------------*/
 @supports (animation-timeline: scroll()) {
+
 	.ext-hero-section.ext-hero-section--full-screen {
 		view-timeline: --ext-hero-timeline block;
 	}
@@ -650,9 +666,9 @@ body:has(.ext-header-overlay) .ext-hero-section.ext-hero-section--full-screen {
 /*  Header-Specific: Atlas Beacon (ext-header-atlas-beacon)
 ----------------------------------------------------------*/
 
-	header.wp-block-template-part .ext-header-atlas-beacon.ext-animate {
-		opacity: 1 !important;
-	}
+header.wp-block-template-part .ext-header-atlas-beacon.ext-animate {
+	opacity: 1 !important;
+}
 
 header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
 	position: sticky;
@@ -661,64 +677,67 @@ header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
 	border-bottom: none;
 }
 
-body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-overlay.ext-header-atlas-beacon) {
+body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+	position: sticky;
 	top: var(--ext-header-offset);
-			background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
-		backdrop-filter: blur(var(--ext-header-blur-start));		max-width: var(--wp--style--global--wide-size);
-    	margin-left: auto;
-    	margin-right: auto;
-		border-radius: 1rem;
+	max-width: var(--wp--style--global--wide-size);
+	margin-left: auto;
+	margin-right: auto;
+	background-color: transparent;
+	padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);
+}
+
+body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-sticky.ext-header-atlas-beacon {
+	background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
+	backdrop-filter: blur(var(--ext-header-blur-start));
+	border-radius: 1rem;
+	overflow: hidden;
 }
 
 body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
-	top: calc(
-		var(--ext-header-offset) +
-			var(
-				--wp-admin--admin-bar--position-offset,
-				var(--wp-admin--admin-bar--height, 32px)
-			)
-	);
+	top:
+		calc(var(--ext-header-offset) +
+		var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)));
+	background-color: transparent;
 }
 
 @media (max-width: 782px) {
 	body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
-			top: calc(
-			var(--ext-header-offset) +
-				var(
-					--wp-admin--admin-bar--position-offset,
-					var(--wp-admin--admin-bar--height, 46px)
-				)
-		);
+		top:
+			calc(var(--ext-header-offset) +
+			var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px)));
 	}
 }
 
 @supports (animation-timeline: scroll()) {
-
-
-	body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-atlas-beacon {
-
+	body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-sticky.ext-header-atlas-beacon {
 		animation: ext-header-atlas-beacon-fade-in linear both !important;
 		animation-timeline: --ext-hero-timeline !important;
-		animation-range: exit 0% exit 80% !important; 
+		animation-range: exit 0% exit 80% !important;
+	}
 
+	body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+
+		max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
+		margin-left: auto;
+		margin-right: auto;
 	}
 
-	body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-atlas-beacon {
+	body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-sticky.ext-header-atlas-beacon {
 		animation: ext-header-atlas-beacon-fade-in-no-hero linear forwards !important;
 		animation-timeline: scroll() !important;
-		animation-range: 0px var(--ext-header-animation-distance) !important;
-		max-width: var(--wp--style--global--wide-size);
-    	margin-left: auto;
-    	margin-right: auto;
+		animation-range: 0 var(--ext-header-animation-distance) !important;
 		border-radius: 1rem;
 	}
 }
 
 @keyframes ext-header-atlas-beacon-fade-in {
+
 	from {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
 		backdrop-filter: blur(var(--ext-header-blur-start));
 	}
+
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
@@ -727,18 +746,22 @@ body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-bl
 }
 
 @keyframes ext-header-atlas-beacon-fade-in-no-hero {
+
 	from {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
-		backdrop-filter: blur(0);
-		padding-inline: 0;
+		backdrop-filter: blur(var(--ext-header-blur-start));
 		box-shadow: none;
 		translate: 0 0;
+		max-width:100%;
+		margin-inline:auto;
 	}
+
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
-		padding-inline: var(--ext-header-padding);
 		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);
 		translate: 0 var(--ext-header-offset);
+		max-width: var(--wp--style--global--wide-size);
+		margin-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);
 	}
 }

From eb032c3da58e05baf4c16f92155a0f920e7f0e2a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Wed, 22 Apr 2026 19:22:47 +0500
Subject: [PATCH 06/16] Tweak selector

---
 parts/header-atlas-beacon.html |  8 +++---
 style.css                      | 52 +++++++++++++++++++---------------
 2 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/parts/header-atlas-beacon.html b/parts/header-atlas-beacon.html
index 63db7471..8dc41f98 100644
--- a/parts/header-atlas-beacon.html
+++ b/parts/header-atlas-beacon.html
@@ -1,6 +1,6 @@
-<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header-atlas-beacon","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header-sticky\u002d\u002dscroll-animated","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
 <div
-	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header-atlas-beacon"
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header-sticky--scroll-animated"
 	style="padding-top: 0; padding-bottom: 0"
 >
 	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
@@ -27,8 +27,8 @@
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
+		<!-- wp:group {"className":"ext-nav-and-cta","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group ext-nav-and-cta">
 			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
 			<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
 			<!-- /wp:navigation -->
diff --git a/style.css b/style.css
index e8a91269..e5bd421f 100644
--- a/style.css
+++ b/style.css
@@ -584,13 +584,13 @@ textarea {
  *    - .ext-header-overlay  → hero section overlap (negative margin)
  *
  *  Header-Specific Modifier Classes (optional customizations):
- *    - .ext-header-atlas-beacon → glassmorphism animation on first-child
+ *    - .ext-header-sticky--scroll-animated → glassmorphism animation on first-child
  *
  *  Usage Examples:
  *    - ext-header-sticky                                    → just sticky
  *    - ext-header-overlay                                   → just overlay, scrolls away
  *    - ext-header-sticky ext-header-overlay                 → sticky + overlay (base)
- *    - ext-header-sticky ext-header-overlay ext-header-atlas-beacon → full glassmorphism
+ *    - ext-header-sticky ext-header-overlay ext-header-sticky--scroll-animated → full glassmorphism
  */
 
 :root {
@@ -600,7 +600,6 @@ textarea {
 	--ext-header-blur-end: 12px;
 	--ext-header-bg-opacity-start: 0.75;
 	--ext-header-bg-opacity-end: 0.95;
-	--ext-header-shadow: 0 4px 20px;
 	--ext-header-padding: 1.5rem;
 	--ext-header-animation-distance: 100px;
 }
@@ -637,7 +636,7 @@ body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
 
 /* Base: Overlay Header - Hero Section Overlap
 ----------------------------------------------------------*/
-body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-overlay) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay) {
 	position: relative;
 	top: 0;
 	z-index: 12;
@@ -648,7 +647,7 @@ header.wp-block-template-part.ext-header-overlay:not(.has-background) {
 	background-color: oklch(from var(--wp--preset--color--background) l c h / 0.9);
 }
 
-body:has(.ext-header-overlay) .ext-hero-section.ext-hero-section--full-screen {
+body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child {
 	margin-top: calc(-1 * var(--ext-header-height)) !important;
 	position: relative;
 	z-index: 0;
@@ -657,27 +656,26 @@ body:has(.ext-header-overlay) .ext-hero-section.ext-hero-section--full-screen {
 /* Base: Hero Timeline for Scroll-Driven Animations
 ----------------------------------------------------------*/
 @supports (animation-timeline: scroll()) {
-
-	.ext-hero-section.ext-hero-section--full-screen {
+	.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child {
 		view-timeline: --ext-hero-timeline block;
 	}
 }
 
-/*  Header-Specific: Atlas Beacon (ext-header-atlas-beacon)
+/*  ext-header-sticky--scroll-animated
 ----------------------------------------------------------*/
 
-header.wp-block-template-part .ext-header-atlas-beacon.ext-animate {
+header.wp-block-template-part .ext-header-sticky--scroll-animated.ext-animate {
 	opacity: 1 !important;
 }
 
-header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
 	position: sticky;
 	top: 0;
 	z-index: 12;
 	border-bottom: none;
 }
 
-body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
 	position: sticky;
 	top: var(--ext-header-offset);
 	max-width: var(--wp--style--global--wide-size);
@@ -687,14 +685,14 @@ body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-templa
 	padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);
 }
 
-body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-sticky.ext-header-atlas-beacon {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
 	background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
 	backdrop-filter: blur(var(--ext-header-blur-start));
 	border-radius: 1rem;
 	overflow: hidden;
 }
 
-body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
 	top:
 		calc(var(--ext-header-offset) +
 		var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)));
@@ -702,7 +700,7 @@ body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-bl
 }
 
 @media (max-width: 782px) {
-	body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+	body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
 		top:
 			calc(var(--ext-header-offset) +
 			var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px)));
@@ -710,28 +708,28 @@ body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-bl
 }
 
 @supports (animation-timeline: scroll()) {
-	body:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-sticky.ext-header-atlas-beacon {
-		animation: ext-header-atlas-beacon-fade-in linear both !important;
+	body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
+		animation: ext-header-sticky--scroll-animated-fade-in linear both !important;
 		animation-timeline: --ext-hero-timeline !important;
 		animation-range: exit 0% exit 80% !important;
 	}
 
-	body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) {
+	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
 
 		max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
 		margin-left: auto;
 		margin-right: auto;
 	}
 
-	body:not(:has(.ext-hero-section.ext-hero-section--full-screen)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-atlas-beacon) .ext-header-sticky.ext-header-atlas-beacon {
-		animation: ext-header-atlas-beacon-fade-in-no-hero linear forwards !important;
+	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
+		animation: ext-header-sticky--scroll-animated-fade-in-no-hero linear forwards !important;
 		animation-timeline: scroll() !important;
 		animation-range: 0 var(--ext-header-animation-distance) !important;
 		border-radius: 1rem;
 	}
 }
 
-@keyframes ext-header-atlas-beacon-fade-in {
+@keyframes ext-header-sticky--scroll-animated-fade-in {
 
 	from {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
@@ -741,11 +739,16 @@ body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-bl
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
-		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);
+		box-shadow:
+	0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14),
+	0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
+
+
+
 	}
 }
 
-@keyframes ext-header-atlas-beacon-fade-in-no-hero {
+@keyframes ext-header-sticky--scroll-animated-fade-in-no-hero {
 
 	from {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
@@ -759,7 +762,10 @@ body.admin-bar:has(.ext-hero-section.ext-hero-section--full-screen) header.wp-bl
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
-		box-shadow: var(--ext-header-shadow) oklch(from var(--wp--preset--color--foreground) l c h / 0.1);
+		box-shadow:
+	0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14),
+	0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
+
 		translate: 0 var(--ext-header-offset);
 		max-width: var(--wp--style--global--wide-size);
 		margin-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);

From 927ed87472ae2a7fd5b5b5c447c12754c8f466ef Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Thu, 23 Apr 2026 18:58:48 +0500
Subject: [PATCH 07/16] improve shadow

---
 style.css | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/style.css b/style.css
index e5bd421f..5689c746 100644
--- a/style.css
+++ b/style.css
@@ -622,15 +622,13 @@ header.wp-block-template-part.ext-header-sticky:not(.has-background) {
 }
 
 body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-	top:
- var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px));
+	top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px));
 }
 
 @media (max-width: 782px) {
 
 	body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-		top:
- var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px));
+		top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px));
 	}
 }
 
@@ -656,6 +654,7 @@ body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-sectio
 /* Base: Hero Timeline for Scroll-Driven Animations
 ----------------------------------------------------------*/
 @supports (animation-timeline: scroll()) {
+
 	.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child {
 		view-timeline: --ext-hero-timeline block;
 	}
@@ -700,6 +699,7 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 }
 
 @media (max-width: 782px) {
+
 	body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
 		top:
 			calc(var(--ext-header-offset) +
@@ -708,6 +708,7 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 }
 
 @supports (animation-timeline: scroll()) {
+
 	body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
 		animation: ext-header-sticky--scroll-animated-fade-in linear both !important;
 		animation-timeline: --ext-hero-timeline !important;
@@ -739,9 +740,7 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
-		box-shadow:
-	0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14),
-	0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
+		box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
 
 
 
@@ -755,16 +754,14 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 		backdrop-filter: blur(var(--ext-header-blur-start));
 		box-shadow: none;
 		translate: 0 0;
-		max-width:100%;
-		margin-inline:auto;
+		max-width: 100%;
+		margin-inline: auto;
 	}
 
 	to {
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
-		box-shadow:
-	0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14),
-	0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
+		box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
 
 		translate: 0 var(--ext-header-offset);
 		max-width: var(--wp--style--global--wide-size);

From edbcf0c546bbb0c1b7a01bc3e2636f0ccbcf5f14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Thu, 23 Apr 2026 20:17:12 +0500
Subject: [PATCH 08/16] get header height dynamically

---
 assets/js/header.js | 11 +++++++++++
 functions.php       | 21 +++++++++++++++++++--
 style.css           | 33 ++++++++++++++++++++-------------
 3 files changed, 50 insertions(+), 15 deletions(-)
 create mode 100644 assets/js/header.js

diff --git a/assets/js/header.js b/assets/js/header.js
new file mode 100644
index 00000000..34bcdff8
--- /dev/null
+++ b/assets/js/header.js
@@ -0,0 +1,11 @@
+(function () {
+	'use strict';
+
+	const header = document.querySelector( 'header.wp-block-template-part' );
+	if ( ! header ) return;
+
+	new ResizeObserver( function ( entries ) {
+		const height = entries[ 0 ].borderBoxSize[ 0 ].blockSize;
+		document.documentElement.style.setProperty( '--ext-header-height', height + 'px' );
+	} ).observe( header, { box: 'border-box' } );
+} )();
diff --git a/functions.php b/functions.php
index 41f2a795..55253484 100644
--- a/functions.php
+++ b/functions.php
@@ -228,6 +228,23 @@ function extendable_exclude_wc_block_templates( $templates, $query ) {
 }
 add_filter( 'get_block_templates', 'extendable_exclude_wc_block_templates', 10, 2 );
 
+/**
+ * Header helper.
+ *
+ * @package Extendable
+ * @since Extendable 2.1.5
+ */
+function extendable_enqueue_header_scripts() {
+	wp_enqueue_script(
+		'extendable-header',
+		get_template_directory_uri() . '/assets/js/header.js',
+		array(),
+		EXTENDABLE_THEME_VERSION,
+		true
+	);
+}
+add_action( 'wp_enqueue_scripts', 'extendable_enqueue_header_scripts' );
+
 /**
  * Navigation customizations
  *
@@ -253,11 +270,11 @@ function extendable_enqueue_navigation_customizations() {
 			true        // load in footer
 		);
 
-		wp_localize_script( 'extendable-navigation_customizations', 'ExtendableNavData', 
+		wp_localize_script( 'extendable-navigation_customizations', 'ExtendableNavData',
 			array(
         		'logoUrl'   => $logo_url,
         		'siteTitle' => $site_title,
-    		) 
+    		)
 		);
 	}
 endif;
diff --git a/style.css b/style.css
index 5689c746..6de698fd 100644
--- a/style.css
+++ b/style.css
@@ -632,6 +632,10 @@ body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
 	}
 }
 
+html:has(.ext-header-sticky) {
+	scroll-padding-top: var(--ext-header-height);
+}
+
 /* Base: Overlay Header - Hero Section Overlap
 ----------------------------------------------------------*/
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay) {
@@ -709,25 +713,30 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 
 @supports (animation-timeline: scroll()) {
 
-	body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
-		animation: ext-header-sticky--scroll-animated-fade-in linear both !important;
-		animation-timeline: --ext-hero-timeline !important;
-		animation-range: exit 0% exit 80% !important;
-	}
-
 	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
-
 		max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
 		margin-left: auto;
 		margin-right: auto;
 	}
 
 	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
-		animation: ext-header-sticky--scroll-animated-fade-in-no-hero linear forwards !important;
-		animation-timeline: scroll() !important;
-		animation-range: 0 var(--ext-header-animation-distance) !important;
 		border-radius: 1rem;
 	}
+
+	@media (prefers-reduced-motion: no-preference) {
+
+		body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
+			animation: ext-header-sticky--scroll-animated-fade-in linear both !important;
+			animation-timeline: --ext-hero-timeline !important;
+			animation-range: exit 0% exit 80% !important;
+		}
+
+		body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
+			animation: ext-header-sticky--scroll-animated-fade-in-no-hero linear forwards !important;
+			animation-timeline: scroll() !important;
+			animation-range: 0 var(--ext-header-animation-distance) !important;
+		}
+	}
 }
 
 @keyframes ext-header-sticky--scroll-animated-fade-in {
@@ -741,9 +750,6 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
 		box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
-
-
-
 	}
 }
 
@@ -766,5 +772,6 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 		translate: 0 var(--ext-header-offset);
 		max-width: var(--wp--style--global--wide-size);
 		margin-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);
+		border-radius: 1rem;
 	}
 }

From 338212ba60ee31feaa571530a8e881da39c417cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Thu, 30 Apr 2026 23:08:42 +0500
Subject: [PATCH 09/16] add new 4 navbars and tweak some code

---
 assets/js/header.js                |  15 ++
 parts/header-atlas-beacon.html     |  17 +-
 parts/header-catalina-skyline.html |  53 +++++++
 parts/header-ceadar-peak.html      |  35 +++++
 parts/header-ember-harbor.html     |  51 ++++++
 style.css                          | 242 ++++++++++++++++++++++-------
 theme.json                         |  15 ++
 7 files changed, 365 insertions(+), 63 deletions(-)
 create mode 100644 parts/header-catalina-skyline.html
 create mode 100644 parts/header-ceadar-peak.html
 create mode 100644 parts/header-ember-harbor.html

diff --git a/assets/js/header.js b/assets/js/header.js
index 34bcdff8..b0f0062a 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -8,4 +8,19 @@
 		const height = entries[ 0 ].borderBoxSize[ 0 ].blockSize;
 		document.documentElement.style.setProperty( '--ext-header-height', height + 'px' );
 	} ).observe( header, { box: 'border-box' } );
+
+	const hero = document.querySelector( '.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child' );
+	if ( hero ) {
+		new IntersectionObserver( function ( entries ) {
+			header.classList.toggle( 'is-past-hero', ! entries[ 0 ].isIntersecting );
+		}, { rootMargin: '-50% 0px 0px 0px' } ).observe( hero );
+	}
+
+	const topSentinel = document.createElement( 'div' );
+	topSentinel.style.cssText = 'position:absolute;top:0;left:0;height:1px;width:1px;pointer-events:none;';
+	document.body.prepend( topSentinel );
+
+	new IntersectionObserver( function ( entries ) {
+		header.classList.toggle( 'is-scrolled', ! entries[ 0 ].isIntersecting );
+	} ).observe( topSentinel );
 } )();
diff --git a/parts/header-atlas-beacon.html b/parts/header-atlas-beacon.html
index 8dc41f98..fab9834e 100644
--- a/parts/header-atlas-beacon.html
+++ b/parts/header-atlas-beacon.html
@@ -1,6 +1,6 @@
-<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header-sticky\u002d\u002dscroll-animated","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky\u002d\u002dfloating-pill","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
 <div
-	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header-sticky--scroll-animated"
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky--floating-pill"
 	style="padding-top: 0; padding-bottom: 0"
 >
 	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
@@ -17,18 +17,13 @@
 	>
 		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:site-logo {"shouldSyncIcon":false} /-->
-
-			<!-- wp:group -->
-			<div class="wp-block-group">
-				<!-- wp:site-title {"style":{"typography":{"textTransform":"none"}},"fontSize":"medium"} /-->
-			</div>
-			<!-- /wp:group -->
+			<!-- wp:site-logo {"width":40, "shouldSyncIcon":false} /-->
+			<!-- wp:site-title {"style":{"typography":{"textTransform":"none"}},"fontSize":"small"} /-->
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:group {"className":"ext-nav-and-cta","layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group ext-nav-and-cta">
+		<!-- wp:group {"className":"ext-nav-extras","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group ext-nav-extras">
 			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
 			<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
 			<!-- /wp:navigation -->
diff --git a/parts/header-catalina-skyline.html b/parts/header-catalina-skyline.html
new file mode 100644
index 00000000..6550bb46
--- /dev/null
+++ b/parts/header-catalina-skyline.html
@@ -0,0 +1,53 @@
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header\u002d\u002ddark","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<div
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header--dark"
+	style="padding-top: 0; padding-bottom: 0"
+>
+	<!-- wp:group {"align":"full","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+	<div
+		class="wp-block-group alignfull"
+		style="
+			border-top-left-radius: 1rem;
+			border-top-right-radius: 1rem;
+			border-bottom-left-radius: 1rem;
+			border-bottom-right-radius: 1rem;
+			padding-top: var(--wp--preset--spacing--20);
+			padding-right: var(--wp--preset--spacing--30);
+			padding-bottom: var(--wp--preset--spacing--20);
+			padding-left: var(--wp--preset--spacing--30);
+		"
+	>
+		<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"40%"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:page-list /-->
+			<!-- /wp:navigation -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"},"layout":{"selfStretch":"fixed","flexSize":"20%"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"width":48,"shouldSyncIcon":false} /-->
+			<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","letterSpacing":"0.1em"}},"fontSize":"small"} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"className":"ext-nav-extras","style":{"layout":{"selfStretch":"fixed","flexSize":"40%"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+		<div class="wp-block-group ext-nav-extras">
+			<!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dforeground)","size":"has-small-icon-size","className":"is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social","style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+			<ul
+				class="wp-block-social-links has-small-icon-size has-icon-color is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social"
+			>
+				<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /-->
+
+				<!-- wp:social-link {"url":"https://www.facebook.com/","service":"facebook"} /-->
+
+				<!-- wp:social-link {"url":"https://x.com/","service":"x"} /-->
+			</ul>
+			<!-- /wp:social-links -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/parts/header-ceadar-peak.html b/parts/header-ceadar-peak.html
new file mode 100644
index 00000000..33be1389
--- /dev/null
+++ b/parts/header-ceadar-peak.html
@@ -0,0 +1,35 @@
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky\u002d\u002dfloating-pill ext-header--dark","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<div
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky--floating-pill ext-header--dark"
+	style="padding-top: 0; padding-bottom: 0"
+>
+	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+	<div
+		class="wp-block-group alignwide"
+		style="
+			border-top-left-radius: 1rem;
+			border-top-right-radius: 1rem;
+			border-bottom-left-radius: 1rem;
+			border-bottom-right-radius: 1rem;
+			padding-top: var(--wp--preset--spacing--20);
+			padding-bottom: var(--wp--preset--spacing--20);
+		"
+	>
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"width":40, "shouldSyncIcon":false} /-->
+			<!-- wp:site-title {"style":{"typography":{"textTransform":"none"}},"fontSize":"small"} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"className":"ext-nav-extras","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group ext-nav-extras">
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:page-list {"isNavigationChild":true,"showSubmenuIcon":true,"openSubmenusOnClick":false} /-->
+			<!-- /wp:navigation -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/parts/header-ember-harbor.html b/parts/header-ember-harbor.html
new file mode 100644
index 00000000..2fdb40c3
--- /dev/null
+++ b/parts/header-ember-harbor.html
@@ -0,0 +1,51 @@
+<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header\u002d\u002ddark","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
+<div
+	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header--dark"
+	style="padding-top: 0; padding-bottom: 0"
+>
+	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+	<div
+		class="wp-block-group alignwide"
+		style="
+			border-top-left-radius: 1rem;
+			border-top-right-radius: 1rem;
+			border-bottom-left-radius: 1rem;
+			border-bottom-right-radius: 1rem;
+			padding-top: var(--wp--preset--spacing--20);
+			padding-bottom: var(--wp--preset--spacing--20);
+		"
+	>
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:site-logo {"width":48,"shouldSyncIcon":false} /-->
+			<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontSize":"14px","fontStyle":"normal","fontWeight":"400","letterSpacing":"0.2em"}}} /-->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group">
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:page-list /-->
+			<!-- /wp:navigation -->
+		</div>
+		<!-- /wp:group -->
+
+		<!-- wp:group {"className":"ext-nav-extras","layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<div class="wp-block-group ext-nav-extras">
+			<!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dforeground)","size":"has-small-icon-size","className":"is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social","style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+			<ul
+				class="wp-block-social-links has-small-icon-size has-icon-color is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social"
+			>
+				<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /-->
+
+				<!-- wp:social-link {"url":"https://www.facebook.com/","service":"facebook"} /-->
+
+				<!-- wp:social-link {"url":"https://x.com/","service":"x"} /-->
+			</ul>
+			<!-- /wp:social-links -->
+		</div>
+		<!-- /wp:group -->
+	</div>
+	<!-- /wp:group -->
+</div>
+<!-- /wp:group -->
diff --git a/style.css b/style.css
index 6de698fd..cca78a59 100644
--- a/style.css
+++ b/style.css
@@ -576,21 +576,28 @@ textarea {
 
 /*
  * --------------------------------------------------------
- *  Modular Header System: Sticky, Overlay & Header-Specific Styles
+ *  Modular Header System
  * --------------------------------------------------------
  *
- *  Base Utility Classes (work on any header):
- *    - .ext-header-sticky   → position: sticky + admin-bar handling
- *    - .ext-header-overlay  → hero section overlap (negative margin)
+ *  Layout (positioning):
+ *    - .ext-header-sticky    → position: sticky + admin-bar handling
+ *    - .ext-header-overlay   → hero section overlap (negative margin)
  *
- *  Header-Specific Modifier Classes (optional customizations):
- *    - .ext-header-sticky--scroll-animated → glassmorphism animation on first-child
+ *  Appearance:
+ *    - .ext-header-glass     → static glassmorphism (bg + blur + radius)
+ *    - .ext-header--dark     → dark color scheme: white text + dark scrim/glass tint
  *
- *  Usage Examples:
- *    - ext-header-sticky                                    → just sticky
- *    - ext-header-overlay                                   → just overlay, scrolls away
- *    - ext-header-sticky ext-header-overlay                 → sticky + overlay (base)
- *    - ext-header-sticky ext-header-overlay ext-header-sticky--scroll-animated → full glassmorphism
+ *  Behavior:
+ *    - .ext-header-sticky--floating-pill → scroll-driven intensification of glass + layout shift
+ *
+ *  Compositions:
+ *    - ext-header-sticky                                                                          → just sticky, theme bg
+ *    - ext-header-overlay                                                                         → overlay, transparent
+ *    - ext-header-overlay ext-header--dark                                                        → overlay + dark scrim + white text
+ *    - ext-header-sticky ext-header-glass                                                         → static glass header
+ *    - ext-header-sticky ext-header-glass ext-header--dark                                        → static dark glass
+ *    - ext-header-sticky ext-header-overlay ext-header-glass ext-header-sticky--floating-pill   → animated glass over hero
+ *    - + ext-header--dark on the above                                                            → animated DARK glass over hero
  */
 
 :root {
@@ -602,22 +609,26 @@ textarea {
 	--ext-header-bg-opacity-end: 0.95;
 	--ext-header-padding: 1.5rem;
 	--ext-header-animation-distance: 100px;
+	--ext-header-glass-tint-dark: #ffffff;
+	--ext-header-dark-logo-filter: brightness(0) invert(1);
 }
 
 body {
 	timeline-scope: --ext-hero-timeline;
 }
 
-/* Base: Sticky Header Positioning
-----------------------------------------------------------*/
+/* ===========================================================
+   Layout: ext-header-sticky
+   =========================================================== */
 header.wp-block-template-part:has(.ext-header-sticky) {
 	position: sticky;
 	top: 0;
 	z-index: 12;
-	border-bottom: 1px solid  oklch(from var(--wp--preset--color--foreground) l c h / 0.05);
 }
 
-header.wp-block-template-part.ext-header-sticky:not(.has-background) {
+/* Default bg for sticky headers without glass.
+   Glass headers leave the wrapper transparent so the inner glass element shows through. */
+header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)):not(.has-background) {
 	background-color: var(--wp--preset--color--background);
 }
 
@@ -636,17 +647,13 @@ html:has(.ext-header-sticky) {
 	scroll-padding-top: var(--ext-header-height);
 }
 
-/* Base: Overlay Header - Hero Section Overlap
-----------------------------------------------------------*/
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay) {
+/* ===========================================================
+   Layout: ext-header-overlay (hero overlap)
+   =========================================================== */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(:has(.ext-header-sticky)) {
 	position: relative;
 	top: 0;
 	z-index: 12;
-	background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
-}
-
-header.wp-block-template-part.ext-header-overlay:not(.has-background) {
-	background-color: oklch(from var(--wp--preset--color--background) l c h / 0.9);
 }
 
 body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child {
@@ -655,8 +662,142 @@ body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-sectio
 	z-index: 0;
 }
 
-/* Base: Hero Timeline for Scroll-Driven Animations
-----------------------------------------------------------*/
+/* Overlay over hero: wrapper goes transparent so the hero shows through.
+   Reverts to default theme bg once .is-past-hero is added or on subpages without a hero. */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-overlay):not(.is-past-hero):not(:has(.ext-header-glass)) {
+	background-color: transparent;
+}
+
+/* ===========================================================
+   Appearance: ext-header-glass (static glassmorphism)
+   - --ext-header-glass-color-start: tint during the frosted/initial state
+   - --ext-header-glass-color-end: tint at the solid/scrolled state
+   - Static glass shows the end state (most readable)
+   =========================================================== */
+.ext-header-glass {
+	--ext-header-glass-color-start: var(--wp--preset--color--background);
+	--ext-header-glass-color-end: var(--wp--preset--color--background);
+}
+
+header.wp-block-template-part:has(.ext-header-glass) .ext-header-glass {
+	background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end));
+	backdrop-filter: blur(var(--ext-header-blur-end));
+	border-radius: 1rem;
+	overflow: hidden;
+}
+
+/* ===========================================================
+   Color: ext-header--dark
+   - Sets shared scrim/glass color variable
+   - Wrapper gets white text when used with overlay or glass
+   - Inner blocks reset their colors to inherit
+   =========================================================== */
+.ext-header--dark {
+	--ext-header-scrim-color: var(--wp--preset--color--foreground);
+}
+
+/* Dark variant only takes effect on pages with a fullscreen hero.
+   On subpages, dark+glass falls back to the light glass defaults. */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) .ext-header-glass.ext-header--dark {
+	--ext-header-glass-color-start: var(--ext-header-glass-tint-dark);
+	--ext-header-glass-color-end: var(--wp--preset--color--foreground);
+	--ext-header-bg-opacity-start: 0.06;
+	--ext-header-bg-opacity-end: 0.85;
+	--ext-header-blur-start: 16px;
+	--ext-header-blur-end: 24px;
+}
+
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-header-glass {
+	border: 1px solid rgb(255 255 255 / 0.12);
+}
+
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) {
+	color: #fff;
+	background-image: linear-gradient(
+		to bottom,
+		oklch(from var(--ext-header-scrim-color) l c h / 0.5),
+		oklch(from var(--ext-header-scrim-color) l c h / 0)
+	);
+}
+
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) {
+	color: #fff;
+}
+
+/* Inner-block dark overrides — fire only on hero pages with a dark backdrop.
+   Overlay+dark drops out at .is-past-hero (header has reverted to default theme).
+   Glass+dark keeps firing past-hero because the glass stays dark via its own animation. */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title) {
+	color: inherit;
+}
+
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-social-link,
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-social-link {
+	color: #fff !important;
+}
+
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg,
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg {
+	fill: currentColor;
+}
+
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-block-site-logo,
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-block-site-logo {
+	filter: var(--ext-header-dark-logo-filter);
+}
+
+/* Sticky non-glass headers: smooth shadow/bg transitions (toggle on .is-scrolled / .is-past-hero) */
+header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)) {
+	transition: background-color 300ms ease, box-shadow 300ms ease;
+}
+
+/* Subpage elevation shadow: appears when user scrolls (no hero on the page) */
+body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky):not(:has(.ext-header-glass)) {
+	box-shadow: 0 4px 24px -8px oklch(from var(--wp--preset--color--foreground) l c h / 0.08);
+}
+
+/* Smart sticky transitions: smooth color/filter changes when toggling .is-past-hero */
+header.wp-block-template-part:has(.ext-header--dark) {
+	transition: background-color 300ms ease, color 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
+}
+
+header.wp-block-template-part:has(.ext-header--dark) :where(a, button, .wp-block-site-title, .wp-social-link) {
+	transition: color 300ms ease;
+}
+
+header.wp-block-template-part:has(.ext-header--dark) .wp-block-site-logo {
+	transition: filter 300ms ease;
+}
+
+/* Past-hero: any sticky+overlay gets solid theme bg + elevation shadow.
+   Glass headers are excluded — they manage their own scroll visuals. */
+header.wp-block-template-part.is-past-hero:has(.ext-header-sticky.ext-header-overlay):not(:has(.ext-header-glass)) {
+	background-image: none;
+	background-color: var(--wp--preset--color--background);
+	box-shadow: 0 4px 24px -8px oklch(from var(--wp--preset--color--foreground) l c h / 0.08);
+}
+
+/* Past-hero on dark variant: also revert white text / inverted logo / forced social color */
+header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) {
+	color: var(--wp--preset--color--foreground);
+}
+
+header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) :where(a, button, .wp-block-site-title) {
+	color: inherit;
+}
+
+header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-social-link {
+	color: var(--wp--preset--color--foreground) !important;
+}
+
+header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) .wp-block-site-logo {
+	filter: brightness(1) invert(0);
+}
+
+/* ===========================================================
+   Hero timeline (for scroll-driven animations)
+   =========================================================== */
 @supports (animation-timeline: scroll()) {
 
 	.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child {
@@ -664,21 +805,23 @@ body:has(.ext-header-overlay) .entry-content > .ext-hero-section.ext-hero-sectio
 	}
 }
 
-/*  ext-header-sticky--scroll-animated
-----------------------------------------------------------*/
-
-header.wp-block-template-part .ext-header-sticky--scroll-animated.ext-animate {
+/* ===========================================================
+   Behavior: ext-header-sticky--floating-pill
+   - Layout shift: header wrapper goes transparent + constrained width
+   - When combined with .ext-header-glass, animates glass intensity
+   =========================================================== */
+header.wp-block-template-part .ext-header-sticky--floating-pill.ext-animate {
 	opacity: 1 !important;
 }
 
-header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
+header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
 	position: sticky;
 	top: 0;
 	z-index: 12;
 	border-bottom: none;
 }
 
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
 	position: sticky;
 	top: var(--ext-header-offset);
 	max-width: var(--wp--style--global--wide-size);
@@ -688,14 +831,13 @@ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-
 	padding-inline: var(--wp--style--root--padding-right) var(--wp--style--root--padding-left);
 }
 
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
-	background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
+/* Initial glass state (over hero): override static glass-end with start values */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass {
+	background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start));
 	backdrop-filter: blur(var(--ext-header-blur-start));
-	border-radius: 1rem;
-	overflow: hidden;
 }
 
-body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
+body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
 	top:
 		calc(var(--ext-header-offset) +
 		var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 32px)));
@@ -704,7 +846,7 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 
 @media (max-width: 782px) {
 
-	body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
+	body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
 		top:
 			calc(var(--ext-header-offset) +
 			var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px)));
@@ -713,50 +855,46 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 
 @supports (animation-timeline: scroll()) {
 
-	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) {
+	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
 		max-width: calc(var(--wp--style--global--wide-size) + var(--wp--style--root--padding-right) + var(--wp--style--root--padding-left));
 		margin-left: auto;
 		margin-right: auto;
 	}
 
-	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
-		border-radius: 1rem;
-	}
-
 	@media (prefers-reduced-motion: no-preference) {
 
-		body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
-			animation: ext-header-sticky--scroll-animated-fade-in linear both !important;
+		body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass {
+			animation: ext-header-glass-intensify linear both !important;
 			animation-timeline: --ext-hero-timeline !important;
 			animation-range: exit 0% exit 80% !important;
 		}
 
-		body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--scroll-animated) .ext-header-sticky.ext-header-sticky--scroll-animated {
-			animation: ext-header-sticky--scroll-animated-fade-in-no-hero linear forwards !important;
+		body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass {
+			animation: ext-header-glass-intensify-no-hero linear forwards !important;
 			animation-timeline: scroll() !important;
 			animation-range: 0 var(--ext-header-animation-distance) !important;
 		}
 	}
 }
 
-@keyframes ext-header-sticky--scroll-animated-fade-in {
+@keyframes ext-header-glass-intensify {
 
 	from {
-		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
+		background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start));
 		backdrop-filter: blur(var(--ext-header-blur-start));
 	}
 
 	to {
-		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
+		background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
 		box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
 	}
 }
 
-@keyframes ext-header-sticky--scroll-animated-fade-in-no-hero {
+@keyframes ext-header-glass-intensify-no-hero {
 
 	from {
-		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-start));
+		background-color: oklch(from var(--ext-header-glass-color-start) l c h / var(--ext-header-bg-opacity-start));
 		backdrop-filter: blur(var(--ext-header-blur-start));
 		box-shadow: none;
 		translate: 0 0;
@@ -765,7 +903,7 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 	}
 
 	to {
-		background-color: oklch(from var(--wp--preset--color--background) l c h / var(--ext-header-bg-opacity-end));
+		background-color: oklch(from var(--ext-header-glass-color-end) l c h / var(--ext-header-bg-opacity-end));
 		backdrop-filter: blur(var(--ext-header-blur-end));
 		box-shadow: 0 14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14), 0 -14px 28px -10px oklch(from var(--wp--preset--color--foreground) l c h / 0.14);
 
diff --git a/theme.json b/theme.json
index 5e84b634..8afb5b55 100644
--- a/theme.json
+++ b/theme.json
@@ -1087,11 +1087,26 @@
 			"title": "Header",
 			"area": "header"
 		},
+		{
+			"name": "header-ember-harbor",
+			"title": "Header Ember Harbor",
+			"area": "header"
+		},
 		{
 			"name": "header-atlas-beacon",
 			"title": "Header Atlas Beacon",
 			"area": "header"
 		},
+		{
+			"name": "header-catalina-skyline",
+			"title": "Header Catalina Skyline",
+			"area": "header"
+		},
+		{
+			"name": "header-ceadar-peak",
+			"title": "Header Ceadar Peak",
+			"area": "header"
+		},
 		{
 			"name": "header-title-nav-button",
 			"title": "Header with Button",

From af56eba21e11cf13972f28c7631c5a6e57e3cb2b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Thu, 7 May 2026 00:53:58 +0500
Subject: [PATCH 10/16] improve color contrasts

---
 parts/header-catalina-skyline.html |  2 +-
 parts/header-ember-harbor.html     |  2 +-
 style.css                          | 25 +++++++++++++++++--------
 3 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/parts/header-catalina-skyline.html b/parts/header-catalina-skyline.html
index 6550bb46..e65137ad 100644
--- a/parts/header-catalina-skyline.html
+++ b/parts/header-catalina-skyline.html
@@ -19,7 +19,7 @@
 	>
 		<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"40%"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","fontWeight":"600","textTransform":"uppercase","letterSpacing":"0.28em"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
 			<!-- wp:page-list /-->
 			<!-- /wp:navigation -->
 		</div>
diff --git a/parts/header-ember-harbor.html b/parts/header-ember-harbor.html
index 2fdb40c3..ba1410a7 100644
--- a/parts/header-ember-harbor.html
+++ b/parts/header-ember-harbor.html
@@ -24,7 +24,7 @@
 
 		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em","fontWeight":"600"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
 			<!-- wp:page-list /-->
 			<!-- /wp:navigation -->
 		</div>
diff --git a/style.css b/style.css
index cca78a59..d45dbd04 100644
--- a/style.css
+++ b/style.css
@@ -692,10 +692,6 @@ header.wp-block-template-part:has(.ext-header-glass) .ext-header-glass {
    - Wrapper gets white text when used with overlay or glass
    - Inner blocks reset their colors to inherit
    =========================================================== */
-.ext-header--dark {
-	--ext-header-scrim-color: var(--wp--preset--color--foreground);
-}
-
 /* Dark variant only takes effect on pages with a fullscreen hero.
    On subpages, dark+glass falls back to the light glass defaults. */
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) .ext-header-glass.ext-header--dark {
@@ -713,11 +709,25 @@ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-
 
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) {
 	color: #fff;
-	background-image: linear-gradient(
+}
+
+/* Top-fade scrim on the hero's cover block — softer falloff than a header-bound gradient.
+   Flat (non-nested) :has() check on body so the rule reliably matches on hero pages
+   that use an overlay+dark header. */
+body:has(.ext-header-overlay.ext-header--dark) .ext-hero-section--full-screen .wp-block-cover::after {
+	content: "";
+	position: absolute;
+	inset: 0 0 auto 0;
+	height: calc(var(--ext-header-height) * 3);
+	background: linear-gradient(
 		to bottom,
-		oklch(from var(--ext-header-scrim-color) l c h / 0.5),
-		oklch(from var(--ext-header-scrim-color) l c h / 0)
+		rgb(0 0 0 / 0.50) 0%,
+		rgb(0 0 0 / 0.25) 50%,
+		rgb(0 0 0 / 0.05) 80%,
+		rgb(0 0 0 / 0) 100%
 	);
+	pointer-events: none;
+	z-index: 1;
 }
 
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) {
@@ -773,7 +783,6 @@ header.wp-block-template-part:has(.ext-header--dark) .wp-block-site-logo {
 /* Past-hero: any sticky+overlay gets solid theme bg + elevation shadow.
    Glass headers are excluded — they manage their own scroll visuals. */
 header.wp-block-template-part.is-past-hero:has(.ext-header-sticky.ext-header-overlay):not(:has(.ext-header-glass)) {
-	background-image: none;
 	background-color: var(--wp--preset--color--background);
 	box-shadow: 0 4px 24px -8px oklch(from var(--wp--preset--color--foreground) l c h / 0.08);
 }

From 3cb1ce734ec352217787bb341bb3b90b48e48fc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Sat, 9 May 2026 03:58:01 +0500
Subject: [PATCH 11/16] fix agent preview issues

---
 assets/js/header.js | 98 ++++++++++++++++++++++++++++++++++++++-------
 style.css           | 57 +++++++++++++++++++++++---
 2 files changed, 135 insertions(+), 20 deletions(-)

diff --git a/assets/js/header.js b/assets/js/header.js
index b0f0062a..7157b4bb 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -4,23 +4,93 @@
 	const header = document.querySelector( 'header.wp-block-template-part' );
 	if ( ! header ) return;
 
+	const findHero = () => document.querySelector(
+		'.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child'
+	);
+
 	new ResizeObserver( function ( entries ) {
-		const height = entries[ 0 ].borderBoxSize[ 0 ].blockSize;
-		document.documentElement.style.setProperty( '--ext-header-height', height + 'px' );
+		document.documentElement.style.setProperty(
+			'--ext-header-height',
+			entries[ 0 ].borderBoxSize[ 0 ].blockSize + 'px'
+		);
 	} ).observe( header, { box: 'border-box' } );
 
-	const hero = document.querySelector( '.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child' );
-	if ( hero ) {
-		new IntersectionObserver( function ( entries ) {
-			header.classList.toggle( 'is-past-hero', ! entries[ 0 ].isIntersecting );
-		}, { rootMargin: '-50% 0px 0px 0px' } ).observe( hero );
-	}
+	// Normal mode: IntersectionObservers against the viewport.
+	// Original behavior, preserved for real frontend pages.
+	const setupNormal = () => {
+		const hero = findHero();
+		let heroObs;
+		if ( hero ) {
+			heroObs = new IntersectionObserver( function ( entries ) {
+				header.classList.toggle( 'is-past-hero', ! entries[ 0 ].isIntersecting );
+			}, { rootMargin: '-50% 0px 0px 0px' } );
+			heroObs.observe( hero );
+		}
+
+		const sentinel = document.createElement( 'div' );
+		sentinel.style.cssText = 'position:absolute;top:0;left:0;height:1px;width:1px;pointer-events:none;';
+		document.body.prepend( sentinel );
+
+		const scrollObs = new IntersectionObserver( function ( entries ) {
+			header.classList.toggle( 'is-scrolled', ! entries[ 0 ].isIntersecting );
+		} );
+		scrollObs.observe( sentinel );
+
+		return () => {
+			heroObs?.disconnect();
+			scrollObs.disconnect();
+			sentinel.remove();
+		};
+	};
+
+	// Agent mode: rAF-throttled scroll/resize listener with CSS-pixel math.
+	// The agent's transform: scale() on .wp-site-blocks breaks
+	// IntersectionObserver geometry, but offsetTop / offsetHeight / scrollTop
+	// are unaffected by transforms — stable at any scale.
+	const setupAgent = ( root ) => {
+		let rafId = 0;
+		const update = () => {
+			rafId = 0;
+			header.classList.toggle( 'is-scrolled', root.scrollTop > 0 );
+			const hero = findHero();
+			if ( ! hero ) return;
+			const heroBottom = hero.offsetTop + hero.offsetHeight;
+			header.classList.toggle( 'is-past-hero', root.scrollTop > heroBottom );
+		};
+		const schedule = () => {
+			if ( rafId ) return;
+			rafId = requestAnimationFrame( update );
+		};
+
+		root.addEventListener( 'scroll', schedule, { passive: true } );
+		window.addEventListener( 'resize', schedule, { passive: true } );
+		update();
+
+		return () => {
+			if ( rafId ) cancelAnimationFrame( rafId );
+			root.removeEventListener( 'scroll', schedule );
+			window.removeEventListener( 'resize', schedule );
+		};
+	};
+
+	let teardown;
+	const setup = ( root ) => {
+		teardown?.();
+		teardown = root ? setupAgent( root ) : setupNormal();
+	};
 
-	const topSentinel = document.createElement( 'div' );
-	topSentinel.style.cssText = 'position:absolute;top:0;left:0;height:1px;width:1px;pointer-events:none;';
-	document.body.prepend( topSentinel );
+	setup( null );
 
-	new IntersectionObserver( function ( entries ) {
-		header.classList.toggle( 'is-scrolled', ! entries[ 0 ].isIntersecting );
-	} ).observe( topSentinel );
+	// Optional integration: if the Extendify Agent is active it dispatches
+	// extendify-agent:layout-shift on open/close (see useLayoutShift in
+	// SidebarLayout.jsx). When the agent isn't installed this listener is
+	// simply never invoked — the file works standalone with normal-mode
+	// IntersectionObservers, identical to its original behavior.
+	window.addEventListener( 'extendify-agent:layout-shift', function ( event ) {
+		const open = event?.detail?.open;
+		const root = open ? document.querySelector( '.wp-site-blocks' ) : null;
+		// Wait one frame so the agent's transform / overflow changes commit
+		// before we attach handlers and read geometry.
+		requestAnimationFrame( () => setup( root ) );
+	} );
 } )();
diff --git a/style.css b/style.css
index d45dbd04..eba2a2ec 100644
--- a/style.css
+++ b/style.css
@@ -713,12 +713,15 @@ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-
 
 /* Top-fade scrim on the hero's cover block — softer falloff than a header-bound gradient.
    Flat (non-nested) :has() check on body so the rule reliably matches on hero pages
-   that use an overlay+dark header. */
+   that use an overlay+dark header.
+   Fades out via opacity once the smart-sticky JS adds .is-past-hero on the header,
+   in sync with the header reverting to its default theme appearance. */
 body:has(.ext-header-overlay.ext-header--dark) .ext-hero-section--full-screen .wp-block-cover::after {
 	content: "";
 	position: absolute;
 	inset: 0 0 auto 0;
 	height: calc(var(--ext-header-height) * 3);
+	transition: opacity 300ms ease;
 	background: linear-gradient(
 		to bottom,
 		rgb(0 0 0 / 0.50) 0%,
@@ -730,6 +733,12 @@ body:has(.ext-header-overlay.ext-header--dark) .ext-hero-section--full-screen .w
 	z-index: 1;
 }
 
+/* Past-hero: fade the scrim out so the hero image returns to its natural look,
+   matching the header reverting to default theme bg + colors. */
+body:has(header.wp-block-template-part.is-past-hero) .ext-hero-section--full-screen .wp-block-cover::after {
+	opacity: 0;
+}
+
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) {
 	color: #fff;
 }
@@ -737,8 +746,8 @@ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-
 /* Inner-block dark overrides — fire only on hero pages with a dark backdrop.
    Overlay+dark drops out at .is-past-hero (header has reverted to default theme).
    Glass+dark keeps firing past-hero because the glass stays dark via its own animation. */
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title),
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link) {
 	color: inherit;
 }
 
@@ -747,16 +756,32 @@ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-
 	color: #fff !important;
 }
 
+/* Phone CTA: force white over the dark hero. Needed because the paragraph carries
+   WP's wp-elements-* link-color rule (preset primary), which beats .has-text-color
+   inheritance on the inner <a>. Drops out at .is-past-hero so the phone reverts to theme. */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a) {
+	color: #fff !important;
+}
+
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg,
 body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg {
 	fill: currentColor;
 }
 
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-block-site-logo,
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-block-site-logo {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground) {
 	filter: var(--ext-header-dark-logo-filter);
 }
 
+/* Nav-extras CTA: white pill + dark text for contrast against the dark hero scrim.
+   Drops out at .is-past-hero so the button returns to its preset styling. */
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn .wp-block-button__link,
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn .wp-block-button__link {
+	background-color: #fefefe !important;
+	color: #060606 !important;
+}
+
 /* Sticky non-glass headers: smooth shadow/bg transitions (toggle on .is-scrolled / .is-past-hero) */
 header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass)) {
 	transition: background-color 300ms ease, box-shadow 300ms ease;
@@ -792,7 +817,7 @@ header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--d
 	color: var(--wp--preset--color--foreground);
 }
 
-header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) :where(a, button, .wp-block-site-title) {
+header.wp-block-template-part.is-past-hero:has(.ext-header-overlay.ext-header--dark):not(:has(.ext-header-glass)) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link) {
 	color: inherit;
 }
 
@@ -922,3 +947,23 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 		border-radius: 1rem;
 	}
 }
+
+/* ===========================================================
+   Vibe/gradient fix
+   -----------------------------------------------------------
+   Vibe block-style variations (e.g. is-style-ext-preset--group--*--header-1--N)
+   paint a background gradient on the header. That gradient fights every
+   over-hero / glass-tint / dark-scrim treatment we apply to overlay or glass
+   headers, because the glass and overlay rules set background-COLOR while the
+   variation sets a background-IMAGE that paints on top.
+   Override the variation's background-image specifically (not the whole
+   `background:` shorthand). That lets each header keep working in its
+   natural design:
+     - overlay non-glass: gets transparent bg over hero, theme bg past hero
+     - glass: gets the glass tint (light by default, dark when --dark is set)
+   On non-overlay / non-glass headers the variation gradient stays as-is.
+   =========================================================== */
+.ext-header-overlay[class*="is-style-ext-preset--"],
+.ext-header-glass[class*="is-style-ext-preset--"] {
+	background-image: none !important;
+}

From 0e28898f44d5da11947c6b4141d4526ff03181c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Tue, 12 May 2026 12:09:23 +0500
Subject: [PATCH 12/16] Remove Header Ember Harbor

---
 parts/header-ember-harbor.html | 51 ----------------------------------
 1 file changed, 51 deletions(-)
 delete mode 100644 parts/header-ember-harbor.html

diff --git a/parts/header-ember-harbor.html b/parts/header-ember-harbor.html
deleted file mode 100644
index ba1410a7..00000000
--- a/parts/header-ember-harbor.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!-- wp:group {"align":"full","className":"ext-animate\u002d\u002don is-style-ext-preset\u002d\u002dgroup\u002d\u002dnatural-1\u002d\u002dheader-1 ext-header-sticky ext-header-overlay ext-header\u002d\u002ddark","style":{"spacing":{"padding":{"top":"0","bottom":"0"}}},"layout":{"inherit":true,"type":"constrained"}} -->
-<div
-	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header--dark"
-	style="padding-top: 0; padding-bottom: 0"
->
-	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
-	<div
-		class="wp-block-group alignwide"
-		style="
-			border-top-left-radius: 1rem;
-			border-top-right-radius: 1rem;
-			border-bottom-left-radius: 1rem;
-			border-bottom-right-radius: 1rem;
-			padding-top: var(--wp--preset--spacing--20);
-			padding-bottom: var(--wp--preset--spacing--20);
-		"
-	>
-		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
-			<!-- wp:site-logo {"width":48,"shouldSyncIcon":false} /-->
-			<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontSize":"14px","fontStyle":"normal","fontWeight":"400","letterSpacing":"0.2em"}}} /-->
-		</div>
-		<!-- /wp:group -->
-
-		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group">
-			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em","fontWeight":"600"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
-			<!-- wp:page-list /-->
-			<!-- /wp:navigation -->
-		</div>
-		<!-- /wp:group -->
-
-		<!-- wp:group {"className":"ext-nav-extras","layout":{"type":"flex","flexWrap":"nowrap"}} -->
-		<div class="wp-block-group ext-nav-extras">
-			<!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dforeground)","size":"has-small-icon-size","className":"is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social","style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
-			<ul
-				class="wp-block-social-links has-small-icon-size has-icon-color is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social"
-			>
-				<!-- wp:social-link {"url":"https://www.instagram.com/","service":"instagram"} /-->
-
-				<!-- wp:social-link {"url":"https://www.facebook.com/","service":"facebook"} /-->
-
-				<!-- wp:social-link {"url":"https://x.com/","service":"x"} /-->
-			</ul>
-			<!-- /wp:social-links -->
-		</div>
-		<!-- /wp:group -->
-	</div>
-	<!-- /wp:group -->
-</div>
-<!-- /wp:group -->

From 41453c4e0367f2423cd07d21af9072b94633cf2f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Wed, 13 May 2026 13:04:32 +0500
Subject: [PATCH 13/16] Fix header mobile issues

---
 assets/js/navigation-customization.js | 47 ++++++++++++++++-
 style.css                             | 75 +++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 2 deletions(-)

diff --git a/assets/js/navigation-customization.js b/assets/js/navigation-customization.js
index 6d3b49ba..5332010b 100644
--- a/assets/js/navigation-customization.js
+++ b/assets/js/navigation-customization.js
@@ -21,9 +21,52 @@
         container.prepend(wrapper);
     }
 
+    function injectNavExtras() {
+        const dialog = document.querySelector('.wp-block-navigation__responsive-dialog');
+        if (!dialog) return;
+        if (dialog.querySelector('.ext-nav-extras-mobile')) return;
+
+        const header = document.querySelector('header.wp-block-template-part');
+        if (!header) return;
+
+        // Only clone the specific extras (phone / CTA / social). Avoid cloning
+        // .ext-nav-extras as a wrapper because some header parts use that class
+        // around the navigation block itself — cloning it would duplicate the
+        // entire nav.
+        const extras = header.querySelectorAll(
+            '.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social'
+        );
+        if (extras.length === 0) return;
+
+        const container = document.createElement('div');
+        container.className = 'ext-nav-extras-mobile';
+
+        extras.forEach((el) => {
+            const clone = el.cloneNode(true);
+            // Strip identifiers that should be unique per document so the clone
+            // doesn't collide with the original (id targets, agent-tracked blocks).
+            clone
+                .querySelectorAll('[id], [data-extendify-part-block-id], [data-extendify-part-slug], [data-extendify-part]')
+                .forEach((node) => {
+                    node.removeAttribute('id');
+                    node.removeAttribute('data-extendify-part-block-id');
+                    node.removeAttribute('data-extendify-part-slug');
+                    node.removeAttribute('data-extendify-part');
+                });
+            container.appendChild(clone);
+        });
+
+        dialog.appendChild(container);
+    }
+
+    function init() {
+        injectSiteLogoTitle();
+        injectNavExtras();
+    }
+
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', injectSiteLogoTitle);
+        document.addEventListener('DOMContentLoaded', init);
     } else {
-        injectSiteLogoTitle();
+        init();
     }
 })();
diff --git a/style.css b/style.css
index eba2a2ec..2349d9e8 100644
--- a/style.css
+++ b/style.css
@@ -189,6 +189,81 @@ a:active {
 	font-size: 1rem !important;
 }
 
+/*
+ * When the responsive navigation modal opens (WordPress sets .has-modal-open
+ * on <html>), suppress every property on the modal's ancestor chain that
+ * creates a containing block for position:fixed descendants — otherwise
+ * the modal is trapped inside the header instead of overlaying the viewport.
+ *
+ * Two rules here:
+ *
+ * 1) Broad ancestor coverage — the header itself plus any element inside
+ *    it that contains the responsive dialog. Handles transform/filter on
+ *    any header variant (overlay, glass, floating-pill, future ones).
+ *
+ * 2) Animation override — mirrors the selectors used by the floating-pill
+ *    scroll animations so we can match their specificity. Those animations
+ *    use !important + a deep selector to apply translate/backdrop-filter
+ *    via keyframes; without a same-or-higher-specificity override our broad
+ *    rule loses the cascade and the animation keeps trapping the modal.
+ */
+html.has-modal-open header.wp-block-template-part,
+html.has-modal-open header.wp-block-template-part :has(.wp-block-navigation__responsive-dialog) {
+	backdrop-filter: none !important;
+	transform: none !important;
+	translate: none !important;
+	filter: none !important;
+	animation: none !important;
+}
+
+html.has-modal-open body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass,
+html.has-modal-open body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass) .ext-header-sticky.ext-header-sticky--floating-pill.ext-header-glass {
+	animation: none !important;
+	backdrop-filter: none !important;
+	translate: none !important;
+}
+
+/*
+ * Mobile nav-extras: cloned by navigation-customization.js into the
+ * responsive menu dialog so phone / CTA / social aren't visible in the
+ * cramped top bar on small screens. We target the specific modifier
+ * classes (.ext-nav-extras-phone, -btn, -social) rather than the
+ * .ext-nav-extras wrapper, because some header parts use the wrapper
+ * class around the nav block itself.
+ *
+ * On desktop the dialog is rendered inline (it's only "modal-shaped"
+ * when the hamburger opens it), so the cloned extras must stay hidden
+ * until WordPress sets .has-modal-open on <html>.
+ */
+@media (max-width: 781px) {
+
+	header.wp-block-template-part :is(.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social):not(.ext-nav-extras-mobile *) {
+		display: none;
+	}
+}
+
+.ext-nav-extras-mobile {
+	display: none;
+}
+
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	gap: var(--wp--preset--spacing--20);
+	margin-top: var(--wp--preset--spacing--30);
+}
+
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button {
+	width: 100%;
+}
+
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-button__link {
+	display: block;
+	text-align: center;
+	width: 100%;
+}
+
 .wp-block-navigation .wp-block-navigation-item a:hover,
 .wp-block-navigation .wp-block-navigation-item a:focus {
 	text-decoration: underline;

From 74e6bdc37f21d3a5261a041f14b461facf9f6045 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Thu, 14 May 2026 07:29:48 +0500
Subject: [PATCH 14/16] tweak header

---
 parts/header-catalina-skyline.html | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/parts/header-catalina-skyline.html b/parts/header-catalina-skyline.html
index e65137ad..b69b8a94 100644
--- a/parts/header-catalina-skyline.html
+++ b/parts/header-catalina-skyline.html
@@ -3,36 +3,34 @@
 	class="wp-block-group alignfull ext-animate--on is-style-ext-preset--group--natural-1--header-1 ext-header-sticky ext-header-overlay ext-header--dark"
 	style="padding-top: 0; padding-bottom: 0"
 >
-	<!-- wp:group {"align":"full","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|30","right":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
+	<!-- wp:group {"align":"wide","style":{"border":{"radius":{"topLeft":"1rem","topRight":"1rem","bottomLeft":"1rem","bottomRight":"1rem"}},"spacing":{"padding":{"top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"},"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
 	<div
-		class="wp-block-group alignfull"
+		class="wp-block-group alignwide"
 		style="
 			border-top-left-radius: 1rem;
 			border-top-right-radius: 1rem;
 			border-bottom-left-radius: 1rem;
 			border-bottom-right-radius: 1rem;
 			padding-top: var(--wp--preset--spacing--20);
-			padding-right: var(--wp--preset--spacing--30);
 			padding-bottom: var(--wp--preset--spacing--20);
-			padding-left: var(--wp--preset--spacing--30);
 		"
 	>
-		<!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"40%"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
+		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"}},"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","fontWeight":"600","textTransform":"uppercase","letterSpacing":"0.28em"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
-			<!-- wp:page-list /-->
-			<!-- /wp:navigation -->
+			<!-- wp:site-logo {"width":48,"shouldSyncIcon":false} /-->
+			<!-- wp:site-title {"style":{"typography":{"textTransform":"uppercase","fontSize":"14px","fontStyle":"normal","fontWeight":"400","letterSpacing":"0.2em"}}} /-->
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:group {"style":{"spacing":{"blockGap":"0.25rem"},"layout":{"selfStretch":"fixed","flexSize":"20%"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"center"}} -->
+		<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group">
-			<!-- wp:site-logo {"width":48,"shouldSyncIcon":false} /-->
-			<!-- wp:site-title {"style":{"typography":{"fontStyle":"normal","fontWeight":"500","letterSpacing":"0.1em"}},"fontSize":"small"} /-->
+			<!-- wp:navigation {"icon":"menu","overlayBackgroundColor":"background","overlayTextColor":"foreground","style":{"typography":{"fontSize":"12px","textTransform":"uppercase","letterSpacing":"0.28em","fontWeight":"600"},"spacing":{"blockGap":"2.5rem"}},"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"right"}} -->
+			<!-- wp:page-list /-->
+			<!-- /wp:navigation -->
 		</div>
 		<!-- /wp:group -->
 
-		<!-- wp:group {"className":"ext-nav-extras","style":{"layout":{"selfStretch":"fixed","flexSize":"40%"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
+		<!-- wp:group {"className":"ext-nav-extras","layout":{"type":"flex","flexWrap":"nowrap"}} -->
 		<div class="wp-block-group ext-nav-extras">
 			<!-- wp:social-links {"iconColor":"foreground","iconColorValue":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dforeground)","size":"has-small-icon-size","className":"is-style-logos-only ext-hidden tablet:ext-flex ext-nav-extras-social","style":{"spacing":{"blockGap":"1rem"}},"layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"right"}} -->
 			<ul
@@ -51,3 +49,4 @@
 	<!-- /wp:group -->
 </div>
 <!-- /wp:group -->
+ 
\ No newline at end of file

From a90c87c5772d5c70374197fe5cc95fec9d3965f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Fri, 15 May 2026 04:40:44 +0500
Subject: [PATCH 15/16] fix some issues

---
 assets/js/navigation-customization.js | 14 +++++++++--
 style.css                             | 35 +++++++++++++++++----------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/assets/js/navigation-customization.js b/assets/js/navigation-customization.js
index 5332010b..ac5262c8 100644
--- a/assets/js/navigation-customization.js
+++ b/assets/js/navigation-customization.js
@@ -13,7 +13,7 @@
         const hasSiteTitle = !!document.querySelector('header.wp-block-template-part .wp-block-site-title');
 
         const wrapper = document.createElement('div');
-        wrapper.className = 'site-logo-title wp-block-site-logo';
+        wrapper.className = 'site-logo-title wp-block-site-logo cloned-for-mobile';
         wrapper.innerHTML = `
             ${logoUrl ? `<img src="${logoUrl}" alt="Site Logo" class="mobile-logo" />` : ''}
             ${hasSiteTitle ? `<span class="site-title">${siteTitle || ''}</span>` : ''}
@@ -39,7 +39,7 @@
         if (extras.length === 0) return;
 
         const container = document.createElement('div');
-        container.className = 'ext-nav-extras-mobile';
+        container.className = 'ext-nav-extras-mobile cloned-for-mobile';
 
         extras.forEach((el) => {
             const clone = el.cloneNode(true);
@@ -53,6 +53,16 @@
                     node.removeAttribute('data-extendify-part-slug');
                     node.removeAttribute('data-extendify-part');
                 });
+            // Force left alignment via inline style: WP generates a
+            // wp-container-* class for each layout block with its own
+            // justify-content rule, which has higher specificity than
+            // swapping .is-content-justification-right/left classes can fight.
+            [clone, ...clone.querySelectorAll('*')]
+                .filter((node) => node.classList?.contains('is-content-justification-right')
+                    || node.classList?.contains('is-content-justification-center'))
+                .forEach((node) => {
+                    node.style.justifyContent = 'flex-start';
+                });
             container.appendChild(clone);
         });
 
diff --git a/style.css b/style.css
index 2349d9e8..0ad7620b 100644
--- a/style.css
+++ b/style.css
@@ -240,6 +240,14 @@ html.has-modal-open body:not(:has(.entry-content > .ext-hero-section.ext-hero-se
 	header.wp-block-template-part :is(.ext-nav-extras-phone, .ext-nav-extras-btn, .ext-nav-extras-social):not(.ext-nav-extras-mobile *) {
 		display: none;
 	}
+
+	/* Collapse the .ext-nav-extras wrapper too when its only children are the
+	   extras (no nav inside) — otherwise the empty wrapper holds a flex slot
+	   and the hamburger stays stuck in the middle instead of moving to the
+	   end of the row. */
+	header.wp-block-template-part .ext-nav-extras:not(:has(nav, .wp-block-navigation)) {
+		display: none;
+	}
 }
 
 .ext-nav-extras-mobile {
@@ -368,6 +376,7 @@ blockquote:is(.is-style-plain) {
 .wp-block-site-logo img[src*="extendify-demo-"],
 .wp-block-site-logo img[src*="ext-custom-logo-"] {
 	filter: var(--wp--preset--duotone--primary-foreground);
+	min-width: 40px;
 }
 
 
@@ -714,7 +723,7 @@ body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
 @media (max-width: 782px) {
 
 	body.admin-bar header.wp-block-template-part:has(.ext-header-sticky) {
-		top: var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px));
+		top:0;
 	}
 }
 
@@ -821,38 +830,38 @@ body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-
 /* Inner-block dark overrides — fire only on hero pages with a dark backdrop.
    Overlay+dark drops out at .is-past-hero (header has reverted to default theme).
    Glass+dark keeps firing past-hero because the glass stays dark via its own animation. */
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link),
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :where(a, button, .wp-block-site-title):not(.has-background, .wp-block-button__link, .cloned-for-mobile, .cloned-for-mobile *) {
 	color: inherit;
 }
 
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-social-link,
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-social-link {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .wp-social-link:not(.cloned-for-mobile, .cloned-for-mobile *) {
 	color: #fff !important;
 }
 
 /* Phone CTA: force white over the dark hero. Needed because the paragraph carries
    WP's wp-elements-* link-color rule (preset primary), which beats .has-text-color
    inheritance on the inner <a>. Drops out at .is-past-hero so the phone reverts to theme. */
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a),
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.ext-nav-extras-phone, .ext-nav-extras-phone a):not(.cloned-for-mobile, .cloned-for-mobile *) {
 	color: #fff !important;
 }
 
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg,
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) svg:not(.cloned-for-mobile *),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) svg:not(.cloned-for-mobile *) {
 	fill: currentColor;
 }
 
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground),
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground) {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *),
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) :is(.wp-block-site-logo, .wp-duotone-primary-foreground):not(.cloned-for-mobile, .cloned-for-mobile *) {
 	filter: var(--ext-header-dark-logo-filter);
 }
 
 /* Nav-extras CTA: white pill + dark text for contrast against the dark hero scrim.
    Drops out at .is-past-hero so the button returns to its preset styling. */
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn .wp-block-button__link,
-body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn .wp-block-button__link {
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:not(.is-past-hero):has(.ext-header-overlay.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link,
+body:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-glass.ext-header--dark) .ext-nav-extras-btn:not(.cloned-for-mobile, .cloned-for-mobile *) .wp-block-button__link {
 	background-color: #fefefe !important;
 	color: #060606 !important;
 }

From 1d6f6e4d8d75b3c44854aaab51c5212022aeceaf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CAmjad?= <amjadr360@gmail.com>
Date: Sat, 16 May 2026 07:55:40 +0500
Subject: [PATCH 16/16] fixs

---
 assets/js/header.js |  2 +-
 style.css           | 40 +++++++++++++++++++++++++++++++++++++++-
 2 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/assets/js/header.js b/assets/js/header.js
index 7157b4bb..bdf9bd88 100644
--- a/assets/js/header.js
+++ b/assets/js/header.js
@@ -28,7 +28,7 @@
 		}
 
 		const sentinel = document.createElement( 'div' );
-		sentinel.style.cssText = 'position:absolute;top:0;left:0;height:1px;width:1px;pointer-events:none;';
+		sentinel.style.cssText = 'position:absolute;top:0;left:0;height:16px;width:1px;pointer-events:none;';
 		document.body.prepend( sentinel );
 
 		const scrollObs = new IntersectionObserver( function ( entries ) {
diff --git a/style.css b/style.css
index 0ad7620b..ad70e7eb 100644
--- a/style.css
+++ b/style.css
@@ -272,6 +272,25 @@ html.has-modal-open body:not(:has(.entry-content > .ext-hero-section.ext-hero-se
 	width: 100%;
 }
 
+/* Match the nav-link typography (see rule above) on the cloned phone CTA. */
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone,
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone a,
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .ext-nav-extras-phone p {
+	font-size: 1.25rem !important;
+	font-weight: 600 !important;
+}
+
+/* Bigger, more tappable social icons in the menu. */
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-block-social-link {
+	width: 32px;
+	height: 32px;
+}
+
+.has-modal-open .wp-block-navigation__responsive-dialog .ext-nav-extras-mobile .wp-social-link svg {
+	width: 28px;
+	height: 28px;
+}
+
 .wp-block-navigation .wp-block-navigation-item a:hover,
 .wp-block-navigation .wp-block-navigation-item a:focus {
 	text-decoration: underline;
@@ -297,6 +316,15 @@ nav .wp-block-pages-list__item.wp-block-navigation-item.menu-item-home {
 	padding-left: var(--wp--preset--spacing--30);
 }
 
+/* Temporary: WP core ships this padding as a 4-value clamp() shorthand
+   that some browsers fail to parse — re-declare as individual props. */
+.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
+	padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem);
+	padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem);
+	padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem);
+	padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20rem);
+}
+
 /*
  * --------------------------------------------------------
  *  Custom - blocks
@@ -871,6 +899,12 @@ header.wp-block-template-part:has(.ext-header-sticky):not(:has(.ext-header-glass
 	transition: background-color 300ms ease, box-shadow 300ms ease;
 }
 
+/* Floating-pill: smooth the top change when .is-scrolled toggles, so the
+   header doesn't snap up when scrolling past the admin bar. */
+header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
+	transition: top 300ms ease;
+}
+
 /* Subpage elevation shadow: appears when user scrolls (no hero on the page) */
 body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky):not(:has(.ext-header-glass)) {
 	box-shadow: 0 4px 24px -8px oklch(from var(--wp--preset--color--foreground) l c h / 0.08);
@@ -963,14 +997,18 @@ body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-scr
 }
 
 @media (max-width: 782px) {
-
 	body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
 		top:
 			calc(var(--ext-header-offset) +
 			var(--wp-admin--admin-bar--position-offset, var(--wp-admin--admin-bar--height, 46px)));
 	}
+
+	body.admin-bar:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child) header.wp-block-template-part.is-scrolled:has(.ext-header-sticky.ext-header-sticky--floating-pill) {
+		top:var(--ext-header-offset);
+	}
 }
 
+
 @supports (animation-timeline: scroll()) {
 
 	body:not(:has(.entry-content > .ext-hero-section.ext-hero-section--full-screen:first-child)) header.wp-block-template-part:has(.ext-header-sticky.ext-header-sticky--floating-pill) {