evilmartians · antiflasher · Oct 28, 2025 · Oct 28, 2025 · Oct 28, 2025 · Oct 28, 2025
diff --git a/css/index.css b/css/index.css
@@ -29,8 +29,8 @@
   - Contrast controls how contrast the text colors will be.
   */
   --theme-hue: 255;
-  --theme-saturation: 0.2; /* 0...1 where 0 means grayscale colors; 1 means fully saturated colors */
-  --theme-contrast: 0.8; /* 0...1 where 0 means low contrast; 1 means high contrast, black-n-white in fact */
+  --theme-saturation: 0.3; /* 0...1 where 0 means grayscale colors; 1 means fully saturated colors */
+  --theme-contrast: 0.85; /* 0...1 where 0 means low contrast; 1 means high contrast, black-n-white in fact */
 
   /* Fonts */
   --font-text: "Inter Variable", Arial, sans-serif;
@@ -98,6 +98,7 @@
   --color-gradient-bg-end: #0081ff00;
   --color-gradient-promo-start: #800069;
   --color-gradient-promo-end: #005196;
+  --color-focus: #0081ff;
 }
 
 .theme-light {
@@ -145,6 +146,8 @@
 
   --color-gradient-promo-start: #ffd2f7;
   --color-gradient-promo-end: #b9dfff;
+
+  --color-focus: var(--color-accent);
 }
 
 .theme-dark {
@@ -196,6 +199,8 @@
 
   --color-gradient-promo-start: #800069;
   --color-gradient-promo-end: #005196;
+
+  --color-focus: var(--color-accent);
 }
 
 .page-container {
@@ -223,6 +228,11 @@ body {
   line-height: var(--line-height-paragraph-m);
 }
 
+:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: 2px;
+}
+
 /* Headers */
 
 h1,
@@ -577,15 +587,21 @@ section {
   border-radius: var(--radius-l);
   max-width: 1008px;
   padding: 12px 12px 12px 16px;
-  z-index: 1000;
+  z-index: 300;
 }
 
 .nav-brand {
   display: flex;
+  gap: 16px;
   align-items: center;
   justify-content: center;
 }
 
+.nav-menu {
+  display: flex;
+  gap: 0;
+}
+
 .nav-link {
   color: var(--color-text-secondary);
   font-size: var(--font-size-m);

diff --git a/css/search.css b/css/search.css
@@ -0,0 +1,47 @@
+:root {
+  --docsearch-key-color: var(--color-text-secondary);
+  --docsearch-muted-color: var(--color-text-secondary);
+}
+
+.search-container {
+  padding: 0 !important;
+  background-color: var(--color-surface);
+  box-shadow: none !important;
+
+  &:hover {
+    background-color: var(--color-border-level-2) !important;
+  }
+}
+
+#docsearch button {
+  background: transparent;
+  border: none;
+  border-radius: var(--radius-s);
+}
+
+.DocSearch-Button-Keys {
+  box-shadow: inset 0 0 0 1px var(--color-border-level-3);
+  border-radius: var(--radius-xs);
+  min-width: 0px;
+}
+
+.DocSearch-Button-Key {
+  background-color: transparent;
+  width: 20px;
+  height: 20px;
+  border: none;
+}
+
+.DocSearch-Button-Key:first-child {
+  margin-right: -10px;
+}
+
+.DocSearch-Button-Placeholder {
+  font-size: var(--font-size-s);
+  line-height: var(--line-height-ui-s);
+  font-weight: var(--ui-button-font-weight);
+}
+
+#docsearch-input:focus-within {
+  outline: none;
+}
diff --git a/index.html b/index.html
@@ -33,20 +33,27 @@
   <!-- Preload fonts -->
   <link rel="preload" href="fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
 
+  <!-- DocSearch CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@4" />
+
   <!-- Styles -->
   <link href="vendor/font-awesome-6.7.2/css/all.min.css" rel="stylesheet" />
   <link href="css/index.css" rel="stylesheet" type="text/css" />
   <link href="css/tablet.css" rel="stylesheet" type="text/css" />
   <link href="css/mobile.css" rel="stylesheet" type="text/css" />
+  <link href="css/search.css" rel="stylesheet" type="text/css" />
   <script src="js/main.js" type="text/javascript" defer></script>
+  <script src="js/search.js" type="text/javascript" defer></script>
 </head>
 
 <body>
   <div class="background-gradient"></div>
   <div class="page-container">
     <header class="nav-container">
-      <a href="index.html" class="nav-brand"><img src="images/Logo-Template.svg" width="132" height="28"
-          alt="Logo Template" /></a>
+      <div class="nav-brand">
+        <a href="index.html"><img src="images/Logo-Template.svg" width="132" height="28" alt="Logo Template" /></a>
+        <div id="docsearch" class="button tertiary compact search-container" aria-label="Search"></div>
+      </div>
       <nav role="navigation" class="nav-menu" data-navigation>
         <a href="pricing.html" class="nav-link">Pricing</a>
         <a href="https://mintlify.com" class="nav-link">Docs ↗</a>
@@ -423,6 +430,27 @@ <h2 class="no-top-margin">FAQ</h2>
             </div>
           </details>
 
