Dark mode cards improvements

Also, this includes styles for the new Hero blocks

Author: KenniM

gcx/styles/src/css/helios-gcx-body.css

@@ -44,7 +44,7 @@
 }
 
 .dark-mode .landing-card .content {
-    color: var(--color-black)
+    color: var(--color-white)
 }
 
 .full-articles {
@@ -141,6 +141,11 @@
     width: 100%;
 }
 
+.dark-mode .doc .sidebarblock {
+    background: var(--color-purple-700);
+    box-shadow: 0px 6px 8px rgb(255 255 255 / 8%), 0px 4px 10px rgb(255 255 255 / 8%), 0px 3px 12px rgb(255 255 255 / 12%);
+}
+
 .doc {
     color: var(--color-black);
 }

gcx/styles/src/css/helios-gcx-heroBlock.css

@@ -0,0 +1,39 @@
+.dsHeroBlock {
+    background-image: url('../img/[email protected]');
+    background-size: cover;
+    color: white;
+    font-family: 'Roboto', sans-serif;
+  }
+  
+  .dsHeroBlock[data-banner="2"]{
+    background-image: url('../img/[email protected]');
+  }
+  
+  .dsHeroBlock[data-banner="3"]{
+    background-image: url('../img/[email protected]');
+  }
+  
+  .dsHeroBlock[data-banner="4"]{
+    background-image: url('../img/[email protected]');
+  }
+
+  .dsHeroBlock[data-banner="5"]{
+    background-image: url('../img/[email protected]');
+  }
+  
+  
+  
+  .dsHeroContent {
+    padding: 50px 60px;
+    width: 50%;
+  }
+  
+  .dsHeroTitle h1 {
+    font-weight: 400;
+  }
+
+  @media screen and (max-width: 820px) {
+    .dsHeroContent {
+        width: 100%;
+      }
+  }

gcx/styles/src/css/helios-gcx-links.css

@@ -40,11 +40,11 @@
 }
 
 .dark-mode .sidebarblock a.xref.page{
-    color: var(--black);
+    color: var(--color-white);
 }
 
 .dark-mode .sidebarblock a{
-    color: var(--black)!important;
+    color: var(--color-white)!important;
 }
 
 .doc .admonitionblock.caution a {

gcx/styles/src/css/helios-gcx-titles.css

@@ -59,7 +59,7 @@
 }
 
 .dark-mode .doc .sidebarblock>.content>.title{
-    color: var(--black);
+    color: var(--white);
 }