From 2d9f92618b92a3489efb72e2e083918892843384 Mon Sep 17 00:00:00 2001
From: Keith Solomon <ksolomon@gmail.com>
Date: Sun, 16 Aug 2026 13:12:01 -0500
Subject: [PATCH] feat(footer): Carbon Blue surface + cleaner widget rendering

---
 footer.php                        | 120 +++++++++++-------------------
 styles/components/site-footer.css |  60 ++++++---------
 2 files changed, 67 insertions(+), 113 deletions(-)

diff --git a/footer.php b/footer.php
index d5e466b..2517503 100644
--- a/footer.php
+++ b/footer.php
@@ -23,86 +23,54 @@ $footerNav = ! empty( $locations['footer_navigation'] )
 
 	</main>
 
-	<footer role="contentinfo" class="site-footer bg-gray-800 text-white text-base">
-		<div class="pt-16 pb-12 text-base">
-			<div class="container mx-auto">
-				<div class="grid grid-cols-4 gap-6 md:grid-cols-8 lg:grid-cols-12">
-					<div class="col-span-4 md:col-span-8 lg:col-span-4 max-w-[40ch] prose-p:text-14px prose-p:mb-4 text-balance" aria-labelledby="footer-header">
-						<h2 id="footer-header" class="max-w-64 h-auto">
-							<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="site-footer__logo-link h-full w-full">
-								<?php if ( $footerLogo ) { ?>
-									<img src="<?php echo esc_url( $footerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" class="site-footer__logo-image" />
-									<?php
-								} else {
-									echo esc_html( get_bloginfo( 'name' ) );
-								}
-								?>
-							</a>
-						</h2>
-
-						<div id="footer-description" aria-label="Footer description">
-							<?php echo wp_kses_post( $footerDesc ); ?>
-						</div>
-
-						<div class="social-links mt-8">
-							<?php
-							get_template_part(
-								'views/partials/social-media',
-								null,
-								array(
-									'circle'  => false,
-									'classes' => 'social-icons p-0 mr-2 text-30px text-gray-300! hover:text-info!',
-								)
-							);
-							?>
-						</div>
-					</div>
-
-					<div id="footRight" class="col-span-4 md:col-span-8 grid md:grid-cols-4 gap-10 lg:justify-end">
-						<div aria-labelledby="footer-area-1" class="prose-p:text-balance">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-1">Footer Area 1</h3>
-							<?php dynamic_sidebar( 'footer-1' ); ?>
-						</div>
-
-						<div aria-labelledby="footer-area-2" class="prose-p:text-balance">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-2">Footer Area 2</h3>
-							<?php dynamic_sidebar( 'footer-2' ); ?>
-						</div>
-
-						<div aria-labelledby="footer-area-3" class="prose-p:text-balance">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-area-3">Footer Area 3</h3>
-							<?php dynamic_sidebar( 'footer-3' ); ?>
-						</div>
-
-						<div id="footer-nav" aria-labelledby="footer-navigation">
-							<h3 class="mb-4 pb-2 border-b border-b-secondary font-bold text-white" id="footer-navigation"><?php echo esc_html__( 'Navigation' ); ?></h3>
-							<?php if ( $footerNav ) : ?>
-								<nav class="site-footer__nav" aria-label="Footer navigation">
-									<ul class="site-footer__nav-list">
-										<?php foreach ( $footerNav as $item ) : ?>
-											<li class="site-footer__nav-item list-none text-left <?php echo esc_attr( implode( ' ', $item->classes ) ); ?>">
-												<a href="<?php echo esc_url( $item->url ); ?>" class="site-footer__nav-link">
-													<?php echo esc_html( $item->title ); ?>
-												</a>
-											</li>
-										<?php endforeach; ?>
-									</ul>
-								</nav>
-							<?php endif; ?>
-						</div>
-					</div>
+	<footer role="contentinfo" class="site-footer">
+		<div class="container mx-auto py-12">
+			<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+				<div class="site-footer__brand max-w-[40ch]">
+					<h2 class="site-footer__title">
+						<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
+							<?php if ( $footerLogo ) { ?>
+								<img src="<?php echo esc_url( $footerLogo ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name' ) ); ?>" />
+							<?php } else {
+								echo esc_html( get_bloginfo( 'name' ) );
+							} ?>
+						</a>
+					</h2>
+					<?php if ( $footerDesc ) : ?>
+						<p class="site-footer__desc"><?php echo wp_kses_post( $footerDesc ); ?></p>
+					<?php endif; ?>
 				</div>
