fix(ui): robust hero section and sleek header hierarchy

- Switched hero buttons to direct HTML for reliable rendering
- Forced white color for hero H1 and P with high specificity
- Restored sleek, lightweight (weight 300) hierarchy for H2-H6
- Removed default H2 borders for a cleaner layout

Author: jgeluk

docs/index.md

@@ -24,12 +24,9 @@ hide:
 Deliver strategic business value and agility through connected
 enterprise knowledge — one use case at a time.
 
-<div class="hero-buttons" markdown="1">
-
-[Explore the Use Case Tree](concept/use-case-tree.md){ .md-button
-.md-button--primary }
-[Browse example use cases](https://catalog.ekgf.org/){ .md-button }
-
+<div class="hero-buttons">
+<a href="concept/use-case-tree.md" class="md-button md-button--primary">Explore the Use Case Tree</a>
+<a href="https://catalog.ekgf.org/" class="md-button">Browse example use cases</a>
 </div>
 
 </div>

docs/stylesheets/extra.css

@@ -111,7 +111,8 @@
   display: block;
 }
 
-.md-typeset .hero-container h1 {
+.md-typeset .hero-container h1,
+[data-md-color-scheme="slate"] .md-typeset .hero-container h1 {
   color: white !important;
   font-size: 3rem !important;
   font-weight: 800 !important;
@@ -127,7 +128,8 @@
   display: none !important;
 }
 
-.md-typeset .hero-container p {
+.md-typeset .hero-container p,
+[data-md-color-scheme="slate"] .md-typeset .hero-container p {
   font-size: 1.25rem !important;
   max-width: 850px !important;
   margin-left: auto !important;
@@ -146,7 +148,8 @@
   flex-wrap: wrap;
 }
 
-.hero-buttons .md-button {
+.hero-buttons .md-button,
+[data-md-color-scheme="slate"] .hero-buttons .md-button {
   margin: 0 !important;
   padding: 0.6rem 1.5rem !important;
   font-weight: 700 !important;
@@ -157,13 +160,17 @@
   min-width: 180px;
 }
 
-.hero-buttons .md-button--primary {
+.hero-buttons .md-button--primary,
+[data-md-color-scheme="slate"] .hero-buttons .md-button--primary {
   background-color: var(--md-accent-fg-color) !important;
   border-color: var(--md-accent-fg-color) !important;
   color: white !important;
 }
 
-.hero-buttons .md-button:not(.md-button--primary) {
+.hero-buttons .md-button:not(.md-button--primary),
+[data-md-color-scheme="slate"]
+  .hero-buttons
+  .md-button:not(.md-button--primary) {
   background-color: rgba(255, 255, 255, 0.2) !important;
   border-color: rgba(255, 255, 255, 0.8) !important;
   color: white !important;
@@ -269,6 +276,7 @@ hr {
 }
 
 /* Typography */
+
 .md-typeset h1 {
   color: var(--md-primary-fg-color--dark);
 }
@@ -277,7 +285,7 @@ hr {
   font-weight: 300 !important;
   margin-top: 1.5rem !important;
   font-size: 1.2rem !important;
-  color: var(--md-primary-fg-color--dark);
+  color: var(--md-primary-fg-color--dark) !important;
   letter-spacing: -0.01em !important;
   line-height: 1.2 !important;
   border: none !important;
@@ -287,7 +295,7 @@ hr {
   font-weight: 400 !important;
   margin-top: 1.25rem !important;
   font-size: 1.1rem !important;
-  color: var(--md-primary-fg-color);
+  color: var(--md-primary-fg-color) !important;
   letter-spacing: -0.01em !important;
   line-height: 1.3 !important;
 }
@@ -296,7 +304,7 @@ hr {
   font-weight: 400 !important;
   margin-top: 1rem !important;
   font-size: 1rem !important;
-  color: var(--md-primary-fg-color);
+  color: var(--md-primary-fg-color) !important;
   letter-spacing: -0.01em !important;
 }
 
@@ -305,7 +313,7 @@ hr {
   font-weight: 400 !important;
   margin-top: 1rem !important;
   font-size: 0.9rem !important;
-  color: var(--md-primary-fg-color--light);
+  color: var(--md-primary-fg-color--light) !important;
   letter-spacing: -0.01em !important;
 }