refactor: replace harsh shadows with subtle ring+shadow, add heading-serif and border-hairline

2026-05-17 02:49:47 +02:00
parent d764aae9b2
commit 296581fedf
14 changed files with 39 additions and 39 deletions
--- a/templates/anime.gohtml
+++ b/templates/anime.gohtml
@@ -98,7 +98,7 @@
 <div class="flex w-full flex-col gap-10 lg:pr-80">
  <div class="flex flex-col gap-8 md:flex-row lg:gap-12">
    <div class="flex w-64 shrink-0 flex-col items-center gap-6 md:w-80 md:items-start lg:w-96">
-      <div class="aspect-2/3 w-full overflow-hidden bg-background-surface shadow-lg">
+      <div class="aspect-2/3 w-full overflow-hidden border-hairline bg-background-surface shadow-soft">
        {{$imageUrl := "https://placehold.co/400x600?text=No+Image"}}
        {{if $anime.Images.Webp.LargeImageURL}}
          {{$imageUrl = $anime.Images.Webp.LargeImageURL}}
@@ -111,7 +111,7 @@

    <div class="flex grow flex-col">
      <div class="mb-4">
-        <h1 class="text-2xl font-normal text-foreground md:text-4xl">
+        <h1 class="heading-serif text-2xl font-normal text-foreground md:text-4xl">
          {{$anime.DisplayTitle}}
        </h1>
        {{if and $anime.TitleEnglish (ne $anime.Title $anime.TitleEnglish)}}
@@ -344,7 +344,7 @@
 </div>

 <div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-themes-dialog aria-hidden="true">
-  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-2xl ring-1 ring-border">
+  <div class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border">
    <div class="flex items-center justify-between border-b border-border px-6 py-4">
      <h2 class="text-base font-normal text-foreground">Theme Songs</h2>
      <button type="button" data-themes-close class="px-2 py-1 text-xs text-foreground-muted ring-1 ring-border transition-colors hover:text-foreground">Close</button>
@@ -380,4 +380,4 @@
 })();
 </script>

-{{end}}
+{{end}}
--- a/templates/base.gohtml
+++ b/templates/base.gohtml
@@ -35,7 +35,7 @@
  </style>
   <script type="module" src="/dist/static/theme.js" defer></script>
   <template id="toast-template">
-      <div class="toast pointer-events-auto w-[22rem] max-w-[calc(100vw-2rem)] bg-background shadow-2xl ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0">
+      <div class="toast pointer-events-auto w-[22rem] max-w-[calc(100vw-2rem)] bg-background shadow-soft ring-1 ring-black/5 flex items-start gap-3 px-4 py-3 transform transition-all duration-300 translate-y-2 opacity-0">
        <div class="min-w-0 flex-1">
         <div class="toast-message text-sm font-medium text-foreground leading-snug"></div>
       </div>
--- a/templates/browse.gohtml
+++ b/templates/browse.gohtml
@@ -7,7 +7,7 @@
 {{define "browse_content"}}
 <div id="browse-content" class="flex flex-col gap-6">
  <div class="flex items-end justify-between">
-    <h1 class="text-xl font-normal text-foreground">Browse</h1>
+    <h1 class="heading-serif text-xl font-normal text-foreground">Browse</h1>
  </div>

  {{template "filter_bar" .}}
--- a/templates/components/anime_card.gohtml
+++ b/templates/components/anime_card.gohtml
@@ -17,32 +17,32 @@
 {{$displayTitle := $anime.DisplayTitle}}

 <div class="flex w-full flex-col gap-2" data-id="{{$dataId}}">
-  <a href="/anime/{{$anime.MalID}}" class="group relative flex aspect-2/3 w-full flex-col overflow-hidden bg-background-surface after:absolute after:inset-0 {{if $withActions}}after:bg-black/80 after:opacity-0 hover:after:opacity-100{{else}}after:bg-linear-to-t after:from-black/80 after:via-black/20 after:to-transparent after:opacity-80 hover:after:opacity-100{{end}} after:transition-opacity">
+  <a href="/anime/{{$anime.MalID}}" class="group relative flex aspect-2/3 w-full flex-col overflow-hidden border-hairline bg-background-surface after:absolute after:inset-0 {{if $withActions}}after:bg-black/80 after:opacity-0 hover:after:opacity-100{{else}}after:bg-linear-to-t after:from-black/80 after:via-black/20 after:to-transparent after:opacity-80 hover:after:opacity-100{{end}} after:transition-opacity">
    <img src="{{$imageUrl}}" alt="{{$displayTitle}}" class="h-full w-full object-cover" loading="lazy" />

    {{if $withActions}}
      <div class="absolute inset-0 z-10 flex flex-col p-3 {{if $hasTopBadge}}pt-10{{end}} opacity-0 transition-opacity duration-300 group-hover:opacity-100">
        {{if not $isWatchlist}}
