feat(theme): introduce retro Windows 98-inspired theme

Add a new "retro" theme option that mimics the classic Windows 98 aesthetic, providing a nostalgic alternative to the modern and classic dark themes. Changes include: - Defining CSS variables for the retro theme in `00-base.css` (pixel fonts, silver/gray colors, and classic window shadows). - Adding custom styling for cards, headers, buttons, and title bars to replicate classic OS windows. - Adding a star background GIF (`stars1.gif`). - Excluding the retro theme from modern "revamp" styles in `15-revamp.css`. - Updating `CLAUDE.md` with instructions on screenshot verification.
2026-05-31 16:17:20 +03:00
parent df91fe9d3d
commit ffe4201f05
13 changed files with 477 additions and 44 deletions
--- a/backend/static/css/00-base.css
+++ b/backend/static/css/00-base.css
@@ -1,10 +1,3 @@
-/*
- * Theme tokens.
- * :root holds the default "revamp" (Aurora glass) theme so the page looks right
- * even before JS runs or when JS is disabled. [data-theme="classic"] restores the
- * original dark-zinc look exactly. The theme attribute is set on <html> by
- * /static/js/05-theme.js from localStorage before first paint.
- */
 :root {
  color-scheme: dark;
  --background: #0b0b16;
@@ -65,6 +58,38 @@
  --surface-2: rgba(39, 39, 42, 0.28);
 }

+:root[data-theme="retro"] {
+  color-scheme: light;
+  --background: #ffffff;
+  --foreground: #000000;
+  --card: #c0c0c0;
+  --card-foreground: #000000;
+  --muted: #c0c0c0;
+  --muted-foreground: #404040;
+  --accent: #000078;
+  --accent-foreground: #ffffff;
+  --border: #000000;
+  --input: #000000;
+  --primary: #000078;
+  --primary-foreground: #ffffff;
+  --primary-hover: #0f80cd;
+  --ring: #000078;
+  --success: #008000;
+  --danger: #c00000;
+  --radius: 0rem;
+  --shadow:
+    inset -1px -1px 0 #404040,
+    inset 1px 1px 0 #ffffff,
+    inset -2px -2px 0 #808080,
+    inset 2px 2px 0 #dfdfdf;
+  --font-sans: "PixeloidSans", "PixelOperator", "Microsoft Sans Serif", Tahoma, sans-serif;
+  --header-bg: #c0c0c0;
+  --body-bg: #000000;
+  --surface-1: #ffffff;
+  --surface-1-hover: #fffff0;
+  --surface-2: #c0c0c0;
+}
+
 * {
  box-sizing: border-box;
 }
--- a/backend/static/css/15-revamp.css
+++ b/backend/static/css/15-revamp.css
@@ -2,19 +2,19 @@
 * Revamp ("Aurora glass") flourishes.
 *
 * These rules only apply to the default/revamp theme. They are scoped to
- * :root:not([data-theme="classic"]) so they cover both the explicit
+ * :root:not([data-theme="classic"]):not([data-theme="retro"]) so they cover both the explicit
 * data-theme="revamp" attribute AND the no-JS default (no attribute), while
 * never touching the classic theme. Token colours live in 00-base.css; this
 * file adds the things a flat token swap can't: the animated aurora backdrop,
 * frosted glass, gradient accents, glow and motion.
 */

-:root:not([data-theme="classic"]) {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) {
  scroll-behavior: smooth;
 }

 /* Animated aurora backdrop ------------------------------------------------ */
-:root:not([data-theme="classic"]) body::before {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
@@ -29,7 +29,7 @@
  animation: aurora-drift 26s ease-in-out infinite alternate;
 }

-:root:not([data-theme="classic"]) body::after {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) body::after {
  content: "";
  position: fixed;
  inset: 0;
@@ -52,13 +52,13 @@
 }

