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 1/2] 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 2/2] 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);