-          <h3 class="mb-1.5 line-clamp-2 text-base font-semibold text-white shadow-black drop-shadow-md">
+          <h3 class="mb-1.5 line-clamp-2 text-base font-semibold text-white">
            {{$displayTitle}}
          </h3>
        {{end}}

        {{if $anime.Synopsis}}
-          <p class="line-clamp-4 text-xs leading-relaxed text-white/80 shadow-black drop-shadow-md">
+          <p class="line-clamp-4 text-xs leading-relaxed text-white/80">
            {{$anime.Synopsis}}
          </p>
        {{end}}

        <div class="mt-auto flex items-center justify-start pb-2 pl-2">
          <button type="button" data-mal-id="{{$anime.MalID}}" onclick="event.preventDefault(); event.stopPropagation(); toggleWatchlist({{$anime.MalID}}, '{{$anime.DisplayTitle}}', this)" class="text-accent hover:text-accent/80 transition-colors focus:outline-none {{if $isWatchlist}}in-watchlist{{end}}" aria-label="{{if $isWatchlist}}Remove from Watchlist{{else}}Add to Watchlist{{end}}">
-            <svg class="size-6 shadow-black drop-shadow-md watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
+            <svg class="size-6 watchlist-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v16z" /></svg>
          </button>
        </div>
      </div>
    {{else}}
      <div class="absolute bottom-0 left-0 z-10 w-full p-4">
-        <h3 class="line-clamp-2 text-sm font-medium text-white shadow-black drop-shadow-md {{if $compact}}mb-0{{end}}">
+        <h3 class="line-clamp-2 text-sm font-medium text-white {{if $compact}}mb-0{{end}}">
          {{$displayTitle}}
        </h3>
        {{if not $compact}}
@@ -72,4 +72,4 @@
    </h3>
  {{end}}
 </div>
-{{end}}
+{{end}}
--- a/templates/components/dropdown.gohtml
+++ b/templates/components/dropdown.gohtml
@@ -4,10 +4,10 @@
    {{template "dropdown_trigger" .}}
  </div>

-  <div data-content class="hidden absolute z-50 {{if .Width}}{{.Width}}{{else}}min-w-[320px]{{end}} bg-background-button rounded-none shadow-2xl {{if eq .Align "left"}}left-0{{else}}right-0{{end}} {{if eq .Position "top"}}bottom-full mb-2{{else}}top-full mt-2{{end}}">
+  <div data-content class="hidden absolute z-50 {{if .Width}}{{.Width}}{{else}}min-w-[320px]{{end}} bg-background-button rounded-none shadow-soft ring-1 ring-border {{if eq .Align "left"}}left-0{{else}}right-0{{end}} {{if eq .Position "top"}}bottom-full mb-2{{else}}top-full mt-2{{end}}">
    <div class="flex flex-col py-1">
      {{template "dropdown_children" .}}
    </div>
  </div>
 </ui-dropdown>
-{{end}}
+{{end}}
--- a/templates/components/filter_bar.gohtml
+++ b/templates/components/filter_bar.gohtml
@@ -45,7 +45,7 @@
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
-    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-48 max-h-80 overflow-y-auto bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
      <form action="/browse" method="GET" hx-get="/browse" hx-trigger="change" hx-target="#browse-content main" hx-select="#browse-content main" hx-swap="outerHTML" class="flex flex-col py-1">
        <input type="hidden" name="q" value="{{.Query}}">
        {{if .Type}}<input type="hidden" name="type" value="{{.Type}}">{{end}}
@@ -75,7 +75,7 @@
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
-    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
      <div class="flex flex-col py-1">
        <a href="?status=&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Any Status</a>
        <a href="?status=airing&q={{.Query}}&type={{.Type}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Airing</a>