+
+				<?php for ( $i = 1; $i <= 3; $i++ ) :
+					$area_id = 'footer-' . $i;
+					if ( ! is_active_sidebar( $area_id ) ) {
+						continue;
+					}
+					?>
+					<div class="site-footer__area">
+						<?php dynamic_sidebar( $area_id ); ?>
+					</div>
+				<?php endfor; ?>
+
+				<?php if ( $footerNav ) : ?>
+					<nav class="site-footer__nav" aria-label="<?php echo esc_attr__( 'Footer navigation', 'ks-portfolio' ); ?>">
+						<h3><?php echo esc_html__( 'Navigation', 'ks-portfolio' ); ?></h3>
+						<ul>
+							<?php foreach ( $footerNav as $item ) : ?>
+								<li>
+									<a href="<?php echo esc_url( $item->url ); ?>">
+										<?php echo esc_html( $item->title ); ?>
+									</a>
+								</li>
+							<?php endforeach; ?>
+						</ul>
+					</nav>
+				<?php endif; ?>
 			</div>
 		</div>
 
-		<div class="copyright bg-primary text-white text-center py-3 text-14px">
-			<?php
-			if ( $copyright ) {
-				echo wp_kses_post( $copyright );
-			} else {
-				echo esc_html( '&copy; ' . gmdate( 'Y' ) . ' ' . get_bloginfo( 'name' ) . '.' );
-			}
-			?>
+		<div class="site-footer__copyright">
+			<?php echo wp_kses_post( $copyright ); ?>
 		</div>
 	</footer>
 
diff --git a/styles/components/site-footer.css b/styles/components/site-footer.css
index 4c5437b..ca789f7 100644
--- a/styles/components/site-footer.css
+++ b/styles/components/site-footer.css
@@ -1,41 +1,27 @@
 /* Footer styles */
 
 .site-footer {
-  #footRight {
-    div {
-      @apply col-span-1 md:col-span-4 lg:col-span-1;
-
-      h3 {
-        @apply font-bold text-secondary-300 text-20px mb-4 pb-2 border-b border-b-secondary-300
-      }
-
-      a {
-        @apply text-footlinks hover:opacity-60;
-      }
-    }
-
-    .widget {
-      li {
-        @apply text-16px my-1 mb-2 leading-4;
-      }
-
-      h4 {
-        @apply font-bold text-18px text-secondary mb-2;
-      }
-
-      a {
-        @apply transition-colors duration-300 hover:text-success focus-visible:text-success;
-      }
-    }
-
-    .menu-footer-menu-container {
-      @apply grow;
-    }
-  }
-
-  .copyright {
-    p { @apply leading-none m-0 p-0; }
-
-    a { @apply text-white hover:text-primary-500 underline underline-offset-2; }
-  }
+	background: var(--color-surface, #121318);
+	color: var(--color-on-surface, #e3e1e9);
+	border-top: 1px solid var(--color-outline-variant, #444651);
+}
+.site-footer__title a { color: var(--color-on-surface, #e3e1e9); text-decoration: none; }
+.site-footer__desc { color: var(--color-on-surface-variant, #c5c5d3); }
+.site-footer__area h3,
+.site-footer__nav h3 {
+	color: var(--color-on-surface, #e3e1e9);
+	font-family: var(--font-sans);
+	font-weight: 700;
+	margin: 0 0 0.75rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 1px solid var(--color-outline-variant, #444651);
+}
+.site-footer a { color: var(--color-primary, #b6c4ff); }
+.site-footer a:hover { text-decoration: underline; }
+.site-footer__copyright {
+	background: var(--color-surface-container-lowest, #0d0e13);
+	color: var(--color-on-surface-variant, #c5c5d3);
+	text-align: center;
+	padding: 0.75rem;
+	font-size: 0.875rem;
 }