uwblueprint · GauravShah123 · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026 · Jul 4, 2026
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,12 +1,15 @@
 import type { Metadata } from "next";
+import type { CSSProperties } from "react";
 import { Analytics } from "@vercel/analytics/react";
 import "./globals.css";
+import { ApplyBar, APPLY_BAR_HEIGHT } from "@/components/layout/ApplyBar";
 import Footer from "@/components/layout/Footer";
 import MainContent from "@/components/layout/MainContent";
 import { NavMenuProvider } from "@/components/layout/NavMenuContext";
 import Navbar from "@/components/layout/Navbar";
 import ScrollToTopButton from "@/components/layout/ScrollToTopButton";
 import { Geist } from "next/font/google";
+import { APPLICATION_IS_LIVE } from "@constants/applications";
 import { cn } from "@/lib/utils";
 
 const geist = Geist({ subsets: ["latin"], variable: "--font-sans" });
@@ -23,9 +26,20 @@ export default function RootLayout({
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  // When applications are live, the sticky ApplyBar occupies the top of the
+  // viewport; `--apply-banner-h` offsets the navbar (see Navbar) and pushes all
+  // page content down by exactly the bar's height.
+  const bannerStyle = APPLICATION_IS_LIVE
+    ? ({ "--apply-banner-h": APPLY_BAR_HEIGHT } as CSSProperties)
+    : undefined;
+
   return (
     <html lang="en" className={cn("font-sans", geist.variable)}>
-      <body className="flex min-h-screen flex-col antialiased">
+      <body
+        className="flex min-h-screen flex-col antialiased pt-[var(--apply-banner-h,0px)]"
+        style={bannerStyle}
+      >
+        <ApplyBar />
         <NavMenuProvider>
           <Navbar />
           <MainContent>{children}</MainContent>

diff --git a/src/components/layout/ApplyBar.tsx b/src/components/layout/ApplyBar.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import Link from "next/link";
+
+import {
+  APPLICATION_CLOSE_DATETIME,
+  APPLICATION_IS_LIVE,
+  APPLICATION_LINK,
+} from "@constants/applications";
+
+/** Height of the bar. Kept in sync with `--apply-banner-h` set in the layout. */
+export const APPLY_BAR_HEIGHT = "3.5rem";
+
+/**
+ * Site-wide sticky announcement bar pinned above the navbar. Renders only while
+ * applications are open; the layout mirrors this with `--apply-banner-h` so the
+ * navbar and page content offset by exactly this height (0 when hidden).
+ */
+export function ApplyBar() {
+  if (!APPLICATION_IS_LIVE) return null;
+
+  const closeDate = APPLICATION_CLOSE_DATETIME.format("MMMM D, YYYY");
+
+  return (
+    <div
+      aria-label="Applications banner"
+      className="fixed inset-x-0 top-0 z-[120] flex h-14 items-center justify-between gap-3 border-b border-[rgba(15,23,70,0.14)] bg-white px-4 md:px-8"
+    >
+      <p className="truncate text-sm text-[var(--secondary-dark)] md:text-md">
+        <span className="hidden sm:inline">
+          Applications to join Blueprint next term are open, and close{" "}
+          {closeDate}.
+        </span>
+        <span className="sm:hidden">Applications close {closeDate}.</span>
+      </p>
+
+      <Link
+        href={APPLICATION_LINK}
+        className="shrink-0 text-sm text-[var(--bp-blue)] underline underline-offset-4 transition-opacity duration-200 hover:opacity-80 md:text-md"
+      >
+        Apply now
+      </Link>
+    </div>
+  );
+}
diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
@@ -189,7 +189,7 @@ export default function Navbar() {
   return (
     <header
       ref={headerRef}
-      className="fixed top-0 left-0 right-0 z-[100] w-full bg-[var(--bp-blue)] will-change-transform"
+      className="fixed top-[var(--apply-banner-h,0px)] left-0 right-0 z-[100] w-full bg-[var(--bp-blue)] will-change-transform"
       style={{
         transform: `translateY(calc(-100% * ${effectiveHideProgress}))`,
         pointerEvents: effectiveHideProgress >= 1 ? "none" : "auto",

diff --git a/src/components/sections/JoinUsHero.tsx b/src/components/sections/JoinUsHero.tsx
@@ -2,7 +2,6 @@
 
 import UnderlineToBackground from "@/components/fancy/text/underline-to-background";
 import { scrollToElement } from "@/lib/utils";
-import { ApplyNowBanner } from "../ui/ApplyNowBanner";
 
 const SECTION_LINKS: { id: string; label: string }[] = [
   { id: "why-join", label: "why join" },
@@ -35,11 +34,9 @@ export function JoinUsHero() {
     <section
       aria-label="Join our team hero"
       className="flex min-h-dvh flex-col justify-end overflow-hidden bg-[var(--bp-blue)]"
-    > 
+    >
       <div className="grid w-full grid-cols-12 gap-0 px-8 pb-8">
         <div className="col-span-12 flex flex-col gap-4 md:gap-16">
-
-          <ApplyNowBanner />
           <h1
             className="text-xxl lowercase text-[var(--primary-light)]"
             style={{ lineHeight: 0.8 }}
@@ -66,4 +63,4 @@ export function JoinUsHero() {
       </div>
     </section>
   );
-}
+}
diff --git a/src/components/ui/ApplyNowBanner.tsx b/src/components/ui/ApplyNowBanner.tsx