Redid the entire CSS classes, too many conflicts

Author: fredericsimard

overrides/assets/stylesheets/additional.css

@@ -1,16 +1,49 @@
+/* ==============================================
+   MKDOCS MATERIAL CUSTOM CSS
+   ============================================== */
+
+/* Font Imports */
 @import url("https://fonts.googleapis.com/css2?family=Raleway:wght@900&display=swap");
 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");
 
-:root  > * {
-  --md-primary-fg-color:        #1B58A4;
-  --md-primary-fg-color--light: #4892ec;
-  --md-primary-fg-color--dark:  #1B58A4;
-}
-
-h1,
-h2,
-h3,
-h4 {
+/* ==============================================
+   CSS VARIABLES - BLUE COLOR PALETTE
+   ============================================== */
+:root {
+  /* Primary Blue Colors */
+  --primary-blue: #1B58A4;
+  --primary-blue-light: #4892ec;
+  --primary-blue-dark: #1B58A4;
+  
+  /* Additional Blue Shades */
+  --blue-darker: #0f3d73;
+  --blue-lighter: #6bb6ff;
+  --blue-accent: #2094f3;
+  
+  /* Neutral Colors */
+  --white: #ffffff;
+  --black: #000000;
+  --gray-light: #757575;
+  --gray-medium: #9e9e9e;
+}
+
+/* ==============================================
+   MKDOCS MATERIAL COLOR SCHEME
+   ============================================== */
+
+/* Custom Primary Color Definition */
+[data-md-color-primary=custom] {
+  --md-primary-fg-color: var(--primary-blue);
+  --md-primary-fg-color--light: var(--primary-blue-light);
+  --md-primary-fg-color--dark: var(--primary-blue-dark);
+}
+
+/* ==============================================
+   TYPOGRAPHY
+   ============================================== */
+
+/* Headings */
+h1, h2, h3, h4 {
   font-family: "Raleway", sans-serif;
 }
 
@@ -27,44 +60,72 @@ h3 {
   font-size: 30px;
 }
 
-p,
-a,
-li {
+/* Body Text */
+p, a, li {
   font-family: "Poppins", sans-serif;
 }
 
-.md-typeset.admonition {
-  font-size: 0.8rem;
-  font-weight: 300;
-  line-height: 1.1;
-}
-
+/* Navigation */
 .md-nav {
   font-family: "Raleway", sans-serif;
   font-weight: 300;
   font-size: 0.7rem;
 }
 
+/* ==============================================
+   LAYOUT
+   ============================================== */
+
+/* Grid Layout */
+.md-grid {
+  max-width: initial;
+}
+
+/* Header Logo */
 .md-header__button.md-logo img {
   height: 2.4rem;
 }
 
-.md-grid {
-  max-width: initial;
+/* ==============================================
+   FOOTER STYLING
+   ============================================== */
+
+/* Footer Background and Text */
+.md-footer {
+  color: var(--white) !important;
+}
+
+/* Footer Links and Navigation */
+.md-footer__link,
+.md-footer__title,
+.md-footer__direction {
+  color: var(--white) !important;
+}
+
+/* Footer Icons */
+.md-footer .md-icon {
+  color: var(--white) !important;
+}
+
+/* Footer Copyright/Generator Text */
+.md-copyright {
+  color: var(--white) !important;
+}
+
+/* Footer Meta Content */
+.md-footer-meta {
+  color: var(--white) !important;
 }
 
-.version-tag {
-  background-color: #ffff; /* Green */
-  border: none;
-  color: #2094f3;
-  padding: 10px;
-  text-align: center;
-  display: inline-block;
-  font-size: 16px;
-  margin: 4px 2px;
-  border-radius: 4px;
+/* All Footer Links */
+.md-footer a {
+  color: var(--white) !important;
 }
 
+/* ==============================================
+   LOGO GRID LAYOUT
+   ============================================== */
+
 .logo-grid {
   display: grid;
   gap: 1rem;
@@ -76,6 +137,7 @@ li {
   justify-content: center;
 }
 
+/* Responsive Grid Layout */
 @media (min-width: 768px) {
   .logo-grid {
     gap: 2rem;
@@ -90,6 +152,21 @@ li {
   }
 }
 
+/* ==============================================
+   THEME MODE HANDLING
+   ============================================== */
+
+/* Light Mode Specific */
+body[data-md-color-scheme="default"] {
+  /* Add light mode specific styles here */
+}
+
+/* Dark Mode Specific */
+body[data-md-color-scheme="slate"] {
+  /* Add dark mode specific styles here */
+}
+
+/* Theme Toggle Visibility */
 body[data-md-color-scheme="slate"] .show-light-mode,
 body[data-md-color-scheme="default"] .show-dark-mode {
   display: none;
@@ -98,53 +175,4 @@ body[data-md-color-scheme="default"] .show-dark-mode {
 body[data-md-color-scheme="default"] .show-light-mode,
 body[data-md-color-scheme="slate"] .show-dark-mode {
   display: unset;
-}
-
-/* ========================================
-   ACCESSIBILITY CONTRAST FIXES
-   ======================================== */
-
-/* Fix header topic and source repository text */
-.md-header__topic .md-ellipsis,
-.md-header__source .md-source__repository {
-  color: #ffffff !important;
-}
-
-/* Fix navigation tabs contrast */
-.md-tabs__link {
-  color: #ffffff !important;
-}
-
-/* Fix active navigation link */
-.md-nav__link--active {
-  color: #1976d2 !important;
-}
-
-/* Fix all links for better contrast */
-a {
-  color: #1976d2 !important;
-}
-
-/* Fix copyright text */
-.md-copyright {
-  color: #757575 !important;
-}
-
-/* Dark mode adjustments */
-body[data-md-color-scheme="slate"] .md-header__topic .md-ellipsis,
-body[data-md-color-scheme="slate"] .md-header__source .md-source__repository {
-  color: #ffffff !important;
-}
-
-body[data-md-color-scheme="slate"] .md-tabs__link {
-  color: #ffffff !important;
-}
-
-/* Dark mode link adjustments */
-body[data-md-color-scheme="slate"] a {
-  color: #64b5f6 !important;
-}
-
-body[data-md-color-scheme="slate"] .md-copyright {
-  color: #9e9e9e !important;
 }