/* ============================================================ 共用頁頭（導航）樣式 header.css 全站前台共用，修改此檔即可統一所有頁面頁頭 命名：遵守 .github\專案架構\css命名規則.md 引用方式：在各頁 於頁面專屬 CSS 之後引入， 以覆蓋頁面內舊的重複導航樣式，確保全站一致 ============================================================ */ /* ===== 導航 ===== */ nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 245, 239, .9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; max-width: 1200px; padding: 0 40px; } .brand { font-size: 24px; font-weight: 700; letter-spacing: .15em; color: var(--rose-deep); flex-shrink: 0; text-decoration: none; } .brand small { display: block; font-size: 10px; letter-spacing: .4em; color: var(--gold); font-weight: 600; } .menu { display: flex; gap: 34px; list-style: none; margin: 0; padding: 0; align-items: center; } .menu a { color: var(--ink); text-decoration: none; font-size: 15px; transition: color .2s; white-space: nowrap; } .menu a:hover { color: var(--rose); } .menu a.active { color: var(--rose); font-weight: 600; border-bottom: 2px solid var(--rose); padding-bottom: 4px; } .hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px 4px; margin-left: 16px; } .hamburger span { display: block; width: 26px; height: 2.5px; background: var(--ink); border-radius: 2px; transition: all .3s ease; transform-origin: center; } .hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } .mobile-menu-wrapper { display: none; position: absolute; top: 76px; left: 0; width: 100%; background: rgba(250, 245, 239, .98); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); padding: 20px 40px 32px; box-shadow: 0 16px 32px rgba(74, 59, 51, .08); } .mobile-menu-wrapper.open { display: block; } .mobile-menu-wrapper .menu { flex-direction: column; gap: 14px; } .mobile-menu-wrapper .menu a { font-size: 17px; padding: 8px 0; border-bottom: 1px solid var(--line); } /* ===== 導航響應式 ===== */ @media (max-width: 768px) { .menu { display: none; } .hamburger { display: flex; } .mobile-menu-wrapper { display: none; } } @media (max-width: 640px) { .brand { font-size: 20px; } .hamburger span { width: 22px; } } @media (max-width: 400px) { .brand { font-size: 16px; } }