From fcffceeac202850759d05fa83ed5ecb0a9c80286 Mon Sep 17 00:00:00 2001
From: hesamat <hesamat@users.noreply.github.com>
Date: Fri, 21 Aug 2026 23:57:30 -0700
Subject: [PATCH] Tooltip and page hierarchy styling fixes.

- Refine #page-hierarchy h2 a style: IranNastaliq, 2.1rem, line-height 2.4,
  5px 20px padding, max-width 575px, font-smoothing and legibility hints.
- Keep tooltip dark in both color schemes.
- Style tooltip links with white text and a subtle white hover highlight.
- Match the tooltip arrow to the dark tooltip background.
- Make the tooltip close button separator gold for better visibility.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>
---
 GanjooRazor/wwwroot/css/p8.css  | 13 +++++++++----
 GanjooRazor/wwwroot/js/vaabd.js |  2 +-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/GanjooRazor/wwwroot/css/p8.css b/GanjooRazor/wwwroot/css/p8.css
index 3c2d6de9..47911d32 100644
--- a/GanjooRazor/wwwroot/css/p8.css
+++ b/GanjooRazor/wwwroot/css/p8.css
@@ -1263,7 +1263,8 @@ pagination-controls {
     }
 
         .tooltip a:hover {
-            background: var(--card-inner);
+            background: rgba(255, 255, 255, 0.12);
+            color: white;
         }
 
     .tooltip::before {
@@ -1271,7 +1272,7 @@ pagination-controls {
         display: block;
         border-left: 0.5em solid transparent;
         border-right: 0.5em solid transparent;
-        border-bottom: 0.5em solid var(--card-inner);
+        border-bottom: 0.5em solid rgba(14, 17, 17, 0.9);
         position: absolute;
         top: 0;
         margin-top: -0.5em;
@@ -2038,11 +2039,15 @@ audio {
     -webkit-text-fill-color: var(--lapis);
     font-family: 'IranNastaliq', serif;
     font-size: 2.1rem;
-    line-height: 2;
+    line-height: 2.4;
     display: inline-block;
-    padding: 0 20px 4px;
+    padding: 5px 20px;
     border-bottom: 2px solid var(--brand);
     text-shadow: none;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    text-rendering: optimizeLegibility;
+    max-width: 575px;
 }
 
 .poets-poet {
diff --git a/GanjooRazor/wwwroot/js/vaabd.js b/GanjooRazor/wwwroot/js/vaabd.js
index 41a6e5c0..cb69dd48 100644
--- a/GanjooRazor/wwwroot/js/vaabd.js
+++ b/GanjooRazor/wwwroot/js/vaabd.js
@@ -54,7 +54,7 @@ var $close = $('<a href="#" id="vaabx">غیرفعال شود</a>').css({
     justifyContent: 'center',
     alignItems: 'center',
     textAlign: 'center',
-    borderTop: '1px solid rgba(255,255,255,0.2)', // Visual separator
+    borderTop: '1px solid #c9a050', // Visual separator
 });
 
 // Tooltip container styling