From 21afd25af07786957cfb581cb298ec571e7a689d Mon Sep 17 00:00:00 2001
From: Simon Hamp <simon.hamp@me.com>
Date: Thu, 10 Sep 2026 13:11:43 +0100
Subject: [PATCH] Make nav buttons readable over dark content

Ultra, Masterclass and Build now use the same pill as the Mobile and
Desktop dropdowns, so they keep their contrast when the sticky nav
floats over dark images. The Bifrost button just says Bifrost instead
of cycling through words.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../views/components/bifrost-button.blade.php | 59 +--------------
 .../views/components/navigation-bar.blade.php |  6 +-
 tests/Feature/NavigationBarTest.php           | 74 +++++++++++++++++++
 3 files changed, 78 insertions(+), 61 deletions(-)
 create mode 100644 tests/Feature/NavigationBarTest.php

diff --git a/resources/views/components/bifrost-button.blade.php b/resources/views/components/bifrost-button.blade.php
index 86cb001ac..78e58297b 100644
--- a/resources/views/components/bifrost-button.blade.php
+++ b/resources/views/components/bifrost-button.blade.php
@@ -4,39 +4,6 @@
 
 <a
     href="https://bifrost.nativephp.com/"
-    x-data="{ tl: null, items: [] }"
-    x-init="
-        $nextTick(() => {
-            this.items = Array.from($refs.textContainer.children);
-            if (this.items.length > 1) {
-                gsap.set(this.items, { autoAlpha: 0, y: 10 });
-                gsap.set(this.items[0], { autoAlpha: 1, y: 0 });
-
-                const hold = 0.7;
-                this.tl = gsap.timeline({ repeat: -1 });
-
-                for (let i = 0; i < this.items.length; i++) {
-                    const curr = this.items[i];
-                    const next = this.items[(i + 1) % this.items.length];
-
-                    this.tl.to(curr, { duration: 0.5, autoAlpha: 0, y: -10, ease: 'circ.inOut' }, `+=${hold}`)
-                           .to(next, { duration: 0.5, autoAlpha: 1, y: 0, ease: 'circ.inOut' }, '<');
-                }
-            }
-        })
-    "
-    @mouseenter="
-        if (tl) {
-            tl.pause();
-            gsap.to(items, { autoAlpha: 0, y: -10, duration: 0.2 });
-            gsap.to(items[0], { autoAlpha: 1, y: 0, duration: 0.2 });
-        }
-    "
-    @mouseleave="
-        if (tl) {
-            tl.restart();
-        }
-    "
     @class([
         'group relative z-0 inline-flex items-center overflow-hidden rounded-full bg-gray-200 transition duration-200 will-change-transform hover:scale-x-105 dark:bg-slate-800',
 
@@ -61,29 +28,5 @@ class="absolute inset-0.5 rounded-full bg-white dark:bg-slate-950"
         class="absolute bottom-0 left-1/2 h-1/3 w-4/5 -translate-x-1/2 rounded-full bg-indigo-400/15 opacity-50 blur-md transition-all duration-500 group-hover:h-2/3 group-hover:opacity-100"
         aria-hidden="true"
     ></div>
-    <span
-        x-ref="textContainer"
-        class="inline-grid font-medium"
-    >
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            Try Bifrost!
-        </span>
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            Build
-        </span>
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            Distribute
-        </span>
-        <span
-            class="self-center justify-self-center whitespace-nowrap [grid-area:1/-1]"
-        >
-            {{ $small ? 'Ship' : 'Ship it!' }}
-        </span>
-    </span>
+    <span class="relative font-medium">Bifrost</span>
 </a>
diff --git a/resources/views/components/navigation-bar.blade.php b/resources/views/components/navigation-bar.blade.php
index 45743be45..259624999 100644
--- a/resources/views/components/navigation-bar.blade.php
+++ b/resources/views/components/navigation-bar.blade.php
@@ -81,7 +81,7 @@ class="-mt-px size-3.5"
             {{-- Ultra link (desktop only) --}}
             <a
                 href="{{ route('pricing') }}"
-                class="hidden items-center gap-1.5 rounded-full bg-orange-500/10 px-3 py-1.5 text-sm font-medium text-orange-600 transition duration-200 hover:bg-orange-500/20 lg:inline-flex dark:text-orange-400 dark:hover:bg-orange-500/20"
+                class="hidden items-center rounded-full bg-zinc-200/60 px-3 py-2 text-sm transition duration-200 hover:bg-zinc-200 lg:inline-flex dark:bg-slate-950/30 dark:ring-1 dark:ring-slate-700/50 dark:ring-inset dark:hover:bg-cloud/70"
             >
                 Ultra
             </a>
@@ -89,7 +89,7 @@ class="hidden items-center gap-1.5 rounded-full bg-orange-500/10 px-3 py-1.5 tex
             {{-- Course link (desktop only) --}}
             <a
                 href="{{ route('course') }}"
-                class="hidden items-center gap-1.5 rounded-full bg-emerald-500/10 px-3 py-1.5 text-sm font-medium text-emerald-600 transition duration-200 hover:bg-emerald-500/20 lg:inline-flex dark:text-emerald-400 dark:hover:bg-emerald-500/20"
+                class="hidden items-center rounded-full bg-zinc-200/60 px-3 py-2 text-sm transition duration-200 hover:bg-zinc-200 lg:inline-flex dark:bg-slate-950/30 dark:ring-1 dark:ring-slate-700/50 dark:ring-inset dark:hover:bg-cloud/70"
             >
                 Masterclass
             </a>
@@ -97,7 +97,7 @@ class="hidden items-center gap-1.5 rounded-full bg-emerald-500/10 px-3 py-1.5 te
             {{-- Build link (desktop only) --}}
             <a
                 href="{{ route('build-my-app') }}"
-                class="hidden items-center gap-1.5 rounded-full bg-violet-500/10 px-3 py-1.5 text-sm font-medium text-violet-600 transition duration-200 hover:bg-violet-500/20 lg:inline-flex dark:text-violet-400 dark:hover:bg-violet-500/20"
+                class="hidden items-center rounded-full bg-zinc-200/60 px-3 py-2 text-sm transition duration-200 hover:bg-zinc-200 lg:inline-flex dark:bg-slate-950/30 dark:ring-1 dark:ring-slate-700/50 dark:ring-inset dark:hover:bg-cloud/70"
             >
                 Build
             </a>
diff --git a/tests/Feature/NavigationBarTest.php b/tests/Feature/NavigationBarTest.php
new file mode 100644
index 000000000..e312a7dc1
--- /dev/null
+++ b/tests/Feature/NavigationBarTest.php
@@ -0,0 +1,74 @@
+<?php
+
+namespace Tests\Feature;
+
+use DOMDocument;
+use DOMXPath;
+use Illuminate\Foundation\Testing\RefreshDatabase;
+use PHPUnit\Framework\Attributes\Test;
+use Tests\TestCase;
+
+class NavigationBarTest extends TestCase
+{
+    use RefreshDatabase;
+
+    #[Test]
+    public function the_bifrost_button_just_says_bifrost(): void
+    {
+        foreach (['<x-bifrost-button />', '<x-bifrost-button small />'] as $template) {
+            $button = $this->blade($template);
+
+            $this->assertSame('Bifrost', trim(strip_tags((string) $button)));
+
+            $button->assertDontSee('gsap', escape: false);
+        }
+    }
+
+    /**
+     * Ultra, Masterclass and Build used to be tinted, see-through pills that
+     * lost their contrast whenever the sticky nav floated over dark content.
+     * They now share the resting background of the Mobile and Desktop dropdown
+     * buttons, so the expected classes are read off the Mobile dropdown itself.
+     */
+    #[Test]
+    public function the_desktop_nav_links_share_the_device_dropdown_background(): void
+    {
+        $dom = new DOMDocument;
+        libxml_use_internal_errors(true);
+        $dom->loadHTML('<?xml encoding="utf-8" ?>'.$this->get('/')->assertOk()->getContent());
+        libxml_clear_errors();
+
+        $xpath = new DOMXPath($dom);
+
+        $dropdownClasses = $xpath->query('//button[@id="mobile-dropdown-btn"]')->item(0)?->getAttribute(':class');
+
+        $this->assertSame(
+            1,
+            preg_match("/'([^']+)':\s*!open/", (string) $dropdownClasses, $closedDropdown),
+            'Could not read the resting background of the Mobile dropdown button.',
+        );
+
+        $expectedClasses = preg_split('/\s+/', $closedDropdown[1], flags: PREG_SPLIT_NO_EMPTY);
+
+        $links = [
+            'Ultra' => route('pricing'),
+            'Masterclass' => route('course'),
+            'Build' => route('build-my-app'),
+        ];
+
+        foreach ($links as $label => $href) {
+            $link = $xpath->query("//nav[@data-site-nav]/div/div/a[@href='{$href}']")->item(0);
+
+            $this->assertNotNull($link, "The {$label} link is missing from the nav bar.");
+            $this->assertSame($label, trim($link->textContent));
+
+            $linkClasses = preg_split('/\s+/', $link->getAttribute('class'), flags: PREG_SPLIT_NO_EMPTY);
+
+            $this->assertSame(
+                [],
+                array_values(array_diff($expectedClasses, $linkClasses)),
+                "The {$label} link should use the same background as the Mobile and Desktop dropdowns.",
+            );
+        }
+    }
+}