/* ==== OPUS.Z shared navigation styles — extracted from musician-platform.html ==== */ /* ---- Block A: nav bar, colour modes, logo, responsive, drawer, sub-drawer ---- */ /* ── NAV ── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; min-height: 76px; /* keep same height as when orb was inside (18+40+18) */ background: transparent; mix-blend-mode: difference; /* No CSS transition — JS lerp handles the damping */ } nav.mega-open { mix-blend-mode: normal; } /* ── Nav colour modes — still used for hover-bubble style switching ── */ nav, nav.nav-on-dark { --nav-fg: #fff; } nav.nav-on-light { --nav-fg: #000; } /* When mega-menu is open: always white bg + black text */ nav.mega-open { background: #fff; transition: none; /* 立刻變白 — 才不會跟實體面板之間出現一條淡掉的接縫 */ --nav-fg: #000; } /* 退場：白底「撐住」不動，等面板整個收回去(0.62s)之後才在最後 0.18s 收掉， 所以從頭到尾看到的都是一塊完整的白，不會半透明。 */ nav.mega-open.mega-closing { background: transparent !important; transition: background 0.18s linear 0.62s !important; } /* Apply the colour var */ .nav-logo { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 700; text-decoration: none; color: #fff; padding-left: 50px; } .orb { width: 40px; height: 40px; background: url('assets/images/LOGO/opusz-logo-cropped.png') center/cover no-repeat; flex-shrink: 0; } #navOrbFixed { position: fixed; top: 18px; left: 40px; z-index: 201; /* above nav (200) — orb only, no blend mode so red stays red */ text-decoration: none; pointer-events: all; display: flex; align-items: center; } /* Logo TEXT: separate fixed element so mix-blend-mode blends at the stacking-context level */ #navLogoFixed { position: fixed; top: 30px; left: 90px; /* default: centres 17px text on 40px orb */ z-index: 201; mix-blend-mode: difference; color: #fff; font-size: 17px; font-weight: 700; text-decoration: none; pointer-events: all; display: flex; align-items: flex-start; line-height: 1; transition: top 0.38s cubic-bezier(0.34,1.15,0.64,1); } /* On hover: two 17px lines + 3px gap = 37px; centre at orb Y=38 → top ≈ 19px */ #navLogoFixed:hover { top: 19px; } .nav-logo-spacer { width: 180px; flex-shrink: 0; } /* ── Logo hover expand (OPUS.Z → + MUSIC) ── */ .nav-logo-text { display: flex; flex-direction: column; line-height: 1; } .nav-logo-name { display: block; } .nav-logo-sub { display: block; font-size: 17px; font-weight: 700; letter-spacing: 0; max-height: 0; overflow: hidden; opacity: 0; margin-top: 3px; transition: max-height 0.38s cubic-bezier(0.34, 1.15, 0.64, 1), opacity 0.22s ease 0.08s; } .nav-logo:hover .nav-logo-sub, #navLogoFixed:hover .nav-logo-sub { max-height: 20px; opacity: 1; } .nav-links { display: flex; gap: 10px; list-style: none; position: absolute; left: 0; right: 0; justify-content: center; pointer-events: none; } .nav-links li { pointer-events: all; } .nav-links a { text-decoration: none; font-size: 15px; font-weight: 300; letter-spacing: 0.04em; position: relative; padding: 11px 22px; border-radius: 50px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; vertical-align: middle; white-space: nowrap; z-index: 0; color: transparent; /* individual .nc-char spans carry the color */ } nav.mega-open .nav-links { mix-blend-mode: normal; } nav.mega-open .nav-links a { color: #000; } nav.mega-open .nav-links .nc-char { color: #000 !important; } /* Per-character color spans — JS sets color on each one individually */ .nc-char { display: inline-block; color: #fff; } .nc-sp { display: inline-block; min-width: 0.3em; /* preserve space width inside flex container */ } nav.mega-open .nc-char { color: #000 !important; transition: none; } /* Logo text inside nav: JS-controlled per-character */ nav .nav-logo-name, nav .nav-logo-sub { color: transparent; /* .nc-char children carry the color */ } /* Logo text chars: always #fff — mix-blend-mode:difference on #navLogoFixed handles inversion */ #navLogoFixed .nav-logo-name, #navLogoFixed .nav-logo-sub { color: #fff; } #navLogoFixed .nc-char { color: #fff; } nav.mega-open .nav-logo-name .nc-char, nav.mega-open .nav-logo-sub .nc-char { color: #000 !important; transition: none; } /* ── Responsive nav ── */ @media (max-width: 1440px) { nav { padding: 13px 28px; } .nav-links { gap: 4px; } .nav-links a { font-size: 13px; padding: 9px 14px; } } @media (max-width: 1200px) { nav { padding: 11px 24px; } .nav-links { gap: 2px; } .nav-links a { font-size: 12px; padding: 8px 11px; } } /* Bubble hover effect removed */ .nav-links a::before { display: none; } .nav-links a:hover { opacity: 1; } /* ── Underline hover: grows left→right on enter, shrinks right→left on leave ── */ .nav-ul { position: absolute; bottom: 3px; left: 10px; right: 10px; height: 1px; background: #fff; transform: scaleX(0); transform-origin: right center; transition: transform 0.55s cubic-bezier(0.65,0,0.35,1); pointer-events: none; } .nav-links a:hover .nav-ul { transform: scaleX(1); transform-origin: left center; } nav.mega-open .nav-links a:hover .nav-ul { background: #000; /* mega-open turns nav white so underline must be dark */ } /* Bubble on DARK background — frosted dark glass with white specular rim */ nav.nav-on-dark .nav-links a::before { background: radial-gradient(ellipse at 38% 22%, rgba(255,255,255,0.26) 0%, transparent 55%), radial-gradient(ellipse at 65% 80%, rgba(255,255,255,0.07) 0%, transparent 40%), rgba(255,255,255,0.07); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); border: 1px solid rgba(255,255,255,0.20); box-shadow: inset 0 1.5px 2px rgba(255,255,255,0.32), inset 0 -1px 2px rgba(0,0,0,0.55), inset 1px 0 3px -1px rgba(255,255,255,0.12), 0 6px 24px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35); } /* Bubble on LIGHT background — clear glass / crystal bubble */ nav.nav-on-light .nav-links a::before, nav.mega-open .nav-links a::before { background: radial-gradient(ellipse at 38% 22%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.50) 45%, transparent 72%), radial-gradient(ellipse at 68% 82%, rgba(255,255,255,0.55) 0%, transparent 42%), rgba(255,255,255,0.38); backdrop-filter: blur(12px) saturate(1.6); -webkit-backdrop-filter: blur(12px) saturate(1.6); border: 1px solid rgba(255,255,255,0.92); box-shadow: inset 0 2px 3px rgba(255,255,255,1), inset 0 -1px 2px rgba(0,0,0,0.07), inset 1.5px 0 4px -2px rgba(255,255,255,0.7), inset -1.5px 0 4px -2px rgba(255,255,255,0.5), 0 4px 18px rgba(0,0,0,0.09), 0 1px 3px rgba(0,0,0,0.06); } .hamburger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; position: relative; z-index: 301; } .hamburger span { display: block; width: 26px; height: 2px; background: var(--nav-fg); transition: opacity .2s; } .hamburger:hover span { opacity: .5; } /* ── Slide-in Nav Drawer ── */ /* Controls relocated into the drawer on mobile (favourites / account / language) */ #navDrawerExtra { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.10); } #navDrawerExtra .nav-fav-btn, #navDrawerExtra .nav-login-btn, #navDrawerExtra .nav-account-btn, #navDrawerExtra .lang-toggle { display: inline-flex !important; opacity: 1 !important; color: #111 !important; position: static !important; } #navDrawerExtra .nav-login-btn { border: 1px solid rgba(0,0,0,0.18); border-radius: 8px; padding: 7px 14px; } #navDrawerExtra .nav-login-btn .login-label { display: inline !important; } #navDrawerExtra .nav-login-btn .login-icon, #navDrawerExtra .nav-login-btn .login-chevron { display: none !important; } #navDrawerExtra .lang-toggle { gap: 4px; } @media (max-width: 900px){ /* Mobile nav: only logo + hamburger in the bar; rest moves into the drawer */ .nav-links { display: none; } .nav-logo { padding-left: 18px; } #navFavBadge { display: none !important; } /* Pull logo orb + OPUS.Z text toward the corner so the LEFT gap (18px) matches the TOP gap (18px). Text shifts by the same amount to keep its spacing from the orb. (Matches the homepage's own nav, which has identical fixed-logo overrides.) */ /* Shrink the whole logo 25% on phones. Both pieces scale about the SAME point (the orb's top-left at 18,18) so spacing + alignment stay perfect. Text origin = (18 - left, 18 - top) = (18-68, 18-30) = (-50px, -12px). */ #navOrbFixed { left: 18px; transform: scale(.75); transform-origin: top left; } #navLogoFixed { left: 68px; transform: scale(.75); transform-origin: -50px -12px; } } .nav-drawer { position: fixed; top: 0; right: -260px; bottom: 0; width: 260px; background: #fff; box-shadow: -12px 0 48px rgba(0,0,0,0.10); padding: 90px 40px 48px; display: flex; flex-direction: column; gap: 4px; transition: right 0.18s ease; z-index: 300; pointer-events: none; } .nav-drawer.nd-visible { right: 0; pointer-events: auto; transition: right 0.42s cubic-bezier(0.22,1,0.36,1); } .nav-drawer a { display: block; padding: 12px 0; font-size: 17px; font-weight: 500; color: var(--black); text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.06); } .nav-drawer a:last-child { border-bottom: none; } .nav-drawer a:hover { color: rgba(0,0,0,0.4); transition: color .15s ease; } /* Musicians sub-drawer trigger button (layout only; entrance handled below) */ .nd-musicians-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 0; font-size: 17px; font-weight: 500; color: var(--black); background: none; border: none; border-bottom: 1px solid rgba(0,0,0,0.06); cursor: pointer; font-family: inherit; text-align: left; } .nd-musicians-btn:hover { color: rgba(0,0,0,0.4); } .nd-musicians-btn .nd-arrow { font-size: 18px; opacity: .35; transition: opacity .15s; } .nd-musicians-btn:hover .nd-arrow { opacity: .7; } /* ═══ Mobile nav: transparent bar + FULL-SCREEN menu — curtain DOWN on open, UP on close; the menu text fades in one-by-one AFTER the curtain has arrived. ═══ */ @media (max-width: 900px){ nav, nav.mega-open { background: transparent !important; mix-blend-mode: difference !important; } nav { z-index: 1200 !important; } .nav-drawer{ position: fixed !important; inset: 0 !important; top:0 !important; right:0 !important; left:0 !important; bottom:0 !important; width: 100% !important; max-width: none !important; padding: 104px 34px calc(40px + env(safe-area-inset-bottom,0px)) !important; background: #fff !important; box-shadow: none !important; display: flex !important; flex-direction: column !important; gap: 2px !important; overflow-y: auto !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-100%) !important; transition: transform .6s cubic-bezier(0.76,0,0.24,1), opacity .4s ease, visibility .6s !important; pointer-events: none !important; z-index: 1100 !important; } .nav-drawer.nd-visible{ transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } .nav-drawer > *{ opacity: 0 !important; transform: translateY(22px) !important; transition: opacity .5s ease, transform .5s cubic-bezier(0.22,1,0.36,1) !important; transition-delay: 0s !important; } .nav-drawer.nd-visible > *{ opacity: 1 !important; transform: translateY(0) !important; } .nav-drawer.nd-visible > *:nth-child(1){ transition-delay: .50s !important; } .nav-drawer.nd-visible > *:nth-child(2){ transition-delay: .58s !important; } .nav-drawer.nd-visible > *:nth-child(3){ transition-delay: .66s !important; } .nav-drawer.nd-visible > *:nth-child(4){ transition-delay: .74s !important; } .nav-drawer.nd-visible > *:nth-child(5){ transition-delay: .82s !important; } .nav-drawer.nd-visible > *:nth-child(6){ transition-delay: .90s !important; } .nav-drawer.nd-visible > *:nth-child(7){ transition-delay: .98s !important; } .nav-drawer.nd-visible > *:nth-child(8){ transition-delay: 1.06s !important; } .nav-drawer > a, .nav-drawer > .nd-musicians-btn{ font-size: 27px !important; padding: 16px 0 !important; } #navDrawerExtra{ margin-top: auto !important; } .nav-sub-drawer{ position: fixed !important; inset: 0 !important; width: 100% !important; max-width: none !important; opacity: 0 !important; visibility: hidden !important; transform: translateY(-100%) !important; transition: transform .55s cubic-bezier(0.76,0,0.24,1), opacity .4s ease, visibility .55s !important; pointer-events: none !important; z-index: 1150 !important; } .nav-sub-drawer.ns-visible{ transform: translateY(0) !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; } } @media (max-width: 900px) and (prefers-reduced-motion: reduce){ .nav-drawer, .nav-sub-drawer, .nav-drawer > *{ transition: none !important; } } /* ── Elegant one-by-one entrance (XOO-style): each row rises up from below and fades in, slowly, clearly staggered so the menu "arranges itself" line by line. Targets EVERY direct child of the drawer (links, the Musicians button, and the appended controls box) so nothing is left un-animated. ── */ .nav-drawer > * { opacity: 0; transform: translateY(26px); transition: opacity .2s ease, transform .2s ease; } .nav-drawer.nd-visible > * { opacity: 1; transform: translateY(0); transition: opacity .6s cubic-bezier(0.22,1,0.36,1), transform .6s cubic-bezier(0.22,1,0.36,1); } .nav-drawer.nd-visible > *:nth-child(1) { transition-delay: .12s; } .nav-drawer.nd-visible > *:nth-child(2) { transition-delay: .20s; } .nav-drawer.nd-visible > *:nth-child(3) { transition-delay: .28s; } .nav-drawer.nd-visible > *:nth-child(4) { transition-delay: .36s; } .nav-drawer.nd-visible > *:nth-child(5) { transition-delay: .44s; } .nav-drawer.nd-visible > *:nth-child(6) { transition-delay: .52s; } .nav-drawer.nd-visible > *:nth-child(7) { transition-delay: .60s; } .nav-drawer.nd-visible > *:nth-child(8) { transition-delay: .68s; } @media (prefers-reduced-motion: reduce){ .nav-drawer > * { opacity: 1; transform: none; transition: none; } } /* Musicians sub-panel */ .nav-sub-drawer { position: fixed; top: 0; right: -300px; bottom: 0; width: 300px; background: #fff; box-shadow: -12px 0 48px rgba(0,0,0,0.12); display: flex; flex-direction: column; transition: right 0.18s ease; z-index: 302; pointer-events: none; overflow: hidden; } .nav-sub-drawer.ns-visible { right: 0; pointer-events: auto; transition: right 0.38s cubic-bezier(0.22,1,0.36,1); } .nsd-head { display: flex; align-items: center; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid rgba(0,0,0,0.07); flex-shrink: 0; } .nsd-back { background: none; border: none; cursor: pointer; font-size: 20px; color: var(--black); padding: 4px; display: flex; align-items: center; opacity: .5; transition: opacity .15s; } .nsd-back:hover { opacity: 1; } .nsd-title { font-size: 16px; font-weight: 700; } .nsd-body { overflow-y: auto; flex: 1; padding: 12px 0 40px; -webkit-overflow-scrolling: touch; } .nsd-group { margin-bottom: 4px; } .nsd-group-title { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(0,0,0,0.35); padding: 14px 24px 6px; } .nsd-group a { display: block; padding: 10px 24px; font-size: 15px; font-weight: 500; color: var(--black); text-decoration: none; transition: background .12s, color .12s; } .nsd-group a:hover, .nsd-group a:active { background: #f5f5f5; } /* ---- Block B: mega menu, lang toggle, favourites, login/account ---- */ /* ── MEGA MENU ── */ /* ── 大選單面板（2026-09-11 重做進退場）──────────────────── Martin 的要求：不要「淡淡的→明顯」，面板全程 100% 實體，只做位移。 做法：面板整塊往上藏到 nav 後面（translateY(-100%)），再用 clip-path 把 nav 底線(76px)以上的部分裁掉，所以它藏起來時絕對不會露出來； 進場就是一塊實體白色區塊從 nav 後方「拉」下來，退場原路收回去。 ⚠️ 這段 CSS 在 nav.css 和 musician-platform.html 兩邊「必須一模一樣」， 改一邊就要改另一邊，否則首頁跟內頁的動畫會不一致。 */ .mega-menu { /* top:0（不是 76px）+ padding-top 112px：面板從「畫面最上緣」開始長下來， 內容位置不變（0+112 = 原本的 76+36）。 ⚠️ 這是 2026-09-11 修「白色區塊中間破洞」的關鍵，不要改回 top:76px： 白橫條是從 y=0 往下長的，面板若從 y=76 才開始長，白橫條還沒到位的那 ~500ms 中間就會露出一條最高 76px 的縫（實測 31 幀都有洞）。現在兩塊白 都從 y=0 往下長 → 白色永遠是連續的一整塊，物理上不可能有洞。 */ position: fixed; top: 0; left: 0; right: 0; background: #fff; box-shadow: 0 24px 64px rgba(0,0,0,0.09), 0 4px 16px rgba(0,0,0,0.05); padding: 112px 40px 40px; display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; opacity: 1; /* 永遠不透明 — 不再淡入淡出 */ transform: translateY(-100%); -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); pointer-events: none; transition: transform 0.3s ease, clip-path 0.3s ease, -webkit-clip-path 0.3s ease; z-index: 199; } .mega-menu.mm-visible { transform: translateY(0); -webkit-clip-path: inset(0 0 0 0); clip-path: inset(0 0 0 0); pointer-events: auto; transition: transform 0.62s cubic-bezier(0.65,0,0.35,1), clip-path 0.62s cubic-bezier(0.65,0,0.35,1), -webkit-clip-path 0.62s cubic-bezier(0.65,0,0.35,1); } /* 退場：原路往上收回去，一樣全程實體、一樣的速度曲線 */ .mega-menu.mm-closing { transform: translateY(-100%); -webkit-clip-path: inset(100% 0 0 0); clip-path: inset(100% 0 0 0); pointer-events: none; transition: transform 0.62s cubic-bezier(0.65,0,0.35,1), clip-path 0.62s cubic-bezier(0.65,0,0.35,1), -webkit-clip-path 0.62s cubic-bezier(0.65,0,0.35,1); } /* 欄位不再自己淡入／錯開出現 — 它們是那塊實體白面板的一部分，跟著一起被拉下來 */ .mega-col { padding: 0 28px 0 0; border-right: 1px solid rgba(0,0,0,0.055); margin-right: 28px; } .mega-col:last-child { border-right: none; margin-right: 0; padding-right: 0; } .mega-col-title { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(0,0,0,0.35); text-decoration: none; margin-bottom: 16px; padding-bottom: 10px; width: 100%; border-bottom: 1px solid rgba(0,0,0,0.07); position: relative; cursor: pointer; transition: color 0.2s ease; } .mega-col-title::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 1.5px; background: var(--black); transform: scaleX(0); transform-origin: left center; /* instant on leave */ transition: none; } .mega-col-title:hover { color: rgba(0,0,0,0.75); } .mega-col-title:hover::after { transform: scaleX(1); transition: transform 0.38s cubic-bezier(0.22,1,0.36,1); } .mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 1px; } .mega-col ul li a { display: block; padding: 5px 0; font-size: 13.5px; font-weight: 450; color: var(--black); text-decoration: none; border-radius: 6px; transition: opacity 0.18s ease; } .mega-col ul li a:hover { opacity: 0.45; } /* overlay underline for Artists trigger when menu open */ #artists-nav-item > a.mm-active::before { transform: scaleX(1) !important; } /* ── LANG TOGGLE ── */ .lang-toggle { display: flex; align-items: center; gap: 2px; background: none; border: none; cursor: pointer; padding: 0; font-family: inherit; font-size: 15px; font-weight: 300; color: var(--nav-fg); letter-spacing: 0.04em; } .lang-toggle .lt-opt { padding: 3px 8px; border-radius: 5px; transition: background .2s, color .2s; } /* Active option: outlined pill in current nav colour — no fill needed */ .lang-toggle .lt-opt.active { border: 1.5px solid currentColor; border-radius: 4px; } nav.mega-open .lang-toggle .lt-opt.active { border-color: #000; color: #000; } .lang-toggle .lt-sep { opacity: .25; font-weight: 400; } .nav-right { display: flex; align-items: center; gap: 14px; } /* ── Favourites Button ── */ .nav-fav-btn { position:relative; background:none; border:none; cursor:pointer; padding:6px; display:flex; align-items:center; color:var(--nav-fg); } .nav-fav-btn:hover { opacity:.65; } nav.mega-open .nav-fav-btn:hover { opacity:1; color:#e05; } .nav-fav-btn svg { display:block; } .nav-fav-count { display:none; } /* replaced by #navFavBadge outside nav */ /* Fixed badge — always red, never inverted by mix-blend-mode */ #navFavBadge { position: fixed; z-index: 202; background: #e05; color: #fff; font-size: 9px; font-weight: 700; border-radius: 50%; width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; line-height: 1; pointer-events: none; } /* ── Login Button ── */ .nav-login-btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; color: var(--nav-fg); border: 1.5px solid var(--nav-fg); border-radius: 0; padding: 9px 18px; font-size: 15px; font-weight: 300; letter-spacing: 0.04em; font-family: inherit; cursor: pointer; white-space: nowrap; position: relative; z-index: 0; line-height: 1; } .nav-login-btn::before { display: none; } .nav-login-btn:hover { opacity: 1; } .nav-login-btn svg { width: 12px; height: 12px; transition: transform .2s; flex-shrink: 0; position: relative; z-index: 1; } .nav-login-btn span.login-label { position: relative; z-index: 1; } .nav-login-btn.open svg { transform: rotate(180deg); } /* Dropdown — fixed outside nav to escape mix-blend-mode */ .nav-login-dropdown { position: fixed; background: #fff; border-radius: 14px; box-shadow: 0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.06); padding: 6px; min-width: 200px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1); z-index: 9999; white-space: nowrap; display: flex; flex-direction: column; gap: 2px; mix-blend-mode: normal; isolation: isolate; /* filter forces a brand-new GPU compositing layer — guaranteed escape from Chrome's fixed-element mix-blend-mode bleed bug */ filter: drop-shadow(0 0 0 transparent); } /* Login dropdown is positioned OUTSIDE nav element (see HTML comment ~line 2161), so nav's mix-blend-mode doesn't affect it. We do NOT touch nav-links — letting them keep their blend-mode-driven auto-contrast (#fff blended with backdrop). Forcing #000 here was a bug: difference-blend then inverted black to white, making nav-links invisible on light backgrounds. */ .nav-login-dropdown.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } .nav-login-dropdown a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; font-size: 13px; font-weight: 600; color: #111 !important; text-decoration: none; border-radius: 9px; transition: background .13s; letter-spacing: .01em; background: transparent !important; } .nav-login-dropdown a:hover { background: #f2f2f2 !important; } .nav-login-dropdown a::before { content: ''; display: inline-block; width: 30px; height: 30px; border-radius: 8px; background: #f0f0f0; flex-shrink: 0; background-size: 16px; background-position: center; background-repeat: no-repeat; } /* Customer icon */ #openCustomerLogin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); } /* Musician icon */ #openMusicianLogin::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E"); } .nav-login-vsep { height: 1px; background: #ebebeb; margin: 2px 8px; flex-shrink: 0; } @media(max-width:760px){ .nav-login-btn span.login-label { display:none; } } /* My Account dropdown: no icon boxes, clean text-only rows */ #accountDropdown a::before { display: none; } #accountDropdown a { padding: 11px 18px; justify-content: center; text-align: center; } /* ── My Account avatar button (fixed, outside nav to escape mix-blend-mode) ── */ /* My Account button sits inside nav — hidden until logged in, no border box */ /* NOTE: do NOT add display:none here. The button starts hidden via its inline style="display:none" (nav.js); wireAuth() reveals it on login by clearing that inline style. A stylesheet #navAccountBtn{display:none} would out-specify the cleared inline style and keep "My Account" hidden on every nav.js page. */ #navAccountBtn { border: none; padding: 6px 2px; } #navAccountBtn.open svg { transform: rotate(180deg); } /* Account dropdown (fixed, same style as login dropdown) */ .nav-account-dropdown-fixed { position: fixed; background: #fff; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.13), 0 2px 8px rgba(0,0,0,.07), 0 0 0 1px rgba(0,0,0,.06); padding: 8px; min-width: 220px; opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.97); transform-origin: top right; transition: opacity .18s cubic-bezier(.4,0,.2,1), transform .18s cubic-bezier(.4,0,.2,1); z-index: 9999; mix-blend-mode: normal; } .nav-account-dropdown-fixed.open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); } /* User info header inside dropdown */ .nav-acc-header { display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px; border-bottom: 1px solid #f0f0f0; margin-bottom: 4px; } .nav-acc-header-avatar { width: 38px; height: 38px; border-radius: 50%; background: #111; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; } .nav-acc-header-info { display: flex; flex-direction: column; gap: 1px; overflow: hidden; } .nav-acc-header-name { font-size: 13.5px; font-weight: 700; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-acc-header-email { font-size: 11.5px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Dropdown items */ .nav-account-dropdown-fixed a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; font-size: 13px; font-weight: 600; color: #111 !important; text-decoration: none; border-radius: 10px; transition: background .13s; } .nav-account-dropdown-fixed a:hover { background: #f4f4f4; } .nav-account-dropdown-fixed a .acc-icon { width: 28px; height: 28px; border-radius: 8px; background: #f0f0f0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .nav-account-dropdown-fixed a .acc-icon svg { width: 14px; height: 14px; stroke: #555; fill: none; stroke-width: 2; } .nav-acc-sep { height: 1px; background: #f0f0f0; margin: 4px 8px; } .nav-account-dropdown-fixed .acc-logout { color: #c00 !important; } .nav-account-dropdown-fixed .acc-logout .acc-icon { background: #fff0f0; } .nav-account-dropdown-fixed .acc-logout .acc-icon svg { stroke: #c00; } /* ── Hover peek: a solid white bar slides down + fades in BEHIND the nav when the cursor is over the bar. The nav keeps mix-blend-mode:difference, so every item (logo, links, AND the right-side controls) auto-inverts to black against the white and stays readable. Scroll hide/show behaviour is untouched. ── */ /* ── 滑到 nav 上時滑下來的白色橫條（2026-09-11 再修）─────────────────── 全程 100% 實體，只做上下位移。**大選單打開時它繼續留在下面**，所以 畫面上方的白「從頭到尾都是這一條」： - 進場不會閃：以前是 nav 自己「啪」地補上整片白底 + 混合模式從 difference 跳成 normal，而那時候這條白橫條常常才滑到一半（實測 -57.7px）， 整片白突然補滿 + 全部文字重新算色 = 業主看到的閃屏。 - 退場不會淡出：以前上面那條白是 nav 的背景色，只能用淡的收掉； 現在交還給這條橫條，它是實體往上滑走的。 ⚠️ 配套：JS 不再把 mega-open 加到