kcc-gem-theme-original 2.0.0 → 2.0.3

data/assets/js/src/searchPageJumpLinkFix.js

@@ -0,0 +1,27 @@
+const jumpLink = document.querySelector('a[href="#content"');
+const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+
+function searchPageJumpLinkFix() {
+  jumpLink.addEventListener('click', (e) => {
+    e.preventDefault();
+
+    const targetId = e.target.getAttribute('href');
+    const targetEl = document.querySelector(targetId);
+
+    if (targetEl) {
+      // Make sure the element can accept focus (even if it's a <div> or <main>) since we're forcing focus via JS
+      if (!targetEl.hasAttribute('tabindex')) {
+        targetEl.setAttribute('tabindex', '-1');
+      }
+    
+      // Move focus to the element so VoiceOver/keyboard users land there
+      targetEl.focus(); // Always .focus() prior to .scrollIntoView()!
+      // Ensure we respect (prefers-reduced-motion: reduce) by explicitly checking when using scrollIntoView()
+      targetEl.scrollIntoView({
+        behavior: prefersReducedMotion.matches ? 'instant' : 'smooth'
+      });
+    }
+  });
+}
+
+export default searchPageJumpLinkFix;

data/assets/js/src/searchResultsWCAGFix.js

@@ -0,0 +1,43 @@
+// ============================================================================ //
+// # Fix Google Programmable Search's search results that have image thumbnails //
+//                                                                              //
+// ## The Issue                                                                 //
+//                                                                              //
+// On the search results page:                                                  //
+// * Image thumbs are wrapped in anchor/link elements                           //
+// * Thumbs have generic "Thumbnail image" for alt-text                         //
+// * Thumb anchors do not have any accessibility labels so multiple             //
+//   "Thumbnail image" link texts do not help                                   //
+// * Thumb anchors also provide zero visual indication of focus (or that        //
+//   they're a link at all unless you hover them to see the cursor change)      //
+//                                                                              //
+// ## The Fix                                                                   //
+//                                                                              //
+// 1. Use a lightweight mutation observer to see when search results have       //
+//    been injected. (also runs on subsequent searches while in the page)       //
+// 2. Look for the links wrapping the image thumbnails:                         //
+//    * Make un-focusable with tabindex="-1"                                    //
+//    * Add aria-hidden="true" to hide the unhelpful thumbs altogether          //
+// ============================================================================ //
+
+// This is a custom wrapper element for the markup where Google injects the search results
+const targetNode = document.getElementById('searchResultsWrapper');
+  
+const observer = new MutationObserver((mutationsList) => {
+  // Target the specific wrapper classes Google uses for image result boxes
+  const imageLinks = document.querySelectorAll('.gs-image-box a');
+  
+  imageLinks.forEach(link => {
+    if (link.getAttribute('tabindex') !== '-1') {
+      link.setAttribute('tabindex', '-1');
+      link.setAttribute('aria-hidden', 'true');
+    }
+  });
+});
+
+function searchResultsWCAGFix() {
+  // Watch for injection of the search results
+  observer.observe(targetNode, { childList: true, subtree: true });
+}
+
+export default searchResultsWCAGFix;

data/assets/scss/0-tools/_bootstrap-overrides.scss

@@ -74,16 +74,31 @@
     display: none;
   }
 }
-// End BS4 dropdown-menu carot modifications.
+
+// Customizations to alert color-schemes
+// Creates a more visible border around the alerts
+// BS5 default alert border-colors are almost imperceivable
+.alert-warning {
+  border-color: $color-alert-warning-border;
+}
+
+.alert-danger {
+  border-color: $color-alert-danger-border;
+}
 
 .alert-info {
-  --bs-alert-border-color: var(--bs-info-text-emphasis);
+  border-color: $color-alert-info-border;
 }
 
 .alert-primary {
-  --bs-alert-border-color: var(--bs-primary-text-emphasis);
+  border-color: $color-alert-primary-border;
 }
 
-.alert-danger {
-  --bs-alert-border-color: var(--bs-danger-text-emphasis);
+.alert a {
+  color: #0257d4;
+}
+
+.alert a:hover,
+.alert a:focus {
+  color: #02419c;
 }

data/assets/scss/0-tools/_gsc-overrides.scss

@@ -36,6 +36,10 @@
 #gsc-i-id1 {
   background: none !important; // Needed to remove the stupid "Enhanced by Google" text after 2026 GCS update
 }
