rendering

assets/src/assets/common.scss

@@ -21,7 +21,7 @@ input.half-field:not(:active):not(:hover) {
     --main-color-dark: #F49F0A;
     --secondary-color: #00A6A6;
     --secondary-color-light: #00A6A6B3;
-    --secondary-color-dark: #057ba8;
+    --secondary-color-dark: #007ba8;
 
     --disabled-color: #aaa;
     --disabled-bg: #eee;
@@ -39,7 +39,7 @@ input.half-field:not(:active):not(:hover) {
     --nav-secondary-height: 2.5rem;
     --nav-bg: var(--main-color);
     --nav-fg: var(--text-color);
-    --nav-active-bg: var(--main-color-dark);
+    --nav-active-bg: var(--secondary-color);
     --nav-active-fg: var(--text-color);
     --nav-fs: 1rem;
     --nav-2-fs: 0.8rem;

assets/src/assets/components.scss

@@ -28,7 +28,7 @@
     --a-carousel-ml: calc(#{v.$mp-4} - 0.5rem);
     --a-carousel-gap: #{v.$mp-4};
     --a-carousel-nav-x: -#{v.$mp-3e};
-    --a-carousel-bg: var(--hg-color-alpha);
+    --a-carousel-bg: var(--secondary-color-light);
 
     --a-progress-bg: transparent;
     --a-progress-bar-bg: var(--hg-color-2);
@@ -322,15 +322,15 @@
             padding: 0rem;
         }
 
-        .title {
-            flex-grow: 1;
-        }
     }
 
+    .title { flex-grow: 1; }
     .subtitle {
         font-size: var(--preview-title-sz);
         // background-color: var(--preview-heading-bg-color);
         text-align: right;
+        min-width: 8rem;
+        text-decoration: underline;
     }
 
     .media {
@@ -467,7 +467,8 @@
 // ---- ---- Carousel
 .a-carousel {
     .a-carousel-viewport {
-        background-color: var(--a-carousel-bg);
+        box-shadow: inset 0em 0em 20rem var(--a-carousel-bg);
+        // background-color: var(--a-carousel-bg);
         margin-bottom: var(--a-carousel-p);
         padding: var(--a-carousel-p) 0;
         padding-left: var(--a-carousel-ml);

assets/src/assets/public.scss

@@ -153,12 +153,7 @@
 
         font-family: var(--heading-font-family);
         text-transform: uppercase;
-
-        a, .button {
-            color: var(--nav-fg);
-            display: block;
-            width: 100%;
-        }
+        color: var(--nav-fg) !important;
 
         .icon:first-child, .icon + span {
             text-align: center;
@@ -417,13 +412,13 @@ nav li {
         }
     }
 
-    &:nth-child(3n) {
+    &:nth-child(3n):not(.wide) {
         padding: v.$mp-3;
         border-radius: v.$mp-2;
         border: 1px solid var(--main-color-dark) !important;
     }
 
-    &:nth-child(3n+1) {
+    &:nth-child(3n+1):not(.wide) {
         border-radius: v.$mp-2;
         border: 1px solid var(--secondary-color-dark) !important;
     }