/* ============================================================= NAVBAR.CSS — Announcement bar, sticky nav, mega menu, mobile ============================================================= */ /* announcement bar */ /* The #app-navbar wrapper must not establish a containing block, otherwise the sticky .nav would be trapped inside it (~100px tall) and un-stick after a tiny scroll. `display: contents` lets announce + nav flow in so the navbar stays pinned across the whole page. */ #app-navbar { display: contents; } .announce { height: var(--announce-h); background: var(--g-dark); color: #fff; display: flex; align-items: center; overflow: hidden; font-size: var(--fs-xs); } .announce .marquee { display: flex; white-space: nowrap; animation: marquee 26s linear infinite; } .announce .marquee span { padding: 0 40px; letter-spacing: .04em; font-weight: var(--fw-medium); } .announce:hover .marquee { animation-play-state: paused; } /* navbar shell */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(255,255,255,.92); backdrop-filter: blur(16px); border-bottom: 1px solid var(--c-border); transition: box-shadow var(--t-base), height var(--t-base); } .nav.scrolled { box-shadow: var(--sh-md); } .nav-inner { height: var(--nav-h); display: flex; align-items: center; gap: var(--s-6); } .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: var(--fw-black); font-size: 1.6rem; letter-spacing: -.04em; color: var(--c-text-strong); flex-shrink: 0; } .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--c-primary); margin-top: 14px; } .brand b { background: var(--g-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } /* primary links + mega menu */ .nav-links { display: flex; align-items: center; gap: 2px; height: 100%; } .nav-link { height: 100%; display: flex; align-items: center; padding: 0 16px; font-weight: var(--fw-bold); font-size: var(--fs-sm); letter-spacing: .02em; text-transform: uppercase; color: var(--c-text-strong); position: relative; } .nav-link::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 3px; background: var(--c-primary); border-radius: var(--r-pill); transform: scaleX(0); transform-origin: left; transition: transform var(--t-base) var(--ease-out); } .nav-link:hover { color: var(--c-primary); } .nav-link.women:hover { color: var(--c-primary); } .nav-link.men:hover { color: var(--c-info); } .nav-item:hover .nav-link::after { transform: scaleX(1); } .nav-item { height: 100%; display: flex; align-items: center; } .mega { position: fixed; left: 0; right: 0; top: calc(var(--announce-h) + var(--nav-h)); background: #fff; box-shadow: var(--sh-lg); border-top: 1px solid var(--c-border); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base); z-index: var(--z-nav); } .nav-item:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); } .mega-inner { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: var(--s-7); padding: var(--s-7) var(--s-6); max-width: var(--container); margin-inline: auto; } .mega-col h4 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--c-primary); margin-bottom: var(--s-3); } .mega-col a { display: block; padding: 6px 0; color: var(--c-text-soft); font-size: var(--fs-base); transition: color var(--t-fast), transform var(--t-fast); } .mega-col a:hover { color: var(--c-primary); transform: translateX(4px); } .mega-promo { border-radius: var(--r-lg); overflow: hidden; position: relative; min-height: 220px; background: var(--g-vibe); display: flex; align-items: flex-end; padding: var(--s-5); color: #fff; } .mega-promo h5 { color: #fff; font-size: var(--fs-lg); } /* search */ .nav-search { flex: 1; max-width: 520px; position: relative; } .nav-search .input { background: var(--c-bg-soft); border-color: transparent; padding-left: 44px; height: 46px; border-radius: var(--r-sm); } .nav-search .input:focus { background: #fff; } .nav-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--c-muted); pointer-events: none; } .search-pop { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border-radius: var(--r-md); box-shadow: var(--sh-lg); border: 1px solid var(--c-border); padding: var(--s-4); opacity: 0; visibility: hidden; transform: translateY(8px); transition: all var(--t-base); z-index: var(--z-nav); max-height: 70vh; overflow: auto; } .search-pop.open { opacity: 1; visibility: visible; transform: translateY(0); } .search-pop h6 { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--c-muted); margin: 10px 4px; } .search-row { display: flex; align-items: center; gap: 12px; padding: 9px 8px; border-radius: var(--r-sm); cursor: pointer; } .search-row:hover, .search-row.active { background: var(--c-bg-soft); } .search-row svg { width: 16px; height: 16px; color: var(--c-muted); } .search-row b { color: var(--c-primary); } /* nav actions */ .nav-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .nav-action { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 12px; position: relative; color: var(--c-text-strong); } .nav-action span { font-size: var(--fs-2xs); font-weight: var(--fw-bold); } .nav-action:hover { color: var(--c-primary); } .nav-action svg { width: 22px; height: 22px; } .hamburger { display: none; } /* mobile bottom nav */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: var(--bottomnav-h); background: #fff; border-top: 1px solid var(--c-border); box-shadow: 0 -6px 20px rgba(20,16,26,.06); display: none; z-index: var(--z-nav); padding-bottom: env(safe-area-inset-bottom); } .bottom-nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--c-text-soft); font-size: 10px; font-weight: var(--fw-semibold); position: relative; transition: color var(--t-fast); } .bottom-nav a svg { width: 22px; height: 22px; } .bottom-nav a.active { color: var(--c-primary); } .bottom-nav a.active::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 0 0 var(--r-pill) var(--r-pill); background: var(--c-primary); } .bottom-nav .count-bubble { top: 6px; right: 50%; margin-right: -22px; } /* mobile slide menu */ .m-menu { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 86vw); background: #fff; z-index: var(--z-drawer); transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out); display: flex; flex-direction: column; box-shadow: var(--sh-xl); } .m-menu.open { transform: translateX(0); } .m-menu-head { padding: var(--s-5); background: var(--g-primary); color: #fff; } .m-menu-body { flex: 1; overflow: auto; padding: var(--s-4); } .m-menu-body a { display: flex; align-items: center; justify-content: space-between; padding: 14px 12px; font-weight: var(--fw-semibold); border-radius: var(--r-sm); } .m-menu-body a:hover { background: var(--c-bg-soft); color: var(--c-primary); }