dropdowns.
========================================================== */
.techdr-header-nav{
position:relative !important;
z-index:1000 !important;
overflow:visible !important;
}
.techdr-header-nav > .e-con-inner,
.techdr-header-nav > .elementor-container,
.techdr-header-nav .elementor-widget-shortcode,
.techdr-header-nav .elementor-widget-container{
overflow:visible !important;
}
/* ==========================================================
RESET + VARIABLES
========================================================== */
.tdnav,
.tdnav *{
box-sizing:border-box;
}
.tdnav{
--blue:#278fc9;
--blue2:#43b4e7;
--navy:#29256f;
--purple:#8424ed;
--text:#17182d;
--muted:#969aa7;
--line:#edf0f4;
position:relative;
width:100%;
background:#fff;
border-bottom:1px solid #f0f2f5;
font-family:inherit;
z-index:1000;
}
.tdnav button{
font-family:inherit;
}
/* ==========================================================
DESKTOP NAV
========================================================== */
.tdnav-inner{
width:min(1300px,94%);
height:76px;
margin:auto;
display:flex;
align-items:center;
gap:7px;
}
.tdnav-link{
position:relative;
min-height:48px;
padding:0 20px;
display:flex;
align-items:center;
justify-content:center;
color:var(--text)!important;
text-decoration:none!important;
border-radius:13px;
font-size:13px;
font-weight:700;
transition:.22s ease;
}
.tdnav-link:hover{
color:var(--navy)!important;
background:#edf8fd;
}
.tdnav-link:after{
content:"";
position:absolute;
right:50%;
bottom:4px;
width:0;
height:2px;
background:linear-gradient(90deg,var(--blue),var(--purple));
border-radius:20px;
transition:.22s;
}
.tdnav-link:hover:after{
right:20%;
width:60%;
}
/* ==========================================================
SHOP TRIGGER
========================================================== */
.tdnav-shop{
position:static;
}
.tdnav-shop-trigger{
position:relative;
display:flex;
align-items:center;
background:#edf8fd;
border-radius:13px;
}
.tdnav-shop-link{
padding-left:8px;
}
.tdnav-shop-toggle{
width:37px;
height:48px;
padding:0;
display:flex;
align-items:center;
justify-content:center;
color:var(--blue);
background:transparent;
border:0;
cursor:pointer;
}
.tdnav-shop-toggle svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
transition:transform .25s;
}
.tdnav-shop:hover .tdnav-shop-toggle svg,
.tdnav-shop.is-open .tdnav-shop-toggle svg{
transform:rotate(180deg);
}
/* ==========================================================
IMPORTANT HOVER BRIDGE
========================================================== */
.tdnav-shop-trigger:after{
content:"";
position:absolute;
top:100%;
right:-20px;
width:calc(100% + 40px);
height:30px;
background:transparent;
pointer-events:auto;
}
/* ==========================================================
DESKTOP MEGA MENU
========================================================== */
.tdmega{
position:absolute;
top:100%;
right:50%;
width:min(1280px,94vw);
min-height:535px;
display:grid;
grid-template-columns:265px 1fr;
overflow:hidden;
background:#fff;
border:1px solid #e9ecf2;
border-radius:0 0 28px 28px;
box-shadow:0 32px 85px rgba(24,30,55,.15);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translate(50%,8px) scale(.995);
transform-origin:top center;
/*
* مهم:
* باز شدن سریع، بسته شدن با کمی تأخیر
*/
transition:
opacity .16s ease .12s,
transform .2s ease .12s,
visibility 0s linear .35s;
z-index:1200;
}
/*
* پل نامرئی دوم در بالای مگا منو
*/
.tdmega:before{
content:"";
position:absolute;
top:-28px;
right:0;
width:100%;
height:30px;
background:transparent;
}
/*
* DESKTOP:
* تا وقتی روی فروشگاه یا خود منو هستی، باز میماند.
*/
@media(min-width:769px){
.tdnav-shop:hover .tdmega,
.tdnav-shop:focus-within .tdmega,
.tdnav-shop.is-open .tdmega{
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translate(50%,0) scale(1);
transition:
opacity .16s ease,
transform .2s ease,
visibility 0s;
}
}
/* ==========================================================
MOBILE HEADER HIDDEN ON DESKTOP
========================================================== */
.tdmega-mobile-head{
display:none;
}
/* ==========================================================
SIDEBAR
========================================================== */
.tdmega-side{
padding:19px 13px;
background:linear-gradient(180deg,#fafbfe,#f5f8fc);
border-left:1px solid var(--line);
}
.tdmega-side-title{
min-height:61px;
margin-bottom:7px;
padding:5px 8px 15px;
display:flex;
align-items:center;
gap:10px;
border-bottom:1px solid #e9ecf1;
}
.td-side-icon{
width:41px;
height:41px;
flex:0 0 41px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:linear-gradient(135deg,var(--blue),var(--navy));
border-radius:13px;
box-shadow:0 8px 22px rgba(41,37,111,.15);
}
.td-side-icon svg{
width:19px;
height:19px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
}
.tdmega-side-title strong{
display:block;
color:var(--text);
font-size:12px;
}
.tdmega-side-title small{
display:block;
margin-top:3px;
color:#a1a5b1;
font-size:8px;
}
/* ==========================================================
CATEGORY BUTTONS
========================================================== */
.tdmega-cat{
position:relative;
width:100%;
min-height:63px;
margin:3px 0;
padding:8px 9px;
display:flex;
align-items:center;
gap:10px;
color:#505361;
background:transparent;
border:0;
border-radius:14px;
text-align:right;
cursor:pointer;
transition:.2s;
}
.tdmega-cat:before{
content:"";
position:absolute;
right:0;
top:50%;
width:3px;
height:0;
background:linear-gradient(var(--blue),var(--purple));
border-radius:10px;
transform:translateY(-50%);
transition:.2s;
}
.tdmega-cat:hover,
.tdmega-cat.active{
color:var(--navy);
background:#fff;
box-shadow:0 7px 22px rgba(28,34,65,.065);
transform:translateX(-3px);
}
.tdmega-cat:hover:before,
.tdmega-cat.active:before{
height:31px;
}
.td-cat-icon{
width:41px;
height:41px;
flex:0 0 41px;
display:flex;
align-items:center;
justify-content:center;
color:var(--blue);
background:#edf7fc;
border-radius:12px;
transition:.22s;
}
.td-cat-icon svg{
width:20px;
height:20px;
fill:none;
stroke:currentColor;
stroke-width:1.7;
stroke-linecap:round;
stroke-linejoin:round;
}
.tdmega-cat:hover .td-cat-icon,
.tdmega-cat.active .td-cat-icon{
color:#fff;
background:linear-gradient(135deg,var(--blue),var(--purple));
transform:rotate(-4deg) scale(1.04);
box-shadow:0 8px 18px rgba(86,46,185,.16);
}
.td-cat-text{
flex:1;
}
.td-cat-text strong{
display:block;
font-size:11px;
}
.td-cat-text small{
display:block;
margin-top:3px;
color:#a0a4af;
font-size:7px;
}
.td-arrow{
color:#b9bdc7;
font-size:19px;
transition:.2s;
}
.tdmega-cat.active .td-arrow{
color:var(--purple);
transform:translateX(-3px);
}
/* ==========================================================
CONTENT
========================================================== */
.tdmega-content{
position:relative;
padding:27px 31px;
background:
radial-gradient(
circle at 5% 95%,
rgba(39,143,201,.04),
transparent 30%
),
#fff;
}
.td-panel{
display:none;
}
.td-panel.active{
display:block;
animation:tdPanel .22s ease;
}
@keyframes tdPanel{
from{
opacity:0;
transform:translateY(6px);
}
to{
opacity:1;
transform:none;
}
}
/* ==========================================================
PANEL HEADER
========================================================== */
.td-panel-header{
min-height:75px;
margin-bottom:23px;
padding-bottom:18px;
display:flex;
align-items:center;
justify-content:space-between;
border-bottom:1px solid var(--line);
}
.td-panel-header > div > span{
display:block;
margin-bottom:3px;
color:var(--blue);
font-size:7px;
font-weight:800;
letter-spacing:1.6px;
}
.td-panel-header h3{
margin:0;
color:var(--text);
font-size:20px;
font-weight:800;
}
.td-panel-header p{
margin:5px 0 0;
color:#9ba0ac;
font-size:9px;
}
.td-panel-header > a{
min-height:38px;
padding:0 14px;
display:flex;
align-items:center;
color:var(--navy)!important;
background:#f5f7fa;
border-radius:10px;
text-decoration:none!important;
font-size:9px;
font-weight:700;
transition:.2s;
}
.td-panel-header > a:hover{
color:#fff!important;
background:var(--navy);
transform:translateY(-2px);
}
/* ==========================================================
COLUMNS
========================================================== */
.td-columns{
display:grid;
grid-template-columns:repeat(3,1fr) 1.08fr;
gap:25px;
}
.td-columns.td-three{
grid-template-columns:repeat(3,1fr);
}
.td-column{
position:relative;
}
.td-column:not(:last-child):after{
content:"";
position:absolute;
top:0;
bottom:0;
left:-12px;
width:1px;
background:linear-gradient(
transparent,
#edf0f4 12%,
#edf0f4 88%,
transparent
);
}
/* ==========================================================
COLUMN TITLES
========================================================== */
.td-column-title{
min-height:50px;
margin-bottom:9px;
display:flex;
align-items:center;
gap:9px;
}
.td-brand{
width:40px;
height:40px;
flex:0 0 40px;
display:flex;
align-items:center;
justify-content:center;
color:var(--blue);
background:#f0f7fb;
border-radius:12px;
}
.td-brand svg{
width:21px;
height:21px;
fill:none;
stroke:currentColor;
stroke-width:1.65;
stroke-linecap:round;
stroke-linejoin:round;
}
.td-brand.apple{
color:#202127;
background:#f3f4f5;
}
.td-brand.apple svg{
fill:currentColor;
stroke:none;
}
.td-brand.xiaomi{
color:#ff6900;
background:#fff2e8;
}
.td-brand.samsung,
.td-brand.playstation{
color:#1769d2;
background:#eef5ff;
}
.td-brand.xbox{
color:#107c10;
background:#eff9ef;
}
.td-brand.power{
color:#e99a00;
background:#fff8e7;
}
.td-brand.audio{
color:#843cd0;
background:#f7efff;
}
.td-brand.protect{
color:#11a378;
background:#edfaf6;
}
.td-brand.watch{
color:#df5c83;
background:#fff0f5;
}
.td-brand.gaming{
color:#8424ed;
background:#f7efff;
}
.td-column-title strong{
display:block;
color:var(--text);
font-size:11px;
font-weight:800;
}
.td-column-title small{
display:block;
margin-top:2px;
color:#a0a4af;
font-size:7px;
}
/* ==========================================================
PREMIUM SUBCATEGORY LINKS
========================================================== */
.td-column > a{
position:relative;
min-height:42px;
margin:3px 0;
padding:5px 7px 5px 9px;
display:flex;
align-items:center;
gap:9px;
color:#6f7380!important;
background:transparent;
border:1px solid transparent;
border-radius:11px;
text-decoration:none!important;
font-size:10px;
transition:.18s ease;
}
.td-column > a:hover{
color:var(--navy)!important;
background:#fff;
border-color:#eef0f4;
box-shadow:0 6px 18px rgba(32,38,68,.07);
transform:translateX(-3px);
}
/* ==========================================================
SUB ICONS
========================================================== */
.td-sub-icon{
width:30px;
height:30px;
flex:0 0 30px;
display:flex;
align-items:center;
justify-content:center;
color:#8f96a4;
background:linear-gradient(145deg,#f8f9fb,#f1f3f6);
border:1px solid #eceff3;
border-radius:9px;
transition:.2s;
}
.td-sub-icon svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:1.65;
stroke-linecap:round;
stroke-linejoin:round;
}
.td-column > a:hover .td-sub-icon{
transform:rotate(-5deg) scale(1.08);
}
/* APPLE */
.apple-sub{
color:#202127;
background:#f3f4f5;
}
.apple-sub svg{
fill:currentColor!important;
stroke:none!important;
}
.td-column > a:hover .apple-sub{
color:#fff;
background:#202127;
}
/* XIAOMI */
.xiaomi-sub{
color:#ff6900;
background:#fff4eb;
}
.td-column > a:hover .xiaomi-sub{
color:#fff;
background:#ff6900;
}
/* SAMSUNG */
.samsung-sub,
.ps-sub{
color:#1769d2;
background:#eff6ff;
}
.td-column > a:hover .samsung-sub,
.td-column > a:hover .ps-sub{
color:#fff;
background:#1769d2;
}
/* POWER */
.power-sub{
color:#e99a00;
background:#fff8e7;
}
.td-column > a:hover .power-sub{
color:#fff;
background:#f0a000;
}
.cable-sub{
color:#50718c;
background:#f0f6fa;
}
.td-column > a:hover .cable-sub{
color:#fff;
background:#50718c;
}
.battery-sub{
color:#17a26f;
background:#edf9f4;
}
.td-column > a:hover .battery-sub{
color:#fff;
background:#17a26f;
}
.wireless-sub{
color:#5365df;
background:#f0f2ff;
}
.td-column > a:hover .wireless-sub{
color:#fff;
background:#5365df;
}
/* AUDIO */
.audio-sub{
color:#843cd0;
background:#f7efff;
}
.td-column > a:hover .audio-sub{
color:#fff;
background:#843cd0;
}
.speaker-sub{
color:#7157ce;
background:#f3f0ff;
}
.td-column > a:hover .speaker-sub{
color:#fff;
background:#7157ce;
}
/* PROTECTION */
.protect-sub{
color:#11a378;
background:#edfaf6;
}
.td-column > a:hover .protect-sub{
color:#fff;
background:#11a378;
}
.case-sub{
color:#268fae;
background:#edf8fb;
}
.td-column > a:hover .case-sub{
color:#fff;
background:#268fae;
}
.lens-sub{
color:#d05a7c;
background:#fff0f5;
}
.td-column > a:hover .lens-sub{
color:#fff;
background:#d05a7c;
}
/* WATCH */
.watch-sub{
color:#df5c83;
background:#fff0f5;
}
.td-column > a:hover .watch-sub{
color:#fff;
background:#df5c83;
}
/* COMPUTER */
.computer-sub{
color:#278fc9;
background:#eef8fd;
}
.td-column > a:hover .computer-sub{
color:#fff;
background:#278fc9;
}
/* GAMING */
.gaming-sub{
color:#8424ed;
background:#f7efff;
}
.td-column > a:hover .gaming-sub{
color:#fff;
background:#8424ed;
}
.xbox-sub{
color:#107c10;
background:#eff9ef;
}
.td-column > a:hover .xbox-sub{
color:#fff;
background:#107c10;
}
.disc-sub{
color:#e04e87;
background:#fff0f6;
}
.td-column > a:hover .disc-sub{
color:#fff;
background:#e04e87;
}
/* ==========================================================
FEATURE CARD
========================================================== */
.td-feature{
position:relative;
min-height:325px;
padding:20px;
overflow:hidden;
display:flex;
flex-direction:column;
color:#fff;
background:
radial-gradient(
circle at 15% 10%,
rgba(73,202,255,.23),
transparent 32%
),
linear-gradient(
145deg,
#28246d,
#38247d 48%,
#6928ba
);
border-radius:21px;
box-shadow:0 16px 42px rgba(41,37,111,.15);
}
.td-feature-badge{
width:max-content;
padding:6px 9px;
color:rgba(255,255,255,.8);
background:rgba(255,255,255,.07);
border:1px solid rgba(255,255,255,.12);
border-radius:20px;
font-size:6px;
letter-spacing:1px;
}
.td-feature-phone{
width:80px;
height:80px;
margin:24px auto;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.09);
border-radius:24px;
transform:rotate(-5deg);
}
.td-feature-phone svg{
width:39px;
height:39px;
fill:none;
stroke:currentColor;
stroke-width:1.4;
}
.td-feature-bottom{
margin-top:auto;
}
.td-feature-bottom small{
color:#69d9ff;
font-size:6px;
letter-spacing:1.5px;
}
.td-feature-bottom h4{
margin:6px 0;
color:#fff;
font-size:16px;
line-height:1.7;
}
.td-feature-bottom p{
margin:0 0 13px;
color:rgba(255,255,255,.58);
font-size:8px;
}
.td-feature-bottom a{
min-height:39px;
padding:0 12px;
display:flex;
align-items:center;
justify-content:center;
gap:7px;
color:var(--navy)!important;
background:#fff;
border-radius:10px;
text-decoration:none!important;
font-size:9px;
font-weight:800;
}
/* ==========================================================
TABLET
========================================================== */
@media(min-width:769px) and (max-width:1050px){
.tdmega{
width:96vw;
grid-template-columns:225px 1fr;
}
.td-columns{
grid-template-columns:repeat(3,1fr);
}
.td-feature{
display:none;
}
}
/* ==========================================================
MOBILE
کاملاً جدا از Desktop Hover
========================================================== */
@media(max-width:768px){
body.td-mobile-menu-open{
overflow:hidden;
}
/* Only while the mobile drawer is open, lift the nav above the header. */
body.td-mobile-menu-open .techdr-header-nav{
z-index:200000 !important;
}
.tdnav{
z-index:1000;
}
.tdnav-inner{
width:94%;
height:60px;
gap:2px;
overflow-x:auto;
scrollbar-width:none;
}
.tdnav-inner::-webkit-scrollbar{
display:none;
}
.tdnav-link{
min-height:42px;
padding:0 12px;
white-space:nowrap;
font-size:11px;
}
.tdnav-shop-trigger{
flex-shrink:0;
}
.tdnav-shop-link{
padding-right:14px;
padding-left:5px;
}
.tdnav-shop-toggle{
width:34px;
height:42px;
}
/*
* در موبایل hover bridge لازم نیست.
*/
.tdnav-shop-trigger:after,
.tdmega:before{
display:none!important;
}
/*
* Mobile Mega Menu = Panel
*/
.tdmega{
position:fixed;
top:0;
right:0;
bottom:0;
width:min(92vw,420px);
height:100dvh;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
background:#f8f9fc;
border:0;
border-radius:24px 0 0 24px;
box-shadow:-20px 0 60px rgba(24,30,55,.18);
opacity:1;
visibility:visible;
pointer-events:none;
transform:translateX(105%);
transition:transform .32s cubic-bezier(.22,.8,.3,1);
z-index:2000;
}
.tdnav-shop.is-open .tdmega{
pointer-events:auto;
transform:translateX(0);
}
/*
* Mobile Header
*/
.tdmega-mobile-head{
height:72px;
flex:0 0 72px;
padding:0 18px;
display:flex;
align-items:center;
justify-content:space-between;
color:#fff;
background:
linear-gradient(
135deg,
var(--navy),
#48258d
);
}
.tdmega-mobile-head strong{
display:block;
font-size:14px;
}
.tdmega-mobile-head small{
display:block;
margin-top:3px;
color:rgba(255,255,255,.58);
font-size:8px;
}
.tdmega-close{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
color:#fff;
background:rgba(255,255,255,.1);
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
font-size:25px;
line-height:1;
cursor:pointer;
}
/*
* Categories become horizontal cards
*/
.tdmega-side{
flex:0 0 auto;
padding:12px;
display:flex;
gap:8px;
overflow-x:auto;
background:#fff;
border:0;
border-bottom:1px solid #eceff4;
scrollbar-width:none;
}
.tdmega-side::-webkit-scrollbar{
display:none;
}
.tdmega-side-title{
display:none;
}
.tdmega-cat{
width:88px;
min-width:88px;
min-height:82px;
margin:0;
padding:9px 6px;
flex-direction:column;
justify-content:center;
gap:6px;
background:#f7f9fc;
border:1px solid #edf0f4;
border-radius:15px;
text-align:center;
transform:none!important;
}
.tdmega-cat:before{
top:auto;
right:50%;
bottom:0;
width:0;
height:3px!important;
transform:translateX(50%);
background:linear-gradient(90deg,var(--blue),var(--purple));
}
.tdmega-cat.active{
background:#fff;
border-color:#e4e8ef;
box-shadow:0 7px 20px rgba(30,36,70,.07);
}
.tdmega-cat.active:before{
width:36px;
}
.td-cat-icon{
width:35px;
height:35px;
flex:0 0 35px;
border-radius:10px;
}
.td-cat-icon svg{
width:17px;
height:17px;
}
.td-cat-text{
flex:none;
width:100%;
}
.td-cat-text strong{
overflow:hidden;
display:block;
font-size:8px;
white-space:nowrap;
text-overflow:ellipsis;
}
.td-cat-text small,
.td-arrow{
display:none;
}
/*
* Content
*/
.tdmega-content{
flex:1;
padding:16px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
.td-panel-header{
min-height:auto;
margin-bottom:14px;
padding-bottom:13px;
}
.td-panel-header h3{
font-size:17px;
}
.td-panel-header p{
font-size:8px;
}
.td-panel-header > a{
display:none;
}
/*
* Mobile = one column.
* خوانایی خیلی بهتر از 2 ستون
*/
.td-columns,
.td-columns.td-three{
display:block;
}
.td-column{
margin-bottom:12px;
padding:13px;
background:#fff;
border:1px solid #edf0f4;
border-radius:17px;
box-shadow:0 5px 18px rgba(30,36,70,.035);
}
.td-column:after{
display:none!important;
}
.td-column-title{
min-height:43px;
margin-bottom:5px;
padding-bottom:8px;
border-bottom:1px solid #f0f2f5;
}
.td-brand{
width:36px;
height:36px;
flex-basis:36px;
border-radius:10px;
}
.td-brand svg{
width:18px;
height:18px;
}
.td-column-title strong{
font-size:10px;
}
.td-column > a{
min-height:45px;
margin:2px 0;
padding:6px 5px;
font-size:10px;
border-radius:10px;
}
/*
* در موبایل hover animation نمیخواهیم.
*/
.td-column > a:hover{
transform:none;
box-shadow:none;
}
.td-sub-icon{
width:31px;
height:31px;
flex-basis:31px;
border-radius:9px;
}
.td-sub-icon svg{
width:15px;
height:15px;
}
/*
* Feature card mobile
*/
.td-feature{
min-height:180px;
margin-top:10px;
padding:17px;
border-radius:17px;
}
.td-feature-phone{
width:55px;
height:55px;
margin:13px auto;
}
.td-feature-phone svg{
width:27px;
height:27px;
}
.td-feature-bottom h4{
font-size:14px;
}
}
/* ==========================================================
VERY SMALL PHONES
========================================================== */
@media(max-width:380px){
.tdnav-link{
padding:0 9px;
font-size:10px;
}
.tdmega{
width:95vw;
}
.tdmega-content{
padding:12px;
}
.tdmega-cat{
min-width:80px;
width:80px;
}
}