banner

css/components/landing_page.css

@@ -14,7 +14,7 @@ article.node.node--type-landing-page h2 {
   text-align: center;
 }
 .hero-section {
-  border: 10px solid #d0bca4;
+  border: 10px solid #507b95;
 
   /*height:300px;*/
 }

css/components/navigation/nav-primary.css

@@ -204,7 +204,7 @@ html:not(.js) .primary-nav__menu--level-2 {
   transform-origin: right;
 }
 
-.primary-nav__menu-item--level-1:first-child span:before {
+.primary-nav__menu-item:first-child span:before {
   /*content: url("../../../images/magnifying-glass.svg");*/
   content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22' width='22' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath fill='%232b353b' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
  /*fill:blue; */

css/components/navigation/nav-primary.css.old

@@ -0,0 +1,213 @@
+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+/**
+ * @file
+ * Nav Primary.
+ */
+
+.primary-nav__menu {
+  flex-wrap: wrap;
+  list-style: none;
+}
+
+.primary-nav__menu-item {
+  margin-block-end: var(--sp0-5);
+}
+
+.primary-nav__menu-item:last-child {
+  margin-block-end: 0;
+}
+
+.primary-nav__menu-item.primary-nav__menu-item--has-children {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+}
+
+.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--link,
+.primary-nav__menu-item.primary-nav__menu-item--has-children .primary-nav__menu-link--nolink {
+  /* Ensure that long text doesn't make the mobile expand button wrap. */
+  flex-basis: calc(100% - var(--sp3));
+}
+
+.primary-nav__menu-link {
+  flex-grow: 1;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: var(--color-text-neutral-loud);
+  font-size: 1.75rem;
+  font-weight: bold;
+  line-height: var(--sp2);
+}
+
+.primary-nav__menu-link:hover {
+  color: inherit;
+}
+
+.primary-nav__menu-link:focus {
+  outline: auto 2px var(--color--primary-50);
+  outline-offset: 2px;
+}
+
+.primary-nav__menu-link--nolink {
+  padding-block: var(--sp0-5);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  color: var(--color-text-neutral-soft);
+  font-weight: normal;
+}
+
+.primary-nav__menu-link--button {
+  position: relative;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+  cursor: pointer;
+  text-align: start;
+  border: 0;
+  background: transparent;
+
+  /* Plus icon for mobile navigation. */
+}
+
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children {
+  padding-inline-end: var(--sp3); /* Ensure text does not overlap icon. */
+}
+
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+  position: absolute;
+  inset-inline-end: 0.5625rem;
+  inset-block-start: calc(var(--sp0-5) + 1.0625rem); /* Visually align button with menu link text. */
+  width: 1.125rem;
+  height: 0;
+  content: "";
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 3px var(--color--primary-50);
+}
+
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
+  transition: opacity 0.2s;
+  transform: rotate(90deg);
+}
+
+.primary-nav__menu-link--button.primary-nav__menu-link--has-children[aria-expanded="true"]::after {
+  opacity: 0;
+}
+
+.primary-nav__menu-link-inner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding-block: var(--sp0-5);
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.primary-nav__menu-link-inner::after {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-start: 0;
+  width: 100%;
+  height: 0;
+  content: "";
+  transition: transform 0.2s;
+  transform: scaleX(0);
+  transform-origin: left;
+  /* Intentionally not using CSS logical properties. */
+  border-top: solid 5px var(--color--primary-50);
+}
+
+.primary-nav__menu-link:hover .primary-nav__menu-link-inner::after {
+  transform: scaleX(1);
+}
+
+/*
+  Top level specific styles.
+*/
+
+.primary-nav__menu--level-1 {
+  margin-block: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-block: 0;
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.primary-nav__menu-link--level-1 {
+  position: relative;
+  display: flex;
+  letter-spacing: -1px;
+}
+
+/*
+  Secondary menu specific styles.
+*/
+
+.primary-nav__menu--level-2 {
+  visibility: hidden;
+  overflow: hidden;
+  flex-basis: 100%;
+  max-height: 0;
+  margin-block: 0;
+  margin-inline-start: calc(-1 * var(--sp));
+  padding-inline-start: var(--sp2-5);
+  transition: opacity 0.2s, visibility 0.2s, max-height 0.2s;
+  opacity: 0;
+  border-inline-start: solid var(--sp) var(--color--primary-50);
+}
+
+.primary-nav__menu--level-2.is-active-menu-parent {
+  visibility: visible;
+  max-height: none;
+  margin-block-start: var(--sp1-5);
+  opacity: 1;
+}
+
+@media (min-width: 43.75rem) {
+  .primary-nav__menu--level-2 {
+    margin-inline-start: calc(-1 * var(--sp3));
+    padding-inline-start: var(--sp3);
+  }
+}
+
+/*
+ * Olivesvoices doesn't officially support nested tertiary submenus, but this
+ * ensures that it doesn't break all the way.
+ *
+ * @see https://www.drupal.org/project/drupal/issues/3221399
+ */
+
+.primary-nav__menu--level-2 .primary-nav__menu-item--has-children {
+  display: block;
+}
+
+.primary-nav__menu-link--level-2 {
+  font-size: 1rem;
+  font-weight: normal;
+  line-height: var(--sp);
+}
+
+html:not(.js) .primary-nav__menu--level-2 {
+  visibility: visible;
+  max-height: none;
+  opacity: 1;
+}
+
+[dir="rtl"] .primary-nav__menu-link-inner::after {
+  transform-origin: right;
+}
+
+.primary-nav__menu-item--level-1:first-child span:before {
+  /*content: url("../../../images/magnifying-glass.svg");*/
+  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='22' width='22' viewBox='0 0 512 512'%3E%3C!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--%3E%3Cpath fill='%232b353b' d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
+ /*fill:blue; */
+  margin-right:5px;
+
+}

css/components/site-header.css

@@ -23,7 +23,7 @@
   .site-header {
     /* Necessary to keep the content from jumping up when header transitions to fixed. */
     min-height: var(--site-header-height-wide);
-    border-block-end: solid 1px transparent; /* Will show in Windows high contrast mode. */
+    /*border-block-end: solid 1px transparent; [> Will show in Windows high contrast mode. <]*/
   }
 }
 

templates/includes/lp-banner.html.twig

@@ -1,5 +1,5 @@
 <div class="hero--wrapper">
-    <div class="hero-section" style="background:url(/themes/custom/olivesvoices/images/pei_map_banner.jpg) 50% no-repeat;">
+    <div class="hero-section" style="background:url(/themes/custom/olivesvoices/images/island_voices_banner.jpg) 50% no-repeat;">
         <div class="logo-wrapper">
             <figure class="logo--olivesvoices">
 <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"