From 42deac12611665502f2ca07688cdfdf64c8f08bb Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Thu, 4 Jun 2026 18:06:23 +0330
Subject: [PATCH] [Fix] Mobile hamburger invisible + tour spotlighting hidden
 nav
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hamburger bars used the undefined var(--text) (this theme defines --ink), so they rendered transparent and the button looked blank on mobile. Switch the three var(--text) uses (burger bars, toast, tour bubble) to var(--ink). Tour: visible() used offsetParent/rect, which the collapsed mobile nav (visibility:hidden) still satisfies, so the tour tried to spotlight hidden links and looked broken on mobile. Use element.checkVisibility({checkVisibilityCSS}) (with a computed-style ancestor-walk fallback) so only truly-visible targets are toured — mobile now shows welcome + menu, desktop shows the full nav walkthrough.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/JobsMedical.Web/wwwroot/css/site.css |  6 +++---
 src/JobsMedical.Web/wwwroot/js/tour.js   | 13 ++++++++++++-
 2 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/JobsMedical.Web/wwwroot/css/site.css b/src/JobsMedical.Web/wwwroot/css/site.css
index 98a02f0..72a8630 100644
--- a/src/JobsMedical.Web/wwwroot/css/site.css
+++ b/src/JobsMedical.Web/wwwroot/css/site.css
@@ -82,7 +82,7 @@ a { color: inherit; text-decoration: none; }
   width: 42px; height: 42px; padding: 9px; border-radius: 10px; cursor: pointer;
   border: 1px solid var(--line); background: var(--surface);
 }
-.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .2s, opacity .2s; }
+.nav-burger span { display: block; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
 .nav-toggle:checked ~ .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
 .nav-toggle:checked ~ .nav-burger span:nth-child(2) { opacity: 0; }
 .nav-toggle:checked ~ .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@@ -96,7 +96,7 @@ a { color: inherit; text-decoration: none; }
 .toast {
   display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px;
   background: var(--surface); border: 1px solid var(--line); border-inline-start: 4px solid var(--primary);
-  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); color: var(--text);
+  border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.16); color: var(--ink);
   opacity: 0; transform: translateY(12px); transition: opacity .25s, transform .25s;
 }
 .toast.show { opacity: 1; transform: translateY(0); }
@@ -243,7 +243,7 @@ label { font-size: 13px; }
   outline: 2px solid var(--accent); transition: all .2s ease;
 }
 .tour-bubble {
-  position: fixed; z-index: 1001; background: var(--surface); color: var(--text);
+  position: fixed; z-index: 1001; background: var(--surface); color: var(--ink);
   border-radius: 14px; box-shadow: 0 14px 40px rgba(0,0,0,.28);
   padding: 16px; max-width: 320px;
 }
diff --git a/src/JobsMedical.Web/wwwroot/js/tour.js b/src/JobsMedical.Web/wwwroot/js/tour.js
index 793a921..0b2fee2 100644
--- a/src/JobsMedical.Web/wwwroot/js/tour.js
+++ b/src/JobsMedical.Web/wwwroot/js/tour.js
@@ -23,8 +23,19 @@
 
     function visible(el) {
         if (!el) return false;
+        // checkVisibility() correctly accounts for visibility:hidden / display:none on ANY
+        // ancestor — crucial here because the mobile nav is collapsed with visibility:hidden
+        // but its links still report a non-zero bounding box (they'd falsely pass otherwise).
+        if (typeof el.checkVisibility === 'function') {
+            if (!el.checkVisibility({ checkVisibilityCSS: true, opacityProperty: true })) return false;
+        } else {
+            for (var n = el; n && n.nodeType === 1; n = n.parentElement) {
+                var cs = getComputedStyle(n);
+                if (cs.display === 'none' || cs.visibility === 'hidden' || cs.visibility === 'collapse') return false;
+            }
+        }
         var r = el.getBoundingClientRect();
-        return el.offsetParent !== null && r.width > 0 && r.height > 0;
+        return r.width > 1 && r.height > 1;
     }
 
     function build() {