Light mode: fix new-style faq, stack overflow icon

styles/_pages.scss

@@ -86,11 +86,10 @@
     right: 0;
     // background-image set on the page-* classes
     background-repeat: no-repeat;
-    background-position-x: left -20vw;
+    background-position-x: left;
     background-position-y: top;
     opacity: 0.6;
     @include media-breakpoint-up(md) {
-      background-position-x: left;
       opacity: 1.0;
     }
   }
@@ -167,20 +166,7 @@
 
 .page-uses {
   &::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    background: url(../img/backgrounds/use-cases-blue.svg) no-repeat;
-    background-position-x: left -20vw;
-    background-position-y: top;
-    opacity: 0.6;
-    @include media-breakpoint-up(md) {
-      background-position-x: left;
-      opacity: 1.0;
-    }
+    background-image: url(../img/backgrounds/use-cases-blue.svg);
   }
   @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
     ##{$usecase} {
@@ -306,27 +292,11 @@
 }
 
 
-// FAQ Page
-#faq-background {//old
-  position: absolute;
-  left: 0;
-  right: 0;
-  width: 100%;
-}
-
 .page-faq {
-  background-image: url(../img/backgrounds/faq-bg.svg);
-  background-repeat: no-repeat;
-  background-position-x: left -20vw;
-  background-position-y: top;
-  @include media-breakpoint-up(md) {
-    background-position-x: left;
-    background-size: contain;
-
-    .dactyl-tree-nav {
-      background: linear-gradient(90deg, $body-bg 0%, $body-bg 75%, transparent 100%);
-      padding-left: 1rem;
-      margin-left: -1rem;
+  &::before {
+    background-image: url(../img/backgrounds/faq-bg.svg);
+    @include media-breakpoint-up(md) {
+      background-size: contain;
     }
   }
 
@@ -512,6 +482,14 @@
   }
 }
 
+.page-community {
+  @each $platform in "github", "twitch", "stack-overflow", "twitter" {
+    #platform-#{$platform} {
+      content: url("../img/logos/#{$platform}.svg")
+    }
+  }
+}
+
 .page-references {
   #refs-types .card-deck {
     .card:nth-child(1) .card-footer {

styles/_top-nav.scss

@@ -601,6 +601,7 @@ a {
 .custom-theme-toggle {
   .custom-control-label {
     padding: 1rem;
+    cursor: pointer;
   }
   .custom-control-label::before,
   .custom-control-input:checked ~ .custom-control-label::before {

styles/light/_light-theme.scss

@@ -10,9 +10,8 @@ $light-standout-bg: $white;
 // General color elements ------------------------------------------------------
 
 body {
-    background: $light-bg;
-    background-color: $light-bg;
-    color: $light-fg;
+  background-color: $light-bg;
+  color: $light-fg;
 }
 #topnav-theme .custom-theme-toggle {
   .custom-control-label::before {
@@ -326,10 +325,28 @@ aside .active > a:hover {
   box-shadow: $light-box-shadow;
 }
 
-// FAQ (old style)
-.accordian-row {
-  background-color: $gray-200;
-  color: $light-fg;
+// FAQ
+.page-faq {
+  &.landing-builtin-bg::before {
+    // Lighten the background image for legibility, since this one
+    // runs under a significant amount of the header text.
+    opacity: 0.6;
+  }
+
+  .q-wrapper {
+    background-color: $gray-200;
+    color: $light-fg;
+
+    > a.expander:hover {
+      color: $light-fg;
+    }
+  }
+}
+
+.page-community {
+  #platform-stack-overflow {
+    content: url("../img/logos/lightmode/stack-overflow.svg")
+  }
 }
 
 // Status labels