diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index b2bb824827..2c8f990701 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -12,7 +12,7 @@ import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
   return (
-    <article className="relative isolate flex flex-col justify-center bg-pri-base text-neu-0 dark:bg-pri-darker dark:text-neu-900">
+    <article className="gql-conf-navbar-strip before:dark:bg-blk/40 relative isolate flex flex-col justify-center bg-pri-base text-neu-0 before:bg-white/30 dark:bg-pri-darker dark:text-neu-900">
       <article className="relative">
         <Stripes />
         <div className="gql-conf-container mx-auto flex max-w-full flex-col gap-12 overflow-hidden p-4 pt-6 sm:p-8 sm:pt-12 md:gap-12 md:bg-left md:p-12 lg:px-24 lg:pb-16 lg:pt-24">
@@ -42,7 +42,7 @@ export function Hero() {
           </div>
         </div>
       </article>
-      <div className="bg-[#000]">
+      <div className="bg-blk">
         <Image
           src={heroPhoto}
           width={1920}
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 9dbf79ed41..673ab017cc 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -1,12 +1,6 @@
 "use client"
 
-import {
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from "react"
+import { ReactElement, useCallback, useEffect, useState } from "react"
 import NextLink from "next/link"
 import { clsx } from "clsx"
 import { usePathname } from "next/navigation"
@@ -32,33 +26,26 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
     setMobileDrawerOpen(false)
   }, [pathname])
 
-  const navbarHeight = "70px"
-
   return (
     <>
       <div
-        /* pink background "prelude" */ className={clsx(
+        className={clsx(
           "top-0 w-full scale-y-105 bg-pri-base dark:bg-pri-darker",
           mobileDrawerOpen ? "static" : "absolute",
         )}
-        style={{
-          height: navbarHeight,
-        }}
+      />
+      <div
+        // placeholder: the colors here on `before` must match the ones on Hero `before` strip
+        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base before:absolute before:top-0 before:h-[calc(var(--navbar-h)+1px)] before:w-full before:bg-white/30 dark:bg-pri-darker dark:before:bg-blk/40"
       />
       <header
-        // todo: not white, but ALWAYS contrasting color, either white or black depending on background
         className={clsx(
-          "top-0 z-10 w-full bg-white/20 font-mono text-white antialiased",
+          "top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
           mobileDrawerOpen ? "fixed" : "sticky",
         )}
-        style={
-          {
-            "--navbar-h": navbarHeight,
-          } as {}
-        }
       >
         <BackdropBlur />
-        <div className="container flex h-[var(--navbar-h)] items-center justify-between gap-5">
+        <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-4 lg:px-10">
           <div className="flex items-center gap-2 text-xl/none uppercase">
             <NextLink href="/">
               <GraphQLLogo className="h-6" />
@@ -66,19 +53,28 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
             <span>/ GraphQLConf {year}</span>
           </div>
 
+          <div className="mr-auto flex h-full flex-col justify-center whitespace-pre border-x border-black/60 px-4 typography-menu dark:border-white/80 max-xl:hidden">
+            <p className="flex items-center gap-2 text-sm">
+              <time dateTime="2025-09-08">September 08</time>
+              <span>-</span>
+              <time dateTime="2025-09-10">10, 2025</time>
+            </p>
+            <address className="text-sm not-italic">
+              Amsterdam, Netherlands
+            </address>
+          </div>
+
           {mobileDrawerOpen && (
             <div
               onClick={handleDrawerClick}
-              className="fixed inset-0 top-[calc(var(--navbar-h)+1px)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
+              className="fixed inset-0 top-[var(--navbar-h)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
             />
           )}
 
           <nav
             className={clsx(
               "inset-0 z-20 flex gap-7 typography-menu max-lg:fixed max-lg:mt-[calc(var(--navbar-h)+1px)] max-lg:flex-col max-md:min-w-[50%] sm:max-lg:p-4 lg:items-end",
-              mobileDrawerOpen
-                ? "translate-x-0 text-neu-900"
-                : "text-white max-lg:translate-x-full",
+              mobileDrawerOpen ? "translate-x-0" : "max-lg:translate-x-full",
             )}
           >
             <div className="flex w-full flex-col lg:mt-0 lg:block">
@@ -141,27 +137,16 @@ function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
 }
 
 function BackdropBlur() {
-  const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
-  const edgeMask =
-    "linear-gradient(to bottom, black 0, black 1.1px, transparent 1.1px)"
+  const mask = "linear-gradient(to bottom,#000 0% 50%, transparent 50% 100%)"
   return (
-    <>
-      <div
-        // note: we can't use the background trick to reduce flickering, because we have many section
-        // background colors and big images, so we'd have to change the --bg var with javascript
-        className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]"
-        style={{
-          maskImage: mask,
-          WebkitMaskImage: mask,
-        }}
-      />
-      <div
-        className="pointer-events-none absolute inset-0 -z-10 h-full translate-y-full bg-white/50 backdrop-blur-sm backdrop-brightness-200 backdrop-grayscale-[50%]"
-        style={{
-          maskImage: edgeMask,
-          WebkitMaskImage: edgeMask,
-        }}
-      />
-    </>
+    <div
+      // note: we can't use the background trick to reduce flickering, because we have many section
+      // background colors and big images, so we'd have to change the --bg var with javascript
+      className="pointer-events-none absolute inset-0 -z-10 h-[200%] backdrop-blur-[6.4px]"
+      style={{
+        maskImage: mask,
+        WebkitMaskImage: mask,
+      }}
+    />
   )
 }
diff --git a/src/app/conf/2025/page.tsx b/src/app/conf/2025/page.tsx
index 82f9ab77b5..3104035d36 100644
--- a/src/app/conf/2025/page.tsx
+++ b/src/app/conf/2025/page.tsx
@@ -22,23 +22,23 @@ export default function Page() {
   return (
     <main className="gql-all-anchors-focusable antialiased">
       <Hero />
-      <div className="gql-conf-container text-neu-900">
+      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/40">
         <RegisterToday className="md:mb-8 md:mt-24" />
         <WhatToExpectSection className="md:mb-8 md:mt-24" />
         <TopMindsSection className="md:mb-8 md:mt-24" hasSpeakersPage={false} />
       </div>
-      <GetYourTicket />
-      <div className="gql-conf-container text-neu-900">
+      <div className="gql-conf-navbar-strip before:bg-white/40 before:dark:bg-pri-dark/[0.45]">
+        <GetYourTicket />
+      </div>
+      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/50">
         <RegisterSection />
         <Sponsors heading="Thanks to our 2024 sponsors!" />
         <CallForProposals />
-      </div>
-      <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
-        <Sponsor />
-        <Register />
-        <Venue />
-      </div>
-      <div className="gql-conf-container text-neu-900">
+        <div className="container my-20 flex flex-col gap-20 md:my-32 md:gap-32 [.light_&_.text-white]:text-neu-900 [.light_&_[alt='Grafbase_logo']]:invert">
+          <Sponsor />
+          <Register />
+          <Venue />
+        </div>
         <FAQ />
       </div>
     </main>
diff --git a/src/globals.css b/src/globals.css
index 63ba0af04f..efca847c5b 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -516,3 +516,11 @@ div[id^="headlessui-menu-items"] {
 .gql-conf-section {
   @apply px-4 py-8 lg:px-12 xl:gap-x-24 xl:px-24 3xl:px-[240px];
 }
+
+.gql-conf-navbar-strip {
+  @apply relative [contain:paint] before:sticky before:top-0 before:z-[9] before:-mt-[var(--navbar-h)] before:block before:h-[var(--navbar-h)] before:w-full before:content-[''];
+}
+
+:root {
+  --navbar-h: 70px;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index fdb8460ae9..540330efc9 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -55,6 +55,8 @@ const config: Config = {
         "neu-700": "hsl(var(--color-neu-700) / <alpha-value>)",
         "neu-800": "hsl(var(--color-neu-800) / <alpha-value>)",
         "neu-900": "hsl(var(--color-neu-900) / <alpha-value>)",
+
+        blk: "#000",
         // #endregion new design system colors
       },
       backgroundImage: {