/* =========================================================
TAJ GLOBAL STYLES
Shared styles and template overrides
========================================================= */
/* =========================================================
Brand Variables
========================================================= */
:root {
--taj-navy: #003a5b;
--taj-navy-dark: #082538;
--taj-orange: #cc5501;
--taj-text: #223743;
--taj-text-muted: #647681;
--taj-white: #ffffff;
--taj-border: rgba(0, 58, 91, 0.08);
--taj-header-height: 92px;
}
/* =========================================================
رفع ریشهای رنگ پیشفرض تیترها (h1 تا h6)
---------------------------------------------------------
style.css متغیر --titleColor را روی #393737 (طوسی تیره،
نزدیک به مشکی) تعریف کرده و همه h1..h6 سایت طبق قانون
سراسری همان فایل از همین متغیر رنگ میگیرند مگر اینکه
کلاس دیگری صراحتا رویشون رنگ ست کرده باشه. قبلا (برای رفع
اولین نمونه گزارششده در about-us.html) فقط کلاس .text-title
ساخته و رنگش به سرمهای صحیح تغییر داده شده بود، بدون دستزدن
به خود --titleColor، از ترس اینکه این متغیر جای دیگهای هم
(مثل پسزمینه دکمهها) استفاده شده باشه و تغییرش عوارض جانبی
ناخواسته بسازه.
با بررسی اینبار مشخص شد نگرانی اون تصمیم در عمل واقعیت نداشت:
هر جای دیگهای که --titleColor بهعنوان background بهکار رفته
(خط تزئینی کوچیک بالای نقلقولها، بولت لیستها، خط زیر لینک
حین هاور، میلههای آیکون منوی موبایل) صرفا جزئیات تزئینی کوچیکن
که سرمهایشدنشون همجهت با هویت بصری کل سایته، نه یه عارضه؛
و کلاس .bg-title (تنها جایی که این متغیر مستقیم پسزمینه یک
عنصر بزرگ میشد) اصلا تو هیچ صفحهای استفاده نشده (کد مرده).
در همین حین با اسکن سراسری هر ۱۰ صفحه واقعی سایت مشخص شد این
باگ فقط مال about-us.html نبود: appointment.html (۳ تیتر)،
terms-conditions.html (۱۱ از ۱۲ تیتر)، privacy-policy.html
(۱۶ از ۱۷ تیتر)، service.html و our-leaders.html (چند مورد)،
و حتی ۳ تیتر باقیمانده تو خود صفحه اصلی (بخش دانش تخصصی) هم
همین مشکل رو داشتن؛ یعنی رفع تکتکِ کلاس .text-title روی هر
المان بهجای رفع خود ریشه، دقیقا همون الگوی ناقصی بود که اینبار
باعث این حجم گزارش شد. برای همین، اینبار بهجای اضافهکردن
.text-title المانبهالمان، خود --titleColor بهطور کامل به رنگ
سرمهای صحیح (همونرنگ .text-title) تغییر میکنه؛ این یعنی هر
h1 تا h6 در کل سایت — چه الان وجود داشته باشه چه بعدا اضافه
بشه — بدون نیاز به کلاس اضافه، از همون ابتدا رنگ درست میگیره.
========================================================= */
:root {
--titleColor: #102f44;
}
/* =========================================================
Global Anchor Offset
Prevent sticky header from covering anchor targets
========================================================= */
html {
scroll-padding-top: 110px;
}
#start-conversation {
scroll-margin-top: 110px;
}
/* =========================================================
Accessibility
========================================================= */
.skip-link {
position: fixed;
top: 12px;
right: 12px;
z-index: 99999;
padding: 10px 16px;
border-radius: 8px;
background-color: var(--taj-white);
color: var(--taj-navy);
font-size: 14px;
font-weight: 700;
line-height: 1.6;
text-decoration: none;
box-shadow:
0 8px 24px rgba(0, 37, 68, 0.16);
transform: translateY(-160%);
transition: transform 0.2s ease;
}
.skip-link:focus {
transform: translateY(0);
}
.navbar-area a:focus-visible,
.navbar-area button:focus-visible {
outline: 3px solid var(--taj-orange);
outline-offset: 4px;
}
/* =========================================================
HEADER
========================================================= */
/* =========================================================
Header Base
========================================================= */
.navbar-area.style-three {
position: sticky !important;
top: 0;
width: 100%;
padding: 0 !important;
margin: 0;
z-index: 1000 !important;
background-color: var(--taj-white) !important;
border-bottom:
1px solid var(--taj-border);
transition:
box-shadow 0.25s ease,
background-color 0.25s ease;
animation: none !important;
}
/* Scrolled / Sticky State */
.navbar-area.style-three.sticky {
background-color: var(--taj-white) !important;
box-shadow:
0 10px 30px rgba(0, 37, 68, 0.08);
animation: none !important;
}
/* =========================================================
Header Layout
========================================================= */
.navbar-area.style-three .navbar-wrapper {
width: 100%;
min-height: var(--taj-header-height);
gap: 28px;
}
.navbar-area.style-three .other-options {
display: flex;
align-items: center;
flex: 0 0 auto;
margin: 0;
}
.navbar-area.style-three .other-options .option-item {
margin: 0;
}
/* =========================================================
Logo
========================================================= */
.navbar-area.style-three .navbar-brand {
display: flex;
align-items: center;
flex: 0 0 auto;
padding: 0;
margin: 0;
line-height: 1;
}
.navbar-area.style-three .navbar-brand img {
display: block;
width: 170px;
max-width: 170px;
height: auto;
margin: 0;
}
/*
Dark mode is not active in the current TAJ site.
Prevent both logo versions from being displayed together.
*/
.navbar-area.style-three .navbar-brand .logo-light {
display: block;
}
.navbar-area.style-three .navbar-brand .logo-dark {
display: none !important;
}
/* =========================================================
Navigation Base
========================================================= */
.navbar-area.style-three .menu-area {
min-width: 0;
}
.navbar-area.style-three .menu-section {
list-style: none;
}
.navbar-area.style-three .menu-mobile-header {
display: none;
}
/* =========================================================
Submenu Toggle (دور بیستودوم)
---------------------------------------------------------
دکمه کوچک کنار «درباره تاج» و «تماس با ما» که زیرمنو را
باز/بسته میکند. این بخش مستقل از عرض صفحه است: فقط ظاهر
خود دکمه و چرخش آیکون را مشخص میکند؛ نمایش/جای زیرمنو
خودش جدا برای دسکتاپ (min-width:1200px) و
موبایل/تبلت (max-width:1199px) تعریف شده چون رفتارشان
کاملا متفاوت است (هاور در برابر کلیک).
========================================================= */
.navbar-area.style-three .taj-submenu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
border: 0;
outline-offset: 2px;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.navbar-area.style-three .taj-submenu-toggle i {
transition: transform 0.25s ease;
}
.navbar-area.style-three .menu-item-has-children:hover > .taj-submenu-toggle i,
.navbar-area.style-three .menu-item-has-children:focus-within > .taj-submenu-toggle i,
.navbar-area.style-three .menu-item-has-children.taj-submenu-open > .taj-submenu-toggle i {
transform: rotate(180deg);
}
/* =========================================================
Desktop Navigation
1400px+
========================================================= */
@media (min-width: 1400px) {
.navbar-area.style-three .menu {
position: static;
display: block;
width: auto;
height: auto;
margin: 0;
background: transparent;
box-shadow: none;
overflow: visible;
transform: none !important;
}
.navbar-area.style-three .menu-area>.overlay {
display: none !important;
}
.navbar-area.style-three .menu>ul {
display: flex;
align-items: center;
gap: 30px;
margin: 0;
padding: 0;
}
.navbar-area.style-three .menu>ul>li {
position: relative;
display: block;
margin: 0;
padding: 0;
}
.navbar-area.style-three .menu>ul>li>a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 92px;
padding: 0;
color: var(--taj-text);
font-size: 16px;
line-height: 1;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
/* Active / Hover Indicator */
.navbar-area.style-three .menu>ul>li>a::after {
position: absolute;
right: 50%;
bottom: 22px;
width: 22px;
height: 2px;
content: "";
border-radius: 999px;
background-color: var(--taj-orange);
transform:
translateX(50%) scaleX(0);
transform-origin: center;
transition:
transform 0.25s ease;
}
.navbar-area.style-three .menu>ul>li>a:hover,
.navbar-area.style-three .menu>ul>li>a.active,
.navbar-area.style-three .menu>ul>li>a[aria-current="page"] {
color: var(--taj-navy);
}
.navbar-area.style-three .menu>ul>li>a:hover::after,
.navbar-area.style-three .menu>ul>li>a.active::after,
.navbar-area.style-three .menu>ul>li>a[aria-current="page"]::after {
transform:
translateX(50%) scaleX(1);
}
/* Desktop CTA */
.navbar-area.style-three .taj-header-cta {
white-space: nowrap;
}
.navbar-area.style-three .taj-header-cta .btn-text {
font-size: 15px;
}
}
/* =========================================================
Desktop / Laptop
1200px - 1399px
========================================================= */
@media (min-width: 1200px) and (max-width: 1399px) {
.navbar-area.style-three {
--taj-header-height: 82px;
}
.navbar-area.style-three .navbar-wrapper {
min-height: 82px;
gap: 18px;
}
.navbar-area.style-three .navbar-brand img {
width: 145px;
max-width: 145px;
}
.navbar-area.style-three .menu {
position: static;
display: block;
width: auto;
height: auto;
margin: 0;
background: transparent;
box-shadow: none;
overflow: visible;
transform: none !important;
}
.navbar-area.style-three .menu-area>.overlay {
display: none !important;
}
.navbar-area.style-three .menu>ul {
display: flex;
align-items: center;
gap: 20px;
margin: 0;
padding: 0;
}
.navbar-area.style-three .menu>ul>li {
position: relative;
display: block;
margin: 0;
padding: 0;
}
.navbar-area.style-three .menu>ul>li>a {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 82px;
padding: 0;
color: var(--taj-text);
font-size: 15px;
line-height: 1;
font-weight: 600;
text-decoration: none;
white-space: nowrap;
transition: color 0.2s ease;
}
.navbar-area.style-three .menu>ul>li>a::after {
position: absolute;
right: 50%;
bottom: 18px;
width: 20px;
height: 2px;
content: "";
border-radius: 999px;
background-color: var(--taj-orange);
transform:
translateX(50%) scaleX(0);
transform-origin: center;
transition:
transform 0.25s ease;
}
.navbar-area.style-three .menu>ul>li>a:hover,
.navbar-area.style-three .menu>ul>li>a.active,
.navbar-area.style-three .menu>ul>li>a[aria-current="page"] {
color: var(--taj-navy);
}
.navbar-area.style-three .menu>ul>li>a:hover::after,
.navbar-area.style-three .menu>ul>li>a.active::after,
.navbar-area.style-three .menu>ul>li>a[aria-current="page"]::after {
transform:
translateX(50%) scaleX(1);
}
.navbar-area.style-three .taj-header-cta {
white-space: nowrap;
}
.navbar-area.style-three .taj-header-cta .btn-text {
font-size: 14px;
}
}
/* =========================================================
Desktop Submenu (Dropdown)
1200px+
---------------------------------------------------------
یک بلوک واحد برای هر دو رنج دسکتاپ بالا (نه دو نسخه جدا
مثل رنگ/سایز لوگو)، چون خودِ رفتار باز/بستهشدن زیرمنو در
این دو رنج فرقی ندارد، فقط سایز لوگو/فونتهایی که از قبل
جدا تعریف شده بودن فرق دارن.
========================================================= */
@media (min-width: 1200px) {
.navbar-area.style-three .menu > ul > li.menu-item-has-children {
display: flex;
align-items: center;
gap: 2px;
}
.navbar-area.style-three .taj-submenu-toggle {
width: 22px;
height: 22px;
color: inherit;
font-size: 18px;
line-height: 1;
}
.navbar-area.style-three .menu > ul > li .menu-subs {
position: absolute;
top: 100%;
right: 0;
min-width: 210px;
margin: 0;
padding: 10px;
border-radius: 12px;
list-style: none;
background-color: var(--taj-white);
box-shadow: 0 20px 45px rgba(0, 37, 68, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
}
.navbar-area.style-three .menu > ul > li.menu-item-has-children:hover > .menu-subs,
.navbar-area.style-three .menu > ul > li.menu-item-has-children:focus-within > .menu-subs,
.navbar-area.style-three .menu > ul > li.menu-item-has-children.taj-submenu-open > .menu-subs {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.navbar-area.style-three .menu > ul > li .menu-subs li a {
display: block;
padding: 11px 14px;
border-radius: 8px;
color: var(--taj-text);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
white-space: nowrap;
text-decoration: none;
transition:
background-color 0.2s ease,
color 0.2s ease;
}
.navbar-area.style-three .menu > ul > li .menu-subs li a:hover,
.navbar-area.style-three .menu > ul > li .menu-subs li a.active {
background-color: var(--taj-tint);
color: var(--taj-navy);
}
}
/* =========================================================
TABLET + MOBILE NAVIGATION
0px - 1199px
========================================================= */
@media (max-width: 1199px) {
.cursor,
.cursor-inner {
display: none !important;
}
/* ---------------------------------------------------------
Body
--------------------------------------------------------- */
body.menu-open {
overflow: hidden !important;
touch-action: none;
}
/* ---------------------------------------------------------
Header
--------------------------------------------------------- */
.navbar-area.style-three {
--taj-header-height: 74px;
}
.navbar-area.style-three .navbar-wrapper {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
min-height: 74px;
gap: 16px;
}
/* ---------------------------------------------------------
Logo
--------------------------------------------------------- */
.navbar-area.style-three .navbar-brand {
position: relative !important;
display: flex !important;
align-items: center;
flex: 0 0 auto;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
transform: none !important;
}
.navbar-area.style-three .navbar-brand img {
width: 135px;
max-width: 135px;
height: auto;
}
/* ---------------------------------------------------------
Menu Area
--------------------------------------------------------- */
.navbar-area.style-three .menu-area {
position: static !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
flex: 0 0 auto;
}
/* =========================================================
DRAWER
CLOSED STATE
========================================================= */
.navbar-area.style-three #main-menu {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
display: block !important;
width: min(86vw, 360px) !important;
max-width: 360px !important;
min-width: 0 !important;
height: 100vh !important;
height: 100dvh !important;
margin: 0 !important;
padding: 0 !important;
z-index: 1099 !important;
overflow: hidden !important;
direction: rtl;
background-color: var(--taj-navy) !important;
box-shadow:
-20px 0 50px rgba(0, 0, 0, 0.18) !important;
/*
IMPORTANT:
Drawer is completely outside viewport
while menu is closed.
*/
transform:
translate3d(0, 0, 0) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition:
transform 0.32s ease,
opacity 0.2s ease,
visibility 0.32s ease !important;
}
/* =========================================================
DRAWER
OPEN STATE
========================================================= */
body.menu-open .navbar-area.style-three #main-menu,
.navbar-area.style-three #main-menu.active {
transform:
translate3d(0, 0, 0) !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* =========================================================
OVERLAY
CLOSED STATE
========================================================= */
.navbar-area.style-three .menu-area>.overlay {
position: fixed !important;
inset: 0 !important;
display: block !important;
width: 100vw !important;
height: 100vh !important;
height: 100dvh !important;
z-index: 1098 !important;
margin: 0 !important;
padding: 0 !important;
background-color:
rgba(0, 22, 36, 0.58) !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transition:
opacity 0.25s ease,
visibility 0.25s ease !important;
}
/* =========================================================
OVERLAY
OPEN STATE
========================================================= */
body.menu-open .navbar-area.style-three .menu-area>.overlay,
.navbar-area.style-three .menu-area>.overlay.active {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
/* =========================================================
Drawer Header
========================================================= */
.navbar-area.style-three .menu-mobile-header {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
height: 64px !important;
padding: 0 20px !important;
margin: 0 !important;
z-index: 2;
background-color:
var(--taj-navy) !important;
border-bottom:
1px solid rgba(255, 255, 255, 0.14) !important;
transform: none !important;
}
.navbar-area.style-three .menu-mobile-title {
display: block;
margin: 0;
padding: 0;
color: var(--taj-white);
font-size: 16px;
line-height: 1.5;
font-weight: 700;
text-align: right;
}
/* =========================================================
Close Button
========================================================= */
.navbar-area.style-three .menu-mobile-close {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
min-width: 44px;
flex: 0 0 44px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
color: var(--taj-white) !important;
background: transparent !important;
font-size: 26px;
line-height: 1;
cursor: pointer;
transform: none !important;
}
/* =========================================================
Menu List
========================================================= */
.navbar-area.style-three #main-menu .menu-section {
display: block !important;
width: 100% !important;
height: calc(100vh - 64px);
height: calc(100dvh - 64px);
margin: 0 !important;
padding:
12px 22px 32px !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain;
list-style: none !important;
background: transparent !important;
}
.navbar-area.style-three #main-menu .menu-section>li {
position: relative;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-bottom:
1px solid rgba(255, 255, 255, 0.10) !important;
background: transparent !important;
}
/* =========================================================
Menu Links
========================================================= */
.navbar-area.style-three #main-menu .menu-section>li>a:not(.taj-mobile-cta) {
position: relative !important;
display: block !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding:
17px 4px !important;
border: 0 !important;
color:
rgba(255, 255, 255, 0.90) !important;
background: transparent !important;
font-size: 16px !important;
line-height: 1.65 !important;
font-weight: 600 !important;
text-align: right !important;
text-decoration: none !important;
transform: none !important;
}
/* Remove template desktop indicator */
.navbar-area.style-three #main-menu .menu-section>li>a:not(.taj-mobile-cta)::after {
display: none !important;
content: none !important;
}
.navbar-area.style-three #main-menu .menu-section>li>a:hover,
.navbar-area.style-three #main-menu .menu-section>li>a.active,
.navbar-area.style-three #main-menu .menu-section>li>a[aria-current="page"] {
color: var(--taj-white) !important;
}
/* =========================================================
Submenu (Accordion)
---------------------------------------------------------
روی موبایل/تبلت هاور معنی ندارد؛ بنابراین اینجا زیرمنو
بهجای پاپآپ روی دسکتاپ، یک آکاردئون داخل همان ردیف است:
با کلیک روی taj-submenu-toggle (کلاس taj-submenu-open در
megamenu.js اضافه/حذف میشود)، فهرست زیرمنو زیر همان آیتم
باز میشود؛ لینک اصلی (درباره تاج/تماس با ما) دستنخورده و
مستقیم به مقصد خودش میرود.
========================================================= */
.navbar-area.style-three #main-menu .menu-section>li.menu-item-has-children {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
}
.navbar-area.style-three #main-menu .menu-section>li.menu-item-has-children>a:not(.taj-mobile-cta) {
width: auto !important;
flex: 1 1 auto !important;
}
.navbar-area.style-three #main-menu .taj-submenu-toggle {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 44px !important;
height: 44px !important;
flex: 0 0 44px !important;
margin: 0 !important;
padding: 0 !important;
color: rgba(255, 255, 255, 0.65) !important;
font-size: 20px !important;
}
.navbar-area.style-three #main-menu .menu-subs {
flex: 0 0 100% !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
max-height: 0;
overflow: hidden;
list-style: none !important;
position: static !important;
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 10px;
box-shadow: none !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition:
max-height 0.3s ease,
padding 0.3s ease;
}
.navbar-area.style-three #main-menu li.taj-submenu-open > .menu-subs {
max-height: 240px;
padding: 2px 0 12px !important;
}
.navbar-area.style-three #main-menu .menu-subs li>a {
display: block !important;
width: 100% !important;
padding: 12px 16px !important;
color: rgba(255, 255, 255, 0.72) !important;
font-size: 15px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
text-align: right !important;
}
.navbar-area.style-three #main-menu .menu-subs li>a:hover,
.navbar-area.style-three #main-menu .menu-subs li>a.active {
color: var(--taj-white) !important;
}
/* =========================================================
Mobile CTA
========================================================= */
.navbar-area.style-three #main-menu .menu-mobile-cta-item {
margin-top: 22px !important;
border-bottom: 0 !important;
}
.navbar-area.style-three #main-menu .taj-mobile-cta {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 52px;
margin: 0 !important;
padding:
12px 18px !important;
border:
1px solid rgba(255, 255, 255, 0.15) !important;
border-radius: 999px !important;
background-color:
var(--taj-white) !important;
color:
var(--taj-navy) !important;
font-size: 15px !important;
line-height: 1.5 !important;
font-weight: 700 !important;
text-align: center !important;
text-decoration: none !important;
}
.navbar-area.style-three #main-menu .taj-mobile-cta:active {
transform: scale(0.98);
}
/* =========================================================
Header Actions
========================================================= */
.navbar-area.style-three .other-options {
position: static !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
flex: 0 0 auto !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
.navbar-area.style-three .other-options .option-item {
position: static !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
}
/* =========================================================
Hamburger
========================================================= */
.navbar-area.style-three .menu-mobile-trigger {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: block !important;
width: 44px !important;
height: 44px !important;
min-width: 44px;
flex: 0 0 44px;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
transform: none !important;
cursor: pointer;
}
.navbar-area.style-three .menu-mobile-trigger span {
position: absolute !important;
right: 8px !important;
left: auto !important;
display: block !important;
width: 28px !important;
height: 2px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 999px;
background-color:
var(--taj-navy) !important;
transform: none;
}
.navbar-area.style-three .menu-mobile-trigger span:nth-child(1) {
top: 13px !important;
}
.navbar-area.style-three .menu-mobile-trigger span:nth-child(2),
.navbar-area.style-three .menu-mobile-trigger span:nth-child(3) {
top: 21px !important;
}
.navbar-area.style-three .menu-mobile-trigger span:nth-child(4) {
top: 29px !important;
}
}
/* =========================================================
SMALL MOBILE
480px and below
========================================================= */
@media (max-width: 480px) {
html {
scroll-padding-top: 90px;
}
#start-conversation {
scroll-margin-top: 90px;
}
.navbar-area.style-three {
--taj-header-height: 68px;
}
.navbar-area.style-three .navbar-wrapper {
min-height: 68px;
gap: 12px;
}
.navbar-area.style-three .navbar-brand img {
width: 120px;
max-width: 120px;
}
.navbar-area.style-three #main-menu {
width: min(90vw, 340px) !important;
max-width: 340px !important;
}
.navbar-area.style-three #main-menu .menu-section {
padding:
10px 18px 28px !important;
}
.navbar-area.style-three #main-menu .menu-section>li>a:not(.taj-mobile-cta) {
padding:
16px 4px !important;
font-size:
15px !important;
}
.navbar-area.style-three #main-menu .taj-mobile-cta {
min-height: 50px;
font-size:
14px !important;
}
}
/* =========================================================
VERY SMALL MOBILE
360px and below
========================================================= */
@media (max-width: 360px) {
.navbar-area.style-three .navbar-brand img {
width: 112px;
max-width: 112px;
}
.navbar-area.style-three #main-menu {
width: 92vw !important;
max-width: none !important;
}
}
/* =========================================================
Reduced Motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
.skip-link,
.navbar-area.style-three,
.navbar-area.style-three.sticky,
.navbar-area.style-three .menu,
.navbar-area.style-three .menu-area>.overlay,
.navbar-area.style-three .menu>ul>li>a,
.navbar-area.style-three .menu>ul>li>a::after,
.navbar-area.style-three .taj-mobile-cta,
.navbar-area.style-three .menu-mobile-trigger span {
transition: none !important;
animation: none !important;
}
}
/* =========================================================
TAJ Footer Slogan
========================================================= */
.footer-area.style-one .taj-footer-slogan {
display: block;
width: 100%;
max-width: 100%;
margin: 0;
font-size: clamp(38px, 3vw, 50px);
line-height: 1.5;
font-weight: 600;
white-space: normal !important;
overflow-wrap: break-word;
word-break: normal;
color: #ffffff;
}
/* Tablet */
@media (max-width: 991px) {
.footer-area.style-one .taj-footer-slogan {
font-size: clamp(30px, 4.5vw, 38px);
line-height: 1.55;
}
}
/* Mobile */
@media (max-width: 767px) {
.footer-area.style-one .taj-footer-slogan {
width: 100%;
max-width: 100%;
font-size: clamp(27px, 7.5vw, 32px);
line-height: 1.6;
white-space: normal !important;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.footer-area.style-one .taj-footer-slogan {
font-size: clamp(25px, 7vw, 29px);
line-height: 1.65;
}
}
/* =========================================================
TAJ Section Material — سیستم پسزمینه و کارت یکپارچه
همان طیف رنگی صفحه اصلی (home.css) برای استفاده در تمام
صفحات داخلی سایت، تا حس بصری با صفحه اصلی یکدست شود.
========================================================= */
:root {
--taj-tint: #eaf1f4;
--taj-tint-soft: #f7f9fa;
--taj-accent-navy: #0b4565;
}
.taj-bg-tint {
background-color: var(--taj-tint);
}
.taj-bg-tint-soft {
background-color: var(--taj-tint-soft);
}
.taj-bg-white {
background-color: var(--taj-white);
}
.taj-bg-navy {
/*
!important عمدی است: این کلاس یک "کلاس ابزاری بازنویسیکننده" است و قرار
است هر پسزمینه/رنگ متن قبلی کامپوننتهای قدیمی قالب (مثل .sidebar-widget
یا .faq-contact-box با specificity بالاتر) را در هر جای سایت بدون استثنا
بازنویسی کند.
*/
background-color: var(--taj-accent-navy) !important;
color: rgba(255, 255, 255, 0.85) !important;
}
.taj-bg-navy .text-title,
.taj-bg-navy h1,
.taj-bg-navy h2,
.taj-bg-navy h3,
.taj-bg-navy h4,
.taj-bg-navy h5,
.taj-bg-navy h6 {
color: var(--taj-white) !important;
}
.taj-bg-navy a:not(.btn):not(.taj-ui-link) {
color: var(--taj-white) !important;
}
/* کارت متن روی باند رنگی — مثلا صفحات قوانین و حریم خصوصی */
.taj-content-card {
padding: 50px;
border-radius: 20px;
background-color: var(--taj-white);
box-shadow: 0 20px 45px rgba(8, 37, 56, 0.06);
}
@media (max-width: 767px) {
.taj-content-card {
padding: 30px 22px;
}
}
/* کارت برجسته دعوتبهاقدام — مثلا بخش «به کمک فوری نیاز دارید؟» */
.taj-highlight-card {
padding: 36px 38px;
border-radius: 20px;
}
@media (max-width: 767px) {
.taj-highlight-card {
padding: 28px 24px;
}
}
/* کارت «به کمک فوری نیاز دارید؟» — نسخه تقویتشده (دور بیستوسوم)
---------------------------------------------------------
قبلا این بخش (در صفحه قرار ملاقات) فقط یک taj-highlight-card ساده
(پسزمینه آبی یکدست + padding) با یک h6 و یک لیست خام contact-info
بود؛ کاربر گفت این بخش نقش مهمی در جذب تماس داره و باید قویتر و
معتبرتر بهنظر برسه. برای اینکه کاملا دستساز نباشه و با زبان
طراحی موجود سایت هماهنگ بمونه، از همون الگوی کارت «روش تاج» در
صفحه اصلی (taj-diagnosis-method-inner در home.css) استفاده شده:
یک نوار تاکید نارنجی کوچک بالای کارت + یک برچسب (kicker) نارنجی
بالای عنوان، با همون رنگ/ضخامت/فاصله دقیق. ردیفهای تماس (تلفن/
ایمیل) هم عینا از کامپوننت taj-contact-detail/taj-contact-details
صفحه تماس بازاستفاده شدن (نه یک نسخه شبیهسازیشده جدید)، چون
پسزمینه آن کامپوننت (#0b4565) دقیقا با taj-bg-navy یکیه و بدون
نیاز به هیچ بازنویسی رنگی اینجا هم درست از آب درمیاد. */
.taj-urgent-card {
position: relative;
}
.taj-urgent-card::before {
content: "";
position: absolute;
top: 0;
right: 38px;
width: 52px;
height: 3px;
background: #d45c24;
border-radius: 999px;
}
.taj-urgent-card-kicker {
display: inline-block;
margin-bottom: 14px;
color: #ff9b68;
font-size: 12px;
font-weight: 700;
}
.taj-urgent-card-intro {
margin: 0 0 26px;
color: rgba(255, 255, 255, 0.78);
font-size: 14px;
line-height: 1.9;
}
@media (max-width: 767px) {
.taj-urgent-card::before {
right: 24px;
}
}
/* =========================================================
TAJ Principle Strip — فهرست ردیفی اصول همکاری (دور یازدهم)
---------------------------------------------------------
قبلا این بخش هم (مثل صنایع هدف زیرش) یه گرید ۴تایی از کارتهای
جعبهای با سایه بود؛ چون کاربر گفت این سکشن و «صنایع هدف» زیرش
تقریبا یهجور بهنظر میرسن، اینجا کامل به یه فرم دیگه (فهرست
ردیفی/تحریری با شماره بزرگ کمرنگ، بدون قاب/سایه جعبهای) تبدیل
شد تا از نظر ریتم بصری کاملا از گرید کارتی صنایع هدف متمایز باشه.
محتوای هر ۴ اصل دقیقا همون متن قبلی/تاییدشده است، فقط چیدمان و
ظاهرش عوض شده. */
.taj-principle-strip {
display: flex;
flex-direction: column;
}
.taj-principle-strip-item {
position: relative;
display: flex;
align-items: center;
gap: 24px;
padding: 28px 6px;
border-bottom: 1px solid rgba(16, 47, 68, 0.1);
}
.taj-principle-strip-item:first-child {
padding-top: 4px;
}
.taj-principle-strip-item:last-child {
padding-bottom: 4px;
border-bottom: 0;
}
.taj-principle-strip-number {
flex-shrink: 0;
width: 62px;
color: rgba(12, 68, 103, 0.14);
font-family: Arial, sans-serif;
font-size: 44px;
font-weight: 800;
line-height: 1;
text-align: center;
}
.taj-principle-strip-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--taj-tint);
color: var(--taj-accent-navy);
font-size: 21px;
line-height: 1;
}
.taj-principle-strip-body {
min-width: 0;
}
.taj-principle-strip-title {
margin: 0 0 6px;
color: #17384e;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
}
.taj-principle-strip-desc {
margin: 0;
color: #5f6c75;
font-size: 14.5px;
line-height: 1.85;
}
@media (max-width: 767px) {
.taj-principle-strip-item {
gap: 16px;
padding: 22px 2px;
}
.taj-principle-strip-number {
width: 44px;
font-size: 30px;
}
.taj-principle-strip-icon {
width: 42px;
height: 42px;
font-size: 18px;
}
}
@media (max-width: 480px) {
.taj-principle-strip-item {
flex-wrap: wrap;
}
.taj-principle-strip-body {
flex-basis: 100%;
margin-inline-start: 60px;
margin-top: 8px;
}
}
/* =========================================================
TAJ Contact Teaser Card — کارت فراخوان کوتاه تماس صفحه اصلی
========================================================= */
.taj-contact-teaser-card {
max-width: 640px;
margin: 0 auto;
padding: 46px 50px 42px;
border-radius: 24px;
background-color: var(--taj-white);
box-shadow: 0 25px 60px rgba(8, 37, 56, 0.08);
}
.taj-contact-teaser-phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin-left: 8px;
margin-bottom: -6px;
border-radius: 50%;
background-color: var(--taj-tint);
color: var(--taj-accent-navy);
font-size: 14px;
}
.taj-contact-teaser-or {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--taj-border);
}
@media (max-width: 575px) {
.taj-contact-teaser-card {
padding: 34px 24px 30px;
}
}
/* =========================================================
TAJ Service Card Number — نشان شماره روی تصویر کارت خدمت
برای همراستایی زبان بصری با نوار اصول شمارهدار.
========================================================= */
.taj-service-card-number {
position: absolute;
top: 18px;
inset-inline-start: 18px;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
background-color: var(--taj-accent-navy);
color: var(--taj-white);
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: 700;
box-shadow: 0 10px 22px rgba(8, 37, 56, 0.3);
}
/* =========================================================
TAJ Industry Card — کارت صنایع هدف صفحه خدمات
جایگزین دکمههای قرصیشکل قبلی؛ همان آیکونهای صنعت موجود،
در قالب کارت با یک توضیح کوتاه و صادقانه برای هر صنعت.
========================================================= */
.taj-industry-card {
display: block;
height: 100%;
padding: 34px 26px;
border-radius: 20px;
background-color: var(--taj-white);
box-shadow: 0 15px 35px rgba(8, 37, 56, 0.05);
text-align: center;
text-decoration: none;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.taj-industry-card:hover {
transform: translateY(-8px);
box-shadow: 0 22px 45px rgba(8, 37, 56, 0.12);
}
.taj-industry-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin: 0 auto 22px;
border-radius: 50%;
background-color: rgba(204, 85, 1, 0.1);
}
.taj-industry-card-icon img {
width: 28px;
height: 28px;
}
.taj-industry-card-title {
margin: 0 0 10px;
color: #17384e;
font-size: 19px;
font-weight: 700;
line-height: 1.6;
}
.taj-industry-card-desc {
margin: 0;
color: #5f6c75;
font-size: 14px;
line-height: 1.9;
}
@media (max-width: 767px) {
.taj-industry-card {
padding: 28px 22px;
}
}
/* =========================================================
TAJ Title Color — یکسانسازی رنگ تیترها با صفحه اصلی
تیترهای صفحه اصلی (مثل «راهکارهایی متناسب با منطق هر
کسبوکار») همیشه از رنگ آبی-سرمهای #102f44 استفاده میکنند.
اما کلاس عمومی قالب یعنی .text-title (که در تمام صفحات داخلی
برای تیترها استفاده میشود) بهجای آن از رنگ --titleColor
(#393737 — طوسی تیره، نزدیک به مشکی) استفاده میکرد. این یعنی
تیتر صفحاتی مثل خدمات، درباره ما و... با صفحه اصلی همرنگ
نبودند. اینجا رنگ .text-title را مستقیماً به همان آبی-سرمهای
صفحه اصلی تغییر میدهیم — بدون دستزدن به متغیر --titleColor
خود قالب، چون آن متغیر برای چیزهای دیگری هم (مثل پسزمینه
دکمهها) استفاده میشود و تغییرش میتوانست جاهای دیگر را هم
بدون قصد عوض کند.
========================================================= */
:root {
--taj-title-navy: #102f44;
}
.text-title {
color: var(--taj-title-navy);
}
/* =========================================================
TAJ Image Motion System — سیستم موشن تصاویر صفحه اصلی
این دو کلاس (.taj-motion-parallax و .taj-motion-reveal) قبلاً
فقط در home.css تعریف شده بودند، یعنی فقط در صفحه اصلی کار
میکردند. چون main.js (که در همه صفحات لود میشود) این کلاسها
را بهصورت عمومی در کل سایت جستجو و انیمیت میکند، منطقی است که
استایل پایهشان هم در فایل مشترک taj-global.css باشد تا هم روی
تصویر بالای صفحه خدمات (و بقیه صفحات داخلی) درست کار کنند، هم
جلوی هر مشکل احتمالی لبه/سرریز تصویر را بگیرند.
========================================================= */
.taj-motion-parallax,
.taj-motion-reveal {
position: relative;
overflow: hidden;
}
.taj-motion-parallax img,
.taj-motion-reveal img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform-origin: center center;
}
.taj-motion-reveal img {
transition: transform 0.65s cubic-bezier(.2, .65, .3, 1);
}
.taj-motion-reveal:hover img {
transform: scale(1.025);
}
@media (prefers-reduced-motion: reduce) {
.taj-motion-parallax img,
.taj-motion-reveal,
.taj-motion-reveal img {
transition: none !important;
transform: none !important;
}
}
/* =========================================================
TAJ Breadcrumb Motion — زندهکردن هدر (بردکرامب) صفحات داخلی
تصویر پسزمینه با taj-motion-parallax (بالا) موشن میگیرد؛
خط مسیر (خانه / نام صفحه) هم با یک محو-ظاهرشدن ساده وارد میشود
تا کل ناحیه، هماهنگ با بقیه سایت، ایستا بهنظر نرسد.
========================================================= */
.taj-breadcrumb-trail {
animation: taj-fade-up-in 0.9s 0.35s cubic-bezier(.2, .65, .3, 1) both;
}
@keyframes taj-fade-up-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.taj-breadcrumb-trail {
animation: none;
}
}
/* =========================================================
TAJ Footer — کل سیستم استایل فوتر (رفع باگ اصلی: فوتر صفحات داخلی)
------------------------------------------------------------
یافته: تمام ۵۵ قانون CSS مربوط به فوتر (.taj-footer و زیرکلاسهای آن —
پسزمینه سرمهای، چیدمان گرید سهستونی، دایرههای آیکون شبکههای
اجتماعی و خبرنامه، فاصلهگذاریها) تنها در home.css تعریف شده بودند؛
و home.css فقط در index.html (صفحه اصلی) از طریق بلوک page_css
بارگذاری میشود، نه در base.html بهصورت سراسری.
نتیجه: HTML فوتر در همه صفحات داخلی یکسان است (تایید شد)، اما چون
استایل آن بارگذاری نمیشد، بهصورت خام/بدوناستایل رندر میشد —
پسزمینه شفاف بهجای سرمهای، چیدمان ستونی از هم پاشیده (grid از
بین میرفت و همه بخشها زیر هم و تمامعرض میافتادند)، و دایرههای
آیکون (خبرنامه/شبکههای اجتماعی) بدون قاب گرد و بدوناندازه رها
میشدند. همین موضوع، توضیح محتمل «دایره شناور روی محتوا»یی است که
کاربر در اسکرینشات دید — احتمالا یکی از همین آیکونهای بدون قاب.
راهحل: کل این بلوک عینا از home.css در اینجا (فایل سراسری) هم
کپی شد تا در همه صفحات بارگذاری شود؛ چیزی از home.css حذف نشد تا
صفحه اصلی که درست کار میکرد دستنخورده و بیخطر بماند.
========================================================= */
/* =========================================================
FOOTER
========================================================= */
.taj-footer {
position: relative;
padding:
86px
0
0;
background: #082f48;
color: #ffffff;
overflow: hidden;
}
/* =========================================================
Main Layout
========================================================= */
.taj-footer-main {
display: grid;
grid-template-columns:
minmax(300px, 1.15fr)
minmax(170px, 0.55fr)
minmax(280px, 0.85fr);
gap:
clamp(55px, 7vw, 105px);
align-items: start;
padding-bottom: 62px;
}
/* =========================================================
Brand
========================================================= */
.taj-footer-brand {
min-width: 0;
}
.taj-footer-logo {
display: inline-block;
margin-bottom: 27px;
}
.taj-footer-logo img {
display: block;
width: 150px;
height: auto;
}
.taj-footer-brand-text {
max-width: 390px;
margin:
0
0
25px;
color:
rgba(255, 255, 255, 0.67);
font-size: 13px;
line-height: 2;
}
/* =========================================================
Contact
========================================================= */
.taj-footer-contact {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
margin: 0;
font-style: normal;
}
.taj-footer-contact a {
display: inline-flex;
align-items: center;
gap: 9px;
color:
rgba(255, 255, 255, 0.87);
font-size: 13px;
font-weight: 600;
line-height: 1.7;
text-decoration: none;
transition:
color 0.25s ease;
}
.taj-footer-contact a:hover {
color: #ffffff;
}
.taj-footer-contact i {
color: #ef9468;
font-size: 15px;
}
/* =========================================================
Shared Heading
========================================================= */
.taj-footer-heading {
display: block;
margin-bottom: 22px;
color: #ffffff;
font-size: 15px;
font-weight: 700;
line-height: 1.8;
}
/* =========================================================
Navigation
========================================================= */
.taj-footer-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.taj-footer-nav li {
margin-bottom: 11px;
}
.taj-footer-nav li:last-child {
margin-bottom: 0;
}
.taj-footer-nav a {
position: relative;
display: inline-block;
padding-bottom: 2px;
color:
rgba(255, 255, 255, 0.64);
font-size: 13px;
font-weight: 500;
line-height: 1.8;
text-decoration: none;
transition:
color 0.25s ease;
}
.taj-footer-nav a::after {
content: "";
position: absolute;
right: 0;
bottom: 0;
width: 0;
height: 1px;
background: #ef9468;
transition:
width 0.3s ease;
}
.taj-footer-nav a:hover {
color: #ffffff;
}
.taj-footer-nav a:hover::after {
width: 100%;
}
/* =========================================================
Knowledge / Newsletter
========================================================= */
.taj-footer-knowledge p {
max-width: 350px;
margin:
0
0
22px;
color:
rgba(255, 255, 255, 0.64);
font-size: 13px;
line-height: 2;
}
.taj-footer-newsletter-status {
display: inline-flex;
align-items: center;
gap: 11px;
max-width: 100%;
padding:
12px
14px;
border:
1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
background:
rgba(255, 255, 255, 0.055);
color:
rgba(255, 255, 255, 0.67);
font-size: 11.5px;
line-height: 1.8;
}
.taj-footer-newsletter-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex:
0
0
32px;
width: 32px;
height: 32px;
border-radius: 50%;
background:
rgba(255, 255, 255, 0.08);
color: #ef9468;
}
.taj-footer-newsletter-icon i {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
font-size: 14px;
line-height: 1;
transform:
translate(-50%, -50%);
}
/* =========================================================
Brand Statement
========================================================= */
.taj-footer-statement {
display: flex;
align-items: center;
gap: 17px;
padding:
27px
0;
border-top:
1px solid rgba(255, 255, 255, 0.09);
border-bottom:
1px solid rgba(255, 255, 255, 0.09);
color:
rgba(255, 255, 255, 0.90);
font-size:
clamp(16px, 1.25vw, 20px);
font-weight: 700;
line-height: 1.8;
}
.taj-footer-statement > span:nth-child(even) {
flex:
0
0
4px;
width: 4px;
height: 4px;
border-radius: 50%;
background: #d45c24;
}
/* =========================================================
Footer Bottom
========================================================= */
.taj-footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 35px;
min-height: 82px;
padding:
18px
0;
}
.taj-footer-copyright {
margin: 0;
color:
rgba(255, 255, 255, 0.50);
font-size: 11.5px;
line-height: 1.8;
}
/* =========================================================
Social
========================================================= */
.taj-footer-social {
display: flex;
align-items: center;
gap: 8px;
}
.taj-footer-social-link {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex:
0
0
36px;
width: 36px;
height: 36px;
border:
1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
background:
rgba(255, 255, 255, 0.05);
color:
rgba(255, 255, 255, 0.82);
text-decoration: none;
transition:
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
.taj-footer-social-link i {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
font-size: 15px;
line-height: 1;
transform:
translate(-50%, -50%);
}
a.taj-footer-social-link:hover {
border-color: #ffffff;
background: #ffffff;
color: #0b4565;
}
.taj-footer-social-link.is-disabled {
opacity: 0.38;
cursor: default;
}
/* =========================================================
Focus
========================================================= */
.taj-footer a:focus-visible {
outline:
3px solid #d45c24;
outline-offset: 4px;
}
/* =========================================================
Tablet
========================================================= */
@media (max-width: 991px) {
.taj-footer {
padding-top: 70px;
}
.taj-footer-main {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap:
48px
40px;
}
.taj-footer-knowledge {
grid-column:
1 / -1;
max-width: 600px;
}
}
/* =========================================================
Mobile
========================================================= */
@media (max-width: 767px) {
.taj-footer {
padding-top: 58px;
}
.taj-footer-main {
grid-template-columns: 1fr;
gap: 42px;
padding-bottom: 46px;
}
.taj-footer-logo {
margin-bottom: 22px;
}
.taj-footer-logo img {
width: 135px;
}
.taj-footer-brand-text {
max-width: none;
font-size: 13px;
}
.taj-footer-knowledge {
grid-column: auto;
max-width: none;
}
.taj-footer-statement {
flex-wrap: wrap;
gap:
8px
11px;
padding:
24px
0;
font-size: 15px;
}
.taj-footer-bottom {
flex-direction: column;
align-items: flex-start;
gap: 19px;
padding:
23px
0
28px;
}
.taj-footer-social {
order: 1;
}
.taj-footer-copyright {
order: 2;
}
}
/* =========================================================
Small Mobile
========================================================= */
@media (max-width: 420px) {
.taj-footer-statement {
display: grid;
grid-template-columns:
auto
4px
auto;
justify-content: start;
line-height: 1.9;
}
.taj-footer-statement > span:nth-child(5) {
grid-column:
1 / -1;
}
.taj-footer-statement > span:nth-child(4) {
display: none;
}
}
/* =========================================================
Reduced Motion
========================================================= */
@media (prefers-reduced-motion: reduce) {
.taj-footer-contact a,
.taj-footer-nav a,
.taj-footer-nav a::after,
.taj-footer-social-link {
transition:
none !important;
}
}
/* =========================================================
FOOTER — KNOWLEDGE LINK
========================================================= */
.taj-footer-knowledge-link {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 11px 14px;
border: 1px solid rgba(255, 255, 255, 0.10);
border-radius: 10px;
background: rgba(255, 255, 255, 0.055);
color: rgba(255, 255, 255, 0.78);
font-size: 12px;
font-weight: 600;
line-height: 1.8;
text-decoration: none;
transition:
background-color 0.25s ease,
border-color 0.25s ease,
color 0.25s ease;
}
.taj-footer-knowledge-link:hover {
background: rgba(255, 255, 255, 0.09);
border-color: rgba(255, 255, 255, 0.18);
color: #ffffff;
}
.taj-footer-knowledge-link:focus-visible {
outline: 3px solid #d45c24;
outline-offset: 4px;
}
/* =========================================================
TAJ Service Card Image — رفع کشیدگی نامتناسب عکس کارتهای خدمات
------------------------------------------------------------
یافته: هر کارت خدمت دو ![]()
روی هم داره (برای جلوه محو/آشکار حین
هاور که در قالب اصلی طراحی شده بود). عکس اول (که واقعا روی صفحه
دیده میشه) کلاسهای w-100/h-100 داره ولی نسبت تصویرش (۵۷۰ در ۳۶۶)
با عرض واقعی قاب کارت (که واکنشگراست و معمولا عریضتره) یکی
نیست؛ چون object-fit تعریف نشده بود، مرورگر عکس رو بهجای برش،
کشیده بود (تقریبا ۱۲٪ کشیدگی افقی، یعنی صورت/بدن افراد در عکس
کمی پهنتر از واقعیت دیده میشد). دلیل دوم: سلکتور جلوه هاور
(:first-child) فرض کرده بود این دو عکس اولین و دومین فرزند
مستقیم قاب هستن، ولی چون یک span شماره («۰۱»/«۰۲»/...) قبل از
عکسها اضافه شده بود، هیچکدوم واقعا first-child نبودن و جلوه
هاور اصلا فعال نمیشد.
راهحل: هر دو عکس دقیقا با object-fit:cover کادر رو پر میکنن
(بدون کشیدگی، با برش هوشمند مثل بقیه عکسهای سایت)، قاب با
aspect-ratio نسبت واقعی عکسهای فعلی رو حفظ میکنه، و سلکتور
جلوه هاور با first-of-type/nth-of-type اصلاح شد تا با وجود span
شماره هم درست کار کنه.
========================================================= */
.service-card.style-three .service-img {
aspect-ratio: 570 / 366;
}
.service-card.style-three .service-img img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.img-hover-scale .img-scale img:first-of-type {
transform: translateX(-50%) scaleX(2);
opacity: 0;
filter: blur(10px);
}
.img-hover-scale:hover .img-scale img:first-of-type {
transform: translateX(0) scaleX(1);
opacity: 1;
filter: blur(0);
}
.img-hover-scale:hover .img-scale img:nth-of-type(2) {
transform: translateX(50%) scaleX(2);
opacity: 0;
filter: blur(10px);
}
/* نکته: تا همینجا (بالای این خط) آخرین قانون فایل یک آکولاد بستهی
جاافتاده داشت (بهجای «}» فایل همونجا تموم میشد). چون این قانون
آخرین چیز در کل فایل بود، مرورگرها معمولا با اغماض همونجا میبستنش
و تا الان مشکل بصریای ایجاد نکرده بود؛ ولی چون قراره از همینجا به
بعد قانونهای جدید اضافه بشه، آکولاد جاافتاده اصلاح شد تا قانونهای
بعدی داخل این سلکتور قدیمی تفسیر نشن.
========================================================= */
/* =========================================================
صفحه درباره ما — بازطراحی با زبان بصری صفحه اصلی (دور هشتم)
---------------------------------------------------------
کاربر بهدرستی اعتراض کرد که صفحه دربارهما با وجود رفع رنگ
تیترها و اضافهشدن انیمیشن روی چند تیتر، هنوز شبیه صفحه اصلی
نیست. دلیل واقعی این بود که صفحه اصلی سالها پیش با یک سیستم
طراحی اختصاصی و کاملا جدید بازسازی شده (کلاسهای taj-principles-*،
taj-team-*، taj-diagnosis-*، کیکر/تیتر شمارهدار و…, همه در
home.css)، ولی صفحه دربارهما هیچوقت با همین سیستم بازسازی نشده
بود و همچنان از کلاسهای عمومی و قدیمی قالب اولیه (about-area,
wh-area, feature-item, team-card) استفاده میکرد. یعنی مشکل یک
باگ فنی نبود؛ صفحه واقعا «بازطراحینشده» بود.
برای حل ریشهای، about-us.html حالا:
1) فایل home.css رو هم لود میکنه (دقیقا مثل صفحه اصلی)، پس
کلاسهای taj-principles-* و taj-team-* که پایینتر توضیح داده
میشن مستقیما از home.css میان و اینجا از نو تعریف نشدن.
2) بخش «چرا ما را انتخاب میکنید» و بخش «تیم» رو با همون کامپوننت
شمارهدار/تیمِ صفحه اصلی بازسازی کرده (چون محتوای هر دو از قبل
عینا در صفحه اصلی هم هست، هیچ متن جدیدی ساخته نشده).
3) یک کارت فراخوان تماس کوتاه (taj-contact-section) در پایان صفحه
اضافه شده، چون قبلا صفحه بعد از بخش تیم بدون هیچ جمعبندی یا
دعوتبهاقدامی تمام میشد.
نکته مهم برای نگهداری: چون taj-principles-grid/taj-principle-item
و taj-team-* حالا هم در صفحه اصلی و هم در صفحه دربارهما استفاده
میشن، هر تغییری در استایل این کلاسها در home.css روی هر دو صفحه
اثر میذاره. این عمدی و همسو با خواسته «شبیه صفحه اصلی باشه» است،
ولی اگر بعدا فقط یکی از این دو صفحه نیاز به ظاهر متفاوت داشت، باید
یک کلاس تغییردهنده (modifier) مخصوص همون صفحه اضافه بشه، نه اینکه
کلاس مشترک مستقیم عوض بشه.
دو کلاس زیر (taj-kicker/taj-heading) عمدا با نام عمومی (نه
مخصوص این صفحه) نوشته شدن: برای بخشهایی از هر صفحه داخلی که
معادل دقیقی در کامپوننتهای home.css ندارن (مثلا بخش داستان/
ماموریت همین صفحه دربارهما)، ولی باید همون ظاهر کیکر نارنجی+
تیتر سرمهای صفحه اصلی رو داشته باشن. از دور نهم به بعد (صفحه
دانشنامه) هم به همین دو کلاس عمومی نیاز بود، برای همین بهجای
ساختن یک نسخه مشابه دیگه با نام تازه (که دقیقا همون الگوی
تکرارشده «رفع با کلاس یکبارمصرف» بود که چندبار در این پروژه
دیده شده)، این دو کلاس همینجا عمومی نگه داشته شدن. نسخه تکستونه
گرید اصول («.wh-content .taj-principle-item» و مشابهش) و کارتهای
ماموریت/دیدگاه واقعا فقط مخصوص همین صفحهان و همونجا موندن.
========================================================= */
/* کیکر (برچسب کوچک نارنجی) — دقیقا همارز با taj-team-kicker و
بقیه کیکرهای صفحه اصلی، با نامی عمومی که در هر صفحه داخلی قابل
استفادهست. */
.taj-kicker {
display: block;
margin-bottom: 13px;
color: #b34718;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
/* تیتر بزرگ سرمهای — همخانواده با taj-principles-title و
taj-team-title از نظر رنگ/وزن/اندازه، برای بخشهایی از صفحه
دربارهما که معادل مستقیم در صفحه اصلی ندارن (بخش داستان تاج،
بخش ماموریت و رویکرد). */
.taj-heading {
margin: 0;
color: #102f44;
font-size: clamp(28px, 2.6vw, 42px);
font-weight: 700;
line-height: 1.55;
}
.taj-heading.text-center {
max-width: 900px;
margin-right: auto;
margin-left: auto;
}
/* نسخه تکستونه taj-principles-grid — روی صفحه اصلی این گرید دو
ستونه، کنار یک ستون جانبی عریض قرار میگیره؛ اینجا (بخش «چرا ما
را انتخاب میکنید») همین گرید داخل نصف عرض کانتینر (کنار دو
عکس wh-img-3/wh-img-4) قرار گرفته، پس دو ستون در این عرض باریک
میشه؛ برای همین اینجا تکستونه میمونه و پدینگ آیتمها هم کمی
جمعوجورتر شده. باقی ظاهر (شمارههای ۰۱ تا ۰۴، خط نارنجی هاور و
جداکنندهها) دقیقا همون چیزیه که در home.css تعریف شده.
نکته فنی: سلکتور بهجای «.taj-about-principles-grid» تنها، با
پیشوند «.wh-content» نوشته شده. چون home.css (که خودش .taj-
principles-grid رو با دو ستون تعریف کرده) در base.html بعد از
taj-global.css لود میشه، با specificity برابر (هر دو یک کلاس)
قانون home.css بهخاطر ترتیب لود برنده میشد و ستونبندی تکستونه
اصلا اعمال نمیشد؛ افزودن «.wh-content» به سلکتور، specificity
این قانون رو بالاتر میبره تا مستقل از ترتیب لود فایلها درست
کار کنه. */
.wh-content .taj-principles-grid {
grid-template-columns: 1fr;
}
.wh-content .taj-principle-item {
min-height: auto;
padding: 28px 6px 26px;
}
/* بهبود ظاهری کارتهای «ماموریت ما» / «دیدگاه ما» — کلاس افزوده
(modifier) کنار کلاسهای قبلی about-card، نه جایگزین اونها؛ پس
هیچ اثری روی جاهای دیگهای که احتمالا از همون کلاسهای قدیمی
(about-card / style-one) استفاده میکنن نداره.
نکته فنی مهم: عمدا فقط box-shadow روی هاور تغییر میکنه، نه
transform/translateY. چون همین المان کلاس taj-motion-reveal هم
داره، انیمیشن GSAP بعد از تمومشدن، یک transform inline (مثلا
"translate(0px, 0px)") مستقیم روی خود المان ثابت میذاره؛ چون
استایل inline همیشه روی قانونهای کلاس (حتی :hover) اولویت داره،
هر transform که اینجا برای هاور تعریف بشه عملا هیچوقت دیده
نمیشه. برای جابهجایی/بالاآمدن روی هاور، باید یک المان داخلی
جدا (بدون taj-motion-reveal) اضافه بشه و transform روی همون
اعمال بشه؛ فعلا برای سادگی فقط سایه اضافه میشه. */
.taj-about-mission-card {
transition: box-shadow 0.3s ease;
}
.taj-about-mission-card:hover {
box-shadow: 0 20px 45px rgba(8, 37, 56, 0.1);
}
@media (max-width: 767px) {
.taj-heading {
font-size: clamp(24px, 6vw, 30px);
}
}
/* =========================================================
صفحه دانشنامه — بازطراحی با زبان بصری صفحه اصلی (دور نهم)
---------------------------------------------------------
دانشنامه (blog-left-sidebar.html) هم مثل دربارهما هیچوقت با
سیستم taj-* بازسازی نشده بود؛ فقط یک پیام ساده دربارهی نبودن
محتوا فعلا و یک ستون کناری بود. چون این صفحه هنوز هیچ مقاله واقعی منتشرشدهای
نداره (بررسی app.py: مسیر /blog فقط همین قالب رو بدون هیچ دادهای
نمایش میده)، بهجای ساختن مقاله جعلی، سه پیشنمایشی که از قبل و
عینا در پیشنمایش دانشنامه صفحه اصلی هست (همون عکسها/عنوانها)
اینجا هم نشون داده میشه — چیزی اختراع نشده، فقط تکرار محتوای
از قبل تاییدشده. چون اینها واقعا خواندنی نیستن، بر خلاف صفحه
اصلی نه لینکان نه نشانگر «مطالعه مقاله» دارن. */
/* =========================================================
صفحه دانشنامه — حذف لحن اعلامنبودن محتوا + بجهای واقعی (دور دهم)
---------------------------------------------------------
کاربر گفت طی چند روز آینده محتوای واقعی این صفحه را کامل میکند؛
بنابراین دیگر نباید صفحه لحنی داشته باشه که نشون بده این بخش
هنوز آماده/راهاندازی نشده — نه در متن قابلمشاهده، نه حتی در
کامنتهای خود فایل. هر جای این صفحه (تیتر بزرگ، بج روی عکس مقاله شاخص، پاراگراف
معرفی، meta description/og/twitter، متن ویجتهای سایدبار) که این
لحن رو داشت با متن قطعی/واقعی جایگزین شد — عمدتا با کپی مستقیم از
متن تاییدشده صفحه اصلی (کیکر/تیتر/پاراگراف بخش taj-knowledge
عینا تکرار شدن)، نه متن تازهنوشته.
ضمنا در همین بازبینی مشخص شد بج «آمادهنبودن محتوا» که دور نهم
روی دو عکس brief گذاشته بودم، اصلا با الگوی واقعی صفحه اصلی همخوان نبود — صفحه اصلی
روی کارتهای brief (بر خلاف کارت شاخص) هیچ بجی روی خود عکس نداره،
فقط taj-knowledge-category-text زیر عکس دسته را نشون میده. برای
همین بج image-overlay از دو کارت brief کامل حذف شد (دقیقا مطابق
صفحه اصلی) و به همراهش، چون دیگه هیچ عنصر absolute داخل
taj-knowledge-brief-media نمیمونه، قانون position:relative
دور نهم هم که فقط برای جاگیری همون بج اضافه شده بود حذف شد.
یک افزودنی کوچک تازه: نوار موضوعات (taj-knowledge-topics) زیر
پاراگراف معرفی — شش موضوعی که از قبل هم در ویجت سایدبار همین صفحه
بودن (چیز تازهای نیست)، فقط برای اینکه خود بخش هدر صفحه از نگاه
بصری کاملتر/محکمتر بهنظر برسه. */
.taj-knowledge-topics {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 22px;
}
.taj-knowledge-topics li {
padding: 7px 16px;
border-radius: 999px;
background: rgba(16, 47, 68, 0.06);
color: #102f44;
font-size: 13px;
font-weight: 600;
}
/* =========================================================
بردکرامب صفحات داخلی — حذف عکسهای استوک افراد غریبه (دور یازدهم)
---------------------------------------------------------
کاربر صریحا درخواست کرد بنر بردکرامب صفحات داخلی (درباره تاج، خدمات،
قرار ملاقات، تیم تاج، سوالات متداول، حریم خصوصی، قوانین و مقررات،
تماس با ما، دانشنامه — هر ۹ صفحهای که breadcrumb-area دارن، همه
بجز صفحه اصلی) دیگه از عکس استوک افراد غریبه استفاده نکنه. این
عکسها (taj-breadcrumb-*.jpg) عکسهای آماده و عمومی از افرادی
هستن که هیچ ربطی به تیم واقعی تاج ندارن؛ نه فقط دستورالعمل کاربر،
بلکه از نظر اعتبار برند هم درست نبود چون قابل تشخیصن (سبک عکسهای
استوک غربی) و در تضاد با عکسهای واقعی تیم صفحه تیم تاج قرار
میگیرن. چون نمیشه عکس جعلی از افراد واقعی ساخت یا عکس واقعی
جدیدی بدون داشتنش تهیه کرد، بهجاش یک پسزمینه انتزاعی/برندی طراحی
شد که از عناصر گرافیکی از قبل تاییدشده و رنگهای رسمی برند تاج
میسازه، نه هیچ عکس یا محتوای جدید اختراعی:
۱) گرادیان سرمهای دقیقا همخانواده با --taj-accent-navy (همون
رنگی که در کارتهای taj-bg-navy سراسر سایت استفاده میشه).
۲) بافت خطچینهای شطرنجی assets/img/shape-1.png (دور۴۵: این فایل چون
بین چند صفحه مشترکه به روت پوشه img منتقل شد) — همون فایلی که
همین الان هم پسزمینه هیرو صفحه اصلی هست؛ هیچ فایل تصویری
تازهای اضافه نشده.
۳) دو لکه نور نرم به رنگ نارنجی برند (--taj-orange) و سفید که
بهآرومی جابهجا میشن (با کلاسهای انیمیشن از قبل موجود در
style.css یعنی moveVertical/moveHorizontal — دقیقا همون
حرکتی که خیلی جاهای دیگه سایت ازش استفاده شده، نه انیمیشن
تازه).
۴) یک آیکون بزرگ و کمرنگ (فونت آیکون RemixIcon که از قبل روی
همه صفحات لود میشه، مثلا در فوتر) مخصوص هر صفحه که موضوع
همون صفحه رو نشون میده (ترازو برای قوانین، سپر برای حریم
خصوصی، تقویم برای قرار ملاقات و...) — چون فونت آیکون برداریه،
در هر اندازهای کاملا شفاف میمونه و هیچوقت شبیه عکس تار
دیده نمیشه؛ همین چیزیه که این طرح رو از تار/بیکیفیتشدن در
اندازههای بزرگ در امان نگه میداره.
ساختار قبلی br-bg/container و کلاسهای position/z-index دستنخورده
موند (فقط ![]()
جعلی داخل br-bg با این div جایگزین شد) تا رفتار
لایهبندی که همین الان درست کار میکنه (متن روی پسزمینه) بدون
ریسک اضافه بههم نخوره. تصاویر jpg قدیمی از دیسک پاک نشدن (برای
احتیاط)، فقط دیگه از هیچ قالبی بهشون ارجاع داده نمیشه. */
/* =========================================================
عکس واقعی پشت بردکرامب (دور بیستوسوم)
---------------------------------------------------------
کاربر درخواست کرد بهجای پسزمینه صرفا انتزاعی بالا، یک عکس
واقعی و مرتبط با موضوع همون صفحه هم پشت بردکرامب باشه. چون
این عکسها هنوز از مبینا نرسیدن (مشخصاتشون تازه به فایل اکسل
اضافه شد)، بهجای ![]()
از background-image با یک متغیر CSS
استفاده شده که هر صفحه مقدارش رو با style="--taj-breadcrumb-photo:
url('...')" اینلاین ست میکنه. تا وقتی فایل واقعی سر جاش نیست
(مقدار پیشفرض none)، فقط همون گرادیان سرمهای فعلی دیده میشه —
یعنی ظاهر فعلی سایت هیچ تغییری نمیکنه. بهمحض اینکه مبینا فایل
را با همون نام مشخصشده در اکسل توی پوشه assets/img/breadcrumb/
بذاره، همون لحظه بهصورت خودکار پشت گرادیان نیمهشفاف نمایش داده
میشه، بدون نیاز به تغییر کد. گرادیان عمدا کاملا محو نشده (حدود
۸۵ تا ۹۲ درصد کدره مونده) تا رنگ برند + خوانایی متن روی بردکرامب
در هر عکسی که بعدا اضافه بشه حفظ بمونه.
نکته امنیتی/کیفی: فایلهای عکس استوک قدیمی (افراد غریبه، همون
دلیلی که این پسزمینه انتزاعی دور یازدهم جایگزینشون کرد) از پوشه
breadcrumb به زیرپوشه _removed-stock-photos منتقل شدن، دقیقا تا
اینجا با همین نامهای قدیمی بهاشتباه بهکار نرن. */
.taj-breadcrumb-brandbg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: #0b4565;
background-image:
linear-gradient(135deg, rgba(15, 80, 117, 0.90) 0%, rgba(11, 69, 101, 0.90) 45%, rgba(7, 46, 70, 0.94) 100%),
var(--taj-breadcrumb-photo, none);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.taj-breadcrumb-brandbg::before {
content: "";
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background-image: url('../img/shape-1.png');
background-repeat: repeat;
background-position: center;
opacity: 0.14;
}
.taj-breadcrumb-glow {
position: absolute;
border-radius: 50%;
filter: blur(70px);
pointer-events: none;
}
.taj-breadcrumb-glow-1 {
width: 380px;
height: 380px;
top: -140px;
right: -60px;
background: radial-gradient(circle, rgba(246, 140, 65, 0.55) 0%, rgba(246, 140, 65, 0) 70%);
animation: moveVertical 9000ms ease-in-out infinite;
}
.taj-breadcrumb-glow-2 {
width: 320px;
height: 320px;
bottom: -160px;
left: 10%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 70%);
animation: moveHorizontal 11000ms ease-in-out infinite;
}
.taj-breadcrumb-icon {
position: absolute;
top: 50%;
left: 5%;
transform: translateY(-50%);
font-size: 230px;
line-height: 1;
color: rgba(255, 255, 255, 0.07);
animation: moveVertical 7000ms ease-in-out infinite;
}
@media (max-width: 991px) {
.taj-breadcrumb-icon {
font-size: 150px;
}
.taj-breadcrumb-glow-1 {
width: 260px;
height: 260px;
}
.taj-breadcrumb-glow-2 {
width: 220px;
height: 220px;
}
}
@media (max-width: 575px) {
.taj-breadcrumb-icon {
font-size: 105px;
left: -8px;
}
}
@media (prefers-reduced-motion: reduce) {
.taj-breadcrumb-glow-1,
.taj-breadcrumb-glow-2,
.taj-breadcrumb-icon {
animation: none !important;
}
}
/* =========================================================
فهرست سریع بخشها در صفحات قوانین/حریم خصوصی (دور یازدهم)
---------------------------------------------------------
صفحات terms-conditions.html و privacy-policy.html قبلا فقط یک
ستون طولانی از پاراگرافهای خام بودن (۱۰ و ۱۲ بخش پشت هم، هیچ
کمکی برای پیدا کردن بخش موردنظر). چون کاربر این صفحات رو دقیقا
نمونه صفحاتی معرفی کرد که باید «با دقت بیشتر، طبق روال بقیه
صفحات و با همون جذابیت» بازطراحی بشن، یک ناوبری سریع (فهرست
کلیکشدنی بخشها، با آیکون RemixIcon مخصوص هر بخش) اضافه شد که
با لینک لنگر (#id) مستقیم به همون h5 میپره. این محتوای تازهای
نیست — فقط همون تیترهای h5 که از قبل در متن واقعی این دو صفحه
بودن، بهصورت یک فهرست قابلکلیک در بالای صفحه هم تکرار شدن؛ هیچ
عدد/آمار/ادعای تازهای اضافه نشده. scroll-margin-top روی h5 هم
اضافه شد تا هدر sticky موقع پرش با لینک، تیتر مقصد رو نپوشونه
(ارتفاع هدر با اندازهگیری واقعی Playwright: ۹۳px دسکتاپ، ۶۹px
موبایل — عدد امنتر گذاشته شد). */
.taj-legal-quicknav {
display: block;
margin: 0 0 34px;
padding-bottom: 30px;
border-bottom: 1px solid rgba(9, 68, 104, 0.1);
}
.taj-legal-quicknav-label {
display: block;
margin-bottom: 14px;
color: #b34718;
font-size: 13px;
font-weight: 700;
line-height: 1.8;
}
.taj-legal-quicknav-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.taj-legal-quicknav-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-radius: 12px;
background-color: var(--taj-tint);
color: var(--titleColor);
font-size: 13.5px;
font-weight: 600;
line-height: 1.6;
transition: background-color 220ms ease, transform 220ms ease, color 220ms ease;
}
.taj-legal-quicknav-item i {
flex-shrink: 0;
font-size: 18px;
color: var(--taj-accent-navy);
transition: color 220ms ease;
}
.taj-legal-quicknav-item:hover,
.taj-legal-quicknav-item:focus-visible {
background-color: var(--taj-accent-navy);
color: #ffffff;
transform: translateY(-2px);
}
.taj-legal-quicknav-item:hover i,
.taj-legal-quicknav-item:focus-visible i {
color: #ffffff;
}
.terms-wrap .single-para h5[id] {
scroll-margin-top: 115px;
}
@media (max-width: 991px) {
.taj-legal-quicknav-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 575px) {
.taj-legal-quicknav-grid {
grid-template-columns: 1fr;
}
.terms-wrap .single-para h5[id] {
scroll-margin-top: 90px;
}
}
@media (prefers-reduced-motion: reduce) {
.taj-legal-quicknav-item {
transition: none !important;
}
}
/* =========================================================
صفحه قرار ملاقات — تصویری کردن روشها/چکلیست (دور یازدهم)
---------------------------------------------------------
appointment.html هم مثل قوانین/حریمخصوصی خیلی ساده و تکستونه
بود؛ همون متن قبلی (نه محتوای تازه) به دو شکل بصری تبدیل شد:
۱) جمله «جلسات بهصورت حضوری، آنلاین یا تلفنی» که قبلا یک خط
متن بود، الان سه آیکون کوچک (حضوری/آنلاین/تلفنی) کنار هم.
۲) چکلیست آمادهسازی که قبلا فقط تیک ساده کنار متن بود، الان
گرید دوستونه از کارتهای آیکوندار، همخانواده با ظاهر کارتهای
taj-legal-quicknav-item بالا (همون تینت/گردی/فاصله)، منتها با
نشان دایرهای پررنگتر چون اینجا فقط ۴ آیتم داریم نه ۱۰-۱۲ تا. */
.taj-appt-format-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 22px;
}
.taj-appt-format-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 999px;
background-color: var(--taj-tint);
color: var(--titleColor);
font-size: 14px;
font-weight: 600;
}
.taj-appt-format-item i {
font-size: 17px;
color: var(--taj-accent-navy);
}
.taj-appt-checklist-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
.taj-appt-checklist-item {
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
border-radius: 14px;
background-color: var(--taj-tint-soft);
border: 1px solid rgba(9, 68, 104, 0.08);
font-size: 14.5px;
font-weight: 600;
color: var(--titleColor);
}
.taj-appt-checklist-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 42px;
height: 42px;
border-radius: 50%;
background-color: var(--taj-accent-navy);
}
.taj-appt-checklist-icon i {
font-size: 19px;
color: #ffffff;
}
@media (max-width: 575px) {
.taj-appt-checklist-grid {
grid-template-columns: 1fr;
}
.taj-appt-format-item {
font-size: 13px;
padding: 9px 16px;
}
}
/* =========================================================
آیکون موضوعی کنار سوالات صفحه سوالات متداول (دور یازدهم)
---------------------------------------------------------
هیچ سوال/جواب تازهای اضافه نشده (این صفحه از قبل با آکاردئون +
عکس واقعی + جعبه تماس نسبتا خوب طراحی شده بود)؛ فقط کنار متن هر
۵ سوال از قبل موجود یک آیکون کوچک مرتبط با موضوع همون سوال اضافه
شد تا از نظر بصری با بقیه سایت (که پر از آیکونه) هماهنگتر باشه. */
.taj-faq-icon {
flex-shrink: 0;
margin-inline-end: 12px;
font-size: 19px;
color: var(--taj-orange);
}
/* =========================================================
عکس بخش «ماموریت و رویکرد ما» دربارهتاج (دور یازدهم)
---------------------------------------------------------
کاربر صریحا این باکس (about-img-wrap navy توی سکشن ماموریت و
رویکرد ما، همونی که پسزمینهاش لوگوی تاج بود) رو دوست نداشت.
بررسی فایل واقعی (taj-about-mission-cutout.png) نشون داد این یه
«کاتاوت» عکس استوک از ۵ نفر غریبهست که هیچ ربطی به تیم واقعی
تاج نداره (با عکسهای واقعی صفحه تیم تاج هم مو نمیزنه) — دقیقا
همون مشکل بردکرامبها. چون نمیشه عکس واقعی جدید از تیم ساخت،
بهجای عکس افراد، جمله همین بخش («تیمی متشکل از حسابداران رسمی،
متخصصان مالیات و کارشناسان حسابرسی») به ۳ کارت شیشهای/آیکوندار
تبدیل شد — دقیقا همون ۳ تخصصی که متن از قبل بهشون اشاره میکنه؛
هیچ ادعای تازهای نیست. ظاهر این کارتها (شیشهای/frosted روی
navy) و بافت گرید ریز پسزمینه از همون زبان بصری بردکرامبهای تازه
طراحیشده استفاده میکنه تا کل سایت یکدست بهنظر برسه.
اصلاحیه (همون دور، بعد از بازخورد مستقیم سعیده): واترمارک
taj-about-watermark.png اولش «همونطور که بود نگه داشته شد چون
مشکلی نداشت» — این تشخیص اشتباه بود. اون فایل، خودِ لوگوی تاج
چرخیده بهصورت عمودی (۹۰درجه) در قابی فقط ۴۸×۱۱۳ پیکسله؛ توی
گوشه یک کارت navy که از قبل بافت پسزمینه + گلوی نارنجی متحرک +
۳کارت شیشهای داره، یک لوگوی کوچیک و عمودی اضافه، بهجای اینکه
جذابیت اضافه کنه، فقط بیربط/عجیب بهنظر میرسید (دقیقا همین رو
سعیده مستقیم گزارش کرد). چون این تصویر جای دیگهای در کل سایت
استفاده نمیشه، بهجای بازطراحی، کامل از HTML حذف شد — کارت با
همون بافت+گلو+۳بج موجود، بدون این لایه اضافه، تمیزتر بهنظر
میرسه. */
.taj-mission-visual {
position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: 6px 35px 40px;
overflow: hidden;
}
.taj-mission-visual::before {
content: "";
position: absolute;
inset: 0;
background-image: url('../img/shape-1.png');
background-repeat: repeat;
opacity: 0.1;
pointer-events: none;
z-index: 0;
}
.taj-mission-glow {
position: absolute;
width: 260px;
height: 260px;
border-radius: 50%;
top: -60px;
left: -60px;
background: radial-gradient(circle, rgba(246, 140, 65, 0.45) 0%, rgba(246, 140, 65, 0) 70%);
filter: blur(60px);
pointer-events: none;
z-index: 0;
animation: moveHorizontal 10000ms ease-in-out infinite;
}
/* =========================================================
گلوی دوم + حلقه تزئینی کارت ماموریت (دور بیستودوم)
---------------------------------------------------------
بعد از حذف واترمارک، سعیده گفت سمت راست/پایین این کارت
navy خیلی ساده و خالی بهنظر میرسه. چون بجهای شناور همه از
لبه چپ شروع و پلهای به چپ میرن (margin-inline-start رو به
افزایش)، دقیقا نیمه راست/پایین کارت خالیترین قسمت بود —
همونجایی که واترمارک قبلا (بهشکل بد) پر میکرد. راهحل:
یک گلوی نارنجی دوم (کوچکتر و کمرنگتر از گلوی اول، تا با
هم رقابت نکنن) در گوشه پایینراست + یک حلقه نازک تزئینی با
چرخش خیلی آهسته — هر دو انتزاعی محض، نه یک شیء/لوگو، دقیقا
همون زبان بصری «گلوی متحرک» که از قبل همین کارت داشت. */
.taj-mission-glow-2 {
top: auto;
left: auto;
right: -40px;
bottom: -80px;
width: 230px;
height: 230px;
background: radial-gradient(circle, rgba(246, 140, 65, 0.42) 0%, rgba(246, 140, 65, 0) 70%);
animation-name: moveVertical;
animation-duration: 13000ms;
animation-delay: 900ms;
}
.taj-mission-ring {
position: absolute;
width: 220px;
height: 220px;
right: -50px;
bottom: -50px;
border: 1.5px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
pointer-events: none;
z-index: 0;
animation: rotation 50000ms linear infinite;
}
.taj-mission-ring::before {
content: "";
position: absolute;
inset: 22px;
border: 1px solid rgba(255, 255, 255, 0.13);
border-radius: 50%;
}
.taj-mission-badge {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 18px;
max-width: 340px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
backdrop-filter: blur(8px);
animation: moveVertical 6000ms ease-in-out infinite;
}
.taj-mission-badge-2 {
margin-inline-start: 34px;
animation-delay: 700ms;
}
.taj-mission-badge-3 {
margin-inline-start: 68px;
animation-delay: 1400ms;
}
.taj-mission-badge-icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
background-color: var(--taj-orange);
}
.taj-mission-badge-icon i {
font-size: 18px;
color: #ffffff;
}
.taj-mission-badge span {
color: #ffffff;
font-size: 14px;
font-weight: 600;
line-height: 1.6;
}
@media (max-width: 767px) {
.taj-mission-badge-2 {
margin-inline-start: 18px;
}
.taj-mission-badge-3 {
margin-inline-start: 34px;
}
}
@media (max-width: 420px) {
.taj-mission-visual {
padding-inline: 20px;
}
.taj-mission-badge {
max-width: 100%;
}
.taj-mission-badge-2,
.taj-mission-badge-3 {
margin-inline-start: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.taj-mission-glow,
.taj-mission-ring,
.taj-mission-badge {
animation: none !important;
}
}
/* =========================================================
تگهای خدمات — رفع فضای خالی «امروز این نگاه را...» (دور بیستوسوم)
---------------------------------------------------------
کاربر گفت ستون کنار عکس بلند بالای صفحه دربارهتاج (فقط یک جمله
تیتر) فضای خالی زیادی داره. چهار خدمت واقعی تاج (که همین الان هم
تو صفحه خدمات هستن) بهصورت تگ آیکوندار + یک دکمه لینک به صفحه
خدمات اضافه شد؛ نه عدد/آمار تازه، فقط تکرار محتوای واقعی موجود
با آیکون. */
.taj-about-service-tags {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 24px 0 28px;
padding: 0;
}
.taj-about-service-tags li {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
color: var(--taj-navy);
font-size: 13.5px;
font-weight: 600;
background-color: var(--taj-tint);
border-radius: 999px;
}
.taj-about-service-tags li i {
color: var(--taj-orange);
font-size: 16px;
line-height: 1;
}
.taj-about-service-cta {
display: inline-flex;
}
/* =========================================================
رفع تکرار عکسهای بزرگ تیم در صفحه دربارهتاج (دور یازدهم)
---------------------------------------------------------
کاربر گفت دوست نداره عکسهای تیم «در سایز بزرگ» هم در صفحه
دربارهتاج و هم در صفحه تیم تاج (our-leaders.html) تکرار بشه.
بررسی نشون داد این سکشن (taj-team-section توی about-us.html)
عمدا در یه دور قبلی دقیقا از همون کامپوننت صفحه اصلی (taj-team-*
با عکس ۴۰۰×۵۰۰ و پاراگراف شرحوظایف و لیست کامل حوزههای تخصص)
کپی شده بود. چون این محتوای کامل (شرحوظایف + لیست تخصص) دقیقا
عین همینه که در our-leaders.html هم هست، و چون خود صفحه اصلی هم
نسخه کامل مشابهی داره، همین سهجاییشدن یه محتوا دقیقا مصداق
حرف کاربره. راهحل: سکشن تیم در about-us.html به یک «پیشنمایش
کوتاه» تبدیل شد — فقط عکس کوچک دایرهای (نه عکس بزرگ ۴۰۰×۵۰۰) +
نام + سمت، بدون پاراگراف شرحوظایف و بدون لیست حوزههای تخصص —
که با کلیک به our-leaders.html (صفحه اصلی/کامل تیم) میرود؛ آنجا
عکسهای بزرگ و توضیح کامل هر عضو (تنها یکبار در کل سایت، در جای
درستش) باقی میمونه. کیکر/تیتر/پاراگراف معرفی و جمله پایانی سکشن
(taj-team-header/taj-team-closing) دستنخورده موندن چون مشکلی
نداشتن، فقط این ۲ کلاس مشترک صفحه اصلی هستن و تغییری در ظاهرشون
داده نشده. دکمه «آشنایی کامل با تیم تاج» هم به پاورقی همین سکشن
اضافه شد تا مسیر به صفحه کامل تیم واضحتر باشه. */
.taj-team-teaser-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.taj-team-teaser-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 5px;
padding: 30px 18px;
border-radius: 16px;
background-color: var(--taj-tint-soft);
border: 1px solid rgba(9, 68, 104, 0.06);
transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}
.taj-team-teaser-card:hover,
.taj-team-teaser-card:focus-visible {
transform: translateY(-4px);
box-shadow: 0 16px 32px rgba(8, 37, 56, 0.1);
background-color: var(--taj-white);
}
.taj-team-teaser-avatar {
display: block;
width: 84px;
height: 84px;
border-radius: 50%;
overflow: hidden;
margin-bottom: 12px;
border: 3px solid var(--taj-white);
box-shadow: 0 6px 18px rgba(8, 37, 56, 0.12);
}
.taj-team-teaser-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.taj-team-teaser-name {
color: var(--titleColor);
font-size: 16px;
font-weight: 700;
}
.taj-team-teaser-role {
color: #5f6f78;
font-size: 12.5px;
font-weight: 500;
line-height: 1.7;
}
.taj-team-closing-with-cta {
flex-wrap: wrap;
row-gap: 24px;
}
.taj-team-closing-text {
display: flex;
flex-direction: column;
gap: 9px;
}
@media (max-width: 575px) {
.taj-team-teaser-grid {
grid-template-columns: 1fr;
gap: 14px;
}
}
/* =========================================================
سکشن اعتمادساز جدید «روش همکاری» در صفحه خدمات (دور یازدهم)
---------------------------------------------------------
کاربر خواست به صفحه خدمات یک سکشن اعتمادساز جدید با موشن گرافی
اضافه بشه. چون طبق قانون نمیشه آمار/تعداد مشتری/گواهی جعلی ساخت،
این سکشن بهجای ادعای تازه، همون واقعیتهای ازقبلتاییدشده رو
به شکل یک مسیر ۴مرحلهای زمانی (timeline) نشون میده: شروع
گفتوگو (که در appointment/contact هم هست) → همون «سه سؤال قبل
از هر پیشنهاد» صفحه اصلی → همون اصل «شفافیت در مسیر همکاری» و
«تعهد در اجرا» بالای همین صفحه. هیچ آمار/گواهی/نقلقول تازهای
نیست، فقط محتوای واقعی موجود در قالب یک روایت زمانی که اعتماد
میسازه (نشوندادن یه فرایند شفاف و قابلپیشبینی). از نظر ظاهری
این سومین الگوی متفاوته در همین صفحه (فهرست ردیفی اصول، تایملاین
اینجا، گرید کارتی صنایع هدف) که هرکدوم واقعا فرق دارن.
موشن: هم taj-motion-reveal استاندارد سایت، هم یه خط رابط با
گرادیان درحالحرکت (taj-process-flow) که پیوسته جریان داره — تا
حس «مسیر روبهجلو» رو تقویت کنه. */
/* =========================================================
بنر عکس بالای «روش همکاری» (دور بیستوسوم)
---------------------------------------------------------
کاربر گفت سه سکشن پشتسرهم این صفحه (اصول همکاری، روش همکاری،
صنایع هدف) شبیه هم و بدون هیچ عکسیان. این تایملاین (پایین)
خودش یه الگوی بصری متفاوته و دستنخورده موند، ولی یک بنر عکس
دقیقا بالای همون تایملاین اضافه شد — چون این سکشن درباره مسیر
ارتباط با مشتریه (از گفتوگو تا نتیجه)، عکس مناسبش یه صحنه
گفتوگو/جلسه مشاورهست. عکس واقعی هنوز نرسیده، پس عین بردکرامب و
کارت روش تاج، فقط با CSS variable + گرادیان/آیکون جایگزین (تا
رسیدن فایل واقعی از مبینا) پیاده شده. */
.taj-process-banner {
position: relative;
height: 230px;
margin-bottom: 60px;
overflow: hidden;
border-radius: 20px;
background-color: #0b4565;
background-image:
linear-gradient(120deg, rgba(15, 80, 117, 0.80) 0%, rgba(7, 46, 70, 0.88) 100%),
var(--taj-process-banner-photo, none);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
}
.taj-process-banner-icon {
position: absolute;
top: 50%;
right: 5%;
transform: translateY(-50%);
font-size: 150px;
line-height: 1;
color: rgba(255, 255, 255, 0.08);
}
@media (max-width: 575px) {
.taj-process-banner {
height: 170px;
margin-bottom: 44px;
}
.taj-process-banner-icon {
font-size: 100px;
}
}
.taj-process-timeline {
position: relative;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 24px;
}
.taj-process-timeline::before {
content: "";
position: absolute;
top: 34px;
left: 12.5%;
right: 12.5%;
height: 2px;
z-index: 0;
background-image: linear-gradient(90deg, rgba(12, 68, 103, 0.3) 0%, rgba(246, 140, 65, 0.65) 50%, rgba(12, 68, 103, 0.3) 100%);
background-size: 220% 100%;
animation: taj-process-flow 6000ms linear infinite;
}
@keyframes taj-process-flow {
0% {
background-position: 220% 0;
}
100% {
background-position: -220% 0;
}
}
.taj-process-step {
position: relative;
z-index: 1;
text-align: center;
padding: 0 8px;
}
.taj-process-step-icon {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
margin: 0 auto 16px;
border-radius: 50%;
background-color: var(--taj-white);
border: 2px solid var(--taj-accent-navy);
color: var(--taj-accent-navy);
font-size: 26px;
line-height: 1;
box-shadow: 0 10px 24px rgba(8, 37, 56, 0.08);
}
.taj-process-step-number {
display: block;
margin-bottom: 8px;
color: var(--taj-orange);
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
}
.taj-process-step-title {
margin: 0 0 8px;
color: #17384e;
font-size: 16.5px;
font-weight: 700;
line-height: 1.6;
}
.taj-process-step-desc {
margin: 0;
color: #5f6c75;
font-size: 13.5px;
line-height: 1.85;
}
@media (max-width: 991px) {
.taj-process-timeline {
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 44px;
}
.taj-process-timeline::before {
display: none;
}
}
@media (max-width: 575px) {
.taj-process-timeline {
grid-template-columns: 1fr;
row-gap: 36px;
}
.taj-process-step {
padding: 0 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.taj-process-timeline::before {
animation: none !important;
}
}
/* =========================================================
TAJ Knowledge Topic Card — سکشن «مسیرهای دانشنامه» در صفحه
دانشنامه (دور یازدهم)
---------------------------------------------------------
کاربر گفت صفحه دانشنامه خیلی کوتاه و بیاعتبار بهنظر میرسه.
چون طبق قانون نمیشه تعداد مقاله/مشترک/آمار بازدید جعلی ساخت،
این سکشن بهجای ادعای عددی تازه، همون ۶ موضوعی که از قبل در نوار
پیل taj-knowledge-topics (دور دهم، بالای همین صفحه) اعلام شده رو
با جزییات بیشتر (آیکون + توضیح یکخطی صادقانه درباره حوزه هر
موضوع) به یک گرید کارتی تبدیل میکنه. هیچ عدد/آماری ادعا نشده.
کارتها عمدا لینک/کلیکپذیر نیستن (نه href، نه cursor:pointer)
چون فیلتر واقعی مقاله بر اساس دسته هنوز در بکاند پیاده نشده و
لینکدادن غیرواقعی/گمراهکننده میبود — دقیقا همون منطقی که برای
عدم لینکدادن پیشنمایش مقالهها هم رعایت شده (کامنت خود صفحه).
از نظر ظاهری هم عمدا با کارت صنایع هدف صفحه خدمات
(taj-industry-card — دایره نارنجی، پسزمینه همیشه سفید) و تایملاین
«روش همکاری» صفحه خدمات (taj-process-step — دایره توخالی سرمهای،
خط رابط متحرک) فرق داره: اینجا آیکون مربعگردِ پرشدهی سرمهای روی
کارتی با پسزمینه تینت ملایم قرار گرفته که با هاور به سفید و سایه
تبدیل میشه.
نکته فنی: چون taj-motion-reveal پایهاش overflow:hidden داره (برای
مهار زوم-هاور تصویر در جاهای دیگه، نه اینجا)، و این کارت روی هاور
box-shadow داره، قانون زیر (اورراید overflow:visible مخصوص همین
دو-کلاسی) لازمه وگرنه سایه هاور توسط همون overflow:hidden بریده
میشه.
========================================================= */
.taj-knowledge-topic-card {
position: relative;
height: 100%;
padding: 30px 26px;
border-radius: 18px;
background-color: var(--taj-tint-soft);
border: 1px solid rgba(9, 68, 104, 0.08);
transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}
.taj-knowledge-topic-card.taj-motion-reveal {
overflow: visible;
}
.taj-knowledge-topic-card:hover {
transform: translateY(-6px);
background-color: var(--taj-white);
box-shadow: 0 20px 40px rgba(8, 37, 56, 0.1);
}
.taj-knowledge-topic-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
margin-bottom: 20px;
border-radius: 14px;
background-color: var(--taj-accent-navy);
color: var(--taj-white);
font-size: 24px;
line-height: 1;
}
.taj-knowledge-topic-card-title {
margin: 0 0 10px;
color: #17384e;
font-size: 18px;
font-weight: 700;
line-height: 1.6;
}
.taj-knowledge-topic-card-desc {
margin: 0;
color: #5f6c75;
font-size: 14px;
line-height: 1.9;
}
@media (max-width: 767px) {
.taj-knowledge-topic-card {
padding: 26px 22px;
}
}
/* =========================================================
لینکهای حقوقی در فوتر (حریم خصوصی / قوانین و مقررات) — دور یازدهم
ادامه، بعد از بازخورد مستقیم سعیده
---------------------------------------------------------
بررسی دقیق نشون داد faq.html و appointment.html از هیچجای کل
سایت لینک نمیشدن (کاملا یتیم/غیرقابلکشف بودن)، و privacy-policy/
terms-conditions هم فقط یکبار و یکطرفه به هم لینک شده بودن، نه از
منو/فوتر. راهحل: دو صفحه سوالاتمتداول و قرارملاقات به همون
لیست «بخشهای تاج» در فوتر (سایتوایده، توی base.html) اضافه شدن؛
حریمخصوصی/قوانینومقررات هم — چون طبق قرارداد رایج وب صفحات
حقوقی/قانونی معمولا در نوار پایین فوتر کنار کپیرایت میان، نه در
ستون اصلی لینکها — یک ردیف کوچیک جدا کنار همون خط کپیرایت
گرفتن، دقیقا همون الگوی رایج در اکثر سایتهای حرفهای.
========================================================= */
.taj-footer-bottom-legal {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 14px 18px;
}
.taj-footer-legal-nav {
display: flex;
align-items: center;
gap: 10px;
}
.taj-footer-legal-nav a {
color: rgba(255, 255, 255, 0.50);
font-size: 11.5px;
line-height: 1.8;
text-decoration: none;
transition: color 0.25s ease;
}
.taj-footer-legal-nav a:hover {
color: rgba(255, 255, 255, 0.90);
}
.taj-footer-legal-nav span {
color: rgba(255, 255, 255, 0.30);
font-size: 11.5px;
}
@media (max-width: 575px) {
.taj-footer-bottom-legal {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
}
/* =========================================================
لینکهای مرتبط در پنل تماس (قرار ملاقات + سوالات متداول) — دور یازدهم
ادامه
---------------------------------------------------------
appointment.html و faq.html علاوه بر فوتر، از خودِ صفحه تماس هم
(جایی که کاربر دقیقا در حال تصمیمگیری برای شروع ارتباطه) بهشکل
طبیعی به این دو صفحه مرتبط لینک میشن. چون taj-contact-aside
پسزمینه سرمهای تیره داره، رنگ متن/آیکونها هماهنگ با بقیه متنهای
روشن همین باکس (rgba white) انتخاب شد، نه رنگهای متن صفحات روشن.
========================================================= */
.taj-contact-related-links {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 30px;
padding-top: 22px;
border-top: 1px solid rgba(255, 255, 255, 0.11);
}
.taj-contact-related-links-label {
color: rgba(255, 255, 255, 0.55);
font-size: 12px;
font-weight: 700;
}
.taj-contact-related-links a {
display: inline-flex;
align-items: center;
gap: 8px;
color: rgba(255, 255, 255, 0.92);
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: opacity 0.25s ease;
}
.taj-contact-related-links a:hover {
opacity: 0.8;
}
.taj-contact-related-links a i {
color: #f09a6e;
font-size: 16px;
}
/* =========================================================
عنوان بخشهای صفحات حقوقی (دور بیستوچهارم)
---------------------------------------------------------
ممیزی سئوی کامل نشون داد صفحات حریمخصوصی/قوانینومقررات از
h5 بدون کلاس برای تیتر هر بخش (مقدمه/چهاطلاعاتیجمعآوریمیکنیم/...)
استفاده میکردن که مستقیم بعد از h1 بالای صفحه میاومد — یعنی
سلسلهمراتب h1→h5 چهار سطح رو رد میکرد (نه یک ساختار درست
برای موتور جستوجو/screenreader). این h5ها به h2 ارتقا پیدا
کردن (سطح درست، چون اینها تنها بخشهای اصلی محتوای صفحهان،
مستقیم زیر h1). چون این h5های اصلی کلاس نداشتن، سایز/وزن/فاصله
واقعیشون رو مستقیم با Playwright اندازهگیری کردم (۲۴px،
وزن۶۰۰، فاصلهپایین۱۵px، ارتفاعخط۳۱.۲px) تا با تبدیل به h2،
ظاهر رندرشده دقیقا همون بمونه، فقط سطح ساختاری درست بشه. */
.taj-legal-section-title {
margin-top: 0;
margin-bottom: 15px;
font-size: 24px;
font-weight: 600;
line-height: 31.2px;
}