fix: style guidelines

Author: oxlumi

sites/aztec/docusaurus.config.ts

@@ -71,7 +71,7 @@ const localConfig: Config = {
   ],
 
   themeConfig: {
-    image: "img/social-card.jpg",
+    image: "img/social-card.png",
     navbar: {
       title: "",
       logo: {

sites/aztec/src/css/local.css

@@ -2,8 +2,24 @@
 
 /* Shape, Icons, etc customization */
 :root {
-  --wonderland-accent: #A39FED;
-  --aztec-purple: #625CBF;
+  --wonderland-accent: #D5FF2A;
+  --aztec-purple: #D5FF2A;
+  background-color: #2E0700;
+
+  /* Docs primary (Infima) */
+  --ifm-color-primary: #D5FF2A;
+  --ifm-color-primary-dark: #b1d61a;
+  --ifm-color-primary-darker: #91b516;
+  --ifm-color-primary-light: #e1ff6b;
+  --ifm-color-primary-lighter: #eeff9c;
+}
+
+/* Override shared surface token only on docs pages so local theme wins */
+html.docs-doc-page {
+  --wonderland-blue-950: #2E0700 !important;
+  --ifm-background-surface-color: #2E0700 !important;
+  --ifm-card-background-color: #2E0700 !important;
+  --ifm-background-color: #2E0700 !important; /* affects disclaimer modal bg */
 }
 
 /* Sidebar menu icons */
@@ -129,3 +145,213 @@
   align-items: center;
   gap: 0.5rem;
 }
+
+.navbar {
+  background-color: #2E0700 !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+nav.navbar.navbar--fixed-top {
+  background-color: #2E0700 !important;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Sidebar (desktop + menu list) */
+.theme-doc-sidebar-container,
+.menu,
+html.docs-doc-page .theme-doc-sidebar-container,
+html.docs-doc-page .menu {
+  background: #2E0700 !important;
+  border-right: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Sidebar (mobile drawer) */
+.navbar-sidebar {
+  background: #2E0700 !important;
+  border-right: 1px solid rgba(255, 255, 255, 0.15);
+}
+
+/* Sidebar accent overrides */
+.menu__link {
+  color: #ffffff !important;
+}
+
+.menu__list .menu__link:hover {
+  background: #2E0700 !important;
+  color: #ffffff !important;
+}
+
+.menu__link--active:not(.menu__link--sublist) {
+  background: #2E0700 !important;
+  color: #ffffff !important;
+}
+
+/* Ensure main section titles are yellow */
+.theme-doc-sidebar-item-category
+  .menu__list-item-collapsible
+  .menu__link[href^="/docs/background"],
+.theme-doc-sidebar-item-category
+  .menu__list-item-collapsible
+  .menu__link[href^="/docs/stack"],
+.theme-doc-sidebar-item-category
+  .menu__list-item-collapsible
+  .menu__link[href^="/docs/block-production"],
+.theme-doc-sidebar-item-category
+  .menu__list-item-collapsible
+  .menu__link[href^="/docs/contracts"] {
+  color: var(--wonderland-accent) !important;
+}
+/* Collapse sidebar button */
+.theme-doc-sidebar-container button[class*="collapseSidebarButton"] {
+  background: #2E0700 !important;
+  border-top: 1px solid rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+}
+
+/* Collapse button icon colors */
+.theme-doc-sidebar-container button[class*="collapseSidebarButton"] {
+  color: #ffffff !important;
+}
+.theme-doc-sidebar-container button[class*="collapseSidebarButton"]:hover {
+  color: #D5FF2A !important;
+}
+.theme-doc-sidebar-container button[class*="collapseSidebarButton"] svg path {
+  fill: none !important;
+  stroke: currentColor !important;
+}
+/* Callouts (admonitions) */
+.alert {
+  --ifm-alert-background-color: #2E0700 !important;
+  --ifm-alert-border-color: #D5FF2A !important;
+  background: #2E0700 !important;
+  border: 1px solid #D5FF2A !important;
+  color: #ffffff;
+}
+
+.alert--info,
+.alert--warning,
+.alert--danger,
+.alert--secondary,
+.alert--success {
+  --ifm-alert-background-color: #2E0700 !important;
+  --ifm-alert-border-color: #D5FF2A !important;
+}
+
+/* Codeblock accents */
+.theme-code-block__title,
+div[class*="codeBlockTitle"],
+[class*="playgroundHeader"] {
+  border-bottom: 1px solid #D5FF2A !important;
+}
+
+/* Navbar searchbar accent overrides */
+.navbar.navbar--dark {
+  --ifm-navbar-search-input-background-color: #2E0700;
+}
+
+.navbar__search-input {
+  background-color: #2E0700 !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+.navbar__search .algolia-autocomplete {
+  --ifm-background-color: #2E0700;
+}
+
+.navbar__search .algolia-autocomplete .ds-dropdown-menu [class^="ds-dataset-"] {
+  background: #2E0700 !important;
+  border: 1px solid rgba(255, 255, 255, 0.15) !important;
+}
+
+.navbar__search .algolia-autocomplete .algolia-docsearch-suggestion,
+.navbar__search .algolia-autocomplete .algolia-docsearch-suggestion--no-results {
+  background: #2E0700 !important;
+}
+
+/* Table of contents accent */
+.table-of-contents__link {
+  color: #ffffff !important;
+}
+.table-of-contents__link:hover,
+.table-of-contents__link--active {
+  color: #D5FF2A !important;
+}
+
+.table-of-contents {
+  border-left: 1px solid #D5FF2A !important;
+}
+
+/* Navbar toggle/close icons - force white */
+.navbar__toggle,
+.navbar-sidebar__close {
+  color: #ffffff !important;
+}
+.navbar__toggle svg,
+.navbar__toggle svg path,
+.navbar-sidebar__close svg,
+.navbar-sidebar__close svg path {
+  fill: #ffffff !important;
+  stroke: #ffffff !important;
+}
+
+/* Disclaimer button accent */
+#disclaimer-btn {
+  color: #D5FF2A !important;
+}
+#disclaimer-btn:hover {
+  color: #D5FF2A !important;
+  opacity: 0.9;
+}
+/* Pagination button highlight */
+.pagination-nav__link {
+  border: 1px solid #D5FF2A !important;
+}
+
+.pagination-nav__link:hover {
+  border: 1px solid #D5FF2A !important;
+}
+
+/* Breadcrumb tabs */
+.breadcrumbs__link {
+  background: #2E0700 !important;
+  color: #D5FF2A !important;
+  border: 1px solid #D5FF2A !important;
+  border-radius: 9999px !important;
+  padding: 0.4rem 0.8rem !important;
+}
+
+.breadcrumbs__item--active .breadcrumbs__link {
+  background: #2E0700 !important;
+  color: #D5FF2A !important;
+  border-color: #D5FF2A !important;
+}
+
+.breadcrumbs__link:hover {
+  color: #D5FF2A !important;
+  border-color: #D5FF2A !important;
+}
+
+/* Codeblock background override to Aztec maroon */
+.theme-code-block,
+div[class^="codeBlock"],
+div[class^="codeBlockContainer"],
+div[class^="codeBlockContent"],
+.prism-code,
+pre[class*="language-"],
+code[class*="language-"],
+.code-block-container {
+  background-color: #2E0700 !important;
+  backdrop-filter: none !important;
+  -webkit-backdrop-filter: none !important;
+}
+
+.theme-code-block::before {
+  background: #2E0700 !important;
+}
+
+.token,
+.token-line,
+.token span,
+[class*="codeLine"] {
+  background: #2E0700 !important;
+}

sites/aztec/src/pages/index.module.css

@@ -30,7 +30,7 @@
 
 /* Aztec background */
 .aztecBackground {
-  background: url("/common/img/common-background.png") no-repeat center 0;
+  background: url("/common/img/common-background-aztec.png") no-repeat center 0;
   background-size: cover;
   min-height: 100vh;
   position: absolute;
@@ -39,7 +39,7 @@
   right: 0;
   bottom: 0;
   z-index: -1;
-  filter: hue-rotate(240deg) saturate(1.1) brightness(0.8);
+  filter: none;
 }
 
 @media (max-width: 1200px) {