+          <details class="accordion-item" name="faq">
+            <summary class="accordion-toggle">
+              <p class="paragraph m bold">How do I integrate search?</p>
+              <span class="accordion-chevron fa-solid fa-chevron-down"></span>
+            </summary>
+            <div class="accordion-content">
+              <p>
+                To integrate search into your documentation:
+              </p>
+              <ol role="list">
+                <li>
+                  Go to <a href="https://docsearch.algolia.com/" target="_blank">docsearch.algolia.com</a>, sign up, and
+                  set up your documentation database.
+                </li>
+                <li>
+                  Go to <span class="inline-code">src/js/config.js</span> and replace credentials with yours
+                </li>
+              </ol>
+            </div>
+          </details>
+
           <details class="accordion-item" name="faq">
             <summary class="accordion-toggle">
               <p class="paragraph m bold">How do I add a new page?</p>
@@ -549,6 +577,7 @@ <h2>Start using our product today</h2>
       </div>
     </footer>
   </div>
+  <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@4"></script>
 </body>
 
 </html>
diff --git a/js/search.js b/js/search.js
@@ -0,0 +1,26 @@
+/**
+ * To integrate search into your documentation:
+ * 	1. Go to https://docsearch.algolia.com/, sign up, and set up your documentation database.
+ * 	2. Replace the following constants with the credentials found in your dashboard:
+ */
+
+const APP_ID = "BH4D9OD16A";
+const INDEX_NAME = "docsearch";
+const API_KEY = "25626fae796133dc1e734c6bcaaeac3c";
+
+function initializeDocSearch() {
+  window.docsearch({
+    container: "#docsearch",
+    appId: APP_ID,
+    indexName: INDEX_NAME,
+    apiKey: API_KEY,
+    placeholder: "Search documentation…",
+    searchParameters: {
+      facetFilters: [],
+    },
+  });
+}
+
+document.addEventListener("DOMContentLoaded", () => {
+  initializeDocSearch();
+});
diff --git a/licenses.html b/licenses.html
@@ -21,20 +21,27 @@
   <!-- Preload fonts -->
   <link rel="preload" href="fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
 
+  <!-- DocSearch CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@4" />
+
   <!-- Styles -->
   <link href="vendor/font-awesome-6.7.2/css/all.min.css" rel="stylesheet" />
   <link href="css/index.css" rel="stylesheet" type="text/css" />
   <link href="css/tablet.css" rel="stylesheet" type="text/css" />
   <link href="css/mobile.css" rel="stylesheet" type="text/css" />
+  <link href="css/search.css" rel="stylesheet" type="text/css" />
   <script src="js/main.js" type="text/javascript" defer></script>
+  <script src="js/search.js" type="text/javascript" defer></script>
 </head>
 
 <body>
   <div class="background-gradient"></div>
   <div class="page-container">
     <header class="nav-container">
-      <a href="index.html" class="nav-brand"><img src="images/Logo-Template.svg" loading="lazy"
-          alt="Logo Template" /></a>
+      <div class="nav-brand">
+        <a href="index.html"><img src="images/Logo-Template.svg" width="132" height="28" alt="Logo Template" /></a>
+        <div id="docsearch" class="button tertiary compact search-container" aria-label="Search"></div>
+      </div>
       <nav role="navigation" class="nav-menu" data-navigation>
         <a href="pricing.html" class="nav-link">Pricing</a>
         <a href="https://mintlify.com" class="nav-link">Docs ↗</a>
@@ -162,6 +169,7 @@ <h1>Licenses</h1>
       </div>
     </footer>
   </div>
+  <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@4"></script>
 </body>
 
 </html>
diff --git a/pricing.html b/pricing.html
@@ -20,22 +20,29 @@
   <!-- Preload fonts -->
   <link rel="preload" href="fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
 
+  <!-- DocSearch CSS -->
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@4" />
+
   <!-- Styles -->
   <link href="vendor/font-awesome-6.7.2/css/all.min.css" rel="stylesheet" />
   <link href="css/index.css" rel="stylesheet" type="text/css" />
   <link href="css/pricing.css" rel="stylesheet" type="text/css" />
   <link href="css/tablet.css" rel="stylesheet" type="text/css" />
   <link href="css/mobile.css" rel="stylesheet" type="text/css" />
+  <link href="css/search.css" rel="stylesheet" type="text/css" />
   <script src="js/main.js" type="text/javascript" defer></script>
+  <script src="js/search.js" type="text/javascript" defer></script>
   <script src="js/pricing.js" type="text/javascript" defer></script>
 </head>
 
 <body>
   <div class="background-gradient"></div>
   <div class="page-container">
     <header class="nav-container">
-      <a href="index.html" class="nav-brand"><img src="images/Logo-Template.svg" loading="lazy"
-          alt="Logo Template" /></a>
+      <div class="nav-brand">
+        <a href="index.html"><img src="images/Logo-Template.svg" width="132" height="28" alt="Logo Template" /></a>
+        <div id="docsearch" class="button tertiary compact search-container" aria-label="Search"></div>
+      </div>
       <nav role="navigation" class="nav-menu" data-navigation>
         <a href="pricing.html" class="nav-link">Pricing</a>
         <a href="https://mintlify.com" class="nav-link">Docs ↗</a>
@@ -302,6 +309,7 @@ <h1>Pricing</h1>
       </div>
     </footer>
   </div>
+  <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@4"></script>
 </body>
 
 </html>