@@ -92,7 +92,7 @@
        <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
      </button>
    </div>
-    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+    <div data-content class="hidden absolute z-50 w-40 bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
      <div class="flex flex-col py-1">
        <a href="?type=&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Any Type</a>
        <a href="?type=tv&q={{.Query}}&status={{.Status}}&order_by={{.OrderBy}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">TV</a>
@@ -112,7 +112,7 @@
          <svg class="h-4 w-4 opacity-50" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6" /></svg>
        </button>
      </div>
-      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-2xl left-0 top-full mt-2 ">
+      <div data-content class="hidden absolute z-50 w-48 bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2 ">
        <div class="flex flex-col py-1">
          <a href="?order_by=&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Default</a>
          <a href="?order_by=popularity&q={{.Query}}&status={{.Status}}&type={{.Type}}&sort={{.Sort}}&sfw={{.SFW}}{{ if .Genres }}&{{ genresParams .Genres }}{{ end }}" class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover text-sm text-foreground">Popularity</a>
--- a/templates/components/navigation.gohtml
+++ b/templates/components/navigation.gohtml
@@ -23,7 +23,7 @@
    </button>

    <div class="fixed inset-0 z-50 hidden items-start justify-center bg-black/50 px-4 pt-[12vh]" data-search-dialog aria-hidden="true">
-      <form action="/browse" method="GET" class="w-full max-w-2xl overflow-hidden bg-background-button shadow-2xl ring-1 ring-border" data-search-root role="search">
+      <form action="/browse" method="GET" class="w-full max-w-2xl overflow-hidden bg-background-button shadow-soft ring-1 ring-border" data-search-root role="search">
        <label for="search-input" class="sr-only">Search anime</label>
        <div class="flex items-center border-b border-border">
          <svg class="mx-4 size-5 shrink-0 text-foreground-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
--- a/templates/components/video_player.gohtml
+++ b/templates/components/video_player.gohtml
@@ -72,7 +72,7 @@
                <svg class="size-6 transition-transform duration-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
              </button>
            </div>
-            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-2xl right-0 bottom-full mb-2">
+            <div data-content class="hidden absolute z-50 w-64 bg-background-button rounded-none shadow-soft ring-1 ring-border right-0 bottom-full mb-2">
              <div class="flex flex-col py-1">
                <div class="flex items-center justify-between px-5 py-2.5">
                  <span class="text-[15px] font-medium text-white">Autoplay</span>
@@ -134,12 +134,12 @@
        <span class="w-12 text-center" data-duration>0:00</span>
      </div>

-      <button data-skip class="hidden absolute right-6 bottom-24 bg-white text-black font-bold px-4 py-2 text-sm rounded shadow-lg transition-transform hover:scale-105 active:scale-95">Skip</button>
+      <button data-skip class="hidden absolute right-6 bottom-24 bg-white text-black font-bold px-4 py-2 text-sm rounded shadow-soft transition-transform hover:scale-105 active:scale-95">Skip</button>
      <button data-backward class="hidden absolute left-1/4 top-1/2 -translate-y-1/2 -translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0019 16V8a1 1 0 00-1.6-.8l-5.333 4zM4.066 11.2a1 1 0 000 1.6l5.334 4A1 1 0 0011 16V8a1 1 0 00-1.6-.8l-5.334 4z" /></svg></button>
      <button data-forward class="hidden absolute right-1/4 top-1/2 -translate-y-1/2 translate-x-1/2 p-4 bg-black/40 rounded-full text-white opacity-0 transition-opacity"><svg class="size-8" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 005 8v8a1 1 0 001.6.8l5.333-4zM19.933 12.8a1 1 0 000-1.6l-5.333-4A1 1 0 0013 8v8a1 1 0 001.6.8l5.333-4z" /></svg></button>
      
    </div>
  </div>
-  <div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none drop-shadow-md z-30" style="text-shadow: 0px 0px 4px black, 0px 0px 8px black; font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
+  <div data-subtitle-text class="absolute bottom-20 left-0 right-0 text-center pointer-events-none z-30" style="text-shadow: 0px 0px 2px rgba(0,0,0,0.55); font-size: clamp(1rem, 2.5vw, 2rem); font-weight: 600; color: white;"></div>
 </div>
 {{end}}