+
+form.gsc-search-box {
+  max-width: unset !important; // Counteract the new GCS `max-width: 652px;` styling so that it fills the available space.
+}
 // END new styles added to counteract 2026 GCS update
 
 .nav-global__gcse-wrapper .gsc-search-button-v2 {

data/assets/scss/0-tools/_gsc-search-page-overrides.scss

@@ -0,0 +1,290 @@
+@use '../0-tools/vars' as *;
+
+/**
+*
+*  Custom overrides for Google Search search-results page
+*  Author: Wesley Zajicek - https://github.com/wdzajicek
+*
+*/
+// ===================================================== //
+//  IMPORTANT! (pun intended):                           //
+//                                                       //
+//    Assume that ANY `!important` used in this file is  //
+//    required for the styling to work correctly!        //
+//                                                       //
+//    i.e. DO NOT DELETE ANY `!important;`'s BELLOW      //
+//                                                       //
+// ===================================================== //
+$color-link-visited: #3600b3;
+// The pagination of the search results (at the bottom)
+.gsc-results .gsc-cursor-box .gsc-cursor-page {
+  background-color: rgba(0,0,0,0.09) !important;
+  border-width: thin;
+  border-style: solid;
+  border-color: #555;
+  border-radius: 5px;
+  color: $grey-1 !important;
+  padding: .25rem 1rem;
+}
+// The active page in the search result pagination
+.gsc-results .gsc-cursor-box .gsc-cursor-current-page {
+  background-color: rgba(0,0,0,0.25) !important;
+  color: $black !important;
+  text-decoration: underline !important;
+}
+// One of the outer-most elements of the search results
+.gsc-control-cse {
+  font-family: $font-family-paragraph !important;
+  counter-reset: result;
+}
+// Outermost div for each search result
+.gsc-webResult.gsc-result {
+  border-bottom: solid thin #0b0e10 !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  max-width: 630px;
+  padding-left: .75rem !important;
+  padding-right: .75rem !important;
+}
+// Parent element of the search result's title
+.gsc-thumbnail-inside {
+  margin-left: 32px;
+}
+// Custom styling to make a counter before each title (like in newsroom)
+.gsc-thumbnail-inside::before {
+  background-color: $primary-blue;
+  border-radius: 50%;
+  border-color: #0b0e10;
+  border-style: solid;
+  border-width: 1px;
+  color: $white;
+  counter-increment: result;
+  content: counter(result);
+  display: block;
+  font-size: 14px;
+  font-weight: 700;
+  height: 26px;
+  margin-left: -32px;
+  line-height: 24px;
+  position: absolute;
+  text-align: center;
+  width: 26px;
+}
+// Font size for smaller text—description pagination
+.gsc-control-cse,
+.gsc-control-cse .gsc-table-result {
+  font-size: .99rem !important;
+}
+// Larger font-sizes
+.gsc-control-cse .gs-spelling,
+.gsc-control-cse .gs-result .gs-title,
+.gsc-control-cse .gs-result .gs-title * {
+  font-size: 1.125rem !important;
+}
+// Title of the page/doc that is clicked
+.gs-result .gs-title,
+.gs-result .gs-title *,
+.gs-result .gs-title a.gs-title b,
+.gcsc-find-more-on-google {
+  color: $color-blue-reboot !important;
+}
+// Hover effect for the search results title/link
+.gs-result .gs-title a.gs-title:hover,
+.gs-result .gs-title a.gs-title:hover b {
+  color: $color-blue-reboot-hover !important;
+  text-decoration: underline !important;
+}
+// Visited styles for the search results title/link
+.gs-result .gs-title a.gs-title:visited,
+.gs-result .gs-title a.gs-title:visited b {
+  color: $color-link-visited !important;
+}
+// The little magnifying glass svg on the bottom-right
+// of the results that says "🔍 Search for <SEARCH_TERM> on Google"
+.gcsc-find-more-on-google-magnifier {
+  fill: $color-blue-reboot !important;
+}
+// Breadcrumb for each search result
+.gs-webResult div.gs-visibleUrl {
+  color: $color-green-emerald !important;
+}
+// The parent element for the results breadcrumb
+.gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
+  display: inline-block;
+  border: thin solid rgba(0,0,0,0.125);
+  padding: 0 .25rem;
+  border-radius: 5px;
+  margin-top: .25rem;
+}
+// Description text for the search results
+.gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
+.gs-fileFormatType {
+  color: $grey-1 !important;
+  margin-top: 6px;
+  font-family: $font-family-paragraph !important;
+}
+.gs-bidi-start-align.gs-snippet b {
+  font-weight: 700;
+}
+// Preview image for the search result
+.gs-web-image-box .gs-image,
+.gs-promotion-image-box .gs-promotion-image {
+  height: 93px;
+  margin-left: -18.25px;
+  max-width: unset !important;
+}
+// Parent element of the preview image for search result
+.gs-web-image-box,
+.gs-promotion-image-box {
+  background-color: $grey-1;
+  border-radius: 50%;
+  border-color: #ebebeb;
+  border-style: solid;
+  border-width: thin;
+  float: right !important;
+  height: 93px;
+  margin-top: .25rem;
+  margin-left: 1rem !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: relative;
+  bottom: 20px;
+  width: 93px !important;
+  top: 0;
+}
+// Specific styles for portrait oriented images
+.gs-web-image-box-portrait .gs-image {
+  height: 93px;
+  margin-left: calc(100% / -16);
+  transform: scale(1.2);
+}
+// Parent div of the pagination buttons
+.gsc-cursor-box.gs-bidi-start-align {
+  margin-top: 1.5rem !important;
+}
+
+// The default styling cuts off the outline when the element has focus
+// This ensures a fully visible focus ring for accessibility
+div.gs-title {
+  overflow: visible !important; // This ensures the outline is not cut off
+}
+
+// Make the focus ring stand out a little bit more
+a.gs-title:focus-visible {
+  outline-offset: 3px !important;
+  outline-width: 2px !important;
+}
+// ======================================= //
+//   Styling adjustments/additions to      //
+//   search-page styling for darkMode      //
+// ======================================= //
+// .dark-mode gets added to <html> element 
+.dark-mode {
+  // Description of the search result
+  .gs-webResult:not(.gs-no-results-result):not(.gs-error-result) .gs-snippet,
+  .gs-fileFormatType {
+    color: #969ca5 !important;
+  }
+  // Pagination buttons for extra results
+  .gs-bidi-start-align.gs-visibleUrl.gs-visibleUrl-breadcrumb {
+    border-color: rgba(255,255,255,.25);
+  }
+  // The little magnifying glass svg on the bottom-right
+  // of the results that says "🔍 Search for <SEARCH_TERM> on Google"
+  .gcsc-find-more-on-google-magnifier {
+    fill: #9fc0ed !important;
+  }
+  // Title/link of the search result
+  .gs-result .gs-title,
+  .gs-result .gs-title *,
+  .gs-result .gs-title a.gs-title b,
+  .gcsc-find-more-on-google {
+    color: #9fc0ed !important;
+  }
+  // Title/link hover effect
+  .gs-result .gs-title a.gs-title:hover,
+  .gs-result .gs-title a.gs-title:hover b {
+    color: #b0d1ff !important;
+  }
+  // Visited title links
+  .gs-result .gs-title a.gs-title:visited,
+  .gs-result .gs-title a.gs-title:visited b {
+    color: #7382d7 !important;
+  }
+  // Top bar that shows the number of results and Sort by:...
+  .gsc-above-wrapper-area {
+    border-bottom-color: rgba(255,255,255,0.5)
+  }
+  // One of the outer-most parent elements of the results
+  .gsc-control-cse.gsc-control-cse-en {
+    background-color: transparent;
+    border-color: rgba(255,255,255,0.25);
+    border-radius: 5px;
+  }
+  // Outer-most element for each search result
+  .gsc-webResult.gsc-result,
+  .gsc-results .gsc-imageResult {
+    background-color: #191d1f;
+    border-color: rgba(255,255,255,0.125);
+  }
+  // Result stats: # of results and time
+  .gsc-result-info,
+  .gsc-orderby-label {
+    color: #bababa;
+  }
+  // Pagination buttons of the extra results
+  .gsc-results .gsc-cursor-box .gsc-cursor-page {
+    background-color: #0b0e10;
+    border-color: rgba(255,255,255,0.25);
+    border-style: solid;
+  }
+  // Current page-button in the paginated results
+  .gsc-results .gsc-cursor-box .gsc-cursor-current-page {
+    color: #ebebeb !important;
+    background-color: rgba(0,0,0,0.5) !important;
+  }
+  // Hover effect when mouse hovers a search result
+  .gsc-webResult.gsc-result:hover {
+    background-color: rgba(255,255,255,0.0125) !important;
+  }
+  // Outer-most element of each search result
+  .gsc-webResult.gsc-result {
+    border-bottom: solid 1px $white !important;
+  }
+  // Custom counter-circles to number results
+  .gsc-thumbnail-inside::before {
+    background-color: #9bb7dd;
+    border-color: $white;
+    color: #0b0e10;
+  }
+  // The "Sort by:" button
+  .gsc-selected-option-container {
+    background-color: #9fc0ed;
+    border-radius: 4px;
+    border-color: $white;
+    border-width: 1px;
+    border-style: solid;
+    font-size: 13px !important;
+    padding-bottom: 1.75rem;
+    padding-left: .75rem !important;
+    padding-right: 32px;
+  }
+  // The little carrot icon in the "Sort by:" button
+  .gsc-control-cse .gsc-option-selector {
+    right: 8px;
+    top: 13px;
+    transform: scale(1.5);
+  }
+  // The "Sort by:" menu
+  .gsc-control-cse .gsc-option-menu {
+    background-color: #0b0e10;
+  }
+  // Current selection in the "Sort by:" menu
+  .gsc-option-menu-item-highlighted {
+    background-color: #282828;
+    color: $white;
+  }
+  .gs-bidi-start-align.gs-snippet b {
+    color: #c4c4c4;
+  }
+}

