Fix light mode, top nav external links, etc:

- Top nav external links now open in a new tab as intended (not specific
  to light mode)
- Consistently adjust opacity (not placement) of background images in
  mobile; lighter in light mode for legibility.
- Add a subtle white "shadow" to eyebrow text in light mode to improve
  legibility
- Fix focus styles for buttons & multicode tabs in light mode
- Make all buttons sized the same as primary buttons by default
- Fix typo that caused the "Reset" button on get-started to be unstyled
- Refactor theme switcher JS for simplicity.
- Fix issue with theme select icon not being visible in some cases.
- Update color of ✅ icons in interactive tutorial breadcrumbs

styles/_buttons.scss

@@ -5,6 +5,8 @@
   cursor: pointer;
   text-decoration: none;
   transition: 0.2s;
+  padding: 0.5rem 1rem;
+  line-height: 16px;
 }
 
 .content a.button {
@@ -19,33 +21,6 @@ button.disabled,
 button[disabled="disabled"] {
   cursor: not-allowed;
 }
-//
-// // .btn-outline-secondary,
-// .content a.button,
-// .navbar-dark .navbar-nav .nav-link.btn-outline-secondary {
-//   color: $white;
-//   border-color: $white;
-//   border-width: 2px;
-//   border-style: solid;
-//
-//   &:not(:disabled):not(.disabled):hover, &:not(:disabled):not(.disabled):active {
-//     color: $primary;
-//     border-color: $primary;
-//     background-color: transparent;
-//   }
-// }
-//
-// .navbar-dark .navbar-nav .nav-link:hover {
-//   color: $white;
-// }
-//
-// p + .readmore {
-//   margin-top: 12px;
-// }
-//
-// .card-header a i {
-//   margin: 0 0.2em 0 0.8em;
-// }
 
 .btn-primary code,
 .btn-secondary code {
@@ -58,9 +33,6 @@ button[disabled="disabled"] {
   color: $white;
   border: none;
   border-color: transparent;
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
-  line-height: 16px;
   &:hover {
     background: $blue-purple-600;
   }

styles/_pages.scss

@@ -70,9 +70,29 @@
 
 // Page backgrounds
 .landing-bg {
-  @include media-breakpoint-down(sm) {
-    opacity: .6;
-    margin-right: -20vw;//CURSOR
+  opacity: 0.6;
+  @include media-breakpoint-up(md) {
+    opacity: 1.0;
+  }
+}
+
+.landing-builtin-bg {
+  &::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    // background-image set on the page-* classes
+    background-repeat: 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;
+    }
   }
 }
 
@@ -146,11 +166,21 @@
 }
 
 .page-uses {
-  background: url(../img/backgrounds/use-cases-blue.svg) no-repeat;
-  background-position-x: left -20vw;
-  background-position-y: top;
-  @include media-breakpoint-up(md) {
-    background-position-x: left;
+  &::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;
+    }
   }
   @each $usecase in "micropayments", "wallets", "exchanges", "stablecoins", "nft", "defi", "cbdc" {
     ##{$usecase} {
@@ -285,11 +315,8 @@
 }
 
 .page-docs-index {
-  background: url(../img/backgrounds/bg-docs.png) no-repeat;
-  background-position-x: left -20vw;
-  background-position-y: top;
-  @include media-breakpoint-up(md) {
-    background-position-x: left;
+  &::before {
+    background-image: url(../img/backgrounds/bg-docs.png);
   }
 
   .center-search {

styles/_top-nav.scss

@@ -615,29 +615,23 @@ a {
     position: static;
     display: inline-block;
     content: " ";
-    background: url("../img/sun-moon.svg");
     cursor: pointer;
     border: 0;
+    background-image: url("../img/sun-moon.svg");
     background-size: 3rem;
     background-color: transparent;
-    background-position: top left;
     transform-origin: center;
     margin-left: -.5rem;
     margin-right: .5rem;
-    transition: all .4s ease;
+    transition: transform .4s ease, background-position .4s ease;
+    // Default: dark mode, show moon
     transform: rotate(15deg);
+    background-position: top left;
   }
   .custom-control-label::after {
     display: none;
   }
 }
-html.light .custom-theme-toggle {
-  .custom-control-label::before {
-    background-color: transparent;
-    background-position: bottom right;
-    transform: rotate(-15deg);
-  }
-}
 
 // Fix dropdown box-shadows on mobile (language selector's shadow overlaps the
 // rest of the menu, so it's offset more with a negative spread)

styles/light/_light-theme.scss

@@ -14,6 +14,13 @@ body {
     background-color: $light-bg;
     color: $light-fg;
 }
+#topnav-theme .custom-theme-toggle {
+  .custom-control-label::before {
+    background-color: transparent;
+    background-position: bottom right;
+    transform: rotate(-15deg);
+  }
+}
 
 h1, h2, h3, h4, h5, h6,
 .h1, .h2, .h3, .h4, .h5, .h6 {
@@ -22,6 +29,7 @@ h1, h2, h3, h4, h5, h6,
   }
   &.green-500 {
     color: $green-700;
+    text-shadow: white 0 0 2px, white -1px -1px 2px, white 1px 1px 2px;
   }
 }
 
@@ -102,7 +110,7 @@ a, nav a {
     color: $light-link-hover-color;
   }
 
-  &:focus {
+  &:not(.btn):focus {
     background-color: transparent;
   }
 }
@@ -358,6 +366,9 @@ pre code {
       background-color: $light-form-bg;
       color: $white;
     }
+    &:focus {
+      background-color: $gray-800;
+    }
   }
 
   .code_toggler {
@@ -367,6 +378,12 @@ pre code {
   }
 }
 
+.interactive-block {
+  .breadcrumb-item.done a::after {
+    color: $green-900;
+  }
+}
+
 // Dev tools -------------------------------------------------------------------
 .modal-content {
   background-color: $light-standout-bg;
@@ -492,6 +509,21 @@ pre code {
   }
 }
 
+.landing-bg {
+  opacity: 0.4;
+  @include media-breakpoint-up(md) {
+    opacity: 1.0;
+  }
+}
+.landing-builtin-bg {
+  &::before {
+    opacity: 0.4;
+    @include media-breakpoint-up(md) {
+      opacity: 1.0;
+    }
+  }
+}
+
 
 // feedback widget
 #feedback-content {