From a423952b26278717e77a80b5de67552db6002509 Mon Sep 17 00:00:00 2001
From: Anas Rashid <anasrasheed22@gmail.com>
Date: Fri, 9 Oct 2026 16:33:22 +0200
Subject: [PATCH] =?UTF-8?q?Header:=20the=20full=20shamsa=20logo=20(=D8=AF?=
 =?UTF-8?q?=DB=8C=D9=88=D8=A7=D9=86=20inside=20the=20medallion)=20in=20pla?=
 =?UTF-8?q?ce=20of=20the=20text,=2052=E2=80=9372px=20with=20the=20viewport?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 web/src/layouts/Base.astro |  2 +-
 web/src/styles/global.css  | 12 ++++--------
 2 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/web/src/layouts/Base.astro b/web/src/layouts/Base.astro
index b96fd248..d4e7b8e3 100644
--- a/web/src/layouts/Base.astro
+++ b/web/src/layouts/Base.astro
@@ -37,7 +37,7 @@ import Icon from '../components/Icon.astro';
   <body data-user={Astro.locals.user ? '1' : undefined}>
     <header class="site-header">
       <div class="wrap">
-        <a class="wordmark" href="/"><img class="logo" src="/logo/shamsa-icon.svg" width="44" height="44" alt="" /><span>دیوان</span></a>
+        <a class="wordmark" href="/" title="سرورق"><img class="logo" src="/logo/shamsa.svg" width="72" height="72" alt="دیوان" /></a>
         <form class="search-form" action="/search" method="get" role="search">
           <input type="search" name="q" id="q" data-urdu value={q} placeholder="شعر، لفظ یا عبارت تلاش کریں" aria-label="تلاش" autocomplete="off" />
           <button type="button" id="rom-toggle" class="in-box rom" aria-label="رومن حروف سے اردو" aria-pressed="false" title="رومن حروف سے اردو ٹائپنگ (dil → دل)">اب</button>
diff --git a/web/src/styles/global.css b/web/src/styles/global.css
index a5ad5678..2670e13d 100644
--- a/web/src/styles/global.css
+++ b/web/src/styles/global.css
@@ -87,12 +87,10 @@ body { margin: 0; background: var(--surface-page); color: var(--text); font-fami
 
 /* header: logo + search + toggles in a gold-bordered bar */
 .site-header .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 12px; }
-.wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: 'Noto Nastaliq Urdu', serif; font-size: 2rem; line-height: 1.5; color: var(--brand); font-weight: 700; }
-/* the logo: the shamsa medallion, then the word */
-.wordmark .logo { flex: none; width: 44px; height: 44px; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); transition: transform .3s; }
-.wordmark:hover .logo { transform: rotate(15deg); }
-.wordmark span { padding-bottom: .45em; margin-bottom: -.2em; } /* Nastaliq hangs below its line box: room underneath centres the ink on the medallion */
-@media (min-width: 641px) { .wordmark span { position: relative; top: -.22em; } }
+.wordmark { display: flex; flex: none; }
+/* the logo: the shamsa with دیوان inside, sized with the viewport */
+.wordmark .logo { width: clamp(52px, 13vw, 72px); height: auto; filter: drop-shadow(0 1px 3px rgb(0 0 0 / .15)); transition: transform .3s; }
+.wordmark:hover .logo { transform: rotate(8deg); }
 .search-form { flex: 1; min-width: 0; display: flex; position: relative; }
 .search-form input { background: var(--surface-sunken); }
 .search-form input { flex: 1; min-width: 0; padding: 4px 14px; padding-inline-end: 116px; } /* min-width 0: shrinks instead of pushing past the icons */
@@ -221,8 +219,6 @@ h1 + .muted { text-align: center; margin-top: 0; }
 /* phones: wordmark and icons on one row, the search box on its own full-width row below */
 @media (max-width: 640px) {
   .site-header .wrap { gap: 8px; }
-  .wordmark { font-size: 1.7rem; gap: 8px; }
-  .wordmark .logo { width: 38px; height: 38px; } /* Nastaliq's descenders hang below the line box: room so they clear the search row */
   .toggles { margin-inline-start: auto; gap: 4px; }
   .search-form { order: 3; flex-basis: 100%; }
 }