--- a/templates/components/watchlist_actions.gohtml
+++ b/templates/components/watchlist_actions.gohtml
@@ -21,7 +21,7 @@
      </button>
    </div>

-    <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-2xl left-0 top-full mt-2">
+    <div data-content class="hidden absolute z-50 min-w-[160px] bg-background-button rounded-none shadow-soft ring-1 ring-border left-0 top-full mt-2">
      <div class="flex flex-col py-1">
        <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-foreground/10 focus:bg-foreground/10" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.DisplayTitle}}', this)">
          <span class="font-medium text-sm text-foreground">Watching</span>
--- a/templates/discover.gohtml
+++ b/templates/discover.gohtml
@@ -40,9 +40,9 @@

 <div class="flex flex-col gap-12 pb-12">
  <section class="relative flex flex-col items-center justify-center overflow-hidden bg-background-surface px-6 py-24 text-center ring-1 ring-border">
-    <div class="from-accent/10 absolute inset-0 bg-linear-to-b to-transparent opacity-50"></div>
+    <div class="absolute inset-0 opacity-40" style="background: radial-gradient(60% 60% at 50% 0%, rgba(0,0,0,0.06), transparent 70%);"></div>
    <div class="relative z-10 flex max-w-2xl flex-col items-center gap-6">
-      <h1 class="text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
+      <h1 class="heading-serif text-4xl font-normal tracking-tight text-foreground sm:text-5xl">
        Don't know what to watch?
      </h1>
      <p class="text-lg text-foreground-muted">
@@ -50,10 +50,10 @@
      </p>
      <button
        id="surprise-btn"
-        class="group bg-accent relative inline-flex items-center justify-center gap-2 overflow-hidden rounded-full px-8 py-4 font-medium text-on-accent transition-transform hover:scale-105 active:scale-95 disabled:opacity-70 disabled:hover:scale-100"
+        class="group relative inline-flex items-center justify-center gap-2 overflow-hidden bg-foreground px-7 py-3.5 font-medium text-background transition-colors hover:bg-foreground/90 active:scale-[0.98] disabled:opacity-70"
        onclick="handleSurpriseMe()"
      >
-        <span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-on-accent border-t-transparent"></span>
+        <span id="surprise-spinner" class="hidden h-5 w-5 animate-spin rounded-full border-2 border-background border-t-transparent"></span>
        <svg id="surprise-icon" class="h-5 w-5 transition-transform group-hover:rotate-12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" />
        </svg>
--- a/templates/login.gohtml
+++ b/templates/login.gohtml
@@ -2,7 +2,7 @@
 {{define "content"}}
 <div class="flex min-h-screen items-center justify-center p-4">
  <div class="w-full max-w-md">
-    <h1 class="mb-2 text-3xl font-normal text-foreground">Sign in</h1>
+    <h1 class="heading-serif mb-2 text-3xl font-normal text-foreground">Sign in</h1>
    <p class="text-foreground-muted mb-8">Enter your credentials to continue.</p>

    <form method="POST" action="/login" class="flex flex-col gap-6">
@@ -44,4 +44,4 @@
    {{end}}
  </div>
 </div>
-{{end}}
+{{end}}
--- a/templates/watch.gohtml
+++ b/templates/watch.gohtml
@@ -23,7 +23,7 @@
            <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m6 9 6 6 6-6" /></svg>
          </button>
        </div>
-        <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-2xl right-0 top-full mt-2">
+        <div data-content class="hidden absolute z-50 min-w-40 bg-background-button shadow-soft ring-1 ring-border right-0 top-full mt-2">
          <div class="flex flex-col py-1">
            <button class="flex w-full items-center px-5 py-2.5 transition-colors focus:outline-none hover:bg-surface-hover" onclick="updateWatchlist({{$anime.MalID}}, 'watching', 'Watching', '{{$anime.Title}}', this)">
              <span class="text-sm text-foreground">Watching</span>
@@ -89,7 +89,7 @@
              <svg class="w-4 h-4 text-foreground-muted shrink-0 ml-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
            </button>
          </div>
