diff --git a/assets/css/concert.css b/assets/css/concert.css index d3fe48d..cd1cf3c 100644 --- a/assets/css/concert.css +++ b/assets/css/concert.css @@ -1,30 +1,10 @@ -body { - background-color: var(--); -} - -.concert-page { - background-color: var(--deep-black); +body.concert-page { + background-color: var(--deep-black, #0a0a0a); margin: 0; padding: 0; } -.concert-archive-header { - width: 100%; - height: 100vh; - min-height: 100dvh; - background-image: url('../images/header.jpg'); - background-position: center center; - background-repeat: no-repeat; - background-size: 108%; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - text-align: center; - padding: 0 20px; - overflow: hidden; - position: relative; -} +/* 頂部 banner 版面見 style.css .concert-archive-header（與 .map-archive-header 共用） */ .main-title { font-size: 3.5rem; @@ -60,10 +40,7 @@ body { margin: 0 25px; } -body { - background-color: #fcfaf2; - /* 溫潤米白背景 */ - margin: 0; +.concert-page .concert-container { padding: 50px 0; font-family: "PingFang TC", "Microsoft JhengHei", sans-serif; } diff --git a/assets/css/style.css b/assets/css/style.css index ae38092..6ffb33b 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -44,7 +44,8 @@ body { line-height: 1.6; } -header { +/* 首頁 Hero 全屏；內頁 banner 見 .map-archive-header／.concert-archive-header */ +header#origin { width: 100%; height: 100vh; min-height: 100dvh; @@ -102,23 +103,43 @@ nav a { .portal-nav li { position: relative; +} + +/* 主欄每項同高墊腳（含無子選單的「完整的六顆」），避免僅 :has 子選單者才墊高而單項偏低 */ +.portal-nav>ul>li { padding-bottom: 8px; } +.portal-nav .logo { + align-self: center; + flex-shrink: 0; + transform: translateY(3px); +} + +/* 全站頂欄：對齊 concert.html — 全寬黑底、黏頂、較高層（site-guide 僅連結開放邏輯不同，見 portal-nav.js） */ .portal-nav { - position: relative; - z-index: 60; + width: 100%; + margin: 0 0 14px; + padding: 0.8rem 100px; + background-color: var(--black); + border-radius: 0; + box-shadow: none; + overflow: visible; + position: sticky; + top: 0; + z-index: 100; display: flex; flex-wrap: wrap; - align-items: flex-end; + align-items: center; justify-content: space-between; gap: 0.5rem 1rem; + box-sizing: border-box; } .portal-nav>ul { display: flex; flex-wrap: wrap; - align-items: flex-end; + align-items: center; justify-content: flex-end; gap: clamp(8px, 1.4vw, 18px); list-style: none; @@ -130,7 +151,7 @@ nav a { .portal-nav>ul>li:hover, .portal-nav>ul>li:focus-within { - z-index: 70; + z-index: 105; } .portal-nav>ul>li>a { @@ -467,8 +488,8 @@ a.btn[data-coming-soon="true"], pointer-events: none; } -header, -nav, +header:not(.map-archive-header):not(.concert-archive-header), +nav:not(.portal-nav), .container, footer { position: relative; @@ -1342,9 +1363,7 @@ footer a .mark_b { color: var(--primary); } -/* map.html */ -.map-page .map-archive-header, -.map-page .portal-nav, +/* map.html — 主內容層；頂欄見全站 .portal-nav */ .map-page .member-tabs, .map-page #itinerary-search, .map-page .map-layout, @@ -1353,7 +1372,6 @@ footer a .mark_b { z-index: 1; } -.concert-page .concert-archive-header, .concert-page .search-section, .concert-page .concert-container, .concert-page footer { @@ -1361,38 +1379,6 @@ footer a .mark_b { z-index: 1; } -/* 演唱會頁：勿與主內容同層 z-index:1（會被後方 DOM 蓋住）；對齊 map-page 黏頂＋較高層 */ -.concert-page .portal-nav { - width: 100%; - margin: 0 0 14px; - padding: 0.8rem 100px; - background-color: var(--black); - border-radius: 0; - box-shadow: none; - overflow: visible; - position: sticky; - top: 0; - z-index: 100; -} - -.concert-page .portal-nav>ul>li:hover, -.concert-page .portal-nav>ul>li:focus-within { - z-index: 105; -} - -.map-page .portal-nav { - width: 100%; - margin: 0 0 14px; - padding: 0.8rem 100px; - background-color: var(--black); - border-radius: 0; - box-shadow: none; - overflow: visible; - position: sticky; - top: 0; - z-index: 30; -} - .map-page .portal-nav ul { list-style: none; margin: 0; @@ -1414,11 +1400,6 @@ footer a .mark_b { line-height: 1; } -.map-page .portal-nav>ul>li:hover, -.map-page .portal-nav>ul>li:focus-within { - z-index: 35; -} - .map-page .portal-nav>ul>li>a { display: inline-flex; flex-direction: column; @@ -1562,14 +1543,16 @@ footer a .mark_b { transform: translateY(-50%); } -.map-archive-header { +/* 內頁頂部 banner：全屏 100vh（首頁 Hero 僅 header#origin） */ +.map-archive-header, +.concert-archive-header { width: 100%; height: 100vh; min-height: 100dvh; background-image: url('../images/header.jpg'); - background-position: center center; + background-position: center 78%; background-repeat: no-repeat; - background-size: 108%; + background-size: cover; display: flex; flex-direction: column; align-items: center; @@ -1578,9 +1561,11 @@ footer a .mark_b { padding: 0 20px; overflow: hidden; position: relative; + box-sizing: border-box; } -.map-archive-header .main-title { +.map-archive-header .main-title, +.concert-archive-header .main-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; color: var(--yellow, var(--primary)); @@ -1590,18 +1575,22 @@ footer a .mark_b { text-shadow: 0 0 30px rgba(255, 221, 0, 0.75); } -.map-archive-header .subtitle-wrap { +.map-archive-header .subtitle-wrap, +.concert-archive-header .subtitle-wrap { margin-top: 20px; } .map-archive-header .subtitle-wrap::before, -.map-archive-header .subtitle-wrap::after { +.map-archive-header .subtitle-wrap::after, +.concert-archive-header .subtitle-wrap::before, +.concert-archive-header .subtitle-wrap::after { height: 3px; background-color: #ffcc00; max-width: 56px; } -.map-archive-header .sub-title { +.map-archive-header .sub-title, +.concert-archive-header .sub-title { font-size: 0.92rem; letter-spacing: 4px; color: #d4d4d4; @@ -1909,12 +1898,8 @@ footer a .mark_b { } @media (max-width: 920px) { - .map-archive-header { - background-size: cover; - padding: 0 16px; - } - - .map-archive-header .main-title { + .map-archive-header .main-title, + .concert-archive-header .main-title { letter-spacing: 4px; } @@ -1927,8 +1912,9 @@ footer a .mark_b { gap: 16px; } - .map-page .portal-nav { - padding: 0.8rem 16px; + .portal-nav { + padding-top: 0.8rem; + padding-bottom: 0.8rem; } .map-page .portal-nav .portal-submenu { @@ -2310,13 +2296,6 @@ body.totoga2-page .totoga2-hub-controls { flex-wrap: wrap; } -body.totoga2-page .map-archive-header { - height: auto; - min-height: clamp(15rem, 42vh, 26rem); - padding: clamp(2rem, 5vh, 3.25rem) 20px; - background-size: cover; -} - body.totoga2-page.totoga2-video-copy-page .ebook-intro.section { margin-bottom: 1.5rem; } diff --git a/assets/css/tablet.css b/assets/css/tablet.css index 1665248..9fa4b99 100644 --- a/assets/css/tablet.css +++ b/assets/css/tablet.css @@ -2,22 +2,25 @@ @media (max-width: 1180px) { - html:has(body.map-page) { + html:has(.portal-nav) { scroll-padding-top: clamp(52px, 12vw, 76px); } - nav, + nav:not(.portal-nav) { + padding-left: clamp(14px, 2vw + 10px, 32px) !important; + padding-right: clamp(14px, 2vw + 10px, 32px) !important; + } + .portal-nav { padding-left: clamp(14px, 2vw + 10px, 32px) !important; padding-right: clamp(14px, 2vw + 10px, 32px) !important; row-gap: 12px; flex-wrap: wrap; - align-items: flex-start; + align-items: center; } - .map-page .portal-nav { - padding-left: clamp(14px, 2vw + 10px, 32px) !important; - padding-right: clamp(14px, 2vw + 10px, 32px) !important; + .portal-nav>ul { + align-items: center; } .portal-nav .logo { diff --git a/assets/js/portal-nav.js b/assets/js/portal-nav.js index 2a8a150..5d69e83 100644 --- a/assets/js/portal-nav.js +++ b/assets/js/portal-nav.js @@ -46,7 +46,7 @@ /** * 首頁僅下列錨點可點；其餘（如 #story）維持籌備中，須站主同意後才可加入。 - * 空字串：連到 index.html 且無 # 片段時視為可點（淪陷瞬間 · 初心與軌跡）。 + * 空字串：連到 index.html 且無 # 片段時視為可點（淪陷瞬間主項）。 */ const INDEX_NAV_OPEN_HASHES = new Set(["", "#origin", "#start", "#mission", "#timeline"]); @@ -215,7 +215,6 @@