refactor 內頁header改inner-page-header
This commit is contained in:
+76
-51
@@ -44,7 +44,7 @@ body {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* 首頁 Hero 全屏；內頁 banner 僅 .map-archive-header（全站共用一 class） */
|
||||
/* 首頁 Hero 全屏；內頁 banner 為 header.inner-page-header */
|
||||
header#origin {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
@@ -937,7 +937,7 @@ a.btn[data-coming-soon="true"],
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
header:not(.map-archive-header),
|
||||
header:not(.inner-page-header),
|
||||
nav:not(.portal-nav),
|
||||
.container,
|
||||
footer {
|
||||
@@ -2049,8 +2049,8 @@ footer a .mark_b {
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
/* 內頁頂部 banner（全站 .map-archive-header 同電子書複本；首頁僅 header#origin 全屏） */
|
||||
header.map-archive-header {
|
||||
/* 內頁頂部 banner（全站 header.inner-page-header；首頁僅 #origin） */
|
||||
header.inner-page-header {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
min-height: clamp(14rem, 38vh, 24rem);
|
||||
@@ -2069,7 +2069,76 @@ header.map-archive-header {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 全站頂欄標題語彙：黃色氣球底圖上用深灰字；.header-inner.site-header-inner（首頁 #origin .hero 內同 class） */
|
||||
header.inner-page-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(18, 14, 8, 0.52) 0%,
|
||||
rgba(18, 14, 8, 0.38) 45%,
|
||||
rgba(18, 14, 8, 0.5) 100%
|
||||
);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
header.inner-page-header .site-header-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
max-width: min(40rem, 94vw);
|
||||
margin-inline: auto;
|
||||
text-align: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header.inner-page-header .main-title {
|
||||
font-size: clamp(2.25rem, 5.2vw, 3.65rem);
|
||||
font-weight: 900;
|
||||
color: #fff8e8;
|
||||
letter-spacing: 0.12em;
|
||||
margin: 0;
|
||||
text-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.65),
|
||||
0 0 28px rgba(0, 0, 0, 0.45),
|
||||
0 0 2px rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
header.inner-page-header .subtitle-wrap {
|
||||
width: 100%;
|
||||
margin: 20px auto 0;
|
||||
padding: 0 0.75rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header.inner-page-header .subtitle-wrap::before,
|
||||
header.inner-page-header .subtitle-wrap::after {
|
||||
content: "";
|
||||
display: block;
|
||||
flex: 1 1 56px;
|
||||
min-width: 28px;
|
||||
height: 3px;
|
||||
background-color: rgba(245, 236, 212, 0.85);
|
||||
max-width: 72px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
header.inner-page-header .sub-title {
|
||||
flex: 0 0 auto;
|
||||
font-size: clamp(0.95rem, 2.2vw, 1.08rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.28em;
|
||||
color: #f5ecd4;
|
||||
margin: 0 18px;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
/* .site-header-inner 版面（首頁 #origin .hero 共用）；首頁主副標見 index.css */
|
||||
.site-header-inner {
|
||||
width: 100%;
|
||||
max-width: min(40rem, 94vw);
|
||||
@@ -2420,8 +2489,8 @@ header.map-archive-header {
|
||||
}
|
||||
|
||||
@media (max-width: 920px) {
|
||||
.site-header-inner .main-title {
|
||||
letter-spacing: 4px;
|
||||
header.inner-page-header .main-title {
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
|
||||
.map-layout {
|
||||
@@ -2982,50 +3051,6 @@ body.totoga2-page .ebook-back-link {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
/* totoga2 黃色氣球底圖：標題加遮罩與描邊光暈，僅本系列有 .map-archive-header */
|
||||
body.totoga2-page header.map-archive-header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
180deg,
|
||||
rgba(18, 14, 8, 0.52) 0%,
|
||||
rgba(18, 14, 8, 0.38) 45%,
|
||||
rgba(18, 14, 8, 0.5) 100%
|
||||
);
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
body.totoga2-page header.map-archive-header .site-header-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
body.totoga2-page header.map-archive-header .main-title {
|
||||
font-size: clamp(2.25rem, 5.2vw, 3.65rem);
|
||||
color: #fff8e8;
|
||||
letter-spacing: 0.12em;
|
||||
text-shadow:
|
||||
0 2px 4px rgba(0, 0, 0, 0.65),
|
||||
0 0 28px rgba(0, 0, 0, 0.45),
|
||||
0 0 2px rgba(255, 255, 255, 0.9);
|
||||
}
|
||||
|
||||
body.totoga2-page header.map-archive-header .sub-title {
|
||||
font-size: clamp(0.95rem, 2.2vw, 1.08rem);
|
||||
font-weight: 700;
|
||||
color: #f5ecd4;
|
||||
letter-spacing: 0.28em;
|
||||
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
|
||||
}
|
||||
|
||||
body.totoga2-page header.map-archive-header .subtitle-wrap::before,
|
||||
body.totoga2-page header.map-archive-header .subtitle-wrap::after {
|
||||
background-color: rgba(245, 236, 212, 0.85);
|
||||
max-width: 72px;
|
||||
}
|
||||
|
||||
/* totoga2/* 子頁共用 .totoga2-split-crossnav */
|
||||
body.totoga2-page .totoga2-split-crossnav {
|
||||
margin-top: 0.75rem;
|
||||
|
||||
Reference in New Issue
Block a user