Make native APEX 2023 banner

- Drop rasters for SVG + HTML/CSS
- Include Japanese translation for the banner

styles/_top-banner.scss

@@ -1,3 +1,81 @@
+/* sticky APEX banner */
+.banner-container {
+  display: flex;
+  width: 100%;
+  position: relative;
+  background-color: $accent-blue-90;
+  color: $white;
+  overflow: hidden;
+
+  height: 36px;
+  
+  @include media-breakpoint-up(lg) {
+    height: 48px;
+  }
+
+  & > img {
+    height: 36px;
+
+    @include media-breakpoint-up(lg) {
+      height: 3rem;
+    }
+  }
+
+  & > div {
+    line-height: 36px;
+    font-family: Work Sans;
+    font-weight: 600;
+    font-size: 3vw;
+
+    @include media-breakpoint-up(lg) {
+      font-size: 22px;
+      line-height: 3rem;
+    }
+  }
+
+  .apex-reg {
+    text-align: center;
+
+    @include media-breakpoint-up(md) {
+      flex-grow: 0.3; // use extra space to pad this text "just a little"
+    }
+  }
+  .apex-highlight {
+    color: $apex-2023-green;
+  }
+
+  .apex-circled {
+    padding: 0 1rem;
+    text-transform: uppercase;
+    white-space: nowrap;
+
+    // sm breakpoint
+    border: 2px solid $white;
+    height: 36px;
+    line-height: 32px;
+    border-radius: 32px;
+    font-size: 2vw;
+
+    @include media-breakpoint-up(lg) {
+      border-width: 3px;
+      height: 48px;
+      line-height: 42px; // height minus 2 borders
+      border-radius: 40px;
+      font-size: 16px;
+    }
+
+    @include media-breakpoint-up(xl) {
+      font-size: 19px;
+    }
+  }
+
+  &:hover {
+    text-decoration: none;
+    color: inherit;
+  }
+}
+
+/* old "pencil banner" style, currently unused */
 .top-banner {
   height: 46px;
   background: url(../img/backgrounds/bg-apex-banner.svg);