From 201f76863208519fc743bd588d5564c0e071173f Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 7 May 2025 14:47:54 +0200
Subject: [PATCH 1/6] Bump navbar opacities

---
 src/app/conf/2025/components/navbar.tsx | 38 ++++++++-----------------
 1 file changed, 12 insertions(+), 26 deletions(-)

diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 9dbf79ed41..f4056d6bfe 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -37,7 +37,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
   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",
         )}
@@ -46,9 +46,8 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
         }}
       />
       <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 bg-white/40 font-mono text-neu-900 antialiased dark:border-white/80 dark:bg-black/40",
           mobileDrawerOpen ? "fixed" : "sticky",
         )}
         style={
@@ -76,9 +75,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           <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">
@@ -142,26 +139,15 @@ 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)"
   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,
+      }}
+    />
   )
 }

From 5214190b15644f900c0f99de7bd63024640f0a8a Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 7 May 2025 16:06:10 +0200
Subject: [PATCH 2/6] Make the Navbar okay

---
 src/app/conf/2025/components/hero/index.tsx |  3 +-
 src/app/conf/2025/components/navbar.tsx     | 33 ++++++++++++---------
 src/app/conf/2025/layout.tsx                |  2 +-
 src/globals.css                             |  8 +++++
 4 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index b2bb824827..12629dd12c 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -11,8 +11,9 @@ import blurBean from "./blur-bean-cropped.webp"
 import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
+  // gql-conf-navbar-strip dark:before:bg-[#000]/40 dark:before:bg-[#000]/40
   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 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 dark:before:bg-[#000]/40">
       <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">
diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index f4056d6bfe..74e19c5a6c 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -32,8 +32,6 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
     setMobileDrawerOpen(false)
   }, [pathname])
 
-  const navbarHeight = "70px"
-
   return (
     <>
       <div
@@ -41,23 +39,19 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           "top-0 w-full scale-y-105 bg-pri-base dark:bg-pri-darker",
           mobileDrawerOpen ? "static" : "absolute",
         )}
-        style={{
-          height: navbarHeight,
-        }}
+      />
+      <div
+        // placeholder
+        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base dark:bg-pri-darker"
       />
       <header
         className={clsx(
-          "top-0 z-10 w-full border-b border-black/60 bg-white/40 font-mono text-neu-900 antialiased dark:border-white/80 dark:bg-black/40",
+          "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-10">
           <div className="flex items-center gap-2 text-xl/none uppercase">
             <NextLink href="/">
               <GraphQLLogo className="h-6" />
@@ -65,10 +59,21 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
             <span>/ GraphQLConf {year}</span>
           </div>
 
+          <div className="mr-auto flex h-full flex-col justify-center border-x border-black/60 px-4 typography-menu dark:border-white/80">
+            <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]"
             />
           )}
 
@@ -138,7 +143,7 @@ function GraphQLLogo(props: React.SVGProps<SVGSVGElement>) {
 }
 
 function BackdropBlur() {
-  const mask = "linear-gradient(to bottom, #000 0% 50%, transparent 50% 100%)"
+  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
diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx
index 271ae1807c..f735b8e507 100644
--- a/src/app/conf/2025/layout.tsx
+++ b/src/app/conf/2025/layout.tsx
@@ -5,7 +5,7 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
 import "../../colors.css"
-import { Navbar } from "./components/navbar"
+import { Navbar, NavbarBackgroundStrip } from "./components/navbar"
 
 // @ts-expect-error: we want to import the same version as Nextra for the main page
 import { ThemeProvider } from "next-themes"
diff --git a/src/globals.css b/src/globals.css
index 63ba0af04f..1b60c971de 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 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;
+}

From 1626ddb857d6e7fbc1f42cf15f5bd66cfa9f10c2 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 7 May 2025 17:10:36 +0200
Subject: [PATCH 3/6] Add background strips per section

---
 src/app/conf/2025/components/hero/index.tsx |  5 ++---
 src/app/conf/2025/components/navbar.tsx     |  8 +-------
 src/app/conf/2025/page.tsx                  | 20 ++++++++++----------
 src/globals.css                             |  2 +-
 tailwind.config.ts                          |  2 ++
 5 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/app/conf/2025/components/hero/index.tsx b/src/app/conf/2025/components/hero/index.tsx
index 12629dd12c..2c8f990701 100644
--- a/src/app/conf/2025/components/hero/index.tsx
+++ b/src/app/conf/2025/components/hero/index.tsx
@@ -11,9 +11,8 @@ import blurBean from "./blur-bean-cropped.webp"
 import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
-  // gql-conf-navbar-strip dark:before:bg-[#000]/40 dark:before:bg-[#000]/40
   return (
-    <article className="gql-conf-navbar-strip 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 dark:before:bg-[#000]/40">
+    <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">
@@ -43,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 74e19c5a6c..7b13e80760 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"
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 1b60c971de..efca847c5b 100644
--- a/src/globals.css
+++ b/src/globals.css
@@ -518,7 +518,7 @@ div[id^="headlessui-menu-items"] {
 }
 
 .gql-conf-navbar-strip {
-  @apply relative 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-[''];
+  @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 {
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: {

From 6abca31849010203c30ad7ec2acd68511a77d2dd Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Wed, 7 May 2025 17:25:35 +0200
Subject: [PATCH 4/6] Remove unused import

---
 src/app/conf/2025/layout.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/conf/2025/layout.tsx b/src/app/conf/2025/layout.tsx
index f735b8e507..271ae1807c 100644
--- a/src/app/conf/2025/layout.tsx
+++ b/src/app/conf/2025/layout.tsx
@@ -5,7 +5,7 @@ import { GraphQLConf, HostedByGraphQLFoundation } from "@/icons"
 import NextLink from "next/link"
 import { NewFontsStyleTag } from "../../fonts"
 import "../../colors.css"
-import { Navbar, NavbarBackgroundStrip } from "./components/navbar"
+import { Navbar } from "./components/navbar"
 
 // @ts-expect-error: we want to import the same version as Nextra for the main page
 import { ThemeProvider } from "next-themes"

From 9e668893e40685c5a9e95086accde7b4e26222c4 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 8 May 2025 01:21:04 +0200
Subject: [PATCH 5/6] Make the navbar more mobile friendly

---
 src/app/conf/2025/components/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 7b13e80760..030b115edd 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -45,7 +45,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
         )}
       >
         <BackdropBlur />
-        <div className="flex h-[var(--navbar-h)] items-center justify-between gap-5 px-10">
+        <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" />
@@ -53,7 +53,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
             <span>/ GraphQLConf {year}</span>
           </div>
 
-          <div className="mr-auto flex h-full flex-col justify-center border-x border-black/60 px-4 typography-menu dark:border-white/80">
+          <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>

From 5173e22367e352e0e900b9ed4bae487cb2697087 Mon Sep 17 00:00:00 2001
From: Piotr Monwid-Olechnowicz <hasparus@gmail.com>
Date: Thu, 8 May 2025 11:40:38 +0200
Subject: [PATCH 6/6] Make the navbar consistent color at the top

---
 src/app/conf/2025/components/navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/conf/2025/components/navbar.tsx b/src/app/conf/2025/components/navbar.tsx
index 030b115edd..673ab017cc 100644
--- a/src/app/conf/2025/components/navbar.tsx
+++ b/src/app/conf/2025/components/navbar.tsx
@@ -35,8 +35,8 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
         )}
       />
       <div
-        // placeholder
-        className="absolute h-[calc(var(--navbar-h)+1px)] w-full bg-pri-base dark:bg-pri-darker"
+        // 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
         className={clsx(