/** * Phase 8 / 28 — Mobile fluid slide-out navigation. * On mobile, JS parks #ar-primary-nav under (.ar-nav--drawer) * so fixed positioning is never trapped by the sticky header. */ .ar-nav-overlay { position: fixed; inset: 0; z-index: 1200; background: rgba(40, 8, 28, 0.48); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .ar-nav-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; } /* Hamburger → X morph */ .ar-nav-toggle { position: relative; z-index: 1240; display: none; flex-direction: column; justify-content: center; flex-shrink: 0; gap: 0; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid rgba(161, 34, 115, 0.22); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); cursor: pointer; transition: border-color 0.35s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ar-nav-toggle:hover, .ar-nav-toggle:focus-visible { border-color: rgba(161, 34, 115, 0.55); box-shadow: 0 0 0 3px rgba(161, 34, 115, 0.14); } .ar-nav-toggle__bar { position: absolute; left: 0.65rem; right: 0.65rem; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #A12273, #A12273); transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.45s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s ease; } .ar-nav-toggle__bar:nth-child(1) { top: calc(50% - 7px); } .ar-nav-toggle__bar:nth-child(2) { top: 50%; transform: translateY(-50%); } .ar-nav-toggle__bar:nth-child(3) { top: calc(50% + 5px); } .ar-nav-toggle[aria-expanded="true"] { border-color: rgba(160, 32, 112, 0.45); background: rgba(161, 34, 115, 0.08); } .ar-nav-toggle[aria-expanded="true"] .ar-nav-toggle__bar { background: linear-gradient(90deg, #A12273, #A12273); } .ar-nav-toggle[aria-expanded="true"] .ar-nav-toggle__bar:nth-child(1) { top: 50%; transform: translateY(-50%) rotate(45deg); } .ar-nav-toggle[aria-expanded="true"] .ar-nav-toggle__bar:nth-child(2) { opacity: 0; transform: translateY(-50%) scaleX(0); } .ar-nav-toggle[aria-expanded="true"] .ar-nav-toggle__bar:nth-child(3) { top: 50%; transform: translateY(-50%) rotate(-45deg); } /* Slide-out drawer (mobile only) */ @media (max-width: 991px) { .ar-nav-toggle { display: inline-flex; } .ar-header--glass.is-nav-open, body.ar-nav-open .ar-header--glass { z-index: 1210; } .ar-nav.ar-nav--drawer { position: fixed; top: 0; bottom: 0; inset-inline-start: 0; inset-inline-end: auto; z-index: 1220; width: min(22rem, 88vw); max-width: 100%; height: 100dvh; max-height: 100dvh; margin: 0; padding: 5.5rem 1.25rem 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; background: radial-gradient(ellipse 80% 40% at 100% 0%, rgba(161, 34, 115, 0.16) 0%, transparent 55%), linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 243, 248, 0.99) 100%); border-inline-end: 1px solid rgba(161, 34, 115, 0.12); box-shadow: 12px 0 48px rgba(61, 13, 40, 0.14); transform: translate3d(-105%, 0, 0); visibility: hidden; pointer-events: none; transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1); overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } html[dir="rtl"] .ar-nav.ar-nav--drawer { transform: translate3d(105%, 0, 0); border-inline-end: 0; border-inline-start: 1px solid rgba(161, 34, 115, 0.12); box-shadow: -12px 0 48px rgba(61, 13, 40, 0.14); } body.ar-nav-open .ar-nav.ar-nav--drawer, .ar-nav.ar-nav--drawer.is-open { transform: translate3d(0, 0, 0); visibility: visible; pointer-events: auto; } .ar-nav.ar-nav--drawer .ar-nav__list { display: flex; flex-direction: column; align-items: stretch; gap: 0.2rem; width: 100%; margin: 0; padding: 0; list-style: none; } .ar-nav.ar-nav--drawer .ar-nav__list > li { opacity: 0; transform: translateX(-0.75rem); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1), transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease; transition-delay: 0s; } html[dir="rtl"] .ar-nav.ar-nav--drawer .ar-nav__list > li { transform: translateX(0.75rem); } body.ar-nav-open .ar-nav.ar-nav--drawer .ar-nav__list > li, .ar-nav.ar-nav--drawer.is-open .ar-nav__list > li { opacity: 1; transform: translateX(0); transition-delay: calc(0.06s * var(--ar-i, 0) + 0.12s); } .ar-nav.ar-nav--drawer .ar-nav__list > li > a { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 0.95rem 0.85rem; color: var(--ar-color-text, #2a0a3d); font-size: 1.05rem; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(161, 34, 115, 0.08); border-radius: 0; transition: color 0.3s ease, background 0.3s ease, padding-inline-start 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ar-nav.ar-nav--drawer .ar-nav__list > li > a::before { content: ""; position: absolute; inset-block: 0.35rem; inset-inline-start: 0; width: 3px; border-radius: 2px; background: linear-gradient(180deg, #A12273, #A12273); transform: scaleY(0); transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .ar-nav.ar-nav--drawer .ar-nav__list > li > a::after { display: none; } .ar-nav.ar-nav--drawer .ar-nav__list > li > a:hover, .ar-nav.ar-nav--drawer .ar-nav__list > li > a:focus-visible, .ar-nav.ar-nav--drawer .ar-nav__list > .current-menu-item > a { color: #A12273; background: rgba(161, 34, 115, 0.06); padding-inline-start: 1.1rem; } .ar-nav.ar-nav--drawer .ar-nav__list > li > a:hover::before, .ar-nav.ar-nav--drawer .ar-nav__list > li > a:focus-visible::before, .ar-nav.ar-nav--drawer .ar-nav__list > .current-menu-item > a::before { transform: scaleY(1); } .ar-nav.ar-nav--drawer .ar-nav__list > .menu-item-has-children { position: relative; } .ar-nav.ar-nav--drawer .ar-nav__list > .menu-item-has-children > a { padding-inline-end: 2.75rem; } .ar-nav.ar-nav--drawer .ar-nav__flyout-toggle { position: absolute; inset-block: 0.55rem; inset-inline-end: 0.35rem; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.65rem; background: rgba(161, 34, 115, 0.08); color: #A12273; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; } .ar-nav.ar-nav--drawer .ar-nav__flyout-toggle::before { content: ""; width: 0.45rem; height: 0.45rem; border-inline-end: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-1px); transition: transform 0.25s ease; } .ar-nav.ar-nav--drawer .ar-nav__list > .menu-item-has-children.is-open > .ar-nav__flyout-toggle::before { transform: rotate(225deg) translateY(-1px); } .ar-nav.ar-nav--drawer .ar-nav__list .sub-menu { list-style: none; margin: 0.15rem 0 0.45rem; padding: 0.35rem; display: none; flex-direction: column; gap: 0.15rem; border-radius: 0.9rem; background: rgba(161, 34, 115, 0.05); border: 1px solid rgba(161, 34, 115, 0.08); } .ar-nav.ar-nav--drawer .ar-nav__list > .menu-item-has-children.is-open > .sub-menu { display: flex; } .ar-nav.ar-nav--drawer .ar-nav__list .sub-menu a { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.9rem; font-size: 0.95rem; font-weight: 600; color: var(--ar-color-text-muted, #5c3a6e); text-decoration: none; border-radius: 0.7rem; border-bottom: 0; } .ar-nav.ar-nav--drawer .ar-nav__list .sub-menu a::before { content: ""; width: 0.35rem; height: 0.35rem; border-radius: 50%; background: #A12273; box-shadow: 0 0 0 3px rgba(161, 34, 115, 0.12); } .ar-nav.ar-nav--drawer .ar-nav__list .sub-menu a:hover, .ar-nav.ar-nav--drawer .ar-nav__list .sub-menu a:focus-visible { color: #A12273; background: rgba(161, 34, 115, 0.08); } .ar-nav-drawer-cta { display: flex; flex-direction: column; gap: 0.65rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid rgba(161, 34, 115, 0.1); opacity: 0; transform: translateY(0.5rem); transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; } body.ar-nav-open .ar-nav-drawer-cta, .ar-nav.ar-nav--drawer.is-open .ar-nav-drawer-cta { opacity: 1; transform: translateY(0); } .ar-nav-drawer-cta .ar-btn { width: 100%; justify-content: center; } .ar-nav-drawer-cta .ar-btn--portal { min-height: 3rem; font-size: 0.95rem; color: #fff !important; } .ar-nav-drawer-cta .ar-btn--portal:hover, .ar-nav-drawer-cta .ar-btn--portal:focus-visible { color: #fff !important; } body.ar-nav-locked { overflow: hidden; touch-action: none; } .ar-header__actions { gap: 0.35rem; } .ar-search-trigger { width: 2.5rem; height: 2.5rem; } .ar-header--glass .ar-brand--logo .custom-logo { height: 2.25rem; max-width: min(148px, 38vw); } /* Shop pill inside parked mobile drawer */ .ar-nav.ar-nav--drawer .ar-nav__list > .ar-nav-shop-pill > a { border-radius: 30px !important; margin-top: 0.35rem; background: linear-gradient(135deg, #A12273, #A12273) !important; color: #faf9fc !important; border: 1px solid rgba(201, 162, 39, 0.4); justify-content: center; } .ar-nav.ar-nav--drawer .ar-nav__list > .ar-nav-shop-pill > a::before, .ar-nav.ar-nav--drawer .ar-nav__list > .ar-nav-shop-pill > a::after { display: none !important; } } @media (min-width: 992px) { .ar-nav-overlay, .ar-nav-drawer-cta, .ar-nav__flyout-toggle { display: none !important; } .ar-nav-toggle { display: none !important; } } @media (prefers-reduced-motion: reduce) { .ar-nav-overlay, .ar-nav.ar-nav--drawer, .ar-nav.ar-nav--drawer .ar-nav__list > li, .ar-nav-toggle__bar, .ar-nav-drawer-cta { transition-duration: 0.01ms !important; } }