improved ui of societree/clan page

Author: Ciphrox

public/icons/arrow.svg

@@ -1,3 +1,16 @@
+:root {
+  --highlight-bg: #ffb6c1;
+  --highlight-text: #000;
+  --accent: #f0a93b;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --highlight-bg: #db7093;
+    --highlight-text: #fff;
+  }
+}
+
 .container__family {
   background: var(--background);
   min-height: 100vh;
@@ -74,6 +87,7 @@
     flex-direction: column;
     text-align: center;
     gap: 15px;
+    padding: 1rem;
   }
 
   & .open .card-info {
@@ -108,11 +122,19 @@
   }
 
   & .back {
-    background: var(--primary);
+    background: #F0A93B url("/icons/arrow.svg") center/60% no-repeat;
+    filter: invert(1);
+    transform: rotate(-135deg);
+    width: 2.2rem;
+    height: 2.2rem;
     padding: 0.25rem 0.75rem;
     border-radius: 8px;
   }
 
+  & .card.open::before {
+    display: none;
+  }
+
   & .card.open {
     grid-column: 1 / -1;
     width: 100%;
@@ -124,11 +146,14 @@
     overflow: visible;
     padding-bottom: 20px;
     margin-bottom: 1em;
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+    border: var(--primary) 4px solid;
+    border-top: 2px solid #f0e68c;
   }
 
   & .card.open .card-body {
     display: block;
+    background: color-mix(in srgb, var(--primary) 10%, transparent);
+    border-radius: 20px;
     animation: fadeIn 0.3s ease-in;
   }
 
@@ -152,6 +177,7 @@
   & .surname-heading {
     text-align: center;
     margin-bottom: 20px;
+    color: var(--accent);
   }
 
   & .surname-container {
@@ -236,7 +262,7 @@
     padding: 1em 1em;
     margin-bottom: 1em;
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     background: var(--primary);
     color: var(--background);
     backdrop-filter: blur(10px);
@@ -275,6 +301,14 @@
     border-color: var(--accent);
     box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent);
   }
+
+  & .highlight {
+    background: var(--highlight-bg);
+    color: var(--highlight-text);
+    padding: 0.25em 0.75em;
+    border-radius: 0.5em;
+    transition: background 0.3s ease, color 0.3s ease;
+  }
 }
 
 .icon {
@@ -343,7 +377,7 @@
       margin: 1em;
     }
 
-    & .surname-card > p {
+    & .surname-card>p {
       text-align: left;
     }
 
@@ -374,4 +408,4 @@
       font-size: 0.9em;
     }
   }
-}
+}

src/assets/styles/card.css

@@ -1,13 +1,14 @@
 .container__family {
   & .hero {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
     align-items: center;
     background: var(--primary);
     color: var(--background);
     text-align: center;
     color: white;
-    padding: 2rem 1rem 1rem;
+    padding: 2rem 3rem;
+    gap:1rem;
   }
 
   & .theme-glass {
@@ -23,7 +24,7 @@
 
   & .legend {
     display: flex;
-    justify-content: center;
+    justify-content: flex-start;
     gap: 2rem;
     flex-wrap: wrap;
     max-width: 600px;

src/assets/styles/societree.css

@@ -9,7 +9,7 @@ import "@/assets/styles/card.css";
       type="text"
       id="searchInput"
       class="search-bar theme-glass"
-      placeholder="Search by Gotra, Deity, Caste, or Surname..."
+      placeholder="Search by Gotra, Deity, Caste, or Surname... (in Hindi)"
     />
   </div>
 </div>
@@ -43,7 +43,7 @@ import "@/assets/styles/card.css";
       function highlightText(text: string, query: string) {
         if (!query) return text;
         const regex = new RegExp(`(${query.trim()})`, "gi");
-        return text.replace(regex, `<span style='background-color: yellow' class="highlight">$1</span>`);
+        return text.replace(regex, `<span class="highlight">$1</span>`);
       }
 
       function createKeyValuePairs(branch: Branch, query: string) {
@@ -97,7 +97,7 @@ import "@/assets/styles/card.css";
 
         return `
           <div class="card-header">
-            <button class="back">Back</button>
+            <button class="back"></button>
             <button class="copy-button">
               <span class="icon"></span>
             </button>
@@ -118,8 +118,8 @@ import "@/assets/styles/card.css";
             </div>
           </div>
 
-          <div class="card-body">
-            <h3>Surnames <span class="count">(${surnamesCount})</span></h3>
+          <div class="card-body theme-glass">
+            <h3 class="surname-heading">Surnames <span class="count">(${surnamesCount})</span></h3>
             <div class="surname-container">
               ${surnamesHTML}
             </div>