From 5e5c6d5837ef296a7ccff3cad8da442d447beea4 Mon Sep 17 00:00:00 2001
From: Joshua Laymon <joshlaymon@icloud.com>
Date: Sun, 7 Sep 2025 18:10:02 +0000
Subject: [PATCH] Add web/static/themes/arcade.css

---
 web/static/themes/arcade.css | 415 +++++++++++++++++++++++++++++++++++
 1 file changed, 415 insertions(+)
 create mode 100644 web/static/themes/arcade.css

diff --git a/web/static/themes/arcade.css b/web/static/themes/arcade.css
new file mode 100644
index 0000000..5bfe066
--- /dev/null
+++ b/web/static/themes/arcade.css
@@ -0,0 +1,415 @@
+/* ===============================
+   Arcade — 80s Side-Scroller
+   =============================== */
+
+/* Optional pixel fonts (load externally if you like):
+   - "Press Start 2P", "VT323", "Pixelify Sans"
+   This theme will fall back to monospace if those aren’t present.
+*/
+
+html[data-theme="arcade"] {
+  /* Core palette */
+  --arc-ink:           #dff5ff;   /* UI text on dark */
+  --arc-ink-muted:     #9bd0e7;
+  --arc-ink-strong:    #ffffff;
+
+  --arc-face:          #0a1630;   /* panels/cards dark navy */
+  --arc-elev:          #0f1f45;   /* elevated */
+  --arc-border:        #1c3b77;
+  --arc-shadow:        rgba(0,0,0,.45);
+
+  /* Accent pixels */
+  --arc-accent:        #1de1ff;   /* cyan */
+  --arc-accent-600:    #10b6d1;   /* cyan hover */
+  --arc-accent-200:    #7ee9ff;
+
+  /* Status */
+  --arc-success:       #22d36f;
+  --arc-warning:       #f4c542;
+  --arc-danger:        #ff4d6d;
+  --arc-info:          #5ea1ff;
+
+  /* Buttons / geometry */
+  --arc-radius:        10px;
+  --arc-chip-radius:   999px;
+
+  /* Pixel borders (fake 1px “CRT” bevel) */
+  --px-light:          rgba(255,255,255,.22);
+  --px-dark:           rgba(0,0,0,.6);
+
+  /* Topbar */
+  --arc-bar:           #08102a;
+  --arc-bar-ink:       #e6f8ff;
+}
+
+/* Base + Animated Background
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] body{
+  min-height:100vh;
+  color:var(--arc-ink);
+  background:#07132a;
+  font-family: "Press Start 2P","Pixelify Sans","VT323","SFMono-Regular",
+               Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+  letter-spacing:.2px;
+  position:relative;
+  overflow-x:hidden; /* prevent any horizontal jiggle */
+}
+
+/* Parallax stars + floating orbs + moving ground.
+   All CSS-only; no images. */
+html[data-theme="arcade"] body::before,
+html[data-theme="arcade"] body::after{
+  content:"";
+  position:fixed;
+  inset:0;
+  pointer-events:none;
+  z-index:-1;
+}
+
+/* Stars layer */
+html[data-theme="arcade"] body::before{
+  background:
+    radial-gradient(2px 2px at 20% 30%, #ffffff 60%, transparent 61%) repeat,
+    radial-gradient(2px 2px at 70% 60%, #a4ffff 60%, transparent 61%) repeat,
+    radial-gradient(1px 1px at 40% 80%, #d0f0ff 60%, transparent 61%) repeat;
+  background-size: 200px 200px, 260px 260px, 180px 180px;
+  animation: arc-stars 60s linear infinite;
+  opacity:.55;
+}
+
+/* Platforms / ground + orbs */
+html[data-theme="arcade"] body::after{
+  background:
+    /* orbs/coins */
+    radial-gradient(14px 14px at 15% 25%, #ffdf57 35%, #ff9a3d 36% 55%, transparent 56%) ,
+    radial-gradient(10px 10px at 65% 35%, #ff8bd6 35%, #e24da8 36% 55%, transparent 56%) ,
+    radial-gradient(12px 12px at 80% 70%, #85f766 35%, #2ed158 36% 55%, transparent 56%) ,
+    /* floating platforms (grass on stone) */
+    linear-gradient(#2f5836, #214527) 0 72%, /* top edge */
+    repeating-linear-gradient(
+      #223a7a 0 16px,
+      #1d2f62 16px 32px
+    ),
+    /* ground stripe bottom */
+    linear-gradient(#0b1a40, #0b1a40) 0 100%;
+  background-repeat: no-repeat, no-repeat, no-repeat, repeat-x, repeat, repeat-x;
+  background-size:
+    28px 28px, 22px 22px, 24px 24px,
+    100% 10px,
+    100% 100%,
+    100% 8px;
+  background-position:
+    10% 26%, 68% 38%, 82% 72%,
+    0 60%,
+    0 0,
+    0 100%;
+  animation: arc-floating 14s ease-in-out infinite alternate,
+             arc-ground 40s linear infinite;
+  opacity:.9;
+}
+
+/* Respect prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce){
+  html[data-theme="arcade"] body::before,
+  html[data-theme="arcade"] body::after{
+    animation: none !important;
+  }
+}
+
+/* Starfield gentle drift */
+@keyframes arc-stars{
+  0%   { background-position: 0 0, 0 0, 0 0; }
+  100% { background-position: -400px -200px, -320px -160px, -280px -240px; }
+}
+
+/* Platforms/orbs bobbing */
+@keyframes arc-floating{
+  0%   { background-position: 10% 27%, 68% 37%, 82% 71%, 0 60%, 0 0, 0 100%; }
+  100% { background-position: 12% 24%, 70% 39%, 80% 74%, 0 61.5%, 0 0, 0 100%; }
+}
+
+/* Slow “ground scroll” illusion */
+@keyframes arc-ground{
+  0%   { background-position: 10% 26%, 68% 38%, 82% 72%,
+          0 60%, 0 0, 0 100%; }
+  100% { background-position: 10% 26%, 68% 38%, 82% 72%,
+          -800px 60%, 0 0, -1200px 100%; }
+}
+
+/* Selection highlight */
+html[data-theme="arcade"] ::selection{
+  background: rgba(29,225,255,.35);
+  color:#fff;
+}
+
+/* Top bar
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .topbar-wrap{
+  background: linear-gradient(180deg, var(--arc-bar) 0%, #0a1a3a 100%);
+  border-bottom: 1px solid #0f2e66;
+  box-shadow: 0 8px 26px rgba(0,0,0,.45);
+}
+html[data-theme="arcade"] .brand-title,
+html[data-theme="arcade"] .brand .tagline,
+html[data-theme="arcade"] .version-link{
+  color: var(--arc-bar-ink) !important;
+}
+
+/* Pixel buttons on the topbar (Find/Create/Insights) */
+html[data-theme="arcade"] .topbar .nav-btn,
+html[data-theme="arcade"] .topbar .btn,
+html[data-theme="arcade"] .topbar .btn-success{
+  display:inline-flex !important;
+  align-items:center !important;
+  justify-content:center !important;
+  height:36px !important;
+  padding:6px 14px !important;
+  box-sizing:border-box !important;
+
+  color:#e6fbff !important;
+  background: #0b254e !important;
+  border: 2px solid #2f6bd4 !important;
+  border-radius: 6px !important;
+  box-shadow:
+    0 0 0 2px #071a3a inset,
+    0 2px 0 0 rgba(0,0,0,.45);
+  text-shadow: 0 1px 0 rgba(0,0,0,.6);
+}
+html[data-theme="arcade"] .topbar .nav-btn:hover,
+html[data-theme="arcade"] .topbar .btn:hover{
+  background:#113066 !important;
+  border-color:#4b89ff !important;
+}
+html[data-theme="arcade"] .topbar .user-chip{
+  background:#113066 !important;
+  border-color:#3a79ef !important;
+  color:#e6fbff !important;
+  border-radius:999px !important;
+}
+
+/* Cards / Panels
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .card,
+html[data-theme="arcade"] .result-card,
+html[data-theme="arcade"] .search-form,
+html[data-theme="arcade"] .form-card,
+html[data-theme="arcade"] .user-menu,
+html[data-theme="arcade"] .mobile-menu-inner{
+  background: linear-gradient(180deg, var(--arc-face) 0%, #0b1d42 100%);
+  border: 1px solid var(--arc-border);
+  color: var(--arc-ink);
+  border-radius: var(--arc-radius);
+  box-shadow: 0 14px 28px var(--arc-shadow);
+}
+
+/* Section headings & muted text */
+html[data-theme="arcade"] .page-title,
+html[data-theme="arcade"] .subject-title,
+html[data-theme="arcade"] .cc-panel-title{
+  color: var(--arc-ink-strong);
+  text-shadow: 0 2px 0 rgba(0,0,0,.5);
+}
+html[data-theme="arcade"] .section-label,
+html[data-theme="arcade"] .meta-label,
+html[data-theme="arcade"] .page-subtitle,
+html[data-theme="arcade"] .muted{
+  color: var(--arc-ink-muted);
+}
+
+/* Inputs
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .search-input,
+html[data-theme="arcade"] .form-control,
+html[data-theme="arcade"] .login-input,
+html[data-theme="arcade"] .tool-input,
+html[data-theme="arcade"] textarea{
+  background:#0b1b3d;
+  border:1px solid #2a4ea0;
+  color:#dff5ff;
+  border-radius:8px;
+  box-shadow: 0 2px 0 rgba(0,0,0,.35) inset, 0 0 0 2px rgba(16,34,82,.4) inset;
+}
+html[data-theme="arcade"] .search-input::placeholder,
+html[data-theme="arcade"] .form-control::placeholder{
+  color:#8db5cf;
+}
+html[data-theme="arcade"] .search-input:focus,
+html[data-theme="arcade"] .form-control:focus,
+html[data-theme="arcade"] .login-input:focus,
+html[data-theme="arcade"] .tool-input:focus{
+  border-color: var(--arc-accent);
+  box-shadow: 0 0 0 3px rgba(29,225,255,.26);
+  outline:none;
+}
+
+/* Check pills/chips (filters)
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .check-pill{
+  background:#0c214a;
+  border:1px solid #2a4ea0;
+  color:#c9eaff;
+  border-radius:8px;
+}
+html[data-theme="arcade"] .check-pill:hover{ background:#103062; }
+html[data-theme="arcade"] .chip,
+html[data-theme="arcade"] .chip-link{
+  background:#0d2552;
+  border:1px solid #2a4ea0;
+  color:#c9eaff;
+  border-radius: var(--arc-chip-radius);
+}
+html[data-theme="arcade"] .chip-muted{
+  background:#0e2143;
+  color:#9ec6df;
+}
+
+/* Buttons
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .btn{
+  background:#0b254e;
+  border:2px solid #2f6bd4;
+  color:#e6fbff;
+  border-radius:10px;
+  padding:8px 14px;
+  text-shadow:0 1px 0 rgba(0,0,0,.6);
+  box-shadow:
+    0 0 0 2px #071a3a inset,
+    0 4px 0 0 rgba(0,0,0,.45);
+}
+html[data-theme="arcade"] .btn:hover{
+  background:#113066;
+  border-color:#4b89ff;
+}
+html[data-theme="arcade"] .btn-primary{
+  background:linear-gradient(180deg,#1de1ff 0%,#13a7be 100%);
+  border-color:#67f0ff;
+  color:#06202c;
+  text-shadow:none;
+}
+html[data-theme="arcade"] .btn-primary:hover{
+  background:linear-gradient(180deg,#57ecff 0%,#18bfd8 100%);
+  border-color:#a1f7ff;
+}
+html[data-theme="arcade"] .btn-danger{
+  background:#4a0f1e;
+  border-color:#ff738c;
+  color:#ffdbe2;
+}
+html[data-theme="arcade"] .btn-danger:hover{
+  background:#5c1426;
+}
+
+/* Messages
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .msg{
+  background:#0c1e43;
+  border:1px solid #2a4ea0;
+  color:#e3f6ff;
+}
+html[data-theme="arcade"] .msg.info    { border-left:4px solid var(--arc-info);    background:#0b1f42; }
+html[data-theme="arcade"] .msg.success { border-left:4px solid var(--arc-success); background:#0b2b3a; }
+html[data-theme="arcade"] .msg.warning { border-left:4px solid var(--arc-warning); background:#2a240a; }
+html[data-theme="arcade"] .msg.error   { border-left:4px solid var(--arc-danger);  background:#2a0d18; }
+
+/* Links
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] a{
+  color:#7ee9ff;
+}
+html[data-theme="arcade"] a:hover{
+  color:#b6f4ff;
+  text-decoration: underline;
+}
+
+/* Menus
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .user-menu,
+html[data-theme="arcade"] .mobile-menu-inner{
+  background:#0a1836;
+  border:1px solid #2a4ea0;
+}
+html[data-theme="arcade"] .user-menu .menu-item:hover,
+html[data-theme="arcade"] .mobile-link:hover{
+  background:#0e2a5a;
+}
+
+/* Tables
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] table{ border-collapse:collapse; }
+html[data-theme="arcade"] th,
+html[data-theme="arcade"] td{
+  border:1px solid #223f86;
+  background:#0f2147;
+  color:#daf2ff;
+}
+
+/* Highlights & Validation
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .mark-hit{
+  background:#fffb91;
+  color:#0a1630;
+  padding:0 2px;
+  border:1px solid #f0e276;
+  border-radius:3px;
+}
+
+html[data-theme="arcade"] .form-control.scripture-valid,
+html[data-theme="arcade"] .search-input.scripture-valid{
+  border-color: var(--arc-success);
+  background:#062a1a;
+  box-shadow:0 0 0 3px rgba(34,211,110,.18);
+}
+html[data-theme="arcade"] .form-control.scripture-invalid,
+html[data-theme="arcade"] .search-input.scripture-invalid{
+  border-color: var(--arc-danger);
+  background:#2a0d18;
+  box-shadow:0 0 0 3px rgba(255,77,109,.18);
+}
+html[data-theme="arcade"] .scripture-pill-invalid{
+  background:#3a0b18;
+  border:1px solid #ff8ea2;
+  color:#ffdbe2;
+}
+html[data-theme="arcade"] .scripture-pill-wol{
+  background:#0d263e;
+  border:1px solid #7ee9ff;
+  color:#d9fbff;
+}
+
+/* Command Center accents
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .settings-console .sec-tile{
+  background:#0b1d42;
+  border:1px solid #2a4ea0;
+  color:#dff5ff;
+  border-radius:12px;
+  box-shadow:0 8px 20px rgba(0,0,0,.35);
+}
+html[data-theme="arcade"] .settings-console .sec-tile:hover{
+  transform:translateY(-1px);
+  box-shadow:0 12px 26px rgba(0,0,0,.45);
+}
+html[data-theme="arcade"] .settings-console .sec-icon{
+  background:#0c2a5a;
+  color:#9ddcff;
+  border:1px solid #2a4ea0;
+}
+html[data-theme="arcade"] .settings-console .swatch{
+  border:1px solid #2a4ea0;
+  background:linear-gradient(135deg,#0d2856,#18428d);
+}
+
+/* Misc polish
+   ---------------------------------------------------------------- */
+html[data-theme="arcade"] .topbar-wrap.is-scrolled{
+  box-shadow:0 10px 28px rgba(0,0,0,.55);
+  border-bottom-color:#0f2e66;
+}
+
+/* Make subject “chips” look like game powerups when highlighted */
+html[data-theme="arcade"] .chip-subject.chip-hit{
+  background:#ffe28c;
+  border-color:#ffc864;
+  color:#241300;
+  box-shadow:0 2px 0 0 rgba(0,0,0,.45);
+}
\ No newline at end of file