From ca90fe6147a8a7e2dc327ff640989b302fbad4a3 Mon Sep 17 00:00:00 2001
From: Bhargavi Endla <endlabhargavi11@gmail.com>
Date: Mon, 18 May 2026 11:33:52 +0530
Subject: [PATCH] feat: add vellum-style treatment for auth dialog surfaces

---
 web/src/app/globals.css             | 19 ++++++++++++++++++-
 web/src/app/login/page.tsx          |  2 +-
 web/src/app/signup/page.tsx         |  2 +-
 web/src/components/ui/GlassCard.tsx |  6 +++++-
 4 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 2aa45a2..2197add 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -63,6 +63,23 @@ body {
     box-shadow: 0 8px 32px 0 var(--glass-shadow);
   }
 
+  /*
+   * Vellum Dialog — thin translucent manuscript paper layered over content.
+   * Used for auth cards, modal overlays, and floating dialogs.
+   * Slightly more opaque than ambient glass-card to ensure readability
+   * and visual separation, while preserving the parchment atmosphere.
+   */
+  .vellum-dialog {
+    background: rgba(237, 232, 216, 0.82);
+    backdrop-filter: blur(16px) saturate(1.1);
+    -webkit-backdrop-filter: blur(16px) saturate(1.1);
+    border: 1px solid rgba(74, 80, 51, 0.22);
+    box-shadow:
+      0 2px 0 0 rgba(255, 255, 255, 0.55) inset,
+      0 16px 48px 0 rgba(62, 68, 40, 0.14),
+      0 2px 8px 0 rgba(62, 68, 40, 0.06);
+  }
+
   .glass-border {
     border: 1px solid var(--glass-border);
   }
@@ -87,4 +104,4 @@ body {
   line-height: 1.8;
   font-size: 1.125rem;
   color: #2E3318;
-}
+}
\ No newline at end of file
diff --git a/web/src/app/login/page.tsx b/web/src/app/login/page.tsx
index 9d835b4..0d72589 100644
--- a/web/src/app/login/page.tsx
+++ b/web/src/app/login/page.tsx
@@ -48,7 +48,7 @@ export default function LoginPage() {
 
   return (
     <main className="min-h-screen flex items-center justify-center p-6">
-      <GlassCard className="w-full max-w-md p-8 space-y-6">
+      <GlassCard variant="dialog" className="w-full max-w-md p-8 space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-3xl font-serif font-black italic">Welcome Back</h1>
           <p className="text-sm opacity-60">Sign in to continue to Writers&apos; Pub.</p>
diff --git a/web/src/app/signup/page.tsx b/web/src/app/signup/page.tsx
index 38c33ca..c66551f 100644
--- a/web/src/app/signup/page.tsx
+++ b/web/src/app/signup/page.tsx
@@ -107,7 +107,7 @@ export default function SignupPage() {
 
   return (
     <main className="min-h-screen flex items-center justify-center p-6">
-      <GlassCard className="w-full max-w-md p-8 space-y-6">
+      <GlassCard variant="dialog" className="w-full max-w-md p-8 space-y-6">
         <div className="space-y-2 text-center">
           <h1 className="text-3xl font-serif font-black italic">Create Account</h1>
           <p className="text-sm opacity-60">Choose your role and join the Writers&apos; Pub.</p>
diff --git a/web/src/components/ui/GlassCard.tsx b/web/src/components/ui/GlassCard.tsx
index ab7e8e7..afb4aa7 100644
--- a/web/src/components/ui/GlassCard.tsx
+++ b/web/src/components/ui/GlassCard.tsx
@@ -5,7 +5,7 @@ import { cn } from "@/lib/utils";
 interface GlassCardProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
   className?: string;
-  variant?: "default" | "muted" | "ink";
+  variant?: "default" | "muted" | "ink" | "dialog";
 }
 
 export function GlassCard({ children, className, variant = "default", ...props }: GlassCardProps) {
@@ -13,6 +13,10 @@ export function GlassCard({ children, className, variant = "default", ...props }
     default: "glass-card",
     muted: "bg-[#4a5033]/5 border-[#4a5033]/10 backdrop-blur-md",
     ink: "ink-bg shadow-2xl shadow-[#4a5033]/20",
+    // Vellum-style: thin translucent manuscript paper for dialogs and auth cards.
+    // More opaque than ambient glass-card so floating surfaces read clearly
+    // against any background, maintaining ink-on-parchment contrast.
+    dialog: "vellum-dialog",
   };
 
   return (