data/assets/scss/0-tools/_vars.scss

@@ -29,7 +29,7 @@ $primary-red: #c61f48;        // Primary blue-color
 $accent-blue: #005bac;        // Accent blue-color used in all links and link buttons;
 $color-blue-light: #ccdde1;
 $color-tan-light: #fcf1d6;
-$color-orange: #f99e1b;
+$color-orange: #D58106;
 $color-blue-grey: #7a7b7b;
 $color-blue-lighter-nav: #e2e3e4;
 $color-black-light: rgba(0,0,0,.15);
@@ -40,7 +40,7 @@ $color-page-background: $color-blue-grey;
 $color-blue-light-nav: $color-blue-grey;
 
 $black: #000;
-$grey-1: #666;
+$grey-1: #555;
 $grey-2: #e5e8ed;
 $grey-3: #f1f2f7;            //  Background color for slick tracks
 $grey-4: #f8f9fa;            // Background color for footer (and Bootstrap 4 light navbar)
@@ -71,3 +71,17 @@ $btn-hover-bg: #022b55;
 $btn-hover-border: #021e3d;
 $darker-link: #006ce0;
 $orange-heading: $color-orange;
+
+$color-blue-reboot: #007bff; // link color specified in reboot
+$color-blue-reboot-hover: #0056b3; // link:hover color specified in reboot
+$color-green-emerald: #148ba9;
+
+$color-alert-warning-text: #856404; // BS5 color for alert-warning text-color
+$color-alert-info-text: #0c5460; // BS5 color for alert-info text-color
+$color-alert-primary-text: #004085; // BS5 color for alert-primary text-color
+$color-alert-danger-text: #721c24;
+// Create custom border-colors for the BS5 alerts we use:
+$color-alert-warning-border: $color-alert-warning-text;
+$color-alert-info-border: $color-alert-info-text;
+$color-alert-primary-border: $color-alert-primary-text;
+$color-alert-danger-border: $color-alert-danger-text;

