fix(src): cleanup custom css

Author: dineshpinto

src/css/custom.css

@@ -1,19 +1,19 @@
 /**
- * Any CSS included here will be global. The classic template
- * bundles Infima by default. Infima is a CSS framework designed to
- * work well for content-centric websites.
+ * Global site style sheet.
  */
 
-/* You can override the default Infima variables here. */
-
+/* Fonts */
 @font-face {
   font-family: "Satoshi";
   src: url("/fonts/Satoshi/Satoshi-Variable.woff2") format("woff2");
   font-display: swap;
 }
 
+/* ============================================================
+   Tokens (Light)
+   ============================================================ */
 :root {
-  /* Colors */
+  /* Brand palette */
   --ifm-color-primary: #e62058;
   --ifm-color-primary-dark: #d01055;
   --ifm-color-primary-darker: #c10f45;
@@ -22,15 +22,18 @@
   --ifm-color-primary-lighter: #fd738f;
   --ifm-color-primary-lightest: #f2528b;
 
-  /* Infima Variables Overrides */
+  /* Typography */
   --ifm-font-family-base: "Satoshi";
   --ifm-font-family-heading: "Satoshi";
   --ifm-heading-font-weight: 450;
   --ifm-font-weight-bold: 580;
   --ifm-font-size-base: 16px;
+
+  /* Shape */
   --ifm-global-radius: 0.625rem;
   --ifm-global-radius-med: 1.25rem;
-  --ifm-card-font-weight: 580;
+
+  /* Surfaces */
   --ifm-background-color: #ffffff;
 
   /* Navbar */
@@ -51,6 +54,7 @@
   /* Cards */
   --ifm-card-background-color: #ffe4e8;
   --ifm-card-description-color: #000000;
+  --ifm-card-font-weight: 580;
 
   /* Breadcrumbs */
   --ifm-breadcrumb-item-background-active: none;
@@ -65,15 +69,17 @@
   --ifm-table-head-background: transparent;
   --ifm-table-stripe-background: transparent;
 
-  /* Custom Variables */
+  /* Custom */
   --search-local-highlight-color: var(--ifm-color-primary);
   --ifm-swagger-heading-light: #e3e3e3;
   --ifm-swagger-heading-dark: #1c1e21;
 }
 
-/* For readability concerns, you should choose a lighter palette in dark mode. */
+/* ============================================================
+   Tokens (Dark)
+   ============================================================ */
 [data-theme="dark"] {
-  /* Colors */
+  /* Brand palette */
   --ifm-color-primary: #e62058;
   --ifm-color-primary-dark: #ec2d6e;
   --ifm-color-primary-darker: #e62058;
@@ -82,15 +88,14 @@
   --ifm-color-primary-lighter: #f375a0;
   --ifm-color-primary-lightest: #f7a0be;
 
-  /* Infima Variables Overrides */
-  --ifm-navbar-background-color: #000000;
-  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
-  --ifm-footer-background-color: #000000;
-  --ifm-background-color: #000000 !important;
+  /* Surfaces */
+  --ifm-background-color: #000000;
   --ifm-card-background-color: #1d1d1d;
+  --ifm-footer-background-color: #000000;
 
   /* Navbar */
   --ifm-navbar-background-color: #050000;
+  --ifm-navbar-search-input-icon: url('data:image/svg+xml;utf8,<svg fill="white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><path d="M6.02945,10.20327a4.17382,4.17382,0,1,1,4.17382-4.17382A4.15609,4.15609,0,0,1,6.02945,10.20327Zm9.69195,4.2199L10.8989,9.59979A5.88021,5.88021,0,0,0,12.058,6.02856,6.00467,6.00467,0,1,0,9.59979,10.8989l4.82338,4.82338a.89729.89729,0,0,0,1.29912,0,.89749.89749,0,0,0-.00087-1.29909Z" /></svg>');
 
   /* Sidebar (Menu) */
   --ifm-menu-color-background-active: #34101c;
@@ -105,41 +110,35 @@
   --ifm-table-border-color: rgba(255, 255, 255, 0.1);
   --ifm-table-head-background: var(--ifm-background-color);
 
-  /* Custom Variables */
+  /* Custom */
   --search-local-highlight-color: var(--ifm-color-primary-lighter);
 }
 
