new conf design — fixes

src/app/conf/2025/components/call-for-proposals.tsx

@@ -328,8 +328,8 @@ export function CallForProposals() {
       // todo: the part with `dark:` here is temporary until we have a dark mode version of this section
       className="gql-conf-section gql-conf-container dark:text-neu-0"
     >
-      <div className="flex *:basis-1/2 max-md:flex-col">
-        <div className="border-sec-dark bg-sec-light p-4 md:border-r md:p-8 lg:p-16">
+      <div className="flex *:basis-1/2 max-lg:flex-col">
+        <div className="border-sec-dark bg-sec-light p-4 lg:border-r lg:p-8 xl:p-16">
           <h1 className="typography-h2">Call for Proposals</h1>
           <p className="mt-6 md:mt-10">
             Putting on an amazing conference depends on great content, which is
@@ -378,7 +378,7 @@ export function CallForProposals() {
         <article className="flex h-auto flex-col bg-[#C6F267]">
           <div
             role="tablist"
-            className="flex divide-sec-dark border-b border-sec-dark *:flex-1 max-md:sr-only md:divide-x"
+            className="flex divide-sec-dark border-b border-sec-dark *:flex-1 max-lg:sr-only lg:divide-x"
           >
             {tabsInOrder.map((tab, i) => (
               <TabButton
@@ -389,21 +389,21 @@ export function CallForProposals() {
               />
             ))}
           </div>
-          <div className="flex flex-1 justify-center overflow-hidden max-md:flex-col md:items-center">
+          <div className="flex flex-1 justify-center overflow-hidden max-lg:flex-col lg:items-center">
             {tabsInOrder.map(tab => (
               <Fragment key={tab}>
                 <TabButton
                   tab={tab}
                   activeTab={activeTab}
                   setActiveTab={setActiveTab}
-                  className="md:hidden"
+                  className="lg:hidden"
                   aria-hidden
                 />
                 <div
                   role="tabpanel"
                   key={tab}
                   id={`tabpanel-${tab}`}
-                  className="flex-1"
+                  className="relative h-full flex-1"
                   style={{
                     display: activeTab === tab ? "block" : "none",
                   }}
@@ -441,18 +441,20 @@ function TabButton({
       tabIndex={tabIndex}
       aria-selected={activeTab === tab}
       className={clsx(
-        "gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none max-md:border-b max-md:border-sec-dark max-md:first:border-t md:[--collapsible:1] md:aria-selected:bg-sec-light",
+        "gql-focus-visible flex items-center justify-between px-3 py-4 typography-body-lg hover:bg-sec-light focus:outline-none max-lg:border-b max-lg:border-sec-dark max-lg:first:border-t lg:[--collapsible:1] lg:aria-selected:bg-sec-light",
         className,
       )}
-      onFocus={event => {
-        console.log("focus")
+      onFocus={() => {
+        setActiveTab(tab)
+      }}
+      onPointerDown={() => {
         setActiveTab(tab)
       }}
       onKeyDown={arrowsMoveSideways}
       {...props}
     >
       {tab.charAt(0).toUpperCase() + tab.slice(1)}
-      <ArrowDownIcon className="ml-2 size-6 text-sec-darker opacity-0 [[aria-selected=true]>&]:opacity-100" />
+      <ArrowDownIcon className="ml-2 size-6 text-transparent max-lg:[[aria-selected=false]>&]:rotate-180 max-lg:[[aria-selected=false]>&]:text-sec-dark [[aria-selected=true]>&]:text-sec-darker" />
     </button>
   )
 }
@@ -473,8 +475,8 @@ function arrowsMoveSideways(event: React.KeyboardEvent<HTMLButtonElement>) {
 
 function DefinitionListBox({ children }: { children: React.ReactNode }) {
   return (
-    <div className="relative isolate md:p-8 lg:p-16">
-      <dl className="divide-y divide-sec-dark border-neu-300 md:divide-neu-300 md:border md:shadow-[0px_0px_20px_0px_rgba(133,185,19,0.20)]">
+    <div className="inset-0 isolate h-full lg:absolute lg:flex lg:items-center lg:justify-center lg:p-4 xl:p-8 2xl:p-16">
+      <dl className="divide-y divide-sec-dark border-neu-300 lg:divide-neu-300 lg:border lg:shadow-[0px_0px_20px_0px_rgba(133,185,19,0.20)]">
         {children}
       </dl>
       <Stripes />
@@ -492,7 +494,7 @@ function Stripes() {
   return (
     <div
       role="presentation"
-      className="pointer-events-none absolute inset-0 bottom-[-20px] -z-10 translate-x-0.5 translate-y-12 ease-linear max-md:hidden"
+      className="pointer-events-none absolute inset-0 bottom-[-20px] -z-10 translate-x-0.5 translate-y-12 ease-linear max-lg:hidden"
       style={{
         maskImage: mask,
         WebkitMaskImage: mask,

src/app/conf/2025/components/hero/index.tsx

@@ -12,7 +12,7 @@ import heroPhoto from "./hero-photo.jpeg"
 
 export function Hero() {
   return (
-    <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="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 before:dark:bg-blk/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">
@@ -42,7 +42,7 @@ export function Hero() {
           </div>
         </div>
       </article>
-      <div className="bg-blk">
+      <div className="z-[2] bg-blk">
         <Image
           src={heroPhoto}
           width={1920}

src/app/conf/2025/components/navbar.tsx

@@ -5,10 +5,11 @@ import NextLink from "next/link"
 import { clsx } from "clsx"
 import { usePathname } from "next/navigation"
 
-import { HamburgerIcon, CrossIcon } from "@/icons"
-
 import { Badge } from "../../_components/badge"
 
+import MenuIcon from "../pixelarticons/menu.svg?svgr"
+import CloseIcon from "../pixelarticons/close.svg?svgr"
+
 export interface NavbarProps {
   links: { href: string; children: React.ReactNode; "aria-disabled"?: true }[]
   year: number
@@ -36,21 +37,29 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
       />
       <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"
+        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-black/40"
       />
       <header
         className={clsx(
-          "top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
-          mobileDrawerOpen ? "fixed" : "sticky",
+          "gql-all-anchors-focusable top-0 z-10 w-full border-b border-black/60 font-mono text-neu-900 antialiased dark:border-white/80",
+          mobileDrawerOpen
+            ? "fixed border-neu-900 dark:border-white"
+            : "sticky",
         )}
       >
         <BackdropBlur />
         <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="/">
+            <NextLink href="/" className="-m-1 p-1 hover:bg-neu-900/10">
               <GraphQLLogo className="h-6" />
             </NextLink>
-            <span>/ GraphQLConf {year}</span>
+            <span>/</span>
+            <NextLink
+              href={`/conf/${year}`}
+              className="-m-2 p-2 underline-offset-4 hover:underline"
+            >
+              GraphQLConf {year}
+            </NextLink>
           </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">
@@ -67,7 +76,7 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           {mobileDrawerOpen && (
             <div
               onClick={handleDrawerClick}
-              className="fixed inset-0 top-[var(--navbar-h)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
+              className="fixed inset-0 top-[calc(var(--navbar-h)+1px)] z-10 bg-neu-0/40 backdrop-blur-[6.4px]"
             />
           )}
 
@@ -107,10 +116,10 @@ export function Navbar({ links, year }: NavbarProps): ReactElement {
           </nav>
 
           <button
-            className="z-40 ml-auto size-6 text-white lg:hidden"
+            className="gql-focus-visible z-40 ml-auto size-7 hover:bg-neu-900/10 lg:hidden"
             onClick={handleDrawerClick}
           >
-            {mobileDrawerOpen ? <CrossIcon /> : <HamburgerIcon />}
+            {mobileDrawerOpen ? <CloseIcon /> : <MenuIcon />}
           </button>
         </div>
       </header>

src/app/conf/2025/components/top-minds/index.tsx

@@ -24,12 +24,12 @@ export default function TopMindsSection({
   return (
     <section
       className={clsx(
-        "gql-conf-section flex justify-center max-md:flex-col",
+        "gql-conf-section flex justify-center max-md:flex-col [@media(767px<width<807px)]:px-6 [@media(807px<=width<858px)]:px-12",
         className,
       )}
       {...rest}
     >
-      <div className="flex flex-wrap max-sm:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
+      <div className="flex grid-cols-2 flex-wrap [@media(444px<width<743px)]:grid [@media(width<=444px)]:flex-col [@media(width<=743px)]:justify-center [@media(width>=970px)]:*:border-b-0">
         {/* todo: remaining socials */}
         <h3 className="mr-auto flex w-full grow text-pretty pb-6 pr-6 typography-h2 [@media(width>857px)]:basis-0">
           Meet the top industry minds
@@ -46,6 +46,7 @@ export default function TopMindsSection({
           title="Netflix — CTO"
           src={elizabethStone}
           linkedin="elizabeth-stone-608a754"
+          className="[@media(width<=742px)]:border-l"
         />
         <div className="flex grow border-sec-dark [@media(width<970px)]:contents [@media(width>=970px)]:border-t [@media(width>=970px)]:*:border-t-0">
           <SpeakerCard
@@ -61,7 +62,7 @@ export default function TopMindsSection({
             title="Atlassian — CTO"
             src={rajeevRajan}
             linkedin="rajeev-rajan"
-            className="[@media(744px<=width<=970px)]:border-l"
+            className="[@media(639px<=width<=970px)]:border-l"
           />
           <SpeakerCard
             name="Tanmai Gopal"
@@ -71,7 +72,7 @@ export default function TopMindsSection({
             linkedin="tanmaig"
             className="[@media(width<744px)]:border-l"
           />
-          <div className="mt-6 flex shrink-0 basis-[content] items-end justify-stretch max-lg:w-full max-sm:*:w-full sm:justify-end sm:pl-6 [@media(640px<=width<=855px)]:basis-[236px] [@media(width>855px)]:grow">
+          <div className="mt-6 flex shrink-0 basis-[content] items-end justify-stretch max-lg:w-full [@media(640px<=width<=855px)]:basis-[236px] [@media(width<=444px)]:*:w-full [@media(width>742px)]:justify-end [@media(width>742px)]:pl-6 [@media(width>855px)]:grow">
             {hasSpeakersPage ? (
               <Button variant="secondary" href="/conf/2025/speakers/">
                 View all speakers
@@ -106,24 +107,24 @@ function SpeakerCard({
   return (
     <article
       className={clsx(
-        ":border-r shrink-0 border-y border-r border-sec-dark first-of-type:border-l max-sm:border-l",
+        "flex shrink-0 flex-col border-y border-r border-sec-dark first-of-type:border-l max-sm:border-l",
         className,
       )}
     >
       <Image
         src={src}
         alt=""
-        width={236}
-        height={236}
-        className="aspect-square size-[312px] w-full object-cover transition-transform sm:size-[236px]"
+        width={312}
+        height={312}
+        className="aspect-square size-[312px] w-full object-cover transition-transform sm:h-[236px]"
       />
-      <div className="flex items-stretch border-t border-sec-dark">
+      <div className="flex flex-1 items-stretch border-t border-sec-dark">
         <div className="flex grow flex-col justify-center gap-1 p-3 sm:h-[80px]">
           <h4 className="typography-body-md">{name}</h4>
           <p className="text-neu-700 typography-body-xs">{title}</p>
         </div>
         {(linkedin || twitter) && (
-          <div className="flex items-center border-l border-sec-dark max-sm:divide-x sm:flex-col sm:divide-y sm:border-l">
+          <div className="flex border-l border-sec-dark max-sm:divide-x sm:flex-col sm:items-center sm:divide-y sm:border-l">
             {linkedin && (
               <a
                 href={`https://www.linkedin.com/in/${linkedin}`}

src/app/conf/2025/faq.tsx

@@ -200,12 +200,14 @@ export function FAQ({ className }: { className?: string }) {
     <section
       id="faq"
       className={clsx(
-        "gql-conf-section flex gap-10 max-md:flex-col xl:gap-24 2xl:gap-36",
+        "gql-conf-section flex gap-10 max-lg:flex-col xl:gap-24 2xl:gap-36",
         className,
       )}
     >
       <div>
-        <h2 className="typography-h2">Frequently Asked Questions</h2>
+        <h2 className="typography-h2 lg:max-xl:max-w-lg">
+          Frequently Asked Questions
+        </h2>
         <p className="mt-6 typography-body-md">
           You can find much more information on our{" "}
           <a href="/conf/2025/resources" className="typography-link">
@@ -215,7 +217,7 @@ export function FAQ({ className }: { className?: string }) {
         </p>
       </div>
 
-      <div className="grow space-y-4 md:space-y-6">
+      <div className="grow space-y-4 lg:space-y-6">
         {FAQS.map((faq, index) => (
           <details
             open={index === 0}
@@ -226,7 +228,7 @@ export function FAQ({ className }: { className?: string }) {
               <span className="select-none typography-body-lg">
                 {faq.question}
               </span>
-              <ArrowDown className="size-10 text-sec-darker group-open/q:rotate-180" />
+              <ArrowDown className="size-10 shrink-0 text-sec-darker group-open/q:rotate-180" />
             </summary>
             <div className="p-3 typography-body-md">{faq.answer}</div>
           </details>

src/app/conf/2025/page.tsx

@@ -1,10 +1,7 @@
 import { Metadata } from "next"
-import { HostedByGraphQLFoundation } from "@/icons"
-import { GridButton } from "../_components/grid-button"
 import { Sponsor } from "./sponsorship"
 import { Venue } from "./venue"
 import { FAQ } from "./faq"
-import { Register } from "./register"
 import { CallForProposals } from "./components/call-for-proposals"
 import { RegisterToday } from "./components/register-today"
 import { Hero } from "./components/hero"
@@ -22,23 +19,20 @@ export default function Page() {
   return (
     <main className="gql-all-anchors-focusable antialiased">
       <Hero />
-      <div className="gql-conf-container gql-conf-navbar-strip before:dark:bg-blk/30 text-neu-900 before:bg-white/40">
+      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/40 before:dark:bg-blk/30">
         <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>
       <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">
+      <div className="gql-conf-container gql-conf-navbar-strip text-neu-900 before:bg-white/50 before:dark:bg-blk/30">
         <RegisterSection />
         <Sponsors heading="Thanks to our 2024 sponsors!" />
         <CallForProposals />
-        <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>
+        <Sponsor />
+        <Venue />
         <FAQ />
       </div>
     </main>