@explorer-1/vue 0.3.8 → 1.0.0

package/src/components/BlockLinkCard/BlockLinkCard.vue

@@ -54,7 +54,7 @@
         >
           <template v-if="metadataAttrs">
             <BasePill
-              :class="{ 'mb-2': !large, 'mb-4': large }"
+              :class="{ 'mb-2': !large, 'mb-4': large, 'text-xs': true }"
               size="sm"
               :content-type="metadataType"
               :text="(theItem as EventCardObject).eventType"
@@ -114,7 +114,7 @@
               >
                 <IconExternal
                   class="text-primary ml-2"
-                  :class="{ 'text-sm mt-1px': small, '-mt-1px': medium, '-mt-.5': large }"
+                  :class="{ 'text-sm mt-1px': small, 'text-sm -mt-1px': medium, '-mt-.5': large }"
                 />
               </template>
             </div>
@@ -122,7 +122,7 @@
 
           <component
             :is="headingLevel || 'p'"
-            class="text-gray-dark text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+            class="text-gray-dark text-xl font-bold font-display leading-tight"
             :class="{ 'lg:text-3xl': !small }"
           >
             {{ theItem.title }}
@@ -136,13 +136,13 @@
           <p
             v-if="theItem.date && !themeStore.isEdu"
             class="text-gray-mid-dark"
-            :class="{ 'mt-2': !large, 'mt-4': large }"
+            :class="{ 'mt-2 text-sm font-secondary': !large, 'mt-4 text-base': large }"
           >
             {{ theItem.date }}
           </p>
           <p
             v-if="large && theItem.summary"
-            class="mt-4 text-gray-mid-dark"
+            class="mt-4 text-gray-mid-dark text-base"
             :class="{
               'line-clamp-2 sm:line-clamp-1 lg:line-clamp-2 xl:line-clamp-3': themeStore.isEdu
             }"
@@ -152,7 +152,7 @@
           <p
             v-if="theItem.date && themeStore.isEdu"
             class="text-gray-mid-dark"
-            :class="{ 'mt-2': !large, 'mt-4': large }"
+            :class="{ 'mt-2 text-sm font-secondary': !large, 'mt-4 text-base': large }"
           >
             {{ theItem.date }}
           </p>

package/src/components/BlockLinkCard/BlockLinkCardCollectionLg.vue

