style(web): refine aesthetic to archival precision, remove generic gradients and glowing blobs

apps/web/app/components/PdfExportView.tsx

@@ -20,8 +20,6 @@ import {
   Copy,
   Check,
   ArrowLeft,
-  Filter,
-  ListOrdered,
   BookOpen,
 } from "lucide-react";
 
@@ -124,20 +122,20 @@ export default function PdfExportView({
   return (
     <div className="pb-16 print:pb-0">
       {/* Export Control Toolbar (Screen Only — Hidden in Print) */}
-      <aside className="no-print export-toolbar sticky top-16 z-30 mb-8 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-2xl p-5 shadow-md">
+      <aside className="no-print export-toolbar sticky top-16 z-30 mb-8 bg-[var(--bg-surface)] border border-[var(--border-color)] rounded-xl p-4 sm:p-5 shadow-xs">
         <div className="flex flex-col lg:flex-row lg:items-center justify-between gap-4">
           {/* Left info & Back button */}
-          <div className="flex items-center gap-3.5">
+          <div className="flex items-center gap-3">
             <Link
               href={backHref}
-              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] hover:border-[var(--brand)] rounded-xl text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-all shadow-xs"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] rounded-md text-[var(--text-secondary)] hover:text-[var(--text-primary)] transition-colors shadow-xs"
             >
               <ArrowLeft className="w-3.5 h-3.5" />
               <span>Back</span>
             </Link>
             <div>
               <div className="flex items-center gap-2">
-                <span className="text-xs font-mono text-[var(--brand)] dark:text-[var(--accent)] font-bold uppercase">
+                <span className="text-xs font-mono text-[var(--text-primary)] font-bold uppercase">
                   {sectionMeta.label}
                 </span>
                 <span className="text-xs text-[var(--text-dim)]">·</span>
@@ -158,7 +156,7 @@ export default function PdfExportView({
             <button
               onClick={handleCopyMarkdown}
               type="button"
-              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-xl transition-all shadow-xs cursor-pointer"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer"
               title="Copy compiled markdown document"
             >
               {copiedMd ? (
@@ -169,7 +167,7 @@ export default function PdfExportView({
               ) : (
                 <>
                   <Copy className="w-3.5 h-3.5" />
-                  <span>Copy Markdown</span>
+                  <span>Copy MD</span>
                 </>
               )}
             </button>
@@ -178,7 +176,7 @@ export default function PdfExportView({
             <button
               onClick={handleDownloadMarkdown}
               type="button"
-              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-xl transition-all shadow-xs cursor-pointer"
+              className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-semibold bg-[var(--bg-elevated)] hover:bg-[var(--bg-elevated-hover)] border border-[var(--border-color)] text-[var(--text-secondary)] hover:text-[var(--text-primary)] rounded-md transition-colors shadow-xs cursor-pointer"
               title="Download compiled .md file"
             >
               <FileDown className="w-3.5 h-3.5" />
@@ -189,24 +187,24 @@ export default function PdfExportView({
             <button
               onClick={handlePrint}
               type="button"
-              className="inline-flex items-center gap-2 px-4 py-2 text-xs font-bold bg-slate-900 hover:bg-slate-800 dark:bg-white dark:hover:bg-slate-100 text-white dark:text-slate-900 rounded-xl shadow-md transition-all cursor-pointer hover:shadow-lg"
+              className="inline-flex items-center gap-2 px-3.5 py-1.5 text-xs font-bold bg-[var(--brand)] hover:opacity-90 text-[var(--brand-fg)] rounded-md shadow-xs transition-all cursor-pointer"
               title="Open browser print dialog to save as PDF"
             >
               <Printer className="w-4 h-4" />
-              <span>Print / Save as PDF</span>
+              <span>Print / Save PDF</span>
             </button>
           </div>
         </div>
 
         {/* Options & Filters Bar */}
-        <div className="mt-4 pt-3.5 border-t border-[var(--border-color)] flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
+        <div className="mt-3.5 pt-3 border-t border-[var(--border-color)] flex flex-col sm:flex-row sm:items-center justify-between gap-3 text-xs">
           {/* Sort Order Selector */}
           <div className="flex items-center gap-2">
-            <span className="text-[var(--text-muted)] font-medium font-mono text-[11px] uppercase">Sort by:</span>
+            <span className="text-[var(--text-muted)] font-mono text-[10px] uppercase">Sort:</span>
             <select
               value={sortBy}
               onChange={(e) => setSortBy(e.target.value as ExportSortOption)}
-              className="bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded-lg px-3 py-1 text-xs text-[var(--text-primary)] focus:outline-none focus:border-[var(--brand)]"
+              className="bg-[var(--bg-elevated)] border border-[var(--border-color)] rounded px-2.5 py-1 text-xs text-[var(--text-primary)] focus:outline-none"
             >
               <option value="category_points">Category & Points (Standard)</option>
               <option value="points_desc">Points (Highest First)</option>
@@ -225,7 +223,7 @@ export default function PdfExportView({
                   type="checkbox"
                   checked={showTOC}
                   onChange={(e) => setShowTOC(e.target.checked)}
-                  className="rounded border-[var(--border-color)] text-indigo-600"
+                  className="rounded border-[var(--border-color)]"
                 />
                 <span>Table of Contents</span>
               </label>
@@ -236,7 +234,7 @@ export default function PdfExportView({
                 type="checkbox"
                 checked={pageBreaks}
                 onChange={(e) => setPageBreaks(e.target.checked)}
-                className="rounded border-[var(--border-color)] text-indigo-600"
+                className="rounded border-[var(--border-color)]"
               />
               <span>Page Break per Challenge</span>
             </label>
@@ -246,13 +244,13 @@ export default function PdfExportView({
         {/* Category filter pills */}
         {allCategories.length > 1 && (
           <div className="mt-3 pt-3 border-t border-[var(--border-color)] flex items-center gap-1.5 flex-wrap text-xs">
-            <span className="text-[var(--text-muted)] font-mono text-[11px] uppercase mr-1">Filter:</span>
+            <span className="text-[var(--text-muted)] font-mono text-[10px] uppercase mr-1">Filter:</span>
             <button
               onClick={() => setSelectedCategory("all")}
               type="button"
-              className={`px-3 py-1 rounded-lg text-xs font-mono transition-all cursor-pointer ${
+              className={`px-2.5 py-0.5 rounded text-xs font-mono transition-all cursor-pointer ${
                 selectedCategory === "all"
-                  ? "bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold"
+                  ? "bg-[var(--brand)] text-[var(--brand-fg)] font-bold"
                   : "bg-[var(--bg-elevated)] text-[var(--text-muted)] hover:text-[var(--text-primary)] border border-[var(--border-color)]"
               }`}
             >
@@ -267,9 +265,9 @@ export default function PdfExportView({
                   key={cat}
                   onClick={() => setSelectedCategory(cat)}
                   type="button"
-                  className={`px-3 py-1 rounded-lg text-xs font-mono transition-all cursor-pointer ${
+                  className={`px-2.5 py-0.5 rounded text-xs font-mono transition-all cursor-pointer ${
                     selectedCategory.toLowerCase() === cat.toLowerCase()
-                      ? "bg-slate-900 dark:bg-white text-white dark:text-slate-900 font-bold"
+                      ? "bg-[var(--brand)] text-[var(--brand-fg)] font-bold"
                       : "bg-[var(--bg-elevated)] text-[var(--text-muted)] hover:text-[var(--text-primary)] border border-[var(--border-color)]"
                   }`}
                 >
@@ -282,7 +280,7 @@ export default function PdfExportView({
       </aside>
 
       {/* Writeup Document Flow */}
-      <main className="print-container bg-white text-slate-900 max-w-4xl mx-auto px-4 sm:px-8 py-6 print:p-0 print:max-w-none rounded-2xl border border-[var(--border-color)] print:border-none shadow-sm print:shadow-none">
+      <main className="print-container bg-white text-slate-900 max-w-4xl mx-auto px-4 sm:px-8 py-6 print:p-0 print:max-w-none rounded-xl border border-[var(--border-color)] print:border-none shadow-xs print:shadow-none">
         {/* Document Header */}
         <header className="mb-8 pb-4 border-b border-slate-300">
           <h1 className="text-3xl sm:text-4xl font-extrabold text-slate-950 tracking-tight mb-2">
@@ -300,8 +298,8 @@ export default function PdfExportView({
         {/* Table of Contents */}
         {showTOC && filteredAndSortedDocs.length > 1 && (
           <section className="toc-section mb-10 pb-6 border-b border-slate-200">
-            <h2 className="text-sm font-bold uppercase font-mono text-slate-700 mb-3 tracking-wider flex items-center gap-1.5">
-              <BookOpen className="w-4 h-4" />
+            <h2 className="text-xs font-bold uppercase font-mono text-slate-700 mb-3 tracking-wider flex items-center gap-1.5">
+              <BookOpen className="w-3.5 h-3.5" />
               <span>Table of Contents</span>
             </h2>
             <ol className="list-decimal list-inside space-y-1.5 text-xs text-slate-800">
@@ -327,7 +325,7 @@ export default function PdfExportView({
           </section>
         )}
 
-        {/* Challenges / Writeups Flow */}
+        {/* Challenges Flow */}
         <div className="challenges-flow space-y-10 print:space-y-0">
           {filteredAndSortedDocs.map((doc, idx) => {
             const chNum = idx + 1;