✨feature: Build interior layout

lib/class-breadcrumbs.php

@@ -143,13 +143,16 @@ class Breadcrumbs {
 	private static function getCustomPostTypeBreadcrumbs() {
 		$breadcrumbs = array();
 		$postType    = get_post_type_object( get_post_type() );
+
         if ( $postType && ! in_array( get_post_type(), array( 'post', 'page' ), true ) ) {
 			$breadcrumbs[] = array(
 				'url'   => get_post_type_archive_link( $postType->name ),
 				'label' => $postType->labels->name,
 			);
 		}
+
         $breadcrumbs[] = array( 'label' => get_the_title() );
+
         return $breadcrumbs;
 	}
 
@@ -165,8 +168,10 @@ class Breadcrumbs {
 	 */
 	private static function getStaticPageBreadcrumbs( $post ) {
 		$breadcrumbs = array();
+
         if ( $post->post_parent ) {
 			$ancestors = array_reverse( get_post_ancestors( $post->ID ) );
+
             foreach ( $ancestors as $ancestor ) {
 				$breadcrumbs[] = array(
 					'url'   => get_permalink( $ancestor ),
@@ -174,7 +179,9 @@ class Breadcrumbs {
 				);
 			}
 		}
+
         $breadcrumbs[] = array( 'label' => get_the_title() );
+
         return $breadcrumbs;
 	}
 
@@ -257,6 +264,7 @@ class Breadcrumbs {
 	 */
 	private static function getAuthorArchiveBreadcrumb() {
 		$author = get_queried_object();
+
         return array( 'label' => 'Author: ' . $author->display_name );
 	}
 
@@ -315,17 +323,14 @@ class Breadcrumbs {
 				$activeClass = $isActive ? ' active' : '';
 				?>
                 <span class="p-2 breadcrumb-item<?php echo esc_attr( $activeClass ); ?>"
-				<?php
+                    <?php if ( $isActive ) : ?>
-				if ( $isActive ) :
+                        aria-current="page"
-					?>
+                    <?php endif; ?>>
-				aria-current="page"<?php endif; ?>>
+
                     <?php if ( ! empty( $item['url'] ) ) : ?>
                         <a href="<?php echo esc_url( $item['url'] ); ?>">
                             <?php if ( $index === 0 ) : ?>
-					<svg class="flex-shrink-0 w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" aria-label="Home">
+                                <?php echo esc_attr( $item['label'] ); ?>
-                        <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
-					</svg>
-					<span class="sr-only"><?php echo esc_attr( $item['label'] ); ?></span>
                             <?php else : ?>
                                 <?php echo esc_attr( $item['label'] ); ?>
                             <?php endif; ?>

styles/blocks/page-hero.css

@@ -2,10 +2,10 @@
  * Scoped to .page-hero to avoid affecting the homepage-hero block. */
 
 .page-hero {
-    background: linear-gradient(83.68deg, #032F46 3.13%, #006196 45.91%, #8FC9E6 96.27%);
+    background: linear-gradient(73.83deg, #8FC9E6 -8.7%, #006196 21.51%, #032F46 60.7%);
     isolation: isolate;
+    margin-bottom: 10rem;
     min-height: clamp(31rem, 38vw, 36rem);
-    overflow: hidden;
     position: relative;
 }
 
@@ -16,19 +16,22 @@
 }
 
 .page-hero__heading {
-    color: var(--color-light, #fff);
+    color: #fff;
-    font-family: var(--font-quincy, 'Quincy', serif);
+    line-height: 1;
-    font-weight: 400;
+    margin: 3rem 0 1.5rem;
-    font-size: clamp(2.5rem, 6vw, 4.5rem);
-    line-height: 1.05;
-    margin-block: clamp(1.5rem, 4vw, 3rem) 0;
     max-width: 36rem;
     text-align: left;
+
+    em {
+        color: var(--color-secondary);
+        font-style: normal;
+    }
 }
 
 .page-hero__intro {
-    color: var(--color-light, #fff);
+    color: #fff;
     font-size: clamp(1rem, 1.5vw, 1.25rem);
+    font-weight: 300;
     line-height: 1.5;
     max-width: 36rem;
     opacity: 0.95;
@@ -36,13 +39,13 @@
 }
 
 .page-hero__media {
-    bottom: -8%;
+    bottom: -5%;
     height: auto;
     max-height: none;
     pointer-events: none;
     position: absolute;
-    right: clamp(0.5rem, 2vw, 2rem);
+    right: 23vw;
-    top: clamp(2rem, 4vw, 4rem);
+    top: 3rem;
     width: auto;
     z-index: 1;
     /* Set width via max-width so the image's natural aspect ratio is preserved. */

styles/navigation/nav-main-default.css

@@ -31,6 +31,7 @@
             /* Hover state: triggered by li so it persists when moving into the submenu.
                Also triggered when a submenu is open (e.g. via keyboard/click). */
             &:hover,
+            &:has(a[aria-current="true"]),
             &:has(.menu-vdi__toggle[aria-expanded="true"]) {
                 >a,
                 >.menu-vdi__toggle {

views/partials/page-hero.php

@@ -31,14 +31,13 @@ $wrapperStyle = $bgColor ? 'background-color: ' . esc_attr( $bgColor ) . ';' : '
 ?>
 
 <div class="page-hero text-light <?php echo $isDark ? 'dark' : ''; ?>" style="<?php echo esc_attr( $wrapperStyle ); ?>">
-
     <div class="page-hero__content container mx-auto px-0!">
-        <div id="breadcrumbs">
+        <!-- <div id="breadcrumbs">
             <?php Breadcrumbs::render(); ?>
-        </div>
+        </div> -->
 
         <h1 class="page-hero__heading">
-            <?php echo wp_kses_post( $heading ); ?>
+            <?php echo wp_kses_post( $heading ); ?><em>.</em>
         </h1>
 
         <?php if ( $intro ) : ?>