@media (prefers-reduced-motion: reduce) {
-  :root:not([data-theme="classic"]) body::before {
+  :root:not([data-theme="classic"]):not([data-theme="retro"]) body::before {
    animation: none;
  }
 }

 /* Frosted glass cards ----------------------------------------------------- */
-:root:not([data-theme="classic"]) .card {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .card {
  background: linear-gradient(
    155deg,
    color-mix(in srgb, var(--card) 78%, transparent),
@@ -70,20 +70,20 @@
 }

 /* Sticky header gets the same glassy treatment */
-:root:not([data-theme="classic"]) .site-header {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .site-header {
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
 }

 /* Brand mark glows */
-:root:not([data-theme="classic"]) .brand-mark {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .brand-mark {
  background: linear-gradient(135deg, #8b5cf6, #6366f1 55%, #22d3ee);
  color: #fff;
  box-shadow: 0 6px 18px rgba(124, 58, 237, 0.45);
 }

 /* Headings get a soft gradient sheen */
-:root:not([data-theme="classic"]) h1 {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) h1 {
  background: linear-gradient(120deg, #f5f3ff 0%, #c4b5fd 60%, #67e8f9 100%);
  -webkit-background-clip: text;
  background-clip: text;
@@ -91,8 +91,8 @@
 }

 /* Gradient primary buttons ------------------------------------------------ */
-:root:not([data-theme="classic"]) .button-primary,
-:root:not([data-theme="classic"]) .button.is-active {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-primary,
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button.is-active {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #22d3ee 130%);
  color: #fff;
  border-color: transparent;
@@ -100,43 +100,43 @@
  transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease;
 }

-:root:not([data-theme="classic"]) .button-primary:hover {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-primary:hover {
  background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 55%, #22d3ee 130%);
  filter: brightness(1.08);
  box-shadow: 0 12px 30px rgba(99, 102, 241, 0.5);
  transform: translateY(-1px);
 }

-:root:not([data-theme="classic"]) .button-primary:active {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-primary:active {
  transform: translateY(0);
 }

 /* Outline / ghost buttons get a subtle lift on hover */
-:root:not([data-theme="classic"]) .button-outline,
-:root:not([data-theme="classic"]) .button-ghost {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-outline,
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-ghost {
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
 }

-:root:not([data-theme="classic"]) .button-outline:hover,
-:root:not([data-theme="classic"]) .button-ghost:hover {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-outline:hover,
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .button-ghost:hover {
  border-color: rgba(168, 150, 255, 0.4);
  transform: translateY(-1px);
 }

 /* Glow focus rings -------------------------------------------------------- */
-:root:not([data-theme="classic"]) :focus-visible {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) :focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring), 0 0 16px rgba(167, 139, 250, 0.55);
 }

-:root:not([data-theme="classic"]) input:focus,
-:root:not([data-theme="classic"]) select:focus {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) input:focus,
+:root:not([data-theme="classic"]):not([data-theme="retro"]) select:focus {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.22);
 }

 /* Drop zone: animated, glowing -------------------------------------------- */
-:root:not([data-theme="classic"]) .drop-zone {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone {
  border-color: rgba(168, 150, 255, 0.3);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(139, 92, 246, 0.1), transparent 70%),
@@ -144,18 +144,18 @@
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease, box-shadow 180ms ease;
 }

-:root:not([data-theme="classic"]) .drop-zone:hover,
-:root:not([data-theme="classic"]) .drop-zone.is-dragging {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone:hover,
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone.is-dragging {
  border-color: #a78bfa;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, 0.4), 0 18px 50px rgba(99, 102, 241, 0.28);
  transform: translateY(-2px);
 }

-:root:not([data-theme="classic"]) .drop-icon {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-icon {
  color: #c4b5fd;
 }

-:root:not([data-theme="classic"]) .drop-zone.is-dragging .drop-icon {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .drop-zone.is-dragging .drop-icon {
  animation: drop-bounce 700ms ease infinite;
 }

@@ -165,34 +165,34 @@
 }

 /* Badges pick up a tinted glass look */
-:root:not([data-theme="classic"]) .badge {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .badge {
  background: rgba(139, 92, 246, 0.14);
  color: #d6ccff;
  border: 1px solid rgba(168, 150, 255, 0.22);
 }

 /* File / result rows lift on hover */
-:root:not([data-theme="classic"]) .download-item,
-:root:not([data-theme="classic"]) .result-item {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .download-item,
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .result-item {
  background: color-mix(in srgb, var(--card) 60%, transparent);
  border-color: rgba(168, 150, 255, 0.14);
  transition: border-color 140ms ease, transform 140ms ease, background 140ms ease;
 }

-:root:not([data-theme="classic"]) .download-item:hover {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .download-item:hover {
  border-color: rgba(168, 150, 255, 0.34);
  transform: translateY(-1px);
 }

 /* Thumbnails on the download page */
-:root:not([data-theme="classic"]) .file-emblem {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) .file-emblem {
  background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(34, 211, 238, 0.18));
  color: #d6ccff;
  border: 1px solid rgba(168, 150, 255, 0.22);
 }

 /* Gentle entrance for primary content cards */
-:root:not([data-theme="classic"]) main > * {
+:root:not([data-theme="classic"]):not([data-theme="retro"]) main > * {
  animation: rise-in 420ms ease both;
 }

@@ -208,7 +208,7 @@
 }

@media (prefers-reduced-motion: reduce) {
-  :root:not([data-theme="classic"]) main > * {
+  :root:not([data-theme="classic"]):not([data-theme="retro"]) main > * {
    animation: none;
  }
 }
--- a/backend/static/css/16-retro.css
+++ b/backend/static/css/16-retro.css
@@ -0,0 +1,393 @@
+/*
+ * "retro" theme flourishes — modelled on danlegt.com.
+ *
+ * Windows 98 chrome over a black pixel-star desktop, PixeloidSans pixel font,
+ * crisp (non-antialiased, pixelated) rendering. Scoped entirely to
+ * :root[data-theme="retro"] so it never touches the other themes.
+ *
+ * CSP-safe: external stylesheet + self-hosted fonts only (font-src 'self'),
+ * no inline styles, no remote assets. The starfield is pure CSS so we don't
+ * depend on img-src for a background gif.
+ */
+
+/* Self-hosted pixel fonts (mirrored locally — GGBotNet PixeloidSans is free,
+   PixelOperator is CC0). ------------------------------------------------- */
+@font-face {
+  font-family: "PixeloidSans";
+  src: url("/static/fonts/pixeloid_sans/PixeloidSans.ttf") format("truetype");
+  font-weight: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "PixeloidSans";
+  src: url("/static/fonts/pixeloid_sans/PixeloidSans-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-display: swap;
+}
+@font-face {
+  font-family: "PixelOperatorMono";
+  src: url("/static/fonts/pixel_operator/PixelOperatorMono.ttf") format("truetype");
+  font-weight: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "PixelOperatorMono";
+  src: url("/static/fonts/pixel_operator/PixelOperatorMono-Bold.ttf") format("truetype");
+  font-weight: bold;
+  font-display: swap;
+}
+
+/* Crisp, pixelated, non-smoothed rendering like the source site. */
+:root[data-theme="retro"] {
+  font-smooth: never;
+  -webkit-font-smoothing: none;
+  -moz-osx-font-smoothing: unset;
+}
+
+:root[data-theme="retro"] img,
+:root[data-theme="retro"] .thumb-link img,
+:root[data-theme="retro"] .preview-stage img {
+  image-rendering: pixelated;
+}
+
+/* Square everything — Win98 had no rounded corners. */
+:root[data-theme="retro"] *,
+:root[data-theme="retro"] *::before,
+:root[data-theme="retro"] *::after {
+  border-radius: 0 !important;
+}
+
+/* Black desktop with the tiled starfield mirrored from danlegt.com. */
+:root[data-theme="retro"] body {
+  background-color: #000000;
+  background-image: url("/static/backgrounds/stars1.gif");
+  background-repeat: repeat;
+  background-attachment: fixed;
+  image-rendering: pixelated;
+}
+
+/* Selection + focus use the classic dotted/navy treatment. */
+:root[data-theme="retro"] ::selection {
+  background: #000078;
+  color: #ffffff;
+}
+
+:root[data-theme="retro"] :focus-visible {
+  outline: 1px dotted #000000;
+  outline-offset: -4px;
+}
+
+/* Header: thin flat silver toolbar with a bottom bevel. */
+:root[data-theme="retro"] .site-header {
+  background: #c0c0c0;
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+  border-bottom: 2px solid #404040;
+  box-shadow: inset 0 1px 0 #ffffff;
+}
+
+:root[data-theme="retro"] .nav {
+  min-height: 2.1rem;
+}
+
+:root[data-theme="retro"] .site-header .button {
+  min-height: 1.6rem;
+  padding: 0.15rem 0.6rem;
+}
+
+:root[data-theme="retro"] .brand {
+  color: #000000;
+  font-size: 0.95rem;
+}
+
+:root[data-theme="retro"] .brand-mark {
+  width: 1.4rem;
+  height: 1.4rem;
+  background: linear-gradient(90deg, #000078, 80%, #0f80cd);
+  color: #ffffff;
+  font-size: 0.75rem;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #6f6fff;
+}
+
+/* Cards are raised silver windows with black text. */
+:root[data-theme="retro"] .card {
+  background: linear-gradient(to bottom, #ffffff, 4%, #c0c0c0 8%);
+  background-color: #c0c0c0;
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: var(--shadow);
+  backdrop-filter: none;
+  -webkit-backdrop-filter: none;
+}
+
+/* Headings become Win98 active title bars. */
+:root[data-theme="retro"] h1 {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin: -0.35rem -0.35rem 1rem;
+  padding: 0.35rem 0.5rem;
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0;
+  text-shadow: none;
+}
+
+/* Fake window control button on the right of every title bar. */
+:root[data-theme="retro"] h1::after {
+  content: "✕";
+  display: grid;
+  place-items: center;
+  width: 1.15rem;
+  height: 1rem;
+  background: #c0c0c0;
+  color: #000000;
+  font-size: 0.7rem;
+  font-weight: 700;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+}
+
+/* Links: classic blue, underlined, purple when visited. */
+:root[data-theme="retro"] a:not(.button):not(.brand) {
+  color: #0000ee;
+  text-decoration: underline;
+}
+
+:root[data-theme="retro"] a:not(.button):not(.brand):visited {
+  color: #551a8b;
+}
+
+:root[data-theme="retro"] a:not(.button):not(.brand):hover {
+  color: #ee0000;
+}
+
+/* Buttons: grey beveled chunks that press in when active. */
+:root[data-theme="retro"] .button,
+:root[data-theme="retro"] button {
+  background: #c0c0c0;
+  color: #000000;
+  border: 1px solid #000000;
+  font-weight: 700;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #ffffff, inset -2px -2px 0 #808080, inset 2px 2px 0 #dfdfdf;
+}
+
+:root[data-theme="retro"] .button:hover,
+:root[data-theme="retro"] button:hover {
+  background: #d4d0c8;
+}
+
+:root[data-theme="retro"] .button:active,
+:root[data-theme="retro"] button:active,
+:root[data-theme="retro"] .button.is-active {
+  background: #c0c0c0;
+  box-shadow: inset 1px 1px 0 #404040, inset -1px -1px 0 #ffffff, inset 2px 2px 0 #808080, inset -2px -2px 0 #dfdfdf;
+  padding-top: calc(0.45rem + 1px);
+  padding-left: calc(0.85rem + 1px);
+}
+
+/* The primary call-to-action gets the blue title-bar gradient. */
+:root[data-theme="retro"] .button-primary {
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  color: #ffffff;
+}
+
+:root[data-theme="retro"] .button-primary:hover {
+  background: linear-gradient(to right, #0a0a9a, 80%, #1a90dd);
+}
+
+:root[data-theme="retro"] .button-danger {
+  background: #c0c0c0;
+  color: #c00000;
+  border-color: #000000;
+}
+
+/* Inputs and selects look sunken (inset bevel). */
+:root[data-theme="retro"] input,
+:root[data-theme="retro"] select,
+:root[data-theme="retro"] textarea {
+  background: #ffffff;
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px 0 #808080, inset -1px -1px 0 #ffffff;
+}
+
+:root[data-theme="retro"] input:focus,
+:root[data-theme="retro"] select:focus {
+  outline: 1px dotted #000000;
+  outline-offset: -3px;
+}
+
+/* Labels inside windows read black, not muted-grey-on-grey. */
+:root[data-theme="retro"] label span,
+:root[data-theme="retro"] .stack-form label,
+:root[data-theme="retro"] .form-footer p,
+:root[data-theme="retro"] .drop-copy,
+:root[data-theme="retro"] .drop-meta,
+:root[data-theme="retro"] .upload-subtitle,
+:root[data-theme="retro"] .download-subtitle,
+:root[data-theme="retro"] .muted-copy,
+:root[data-theme="retro"] .kicker,
+:root[data-theme="retro"] .checkbox-field span {
+  color: #1a1a1a;
+}
+
+/* Desktop-level text (outside the grey windows) reads light on the black sky. */
+:root[data-theme="retro"] .docs-header,
+:root[data-theme="retro"] .docs-header p,
+:root[data-theme="retro"] .docs-header .kicker {
+  color: #cfd8ff;
+}
+
+:root[data-theme="retro"] .docs-header code {
+  color: #ffffff;
+}
+
+/* Drop zone: a sunken white field with a dashed navy border. */
+:root[data-theme="retro"] .drop-zone {
+  background: #ffffff;
+  border: 2px dashed #000078;
+  box-shadow: inset 2px 2px 0 #808080, inset -2px -2px 0 #ffffff;
+}
+
+:root[data-theme="retro"] .drop-zone:hover,
+:root[data-theme="retro"] .drop-zone.is-dragging {
+  background: #fffff0;
+  border-color: #0f80cd;
+}
+
+:root[data-theme="retro"] .drop-icon {
+  color: #000078;
+}
+
+/* The hero "Welcome" badge becomes a high-contrast blinking pixel sticker
+   that sits on the black desktop above the window. */
+:root[data-theme="retro"] .hero-eyebrow {
+  background: linear-gradient(to right, #000078, 80%, #0f80cd);
+  border: 1px solid #000000;
+  color: #ffffff;
+  font-weight: 700;
+  text-transform: uppercase;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #6f6fff;
+}
+
+:root[data-theme="retro"] .hero-eyebrow::before {
+  content: "★ ";
+  color: #ffff66;
+  animation: retro-blink 1.1s steps(1, end) infinite;
+}
+
+:root[data-theme="retro"] .hero-eyebrow::after {
+  content: " ★";
+  color: #ffff66;
+  animation: retro-blink 1.1s steps(1, end) 0.55s infinite;
+}
+
+@keyframes retro-blink {
+  50% { opacity: 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root[data-theme="retro"] .hero-eyebrow::before,
+  :root[data-theme="retro"] .hero-eyebrow::after {
+    animation: none;
+  }
+}
+
+/* Badges become square chips. */
+:root[data-theme="retro"] .badge {
+  background: #ffffff;
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px 0 #808080;
+}
+
+/* File / result rows: flat white with a sunken hairline. */
+:root[data-theme="retro"] .download-item,
+:root[data-theme="retro"] .result-item {
+  background: #ffffff;
+  color: #000000;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px 0 #dfdfdf, inset -1px -1px 0 #808080;
+}
+
+:root[data-theme="retro"] .file-main,
+:root[data-theme="retro"] .download-item small,
+:root[data-theme="retro"] .result-item code {
+  color: #000000;
+}
+
+:root[data-theme="retro"] .file-emblem {
+  background: #000078;
+  color: #ffffff;
+  border: 1px solid #000000;
+  box-shadow: inset -1px -1px 0 #404040, inset 1px 1px 0 #4a4aff;
+}
+
+/* Code blocks use the pixel mono font. */
+:root[data-theme="retro"] code,
+:root[data-theme="retro"] pre,
+:root[data-theme="retro"] pre code {
+  font-family: "PixelOperatorMono", ui-monospace, monospace;
+  color: #000000;
+}
+
+:root[data-theme="retro"] pre {
+  background: #ffffff;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px 0 #808080;
+}
+
+/* Progress bar: blocky segmented Win98 look. */
+:root[data-theme="retro"] .progress {
+  background: #ffffff;
+  border: 1px solid #000000;
+  box-shadow: inset 1px 1px 0 #808080;
+}
+
+:root[data-theme="retro"] .progress span {
+  background: repeating-linear-gradient(90deg, #000078 0 8px, transparent 8px 10px), #0f80cd;
+}
+
+/* Chunky retro scrollbars (WebKit/Blink). */
+:root[data-theme="retro"] ::-webkit-scrollbar {
+  width: 16px;
+  height: 16px;
+}
+
+:root[data-theme="retro"] ::-webkit-scrollbar-track {
+  background: #dfdfdf;
+}
+
+:root[data-theme="retro"] ::-webkit-scrollbar-thumb {
+  background: #c0c0c0;
+  border: 1px solid #000000;
+  box-shadow: inset -1px -1px 0 #808080, inset 1px 1px 0 #ffffff;
+}
+
+/* Footer sits on the black desktop: white pixel text + a wink to the old web. */
+:root[data-theme="retro"] .site-footer {
+  color: #ffffff;
+}
+
+:root[data-theme="retro"] .site-footer a,
+:root[data-theme="retro"] .footer-links a:not(.button) {
+  color: #66ccff;
+}
+
+:root[data-theme="retro"] .theme-picker > span {
+  color: #ffffff;
+}
+
+:root[data-theme="retro"] .site-footer::after {
+  content: "✩ Best viewed in 1024×768 ✩";
+  font-weight: 700;
+}
+
+@media (max-width: 720px) {
+  :root[data-theme="retro"] .site-footer::after {
+    display: none;
+  }
+}
--- a/backend/static/css/20-upload.css
+++ b/backend/static/css/20-upload.css
@@ -29,6 +29,13 @@
 }


+.upload-subtitle {
+  margin: 0.35rem 0 1.25rem;
+  color: var(--muted-foreground);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
 .drop-zone {
  min-height: 19rem;
  display: grid;