Give dashboards a themed orb background and a solid current-nav state.

Login pages share the same wash as the app shell; customer light mode matches business while dark mode stays gray.

Co-authored-by: Cursor <cursoragent@cursor.com>

apps/business/src/components/BackgroundOrbs.module.css

@@ -0,0 +1,134 @@
+.bgOrbs {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.bgOrbs::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: radial-gradient(circle at 50% 50%, transparent 30%, rgba(255, 255, 255, 0.2) 100%);
+  backdrop-filter: blur(1px);
+}
+
+.orb1,
+.orb2,
+.orb3,
+.orb4 {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(100px);
+  will-change: transform;
+}
+
+.orb1 {
+  width: 560px;
+  height: 560px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary-light) 55%, #ffffff) 0%,
+    color-mix(in srgb, var(--primary) 30%, #ffffff) 55%,
+    transparent 72%
+  );
+  opacity: 0.55;
+  top: -140px;
+  right: -120px;
+  animation: floatOrb1 18s ease-in-out infinite;
+}
+
+.orb2 {
+  width: 480px;
+  height: 480px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary) 28%, #ffffff) 0%,
+    color-mix(in srgb, var(--primary) 38%, #ffffff) 50%,
+    transparent 70%
+  );
+  opacity: 0.42;
+  bottom: -100px;
+  left: 15%;
+  animation: floatOrb2 22s ease-in-out infinite;
+}
+
+.orb3 {
+  width: 380px;
+  height: 380px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--page-accent) 30%, #ffffff) 0%,
+    color-mix(in srgb, var(--page-accent) 48%, #ffffff) 55%,
+    transparent 72%
+  );
+  opacity: 0.42;
+  top: 38%;
+  left: -100px;
+  animation: floatOrb3 20s ease-in-out infinite;
+}
+
+.orb4 {
+  width: 320px;
+  height: 320px;
+  background: radial-gradient(
+    circle,
+    color-mix(in srgb, var(--primary-light) 45%, var(--page-accent)) 0%,
+    color-mix(in srgb, var(--page-accent) 32%, var(--primary-light)) 50%,
+    transparent 70%
+  );
+  opacity: 0.38;
+  top: 12%;
+  right: 28%;
+  animation: floatOrb4 24s ease-in-out infinite;
+}
+
+@keyframes floatOrb1 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-30px, 25px) scale(1.06);
+  }
+}
+
+@keyframes floatOrb2 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(35px, -20px) scale(1.05);
+  }
+}
+
+@keyframes floatOrb3 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(20px, 30px) scale(1.08);
+  }
+}
+
+@keyframes floatOrb4 {
+  0%,
+  100% {
+    transform: translate(0, 0) scale(1);
+  }
+  50% {
+    transform: translate(-25px, -15px) scale(1.04);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .orb1,
+  .orb2,
+  .orb3,
+  .orb4 {
+    animation: none;
+  }
+}

apps/business/src/components/BackgroundOrbs.tsx

@@ -0,0 +1,12 @@
+import styles from './BackgroundOrbs.module.css'
+
+export function BackgroundOrbs() {
+  return (
+    <div className={styles.bgOrbs} aria-hidden="true">
+      <div className={styles.orb1} />
+      <div className={styles.orb2} />
+      <div className={styles.orb3} />
+      <div className={styles.orb4} />
+    </div>
+  )
+}

apps/business/src/components/PageLayout.tsx

@@ -4,6 +4,7 @@ import { DraftCartProvider } from '../context/DraftCartContext'
 import { useT } from '../i18n/useT'
 import { Sidebar } from './Sidebar'
 import { Header } from './Header'
+import { BackgroundOrbs } from './BackgroundOrbs'
 import styles from './PageLayout.module.css'
 
 const NAV_EXPAND_QUERY = '(min-width: 1281px)'
@@ -45,6 +46,7 @@ export function PageLayout() {
   return (
     <DraftCartProvider>
       <div className={styles.layout} data-nav-open={navOpen ? 'true' : undefined}>
+        <BackgroundOrbs />
         {navOpen ? (
           <button
             type="button"

apps/business/src/components/Sidebar.module.css

@@ -118,8 +118,17 @@
 }
 
 .navItem.active {
-  background: rgba(var(--primary-rgb) / 0.12);
-  color: var(--primary);
+  background: var(--primary);
+  color: #fff;
+}
+
+.navItem.active:hover {
+  background: var(--primary-dark);
+  color: #fff;
+}
+
+.navItem.active .chevron {
+  color: #fff;
 }
 
 .navGroupBtn {
@@ -166,8 +175,13 @@
 }
 
 .subNavActive {
-  background: rgba(var(--primary-rgb) / 0.1);
-  color: var(--primary);
+  background: var(--primary);
+  color: #fff;
+}
+
+.subNavActive:hover {
+  background: var(--primary-dark);
+  color: #fff;
 }
 
 .footer {