-/* --- GLOBAL ELEMENT STYLES --- */
-
-/* Resize headings */
-h1,
+/* ============================================================
+   Content (Markdown)
+   ============================================================ */
 .markdown h1 {
   font-size: 2.2rem;
 }
 
-h2,
 .markdown h2 {
   font-size: 1.6rem;
 }
 
-h3,
 .markdown h3 {
   font-size: 1.2rem;
 }
 
-h4 {
+.markdown h4 {
   font-weight: 575;
-  /* Specific weight for h4 */
 }
 
-body {
+.markdown body {
   font-weight: 450;
-  /* Specific weight for body */
 }
 
-[data-theme="dark"] p {
+html[data-theme="dark"] .markdown p {
   color: #ababab;
-  /* Off-white in dark mode */
 }
 
 html[data-theme="dark"] .markdown ul li,
@@ -156,7 +155,7 @@ h2.cardTitle,
   font-weight: var(--ifm-card-font-weight);
 }
 
-/* Accessibility helper */
+/* Utilities */
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -169,9 +168,12 @@ h2.cardTitle,
   border-width: 0;
 }
 
-/* --- LAYOUT & COMPONENTS --- */
+/* ============================================================
+   Theme UI (Navbar / Sidebar / TOC / Breadcrumbs / Footer)
+   ============================================================ */
 
-/* Announcement bar */
+/* Announcement bar: stable + hashed fallback */
+.announcementBar,
 div[class^="announcementBar"] {
   font-size: 20px;
   font-weight: 550;
@@ -195,14 +197,12 @@ div[class^="announcementBar"] {
 
 .navbar-sidebar__back {
   display: none;
-  /* Hides the "Back" button on mobile sidebar */
 }
 
 .navbar__items {
   color: var(--ifm-navbar-link-color);
 }
 
-/* Navbar toggle */
 .navbar__toggle {
   color: #1c1b1f;
 }
@@ -211,7 +211,7 @@ div[class^="announcementBar"] {
   color: #ffffff;
 }
 
-/* Navbar GitHub Link */
+/* Navbar GitHub icon */
 .header-github-link::before {
   content: "";
   width: 24px;
@@ -241,7 +241,7 @@ div[class^="announcementBar"] {
   }
 }
 
-/* Navbar Search */
+/* Navbar search */
 .navbar__search-input {
   border-radius: var(--ifm-global-radius);
   width: 270px;
@@ -256,24 +256,21 @@ div[class^="announcementBar"] {
   outline: solid var(--ifm-global-border-width) var(--ifm-color-primary);
 }
 
-/* Search Dropdown */
+/* Search dropdown */
+.searchBar .dropdown-menu,
 div[class^="searchBar_"] .dropdown-menu {
-  /* Target dropdown menu more generically */
   padding: 0px;
   background-color: var(--ifm-navbar-search-dropdown-bg);
   border-radius: var(--ifm-global-radius);
   border: 1px solid var(--ifm-toc-border-color);
-  /* Use an existing border color variable */
 }
 
 div[class^="searchBar_"] .dropdown-menu a[class^="suggestion_"] {
-  /* Target suggestion links */
   margin: 1px;
   border-radius: 0px;
 }
 
 div[class^="searchBar_"] div[class*="hitFooter"] {
-  /* Target footer, use class contains */
   margin-top: 1px;
   text-align: center;
   display: flex;
@@ -283,10 +280,8 @@ div[class^="searchBar_"] div[class*="hitFooter"] {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.35;
-  /* Use relative line height. Removed !important */
   background-color: var(--ifm-navbar-search-dropdown-bg);
   border-top: 1px solid var(--ifm-toc-border-color);
-  /* Add separator */
 }
 
 div[class^="searchBar_"] div[class*="hitFooter"] a {
@@ -304,7 +299,7 @@ div[class^="searchBar_"] div[class*="hitFooter"] a:hover {
   color: var(--ifm-navbar-link-color);
 }
 
-/* Sidebar Menu (Consolidated Styles) */
+/* Sidebar menu */
 .menu {
   background-color: var(--ifm-sidebar-background-color);
   padding-top: 1.5rem;
@@ -320,7 +315,6 @@ div[class^="searchBar_"] div[class*="hitFooter"] a:hover {
   margin-top: 0.75rem;
 }
 
-/* Styling for links and collapsible buttons */
 .menu__link {
   padding: 10px 12px;
 }
@@ -347,28 +341,22 @@ div[class^="searchBar_"] div[class*="hitFooter"] a:hover {
   padding-right: 0.75rem;
 }
 
-/* Caret icon */
 .menu__caret:before {
   background: var(--ifm-menu-link-sublist-icon) 50% / 2rem 1.5rem;
 }
 
-/* Sidebar menu icons. */
-/* Sidebar Menu Icons (Consolidated) */
+/* Sidebar icons */
 .menu__link[href*="/ftso/overview"]::before,
 .menu__link[href*="/fdc/overview"]::before,
 .menu__link[href*="/fassets/overview"]::before {
   content: " ";
   display: block;
   flex-shrink: 0;
-  /* Prevent icon shrinking */
   background-repeat: no-repeat;
   background-position: center;
   margin-right: 10px;
-  /* Consistent margin */
-  /* Specific sizes set below */
 }
 
-/* Specific Icon Styles (Sizes adjusted here) */
 .menu__link[href*="/ftso/overview"]::before {
   width: 26px;
   height: 26px;
@@ -402,7 +390,7 @@ div[class^="searchBar_"] div[class*="hitFooter"] a:hover {
   background-image: url("/img/menu/FASSETS_dark.svg");
 }
 
-/* Table of Contents (TOC) */
+/* TOC */
 .table-of-contents__link {
   padding: 4px 12px;
   width: fit-content;
@@ -442,55 +430,63 @@ div[class^="searchBar_"] div[class*="hitFooter"] a:hover {
   opacity: 1;
 }
 
-/* Tables - Basic Reset (Affects ALL tables) */
-table tr:nth-child(2n) {
+/* ============================================================
+   Tables (Markdown)
+   ============================================================ */
+.markdown table tr:nth-child(2n),
+.theme-doc-markdown table tr:nth-child(2n) {
   background-color: transparent;
 }
 
-table tr:nth-child(n) {
-  background-color: transparent;
-}
-
-table th:first-child,
-td:first-child {
+.markdown table th:first-child,
+.markdown table td:first-child,
+.theme-doc-markdown table th:first-child,
+.theme-doc-markdown table td:first-child {
   border-left: none;
 }
 
-table th:last-child,
-td:last-child {
+.markdown table th:last-child,
+.markdown table td:last-child,
+.theme-doc-markdown table th:last-child,
+.theme-doc-markdown table td:last-child {
   background-color: transparent;
   border-right: none;
 }
 
-table tr:first-child th,
-tr:first-child td {
+.markdown table tr:first-child th,
+.markdown table tr:first-child td,
+.theme-doc-markdown table tr:first-child th,
+.theme-doc-markdown table tr:first-child td {
   border-top: none;
 }
 
-table thead {
+.markdown table thead,
+.theme-doc-markdown table thead {
   background-color: transparent;
 }
 
-table thead tr {
+.markdown table thead tr,
+.theme-doc-markdown table thead tr {
   border-top: none;
   border-bottom: none;
 }
 
-table tr:last-child th,
-tr:last-child td {
+.markdown table tr:last-child th,
+.markdown table tr:last-child td,
+.theme-doc-markdown table tr:last-child th,
+.theme-doc-markdown table tr:last-child td {
   border-bottom: none;
   background-color: transparent;
 }
 
-/* End Basic Table Reset */
-
-/* Tippy.js Custom Theme */
+/* ============================================================
+   Tippy.js
+   ============================================================ */
 .tippy-box[data-theme="custom"] {
   background-color: #333;
   color: #fff;
   font-size: 14px;
   padding: 8px 12px;
-  border-radius: 5px;
   max-width: 300px;
   white-space: normal;
   border-radius: var(--ifm-global-radius);