/* * ============================================================ * EivanShop Desktop Mega Menu * ============================================================ * * Root: * menu-item-139653 = صوتی و تصویری * * Default: * menu-item-139654 = یخچال فریزر * * Selected state: * .eivan-active * * ============================================================ */ @media (min-width: 1024px) { /* ======================================================== MAIN MENU ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) { --eivan-primary: #c5986c; --eivan-text: #292b30; --eivan-muted: #70747b; --eivan-hover: rgba( 238, 240, 243, 0.82 ); --eivan-active: rgba( 255, 255, 255, 0.78 ); --eivan-icon: #92969d; --eivan-icon-hover: #60656d; --eivan-icon-active: #c5986c; --eivan-rail-width: 252px; direction: rtl; box-sizing: border-box !important; width: min( 1240px, calc(100vw - 64px) ) !important; max-width: none !important; min-height: 540px !important; max-height: calc(100vh - 130px); padding: 12px !important; margin: 0 !important; /* * ==================================================== * ONE CONTINUOUS GLASS SURFACE * ==================================================== * * Previously the left and right panels had separate * backgrounds. That is what kept producing the visible * seam/divider. * * Now the entire mega menu is one glass surface. */ background: rgba( 255, 255, 255, 0.91 ) !important; background-image: none !important; -webkit-backdrop-filter: blur(14px) saturate(110%); backdrop-filter: blur(14px) saturate(110%); border: 1px solid rgba( 228, 230, 234, 0.75 ) !important; border-radius: 18px !important; box-shadow: 0 18px 55px rgba( 18, 25, 38, 0.10 ), 0 3px 12px rgba( 18, 25, 38, 0.04 ) !important; overflow: hidden !important; isolation: isolate; transition-delay: 0s !important; animation-delay: 0s !important; } /* ======================================================== RIGHT RAIL BACKGROUND ======================================================== */ /* * The rail is only a translucent tint laid over the same * glass surface. * * No border. * No divider. * No separate panel edge. */ ul.sub-menu:has(> li.level-1.menu-item-139653)::before { content: "" !important; position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: var(--eivan-rail-width) !important; background: rgba( 247, 248, 250, 0.72 ) !important; border: 0 !important; outline: 0 !important; box-shadow: none !important; pointer-events: none; z-index: 0; } ul.sub-menu:has(> li.level-1.menu-item-139653)::after { content: none !important; display: none !important; } /* ======================================================== LEVEL 1 CATEGORY ROW ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 { /* * MUST stay static because the submenu content is * absolutely positioned relative to the mega-menu. */ position: static !important; display: block !important; float: none !important; width: calc( var(--eivan-rail-width) - 24px ) !important; max-width: calc( var(--eivan-rail-width) - 24px ) !important; height: auto !important; /* * NO external margin. * * This means there are no dead hover gaps between * category rows. */ margin: 0 !important; /* * Visual breathing room lives inside the LI itself, * which remains hoverable. */ padding: 1px 0 !important; border: 0 !important; background: transparent !important; } /* ======================================================== LEVEL 1 LINK ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > a { position: relative; z-index: 3; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 44px !important; box-sizing: border-box; padding: 0 14px 0 17px !important; margin: 0 !important; gap: 9px; color: var(--eivan-text) !important; font-size: 14.5px !important; font-weight: 500 !important; line-height: 1.45 !important; background: transparent !important; border: 0 !important; border-radius: 10px !important; box-shadow: none !important; transition: color 130ms ease, background-color 130ms ease, box-shadow 130ms ease; } /* ======================================================== REMOVE DIGILAND LEVEL-1 ARROW ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > a > .el_arrow { display: none !important; } /* ======================================================== CATEGORY ICON BASE ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > a::before { content: ""; display: block; flex: 0 0 22.5px; width: 22.5px; height: 22.5px; background-color: var(--eivan-icon); mask-repeat: no-repeat; mask-position: center; mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; -webkit-mask-size: contain; transition: background-color 130ms ease, transform 130ms ease; } /* یخچال فریزر */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139654 > a::before { mask-image: url("../icons/refrigerator.svg"); -webkit-mask-image: url("../icons/refrigerator.svg"); } /* صوتی و تصویری */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139653 > a::before { mask-image: url("../icons/tv-audio.svg"); -webkit-mask-image: url("../icons/tv-audio.svg"); } /* خردکن و غذاساز */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139657 > a::before { mask-image: url("../icons/food-processor.svg"); -webkit-mask-image: url("../icons/food-processor.svg"); } /* شستشو و نظافت */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139656 > a::before { mask-image: url("../icons/washing.svg"); -webkit-mask-image: url("../icons/washing.svg"); } /* لوازم پخت و پز */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139658 > a::before { mask-image: url("../icons/cooking.svg"); -webkit-mask-image: url("../icons/cooking.svg"); } /* سرو و پذیرایی */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-227068 > a::before { mask-image: url("../icons/serving.svg"); -webkit-mask-image: url("../icons/serving.svg"); } /* تهویه، سرمایش و گرمایش */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139655 > a::before { mask-image: url("../icons/air-treatment.svg"); -webkit-mask-image: url("../icons/air-treatment.svg"); } /* نوشیدنی ساز */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139752 > a::before { mask-image: url("../icons/drink-maker.svg"); -webkit-mask-image: url("../icons/drink-maker.svg"); } /* لوازم توکار */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139753 > a::before { mask-image: url("../icons/built-in.svg"); -webkit-mask-image: url("../icons/built-in.svg"); } /* مبلمان */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-227293 > a::before { mask-image: url("../icons/furniture.svg"); -webkit-mask-image: url("../icons/furniture.svg"); } /* فرش */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-233110 > a::before { mask-image: url("../icons/carpet.svg"); -webkit-mask-image: url("../icons/carpet.svg"); } /* اتو */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.menu-item-139660 > a::before { mask-image: url("../icons/iron.svg"); -webkit-mask-image: url("../icons/iron.svg"); } /* ======================================================== NORMAL HOVER ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1:not(.eivan-active) > a:hover { color: #17191d !important; background: var(--eivan-hover) !important; } ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1:not(.eivan-active) > a:hover::before { background-color: var(--eivan-icon-hover); } /* ======================================================== ACTIVE CATEGORY ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1.eivan-active > a { color: #17191d !important; font-weight: 600 !important; background: var(--eivan-active) !important; box-shadow: 0 1px 3px rgba( 20, 25, 35, 0.035 ), 0 4px 12px rgba( 20, 25, 35, 0.035 ) !important; } ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1.eivan-active > a::before { background-color: var(--eivan-icon-active); transform: scale(1.05); } ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1.eivan-active > a::after { content: ""; position: absolute; right: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 5px; background: var(--eivan-primary); } /* ======================================================== FIRST-PAINT DEFAULT CATEGORY ======================================================== */ /* * Before JavaScript creates .eivan-active, Refrigerator * looks selected. */ ul.sub-menu:has(> li.level-1.menu-item-139653):not( :has(> li.eivan-active) ) > li.menu-item-139654 > a { color: #17191d !important; font-weight: 600 !important; background: var(--eivan-active) !important; } ul.sub-menu:has(> li.level-1.menu-item-139653):not( :has(> li.eivan-active) ) > li.menu-item-139654 > a::before { background-color: var(--eivan-icon-active); } /* ======================================================== LEVEL-1 CONTENT PANEL ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu { position: absolute !important; z-index: 1; top: 0 !important; bottom: 0 !important; /* * Exactly meets the rail. * * No border. * No gradient edge. * No separate background. */ right: var(--eivan-rail-width) !important; left: 0 !important; width: auto !important; height: auto !important; box-sizing: border-box !important; padding: 30px 36px !important; margin: 0 !important; /* * IMPORTANT: * * Completely transparent. * * The glass background now belongs to the parent menu, * so there is no panel edge capable of creating a * vertical divider. */ background: transparent !important; background-image: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border: 0 !important; border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important; border-left: 0 !important; outline: 0 !important; border-radius: 0 !important; box-shadow: none !important; /* * Masonry-like layout. */ column-count: 3; column-gap: 46px; column-fill: auto; overflow-x: hidden !important; overflow-y: auto !important; transition: none !important; transition-delay: 0s !important; animation: none !important; animation-delay: 0s !important; transform: none !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } /* * Kill Digiland decorative panel pseudo-elements. */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu::before, ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu::after { content: none !important; display: none !important; border: 0 !important; box-shadow: none !important; } /* ======================================================== PANEL VISIBILITY ======================================================== */ /* * Hide all panels first. */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu { display: none !important; } /* * Show exactly one selected panel. */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1.eivan-active > ul.sub-menu { display: block !important; } /* * FIRST PAINT: * * Before JavaScript runs at all, Refrigerator is visible. */ ul.sub-menu:has(> li.level-1.menu-item-139653):not( :has(> li.eivan-active) ) > li.menu-item-139654 > ul.sub-menu { display: block !important; } /* ======================================================== LEVEL 2 GROUP ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu > li.level-2 { position: static !important; display: inline-block !important; float: none !important; width: 100% !important; min-width: 0 !important; height: auto !important; margin: 0 0 30px 0 !important; padding: 0 !important; vertical-align: top; break-inside: avoid; page-break-inside: avoid; -webkit-column-break-inside: avoid; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ======================================================== LEVEL 2 TITLE ======================================================== */ /* * No bullet. * No vertical bar. * No chip. * No border box. * * A real text underline is used, so its length follows * the actual title glyphs rather than the element box. */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu > li.level-2 > a { position: relative; display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #303238 !important; font-size: 14.5px !important; font-weight: 700 !important; line-height: 1.9 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; text-decoration-line: underline !important; text-decoration-color: rgba( 197, 152, 108, 0.65 ) !important; text-decoration-thickness: 1.5px !important; text-underline-offset: 6px !important; text-decoration-skip-ink: auto; } /* * Space after the title before its links. */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu > li.level-2 > ul.sub-menu { margin-top: 12px !important; } /* * Remove every old Digiland title decoration. */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu > li.level-2 > a::before, ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu > li.level-2 > a::after { content: none !important; display: none !important; } /* ======================================================== REMOVE LEVEL-2 ARROWS ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) .level-2 > a > .el_arrow { display: none !important; } /* ======================================================== LEVEL 3 CONTAINER ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) .level-2 > ul.sub-menu { position: static !important; display: block !important; width: 100% !important; height: auto !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; pointer-events: auto !important; background: transparent !important; background-image: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transition: none !important; animation: none !important; } /* ======================================================== LEVEL 3 ITEM ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) li.level-3 { position: static !important; display: block !important; float: none !important; width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent !important; border: 0 !important; } /* ======================================================== LEVEL 3 LINK ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) li.level-3 > a { display: block !important; width: 100% !important; height: auto !important; box-sizing: border-box; padding: 5px 4px !important; margin: 0 !important; color: var(--eivan-muted) !important; font-size: 13.5px !important; font-weight: 400 !important; line-height: 1.7 !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; box-shadow: none !important; text-decoration: none !important; transition: color 120ms ease, background-color 120ms ease, padding-right 120ms ease; } /* ======================================================== LEVEL 3 HOVER ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) li.level-3 > a:hover { color: var(--eivan-primary) !important; background: rgba( 255, 255, 255, 0.40 ) !important; padding-right: 8px !important; } /* ======================================================== SCROLLBAR ======================================================== */ ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu::-webkit-scrollbar { width: 6px; } ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu::-webkit-scrollbar-track { background: transparent; } ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu::-webkit-scrollbar-thumb { background: rgba( 180, 185, 192, 0.55 ); border-radius: 20px; } ul.sub-menu:has(> li.level-1.menu-item-139653) > li.level-1 > ul.sub-menu::-webkit-scrollbar-thumb:hover { background: rgba( 155, 160, 168, 0.70 ); } }