Change styling

src/app/(normal)/artworks/animalstudies/index/page.tsx

@@ -1,4 +1,4 @@
-import { prisma } from "@/lib/prisma";
+import { ArrowLeftIcon } from "lucide-react";
 import Link from "next/link";
 
 import {
@@ -11,7 +11,7 @@ import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { ArrowLeftIcon } from "lucide-react";
+import { prisma } from "@/lib/prisma";
 
 type SimpleArtwork = {
   id: string;
@@ -178,7 +178,16 @@ export default async function AnimalListPage() {
 
                   return (
                     <AccordionItem key={p.id} value={p.id} className="border-b">
-                      <AccordionTrigger className="py-4">
+                      <AccordionTrigger
+                        className="
+                          py-4
+                          rounded-md px-2 -mx-2
+                          transition-colors
+                          hover:bg-muted/60
+                          focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+                          data-[state=open]:bg-muted/40
+                        "
+                      >
                         <div className="flex w-full items-center justify-between pr-2">
                           <div className="flex min-w-0 items-center gap-2">
                             <span className="truncate font-medium">{p.name}</span>
@@ -203,7 +212,6 @@ export default async function AnimalListPage() {
                       </AccordionTrigger>
 
                       <AccordionContent className="pb-5">
-                        {/* If standalone root: just list its artworks */}
                         {isStandalone ? (
                           <div className="rounded-md border p-4">
                             <div className="mb-3 flex items-center justify-between">
@@ -214,29 +222,26 @@ export default async function AnimalListPage() {
                           </div>
                         ) : (
                           <div className="space-y-4">
-                            {/* Optional: artworks directly on the parent */}
+                            {p.artworks.length > 0 ? (
-                            <div className="rounded-md border p-4">
+                              <>
-                              <div className="mb-3 flex items-center justify-between">
+                                <div className="rounded-md border p-4">
-                                <div className="text-sm font-medium">
+                                  <div className="mb-3 flex items-center justify-between">
-                                  {/* Directly tagged */}
+                                    <div className="text-sm font-medium">{/* Directly tagged */}</div>
+                                    <Badge variant="outline">{p.artworks.length}</Badge>
+                                  </div>
+                                  <ArtworkList items={p.artworks} />
                                 </div>
-                                <Badge variant="outline">{p.artworks.length}</Badge>
-                              </div>
-                              <ArtworkList items={p.artworks} />
-                            </div>
 
-                            <Separator />
+                                <Separator />
+                              </>
+                            ) : null}
 
-                            {/* Children blocks */}
                             <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
                               {children.map((c) => (
                                 <div key={c.id} className="rounded-md border p-4">
                                   <div className="mb-3 flex items-center justify-between">
                                     <div className="min-w-0">
                                       <div className="truncate text-sm font-medium">{c.name}</div>
-                                      {/* <div className="text-xs text-muted-foreground">
-                                        Sub-tag of {p.name}
-                                      </div> */}
                                     </div>
                                     <Badge variant="outline">{c.artworks.length}</Badge>
                                   </div>

src/app/globals.css

@@ -46,7 +46,7 @@
   --radius-4xl: calc(var(--radius) + 16px);
 }
 
-:root {
+/* :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
@@ -113,6 +113,87 @@
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
+} */
+
+:root {
+  --radius: 0.625rem;
+
+  /* Light: warm paper + graphite */
+  --background: oklch(0.985 0.012 85);       /* warm off-white */
+  --foreground: oklch(0.18 0.02 35);         /* graphite */
+
+  --card: oklch(0.992 0.008 85);             /* slightly lifted paper */
+  --card-foreground: var(--foreground);
+
+  --popover: oklch(0.992 0.008 85);
+  --popover-foreground: var(--foreground);
+
+  /* Primary: deep ink / indigo (artist-y but still neutral enough) */
+  --primary: oklch(0.32 0.06 260);
+  --primary-foreground: oklch(0.985 0.012 85);
+
+  /* Secondary/muted/accent: warm washes */
+  --secondary: oklch(0.96 0.015 85);
+  --secondary-foreground: oklch(0.22 0.02 35);
+
+  --muted: oklch(0.955 0.012 85);
+  --muted-foreground: oklch(0.46 0.02 35);
+
+  --accent: oklch(0.95 0.02 110);            /* subtle “wash” */
+  --accent-foreground: oklch(0.22 0.02 35);
+
+  --destructive: oklch(0.58 0.22 27.325);
+
+  --border: oklch(0.90 0.02 85);             /* warm border */
+  --input: oklch(0.90 0.02 85);
+  --ring: oklch(0.55 0.07 260);              /* ties to primary */
+
+  /* charts can stay, or we can harmonize later */
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+
+  /* sidebar inherits the same “paper” idea */
+  --sidebar: oklch(0.975 0.012 85);
+  --sidebar-foreground: var(--foreground);
+  --sidebar-primary: var(--primary);
+  --sidebar-primary-foreground: var(--primary-foreground);
+  --sidebar-accent: oklch(0.95 0.02 110);
+  --sidebar-accent-foreground: var(--accent-foreground);
+  --sidebar-border: var(--border);
+  --sidebar-ring: var(--ring);
+}
+
+.dark {
+  /* Inky navy background (clearly not neutral) */
+  --background: oklch(21.393% 0.06154 260.121);
+  --foreground: oklch(0.95 0.012 85);
+
+  /* Surfaces */
+  --card: oklch(0.155 0.03 255);
+  --card-foreground: var(--foreground);
+
+  --popover: oklch(0.155 0.03 255);
+  --popover-foreground: var(--foreground);
+
+  /* Primary accent stays “artist ink” */
+  --primary: oklch(0.78 0.11 255);
+  --primary-foreground: oklch(0.13 0.03 255);
+
+  --secondary: oklch(0.19 0.025 255);
+  --secondary-foreground: var(--foreground);
+
+  --muted: oklch(0.19 0.025 255);
+  --muted-foreground: oklch(0.74 0.02 85);
+
+  --accent: oklch(0.22 0.03 110);
+  --accent-foreground: var(--foreground);
+
+  --border: oklch(0.40 0.03 255 / 55%);
+  --input: oklch(0.40 0.03 255 / 65%);
+  --ring: oklch(0.65 0.10 255);
 }
 
 .markdown {
@@ -181,5 +262,13 @@
   }
   body {
     @apply bg-background text-foreground;
+    background-image:
+      radial-gradient(1200px 600px at 20% -10%, oklch(0.92 0.05 110 / 30%), transparent 60%),
+      radial-gradient(900px 500px at 80% 0%, oklch(0.85 0.06 260 / 22%), transparent 55%);
+  }
+  .dark body {
+    background-image:
+      radial-gradient(1200px 700px at 15% -10%, oklch(0.55 0.14 255 / 16%), transparent 60%),
+      radial-gradient(900px 600px at 85% 0%, oklch(0.50 0.12 110 / 10%), transparent 55%);
   }
 }

src/components/global/Banner.tsx

@@ -1,9 +1,9 @@
 import { prisma } from "@/lib/prisma";
 import { cn } from "@/lib/utils";
-import { Pacifico } from "next/font/google";
+import { Fraunces } from "next/font/google";
 import Image from "next/image";
 
-const pacifico = Pacifico({ weight: "400", subsets: ["latin"] });
+const pacifico = Fraunces({ weight: "700", subsets: ["latin"] });
 
 export default async function Banner() {
   const headerImage = await prisma.artwork.findFirst({