@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
/* ============================================
MODERN DARK HEADER STYLE
کاملاً مستقل و بدون تداخل با استایل اول
============================================ */
.MinimalHeaderLight .ResultShop .AutoCamplet , .GlassHeader .ResultShop .AutoCamplet , .NeonHeader .ResultShop .AutoCamplet , .CorporateHeader .ResultShop .AutoCamplet ,
.LuxuryHeader .ResultShop .AutoCamplet
{
right:-100%;
}
.CenteredHeader .ResultShop .AutoCamplet {
right: 0%;
}
.DiamondSearch .AutoCamplet {
left: 80%;
}
.GoldSearch .AutoCamplet {
left: 31%;
}
.HeaderTopMainColor .SearchBox {
margin: 0;
}
.HeaderTopMainColor .BasketBox {
margin: 0;
float: none;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 5px;
background: none;
width: auto;
background-color: green;
color: #ffffff;
text-decoration: none;
padding: 0 5px;
font-size:10pt;
}
.HeaderTopMainColor .BasketBox {
transition: all 0.3s ease;
}
.HeaderTopMainColor .BasketBox:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.HeaderTopMainColor .BasketBox .SabadKharid {
color: #ffffff;
display: inline-flex;
align-items: center;
gap: 5px;
margin:0;
float:none;
}
.HeaderTopMainColor .BasketBox .SabadKharid::before {
content: "🛒";
margin-left: 5px;
display: inline-block;
font-size: 12pt;
color: #ffffff; /* این کار میکنه */
}
.HeaderTopMainColor .BasketBox .SabadKharidNumber {
color: #ffffff;
background: rgba(255, 255, 255, 0.2);
padding: 0 8px;
border-radius: 50%;
margin:0;
float:none;
}
.HeaderTopMainColor .SearchBoxBox , .HeaderTopMainColor .SearchBox
{
display:inline-flex;
vertical-align: middle;
}
.ModernHeaderDark {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 0;
margin: 0;
position: relative;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
border-bottom: 2px solid rgba(255, 255, 255, 0.08);
direction: rtl;
}
.ModernContainer {
max-width: 1366px;
margin: 0 auto;
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 10px;
}
/* ===== Top Bar ===== */
.ModernTopBar {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
padding: 5px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
flex-wrap: wrap;
}
.ModernLeftWrapper
{
display: flex;
align-items: center;
justify-content: flex-start;
gap: 15px;
padding: 5px 0;
flex-wrap: wrap;
}
.ModernSearchIcon {
display: inline-block;
width: 22px;
height: 22px;
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.3s ease;
margin-left: 5px;
}
.ModernSearchIcon:hover {
opacity: 1;
}
.ModernPhoneLink {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 12px;
background: rgba(255, 255, 255, 0.06);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
}
.ModernPhoneLink:hover {
background: rgba(255, 255, 255, 0.12);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.ModernPhoneIcon {
display: inline-block;
width: 16px;
height: 16px;
background: url('data:image/svg+xml;utf8,') center/contain no-repeat;
}
/* ===== Lang Selector ===== */
.ModernLangSelector {
display: flex;
align-items: center;
gap: 5px;
margin-right: auto;
}
.ModernLangSelector a {
display: inline-block;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.6;
}
.ModernLangSelector a:hover {
opacity: 1;
transform: scale(1.1);
}
.ModernLangSelector img {
width: 28px;
height: 20px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.15);
object-fit: cover;
}
/* ===== Main Row ===== */
.ModernMainRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
flex-wrap: wrap;
gap: 15px;
}
.ModernLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
order: 2;
}
.ModernLoginWrapper a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-radius: 20px;
transition: all 0.3s ease;
}
.ModernLoginWrapper a:hover {
background: rgba(79, 195, 255, 0.15);
color: #4fc3ff;
border-color: rgba(79, 195, 255, 0.3);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(79, 195, 255, 0.15);
}
.ModernLoginWrapper img {
width: 20px;
height: 20px;
filter: brightness(0) invert(1);
opacity: 0.7;
transition: all 0.3s ease;
}
.ModernLoginWrapper a:hover img {
opacity: 1;
filter: brightness(0) invert(0.8) sepia(1) hue-rotate(180deg) saturate(5);
}
.ModernLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Logo ===== */
.ModernLogoWrapper {
order: 1;
flex-shrink: 0;
}
.ModernLogoLink {
display: block;
transition: all 0.4s ease;
position: relative;
}
.ModernLogoLink:hover {
transform: scale(1.02);
filter: drop-shadow(0 0 20px rgba(79, 195, 255, 0.2));
}
/* ===== Search ===== */
.ModernSearchWrapper {
padding-top: 8px;
border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.ModernSearchWrapper input,
.ModernSearchWrapper .SearchBox {
background: rgba(255, 255, 255, 0.06) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 25px !important;
color: #ffffff !important;
padding: 10px 20px !important;
width: 100% !important;
transition: all 0.3s ease;
}
.ModernSearchWrapper input:focus,
.ModernSearchWrapper .SearchBox:focus {
background: rgba(255, 255, 255, 0.1) !important;
border-color: #4fc3ff !important;
box-shadow: 0 0 25px rgba(79, 195, 255, 0.1);
outline: none;
}
.ModernSearchWrapper input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
/* ===== Responsive ===== */
@media (max-width: 1240px) {
.ModernHeaderDark {
display:none;
}
}
/* ============================================
MINIMAL LIGHT HEADER STYLE
استایل سوم - مینیمال و روشن
============================================ */
.MinimalHeaderLight {
background: #ffffff;
padding: 0;
margin: 0;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.06);
border-bottom: 1px solid #e8ecf1;
direction: rtl;
}
.MinimalSearchWrapper
{
display: flex;
gap: 10px;
align-items: center;
}
.MinimalContainer {
max-width: 1366px;
margin: 0 auto;
padding: 8px 25px;
display: flex;
flex-direction: column;
gap: 8px;
}
/* ===== Top Bar ===== */
.MinimalTopBar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid #f0f2f5;
flex-wrap: wrap;
}
.MinimalLeftSection {
display: flex;
align-items: center;
gap: 20px;
}
.MinimalRightSection {
display: flex;
align-items: center;
}
.MinimalPhoneLink {
color: #555c6b;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: 6px;
transition: all 0.3s ease;
background: #f8f9fa;
}
.MinimalPhoneLink:hover {
background: #eef1f5;
color: #2c3e50;
}
.MinimalPhoneIcon {
font-size: 14px;
line-height: 1;
}
/* ===== Lang Selector ===== */
.MinimalLangSelector {
display: flex;
align-items: center;
gap: 4px;
}
.MinimalLangSelector a {
display: inline-block;
padding: 3px 6px;
border-radius: 4px;
transition: all 0.3s ease;
opacity: 0.5;
}
.MinimalLangSelector a:hover {
opacity: 1;
transform: scale(1.05);
}
.MinimalLangSelector img {
width: 24px;
height: 16px;
border-radius: 3px;
border: 1px solid #e8ecf1;
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.MinimalLoginWrapper {
display: flex;
align-items: center;
gap: 8px;
}
.MinimalLoginWrapper a {
color: #555c6b;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 6px;
background: transparent;
border: 1px solid transparent;
transition: all 0.3s ease;
}
.MinimalLoginWrapper a:hover {
background: #f0f4f9;
color: #1a73e8;
border-color: #dce3ed;
}
.MinimalLoginWrapper img {
width: 18px;
height: 18px;
opacity: 0.5;
transition: all 0.3s ease;
}
.MinimalLoginWrapper a:hover img {
opacity: 0.8;
}
.MinimalLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Main Row ===== */
.MinimalMainRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
gap: 25px;
}
/* ===== Logo ===== */
.MinimalLogoWrapper {
flex-shrink: 0;
}
.MinimalLogoLink {
display: block;
transition: all 0.3s ease;
}
.MinimalLogoLink:hover {
transform: scale(1.02);
opacity: 0.9;
}
.MinimalLogoLink img {
max-height: 55px;
width: auto;
display: block;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.MinimalHeaderLight {
display: none;
}
}
/* ============================================
PREMIUM CENTERED HEADER STYLE
استایل چهارم - لوگو در مرکز با طراحی خاص
============================================ */
.PremiumCenterHeader {
background: linear-gradient(180deg, #0b132b 0%, #1a1a3e 100%);
padding: 0;
margin: 0;
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.4);
border-bottom: 2px solid rgba(255, 215, 0, 0.15);
direction: rtl;
}
.PremiumContainer {
max-width: 1366px;
margin: 0 auto;
padding: 15px 25px 10px 25px;
display: flex;
flex-direction: column;
gap: 12px;
}
/* ===== Top Row ===== */
.PremiumTopRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0;
}
/* ===== Left Section ===== */
.PremiumLeftSection {
display: flex;
align-items: center;
flex: 1;
justify-content: flex-start;
gap:5px;
}
.PremiumPhoneLink {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 14px;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
letter-spacing: 0.5px;
}
.PremiumPhoneLink:hover {
background: rgba(255, 215, 0, 0.1);
border-color: rgba(255, 215, 0, 0.3);
color: #ffd700;
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(255, 215, 0, 0.1);
}
.PremiumPhoneIcon {
font-size: 16px;
line-height: 1;
}
/* ===== Center Section - Logo ===== */
.PremiumCenterSection {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
}
.PremiumLogoWrapper {
display: flex;
align-items: center;
justify-content: center;
}
.PremiumLogoLink {
display: block;
transition: all 0.4s ease;
position: relative;
}
.PremiumLogoLink::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background: linear-gradient(90deg, transparent, #ffd700, transparent);
transition: all 0.4s ease;
}
.PremiumLogoLink:hover::after {
width: 80%;
}
.PremiumLogoLink:hover {
transform: scale(1.05);
}
.PremiumLogoLink img {
max-height: 60px;
width: auto;
display: block;
filter: drop-shadow(0 2px 15px rgba(255, 215, 0, 0.1));
}
/* ===== Right Section ===== */
.PremiumRightSection {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
justify-content: flex-end;
}
/* ===== Lang Selector ===== */
.PremiumLangSelector {
display: flex;
align-items: center;
gap: 5px;
}
.PremiumLangSelector a {
display: inline-block;
padding: 4px 8px;
border-radius: 15px;
transition: all 0.3s ease;
opacity: 0.5;
border: 1px solid transparent;
}
.PremiumLangSelector a:hover {
opacity: 1;
transform: scale(1.1);
border-color: rgba(255, 215, 0, 0.3);
background: rgba(255, 215, 0, 0.05);
}
.PremiumLangSelector img {
width: 28px;
height: 20px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.1);
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.PremiumLoginWrapper {
display: flex;
align-items: center;
gap: 5px;
}
.PremiumLoginWrapper a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 11px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 5px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
}
.PremiumLoginWrapper a:hover {
background: rgba(255, 215, 0, 0.08);
color: #ffd700;
border-color: rgba(255, 215, 0, 0.2);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.05);
}
.PremiumLoginWrapper img {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
opacity: 0.5;
transition: all 0.3s ease;
}
.PremiumLoginWrapper a:hover img {
opacity: 0.8;
filter: brightness(0) invert(0.9) sepia(1) hue-rotate(30deg) saturate(10);
}
.PremiumLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Bottom Row - Search ===== */
.PremiumBottomRow {
padding-top: 10px;
border-top: 1px solid rgba(255, 255, 255, 0.05);
display: flex;
justify-content: center;
}
.PremiumSearchWrapper {
width: 100%;
max-width: 400px;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.PremiumCenterHeader {
display: none;
}
}
/* ============================================
GLASSMORPHISM HEADER STYLE
استایل پنجم - طراحی شیشهای مدرن
============================================ */
.GlassHeader {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 0;
margin: 0;
direction: rtl;
}
.GlassHeader::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
.GlassContainer {
max-width: 1366px;
margin: 0 auto;
padding: 10px 25px;
}
/* ===== Top Bar ===== */
.GlassTopBar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0 12px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
flex-wrap: wrap;
gap: 10px;
}
.GlassLeftGroup {
display: flex;
align-items: center;
gap: 15px;
}
.GlassRightGroup {
display: flex;
align-items: center;
}
.GlassPhoneLink {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.15);
transition: all 0.3s ease;
}
.GlassPhoneLink:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
color: rgba(255, 255, 255, 0.9);
}
.GlassPhoneIcon {
font-size: 14px;
line-height: 1;
}
/* ===== Lang Selector ===== */
.GlassLangSelector {
display: flex;
align-items: center;
gap: 5px;
}
.GlassLangSelector a {
display: inline-block;
padding: 3px 6px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.6;
border: 1px solid transparent;
}
.GlassLangSelector a:hover {
opacity: 1;
transform: scale(1.1);
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.1);
}
.GlassLangSelector img {
width: 26px;
height: 18px;
border-radius: 4px;
border: 1px solid rgba(255, 255, 255, 0.2);
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.GlassLoginWrapper {
display: flex;
align-items: center;
gap: 6px;
}
.GlassLoginWrapper a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.GlassLoginWrapper a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.GlassLoginWrapper img {
width: 18px;
height: 18px;
filter: brightness(0) invert(1);
opacity: 0.7;
transition: all 0.3s ease;
}
.GlassLoginWrapper a:hover img {
opacity: 1;
}
.GlassLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Main Row ===== */
.GlassMainRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 0 5px 0;
gap: 20px;
}
/* ===== Logo ===== */
.GlassLogoWrapper {
flex-shrink: 0;
order: 1;
}
.GlassLogoLink {
display: block;
transition: all 0.4s ease;
}
.GlassLogoLink:hover {
transform: scale(1.05) rotate(-2deg);
filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.15));
}
.GlassLogoLink img {
max-height: 55px;
width: auto;
display: block;
filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.1));
}
/* ===== Search ===== */
.GlassSearchWrapper {
flex: 1;
order: 2;
column-gap:10px;
display:flex;
flex-direction: row-reverse;
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.GlassHeader {
display: none;
}
}
/* ============================================
NEON DARK HEADER STYLE
استایل ششم - نئون تیره با افکتهای درخشان
============================================ */
.NeonHeader {
background: #0a0a0f;
padding: 0;
margin: 0;
border-bottom: 2px solid rgba(0, 255, 255, 0.15);
direction: rtl;
}
@keyframes neonScan {
0% { transform: translateX(-50%); }
100% { transform: translateX(50%); }
}
.NeonContainer {
max-width: 1366px;
margin: 0 auto;
padding: 12px 25px;
z-index: 1;
}
/* ===== Top Bar ===== */
.NeonTopBar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0 10px 0;
border-bottom: 1px solid rgba(0, 255, 255, 0.06);
flex-wrap: wrap;
gap: 10px;
}
.NeonLeftGroup {
display: flex;
align-items: center;
gap: 15px;
}
.NeonRightGroup {
display: flex;
align-items: center;
}
.NeonPhoneLink {
color: rgba(0, 255, 255, 0.7);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 4px;
border: 1px solid rgba(0, 255, 255, 0.1);
transition: all 0.3s ease;
background: rgba(0, 255, 255, 0.02);
}
.NeonPhoneLink:hover {
color: #00ffff;
border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.1),
inset 0 0 20px rgba(0, 255, 255, 0.05);
transform: translateY(-2px);
}
.NeonPhoneIcon {
font-size: 14px;
line-height: 1;
}
/* ===== Lang Selector ===== */
.NeonLangSelector {
display: flex;
align-items: center;
gap: 4px;
}
.NeonLangSelector a {
display: inline-block;
padding: 3px 6px;
border-radius: 4px;
transition: all 0.3s ease;
opacity: 0.4;
border: 1px solid transparent;
}
.NeonLangSelector a:hover {
opacity: 1;
border-color: rgba(0, 255, 255, 0.3);
box-shadow: 0 0 15px rgba(0, 255, 255, 0.05);
}
.NeonLangSelector img {
width: 26px;
height: 18px;
border-radius: 3px;
border: 1px solid rgba(0, 255, 255, 0.1);
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.NeonLoginWrapper {
display: flex;
align-items: center;
gap: 5px;
}
.NeonLoginWrapper a {
color: rgba(0, 255, 255, 0.7);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 14px;
border-radius: 4px;
border: 1px solid rgba(0, 255, 255, 0.06);
transition: all 0.3s ease;
background: rgba(0, 255, 255, 0.02);
}
.NeonLoginWrapper a:hover {
color: #00ffff;
border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.08);
transform: translateY(-2px);
}
.NeonLoginWrapper img {
width: 18px;
height: 18px;
filter: brightness(0) invert(0.6) sepia(1) hue-rotate(180deg) saturate(10);
opacity: 0.6;
transition: all 0.3s ease;
}
.NeonLoginWrapper a:hover img {
opacity: 1;
filter: brightness(0) invert(0.8) sepia(1) hue-rotate(180deg) saturate(20);
}
.NeonLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Main Row ===== */
.NeonMainRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 5px 0;
gap: 20px;
}
/* ===== Logo ===== */
.NeonLogoWrapper {
flex-shrink: 0;
order: 1;
}
.NeonLogoLink {
display: block;
transition: all 0.4s ease;
}
.NeonLogoLink::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent,
#00ffff,
#ff00ff,
#00ffff,
transparent
);
background-size: 200% 100%;
animation: neonGlow 3s linear infinite;
opacity: 0;
transition: opacity 0.4s ease;
}
@keyframes neonGlow {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
.NeonLogoLink:hover::after {
opacity: 1;
}
.NeonLogoLink:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 30px rgba(0, 255, 255, 0.15));
}
.NeonLogoLink img {
max-height: 55px;
width: auto;
display: block;
filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
/* ===== Search ===== */
.NeonSearchWrapper {
order: 2;
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.NeonHeader {
display: none;
}
}
/* ============================================
MINIMAL CORPORATE HEADER STYLE
استایل هفتم - شرکتی مینیمال و حرفهای
============================================ */
.CorporateHeader {
background: #ffffff;
padding: 0;
margin: 0;
position: relative;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
border-bottom: 3px solid #1a73e8;
direction: rtl;
}
.CorporateContainer {
max-width: 1366px;
margin: 0 auto;
padding: 10px 25px 8px 25px;
}
/* ===== Top Bar ===== */
.CorporateTopBar {
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 0 10px 0;
border-bottom: 1px solid #eef2f7;
flex-wrap: wrap;
gap: 10px;
}
.CorporateLeftGroup {
display: flex;
align-items: center;
flex: 1;
}
.CorporateRightGroup {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
justify-content: flex-end;
}
/* ===== Logo ===== */
.CorporateLogoWrapper {
flex-shrink: 0;
}
.CorporateLogoLink {
display: block;
transition: all 0.3s ease;
}
.CorporateLogoLink:hover {
opacity: 0.85;
}
.CorporateLogoLink img {
max-height: 50px;
width: auto;
display: block;
}
/* ===== Phone Link ===== */
.CorporatePhoneLink {
color: #5f6b7a;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
border-radius: 4px;
transition: all 0.3s ease;
background: #f8fafc;
border: 1px solid #e8ecf1;
}
.CorporatePhoneLink:hover {
color: #1a73e8;
background: #f0f7ff;
border-color: #1a73e8;
}
.CorporatePhoneIcon {
font-size: 14px;
line-height: 1;
}
/* ===== Lang Selector ===== */
.CorporateLangSelector {
display: flex;
align-items: center;
gap: 4px;
padding: 0 5px;
border-right: 1px solid #e8ecf1;
border-left: 1px solid #e8ecf1;
}
.CorporateLangSelector a {
display: inline-block;
padding: 3px 5px;
border-radius: 3px;
transition: all 0.3s ease;
opacity: 0.5;
}
.CorporateLangSelector a:hover {
opacity: 1;
background: #f0f7ff;
}
.CorporateLangSelector img {
width: 24px;
height: 16px;
border-radius: 3px;
border: 1px solid #e8ecf1;
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.CorporateLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.CorporateLoginWrapper a {
color: #5f6b7a;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 12px;
border-radius: 4px;
transition: all 0.3s ease;
}
.CorporateLoginWrapper a:hover {
color: #1a73e8;
background: #f0f7ff;
}
.CorporateLoginWrapper img {
width: 16px;
height: 16px;
opacity: 0.5;
transition: all 0.3s ease;
}
.CorporateLoginWrapper a:hover img {
opacity: 0.8;
}
.CorporateLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Bottom Row - Search ===== */
.CorporateBottomRow {
padding-top: 10px;
display: flex;
justify-content: flex-end;
}
.CorporateSearchWrapper {
max-width: 210px;
min-width: 150px;
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.CorporateHeader {
display: none;
}
}
@media (max-width: 768px) {
.CorporateTopBar {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
.CorporateLeftGroup {
justify-content: center;
}
.CorporateRightGroup {
justify-content: center;
flex-wrap: wrap;
}
.CorporateBottomRow {
justify-content: center;
}
.CorporateSearchWrapper {
max-width: 100%;
min-width: 200px;
}
}
/* ============================================
SINGLE ROW COMPACT HEADER STYLE
استایل هشتم - همه در یک خط با طراحی فشرده
============================================ */
.CompactHeader {
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
padding: 0;
margin: 0;
border-bottom: 3px solid #e67e22;
direction: rtl;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.CompactContainer {
max-width: 1366px;
margin: 0 auto;
padding: 8px 20px;
}
/* ===== Single Row ===== */
.CompactRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 5px 0;
flex-wrap: nowrap;
}
/* ===== Logo ===== */
.CompactLogoWrapper {
flex-shrink: 0;
}
.CompactLogoLink {
display: block;
transition: all 0.3s ease;
}
.CompactLogoLink:hover {
transform: scale(1.03);
opacity: 0.9;
}
.CompactLogoLink img {
max-height: 45px;
width: auto;
display: block;
}
/* ===== Search ===== */
.CompactSearchWrapper {
flex: 1;
max-width: 200px;
min-width: 120px;
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Phone Link ===== */
.CompactPhoneLink {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
transition: all 0.3s ease;
white-space: nowrap;
flex-shrink: 0;
}
.CompactPhoneLink:hover {
background: rgba(230, 126, 34, 0.15);
border-color: #e67e22;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(230, 126, 34, 0.15);
}
.CompactPhoneIcon {
font-size: 13px;
line-height: 1;
}
/* ===== Lang Selector ===== */
.CompactLangSelector {
display: flex;
align-items: center;
gap: 3px;
flex-shrink: 0;
}
.CompactLangSelector a {
display: inline-block;
padding: 2px 5px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.5;
border: 1px solid transparent;
}
.CompactLangSelector a:hover {
opacity: 1;
border-color: rgba(230, 126, 34, 0.3);
background: rgba(230, 126, 34, 0.1);
}
.CompactLangSelector img {
width: 22px;
height: 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.1);
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.CompactLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.CompactLoginWrapper a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 12px;
font-weight: 400;
display: flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
white-space: nowrap;
}
.CompactLoginWrapper a:hover {
background: rgba(230, 126, 34, 0.12);
border-color: rgba(230, 126, 34, 0.2);
color: #ffffff;
transform: translateY(-2px);
}
.CompactLoginWrapper img {
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
opacity: 0.5;
transition: all 0.3s ease;
}
.CompactLoginWrapper a:hover img {
opacity: 0.8;
}
.CompactLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.CompactHeader {
display: none;
}
}
/* ============================================
CENTERED SINGLE ROW HEADER STYLE
استایل نهم - لوگو در مرکز و همه در یک خط
============================================ */
.CenteredHeader {
background: linear-gradient(90deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
padding: 0;
margin: 0;
position: relative;
border-bottom: 2px solid rgba(255, 107, 107, 0.2);
direction: rtl;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
}
.CenteredHeader::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
pointer-events: none;
}
.CenteredContainer {
max-width: 1366px;
margin: 0 auto;
padding: 10px 25px;
}
/* ===== Single Row ===== */
.CenteredRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 5px 0;
flex-wrap: nowrap;
}
/* ===== Left Group ===== */
.CenteredLeftGroup {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
justify-content: flex-start;
}
/* ===== Phone Link ===== */
.CenteredPhoneLink {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
white-space: nowrap;
}
.CenteredPhoneLink:hover {
background: rgba(255, 107, 107, 0.1);
border-color: rgba(255, 107, 107, 0.3);
color: #ff6b6b;
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(255, 107, 107, 0.1);
}
.CenteredPhoneIcon {
font-size: 14px;
line-height: 1;
}
/* ===== Lang Selector ===== */
.CenteredLangSelector {
display: flex;
align-items: center;
gap: 4px;
}
.CenteredLangSelector a {
display: inline-block;
padding: 3px 6px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.4;
border: 1px solid transparent;
}
.CenteredLangSelector a:hover {
opacity: 1;
border-color: rgba(255, 107, 107, 0.2);
background: rgba(255, 107, 107, 0.05);
transform: scale(1.05);
}
.CenteredLangSelector img {
width: 24px;
height: 16px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.1);
object-fit: cover;
}
/* ===== Logo - Center ===== */
.CenteredLogoWrapper {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.CenteredLogoLink {
display: block;
transition: all 0.4s ease;
position: relative;
}
.CenteredLogoLink::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%) scaleX(0);
width: 60%;
height: 2px;
background: linear-gradient(90deg, transparent, #ff6b6b, #ee5a24, transparent);
transition: all 0.4s ease;
border-radius: 2px;
}
.CenteredLogoLink:hover::after {
transform: translateX(-50%) scaleX(1);
}
.CenteredLogoLink:hover {
transform: scale(1.05);
filter: drop-shadow(0 0 30px rgba(255, 107, 107, 0.15));
}
.CenteredLogoLink img {
max-height: 50px;
width: auto;
display: block;
}
/* ===== Right Group ===== */
.CenteredRightGroup {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
/* ===== Search ===== */
.CenteredSearchWrapper {
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Login Wrapper ===== */
.CenteredLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.CenteredLoginWrapper a {
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 5px;
padding: 5px 5px;
border-radius: 25px;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
transition: all 0.3s ease;
white-space: nowrap;
}
.CenteredLoginWrapper a:hover {
background: rgba(255, 107, 107, 0.08);
border-color: rgba(255, 107, 107, 0.2);
color: #ff6b6b;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.05);
}
.CenteredLoginWrapper img {
width: 17px;
height: 17px;
filter: brightness(0) invert(1);
opacity: 0.5;
transition: all 0.3s ease;
}
.CenteredLoginWrapper a:hover img {
opacity: 0.8;
}
.CenteredLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.CenteredHeader {
display: none;
}
}
/* ============================================
LUXURY CORPORATE HEADER STYLE
استایل یازدهم - شرکتی لوکس و بسیار شیک
============================================ */
.LuxuryHeader {
background: #ffffff;
padding: 0;
margin: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
direction: rtl;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.03);
}
/* خط طلایی نازک بالا */
.LuxuryHeader::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
#c9a84c 20%,
#f5e6b8 40%,
#c9a84c 60%,
#f5e6b8 80%,
#c9a84c 100%
);
background-size: 200% 100%;
animation: luxuryShine 6s linear infinite;
}
@keyframes luxuryShine {
0% { background-position: 0% 0%; }
100% { background-position: 200% 0%; }
}
.LuxuryContainer {
max-width: 1366px;
margin: 0 auto;
padding: 14px 30px;
}
/* ===== Single Row ===== */
.LuxuryRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 3px 0;
flex-wrap: nowrap;
}
/* ===== Left Group ===== */
.LuxuryLeftGroup {
display: flex;
align-items: center;
gap: 10px;
justify-content: flex-start;
}
/* ===== Phone Link ===== */
.LuxuryPhoneLink {
color: #4a4a4a;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
border-radius: 4px;
border: 1px solid #e8e8e8;
transition: all 0.3s ease;
white-space: nowrap;
background: #fafafa;
letter-spacing: 0.3px;
}
.LuxuryPhoneLink:hover {
border-color: #c9a84c;
background: #fcf9f0;
color: #1a1a1a;
transform: translateY(-1px);
box-shadow: 0 4px 15px rgba(201, 168, 76, 0.08);
}
.LuxuryPhoneIcon {
font-size: 13px;
line-height: 1;
opacity: 0.7;
}
/* ===== Lang Selector ===== */
.LuxuryLangSelector {
display: flex;
align-items: center;
gap: 6px;
padding-right: 20px;
border-right: 1px solid #e8e8e8;
}
.LuxuryLangSelector a {
display: inline-block;
padding: 3px 5px;
border-radius: 3px;
transition: all 0.3s ease;
opacity: 0.4;
}
.LuxuryLangSelector a:hover {
opacity: 1;
background: #fcf9f0;
}
.LuxuryLangSelector img {
width: 22px;
height: 15px;
border-radius: 2px;
border: 1px solid #e8e8e8;
object-fit: cover;
}
/* ===== Logo - Center ===== */
.LuxuryLogoWrapper {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
}
.LuxuryLogoLink {
display: block;
transition: all 0.4s ease;
position: relative;
}
.LuxuryLogoLink::after {
content: '';
position: absolute;
bottom: -8px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 1px;
background: #c9a84c;
transition: all 0.5s ease;
}
.LuxuryLogoLink:hover::after {
width: 100%;
}
.LuxuryLogoLink:hover {
opacity: 0.9;
}
.LuxuryLogoLink img {
max-height: 48px;
width: auto;
display: block;
}
/* ===== Right Group ===== */
.LuxuryRightGroup {
display: flex;
align-items: center;
gap: 15px;
justify-content: flex-end;
}
/* ===== Search ===== */
.LuxurySearchWrapper {
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Login Wrapper ===== */
.LuxuryLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
padding-right: 15px;
border-right: 1px solid #e8e8e8;
}
.LuxuryLoginWrapper a {
color: #4a4a4a;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 5px;
border-radius: 4px;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: 0.3px;
}
.LuxuryLoginWrapper a:hover {
color: #c9a84c;
background: #fcf9f0;
}
.LuxuryLoginWrapper img {
width: 16px;
height: 16px;
opacity: 0.5;
transition: all 0.3s ease;
}
.LuxuryLoginWrapper a:hover img {
opacity: 0.8;
}
.LuxuryLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.LuxuryHeader {
display: none;
}
}
/* ============================================
EXECUTIVE CORPORATE HEADER STYLE
استایل دوازدهم - شرکتی اجرایی با المانهای لوکس
============================================ */
.ExecutiveHeader {
background: linear-gradient(180deg, #f8f6f2 0%, #ffffff 100%);
padding: 0;
margin: 0;
border-bottom: 2px solid #1a1a1a;
direction: rtl;
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.04);
}
.ExecutiveContainer {
max-width: 1366px;
margin: 0 auto;
padding: 18px 30px 12px 30px;
}
/* ===== Top Lines ===== */
.ExecutiveTopLines
.ExecutiveBottomLines {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 0 14px 0;
}
.ExecutiveBottomLines {
padding: 14px 0 0 0;
}
.ExecutiveLine {
flex: 1;
height: 1px;
max-width: 200px;
background: linear-gradient(90deg, transparent, #1a1a1a, transparent);
opacity: 0.15;
}
.ExecutiveLineLeft {
background: linear-gradient(90deg, transparent, #1a1a1a);
}
.ExecutiveLineRight {
background: linear-gradient(90deg, #1a1a1a, transparent);
}
.ExecutiveDiamond {
color: #1a1a1a;
font-size: 10px;
opacity: 0.2;
letter-spacing: 2px;
}
/* ===== Single Row ===== */
.ExecutiveRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 15px;
padding: 8px 0;
flex-wrap: nowrap;
}
/* خط عمودی تزئینی مرکزی پشت لوگو */
.ExecutiveRow::before {
content: '';
position: absolute;
left: 50%;
top: -20px;
bottom: -20px;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.04), transparent);
transform: translateX(-50%);
pointer-events: none;
}
/* ===== Left Group ===== */
.ExecutiveLeftGroup {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
justify-content: flex-start;
padding-left: 20px;
}
/* ===== Decor Border ===== */
.ExecutiveDecorBorder {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 50%;
transition: all 0.3s ease;
}
.ExecutiveDecorBorder:hover {
border-color: rgba(0, 0, 0, 0.15);
transform: rotate(180deg);
}
.ExecutiveDecorIcon {
color: #1a1a1a;
font-size: 12px;
opacity: 0.15;
transition: all 0.3s ease;
}
.ExecutiveDecorBorder:hover .ExecutiveDecorIcon {
opacity: 0.3;
}
/* ===== Divider ===== */
.ExecutiveDivider {
width: 1px;
height: 28px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.08), transparent);
flex-shrink: 0;
}
/* ===== Phone Link ===== */
.ExecutivePhoneLink {
color: #2c2c2c;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 3px;
border: 1px solid transparent;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: 0.5px;
}
.ExecutivePhoneLink:hover {
border-color: rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.02);
transform: translateY(-1px);
}
.ExecutivePhoneIcon {
font-size: 14px;
line-height: 1;
opacity: 0.4;
}
/* ===== Lang Selector ===== */
.ExecutiveLangSelector {
display: flex;
align-items: center;
gap: 6px;
}
.ExecutiveLangSelector a {
display: inline-block;
padding: 3px 5px;
border-radius: 2px;
transition: all 0.3s ease;
opacity: 0.3;
border: 1px solid transparent;
}
.ExecutiveLangSelector a:hover {
opacity: 1;
border-color: rgba(0, 0, 0, 0.06);
background: rgba(0, 0, 0, 0.02);
}
.ExecutiveLangSelector img {
width: 22px;
height: 15px;
border-radius: 2px;
border: 1px solid rgba(0, 0, 0, 0.06);
object-fit: cover;
}
/* ===== Logo - Center ===== */
.ExecutiveLogoWrapper {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
position: relative;
z-index: 2;
}
.ExecutiveLogoFrame {
padding: 8px 25px;
border-left: 1px solid rgba(0, 0, 0, 0.04);
border-right: 1px solid rgba(0, 0, 0, 0.04);
position: relative;
}
/* المانهای تزئینی اطراف لوگو */
.ExecutiveLogoFrame::before,
.ExecutiveLogoFrame::after {
content: '❖';
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 8px;
color: #1a1a1a;
opacity: 0.08;
}
.ExecutiveLogoFrame::before {
right: -8px;
}
.ExecutiveLogoFrame::after {
left: -8px;
}
.ExecutiveLogoLink {
display: block;
transition: all 0.4s ease;
}
.ExecutiveLogoLink:hover {
opacity: 0.85;
transform: scale(1.02);
}
.ExecutiveLogoLink img {
max-height: 50px;
width: auto;
display: block;
}
/* ===== Right Group ===== */
.ExecutiveRightGroup {
display: flex;
align-items: center;
gap: 18px;
flex: 1;
justify-content: flex-end;
padding-right: 20px;
}
/* ===== Search ===== */
.ExecutiveSearchWrapper {
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Login Wrapper ===== */
.ExecutiveLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.ExecutiveLoginWrapper a {
color: #2c2c2c;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 3px;
border: 1px solid transparent;
transition: all 0.3s ease;
white-space: nowrap;
letter-spacing: 0.3px;
}
.ExecutiveLoginWrapper a:hover {
border-color: rgba(0, 0, 0, 0.08);
background: rgba(0, 0, 0, 0.02);
transform: translateY(-1px);
}
.ExecutiveLoginWrapper img {
width: 16px;
height: 16px;
opacity: 0.3;
transition: all 0.3s ease;
}
.ExecutiveLoginWrapper a:hover img {
opacity: 0.6;
}
.ExecutiveLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.ExecutiveHeader {
display: none;
}
}
/* ============================================
MEDICAL BLUE HEADER STYLE
استایل سیزدهم - آبی پرستاری با المانهای تزئینی
============================================ */
.MedicalHeader {
background: linear-gradient(180deg, #e8f4fd 0%, #ffffff 40%, #f0f8ff 100%);
padding: 0;
margin: 0;
border-bottom: 3px solid #2c7be5;
direction: rtl;
box-shadow: 0 4px 30px rgba(44, 123, 229, 0.08);
}
/* نوار بالایی با گرادیانت آبی */
.MedicalHeader::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
transparent 0%,
#4a9eff 20%,
#2c7be5 40%,
#1a5fc7 60%,
#2c7be5 80%,
#4a9eff 100%
);
background-size: 200% 100%;
animation: medicalShine 4s ease-in-out infinite;
}
@keyframes medicalShine {
0% { background-position: 0% 0%; }
50% { background-position: 100% 0%; }
100% { background-position: 0% 0%; }
}
/* پسزمینه نقطهچین تزئینی */
.MedicalHeader::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image: radial-gradient(circle, rgba(44, 123, 229, 0.03) 1px, transparent 1px);
background-size: 20px 20px;
pointer-events: none;
}
.MedicalContainer {
max-width: 100%;
margin: 0 auto;
padding: 16px 0px 12px 0px;
}
/* ===== Top & Bottom Decor ===== */
.MedicalTopDecor,
.MedicalBottomDecor {
display: flex;
align-items: center;
justify-content: center;
padding: 0 0 12px 0;
}
.MedicalBottomDecor {
padding: 12px 0 0 0;
}
.MedicalDecorLine {
flex: 1;
height: 1px;
max-width: 150px;
background: linear-gradient(90deg, transparent, #2c7be5, transparent);
opacity: 0.2;
}
.MedicalDecorIcon {
color: #2c7be5;
font-size: 10px;
opacity: 0.3;
animation: medicalSpin 8s linear infinite;
}
/* ===== Single Row ===== */
.MedicalRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 3px;
padding: 8px 0;
flex-wrap: nowrap;
}
/* خط عمودی تزئینی پشت لوگو */
.MedicalRow::before {
content: '';
position: absolute;
left: 50%;
top: -15px;
bottom: -15px;
width: 2px;
background: linear-gradient(180deg, transparent, rgba(44, 123, 229, 0.06), transparent);
transform: translateX(-50%);
pointer-events: none;
}
/* ===== Left Group ===== */
.MedicalLeftGroup {
display: flex;
align-items: center;
gap: 3px;
flex: 1;
justify-content: flex-start;
}
/* ===== Pulse Wrapper ===== */
.MedicalPulseWrapper {
display: flex;
align-items: center;
gap: 5px;
opacity: 0.4;
transition: all 0.3s ease;
}
.MedicalPulseWrapper:hover {
opacity: 0.8;
}
.MedicalPulseIcon {
color: #2c7be5;
font-size: 16px;
animation: medicalHeartbeat 1.2s ease-in-out infinite;
}
.MedicalPulseLine {
display: inline-block;
width: 20px;
height: 2px;
background: linear-gradient(90deg, transparent, #2c7be5, transparent);
border-radius: 2px;
animation: medicalPulseLine 1.5s ease-in-out infinite;
}
/* ===== Decor Border ===== */
.MedicalDecorBorder {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1.5px solid rgba(44, 123, 229, 0.1);
border-radius: 50%;
transition: all 0.4s ease;
background: rgba(44, 123, 229, 0.02);
}
.MedicalDecorBorder:hover {
border-color: rgba(44, 123, 229, 0.3);
background: rgba(44, 123, 229, 0.05);
transform: rotate(90deg) scale(1.05);
}
.MedicalDecorCross {
color: #2c7be5;
font-size: 14px;
opacity: 0.3;
transition: all 0.3s ease;
}
.MedicalDecorBorder:hover .MedicalDecorCross {
opacity: 0.6;
}
/* ===== Divider ===== */
.MedicalDivider {
width: 1.5px;
height: 30px;
background: linear-gradient(180deg, transparent, rgba(44, 123, 229, 0.1), transparent);
flex-shrink: 0;
}
/* ===== Phone Link ===== */
.MedicalPhoneLink {
color: #1a3a5c;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(44, 123, 229, 0.08);
transition: all 0.3s ease;
white-space: nowrap;
background: rgba(44, 123, 229, 0.02);
}
.MedicalPhoneLink:hover {
border-color: rgba(44, 123, 229, 0.2);
background: rgba(44, 123, 229, 0.05);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(44, 123, 229, 0.06);
}
.MedicalPhoneIcon {
font-size: 14px;
line-height: 1;
opacity: 0.5;
}
/* ===== Lang Selector ===== */
.MedicalLangSelector {
display: flex;
align-items: center;
gap: 5px;
}
.MedicalLangSelector a {
display: inline-block;
padding: 3px 5px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.3;
border: 1px solid transparent;
}
.MedicalLangSelector a:hover {
opacity: 1;
border-color: rgba(44, 123, 229, 0.15);
background: rgba(44, 123, 229, 0.05);
transform: scale(1.05);
}
.MedicalLangSelector img {
width: 22px;
height: 15px;
border-radius: 3px;
border: 1px solid rgba(44, 123, 229, 0.08);
object-fit: cover;
}
/* ===== Logo - Center ===== */
.MedicalLogoWrapper {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
}
.MedicalLogoFrame {
padding: 5px 30px;
border-left: 2px solid rgba(44, 123, 229, 0.05);
border-right: 2px solid rgba(44, 123, 229, 0.05);
display: flex;
align-items: center;
gap: 15px;
}
/* المانهای تزئینی اطراف لوگو */
.MedicalLogoDecor {
color: #2c7be5;
font-size: 12px;
opacity: 0.15;
animation: medicalCrossPulse 2s ease-in-out infinite;
}
.MedicalLogoDecorLeft {
animation-delay: 0s;
}
.MedicalLogoDecorRight {
animation-delay: 1s;
}
@keyframes medicalCrossPulse {
0%, 100% { opacity: 0.15; transform: scale(1); }
50% { opacity: 0.4; transform: scale(1.2); }
}
.MedicalLogoLink {
display: block;
transition: all 0.4s ease;
}
.MedicalLogoLink:hover {
opacity: 0.9;
transform: scale(1.03);
}
.MedicalLogoLink img {
max-height: 48px;
width: auto;
display: block;
}
/* ===== Right Group ===== */
.MedicalRightGroup {
display: flex;
align-items: center;
gap: 3px;
flex: 1;
justify-content: flex-end;
}
/* ===== Search ===== */
.MedicalSearchWrapper {
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Login Wrapper ===== */
.MedicalLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.MedicalLoginWrapper a {
color: #1a3a5c;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: 20px;
border: 1px solid rgba(44, 123, 229, 0.06);
transition: all 0.3s ease;
white-space: nowrap;
background: rgba(44, 123, 229, 0.02);
}
.MedicalLoginWrapper a:hover {
border-color: rgba(44, 123, 229, 0.15);
background: rgba(44, 123, 229, 0.05);
transform: translateY(-2px);
}
.MedicalLoginWrapper img {
width: 16px;
height: 16px;
opacity: 0.3;
transition: all 0.3s ease;
}
.MedicalLoginWrapper a:hover img {
opacity: 0.6;
}
.MedicalLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.MedicalHeader {
display: none;
}
}
/* ============================================
CORPORATE BLUE HEADER STYLE
استایل چهاردهم - آبی شرکتی با چیدمان عمودی
============================================ */
.CorporateBlueHeader {
background: #ffffff;
padding: 0;
margin: 0;
border-bottom: 4px solid #1a4b8c;
direction: rtl;
box-shadow: 0 4px 30px rgba(26, 75, 140, 0.06);
}
/* نوار بالایی آبی */
.CorporateBlueHeader::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg,
#1a4b8c 0%,
#2d6db5 25%,
#4a8fd4 50%,
#2d6db5 75%,
#1a4b8c 100%
);
}
.CorporateBlueContainer {
max-width: 1366px;
margin: 0 auto;
padding: 12px 30px 8px 30px;
}
/* ===== Top Row ===== */
.CorporateBlueTopRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0 10px 0;
flex-wrap: wrap;
gap: 10px;
}
.CorporateBlueTopLeft {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.CorporateBlueTopRight {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* ===== Decor Icon ===== */
.CorporateBlueDecorIcon {
color: #1a4b8c;
font-size: 14px;
opacity: 0.15;
margin-left: 5px;
}
/* ===== Separator ===== */
.CorporateBlueSeparator {
color: #c0d0e0;
font-size: 14px;
opacity: 0.4;
font-weight: 100;
}
/* ===== Phone Link ===== */
.CorporateBluePhoneLink {
color: #2c3e50;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border-radius: 4px;
transition: all 0.3s ease;
}
.CorporateBluePhoneLink:hover {
color: #1a4b8c;
background: rgba(26, 75, 140, 0.04);
}
.CorporateBluePhoneIcon {
font-size: 14px;
opacity: 0.5;
}
/* ===== Email & Hours ===== */
.CorporateBlueEmail,
.CorporateBlueHours {
color: #5a6b7c;
font-size: 12px;
opacity: 0.7;
letter-spacing: 0.3px;
}
/* ===== Lang Selector ===== */
.CorporateBlueLangSelector {
display: flex;
align-items: center;
gap: 4px;
}
.CorporateBlueLangSelector a {
display: inline-block;
padding: 2px 5px;
border-radius: 3px;
transition: all 0.3s ease;
opacity: 0.4;
}
.CorporateBlueLangSelector a:hover {
opacity: 1;
background: rgba(26, 75, 140, 0.04);
}
.CorporateBlueLangSelector img {
width: 22px;
height: 15px;
border-radius: 2px;
border: 1px solid #e8ecf1;
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.CorporateBlueLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.CorporateBlueLoginWrapper a {
color: #2c3e50;
text-decoration: none;
font-size: 13px;
font-weight: 400;
display: flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 4px;
transition: all 0.3s ease;
}
.CorporateBlueLoginWrapper a:hover {
color: #1a4b8c;
background: rgba(26, 75, 140, 0.04);
}
.CorporateBlueLoginWrapper img {
width: 16px;
height: 16px;
opacity: 0.4;
transition: all 0.3s ease;
}
.CorporateBlueLoginWrapper a:hover img {
opacity: 0.7;
}
.CorporateBlueLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Divider Row ===== */
.CorporateBlueDividerRow {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 2px 0 8px 0;
}
.CorporateBlueDividerLine {
flex: 1;
height: 1px;
max-width: 300px;
background: linear-gradient(90deg, transparent, rgba(26, 75, 140, 0.08), transparent);
}
.CorporateBlueDividerDiamond {
color: #1a4b8c;
font-size: 8px;
opacity: 0.15;
}
/* ===== Bottom Row ===== */
.CorporateBlueBottomRow {
align-items: center;
justify-content: space-between;
padding: 8px 0 5px 0;
gap: 20px;
}
/* ===== Left Section ===== */
.CorporateBlueLeftSection {
flex: 1;
display: flex;
justify-content: flex-start;
}
/* ===== Search ===== */
.CorporateBlueSearchWrapper {
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Center Section - Logo ===== */
.CorporateBlueCenterSection {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
}
.CorporateBlueLogoWrapper {
display: flex;
align-items: center;
justify-content: center;
}
.CorporateBlueLogoBorder {
position: relative;
padding: 8px 25px;
border: 1px solid rgba(26, 75, 140, 0.06);
background: rgba(26, 75, 140, 0.01);
transition: all 0.4s ease;
}
.CorporateBlueLogoBorder:hover {
border-color: rgba(26, 75, 140, 0.12);
background: rgba(26, 75, 140, 0.02);
}
/* گوشههای تزئینی لوگو */
.CorporateBlueLogoCorner {
position: absolute;
width: 10px;
height: 10px;
border-color: #1a4b8c;
border-style: solid;
border-width: 0;
opacity: 0.15;
transition: all 0.4s ease;
}
.CorporateBlueLogoBorder:hover .CorporateBlueLogoCorner {
opacity: 0.3;
}
.CorporateBlueLogoCornerTL {
top: -1px;
right: -1px;
border-top-width: 2px;
border-right-width: 2px;
}
.CorporateBlueLogoCornerTR {
top: -1px;
left: -1px;
border-top-width: 2px;
border-left-width: 2px;
}
.CorporateBlueLogoCornerBL {
bottom: -1px;
right: -1px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.CorporateBlueLogoCornerBR {
bottom: -1px;
left: -1px;
border-bottom-width: 2px;
border-left-width: 2px;
}
.CorporateBlueLogoLink {
display: block;
transition: all 0.4s ease;
}
.CorporateBlueLogoLink:hover {
transform: scale(1.02);
}
.CorporateBlueLogoLink img {
width: auto;
display: block;
}
/* ===== Right Section ===== */
.CorporateBlueRightSection {
flex: 1;
display: flex;
justify-content: flex-end;
}
.CorporateBlueActionButtons {
display: flex;
align-items: center;
gap: 8px;
}
.CorporateBlueActionBtn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border: 1px solid rgba(26, 75, 140, 0.06);
border-radius: 50%;
transition: all 0.3s ease;
text-decoration: none;
background: transparent;
}
.CorporateBlueActionBtn:hover {
border-color: rgba(26, 75, 140, 0.15);
background: rgba(26, 75, 140, 0.03);
transform: translateY(-2px);
}
.CorporateBlueActionIcon {
color: #1a4b8c;
font-size: 12px;
opacity: 0.15;
transition: all 0.3s ease;
}
.CorporateBlueActionBtn:hover .CorporateBlueActionIcon {
opacity: 0.4;
}
/* ===== Bottom Bar ===== */
.CorporateBlueBottomBar {
height: 2px;
margin-top: 8px;
background: linear-gradient(90deg,
transparent 0%,
rgba(26, 75, 140, 0.02) 20%,
rgba(26, 75, 140, 0.05) 50%,
rgba(26, 75, 140, 0.02) 80%,
transparent 100%
);
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.CorporateBlueHeader {
display: none;
}
}
/* ============================================
NAVY BLUE HEADER STYLE
استایل پانزدهم - سورمهای با لوگو در راست
============================================ */
.NavyHeader {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 0;
margin: 0;
border-bottom: 2px solid rgba(255, 255, 255, 0.04);
direction: rtl;
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}
@keyframes navyAurora {
0%, 100% { transform: translateX(0) scale(1); opacity: 0.5; }
50% { transform: translateX(5%) scale(1.1); opacity: 1; }
}
/* خط بالایی براق */
.NavyHeader::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
rgba(79, 195, 255, 0.1) 20%,
rgba(79, 195, 255, 0.3) 50%,
rgba(79, 195, 255, 0.1) 80%,
transparent 100%
);
}
.NavyContainer {
max-width: 1366px;
margin: 0 auto;
padding: 12px 30px 10px 30px;
}
/* ===== Top Row ===== */
.NavyTopRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0 10px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}
.NavyTopLeft,
.NavyTopRight {
display: flex;
align-items: center;
gap: 10px;
}
.NavyTopRight {
justify-content: flex-end;
}
.NavyTopCenter {
flex: 0 0 auto;
padding: 0 20px;
}
.NavyTopText {
color: rgba(255, 255, 255, 0.25);
font-size: 11px;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
}
.NavyDecorIcon {
color: rgba(79, 195, 255, 0.15);
font-size: 10px;
animation: navySpin 10s linear infinite;
}
@keyframes navySpin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.NavyDecorLine {
flex: 1;
max-width: 80px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(79, 195, 255, 0.1), transparent);
}
.NavyTopRight .NavyDecorLine {
background: linear-gradient(90deg, rgba(79, 195, 255, 0.1), transparent);
}
/* ===== Main Row ===== */
.NavyMainRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 0 8px 0;
gap: 20px;
}
/* ===== Left Group (چپ) ===== */
.NavyLeftGroup {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
justify-content: flex-start;
flex-wrap: wrap;
}
/* ===== Decor Border ===== */
.NavyDecorBorder {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid rgba(79, 195, 255, 0.06);
border-radius: 50%;
transition: all 0.4s ease;
flex-shrink: 0;
}
.NavyDecorBorder:hover {
border-color: rgba(79, 195, 255, 0.15);
background: rgba(79, 195, 255, 0.03);
transform: rotate(180deg);
}
.NavyDecorSquare {
color: rgba(79, 195, 255, 0.15);
font-size: 11px;
transition: all 0.3s ease;
}
.NavyDecorBorder:hover .NavyDecorSquare {
color: rgba(79, 195, 255, 0.3);
}
/* ===== Divider ===== */
.NavyDivider {
width: 1px;
height: 28px;
background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.04), transparent);
flex-shrink: 0;
}
/* ===== Search ===== */
.NavySearchWrapper {
min-width: 120px;
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Phone Link ===== */
.NavyPhoneLink {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 13px;
font-weight: 300;
display: flex;
align-items: center;
gap: 8px;
padding: 5px 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.04);
transition: all 0.3s ease;
white-space: nowrap;
background: rgba(255, 255, 255, 0.02);
}
.NavyPhoneLink:hover {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(79, 195, 255, 0.15);
background: rgba(79, 195, 255, 0.04);
transform: translateY(-2px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}
.NavyPhoneIcon {
font-size: 14px;
opacity: 0.4;
transition: all 0.3s ease;
}
.NavyPhoneLink:hover .NavyPhoneIcon {
opacity: 0.8;
}
/* ===== Lang Selector ===== */
.NavyLangSelector {
display: flex;
align-items: center;
gap: 4px;
}
.NavyLangSelector a {
display: inline-block;
padding: 3px 5px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.3;
border: 1px solid transparent;
}
.NavyLangSelector a:hover {
opacity: 1;
border-color: rgba(79, 195, 255, 0.15);
background: rgba(79, 195, 255, 0.04);
transform: scale(1.05);
}
.NavyLangSelector img {
width: 22px;
height: 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.06);
object-fit: cover;
}
/* ===== Login Wrapper ===== */
.NavyLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.NavyLoginWrapper a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
font-size: 13px;
font-weight: 300;
display: flex;
align-items: center;
gap: 6px;
padding: 5px 14px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.03);
transition: all 0.3s ease;
white-space: nowrap;
background: rgba(255, 255, 255, 0.02);
}
.NavyLoginWrapper a:hover {
color: rgba(255, 255, 255, 0.85);
border-color: rgba(79, 195, 255, 0.12);
background: rgba(79, 195, 255, 0.04);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.NavyLoginWrapper img {
width: 16px;
height: 16px;
filter: brightness(0) invert(1);
opacity: 0.3;
transition: all 0.3s ease;
}
.NavyLoginWrapper a:hover img {
opacity: 0.6;
}
.NavyLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Right Group (لوگو در راست) ===== */
.NavyRightGroup {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 10px;
}
/* ===== Logo ===== */
.NavyLogoWrapper {
display: flex;
align-items: center;
justify-content: center;
}
.NavyLogoFrame {
position: relative;
padding: 6px 20px;
border-right: 2px solid rgba(79, 195, 255, 0.06);
border-left: 2px solid rgba(79, 195, 255, 0.06);
transition: all 0.4s ease;
}
.NavyLogoFrame:hover {
border-right-color: rgba(79, 195, 255, 0.12);
border-left-color: rgba(79, 195, 255, 0.12);
}
/* هاله نوری پشت لوگو */
.NavyLogoGlow {
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 120%;
height: 120%;
background: radial-gradient(circle, rgba(79, 195, 255, 0.04) 0%, transparent 70%);
opacity: 0;
transition: all 0.5s ease;
pointer-events: none;
}
.NavyLogoFrame:hover .NavyLogoGlow {
opacity: 1;
transform: translate(50%, -50%) scale(1.1);
}
.NavyLogoLink {
display: block;
transition: all 0.4s ease;
}
.NavyLogoLink:hover {
transform: scale(1.03);
filter: drop-shadow(0 0 30px rgba(79, 195, 255, 0.05));
}
.NavyLogoLink img {
max-height: 50px;
width: auto;
display: block;
}
/* ===== Bottom Row ===== */
.NavyBottomRow {
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
padding: 10px 0 4px 0;
border-top: 1px solid rgba(255, 255, 255, 0.02);
}
.NavyBottomLine {
flex: 1;
max-width: 200px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(79, 195, 255, 0.05), transparent);
}
.NavyBottomDiamond {
color: rgba(79, 195, 255, 0.06);
font-size: 8px;
animation: navyDiamondPulse 3s ease-in-out infinite;
}
@keyframes navyDiamondPulse {
0%, 100% { opacity: 0.06; transform: scale(1); }
50% { opacity: 0.15; transform: scale(1.2); }
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.NavyHeader {
display: none;
}
}
/* ============================================
NAVY MULTI-ROW HEADER STYLE
استایل شانزدهم - سورمهای با چند ردیف و المانهای رنگی
============================================ */
.NavyMultiHeader {
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
padding: 0;
margin: 0;
direction: rtl;
box-shadow: 0 4px 40px rgba(0, 0, 0, 0.3);
}
@keyframes navyMultiAurora {
0%, 100% { transform: translateX(0) scale(1); opacity: 0.4; }
50% { transform: translateX(5%) scale(1.1); opacity: 0.8; }
}
.NavyMultiContainer {
max-width: 1366px;
margin: 0 auto;
padding: 8px 30px 6px 30px;
}
/* ===== Row 1 ===== */
.NavyMultiRow1 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0 8px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.02);
}
.NavyMultiLeft1 {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
.NavyMultiRight1 {
display: flex;
align-items: center;
gap: 10px;
}
/* ===== Color Dots ===== */
.NavyMultiColorDot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
opacity: 0.5;
animation: navyMultiPulse 2s ease-in-out infinite;
}
.NavyMultiDotBlue {
background: #4a9eff;
animation-delay: 0s;
}
.NavyMultiDotCyan {
background: #00d4ff;
animation-delay: 0.4s;
}
.NavyMultiDotGold {
background: #ffd700;
animation-delay: 0.8s;
}
@keyframes navyMultiPulse {
0%, 100% { opacity: 0.3; transform: scale(1); }
50% { opacity: 0.8; transform: scale(1.2); }
}
/* ===== Color Lines ===== */
.NavyMultiColorLine {
display: inline-block;
width: 1px;
height: 20px;
background: linear-gradient(180deg, transparent, rgba(79, 195, 255, 0.08), transparent);
flex-shrink: 0;
}
.NavyMultiColorLineV {
width: 1px;
height: 30px;
background: linear-gradient(180deg, transparent, rgba(79, 195, 255, 0.06), transparent);
}
/* ===== Phone Link ===== */
.NavyMultiPhoneLink {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 12px;
font-weight: 300;
display: flex;
align-items: center;
gap: 6px;
padding: 3px 10px;
border-radius: 15px;
border: 1px solid rgba(255, 255, 255, 0.03);
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.02);
}
.NavyMultiPhoneLink:hover {
color: rgba(255, 255, 255, 0.8);
border-color: rgba(79, 195, 255, 0.1);
background: rgba(79, 195, 255, 0.03);
}
.NavyMultiPhoneIcon {
font-size: 13px;
opacity: 0.4;
}
/* ===== Info Text ===== */
.NavyMultiInfoText {
color: rgba(255, 255, 255, 0.2);
font-size: 11px;
font-weight: 300;
letter-spacing: 0.5px;
}
/* ===== Social Icons ===== */
.NavyMultiSocialIcon {
color: rgba(79, 195, 255, 0.1);
font-size: 12px;
transition: all 0.3s ease;
cursor: pointer;
}
.NavyMultiSocialIcon:hover {
color: rgba(79, 195, 255, 0.3);
transform: rotate(180deg);
}
/* ===== Divider 1 ===== */
.NavyMultiDivider {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 5px 0;
}
.NavyMultiDividerLine {
flex: 1;
height: 1px;
max-width: 150px;
}
.NavyMultiDividerLine1 {
background: linear-gradient(90deg, transparent, rgba(74, 158, 255, 0.1));
}
.NavyMultiDividerLine2 {
background: linear-gradient(90deg, rgba(74, 158, 255, 0.1), rgba(0, 212, 255, 0.1));
}
.NavyMultiDividerLine3 {
background: linear-gradient(90deg, rgba(0, 212, 255, 0.1), transparent);
}
.NavyMultiDividerIcon {
color: rgba(79, 195, 255, 0.05);
font-size: 8px;
}
/* ===== Row 2 ===== */
.NavyMultiRow2 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0;
}
.NavyMultiLeft2 {
display: flex;
align-items: center;
gap: 15px;
flex: 1;
}
.NavyMultiRight2 {
flex-shrink: 0;
}
/* ===== Search ===== */
.NavyMultiSearchWrapper {
min-width: 150px;
}
/* فقط جایگاه سرچ - بدون استایل */
/* ===== Lang Selector ===== */
.NavyMultiLangSelector {
display: flex;
align-items: center;
gap: 4px;
}
.NavyMultiLangSelector a {
display: inline-block;
padding: 3px 5px;
border-radius: 12px;
transition: all 0.3s ease;
opacity: 0.3;
border: 1px solid transparent;
}
.NavyMultiLangSelector a:hover {
opacity: 1;
border-color: rgba(79, 195, 255, 0.1);
background: rgba(79, 195, 255, 0.03);
transform: scale(1.05);
}
.NavyMultiLangSelector img {
width: 22px;
height: 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.05);
object-fit: cover;
}
/* ===== Divider 2 ===== */
.NavyMultiDivider2 {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 4px 0;
}
.NavyMultiDividerLine4 {
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.08));
}
.NavyMultiDividerLine5 {
background: linear-gradient(90deg, rgba(255, 215, 0, 0.08), rgba(0, 212, 255, 0.08));
}
.NavyMultiDividerLine6 {
background: linear-gradient(90deg, rgba(0, 212, 255, 0.08), transparent);
}
.NavyMultiDividerDiamond {
color: rgba(255, 215, 0, 0.05);
font-size: 8px;
}
/* ===== Row 3 ===== */
.NavyMultiRow3 {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 0 10px 0;
border-top: 1px solid rgba(255, 255, 255, 0.02);
}
.NavyMultiLeft3 {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
flex-wrap: wrap;
}
.NavyMultiRight3 {
flex-shrink: 0;
}
/* ===== Login Wrapper ===== */
.NavyMultiLoginWrapper {
display: flex;
align-items: center;
gap: 4px;
}
.NavyMultiLoginWrapper a {
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
font-size: 12px;
font-weight: 300;
display: flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.03);
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.02);
}
.NavyMultiLoginWrapper a:hover {
color: rgba(255, 255, 255, 0.8);
border-color: rgba(79, 195, 255, 0.1);
background: rgba(79, 195, 255, 0.03);
transform: translateY(-1px);
}
.NavyMultiLoginWrapper img {
width: 15px;
height: 15px;
filter: brightness(0) invert(1);
opacity: 0.3;
transition: all 0.3s ease;
}
.NavyMultiLoginWrapper a:hover img {
opacity: 0.6;
}
.NavyMultiLoginWrapper .ItemLeftSep {
display: none;
}
/* ===== Action Buttons ===== */
.NavyMultiActionBtn {
display: flex;
align-items: center;
gap: 6px;
color: rgba(255, 255, 255, 0.3);
text-decoration: none;
font-size: 11px;
font-weight: 300;
padding: 4px 12px;
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.02);
transition: all 0.3s ease;
background: rgba(255, 255, 255, 0.02);
}
.NavyMultiActionBtn:hover {
color: rgba(255, 255, 255, 0.7);
border-color: rgba(79, 195, 255, 0.08);
background: rgba(79, 195, 255, 0.03);
transform: translateY(-1px);
}
.NavyMultiActionIcon {
font-size: 10px;
opacity: 0.3;
transition: all 0.3s ease;
}
.NavyMultiActionBtn:hover .NavyMultiActionIcon {
opacity: 0.6;
}
.NavyMultiActionText {
font-size: 11px;
}
/* ===== Logo (Right) ===== */
.NavyMultiLogoWrapper {
display: flex;
align-items: center;
justify-content: center;
}
.NavyMultiLogoFrame {
position: relative;
padding: 0 5px;
}
.NavyMultiLogoFrame:hover .NavyMultiLogoGlow {
opacity: 1;
}
.NavyMultiLogoBorder {
position: relative;
padding: 5px 25px;
border: 1px solid rgba(255, 255, 255, 0.03);
background: rgba(255, 255, 255, 0.01);
transition: all 0.4s ease;
}
.NavyMultiLogoBorder:hover {
border-color: rgba(79, 195, 255, 0.06);
}
/* گوشههای طلایی */
.NavyMultiLogoCorner {
position: absolute;
width: 12px;
height: 12px;
border-color: rgba(255, 215, 0, 0.05);
border-style: solid;
border-width: 0;
transition: all 0.4s ease;
}
.NavyMultiLogoBorder:hover .NavyMultiLogoCorner {
border-color: rgba(255, 215, 0, 0.15);
}
.NavyMultiLogoCornerTL {
top: -1px;
right: -1px;
border-top-width: 2px;
border-right-width: 2px;
}
.NavyMultiLogoCornerTR {
top: -1px;
left: -1px;
border-top-width: 2px;
border-left-width: 2px;
}
.NavyMultiLogoCornerBL {
bottom: -1px;
right: -1px;
border-bottom-width: 2px;
border-right-width: 2px;
}
.NavyMultiLogoCornerBR {
bottom: -1px;
left: -1px;
border-bottom-width: 2px;
border-left-width: 2px;
}
.NavyMultiLogoLink {
display: block;
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.NavyMultiLogoLink:hover {
transform: scale(1.03);
}
.NavyMultiLogoLink img {
max-height: 48px;
width: auto;
display: block;
}
/* ===== Bottom Bars ===== */
.NavyMultiBottom {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 0 2px 0;
border-top: 1px solid rgba(255, 255, 255, 0.02);
}
.NavyMultiBottomBar {
flex: 1;
height: 2px;
border-radius: 2px;
max-width: 200px;
}
.NavyMultiBottomBar1 {
background: linear-gradient(90deg, transparent, rgba(74, 158, 255, 0.1));
}
.NavyMultiBottomBar2 {
background: linear-gradient(90deg, rgba(74, 158, 255, 0.1), rgba(255, 215, 0, 0.1));
}
.NavyMultiBottomBar3 {
background: linear-gradient(90deg, rgba(255, 215, 0, 0.1), transparent);
}
/* ===== Responsive - Hide on Mobile ===== */
@media (max-width: 1240px) {
.NavyMultiHeader {
display: none;
}
}
/* ============================================
استایلهای مشترک HeaderMenu و
============================================ */
/* استایل منوی ساده */
.SimpleMenuWrapper,
.ModernMenuWrapper,
.MinimalMenuWrapper,
.PremiumMenuWrapper,
.GlassMenuWrapper,
.NeonMenuWrapper,
.CorporateMenuWrapper,
.CompactMenuWrapper,
.CenteredMenuWrapper,
.LuxuryMenuWrapper,
.ExecutiveMenuWrapper,
.MedicalMenuWrapper,
.CorporateBlueMenuWrapper,
.NavyMenuWrapper,
.NavyMultiMenuWrapper {
display: inline-flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.SimpleMenuWrapper a,
.ModernMenuWrapper a,
.MinimalMenuWrapper a,
.PremiumMenuWrapper a,
.GlassMenuWrapper a,
.NeonMenuWrapper a,
.CorporateMenuWrapper a,
.CompactMenuWrapper a,
.CenteredMenuWrapper a,
.LuxuryMenuWrapper a,
.ExecutiveMenuWrapper a,
.MedicalMenuWrapper a,
.CorporateBlueMenuWrapper a,
.NavyMenuWrapper a,
.NavyMultiMenuWrapper a {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px;
border-radius: 20px;
font-size: 13px;
font-weight: 400;
text-decoration: none;
transition: all 0.3s ease;
white-space: nowrap;
}
.SimpleMenuWrapper a:hover,
.ModernMenuWrapper a:hover,
.MinimalMenuWrapper a:hover,
.PremiumMenuWrapper a:hover,
.GlassMenuWrapper a:hover,
.NeonMenuWrapper a:hover,
.CorporateMenuWrapper a:hover,
.CompactMenuWrapper a:hover,
.CenteredMenuWrapper a:hover,
.LuxuryMenuWrapper a:hover,
.ExecutiveMenuWrapper a:hover,
.MedicalMenuWrapper a:hover,
.CorporateBlueMenuWrapper a:hover,
.NavyMenuWrapper a:hover,
.NavyMultiMenuWrapper a:hover {
opacity: 0.7;
}
.SimpleMenuWrapper img,
.ModernMenuWrapper img,
.MinimalMenuWrapper img,
.PremiumMenuWrapper img,
.GlassMenuWrapper img,
.NeonMenuWrapper img,
.CorporateMenuWrapper img,
.CompactMenuWrapper img,
.CenteredMenuWrapper img,
.LuxuryMenuWrapper img,
.ExecutiveMenuWrapper img,
.MedicalMenuWrapper img,
.CorporateBlueMenuWrapper img,
.NavyMenuWrapper img,
.NavyMultiMenuWrapper img {
width: 16px;
height: 16px;
opacity: 0.6;
}
/* ===== تراز ارتفاعی آیتمها ===== */
.HeaderTopMainColor .ModernLoginWrapper,
.HeaderTopMainColor .ModernMenuWrapper,
.HeaderTopMainColor .ModernPhoneLink,
.HeaderTopMainColor .ModernLangSelector {
display: inline-flex;
align-items: center;
vertical-align: middle;
}
.HeaderTopMainColor .ModernLoginWrapper a,
.HeaderTopMainColor .ModernMenuWrapper a,
.HeaderTopMainColor .ModernPhoneLink {
height: 36px;
line-height: 1;
box-sizing: border-box;
}
/* ===== استایلهای اختصاصی هر قالب ===== */
/* ---- قالب 2: Modern Dark ---- */
.ModernHeaderDark .ModernMenuWrapper a {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.05);
height: 36px;
}
.ModernHeaderDark .ModernMenuWrapper a:hover {
color: #ffffff;
background: rgba(79, 195, 255, 0.1);
border-color: rgba(79, 195, 255, 0.15);
}
/* ---- قالب 3: Minimal Light ---- */
.MinimalHeaderLight .MinimalMenuWrapper a {
color: #555c6b;
background: #f8f9fa;
border: 1px solid #e8ecf1;
height: 34px;
}
.MinimalHeaderLight .MinimalMenuWrapper a:hover {
color: #1a73e8;
background: #f0f7ff;
border-color: #1a73e8;
}
/* ---- قالب 4: Premium Centered ---- */
.PremiumCenterHeader .PremiumMenuWrapper a {
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
height: 36px;
}
.PremiumCenterHeader .PremiumMenuWrapper a:hover {
color: #ffd700;
background: rgba(255, 215, 0, 0.08);
border-color: rgba(255, 215, 0, 0.2);
}
/* ---- قالب 5: Glassmorphism ---- */
.GlassHeader .GlassMenuWrapper a {
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
height: 36px;
}
.GlassHeader .GlassMenuWrapper a:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.15);
}
/* ---- قالب 6: Neon Dark ---- */
.NeonHeader .NeonMenuWrapper a {
color: rgba(0, 255, 255, 0.6);
background: rgba(0, 255, 255, 0.02);
border: 1px solid rgba(0, 255, 255, 0.06);
height: 34px;
}
.NeonHeader .NeonMenuWrapper a:hover {
color: #00ffff;
background: rgba(0, 255, 255, 0.05);
border-color: #00ffff;
box-shadow: 0 0 20px rgba(0, 255, 255, 0.05);
}
/* ---- قالب 7: Minimal Corporate ---- */
.CorporateHeader .CorporateMenuWrapper a {
color: #5f6b7a;
background: #f8fafc;
border: 1px solid #e8ecf1;
height: 34px;
}
.CorporateHeader .CorporateMenuWrapper a:hover {
color: #1a73e8;
background: #f0f7ff;
border-color: #1a73e8;
}
/* ---- قالب 8: Compact ---- */
.CompactHeader .CompactMenuWrapper a {
color: rgba(255, 255, 255, 0.7);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
height: 32px;
font-size: 12px;
padding: 3px 8px;
}
.CompactHeader .CompactMenuWrapper a:hover {
color: #ffffff;
background: rgba(230, 126, 34, 0.1);
border-color: rgba(230, 126, 34, 0.2);
}
/* ---- قالب 9: Centered ---- */
.CenteredHeader .CenteredMenuWrapper a {
color: rgba(255, 255, 255, 0.6);
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
height: 36px;
}
.CenteredHeader .CenteredMenuWrapper a:hover {
color: #ff6b6b;
background: rgba(255, 107, 107, 0.08);
border-color: rgba(255, 107, 107, 0.2);
}
/* ---- قالب 11: Luxury ---- */
.LuxuryHeader .LuxuryMenuWrapper a {
color: #4a4a4a;
background: #fafafa;
border: 1px solid #e8e8e8;
height: 36px;
}
.LuxuryHeader .LuxuryMenuWrapper a:hover {
color: #c9a84c;
background: #fcf9f0;
border-color: #c9a84c;
}
/* ---- قالب 12: Executive ---- */
.ExecutiveHeader .ExecutiveMenuWrapper a {
color: #2c2c2c;
background: rgba(0, 0, 0, 0.02);
border: 1px solid rgba(0, 0, 0, 0.06);
height: 36px;
}
.ExecutiveHeader .ExecutiveMenuWrapper a:hover {
border-color: rgba(0, 0, 0, 0.15);
background: rgba(0, 0, 0, 0.04);
}
/* ---- قالب 13: Medical ---- */
.MedicalHeader .MedicalMenuWrapper a {
color: #1a3a5c;
background: rgba(44, 123, 229, 0.02);
border: 1px solid rgba(44, 123, 229, 0.06);
height: 36px;
}
.MedicalHeader .MedicalMenuWrapper a:hover {
border-color: rgba(44, 123, 229, 0.15);
background: rgba(44, 123, 229, 0.05);
}
/* ---- قالب 14: Corporate Blue ---- */
.CorporateBlueHeader .CorporateBlueMenuWrapper a {
color: #2c3e50;
background: rgba(26, 75, 140, 0.02);
border: 1px solid rgba(26, 75, 140, 0.06);
height: 34px;
}
.CorporateBlueHeader .CorporateBlueMenuWrapper a:hover {
color: #1a4b8c;
background: rgba(26, 75, 140, 0.05);
border-color: rgba(26, 75, 140, 0.15);
}
/* ---- قالب 15: Navy ---- */
.NavyHeader .NavyMenuWrapper a {
color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.04);
height: 36px;
}
.NavyHeader .NavyMenuWrapper a:hover {
color: rgba(255, 255, 255, 0.8);
background: rgba(79, 195, 255, 0.04);
border-color: rgba(79, 195, 255, 0.1);
}
/* ---- قالب 16: Navy Multi ---- */
.NavyMultiHeader .NavyMultiMenuWrapper a {
color: rgba(255, 255, 255, 0.4);
background: rgba(255, 255, 255, 0.02);
border: 1px solid rgba(255, 255, 255, 0.03);
height: 32px;
font-size: 12px;
padding: 3px 8px;
}
.NavyMultiHeader .NavyMultiMenuWrapper a:hover {
color: rgba(255, 255, 255, 0.7);
background: rgba(79, 195, 255, 0.03);
border-color: rgba(79, 195, 255, 0.08);
}
/* ============================================
OVERLAY TRANSPARENT HEADER STYLE (v3 - Dynamic)
استایل هفدهم - داینامیک، شیشهای و هماهنگ با ApplyColors
============================================ */
.OverlayHeader {
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 96%;
max-width: 1400px;
background: rgba(255, 255, 255, 0.8);
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
z-index: 9999;
direction: rtl;
padding: 10px 30px;
}
.OverlayHeader #nav li a {
background:none ;
}
.OverlayHeader .BoxSizeAsli {
width:auto;
}
.OverlayHeader .HeaderTopMenu
{
box-shadow:none;
}
.OverlayContainer {
width: 100%;
margin: 0 auto;
}
.OverlayRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
/* ===== 1. لوگو (راست) ===== */
.OverlayLogoWrapper {
flex: 0 0 auto; /* جلوگیری از کشیده شدن */
display: flex;
align-items: center;
}
.OverlayLogoLink img {
max-height: 75px;
width: auto;
object-fit: contain;
}
/* ===== 2. منو (وسط) ===== */
.OverlayMenuWrapper {
flex: 1; /* فضای باقیمانده را پر میکند تا منو دقیقاً وسط بماند */
display: flex;
justify-content: center;
}
/* ===== 3. ابزارها (چپ) ===== */
.OverlayActionsWrapper {
flex: 0 0 auto; /* جلوگیری از کشیده شدن */
display: flex;
align-items: center;
justify-content: flex-end;
gap: 15px;
}
/*
==== باکس سرچ ====
اینجا فقط ظرف (Wrapper) را محدود میکنیم و کاری به
رنگ و حاشیه داخلی نداریم تا ApplyColors کار خود را کند
*/
.OverlaySearchWrapper {
max-width: 100%;
position: relative;
display: flex;
align-items: center;
}
/* اجبار به پر کردن عرض ظرف */
.OverlaySearchWrapper .TextBoxBox,
.OverlaySearchWrapper .SearchBox {
width: 100% !important;
box-sizing: border-box;
}
/* اگر رنگ زمینه از دیتابیس نیامده بود، یک رنگ سفید پیشفرض بدهد */
.OverlaySearchWrapper .TextBoxBox {
background-color: #ffffff;
border-radius: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}
/* اصلاح جایگاه آیکون جستجو در حالت راستچین (اگر ApplyColors آن را چپ چین کرده باشد) */
.OverlaySearchWrapper .TextBoxBox {
background-position: left 15px center !important;
}
.OverlaySearchWrapper .SearchBox {
padding-right: 10px !important; /* فاصله متن از لبه */
}
/* ===== استایل اجزای دیگر (سبد خرید، لاگین، زبان) در صورت فعال بودن ===== */
.OverlayActionItem {
display: flex;
align-items: center;
}
/* استایل دادن به سبد خرید برای هماهنگی با هدر شیشهای */
.OverlayActionItem .BasketBox {
background: #ffffff !important; /* رنگ سفید برای هماهنگی */
border: 1px solid #e0e0e0 !important;
border-radius: 20px !important;
padding: 6px 15px !important;
box-shadow: 0 2px 5px rgba(0,0,0,0.02);
transition: all 0.3s ease;
}
.OverlayActionItem .BasketBox:hover {
background: #f5f5f5 !important;
transform: translateY(-2px);
}
/* رنگ متن و آیکون سبد خرید در هدر سفید */
.OverlayActionItem .BasketBox .SabadKharid,
.OverlayActionItem .BasketBox .SabadKharid::before,
.OverlayActionItem .BasketBox .SabadKharidNumber {
color: #333 !important;
}
.OverlayActionItem .BasketBox .SabadKharidNumber {
background: #e0e0e0 !important;
}
/* بخش لاگین */
.OverlayLoginWrapper a {
color: #333;
text-decoration: none;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.OverlayLoginWrapper a:hover {
color: #d32f2f;
}
/* زبان */
.OverlayLangSelector {
display: flex;
align-items: center;
gap: 5px;
}
.OverlayLangSelector img {
width: 24px;
height: 16px;
border-radius: 3px;
border: 1px solid #ddd;
}
/* تلفن */
.OverlayPhoneLink {
color: #333333;
text-decoration: none;
font-size: 13px;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
padding: 6px 12px;
background: #f5f5f5;
border-radius: 20px;
border: 1px solid #e0e0e0;
}
.OverlayPhoneLink:hover {
background: #e0e0e0;
}
/* ===== Responsive ===== */
@media (max-width: 1240px) {
.OverlayHeader {
display: none;
}
}
/* ============================================
اصلاح پوزیشن هدر شناور در صفحات داخلی
============================================ */
.OverlayHeader.InternalPage {
position: relative !important;
top: 0 !important;
left: auto !important;
transform: none !important;
/* فاصله پایین را زیاد کردیم تا عکس زیر آن جا شود */
margin: 20px auto 40px auto !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
max-width: 100%;
width: calc(100% - 100px);
/* رنگ پسزمینه باکس را سفید یا شیشهای نگه میداریم */
background: rgba(255, 255, 255, 0.95) !important;
border-radius: 15px; /* اگر گوشههای باکس گرد است */
}
/* ایجاد یک لایه مجازی در زیر باکس برای قرار دادن عکس */
.OverlayHeader.InternalPage::after {
content: '';
position: absolute;
/* فاصله از پایین باکس (منفی میدهیم تا به زیر باکس برود) */
bottom: -36px; /* این عدد را بر اساس ارتفاع عکس خود تنظیم کنید */
left: 0;
width: 100%;
/* ارتفاع عکس شما */
height: 25px; /* این عدد را بر اساس ارتفاع عکس خود تنظیم کنید */
/* آدرس عکس شما */
background: url(../Administrator/Files/Design/RowHeader.png) no-repeat center bottom;
background-size: 100% 100%; /* برای اینکه عکس با عرض باکس هماهنگ شود */
z-index: -1; /* قرارگیری در لایه زیرین باکس */
pointer-events: none; /* جلوگیری از مسدود شدن کلیکها روی عکس */
}
/* اگر در صفحات داخلی هدر روی محتوا میفتد، این خط را هم اضافه کنید تا یک فاصله ایجاد شود */
.OverlayHeader.InternalPage + div {
margin-top: 15px;
}
/* Diamond header (style 18) */
.DiamondHeader { background: #f1f1f1; direction: rtl; padding-bottom: 8px; }
.DiamondTopBar { min-height: 45px; padding: 0 2%; display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.DiamondHeaderLinks, .DiamondTopActions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.DiamondHeaderLinks a { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.DiamondHeaderLinks img { max-width: 20px; max-height: 20px; }
.DiamondPhoneLink { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 22px; text-decoration: none; }
.DiamondLanguages { display: flex; gap: 6px; }
.DiamondLanguages img { max-width: 24px; max-height: 20px; }
.DiamondMainRow { box-sizing: border-box; min-height: 130px; padding: 15px 1.3%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.DiamondLogo { display: block; max-width: 45%; }
.DiamondLogo img { display: block; max-width: 100%; max-height: 80px; width: auto; height: auto; }
.DiamondActions { display: flex; direction: rtl; align-items: center; flex-wrap: wrap; gap: 12px; }
.DiamondLogin { box-sizing: border-box; min-height: 70px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 10px; border: 5px solid #fff; border-radius: 20px; background: #f3f3f3; box-shadow: 0 2px 12px rgba(0,0,0,.16); }
.DiamondLogin a { display: inline-flex; align-items: center; gap: 4px; color: #111; text-decoration: none; white-space: nowrap; }
.DiamondLogin img { max-width: 22px; max-height: 22px; }
.DiamondHeader .BasketBox { box-sizing: border-box; height: 70px; min-height: 70px; min-width: 270px; justify-content: center; padding: 0 18px; border: 5px solid #fff; border-radius: 20px; background-color: #48c3ad; box-shadow: 0 2px 12px rgba(0,0,0,.16); font-size: 18px; font-weight: bold; }
.DiamondHeader .BasketBox .SabadKharid::before { content: ""; width: 38px; height: 38px; flex: 0 0 38px; margin: 0; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h6l5 25h25l5-18H11M16 36h22'/%3E%3Ccircle cx='18' cy='41' r='2.5'/%3E%3Ccircle cx='36' cy='41' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h6l5 25h25l5-18H11M16 36h22'/%3E%3Ccircle cx='18' cy='41' r='2.5'/%3E%3Ccircle cx='36' cy='41' r='2.5'/%3E%3C/svg%3E") center / contain no-repeat; }
.DiamondNavigation { margin: 0 1.3%; padding: 2px 12px; display: flex; align-items: center; gap: 15px; border-radius: 20px; background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.16); }
.DiamondMenu { flex: 1 1 auto; min-width: 0; }
.DiamondMenu .HeaderTopMenu, .DiamondMenu .HeaderTopMenuBox, .DiamondMenu .BoxSizeAsli { float: none; width: 100%; max-width: none; margin: 0; }
.DiamondMenu .HeaderTopMenuBox { background-image: none; height: auto; }
.DiamondMenu .mkd-topbar { position: relative; min-height: 60px; border: 0; box-shadow: none; }
.DiamondMenu .mkd-nav { max-width: none; padding: 0; }
.DiamondSearch { flex: 0 0 auto; max-width: 35%; }
.DiamondSearch .SearchBoxBox, .DiamondSearch .SearchBox { max-width: 100%; }
.DiamondSearch .TextBoxBox { border-radius: 24px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
@media (max-width: 1240px) { .DiamondHeader { display: none; } }
/* Gold header (style 19) */
.GoldHeader { position: relative; z-index: 50; background: #ffed00; direction: rtl; text-align: right; }
.GoldTopBar { box-sizing: border-box; min-height: 55px; padding: 8px 1.5%; display: flex; align-items: center; justify-content: flex-end; gap: 14px; background: #000; }
.GoldLogin { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.GoldLogin a { display: inline-flex; align-items: center; gap: 4px; color: #fff; text-decoration: none; }
.GoldLogin img { max-width: 20px; max-height: 20px; }
.GoldLanguages { display: flex; align-items: center; gap: 6px; }
.GoldLanguages img { max-width: 24px; max-height: 20px; }
.GoldTools { box-sizing: border-box; width: 72%; margin-right: auto; min-height: 124px; padding: 12px 28px; display: flex; flex-direction: column; direction: ltr; align-items: flex-start; justify-content: center; gap: 8px; }
.GoldPhoneLink { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: #111; color: #ffed00; font-size: 24px; line-height: 1; text-decoration: none; }
.GoldToolRow { display: flex; direction: rtl; align-items: center; gap: 12px; max-width: 100%; }
.GoldHeader .BasketBox { box-sizing: border-box; height: auto; min-height: 44px; font-weight: bold; }
.GoldHeader .BasketBox .SabadKharid::before { font-family: FontAwesome; content: "\f07a"; }
.GoldSearch { min-width: 0; max-width: 100%; }
.GoldSearch .SearchBoxBox, .GoldSearch .SearchBox { max-width: 100%; }
.GoldMenuBar { position: relative; z-index: 3; width: 76%; min-height: 75px; margin-right: auto; background: #111; }
.GoldMenuBar .HeaderTopMenu, .GoldMenuBar .HeaderTopMenuBox, .GoldMenuBar .BoxSizeAsli { float: none; width: 100%; max-width: none; margin: 0; }
.GoldMenuBar .HeaderTopMenuBox { background-image: none; height: auto; }
.GoldMenuBar .mkd-topbar { position: relative; min-height: 75px; border: 0; box-shadow: none; }
.GoldMenuBar .mkd-nav { max-width: none; padding: 0 10px; }
.GoldLogoPanel { box-sizing: border-box; position: absolute; z-index: 4; top: 55px; right: 0; bottom: -106px; width: 22%; padding-top: 55px; display: flex; align-items: flex-start; justify-content: center; background: inherit; border-bottom-left-radius: 38px; pointer-events: none; }
.GoldLogoPanel::before { content: ""; position: absolute; left: 0; bottom: 0; width: 130px; height: 181px; background: inherit; border-bottom-left-radius: 45px; transform: skewX(25deg); transform-origin: bottom left; }
.GoldLogo { position: relative; z-index: 1; display: block; max-width: min(260px, 85%); pointer-events: auto; }
.GoldLogo img { display: block; max-width: 100%; height: auto; }
.GoldInternal .GoldLogoPanel { bottom: 0; }
.GoldInternal .GoldLogoPanel::before { height: 75px; }
@media (max-width: 1240px) { .GoldHeader { display: none; } }
/* Ruby header (style 20) */
.RubyHeader { position: relative; z-index: 1100; background: #fff; direction: rtl; }
.RubyMainRow { box-sizing: border-box; width: 100%; min-height: 100px; margin: 0; padding: 10px 20px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.RubyLogo { display: block; max-width: 35%; }
.RubyLogo img { display: block; max-width: 100%; max-height: 70px; width: auto; height: auto; }
.RubyActions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.RubyInfo, .RubyTools, .RubyLogin, .RubyHeaderLinks, .RubyLanguages { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.RubyInfo { font-size: 11px; }
.RubyInfo a { color: #631416; text-decoration: none; }
.RubyLogin a, .RubyHeaderLinks a { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border: 1px solid #ead8d8; border-radius: 6px; background: #fff8f8; line-height: 1.8; transition: background .2s, border-color .2s, color .2s; }
.RubyLogin a[href]:hover, .RubyLogin a[href]:focus, .RubyHeaderLinks a:hover, .RubyHeaderLinks a:focus { color: #fff; background: #941719; border-color: #941719; }
.RubyInfo img { max-height: 18px; max-width: 22px; }
.RubyPhone span { color: #941719; }
.RubyTools { flex-wrap: nowrap; align-items: center; }
.RubyHeader .BasketBox { box-sizing: border-box; min-height: 40px; font-weight: bold; line-height: 1.4; }
.RubyHeader .BasketBox .SabadKharid::before { content: "\f07a"; font-family: FontAwesome; }
.RubySearch { min-width: 0; max-width: 100%; }
.RubySearch .SearchBoxBox, .RubySearch .SearchBox { max-width: 100%; vertical-align: middle; }
.RubySearch .TextBoxBox { position: relative; box-sizing: border-box; height: 100%; display: flex; align-items: center; }
.RubySearch .ResultShop { position: absolute; z-index: 1; top: 100%; right: 0; width: 600px; max-width: calc(100vw - 40px); text-align: right; }
.RubySearch .ResultShop .AutoCamplet { display: flow-root; position: relative; top: auto; left: auto; right: auto; float: none; box-sizing: border-box; width: 100%; margin: 0; background: #fff; }
.RubySearch .TextBoxAutoCapmlet { box-sizing: border-box; flex: 1 1 auto; min-width: 0; }
.RubySearch .TextAutoButton { flex: 0 0 40px; width: 40px; height: 100%; background: #941719 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2'%3E%3Ccircle cx='10' cy='10' r='7'/%3E%3Cpath d='M15 15l6 6'/%3E%3C/svg%3E") center / 20px 20px no-repeat; }
.RubyMenuBar { top: 0; z-index: 1000; width: 100%; background: #e5e5e5; box-shadow: 0 3px 7px rgba(0,0,0,.15); }
.RubyMenuBar .HeaderTopMenu, .RubyMenuBar .HeaderTopMenuBox { float: none; width: 100%; margin: 0; }
.RubyMenuBar .HeaderTopMenuBox { background-image: none; height: auto; }
.RubyMenuBar .mkd-topbar { position: relative; min-height: 42px; background: transparent; border: 0; box-shadow: none; }
.RubyMenuBar .mkd-nav { max-width: 1234px; }
.RubyMenuBar .mkd-link { margin: 5px 2px; padding: 8px 13px; border-radius: 6px; transition: color .2s, background-color .2s; }
.RubyMenuBar .mkd-link:hover, .RubyMenuBar .mkd-item.open > .mkd-link { box-shadow: 0 2px 6px rgba(100,20,22,.12); }
@media (max-width: 1240px) { .RubyHeader, .RubyMenuBar { display: none; } }
/* Style 21: Orange */
.OrangeHeader { position: relative; z-index: 1100; direction: rtl; background: #fffaf5; }
.OrangeTopbar { background: #632b16; color: #fff; }
.OrangeTopbarInner { box-sizing: border-box; max-width: 1500px; min-height: 42px; margin: auto; padding: 6px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.OrangeTopLinks, .OrangeLogin, .OrangeSimpleLinks, .OrangeContact, .OrangeLanguages { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.OrangeTopbar a { color: #fff; text-decoration: none; }
.OrangeLogin a, .OrangeSimpleLinks a { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 8px; background: rgba(255,255,255,.1); transition: background .2s; }
.OrangeLogin a:hover, .OrangeSimpleLinks a:hover, .OrangePhone:hover { background: rgba(255,255,255,.22); color: #fff; }
.OrangeTopbar img { max-width: 20px; max-height: 20px; vertical-align: middle; }
.OrangeTopLinks img { display: none; }
.OrangePhone { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 8px; }
.OrangePhone span { color: #ffb064; }
.OrangeMain { box-sizing: border-box; display: grid; grid-template-columns: 280px minmax(0, 1fr); max-width: 1500px; min-height: 142px; margin: auto; padding: 0 24px; }
.OrangeBrandPanel { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 16px; padding: 22px; background: linear-gradient(135deg, #ff9a32, #e85c10); border-radius: 0 0 30px 30px; }
.OrangeBrandAccent { position: absolute; width: 180px; height: 180px; top: -105px; right: -50px; border: 25px solid rgba(255,255,255,.14); border-radius: 50%; }
.OrangeLogo { position: relative; box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 80px; padding: 10px 16px; background: #fff; border-radius: 16px; box-shadow: 0 7px 18px rgba(126,48,5,.16); }
.OrangeLogo img { display: block; max-width: 100%; max-height: 65px; width: auto; height: auto; }
.OrangeShopTools { min-width: 0; display: flex; align-items: center; gap: 20px; padding: 24px 0; }
.OrangeSearchSection { flex: 0 1 650px; min-width: 0; margin: 0 auto; text-align: center; }
.OrangeSearchSection:only-child { margin-right: auto; margin-left: 0; text-align: left; }
.OrangeSearchSection .SearchBoxBox, .OrangeSearchSection .SearchBox { max-width: 100%; vertical-align: middle; }
.OrangeSearchSection .TextBoxBox { position: relative; box-sizing: border-box; height: 100%; display: flex; align-items: center; }
.OrangeSearchSection .TextBoxAutoCapmlet { box-sizing: border-box; flex: 1 1 auto; min-width: 0; }
.OrangeSearchSection .TextAutoButton { flex: 0 0 48px; width: 48px; height: 100%; }
.OrangeSearchSection .ResultShop { position: absolute; z-index: 1; top: 100%; right: 0; width: 600px; max-width: calc(100vw - 40px); text-align: right; }
.OrangeSearchSection .ResultShop .AutoCamplet { display: flow-root; position: relative; top: auto; left: auto; right: auto; float: none; box-sizing: border-box; width: 100%; margin: 0; background: #fff; }
.OrangeBasket { flex: 0 0 auto; }
.OrangeBasket .BasketBox { box-sizing: border-box; min-height: 48px; font-weight: bold; line-height: 1.4; }
.OrangeBasket .BasketBox .SabadKharid::before { content: "\f07a"; font-family: FontAwesome; }
.OrangeMenuBar { top: 0; z-index: 1000; width: 100%; background: #fff4e8; box-shadow: 0 3px 9px rgba(105,49,20,.12); }
.OrangeMenuInner { box-sizing: border-box; display: flex; align-items: center; width: 100%; }
.OrangeMenu { flex: 1 1 auto; min-width: 0; }
.OrangeMenu .HeaderTopMenu, .OrangeMenu .HeaderTopMenuBox { float: none; width: 100%; margin: 0; }
.OrangeMenu .HeaderTopMenuBox { height: auto; background-image: none; }
.OrangeMenu .mkd-topbar { position: relative; min-height: 58px; background: transparent; border: 0; box-shadow: none; }
.OrangeMenu .mkd-nav { max-width: none; }
.OrangeMenu .mkd-link { margin: 5px 2px; padding: 8px 13px; border-radius: 9px; transition: color .2s, background-color .2s; }
.OrangeMenu .mkd-link:hover, .OrangeMenu .mkd-item.open > .mkd-link { box-shadow: 0 2px 7px rgba(190,85,20,.15); }
@media (max-width: 1240px) { .OrangeHeader, .OrangeMenuBar { display: none; } }