data/assets/scss/1-base/_html.scss

@@ -3,3 +3,8 @@
 html {
   background-color: $color-page-background;
 }
+
+html {
+  /* Offset so that hash-links can are not obscured by fixed navbars */
+  scroll-padding-top: 140px;
+}

data/assets/scss/1-base/_links.scss

@@ -10,37 +10,6 @@
   height:80px;
 }
 
-// use the 'link__offset' class to offset jump-links via CSS only method.
-// Links need to be offset to clear the fixed navigation bar at the top.
-// =========================================
-
-.links__offset {  // Pointer-events is needed to prevent the .links__offset::before pseudo-element
-  pointer-events: none;  // from "blocking" any anchor tag above from being clicked.
-  & a,
-  & button,
-  & iframe,
-  & .card-body {  // HOWEVER, if there is a child anchor, or button, element,
-    pointer-events: auto; // it obviously needs to be clickable.
-  }
-}
-
-.links__offset::before {
-  // mobile devices get slightly different offset b/c of different sized fixed header
-  content: " ";
-  display: block;
-  height: 171px; // defining a height pushes the element down the page
-  margin-top: -171px; // negative margin is needed to push it back to its original position
-  pointer-events: none; // w/ out this it will interfere with the sites navigation links
-  visibility: hidden;
-}
-
-@media screen and (min-width: 768px) {
-    .links__offset::before {
-      height: 150px;
-      margin-top: -150px;
-  }
-}
-
 .links__darker-link {
   color: $darker-link;
 }