-          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-2xl border border-border max-h-64 overflow-y-auto scrollbar-hide">
+          <div data-content class="hidden absolute z-50 top-full mt-1 left-0 w-full bg-background-button rounded shadow-soft ring-1 ring-border border border-border max-h-64 overflow-y-auto scrollbar-hide">
            <div class="flex flex-col py-1">
              {{range .Seasons}}
                <a href="/anime/{{.MalID}}/watch" class="px-4 py-2 text-left text-sm {{if .IsCurrent}}text-accent bg-accent/10{{else}}text-foreground-muted hover:bg-surface-hover{{end}} transition-colors">
@@ -124,7 +124,7 @@
                <svg class="w-4 h-4 text-foreground-muted" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" /></svg>
              </button>
            </div>
-            <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button rounded shadow-2xl">
+            <div data-content class="hidden absolute z-50 top-full mt-1 left-0 min-w-50 bg-background-button rounded shadow-soft ring-1 ring-border">
              <div class="flex flex-col py-1">
                {{$ranges := ceilDiv $totalEpisodes 100}}
                {{range $i := seq $ranges}}
--- a/templates/watchlist.gohtml
+++ b/templates/watchlist.gohtml
@@ -2,7 +2,7 @@
 {{define "content"}}
 {{if .WatchlistIDs}}<script>initWatchlist({{.WatchlistIDs}})</script>{{end}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6">
-  <h1 class="text-xl font-normal text-foreground">Watchlist</h1>
+  <h1 class="heading-serif text-xl font-normal text-foreground">Watchlist</h1>

  <div class="flex flex-wrap items-center justify-between gap-4">
    <div class="flex flex-wrap items-center gap-6">
@@ -21,7 +21,7 @@
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
            </button>
          </div>
-          <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-2xl right-0 top-full mt-2 ring-1 ring-border">
+          <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-soft right-0 top-full mt-2 ring-1 ring-border">
            <div class="flex flex-col py-1">
              <button class="flex w-full items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-surface-hover" onclick="setSortBy('date', this)">Date Added</button>
              <button class="flex w-full items-center px-4 py-2 text-sm text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground" onclick="setSortBy('title', this)">Title</button>
@@ -46,7 +46,7 @@
          <div class="absolute inset-0 z-20 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100 pointer-events-none">
            <div class="flex justify-end">
              <button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none pointer-events-auto" aria-label="Remove from Watchlist">
-                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
              </button>
            </div>
          </div>
--- a/templates/watchlist_partial.gohtml
+++ b/templates/watchlist_partial.gohtml
@@ -1,7 +1,7 @@
 {{define "title"}}Watchlist{{end}}
 {{define "content"}}
 <div id="watchlist-content" class="flex w-full flex-col gap-6">
-  <h1 class="text-lg font-normal text-foreground">Watchlist</h1>
+  <h1 class="heading-serif text-lg font-normal text-foreground">Watchlist</h1>

  <div class="flex flex-wrap items-center justify-between gap-4">
    <div class="flex flex-wrap items-center gap-6">
@@ -20,7 +20,7 @@
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 5h20"></path><path d="M6 12h12"></path><path d="M9 19h6"></path></svg>
          </button>
        </div>
-        <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-2xl right-0 top-full mt-2">
+        <div data-content class="hidden absolute z-50 min-w-[150px] bg-background-button rounded-none shadow-soft ring-1 ring-border right-0 top-full mt-2">
          <div class="flex flex-col py-1">
            <button class="flex w-full items-center px-4 py-2 text-sm text-foreground transition-colors hover:bg-surface-hover" onclick="setSortBy('date', this)">Date Added</button>
            <button class="flex w-full items-center px-4 py-2 text-sm text-foreground-muted transition-colors hover:bg-surface-hover hover:text-foreground" onclick="setSortBy('title', this)">Title</button>
@@ -49,7 +49,7 @@
                  <div class="absolute inset-0 z-10 flex flex-col p-3 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
                    <div class="flex justify-end">
                      <button type="button" hx-delete="/api/watchlist/{{.AnimeID}}" hx-target="closest .watchlist-item" hx-swap="delete" hx-on::after-request="if(event.detail.successful) { watchlistIds.delete({{.AnimeID}}) }" class="text-white/70 transition-colors hover:text-white focus:outline-none" aria-label="Remove from Watchlist">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5 shadow-black drop-shadow-md"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
+                        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="size-5"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
                      </button>
                    </div>
                  </div>
@@ -161,4 +161,4 @@
    })
  }
 </script>
-{{end}}
+{{end}}