@@ -88,7 +88,7 @@ const isSmall = computed(() => {
 
         <component
           :is="headingLevel || 'p'"
-          class="text-white text-xl font-medium leading-tight tracking-tight edu:font-extrabold"
+          class="text-white text-xl font-medium leading-tight tracking-tight"
           :class="{
             'lg:text-3xl': !isSmall
           }"

package/src/components/BlockLinkTile/BlockLinkTile.vue

@@ -59,10 +59,10 @@
           </p>
           <component
             :is="headingLevel || 'p'"
-            class="text-xl leading-tight tracking-tight transition-all duration-200 ease-in delay-200 edu:font-extrabold"
+            class="text-xl font-bold font-display leading-tight transition-all duration-200 ease-in delay-200"
             :class="
               compact
-                ? 'font-semibold mb-0 lg:group-hover:mb-1'
+                ? 'font-bold mb-0 lg:group-hover:mb-1'
                 : 'font-medium mb-1 lg:group-hover:mb-3 sm:text-6xl md:text-3xl xl:text-6xl'
             "
           >

package/src/components/BlockNewsletterSignup/BlockNewsletterSignup.vue

@@ -1,9 +1,9 @@
 <template>
   <div
-    class="BlockNewsletterSignup bg-gray-light edu:bg-stars edu:bg-primary md:mx-0 sm:py-8 md:px-10 sm:mx-20 px-6 py-6 edu:text-white"
+    class="BlockNewsletterSignup bg-gray-light edu:bg-stars edu:bg-primary-dark md:mx-0 sm:py-8 md:px-10 sm:mx-20 px-6 py-6 edu:text-white"
   >
     <div class="md:mx-16 xl:mx-24 text-center">
-      <p class="text-h6 edu:text-white edu:font-extrabold mb-3">{{ data.title }}</p>
+      <p class="text-h6 edu:text-white mb-3">{{ data.title }}</p>
       <p>{{ data.description }}</p>
     </div>
     <hr class="text-gray-mid mt-6 mb-5" />
@@ -46,7 +46,7 @@
           />
           <div class="submit-container h-auto">
             <BaseButton
-              class="text-nowrap"
+              class="text-nowrap h-full"
               variant="primary"
               compact
             >

package/src/components/BlockRichTable/BlockRichTable.vue

@@ -54,7 +54,7 @@ export default defineComponent({
               v-for="(headCell, headIndex) in table.tableContent.tableHead[0]"
               :key="headIndex"
               scope="col"
-              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker text-subtitle text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
+              class="min-w-[6rem] bg-jpl-blue-darker edu:bg-jpl-violet-darker font-display text-white border-gray-light-mid lg:p-5 p-3 border-b text-left"
             >
               <template v-if="headCell">
                 {{ (headCell as HeadCell).text }}
@@ -99,7 +99,7 @@ export default defineComponent({
     </div>
     <template v-if="table.tableCaption">
       <div
-        class="max-w-screen-3xl mx-auto block text-left px-0 text-gray-mid-dark text-body-sm mt-4"
+        class="max-w-screen-3xl mx-auto block text-left px-0 text-gray-mid-dark font-secondary text-sm mt-4"
         aria-hidden
       >
         {{ table.tableCaption }}

package/src/components/BlockTeaser/BlockTeaser.vue

@@ -31,7 +31,7 @@
         <component
           :is="theLabel || (theTeaserPage && theTeaserPage.label) ? 'h3' : 'h2'"
           v-if="theHeading"
-          class="text-h3 font-semibold tracking-normal lg:mt-2 mt-3"
+          class="text-h3 font-bold tracking-normal lg:mt-2 mt-3"
         >
           {{ theHeading }}
         </component>

package/src/components/CalendarChip/CalendarChip.vue

@@ -35,7 +35,7 @@ const splitDate = computed(() => {
     <template v-else-if="themeStore.isEdu && splitDate">
       <div
         v-if="splitDate.month"
-        class="font-extrabold text-6xl leading-tight tracking-wider uppercase"
+        class="font-display font-extrabold text-6xl leading-tight uppercase"
       >
         {{ splitDate.month.substring(0, 3) }}
       </div>
@@ -44,7 +44,7 @@ const splitDate = computed(() => {
       </div>
     </template>
     <template v-else-if="splitDate">
-      <div class="font-extrabold text-6xl leading-tight tracking-wider">
+      <div class="font-display font-extrabold text-6xl leading-tight tracking-wider">
         {{ splitDate.day }}
       </div>
       <div class="text-subtitle">

package/src/components/DetailHeadline/DetailHeadline.vue

@@ -7,7 +7,7 @@
       <template v-if="pill && pillLabel">
         <BasePill
           :variant="pillColor"
-          size="lg"
+          size="md"
           class="mr-3"
           :text="pillLabel"
         />
@@ -53,14 +53,14 @@
         >.</span
       >
       <span
-        :class="`${hasTag && !pill ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} my-4  text-gray-mid-dark uppercase text-sm lg:text-base leading-none`"
+        :class="`${hasTag && !pill ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} pt-px font-secondary text-gray-mid-dark text-sm uppercase leading-none`"
       >
         {{ readTime }}
       </span>
     </div>
     <BaseHeading
       level="h1"
-      :size="themeStore.theme === 'ThemeEdu' ? 'h1' : 'h2'"
+      size="h1"
       :itemprop="schema ? 'headline' : undefined"
       >{{ title }}
     </BaseHeading>

package/src/components/HeroLarge/HeroLarge.vue

@@ -49,7 +49,7 @@
               />
               <div
                 v-else-if="label"
-                class="font-secondary text-base font-semibold tracking-wider no-underline uppercase"
+                class="text-subtitle"
               >
                 {{ label }}
                 <span class="sr-only">.</span>
@@ -57,14 +57,13 @@
             </div>
             <h1
               v-if="title"
-              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:tracking-tightest lg:leading-tighter mb-5 font-bold leading-tight"
-              :class="{ uppercase: !themeStore.isEdu }"
+              class="lg:w-3/4 xl:w-3/5 xl:text-10xl lg:text-9xl md:text-8xl text-7xl lg:leading-tighter mb-5 font-display font-bold leading-tight"
             >
               {{ title }}
             </h1>
             <p
               v-if="summary"
-              class="lg:w-1/2 2xl:w-2/5 xl:text-6xl lg:text-4xl md:text-2xl lg:leading-tight text-lg font-medium"
+              class="font-display lg:w-1/2 2xl:w-2/5 xl:text-6xl lg:text-4xl md:text-2xl lg:leading-tight text-lg"
             >
               {{ summary }}
             </p>

package/src/components/HeroMedium/HeroMedium.vue

@@ -73,7 +73,7 @@
               <span class="sr-only">.</span>
             </p>
           </div>
-          <p class="text-h3 font-semibold mb-0">
+          <p class="text-h3 mb-0">
             <span class="mr-2">{{ feature.title }}</span>
             <span
               class="text-action-light lg:hidden can-hover:group-hover:ml-2 ml-0 text-4xl transition-all duration-200 ease-in"

package/src/components/HomepageCarousel/HomepageCarousel.vue

@@ -107,7 +107,7 @@
                       h-full
                       px-5
                       -ml-5
-                      font-semibold
+                      font-medium
                       text-base text-left text-white text-opacity-75
                       transition-all duration-200 ease-in
                       ${index === 0 ? '!text-white' : ''}

package/src/components/HomepageCarouselItem/HomepageCarouselItem.vue

@@ -58,7 +58,7 @@
         <div class="lg:w-3/4 xl:w-1/2 block">
           <p
             v-if="item.heading"
-            class="font-primary text-jpl-red-light lg:text-3xl lg:mb-0 mb-2 text-xl font-semibold tracking-normal uppercase"
+            class="text-subtitle text-jpl-red-light mb-2 text-xl uppercase"
           >
             {{ item.heading }}
             <span class="sr-only">.</span>
@@ -73,7 +73,7 @@
           >
             <p
               v-if="item.slideTitle"
-              class="lg:text-9xl leading-tighter text-5xl font-extrabold tracking-tighter"
+              class="font-display lg:text-9xl leading-tighter text-5xl font-extrabold mb-1"
             >
               <span class="mr-2">{{ item.slideTitle }}</span>
               <span

package/src/components/HomepageEmbedBlock/HomepageEmbedBlock.vue

@@ -6,7 +6,7 @@
   >
     <h2
       v-if="data[0].heading"
-      class="font-primary text-gray-dark lg:text-6xl mb-5 text-3xl font-semibold leading-normal tracking-normal uppercase"
+      class="text-h3 text-gray-dark mb-5"
     >
       {{ data[0].heading }}
     </h2>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarousel.vue

@@ -23,7 +23,7 @@
           </BaseHeading>
           <p
             v-if="data.summary"
-            class="text-body-md"
+            class="text-body-lg"
           >
             {{ data.summary }}
           </p>

package/src/components/HomepageMissionsCarousel/HomepageMissionsCarouselItem.vue

@@ -65,11 +65,11 @@ export default defineComponent({
       <div
         class="shifted-text can-hover:group-hover:-mt-3 lg:mt-0 -mt-3 transition-all duration-500 ease-in-out"
       >
-        <p class="mb-1 text-3xl font-semibold">{{ data.name }}</p>
-        <p class="text-gray-light-mid mb-1 text-lg whitespace-nowrap">
+        <p class="mb-1 text-h4">{{ data.name }}</p>
+        <p class="text-gray-light-mid text-body-md whitespace-nowrap">
           Current missions: {{ data.currentMissions }}
         </p>
-        <p class="text-gray-light-mid mb-2 text-lg whitespace-nowrap">
+        <p class="text-gray-light-mid mb-1 text-body-md whitespace-nowrap">
           Past missions: {{ data.pastMissions }}
         </p>
         <div

package/src/components/HomepageStats/HomepageStats.vue

@@ -197,7 +197,7 @@
                 inline
                 class="text-gray-mid-dark mt-2"
               >
-                <span class="text-sm"> Proximity {{ slotProps.formattedValue }} </span>
+                <span class="text-sm font-primary"> Proximity {{ slotProps.formattedValue }} </span>
               </BaseUnitToggle>
               <BaseLink
                 link-class="block"

package/src/components/HomepageTeaserBlock/HomepageTeaserBlock.vue

@@ -77,7 +77,7 @@
               </template>
             </div>
             <div class="px-6 pt-6 pb-4">
-              <div class="mb-2 text-3xl font-medium">
+              <div class="mb-2 text-h5">
                 {{ theCard.heading }}
               </div>
               <p

package/src/components/ImageDetailContextImage/ImageDetailContextImage.vue

@@ -5,7 +5,7 @@
     @click="toggleContextImagePreview()"
   >
     <div class="flex flex-row items-center justify-between py-3 text-white uppercase">
-      <span class="font-secondary pr-3 tracking-wider">Context Image</span>
+      <span class="font-secondary pr-3">Context Image</span>
       <span
         :class="{
           hidden: contextImagePreviewShow,

package/src/components/MetaPanel/MetaPanel.vue

@@ -191,7 +191,7 @@ const standardsIste = computed(() => {
                 </div>
                 <div class="w-full lg:grid grid-cols-2 lg:gap-6 xl:gap-10">
                   <div v-if="standardsEla">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       English Language Arts Standards (CCSS - ELA)
                     </div>
                     <span class="sr-only">.</span>
@@ -201,7 +201,7 @@ const standardsIste = computed(() => {
                     />
                   </div>
                   <div v-if="standardsMath">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       Math Standards (CCSS - Math)
                     </div>
                     <span class="sr-only">.</span>
@@ -211,7 +211,7 @@ const standardsIste = computed(() => {
                     />
                   </div>
                   <div v-if="standardsNgss">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       Science Standards (NGSS)
                     </div>
                     <span class="sr-only">.</span>
@@ -221,7 +221,7 @@ const standardsIste = computed(() => {
                     />
                   </div>
                   <div v-if="standardsIste">
-                    <div class="text-base font-semibold text-gray-dark mb-4">
+                    <div class="font-display text-lg font-bold text-gray-dark mb-4">
                       Technology Standards (ISTE)
                     </div>
                     <span class="sr-only">.</span>

package/src/components/MetaPanelAccordion/MetaPanelAccordion.vue

@@ -22,11 +22,11 @@ const { standards } = reactive(props)
       :item="item.standard as AccordionItemObject"
     >
       <template #heading>
-        <div class="w-full text-left pr-5">
-          <div class="text-sm tracking-normal text-action mb-0 can-hover:group-hover:underline">
+        <div class="font-primary w-full text-left pr-5">
+          <div class="text-sm text-action mb-0 can-hover:group-hover:underline">
             {{ item.standard.domain?.domain }}
           </div>
-          <div class="text-sm text-gray-mid-dark font-normal tracking-normal">
+          <div class="text-sm text-gray-mid-dark font-normal">
             {{ item.standard.code }}
           </div>
         </div>

package/src/components/MetadataEduResource/MetadataEduResource.vue

@@ -47,7 +47,7 @@ const time = computed(() => {
   <div
     class="MetadataEduResource"
     :class="{
-      '-compact text-sm xl:text-base': props.compact,
+      '-compact text-xs xl:text-sm font-secondary': props.compact,
       'text-body-lg': !props.compact
     }"
   >

package/src/components/MetadataEvent/MetadataEvent.vue

@@ -76,7 +76,7 @@ const location = computed(() => {
   <div
     class="MetadataEvent"
     :class="{
-      '-compact text-sm xl:text-base': props.compact,
+      '-compact text-xs xl:text-sm font-secondary': props.compact,
       'text-body-lg': !props.compact,
       '-allow-break': props.allowBreak
     }"

package/src/components/MissionDetailAbout/MissionDetailAbout.vue

@@ -16,7 +16,7 @@
       v-if="hasContent"
       class="col-span-3 col-start-9"
     >
-      <p class="font-secondary mb-5 text-base leading-tight tracking-wider uppercase">
+      <p class="text-subtitle mb-5">
         {{ sidebarTitle }}
       </p>
       <ul class="lg:mb-5 flex flex-wrap items-start mb-3">

package/src/components/MissionDetailHero/MissionDetailHero.vue

@@ -42,15 +42,17 @@
             >
               <p
                 v-if="subtitle"
-                class="text-body-sm mb-3 font-normal tracking-normal"
+                class="text-body-sm mb-3"
               >
                 {{ subtitle }}
               </p>
-              <h1 class="text-h1-alt break-normal">
+              <h1 class="text-h1-alt break-normal mb-2">
                 {{ title }}
               </h1>
 
-              <p class="xl:text-2xl lg:text-md xl:pr-26 xl:leading-normal text-xl leading-relaxed">
+              <p
+                class="font-display xl:text-2xl lg:text-md xl:pr-26 xl:leading-normal text-xl leading-relaxed"
+              >
                 {{ summary }}
               </p>
               <BaseButton

package/src/components/MissionDetailHighlights/MissionDetailHighlights.vue

@@ -150,7 +150,7 @@
               <div
                 v-if="missionTitle"
                 ref="missionHighlightsTitle"
-                class="sm:mt-16 relative mt-10 text-white transform -translate-x-1/2 opacity-0"
+                class="sm:mt-16 relative mt-10 text-white font-secondary transform -translate-x-1/2 opacity-0"
               >
                 {{ missionTitle }}
               </div>

package/src/components/MissionDetailHighlights/MissionDetailHighlightsCarouselItem.vue

@@ -2,7 +2,7 @@
   <div v-if="item">
     <p
       v-if="item.date"
-      class="font-secondary text-jpl-red-light mb-4 font-semibold tracking-wider uppercase"
+      class="text-subtitle text-jpl-red-light mb-4"
     >
       {{
         // @ts-ignore
@@ -11,7 +11,7 @@
     </p>
     <p
       v-if="item.dateFreeform"
-      class="font-secondary text-jpl-red-light mb-4 font-semibold tracking-wider uppercase"
+      class="text-subtitle text-jpl-red-light mb-4"
     >
       {{ item.dateFreeform }}
     </p>

package/src/components/MissionDetailStats/MissionDetailStatsMini.vue

@@ -7,7 +7,7 @@
           v-if="showClock && startDateTime"
           class="theme-inner lg:col-span-4 xl:col-span-4 2xl:col-span-3 sm:col-span-7 col-span-11"
         >
-          <p class="text-jpl-blue-lighter text-subtitle mb-3">
+          <p class="text-blue-200 text-subtitle mb-3">
             {{ clockTypeLabel }}
           </p>
           <BaseTimer
@@ -25,7 +25,7 @@
           :distance-api-urls="distanceApiUrls"
         >
           <template #label="slotProps">
-            <p class="text-jpl-blue-lighter text-subtitle mb-3">
+            <p class="text-blue-200 text-subtitle mb-3">
               {{ slotProps.label }}
             </p>
           </template>

package/src/components/MixinCarousel/MixinCarousel.vue

@@ -17,7 +17,7 @@
         <div class="sm:flex flex-wrap items-center justify-between">
           <h2
             v-if="heading"
-            class="MixinCarousel__Heading text-h3 defaultTheme:uppercase"
+            class="MixinCarousel__Heading text-h3"
           >
             {{ heading }}
           </h2>
@@ -51,7 +51,7 @@
           >
             <div class="xl:-ml-22 top-1/2 absolute left-0 z-30 -ml-20">
               <BaseButton
-                class="swiper-prev xl:text-xl"
+                class="swiper-prev !text-lg xl:!text-xl"
                 :aria-label="heading + ' - Previous slide'"
               >
                 <template #icon>
@@ -71,7 +71,7 @@
             </div>
             <div class="xl:-mr-22 top-1/2 absolute right-0 z-30 -mr-20">
               <BaseButton
-                class="swiper-next xl:text-xl"
+                class="swiper-next !text-lg xl:!text-xl"
                 :aria-label="heading + ' - Next slide'"
               >
                 <template #icon>

package/src/components/MixinFancybox/MixinFancybox.vue

@@ -255,7 +255,7 @@ export default defineComponent({
 
         if (slide.type === 'image') {
           caption = `<div class="mx-auto container">
-              ${slide.title ? `<h6 class="font-semibold text-4xl mb-1">${slide.title}</h6>` : ''}
+              ${slide.title ? `<h6 class="font-bold text-4xl mb-1">${slide.title}</h6>` : ''}
               ${
                 caption.length
                   ? `<div class="caption inline sm:flex text-body-md pb-2 mr-2 sm:mr-0"><div class="inline">${caption}</div></div>`

package/src/components/MixinFancybox/MixinFancyboxOpenButton.vue

@@ -16,7 +16,7 @@ export default defineComponent({
     role="presentation"
   >
     <div class="BaseButton -primary -icon-only pointer-events-none">
-      <span class="icon">
+      <span class="icon !text-lg xl:!text-xl">
         <IconExpand />
       </span>
     </div>

package/src/components/NavDesktop/NavDesktopDropdown.vue

@@ -3,7 +3,7 @@
     <NavDropdownToggle
       v-click-outside="closeDropdown"
       :aria-expanded="dropdownVisible ? true : false"
-      class="group relative z-20 px-4 font-medium border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
+      class="group relative z-20 px-4 font-bold font-display border-t-2 border-transparent edu:text-sm edu:xl:text-base edu:px-2 edu:xl:px-4"
       :class="{
         '-open': dropdownVisible
       }"

package/src/components/NavDesktop/NavDesktopDropdownContent.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="data"
-    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-gradient-to-r edu:bg-transparent edu:from-black/[.98] edu:to-jpl-violet/[.98] edu:to-90% 3xl:px-0 px-4 py-10 text-white"
+    class="NavDesktopDropdownContent bg-jpl-blue-darker bg-opacity-98 edu:bg-primary-dark 3xl:px-0 px-4 py-10 text-white"
   >
     <div
       v-if="data.menuColumns"
@@ -29,8 +29,8 @@
           :key="`MenuDescriptionColumn${index}`"
           class="order-2 col-span-3"
         >
-          <p class="text-medium text-6xl">{{ item.title }}</p>
-          <p class="text-sm leading-relaxed">
+          <p class="font-display text-6xl">{{ item.title }}</p>
+          <p class="text-base leading-relaxed">
             {{ item.description }}
           </p>
         </div>

package/src/components/NavDesktop/NavDesktopDropdownMore.vue

@@ -36,7 +36,7 @@
         <div class="row-span-1 row-start-2">
           <p
             v-if="data.strapline"
-            class="text-medium pr-5 mb-8 text-6xl leading-tight"
+            class="text-medium pr-5 mb-8 text-6xl font-display leading-tight"
           >
             {{ data.strapline }}
           </p>

package/src/components/NavDesktopEdu/NavDesktopEdu.vue

@@ -12,13 +12,13 @@
     }"
   >
     <!-- navbar -->
-    <div class="header-bg z-10 absolute inset-0 mx-auto"></div>
+    <div class="header-bg z-10 absolute inset-0 mx-auto bg-primary-dark"></div>
     <div class="px-4">
       <div class="h-18 container flex items-center justify-between mx-auto">
         <!-- branding -->
         <NavLogoLinks class="w-[17rem] z-20 flex flex-shrink-0 my-2 -ml-1">
           <img
-            :src="LogoWhite"
+            :src="LogoOutline"
             class="print:hidden"
             alt="JPL Logo"
             width="324"
@@ -33,9 +33,9 @@
           />
         </NavLogoLinks>
         <!-- site title -->
-        <div class="ml-2 pl-3 xl:ml-3 xl:pl-5 border-l border-white border-opacity-30 z-20">
+        <div class="ml-3 pl-3 md:ml-1 xl:ml-3 xl:pl-5 border-l border-white border-opacity-30 z-20">
           <BaseLink
-            class="text-white font-bold text-2xl xl:text-3xl"
+            class="text-white font-display font-bold text-2xl xl:text-3xl"
             to="/edu/"
             link-class="py-2"
             variant="none"
@@ -69,7 +69,7 @@
             <BaseLink
               href="https://www.nasa.gov/learning-resources/"
               variant="none"
-              class="NavDesktopLink group relative z-20 font-medium border-t-2 border-transparent text-sm xl:text-base px-2 xl:px-4"
+              class="NavDesktopLink group relative z-20 font-display font-bold border-t-2 border-transparent text-sm xl:text-base px-2 xl:px-4"
               link-class="inline-block py-2 transition-colors duration-100 ease-in border-b-2 border-transparent group-hover:border-white flex flex-wrap-none items-center"
               external-target-blank
             >
@@ -129,7 +129,7 @@ import IconSearch from './../Icons/IconSearch.vue'
 import IconClose from './../Icons/IconClose.vue'
 import type { NavLinkObject, BreadcrumbObject } from './../../utils/mixins'
 import LogoColor from '@explorer-1/common/src/images/svg/logo-tribrand-color.svg'
-import LogoWhite from '@explorer-1/common/src/images/svg/logo-tribrand-white.svg'
+import LogoOutline from '@explorer-1/common/src/images/svg/logo-tribrand-outline.svg'
 import type { BreadcrumbPathObject } from '../../interfaces'
 import {
   mixinIsActivePath,
@@ -189,8 +189,8 @@ export default defineComponent({
       // This is used in transition logic to avoid distracting animations on route changes
       // without this check, the nav would swoop in/out on a route change if it was visible before the route change occured (e.g. partially scrolled up on a page)
       scrolledCurrentPage: false,
-      LogoWhite: LogoWhite,
-      LogoColor: LogoColor
+      LogoColor,
+      LogoOutline
     }
   },
   computed: {

package/src/components/NavHeading/NavHeading.vue

@@ -6,7 +6,7 @@
     <template v-if="data.headingPage && data.heading">
       <BaseLink
         variant="none"
-        class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4"
+        class="text-subtitle text-jpl-blue-lighter edu:text-purple-300 inline-block mb-4"
         link-class="px-2 block"
         :to="data.headingPage.url"
       >
@@ -14,7 +14,7 @@
       </BaseLink>
     </template>
     <template v-else-if="data.heading">
-      <div class="text-subtitle text-jpl-blue-lighter edu:text-primary-lighter inline-block mb-4">
+      <div class="text-subtitle text-jpl-blue-lighter edu:text-purple-300 inline-block mb-4">
         <span class="px-2 block">{{ data.heading }}</span>
       </div>
     </template>