style: align client with NHCarrigan style guide

- Remove shared stylesheet stripping; let headers/index.js apply the
  witch palette, Griffy/Kalam fonts, and mystical backgrounds
- Replace custom CSS vars and Vampyr font with style guide tokens
- Update all component CSS to use witch palette variables
- Fix sanctions sort to descending by case number
- Update Hikari image URLs to cdn.nhcarrigan.com/hikari.png

client/src/app/announcements/announcements.css

@@ -1,11 +1,11 @@
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
-:host ::ng-deep ul{
+:host ::ng-deep ul {
   list-style-type: disc;
   list-style-position: inside;
 }
@@ -15,6 +15,7 @@ hr {
   margin-bottom: 1em;
   width: 90%;
 }
+
 .tag {
   display: inline-block;
   padding: 0 0.5em;
@@ -23,13 +24,13 @@ hr {
 }
 
 .products {
-  background-color: #e0f7fa;
+  background-color: var(--witch-plum);
-  color: #006064;
+  color: var(--witch-moon);
 }
 
 .community {
-  background-color: #e8f5e9;
+  background-color: var(--witch-rose);
-  color: #1b5e20;
+  color: var(--witch-moon);
 }
 
 .date {

client/src/app/home/home.css

@@ -4,7 +4,7 @@ ul {
   margin: 0;
 }
 
-::ng-deep main{
+::ng-deep main {
   overflow: hidden !important;
   max-width: 100%;
 }
@@ -53,20 +53,22 @@ ul {
   justify-content: space-evenly;
   align-items: center;
   flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 1em;
 }
 
 .btn {
   display: inline-block;
   padding: 10px 20px;
-    background-color: var(--foreground);
+  background-color: var(--accent);
-    color: var(--background);
+  color: var(--witch-moon);
   text-decoration: none;
   border-radius: 50px;
-    border: 2px solid white;
+  border: 2px solid var(--border);
 }
 
 .btn:hover {
-    background-color: var(--background);
+  background-color: var(--highlight);
   color: var(--foreground);
   transition: background-color 0.3s, color 0.3s;
 }
@@ -91,11 +93,6 @@ ul {
   100% { opacity: 1; }
 }
 
-@keyframes background-color {
-    0% { background-color: var(--foreground); }
-    100% { background-color: var(--background); }
-}
-
 @media screen and (prefers-reduced-motion: reduce) {
   * {
     animation: none !important;

client/src/app/home/home.html

@@ -1,8 +1,9 @@
 <h1>Hi there, I'm Hikari~!</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p id="one">How may I help you today?</p>
 <p id="two">I can assist you with:</p>

client/src/app/nav/nav.css

@@ -6,11 +6,13 @@ nav {
   height: 40px;
   color: var(--foreground);
   background-color: var(--background);
+  border-bottom: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding-left: 15px;
   padding-right: 15px;
+  z-index: 100;
 }
 
 nav a:not(#logo) {
@@ -34,7 +36,7 @@ img {
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
@@ -50,7 +52,7 @@ hr {
   top: 40px;
   background-color: var(--background);
   color: var(--foreground);
-  border: 1px solid var(--foreground);
+  border: 1px solid var(--border);
   border-radius: 5px;
   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 }
@@ -59,7 +61,6 @@ hr {
   display: flex;
   align-items: center;
   justify-content: center;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
   text-decoration: none;
   font-size: 2rem;
 }

client/src/app/products/products.css

@@ -3,33 +3,33 @@ a.product {
 }
 
 a.product:hover {
-  background-color: var(--background);
+  background-color: var(--highlight);
   color: var(--foreground);
 }
 
 .product:not(a) {
   cursor: default;
-  border: 2px dashed grey;
+  border: 2px dashed var(--witch-silver);
 }
 
 .btn {
   display: inline-block;
   padding: 10px 20px;
-    background-color: var(--foreground);
+  background-color: var(--accent);
-    color: var(--background);
+  color: var(--witch-moon);
   text-decoration: none;
   border-radius: 50px;
-    border: 2px solid white;
+  border: 2px solid var(--border);
-    font-family: 'OpenDyslexic', monospace;
 }
 
 .btn:disabled {
-    background-color: var(--background);
+  background-color: var(--witch-plum);
-    color: var(--foreground);
+  color: var(--witch-moon);
+  opacity: 0.6;
 }
 
 .btn:hover {
-    background-color: var(--background);
+  background-color: var(--highlight);
   color: var(--foreground);
   transition: background-color 0.3s, color 0.3s;
 }
@@ -38,9 +38,9 @@ a.product:hover {
   display: grid;
   grid-template-areas: "logo title icon" "logo description icon";
   grid-template-columns: 100px 1fr auto;
-  background-color: var(--foreground);
+  background-color: var(--witch-plum);
-  color: var(--background);
+  color: var(--witch-moon);
-  border: 2px solid white;
+  border: 2px solid var(--border);
   border-radius: 50px;
   margin-left: 10px;
   margin-right: 10px;
@@ -49,6 +49,14 @@ a.product:hover {
   align-items: center;
 }
 
+.title {
+  color: var(--witch-moon);
+}
+
+.description {
+  color: var(--witch-moon);
+}
+
 .icons {
   grid-area: icon;
   font-size: 2rem;

client/src/app/products/products.html

@@ -1,8 +1,9 @@
 <h1>Products</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-thinking-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p>Excellent! What sort of product are you looking for?</p>
 <div class="row">

client/src/app/sanctions/sanctions.css

@@ -1,11 +1,11 @@
 hr {
   width: 100%;
   border: none;
-  border-top: 1px solid var(--foreground);
+  border-top: 1px solid var(--border);
   margin: 0;
 }
 
-:host ::ng-deep ul{
+:host ::ng-deep ul {
   list-style-type: disc;
   list-style-position: inside;
 }
@@ -15,13 +15,14 @@ hr {
   margin-bottom: 1em;
   width: 90%;
 }
+
 .tag {
   display: inline-block;
   padding: 0 0.5em;
   border-radius: 50px;
   font-size: 0.8em;
-  background-color: #e0f7fa;
+  background-color: var(--witch-plum);
-  color: #006064;
+  color: var(--witch-moon);
 }
 
 .date {

client/src/app/sanctions/sanctions.ts

@@ -31,10 +31,6 @@ export class Sanctions {
 
   private async loadSanctions(): Promise<void> {
     const sanctions = await this.sanctionsService.getSanctions();
-    this.sanctions = sanctions.sort((a, b) => {
+    this.sanctions = sanctions.sort((a, b) => b.number - a.number);
-      return b.createdAt > a.createdAt
-        ? 1
-        : -1;
-    });
   }
 }

client/src/app/soon/soon.css

@@ -1,15 +1,15 @@
 .btn {
   display: inline-block;
   padding: 10px 20px;
-    background-color: var(--foreground);
+  background-color: var(--accent);
-    color: var(--background);
+  color: var(--witch-moon);
   text-decoration: none;
   border-radius: 50px;
-    border: 2px solid white;
+  border: 2px solid var(--border);
 }
 
 .btn:hover {
-    background-color: var(--background);
+  background-color: var(--highlight);
   color: var(--foreground);
   transition: background-color 0.3s, color 0.3s;
 }

client/src/app/soon/soon.html

@@ -1,8 +1,9 @@
 <h1>Oh dear~!</h1>
 <img
-  src="https://cdn.nhcarrigan.com/new-avatars/hikari-cry-full.png"
+  src="https://cdn.nhcarrigan.com/hikari.png"
   alt="Hikari"
   height="250"
+  style="display: block; margin: auto;"
 />
 <p>You appear to have become lost!</p>
 <p>

client/src/index.html

@@ -15,10 +15,4 @@
     <app-root></app-root>
   </body>
   <script src="https://cdn.nhcarrigan.com/headers/index.js"></script>
-  <script>
-    const styleElement = document.getElementById("nhcarrigan-global-styles");
-    if (styleElement) {
-      styleElement.remove();
-    }
-  </script>
 </html>

client/src/styles.css

@@ -1,102 +1,12 @@
-@font-face {
+/* Account for the fixed navigation bar */
-  font-family: 'Vampyr';
-  src: url('https://cdn.nhcarrigan.com/fonts/vampyr.ttf') format('truetype');
-}
-
-:root {
-  --foreground: #8F2447;
-  --background: #E1F6F9DC;
-}
-
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-family: 'Vampyr', monospace;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/cursor.cur'), auto;
-  min-height: 100vh;
-  min-width: 100vw;
-}
-body::before {
-  background: url(https://cdn.nhcarrigan.com/background.png);
-  background-size: cover;
-  background-position: center;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  content: "";
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 1;
-  pointer-events: none;
-}
 main {
-  color: var(--foreground);
-  background-color: var(--background);
-  text-align: center;
-  border-radius: 10px;
-  width: 100vw;
-  margin-bottom: 85px;
   margin-top: 50px;
-  min-height: calc(100vh - 85px - 50px);
+  min-height: calc(100vh - 50px - 85px);
-}
-footer {
-  width: 100%;
-  color: var(--foreground);
-  background-color: var(--background);
-  position: fixed;
-  bottom: 0;
-  height: 75px;
-  padding: 0 10px;
-}
-#footer-inner-container {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 75px;
-}
-#footer-badge-container {
-  display: grid;
-  grid-template-columns: repeat(8, 1fr);
-  align-items: center;
-  justify-content: space-around;
-}
-#audio-theme-button, #theme-select-button {
-  background: none;
-  border: none;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-  color: var(--foreground);
-}
-a {
-  color: unset;
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-}
-.btn:not(:disabled) {
-  cursor: url('https://cdn.nhcarrigan.com/cursors/pointer.cur'), pointer;
-}
-#tree-nation-offset-website {
-  display: flex;
-  align-items: center;
-}
-.is-dark {
-  --foreground: #E1F6F9;
-  --background: #8F2447bb;
 }
+
 @media screen and (max-width: 625px) {
-  #tree-nation-offset-website {
-    display: none;
-  }
-  footer, #footer-inner-container {
-    height: 50px;
-    justify-content: space-around;
-  }
   main {
     margin-bottom: 60px;
+    min-height: calc(100vh - 50px - 60px);
   }
 }