/* ============================================================
DMHouse — HEADER STYLES v3
============================================================ */
/* ─── Reset ایزوله ─── */
.dm-main-header *,
.dm-main-header *::before,
.dm-main-header *::after {
box-sizing: border-box !important;
}
.dm-main-header ul,
.dm-main-header li {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.dm-main-header a {
text-decoration: none !important;
box-shadow: none !important;
color: inherit;
}
.dm-main-header img {
max-width: 100%;
display: block;
box-shadow: none !important;
border: none !important;
}
.dm-main-header button {
font-family: inherit;
}
/* ════════════════════════════════════════════
CSS Variables — رنگبندی داینامیک
(مقادیر از PHP در wp_head override میشوند)
════════════════════════════════════════════ */
:root {
--dm-primary:var(--dm-primary);
--dm-primary-10: rgba(180, 63, 63, 0.08);
--dm-primary-20: rgba(180, 63, 63, 0.18);
--dm-primary-tint: #fdf2f2;
--dm-text: #1a1a1a;
--dm-text-light: #888;
--dm-border: #e8e8e8;
--dm-bg-soft: #f8f9fb;
--dm-white: #fff;
--dm-radius: 10px;
--dm-action-text: #444;
}
/* ════════════════════════════════════════════
نوار تبلیغاتی بالای صفحه
════════════════════════════════════════════ */
.site-top-banner {
width: 100%;
display: block;
line-height: 0;
}
.site-top-banner a {
display: block;
width: 100%;
}
.site-top-banner img {
width: 100%;
height: auto;
display: block;
}
/* ════════════════════════════════════════════
Wrapper اصلی هدر
════════════════════════════════════════════ */
/*
* ⚠ هدر عمداً دیگر از --dm-bg-soft (پسزمینهٔ صفحه) تغذیه نمیشود.
* تا پیش از این، هدر و بدنهٔ صفحه دقیقاً یک رنگِ خاکستریِ آبیفام داشتند و هدر
* از صفحه جدا دیده نمیشد. حالا هدر توکنِ مستقلِ خودش را دارد (پیشفرض سفید،
* قابلتغییر از تنظیمات) و در حالتِ شب همان بلوکِ توکنِ تیره آن را عوض میکند.
*/
.header-desktop {
background-color: var(--dm-header-bg, #ffffff) !important;
}
.dm-main-header {
width: 100% !important;
max-width: 100% !important;
direction: rtl !important;
background-color: var(--dm-header-bg, #ffffff) !important;
box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07) !important;
position: relative !important;
z-index: var(--dm-z-header, 1200) !important;
}
/*
* ⚠ این المان فقط عرض را محدود میکند و هرگز نباید رنگ بزند.
* پیشتر پسزمینهٔ soft داشت در حالی که .header-mobile سفید بود و ۱۶/۱۰ پیکسل
* پدینگ دورش میگذاشت ⇒ روی موبایل یک قابِ سفید دورِ یک بلوکِ خاکستری دیده
* میشد؛ همان «هدر دو رنگ». روی دسکتاپ پنهان مانده بود چون آنجا هر دو لایه
* تصادفاً یک رنگ بودند.
*/
.dm-header-container {
width: 100% !important;
max-width: var(--dm-container) !important;
margin: 0 auto !important;
position: static !important;
background: transparent !important;
}
/* ════════════════════════════════════════════
ردیف ۱: لوگو + جستجو + اکشنها
════════════════════════════════════════════ */
.header-main-row {
display: flex !important;
align-items: center !important;
gap: 24px !important;
padding: 14px 0 !important;
border-bottom: 1px solid var(--dm-border) !important;
}
/* لوگو */
.header-logo {
flex: 0 0 auto !important;
}
.header-logo a {
display: block !important;
}
.header-logo img {
max-height: 48px !important;
width: auto !important;
}
.header-logo .logo-text {
font-size: 22px;
font-weight: 900;
color: var(--dm-text);
}
/* جستجو */
.header-search {
flex: 1 !important;
max-width: 600px !important;
}
/*
* ⚠ باکس جستجو پیشتر پسزمینهٔ --dm-bg-soft و بوردرِ شفاف داشت، دقیقاً همان رنگِ
* خودِ هدر ⇒ عملاً نامرئی بود و فقط یک متنِ راهنما وسطِ هدر شناور بهنظر میرسید.
* حالا کارتِ سفید با بوردرِ دیدهشدنی است، مثل بقیهٔ کنترلهای هدر.
*/
.header-search form,
.header-search .dms-inline-search__box {
display: flex !important;
align-items: center !important;
background: var(--dm-header-search-bg, #f8f9fb) !important;
border-radius: 12px !important;
padding: 0 14px !important;
height: 48px !important;
border: 1.5px solid var(--dm-border) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, .04) !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
gap: 8px !important;
}
.header-search form:hover,
.header-search .dms-inline-search__box:hover {
border-color: #cfd3dd !important;
}
.header-search form:focus-within,
.header-search .dms-inline-search__box:focus-within {
border-color: var(--dm-primary) !important;
background: var(--dm-header-search-bg, #f8f9fb) !important;
box-shadow: 0 4px 14px var(--dm-primary-10) !important;
}
.header-search input[type="search"],
.header-search input[type="text"] {
flex: 1 !important;
border: none !important;
background: transparent !important;
outline: none !important;
font-size: 13px !important;
color: var(--dm-text) !important;
direction: rtl !important;
padding: 0 !important;
height: 100% !important;
box-shadow: none !important;
font-family: inherit;
}
/*
* ⚠ فقط روی ورودیِ خودِ افزونه (کلاسِ dms-inline-search__input) — نه ورودیِ
* فرمِ fallbackِ قالب که آیکونش داخلِ گپِ فلکس است، نه ابسلوت. آیکون سمتِ راستِ
* باکس مینشیند (سمتِ start در RTL)، پس padding-inline-start همان سمتیست که
* باید فاصله بگیرد — این پدینگ placeholder را از زیرِ آیکونِ ابسلوت دور نگه
* میدارد و متن دیگر رویِ آیکون نمیافتد.
*
* ⚠ سلکتور عمداً سهسطحی (نه دو کلاس تنها): قانونِ بالاتر در همین فایل
* (`.header-search input[type="text"]`) وزنِ ۰-۲-۱ دارد (اتریبیوتِ نوع هم یک
* واحد حساب میشود) و `padding: 0 !important` میزند — همان مقدارِ فیزیکیای
* که padding-inline-start در RTL به آن ترجمه میشود. دو کلاسِ ساده (۰-۲-۰) این
* جنگ را میبازد؛ با افزودنِ ظرفِ باکس، وزن به ۰-۳-۰ میرسد و برنده میشود.
*/
.header-search .dms-inline-search__box .dms-inline-search__input,
.mobile-search-wrapper .dms-inline-search__box .dms-inline-search__input {
padding-inline-start: 18px !important;
}
.header-search button[type="submit"] {
background: transparent !important;
border: none !important;
cursor: pointer !important;
color: var(--dm-ink-3, #999) !important;
display: flex !important;
align-items: center !important;
padding: 0 !important;
flex-shrink: 0 !important;
transition: color 0.2s !important;
}
.header-search button[type="submit"]:hover {
color: var(--dm-primary) !important;
}
/*
* ⚠ این قانون قبلاً leading-icon را مخفی میکرد، با این فرض که دکمهٔ submit خودش
* یک svg دارد و دو آیکون کنارِ هم میافتد. آن فرض برای مارکآپِ فعلیِ شورتکد درست
* نیست: دکمهٔ submit فقط یک خالی
* دارد (بدونِ svg)، پس با مخفیکردنِ leading-icon، باکس اصلاً هیچ آیکونی نشان
* نمیداد — دقیقاً همان چیزی که «شبیهِ باکسِ جستجو نیست» را گزارش دادید.
* leading-icon تنها آیکونِ واقعیست که در این مارکآپ svg دارد؛ برگردانده شد.
*/
/*
* ⚠ اصلاحِ کلیکناپذیریِ باکس: CSSِ خودِ افزونه این آیکون را با right:-10px
* میگذارد — یعنی نیمی از آیکون بیرونِ کادرِ ورودی، در گپِ padding خودِ فرم.
* آیکون pointer-events:none دارد (تا کلیک از زیرش رد شود)، ولی چون نیمهاش
* بیرونِ کادرِ input بود، همان نیمه بهجای input روی خودِ