data/assets/scss/1-base/_typography.scss

@@ -250,41 +250,48 @@ body {
 }
 
 // Content Headings
-.typography__h2 {
+.typography__h1 {
   color: $color-grey-heading;
   font-family: $font-family-headings;
   font-size: 2rem;
   font-weight: $font-weight-boldish;
 }
 
-.typography__h3 {
+.typography__h2 {
   color: $primary-blue;
   font-family: $font-family-headings;
   font-size: 1.75rem;
   font-weight: $font-weight-bolder;
 }
 
-.typography__h4 {
+.typography__h3 {
   color: $primary-red;
   font-family: $font-family-headings;
   font-size: 1.7rem;
   font-weight: $font-weight-bolder;
 }
 
-.typography__h5 {
+.typography__h4 {
   color: $color-grey-heading;
   font-family: $font-family-headings;
   font-weight: $font-weight-bold;
   font-size: 1.5rem;
 }
 
-.typography__h6 {
+.typography__h5 {
   color: $color-grey-heading;
   font-family: $font-family-headings;
   font-weight: $font-weight-bold;
   font-size: 1.4rem;
 }
 
+.typography__h6 {
+  color: $color-grey-heading;
+  font-family: $font-family-headings;
+  font-weight: $font-weight-bold;
+  font-size: 1.3rem;
+}
+
 .typography__h5--description {
   color: $grey-6;
   font-family: $font-family-oswald;

data/assets/scss/3-layout/_positioning.scss

@@ -300,52 +300,13 @@
   }
 }
 
-.position__offset-alert {
-  margin-top: 0;
-  padding-top: 125px;
-  height: 1px;
-  &--visible {
-    height: auto;
-  }
-}
-
-@media screen and (min-width: 400px) {
-  .position__offset-alert {
-    padding-top: 135px;
-  }
-}
-
-@media screen and (min-width: 576px) {
-  .position__offset-alert {
-      padding-top: 140px;
-  }
-}
-
-@media screen and (min-width: 768px) {
-  .position__offset-alert {
-      padding-top: 145px;
-  }
-}
-
-@media screen and (min-width: 992px) {
-  .position__offset-alert {
-      padding-top: 150px;
-  }
-}
-
-.position__offset-alert.position__offset-alert-core {
-  margin-top: 0;
-  padding-top: 115px;
-}
-
-@media screen and (min-width: 992px) {
-  .position__offset-alert.position__offset-alert-core {
-    padding-top: 110px;
-  }
-}
-
 .positioning__max-width-600 {
   max-width: 600px;
   margin-left: auto;
   margin-right: auto;
 }
+
+.positioning__offset-nav {
+  margin-top: 120px;
+  padding-top: 20px;
+}

data/assets/scss/searchPageOverrides.scss

@@ -0,0 +1,2 @@
+
+@use '0-tools/gsc-search-page-overrides';