Clickable cards instead of buttons.

Author: Mark Randall

landing.php

@@ -101,15 +101,15 @@
 function buildNavCard(NavCardItem $card, array $config = []): string
 {
     $config = [
-        'cn_card' => 'landing-cc-card',
+        'cn_card' => 'landing-cc-card landing-card-ovh',
         'cn_card_content' => 'landing-cc-card-content',
         'cn_card_img' => 'landing-cc-card-img',
         ...$config,
     ];
 
     ob_start();
     ?>
-    <li class="vgrid-card <?= $config['cn_card'] ?>">
+    <a role="listitem" href="<?= safe($card->href) ?>" class="vgrid-card <?= $config['cn_card'] ?>">
         <div class="<?= $config['cn_card_content'] ?>">
             <div style="display: flex; gap: 1em; align-items: center">
                 <?php if ($card->image) { ?><img class="<?= safe($config['cn_card_img']) ?>" alt="Graphic of <?= $card->title ?>" src="<?= $card->image ?>" /><?php } ?>
@@ -120,11 +120,14 @@ function buildNavCard(NavCardItem $card, array $config = []): string
 
             <?php if ($card->href) { ?>
                 <div style="flex: 0 0 fit-content">
-                    <a href="<?= safe($card->href) ?>" class="landing-card-btn" ><?= safe($card->href_label)?></a>
+                    <span class="landing-card-btn landing-cc-btn" ><?= safe($card->href_label)?></span>
                 </div>
             <?php } ?>
         </div>
-    </li>
+<!--        <div style="flex: 0 0 48px; padding: 0.5em; display: flex; align-items: center">-->
+<!--            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640" fill="#aaaaaa">!Font Awesome Free v7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.<path d="M471.1 297.4C483.6 309.9 483.6 330.2 471.1 342.7L279.1 534.7C266.6 547.2 246.3 547.2 233.8 534.7C221.3 522.2 221.3 501.9 233.8 489.4L403.2 320L233.9 150.6C221.4 138.1 221.4 117.8 233.9 105.3C246.4 92.8 266.7 92.8 279.2 105.3L471.2 297.3z"/></svg>-->
+<!--        </div>-->
+    </a>
     <?php
     return ob_get_clean();
 }
@@ -249,7 +252,7 @@ function drawBranchInfo(array $release): void
 
     <div style="background: #202127">
         <div class="landing-section">
-            <ul class="vgrid"><?= buildNavCards($heroCards) ?></ul>
+            <div role="list" class="vgrid"><?= buildNavCards($heroCards) ?></div>
         </div>
     </div>
 
@@ -358,13 +361,13 @@ function drawBranchInfo(array $release): void
             <div style="display: flex; gap: 1.5em; flex-direction: column">
                 <div class="landing-section-header" role="heading">Community</div>
                 <div>
-                    <ul class="vgrid" id="community-cards"><?= buildNavCards($communityCards); ?></ul>
+                    <div role="list" class="vgrid" id="community-cards"><?= buildNavCards($communityCards); ?></div>
                 </div>
                 <div></div>
 
                 <div class="landing-section-header" role="heading">Events &amp; Conferences</div>
                 <div>
-                    <ul class="vgrid" id="conference-cards"><?= buildNavCards($eventCards) ?></ul>
+                    <div role="list" class="vgrid" id="conference-cards"><?= buildNavCards($eventCards) ?></div>
                 </div>
             </div>
         </div>
@@ -395,9 +398,9 @@ function drawBranchInfo(array $release): void
     <div>
         <div class="landing-section">
             <div class="landing-section-header">Language Development</div>
-            <ul class="vgrid" id="language-development">
+            <div role="list" class="vgrid" id="language-development">
                 <?= buildNavCards($developmentCards, ['cn_card' => 'landing-cc-card landing-cc-card-grey']) ?>
-            </ul>
+            </div>
         </div>
     </div>
 

styles/landing.css

@@ -150,18 +150,40 @@
  */
 
 .landing-cc-card {
+    all: unset;
     background: #3c4053;
+    border-radius: 1em;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     flex-grow: 1;
-    gap: 1em;
+    gap: 0.25em;
     overflow: hidden;
+    cursor: pointer;
+    color: white;
+    outline: 3px transparent;
+    transition: all 0.2s ease-in-out;
+}
+
+.landing-cc-card:hover {
+    outline: 3px solid #53576d;
+    background: #53576d;
+    overflow: hidden;;
+    transition: all 0.2s ease-in-out;
+}
+
+.landing-cc-card:focus {
+    outline: 3px solid #eeeeee;
 }
 
 .landing-cc-card-grey {
     background: #444444 !important;
 }
 
+.landing-cc-card-grey:hover {
+    background: #555555 !important;
+    outline: 3px solid #555555;
+}
+
 .landing-cc-card-img {
     height: 80px;
     width: 80px;
@@ -369,6 +391,8 @@
 }
 
 /* Hover state */
+.landing-card-ovh:hover .landing-card-btn,
+.landing-card-ovh:active .landing-card-btn,
 .landing-card-btn:hover {
     color: #ffffff !important;
     background-color: #111111;
@@ -377,16 +401,6 @@
     box-shadow: 6px 6px 0px 0px #000000;
 }
 
-/* Selected / Active state (when class is explicitly applied) */
-.landing-card-btn.landing-ver-hero-selected {
-    color: #ffffff !important;
-    background-color: #4f46e5; /* Modern Indigo/Blue selection color */
-    border-color: #4f46e5;
-    /* Presses the button down */
-    transform: translate(2px, 2px);
-    box-shadow: 0px 0px 0px 0px transparent;
-}
-
 /* Focus state for accessibility */
 .landing-card-btn:focus-visible {
     outline: 4px solid #818cf8;