About: navy bg for values section; white card text + white icons

Author: MMesch

src/components/about/styles.module.css

@@ -32,6 +32,18 @@
   margin-bottom: var(--ifm-spacing-lg);
 }
 
+:global([data-section-bg="dark"]) .value_icon svg {
+  filter: brightness(0) invert(1);
+}
+
+:global([data-section-bg="dark"]) .value_header {
+  color: white;
+}
+
+:global([data-section-bg="dark"]) .value_text p {
+  color: white;
+}
+
 .value_text p {
   font-family: var(--ifm-font-family-roboto);
   font-size: 14px;

src/css/custom.css

@@ -321,6 +321,7 @@ ul {
   display: none;
 }
 
+
 /***********************************************************/
 
 .link-to-button {

src/pages/about/index.tsx

@@ -34,7 +34,7 @@ export function AboutContent() {
           <ScrollDownCTA />
         </div>
       </Section>
-      <Section bg="light-blue">
+      <Section bg="dark">
         <h2>Our <span className="highlight">values</span></h2>
         <CardGrid cols={4}>
           {valuesDetails.map((value, index) => (