Get rid of dark blob, style dark mode

Author: hasparus

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

@@ -12,15 +12,25 @@ export function Venue(props: VenueProps) {
     <section
       {...props}
       style={{
+        ...({ "--photo": `url(${locationPhoto.src})` } as {}),
         ...props.style,
-        backgroundImage: `linear-gradient(0deg, hsl(var(--color-sec-light)) 0%, hsl(var(--color-sec-light)) 100%), url(${locationPhoto.src})`,
         backgroundBlendMode: "overlay, normal",
         backgroundSize: "cover",
       }}
-      className={clsx("gql-conf-section relative", props.className)}
+      className={clsx(
+        "gql-conf-section relative bg-[linear-gradient(0deg,hsl(var(--color-sec-light))_0%,hsl(var(--color-sec-light))_100%),var(--photo)] dark:bg-[linear-gradient(0deg,#181f01_0%,#283502_100%),var(--photo)]",
+        props.className,
+      )}
     >
-      <div className="flex gap-x-12 gap-y-10 bg-white/10 p-4 backdrop-blur-3xl dark:border-sec-darker max-lg:flex-col lg:p-16 xl:*:flex-1">
-        <article className="flex shrink-0 flex-col gap-6 max-xl:max-w-[476px]">
+      <div className="relative flex gap-x-12 gap-y-10 bg-white/10 p-4 dark:border-sec-darker max-lg:flex-col lg:p-16 xl:*:flex-1">
+        <div
+          className="absolute inset-0 backdrop-blur-3xl"
+          style={{
+            maskImage:
+              "radial-gradient(circle at center, #fff 65%, rgb(255 0 0/.8) 99%)",
+          }}
+        />
+        <article className="relative flex shrink-0 flex-col gap-6 max-xl:max-w-[476px]">
           <h2 className="typography-h2">
             A place of innovation &&nbsp;creation
           </h2>
@@ -38,7 +48,7 @@ export function Venue(props: VenueProps) {
             Google Maps
           </Button>
         </article>
-        <div className="flex-1">
+        <div className="relative flex-1">
           <h3 className="mb-6 typography-h3">How to get to the venue?</h3>
           <Accordion
             className="[&_svg]:fill-neu-900"

src/app/conf/2025/components/venue/location-photo.webp

@@ -30,7 +30,7 @@ export function Accordion({
         <details
           open={index === 0}
           key={index}
-          className="group/q w-full border border-sec-darker @container"
+          className="group/q w-full border border-sec-darker @container dark:border-sec-dark"
           onClick={event => {
             if (!multiple) {
               const allDetails =
@@ -50,7 +50,7 @@ export function Accordion({
             }
           }}
         >
-          <summary className="flex cursor-pointer list-none items-center justify-between gap-2 border-sec-darker p-2 px-3 focus:outline-none group-open/q:border-b [&::-webkit-details-marker]:hidden">
+          <summary className="flex cursor-pointer list-none items-center justify-between gap-2 border-sec-darker p-2 px-3 focus:outline-none group-open/q:border-b dark:border-sec-dark [&::-webkit-details-marker]:hidden">
             <span className="select-none typography-body-lg">{item.title}</span>
             <ArrowDown className="size-10 shrink-0 text-sec-darker group-open/q:rotate-180" />
           </summary>