From 4b152c5992ae9f68ddf888afc43190f2687faa0d Mon Sep 17 00:00:00 2001
From: Hein Dauven <heindauven@gmail.com>
Date: Sun, 26 Apr 2026 16:09:31 +0200
Subject: [PATCH 1/2] Polish Dusk docs visual system

---
 src/styles/custom.css | 277 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 273 insertions(+), 4 deletions(-)

diff --git a/src/styles/custom.css b/src/styles/custom.css
index c151a2c..99b9d17 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -6,6 +6,17 @@
 :root {
   --sl-font: "Soehne";
   --sl-font-mono: "Soehne Mono";
+
+  --dusk-surface-radius: 0.5rem;
+  --dusk-surface-radius-sm: 0.375rem;
+  --dusk-border: rgba(16, 16, 16, 0.12);
+  --dusk-border-strong: rgba(16, 16, 16, 0.22);
+  --dusk-surface: #ffffff;
+  --dusk-surface-raised: #fbfafc;
+  --dusk-text-muted: #636167;
+  --dusk-shadow-soft: 0 8px 24px rgba(16, 16, 16, 0.08);
+  --dusk-nav-active-bg: rgba(113, 177, 255, 0.16);
+  --dusk-nav-active-fg: #101010;
 }
 
 /* Sidebar/menu: avoid faux-bold artifacts (we only ship Soehne 400/500). */
@@ -31,6 +42,7 @@
 /* Header brand: make the logo + "DOCUMENTATION" less dominant. */
 .site-title {
   font-size: var(--sl-text-sm);
+  font-weight: 500;
 }
 
 .site-title img {
@@ -62,6 +74,15 @@
   --sl-color-bg-nav: #f6f5fa;
   --sl-color-bg-sidebar: #f6f5fa;
   --sl-color-bg-inline-code: rgba(0, 0, 0, 0.06);
+
+  --dusk-border: rgba(16, 16, 16, 0.12);
+  --dusk-border-strong: rgba(16, 16, 16, 0.24);
+  --dusk-surface: #ffffff;
+  --dusk-surface-raised: #fbfafc;
+  --dusk-text-muted: #636167;
+  --dusk-shadow-soft: 0 8px 24px rgba(16, 16, 16, 0.08);
+  --dusk-nav-active-bg: rgba(113, 177, 255, 0.16);
+  --dusk-nav-active-fg: #101010;
 }
 
 /* Dark theme */
@@ -82,15 +103,68 @@
   /* Tame pure white in headings/UI */
   --sl-color-white: #e2dfe9;
   --sl-color-black: #101010;
+
+  --dusk-border: rgba(226, 223, 233, 0.1);
+  --dusk-border-strong: rgba(226, 223, 233, 0.2);
+  --dusk-surface: #151518;
+  --dusk-surface-raised: #1b1b1e;
+  --dusk-text-muted: #a8a5af;
+  --dusk-shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.28);
+  --dusk-nav-active-bg: rgba(113, 177, 255, 0.12);
+  --dusk-nav-active-fg: #e2dfe9;
+}
+
+.sidebar-pane a[aria-current="page"],
+.sidebar-pane a[aria-current="page"]:hover,
+.sidebar-pane a[aria-current="page"]:focus {
+  background: var(--dusk-nav-active-bg);
+  box-shadow: inset 3px 0 0 var(--sl-color-accent);
+  color: var(--dusk-nav-active-fg);
 }
 
-/* Dusk-style rounding for cards and primary actions without changing layout behavior. */
+/* Dusk-style surfaces without changing Starlight layout behavior. */
 .sl-link-card {
-  border-radius: 1.25rem !important;
+  border-color: var(--dusk-border) !important;
+  border-radius: var(--dusk-surface-radius) !important;
+  background: var(--dusk-surface);
+  box-shadow: none !important;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 120ms ease,
+    box-shadow 160ms ease;
 }
 
+.sl-link-card:hover {
+  border-color: var(--dusk-border-strong) !important;
+  background: var(--dusk-surface-raised) !important;
+  box-shadow: var(--dusk-shadow-soft) !important;
+  transform: translateY(-1px);
+}
+
+.sl-link-card .title {
+  font-weight: 500 !important;
+}
+
+.sl-link-card .description {
+  color: var(--dusk-text-muted) !important;
+}
+
+.sl-link-button,
 .action {
-  border-radius: 1.25rem !important;
+  border-radius: var(--dusk-surface-radius) !important;
+  font-weight: 500;
+  letter-spacing: 0;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 120ms ease;
+}
+
+.sl-link-button:hover,
+.action:hover {
+  transform: translateY(-1px);
 }
 
 /* Light-mode primary buttons: cornflower background needs dark text for contrast. */
