Apply dark purple frontend theme

public/assets/app.css

@@ -1,13 +1,18 @@
 :root {
-  color-scheme: light;
+  color-scheme: dark;
-  --bg: #f6f5f1;
+  --bg: #07040d;
-  --surface: #ffffff;
+  --bg-2: #120a20;
-  --ink: #161616;
+  --surface: rgba(23, 15, 35, 0.88);
-  --muted: #696963;
+  --surface-strong: rgba(33, 22, 50, 0.92);
-  --line: #d8d6ce;
+  --ink: #f4efff;
-  --accent: #2f7664;
+  --muted: #a89bbb;
-  --accent-strong: #245d50;
+  --line: rgba(161, 126, 255, 0.22);
-  --danger: #a43d32;
+  --line-strong: rgba(188, 154, 255, 0.42);
+  --accent: #9b5cff;
+  --accent-strong: #b889ff;
+  --accent-ink: #170b28;
+  --danger: #ff7f9b;
+  --shadow: rgba(3, 2, 8, 0.48);
   font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
@@ -22,7 +27,12 @@ body {
 
 body {
   margin: 0;
-  background: var(--bg);
+  background:
+    linear-gradient(rgba(151, 91, 255, 0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(151, 91, 255, 0.055) 1px, transparent 1px),
+    linear-gradient(180deg, rgba(31, 19, 55, 0.94), var(--bg) 52%, #050309);
+  background-color: var(--bg);
+  background-size: 44px 44px, 44px 44px, auto;
   color: var(--ink);
 }
 
@@ -35,8 +45,41 @@ input {
 .shell {
   min-height: 100vh;
   display: grid;
+  grid-template-rows: auto auto;
+  align-content: center;
   place-items: center;
   padding: 24px;
+  gap: 18px;
+}
+
+.brand-lockup {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  color: var(--ink);
+  user-select: none;
+}
+
+.brand-mark {
+  width: 26px;
+  height: 26px;
+  border: 1px solid var(--line-strong);
+  border-radius: 7px;
+  background:
+    linear-gradient(135deg, rgba(184, 137, 255, 0.9), rgba(113, 69, 214, 0.82)),
+    var(--accent);
+  box-shadow:
+    0 0 0 4px rgba(155, 92, 255, 0.1),
+    0 12px 30px rgba(109, 64, 214, 0.28);
+  transform: rotate(45deg);
+}
+
+.brand-lockup h1 {
+  margin: 0;
+  font-size: 22px;
+  line-height: 1;
+  font-weight: 700;
+  letter-spacing: 0;
 }
 
 .archive-box {
@@ -45,7 +88,10 @@ input {
   border: 1px solid var(--line);
   border-radius: 8px;
   padding: 12px;
-  box-shadow: 0 18px 42px rgba(28, 25, 19, 0.08);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.06),
+    0 22px 58px var(--shadow);
+  backdrop-filter: blur(16px);
 }
 
 .input-row {
@@ -61,14 +107,21 @@ input {
   border: 1px solid var(--line);
   border-radius: 6px;
   color: var(--ink);
-  background: #fbfaf7;
+  background: rgba(7, 4, 13, 0.72);
   padding: 0 14px;
   outline: none;
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
+}
+
+input::placeholder {
+  color: rgba(168, 155, 187, 0.7);
 }
 
 input:focus {
-  border-color: var(--accent);
+  border-color: var(--accent-strong);
-  box-shadow: 0 0 0 3px rgba(47, 118, 100, 0.16);
+  box-shadow:
+    0 0 0 3px rgba(155, 92, 255, 0.22),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
 }
 
 button {
@@ -76,19 +129,37 @@ button {
   min-width: 112px;
   border: 0;
   border-radius: 6px;
-  color: #ffffff;
+  color: var(--accent-ink);
-  background: var(--accent);
+  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
   padding: 0 18px;
   cursor: pointer;
+  font-weight: 700;
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.26),
+    0 14px 32px rgba(108, 57, 204, 0.28);
+  transition:
+    transform 160ms ease,
+    box-shadow 160ms ease,
+    filter 160ms ease;
 }
 
 button:hover {
-  background: var(--accent-strong);
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.3),
+    0 18px 38px rgba(108, 57, 204, 0.34);
+}
+
+button:focus-visible {
+  outline: 3px solid rgba(184, 137, 255, 0.36);
+  outline-offset: 2px;
 }
 
 button:disabled {
   cursor: wait;
   opacity: 0.72;
+  transform: none;
 }
 
 .progress-wrap {
@@ -99,14 +170,16 @@ button:disabled {
   height: 6px;
   overflow: hidden;
   border-radius: 999px;
-  background: #e7e4dc;
+  background: rgba(8, 5, 15, 0.78);
+  border: 1px solid rgba(161, 126, 255, 0.14);
 }
 
 .progress-bar {
   width: 0%;
   height: 100%;
   border-radius: inherit;
-  background: var(--accent);
+  background: linear-gradient(90deg, #7c3cff, #d6b4ff);
+  box-shadow: 0 0 18px rgba(184, 137, 255, 0.48);
   transition: width 220ms ease;
 }
 
@@ -116,6 +189,7 @@ button:disabled {
   color: var(--muted);
   font-size: 14px;
   line-height: 22px;
+  letter-spacing: 0;
 }
 
 .status-line.error {
@@ -135,8 +209,10 @@ button:disabled {
 @media (max-width: 560px) {
   .shell {
     align-items: start;
+    align-content: start;
     padding: 16px;
-    padding-top: 20vh;
+    padding-top: 18vh;
+    gap: 14px;
   }
 
   .archive-box {

public/index.html

@@ -9,6 +9,10 @@
   </head>
   <body>
     <main class="shell">
+      <div class="brand-lockup" aria-label="sigilbox">
+        <div class="brand-mark" aria-hidden="true"></div>
+        <h1>sigilbox</h1>
+      </div>
       <form class="archive-box" id="archive-form" autocomplete="off">
         <label class="sr-only" for="archive-url">URL</label>
         <div class="input-row">