/* ========================================================= V0 NAV SELECTION — v10 (Zero Blink, Full 3D Selection Effect) - Parent item gets full 3D glossy selection effect via CSS :has() - Sub item gets full 3D glossy selection effect - Zero blinking, ultra-fast 0.12s menu open performance ========================================================= */ .t-TreeNav a[aria-current="page"]::before, .t-TreeNav .a-TreeView-content.is-current::before, .t-TreeNav .a-TreeView-content.is-focused::before { content: none !important; display: none !important; } .t-TreeNav .a-TreeView-toggle { display: none !important; } .t-TreeNav .a-TreeView-node--topLevel > ul.a-TreeView-nodeList, .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-nodeList { position: relative !important; margin: 3px 0 6px 0 !important; padding: 0 !important; border-left: none !important; width: 100% !important; box-sizing: border-box !important; transition: opacity 0.1s ease !important; } .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > ul.a-TreeView-nodeList, .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-nodeList { border-left: none !important; } .t-TreeNav .a-TreeView-node--topLevel > ul.a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before, .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-nodeList > .a-TreeView-node > .a-TreeView-content::before { display: none !important; content: none !important; } .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content { border: 1.5px solid #e2e8f0 !important; border-radius: 14px !important; background: #ffffff !important; box-shadow: none !important; font-weight: 500 !important; min-height: 42px !important; display: flex !important; align-items: center !important; transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease !important; margin-bottom: 4px !important; } /* Active parent — Medium soft downward shade effect (subtle parent indicator) */ .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content, .t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content, .t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) > .a-TreeView-content { background: linear-gradient(180deg, #ffffff 0%, #eff6ff 60%, #dbeafe 100%) !important; border: 1.5px solid #93c5fd !important; border-bottom-color: #60a5fa !important; border-radius: 14px !important; color: #1e40af !important; box-shadow: 0 3px 6px rgba(59, 130, 246, 0.10), 0 1.5px 0 #93c5fd !important; transition: none !important; } /* Active parent label */ .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active .a-TreeView-label, .t-TreeNav .a-TreeView-node--topLevel:has(.is-current) .a-TreeView-label, .t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) .a-TreeView-label { color: #1e40af !important; font-weight: 650 !important; } /* Active parent — hover state */ .t-TreeNav .a-TreeView-node--topLevel.v0-parent-active > .a-TreeView-content:hover, .t-TreeNav .a-TreeView-node--topLevel:has(.is-current) > .a-TreeView-content:hover, .t-TreeNav .a-TreeView-node--topLevel:has(a[aria-current="page"]) > .a-TreeView-content:hover { background: linear-gradient(180deg, #ffffff 0%, #e0eeff 60%, #bfdbfe 100%) !important; border-color: #60a5fa !important; box-shadow: 0 3px 8px rgba(59, 130, 246, 0.15), 0 1.5px 0 #3b82f6 !important; } /* Idle main item hover */ .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content:hover { background: #f0f7ff !important; border-color: #93c5fd !important; box-shadow: 0 2px 6px rgba(59, 130, 246, 0.10) !important; } .t-TreeNav .a-TreeView-node--topLevel > .a-TreeView-content:hover .a-TreeView-label { color: #1e40af !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) { width: calc(100% - 20px) !important; margin-left: 20px !important; box-sizing: border-box !important; padding: 0 !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content { position: relative !important; width: 100% !important; box-sizing: border-box !important; border: 1.5px solid #cbd5e1 !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03) !important; padding: 7px 12px 7px 34px !important; margin-bottom: 5px !important; min-height: 38px !important; display: flex !important; align-items: center !important; transition: background 0.12s ease, border-color 0.12s ease !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) .a-TreeView-label { font-size: 13.5px !important; font-weight: 550 !important; color: #334155 !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content::after { display: block !important; content: "" !important; position: absolute !important; left: 14px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #94a3b8 !important; opacity: 0.85 !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current > .a-TreeView-content, .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current { background: linear-gradient(180deg, #ffffff 0%, #dbeafe 50%, #bfdbfe 100%) !important; border: 1.5px solid #60a5fa !important; border-top-color: #93c5fd !important; border-bottom-color: #3b82f6 !important; border-radius: 12px !important; color: #1e3a8a !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(59, 130, 246, 0.35), 0 3px 6px rgba(37, 99, 235, 0.15), 0 3px 0 #3b82f6 !important; padding-left: 36px !important; padding-right: 12px !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current .a-TreeView-label, .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current .a-TreeView-label { font-size: 14px !important; font-weight: 700 !important; color: #1e3a8a !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current > .a-TreeView-content::after, .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current::after { display: block !important; content: "" !important; position: absolute !important; left: 14px !important; right: auto !important; top: 50% !important; transform: translateY(-50%) !important; width: 9px !important; height: 9px !important; border-radius: 50% !important; background: #ffffff !important; box-shadow: 0 0 0 2.5px rgba(59, 130, 246, 0.6), 0 1px 3px rgba(15, 23, 42, 0.25) !important; opacity: 1 !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel).is-current > .a-TreeView-content:hover, .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel) > .a-TreeView-content.is-current:hover { background: linear-gradient(180deg, #ffffff 0%, #c7d2fe 50%, #93c5fd 100%) !important; border-color: #3b82f6 !important; border-bottom-color: #2563eb !important; box-shadow: inset 0 1px 0 #ffffff, inset 0 -2px 0 rgba(37, 99, 235, 0.4), 0 4px 8px rgba(37, 99, 235, 0.2), 0 3px 0 #2563eb !important; } .t-TreeNav .a-TreeView-node:not(.a-TreeView-node--topLevel):not(.is-current) > .a-TreeView-content:hover { background: #f1f5f9 !important; border-color: #94a3b8 !important; }