@@ -99,7 +173,202 @@
   color: var(--sl-color-text-invert);
 }
 
-/* Keep callouts readable on the neutral dark surface. */
+/* Docs-specific Dusk treatment for technical reading surfaces. */
+.sl-markdown-content :is(h2, h3):not(:where(.not-content *)) {
+  letter-spacing: 0;
+}
+
+.sl-markdown-content h2:not(:where(.not-content *)) {
+  padding-top: 0.25rem;
+}
+
+.sl-markdown-content code:not(:where(.not-content *, pre *)) {
+  border: 1px solid var(--dusk-border);
+  border-radius: var(--dusk-surface-radius-sm);
+  padding: 0.12em 0.34em;
+}
+
+.expressive-code {
+  --ec-brdRad: var(--dusk-surface-radius);
+  --ec-frm-edActTabBg: var(--dusk-surface-raised);
+  --ec-frm-edTabBarBrdCol: var(--dusk-border);
+}
+
+.expressive-code figure.frame {
+  border: 1px solid var(--dusk-border);
+  border-radius: var(--dusk-surface-radius);
+  box-shadow: none;
+  overflow: hidden;
+}
+
+.expressive-code .frame.has-title:not(.is-terminal) .header,
+.expressive-code .frame.is-terminal .header {
+  border-bottom-color: var(--dusk-border);
+}
+
+.expressive-code pre {
+  background: var(--dusk-surface) !important;
+}
+
+.sl-markdown-content table:not(:where(.not-content *)) {
+  border: 1px solid var(--dusk-border);
+  border-radius: var(--dusk-surface-radius);
+  background: var(--dusk-surface);
+  box-shadow: none;
+}
+
+.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+  border-bottom-color: var(--dusk-border);
+  padding: 0.7rem 0.9rem;
+}
+
+.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
+  padding-inline-start: 0.9rem;
+}
+
+.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
+  padding-inline-end: 0.9rem;
+}
+
+.sl-markdown-content th:not(:where(.not-content *)) {
+  background: var(--dusk-surface-raised);
+  font-weight: 500;
+}
+
+.sl-markdown-content tr:last-child td:not(:where(.not-content *)) {
+  border-bottom: 0;
+}
+
+.sl-markdown-content img:not(:where(.not-content *)) {
+  border: 1px solid var(--dusk-border);
+  border-radius: var(--dusk-surface-radius);
+  background: var(--dusk-surface);
+  box-shadow: none;
+}
+
+.sl-markdown-content details:not(:where(.not-content *)) {
+  border: 1px solid var(--dusk-border);
+  border-radius: var(--dusk-surface-radius);
+  background: var(--dusk-surface);
+  overflow: hidden;
+}
+
+.sl-markdown-content details:not(:where(.not-content *))[open] {
+  background: var(--dusk-surface-raised);
+}
+
+.sl-markdown-content summary:not(:where(.not-content *)) {
+  padding: 0.9rem 1rem;
+  color: var(--sl-color-white);
+  cursor: pointer;
+  font-weight: 500;
+}
+
+.sl-markdown-content details:not(:where(.not-content *)) > :not(summary) {
+  margin-inline: 1rem;
+}
+
+.sl-markdown-content details:not(:where(.not-content *)) > :last-child {
+  margin-bottom: 1rem;
+}
+
+.starlight-aside {
+  border: 1px solid var(--dusk-border);
+  border-inline-start-width: 3px;
+  border-radius: var(--dusk-surface-radius);
+  box-shadow: none;
+}
+
+.starlight-aside__title {
+  font-size: var(--sl-text-sm) !important;
+  font-weight: 500 !important;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+:root[data-theme="light"] .starlight-aside--note,
+:root[data-theme="light"] .starlight-aside--tip {
+  background-color: rgba(113, 177, 255, 0.1);
+}
+
+:root[data-theme="dark"] .starlight-aside--note,
+:root[data-theme="dark"] .starlight-aside--tip {
+  background-color: rgba(113, 177, 255, 0.1);
+}
+
 :root[data-theme="dark"] .starlight-aside--caution {
   background-color: rgba(255, 164, 35, 0.22);
 }
+
+.pagination-links a {
+  border-color: var(--dusk-border) !important;
+  border-radius: var(--dusk-surface-radius) !important;
+  background: var(--dusk-surface);
+  box-shadow: none !important;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 120ms ease;
+}
+
+.pagination-links a:hover {
+  border-color: var(--dusk-border-strong) !important;
+  background: var(--dusk-surface-raised);
+  transform: translateY(-1px);
+}
+
+.pagination-links .link-title {
+  font-size: var(--sl-text-xl) !important;
+  font-weight: 500;
+}
+
+header button[aria-label="Search"],
+header button[aria-label="Menu"] {
+  border-color: var(--dusk-border) !important;
+  border-radius: var(--dusk-surface-radius) !important;
+  background: var(--dusk-surface) !important;
+  box-shadow: none !important;
+  transition:
+    background 160ms ease,
+    border-color 160ms ease,
+    transform 120ms ease;
+}
+
+header button[aria-label="Search"]:hover,
+header button[aria-label="Menu"]:hover {
+  border-color: var(--dusk-border-strong) !important;
+  background: var(--dusk-surface-raised) !important;
+  transform: translateY(-1px);
+}
+
+dialog[aria-label="Search"] {
+  border: 1px solid var(--dusk-border) !important;
+  border-radius: var(--dusk-surface-radius) !important;
+  background: var(--dusk-surface) !important;
+  box-shadow: var(--dusk-shadow-soft) !important;
+}
+
+dialog[aria-label="Search"]::backdrop {
+  background: rgba(0, 0, 0, 0.62);
+  backdrop-filter: blur(10px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sl-link-card,
+  .sl-link-button,
+  .action,
+  .pagination-links a,
+  header button[aria-label="Search"],
+  header button[aria-label="Menu"] {
+    transition: none;
+  }
+
+  .sl-link-card:hover,
+  .sl-link-button:hover,
+  .action:hover,
+  .pagination-links a:hover,
+  header button[aria-label="Search"]:hover,
+  header button[aria-label="Menu"]:hover {
+    transform: none;
+  }
+}

From e523a8f533350a19ff2ee5c1b5913a9c8fdb1fd7 Mon Sep 17 00:00:00 2001
From: Hein Dauven <heindauven@gmail.com>
Date: Sun, 26 Apr 2026 16:09:47 +0200
Subject: [PATCH 2/2] Align verify team account UI with docs theme

---
 src/content/docs/learn/VerifyAccount.astro   | 177 ++++++++++++++-----
 src/content/docs/operator/{FAQ.md => faq.md} |   0
 2 files changed, 135 insertions(+), 42 deletions(-)
 rename src/content/docs/operator/{FAQ.md => faq.md} (100%)

diff --git a/src/content/docs/learn/VerifyAccount.astro b/src/content/docs/learn/VerifyAccount.astro
index 7b63580..2b4a8fa 100644
--- a/src/content/docs/learn/VerifyAccount.astro
+++ b/src/content/docs/learn/VerifyAccount.astro
@@ -1,62 +1,155 @@
 <verify-account>
     <div class="verify-form">
-        <label for="channel">Select Channel</label>
-        <select id="channel">
-            <option value="x">X</option>
-            <option value="discord">Discord</option>
-            <option value="telegram">Telegram</option>
-            <option value="email">Email</option>
-        </select>
-
-        <label for="account">Account Name</label>
-        <input
-            id="account"
-            type="text"
-            placeholder="Enter account name"
-        />
-
-        <button id="verifyButton" type="button">Verify</button>
+        <div class="verify-field-grid">
+            <label class="verify-field" for="channel">
+                <span>Channel</span>
+                <select id="channel">
+                    <option value="x">X</option>
+                    <option value="discord">Discord</option>
+                    <option value="telegram">Telegram</option>
+                    <option value="email">Email</option>
+                </select>
+            </label>
+
+            <label class="verify-field" for="account">
+                <span>Account</span>
+                <input
+                    id="account"
+                    type="text"
+                    placeholder="@account or email"
+                />
+            </label>
+        </div>
+
+        <button id="verifyButton" type="button">Verify account</button>
         <p id="result" class="status"></p>
     </div>
 
     <style>
         .verify-form {
-            display: flex;
-            flex-direction: column;
+            display: grid;
+            gap: 1rem;
+            max-width: 44rem;
+            margin-block: 1rem 1.5rem;
+            padding: 1rem;
+            border: 1px solid var(--dusk-border, var(--sl-color-gray-5));
+            border-radius: var(--dusk-surface-radius, 0.5rem);
+            background: var(--dusk-surface, var(--sl-color-bg));
+        }
+
+        .verify-field-grid {
+            display: grid;
             gap: 1rem;
-            max-width: 400px;
-            margin-top: 1rem;
         }
+
+        @media (min-width: 42rem) {
+            .verify-field-grid {
+                grid-template-columns: minmax(10rem, 0.75fr) minmax(0, 1.25fr);
+            }
+        }
+
+        .verify-field {
+            display: grid;
+            grid-template-rows: 1rem auto;
+            gap: 0.45rem;
+            align-content: start;
+            margin: 0;
+            color: var(--sl-color-white);
+            font-size: var(--sl-text-sm);
+            font-weight: 500;
+        }
+
+        .verify-field > span {
+            color: var(--dusk-text-muted, var(--sl-color-gray-3));
+            font-family: var(--sl-font);
+            font-size: var(--sl-text-xs);
+            font-weight: 500;
+            letter-spacing: 0;
+            line-height: 1rem;
+        }
+
         select,
         input {
-            background-color: var(--on-surface-color);
-            padding: 0.5rem 1rem 0.5rem 1rem;
-            font-size: 1rem;
-            border: 1px solid #ccc;
-            border-radius: 24px;
             width: 100%;
+            min-height: 2.75rem;
+            padding: 0.65rem 0.75rem;
+            border: 1px solid var(--dusk-border, var(--sl-color-gray-5));
+            border-radius: var(--dusk-surface-radius, 0.5rem);
+            background: var(--sl-color-bg);
+            color: var(--sl-color-white);
+            font-family: var(--sl-font);
+            font-size: var(--sl-text-sm);
+            font-weight: 400;
+            line-height: 1.2;
+        }
+
+        select:focus,
+        input:focus {
+            border-color: var(--sl-color-accent);
+            outline: 2px solid transparent;
+            box-shadow: 0 0 0 3px rgba(113, 177, 255, 0.22);
         }
+
         button {
-            padding: 0.5rem 1rem;
-            font-size: 1rem;
-            color: white;
-            background: #56a1fd;
-            border: none;
-            border-radius: 24px;
+            justify-self: start;
+            min-height: 2.75rem;
+            padding: 0.65rem 1rem;
+            border: 1px solid var(--sl-color-accent);
+            border-radius: var(--dusk-surface-radius, 0.5rem);
+            background: var(--sl-color-accent);
+            color: var(--sl-color-text-invert, #101010);
             cursor: pointer;
+            font: inherit;
+            font-weight: 500;
+            transition:
+                background 160ms ease,
+                border-color 160ms ease,
+                transform 120ms ease;
         }
+
         button:hover {
-            background: #71b1ff;
+            transform: translateY(-1px);
+        }
+
+        button:focus-visible {
+            outline: 2px solid var(--sl-color-accent);
+            outline-offset: 3px;
         }
+
         .status {
-            font-size: 1rem;
-            font-weight: bold;
+            display: none;
+            margin: 0;
+            padding: 0.75rem 0.85rem;
+            border: 1px solid var(--dusk-border, var(--sl-color-gray-5));
+            border-radius: var(--dusk-surface-radius, 0.5rem);
+            background: var(--dusk-surface-raised, var(--sl-color-gray-6));
+            color: var(--sl-color-white);
+            font-size: var(--sl-text-sm);
+            line-height: 1.45;
+        }
+
+        .status.has-result {
+            display: block;
         }
+
         .valid {
-            color: green;
+            border-color: rgba(87, 199, 133, 0.36);
+            background: rgba(87, 199, 133, 0.1);
         }
+
         .invalid {
-            color: red;
+            border-color: rgba(227, 122, 122, 0.4);
+            background: rgba(227, 122, 122, 0.1);
+        }
+
+        @media (prefers-reduced-motion: reduce) {
+            button {
+                transition: none;
+            }
+
+            button:hover {
+                transform: none;
+            }
         }
     </style>
 </verify-account>
@@ -94,8 +187,8 @@
                 let account = this.accountInput.value.trim();
 
                 if (!account) {
-                    this.resultDisplay.textContent = "❗ Please enter an account name.";
-                    this.resultDisplay.className = "status invalid";
+                    this.resultDisplay.textContent = "Enter an account name to verify.";
+                    this.resultDisplay.className = "status invalid has-result";
                     return;
                 }
 
@@ -113,11 +206,11 @@
                 const formattedChannel = channel.charAt(0).toUpperCase() + channel.slice(1);
 
                 if (validAccounts && validAccounts.includes(normalizedAccount)) {
-                    this.resultDisplay.textContent = `✅ Verified: "${account}" is a valid ${formattedChannel} team account.`;
-                    this.resultDisplay.className = "status valid";
+                    this.resultDisplay.textContent = `Verified: ${account} is a valid ${formattedChannel} team account.`;
+                    this.resultDisplay.className = "status valid has-result";
                 } else {
-                    this.resultDisplay.textContent = `❌ Not Verified: "${account}" is not a valid ${formattedChannel} team account.`;
-                    this.resultDisplay.className = "status invalid";
+                    this.resultDisplay.textContent = `Not verified: ${account} is not listed as a valid ${formattedChannel} team account.`;
+                    this.resultDisplay.className = "status invalid has-result";
                 }
             }
         }
diff --git a/src/content/docs/operator/FAQ.md b/src/content/docs/operator/faq.md
similarity index 100%
rename from src/content/docs/operator/FAQ.md
rename to src/content/docs/operator/faq.md