feat NJTW5.html
This commit is contained in:
+388
-7
@@ -113,6 +113,54 @@ nav a:hover {
|
|||||||
.portal-nav {
|
.portal-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 60;
|
z-index: 60;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal-nav>ul {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: clamp(8px, 1.4vw, 18px);
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1 1 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal-nav>ul>li>a {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
text-align: center;
|
||||||
|
gap: 2px;
|
||||||
|
line-height: 1.15;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--primary);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal-nav__label {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portal-nav__sub {
|
||||||
|
display: block;
|
||||||
|
max-width: 12.5rem;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
line-height: 1.25;
|
||||||
|
opacity: 0.82;
|
||||||
|
white-space: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.portal-nav .portal-submenu {
|
.portal-nav .portal-submenu {
|
||||||
@@ -120,7 +168,7 @@ nav a:hover {
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
top: calc(100% - 2px);
|
top: calc(100% - 2px);
|
||||||
left: 0;
|
left: 0;
|
||||||
min-width: 220px;
|
min-width: 248px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
background: #ffffff;
|
background: #ffffff;
|
||||||
@@ -134,8 +182,11 @@ nav a:hover {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.portal-nav .portal-submenu a {
|
.portal-nav .portal-submenu a {
|
||||||
display: block;
|
display: flex;
|
||||||
padding: 6px 8px;
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 8px 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
font-size: 0.84rem;
|
font-size: 0.84rem;
|
||||||
@@ -143,6 +194,15 @@ nav a:hover {
|
|||||||
letter-spacing: 0;
|
letter-spacing: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.portal-nav .portal-submenu .portal-nav__sub {
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
line-height: 1.3;
|
||||||
|
opacity: 0.78;
|
||||||
|
max-width: 18rem;
|
||||||
|
}
|
||||||
|
|
||||||
.portal-nav .portal-submenu a:hover {
|
.portal-nav .portal-submenu a:hover {
|
||||||
background: #fff8df;
|
background: #fff8df;
|
||||||
color: #3a300a;
|
color: #3a300a;
|
||||||
@@ -152,6 +212,11 @@ nav a:hover {
|
|||||||
color: #ffffff;
|
color: #ffffff;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.portal-nav a.nav-current .portal-nav__sub {
|
||||||
|
color: rgba(255, 255, 255, 0.82);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
.portal-nav>ul>li.coming-soon>a {
|
.portal-nav>ul>li.coming-soon>a {
|
||||||
cursor: default;
|
cursor: default;
|
||||||
opacity: 0.82;
|
opacity: 0.82;
|
||||||
@@ -1009,12 +1074,15 @@ footer a .mark_b {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.map-page .portal-nav>ul>li>a {
|
.map-page .portal-nav>ul>li>a {
|
||||||
display: inline-block;
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
white-space: normal;
|
||||||
color: var(--primary);
|
color: var(--primary);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
white-space: nowrap;
|
|
||||||
padding: 4px 2px;
|
padding: 4px 2px;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
transition: color 0.2s ease;
|
transition: color 0.2s ease;
|
||||||
@@ -1047,8 +1115,12 @@ footer a .mark_b {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.map-page .portal-nav .portal-submenu a {
|
.map-page .portal-nav .portal-submenu a {
|
||||||
display: block;
|
display: flex;
|
||||||
padding: 6px 8px;
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
text-align: right;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 8px 10px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
font-size: 0.84rem;
|
font-size: 0.84rem;
|
||||||
color: #5f5f5f;
|
color: #5f5f5f;
|
||||||
@@ -1509,6 +1581,8 @@ footer a .mark_b {
|
|||||||
padding-bottom: 48px;
|
padding-bottom: 48px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* variety/NJTW/NJTW5.html — 樣式改為同資料夾 njtw5.css，避免與全站 style 雙重定義 */
|
||||||
|
|
||||||
/* Chronicle (webcomic-like reader) */
|
/* Chronicle (webcomic-like reader) */
|
||||||
.chronicle-controls {
|
.chronicle-controls {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
@@ -1667,6 +1741,54 @@ body.ebook-ssg2-page .ebook-back-link {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* totoga2.html — 六六歌2 整合（影片／電子書／長文＋網漫／分頁） */
|
/* totoga2.html — 六六歌2 整合（影片／電子書／長文＋網漫／分頁） */
|
||||||
|
body.totoga2-page .map-archive-header .main-content-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
margin-top: clamp(12px, 2.5vw, 22px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .map-archive-header .highlight-text {
|
||||||
|
font-size: clamp(1.45rem, 4vw, 2.65rem);
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .map-archive-header .eng-title {
|
||||||
|
font-size: clamp(0.72rem, 2vw, 0.95rem);
|
||||||
|
letter-spacing: 0.26em;
|
||||||
|
color: var(--yellow);
|
||||||
|
font-weight: 700;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .map-archive-header .subtitle-wrap {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.4rem;
|
||||||
|
margin-top: clamp(14px, 2.5vw, 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .map-archive-header .subtitle-wrap::before,
|
||||||
|
body.totoga2-page .map-archive-header .subtitle-wrap::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .map-archive-header .sub-title {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.totoga2-page .map-archive-header .event-date {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
color: #c8c8c8;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
body.totoga2-page .totoga2-hub-controls {
|
body.totoga2-page .totoga2-hub-controls {
|
||||||
max-width: 1200px;
|
max-width: 1200px;
|
||||||
margin: 24px auto 10px;
|
margin: 24px auto 10px;
|
||||||
@@ -1753,6 +1875,265 @@ body.totoga2-page .ebook-back-link {
|
|||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* extra/member.html — 黑白水晶交錯格（2×4）與懸賞令海報 */
|
||||||
|
body.member-crystal-page .member-crystal-main {
|
||||||
|
padding: 1.75rem 14px 3rem;
|
||||||
|
max-width: 1240px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-lead {
|
||||||
|
text-align: center;
|
||||||
|
max-width: 46rem;
|
||||||
|
margin: 0 auto 1.75rem;
|
||||||
|
color: #3d3d3d;
|
||||||
|
line-height: 1.75;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-board {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
|
gap: clamp(14px, 2vw, 22px);
|
||||||
|
align-items: stretch;
|
||||||
|
grid-template-areas:
|
||||||
|
"b1 b2 b3 ib"
|
||||||
|
"iw w1 w2 w3";
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="b1"] {
|
||||||
|
grid-area: b1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="b2"] {
|
||||||
|
grid-area: b2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="b3"] {
|
||||||
|
grid-area: b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="intro-black"] {
|
||||||
|
grid-area: ib;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="intro-white"] {
|
||||||
|
grid-area: iw;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="w1"] {
|
||||||
|
grid-area: w1;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="w2"] {
|
||||||
|
grid-area: w2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="w3"] {
|
||||||
|
grid-area: w3;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro {
|
||||||
|
height: 100%;
|
||||||
|
min-height: 280px;
|
||||||
|
padding: 1.25rem 1.2rem;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 3px solid #3a2a18;
|
||||||
|
box-shadow:
|
||||||
|
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
|
||||||
|
0 10px 26px rgba(0, 0, 0, 0.18);
|
||||||
|
background:
|
||||||
|
linear-gradient(165deg, rgba(255, 248, 230, 0.95) 0%, #e8d8bc 48%, #d2bfa3 100%);
|
||||||
|
color: #2b2118;
|
||||||
|
line-height: 1.65;
|
||||||
|
font-size: 0.92rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro--black {
|
||||||
|
border-color: #1f1410;
|
||||||
|
background:
|
||||||
|
linear-gradient(165deg, #4a3a32 0%, #2d2420 55%, #1a1412 100%);
|
||||||
|
color: #f2e6d8;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro--white {
|
||||||
|
border-color: #5c4a38;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro__title {
|
||||||
|
margin: 0 0 0.2rem;
|
||||||
|
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.12em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro--black .member-crystal-intro__title {
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro__en {
|
||||||
|
margin: 0 0 0.75rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
letter-spacing: 0.28em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro p {
|
||||||
|
margin: 0 0 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-intro p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster {
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: stretch;
|
||||||
|
border-radius: 10px;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 4px solid #5c4030;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 2px #c9a574,
|
||||||
|
0 14px 32px rgba(0, 0, 0, 0.22);
|
||||||
|
background: linear-gradient(180deg, #8b6f52 0%, #5c4030 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster--white {
|
||||||
|
border-color: #6e5a48;
|
||||||
|
box-shadow:
|
||||||
|
0 0 0 2px #e6d2b2,
|
||||||
|
0 14px 32px rgba(0, 0, 0, 0.18);
|
||||||
|
background: linear-gradient(180deg, #b9a08a 0%, #7d6854 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__wanted {
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.35em;
|
||||||
|
font-size: clamp(0.68rem, 1.6vw, 0.82rem);
|
||||||
|
padding: 0.45rem 0.35rem;
|
||||||
|
color: #f8eecf;
|
||||||
|
text-shadow: 0 1px 0 #1a120e;
|
||||||
|
background: linear-gradient(180deg, #2a1f1a 0%, #120d0b 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster--white .member-poster__wanted {
|
||||||
|
color: #2a2118;
|
||||||
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
|
||||||
|
background: linear-gradient(180deg, #efe2cf 0%, #cbb59d 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__sheet {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.65rem 0.55rem 0.85rem;
|
||||||
|
background: linear-gradient(180deg, #f4e8d4 0%, #dec9ae 55%, #c9b198 100%);
|
||||||
|
color: #1f1814;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__photo {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 220px;
|
||||||
|
aspect-ratio: 4 / 5;
|
||||||
|
margin: 0 auto 0.45rem;
|
||||||
|
border: 3px solid #2a2118;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow: hidden;
|
||||||
|
background: #2a2118;
|
||||||
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__photo img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center top;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__role {
|
||||||
|
margin: 0 0 0.15rem;
|
||||||
|
font-size: 0.68rem;
|
||||||
|
letter-spacing: 0.14em;
|
||||||
|
text-transform: uppercase;
|
||||||
|
color: #4a3b32;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__name {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(1.15rem, 2.4vw, 1.45rem);
|
||||||
|
font-weight: 900;
|
||||||
|
letter-spacing: 0.08em;
|
||||||
|
line-height: 1.15;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__name-en {
|
||||||
|
margin: 0.15rem 0 0.35rem;
|
||||||
|
font-size: 0.62rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.2em;
|
||||||
|
color: #5c4a40;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-poster__stamp {
|
||||||
|
margin: 0.25rem 0 0;
|
||||||
|
align-self: flex-end;
|
||||||
|
font-size: 0.58rem;
|
||||||
|
letter-spacing: 0.22em;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #6a5244;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 960px) {
|
||||||
|
body.member-crystal-page .member-crystal-board {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
grid-template-areas:
|
||||||
|
"ib ib"
|
||||||
|
"b1 b2"
|
||||||
|
"b3 b3"
|
||||||
|
"iw iw"
|
||||||
|
"w1 w2"
|
||||||
|
"w3 w3";
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="b3"],
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="w3"] {
|
||||||
|
justify-self: center;
|
||||||
|
max-width: min(100%, 360px);
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 600px) {
|
||||||
|
body.member-crystal-page .member-crystal-board {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
grid-template-areas:
|
||||||
|
"ib"
|
||||||
|
"b1"
|
||||||
|
"b2"
|
||||||
|
"b3"
|
||||||
|
"iw"
|
||||||
|
"w1"
|
||||||
|
"w2"
|
||||||
|
"w3";
|
||||||
|
}
|
||||||
|
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="b3"],
|
||||||
|
body.member-crystal-page .member-crystal-cell[data-area="w3"] {
|
||||||
|
justify-self: stretch;
|
||||||
|
max-width: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* site-guide.html — 全站導覽索引 */
|
/* site-guide.html — 全站導覽索引 */
|
||||||
body.site-guide-page .site-guide-main {
|
body.site-guide-page .site-guide-main {
|
||||||
padding: 28px 14px 56px;
|
padding: 28px 14px 56px;
|
||||||
|
|||||||
@@ -37,7 +37,9 @@
|
|||||||
.portal-nav>ul>li>a {
|
.portal-nav>ul>li>a {
|
||||||
min-height: 44px;
|
min-height: 44px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
nav ul {
|
nav ul {
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 62 KiB After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
+26
-20
@@ -1,7 +1,7 @@
|
|||||||
(() => {
|
(() => {
|
||||||
/**
|
/**
|
||||||
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
* ── 導覽「尚未開放」連結 ─────────────────────────────────────────
|
||||||
* ① 整個檔案先關：COMING_SOON_PAGES（目前已含志源頁／演唱會／典藏／地圖／視覺進化論等）。
|
* ① 整個檔案先關：COMING_SOON_PAGES（目前已含演唱會／典藏／地圖／視覺進化論等；綜藝主頁已開以利子選單）。
|
||||||
* ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
|
* ② index.html 細到錨點：INDEX_NAV_OPEN_HASHES。
|
||||||
* ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
|
* ③ 文案 NAV_SOON_PHRASES：每次「滑過或鍵盤聚焦」連結時隨機擇一句（不交錯只靠重整）。
|
||||||
* 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
|
* 浮層、title 與該次互動同步；無障礙用語固定為「尚無開放」（避免標籤隨機跳動）。
|
||||||
@@ -27,7 +27,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
const COMING_SOON_PAGES = new Set([
|
const COMING_SOON_PAGES = new Set([
|
||||||
"variety.html",
|
|
||||||
"concert.html",
|
"concert.html",
|
||||||
"albums.html",
|
"albums.html",
|
||||||
"map.html",
|
"map.html",
|
||||||
@@ -62,7 +61,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function markLinkComingSoon(link, originalHref) {
|
function markLinkComingSoon(link, originalHref) {
|
||||||
const visibleTitle = link.textContent.trim();
|
const labelEl = link.querySelector(".portal-nav__label");
|
||||||
|
const visibleTitle = labelEl ? labelEl.textContent.trim() : link.textContent.trim();
|
||||||
link.setAttribute("data-coming-soon", "true");
|
link.setAttribute("data-coming-soon", "true");
|
||||||
link.setAttribute("aria-disabled", "true");
|
link.setAttribute("aria-disabled", "true");
|
||||||
link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
|
link.setAttribute("aria-label", `${visibleTitle}，尚無開放`);
|
||||||
@@ -152,36 +152,42 @@
|
|||||||
return `
|
return `
|
||||||
<a class="logo" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
<a class="logo" href="${rp}index.html"><img src="${rp}assets/images/logov.svg" alt="SECHSKIES Logo"></a>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="${rp}index.html#origin">淪陷瞬間</a>
|
<li><a href="${rp}index.html#origin"><span class="portal-nav__label">淪陷瞬間</span><span class="portal-nav__sub">六顆永恆的水晶 · 左右命運的傳奇</span></a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a href="${rp}index.html#start">好奇的開端</a></li>
|
<li><a href="${rp}index.html#start"><span class="portal-nav__label">好奇的開端</span><span class="portal-nav__sub">從好奇觀看到淪陷的起點</span></a></li>
|
||||||
<li><a href="${rp}index.html#mission">成立的初衷</a></li>
|
<li><a href="${rp}index.html#mission"><span class="portal-nav__label">成立的初衷</span><span class="portal-nav__sub">推廣部與黃色奇蹟</span></a></li>
|
||||||
<li><a href="${rp}index.html#timeline">跨時空軌跡</a></li>
|
<li><a href="${rp}index.html#timeline"><span class="portal-nav__label">跨時空軌跡</span><span class="portal-nav__sub">年表與作品節點</span></a></li>
|
||||||
<li><a href="${rp}index.html#story">傳奇的轉折</a></li>
|
<li><a href="${rp}index.html#story"><span class="portal-nav__label">傳奇的轉折</span><span class="portal-nav__sub">重逢與敘事主線</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="${rp}variety/variety.html">瘋子與天才</a>
|
<li><a href="${rp}variety/variety.html"><span class="portal-nav__label">瘋子與天才</span><span class="portal-nav__sub">EUN JI-WON × VARIETY GRAVITY</span></a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a href="${rp}variety/variety.html#variety">瘋狂出演中</a></li>
|
<li><a href="${rp}variety/variety.html#variety"><span class="portal-nav__label">瘋狂出演中</span><span class="portal-nav__sub">綜藝鏡頭與名場面</span></a></li>
|
||||||
<li><a href="${rp}variety/variety.html#stage">隊長的氣場</a></li>
|
<li><a href="${rp}variety/variety.html#stage"><span class="portal-nav__label">隊長的氣場</span><span class="portal-nav__sub">控場與隊內互動</span></a></li>
|
||||||
|
<li><a href="${rp}variety/NJTW/NJTW5.html"><span class="portal-nav__label">新西遊記</span><span class="portal-nav__sub">成員介紹 · MEMBER GUIDE</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="${rp}concert/concert.html">現場的震撼</a>
|
<li><a href="${rp}concert/concert.html"><span class="portal-nav__label">現場的震撼</span><span class="portal-nav__sub">SECHSKIES CONCERT ARCHIVE</span></a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a href="${rp}concert/concert.html#stage-now">永恆的重逢</a></li>
|
<li><a href="${rp}concert/concert.html#stage-now"><span class="portal-nav__label">永恆的重逢</span><span class="portal-nav__sub">近年與重聚舞台</span></a></li>
|
||||||
<li><a href="${rp}concert/concert.html#stage-past">燦爛的最初</a></li>
|
<li><a href="${rp}concert/concert.html#stage-past"><span class="portal-nav__label">燦爛的最初</span><span class="portal-nav__sub">全盛期經典場次</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="${rp}albums/albums.html">黃色留聲機</a>
|
<li><a href="${rp}albums/albums.html"><span class="portal-nav__label">黃色留聲機</span><span class="portal-nav__sub">YELLOW PHONOGRAPH</span></a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a href="${rp}albums/albums.html#new">啟動新篇章</a></li>
|
<li><a href="${rp}albums/albums.html#new"><span class="portal-nav__label">啟動新篇章</span><span class="portal-nav__sub">重啟後作品與單曲</span></a></li>
|
||||||
<li><a href="${rp}albums/albums.html#classic">輝煌全盛期</a></li>
|
<li><a href="${rp}albums/albums.html#classic"><span class="portal-nav__label">輝煌全盛期</span><span class="portal-nav__sub">1997–1999 年表</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li><a href="${rp}map/map.html">聖地巡禮</a>
|
<li><a href="${rp}map/map.html"><span class="portal-nav__label">聖地巡禮</span><span class="portal-nav__sub">SECHSKIES TAIWAN ARCHIVE</span></a>
|
||||||
<ul class="portal-submenu">
|
<ul class="portal-submenu">
|
||||||
<li><a href="${rp}map/map.html#taipei">台北聖地</a></li>
|
<li><a href="${rp}map/map.html#taipei"><span class="portal-nav__label">台北聖地</span><span class="portal-nav__sub">行程與地點整理</span></a></li>
|
||||||
<li><a href="${rp}map/map.html#global">海外遠征</a></li>
|
<li><a href="${rp}map/map.html#global"><span class="portal-nav__label">海外遠征</span><span class="portal-nav__sub">跨國足跡</span></a></li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
<li><a href="${rp}extra/member.html"><span class="portal-nav__label">六顆水晶</span><span class="portal-nav__sub">BLACK KIES · WHITE KIES</span></a>
|
||||||
|
<ul class="portal-submenu">
|
||||||
|
<li><a href="${rp}extra/member.html#crystal-board"><span class="portal-nav__label">黑白分流</span><span class="portal-nav__sub">海報牆與分組介紹</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|||||||
@@ -94,5 +94,9 @@
|
|||||||
|------|------|
|
|------|------|
|
||||||
| `assets/js/portal-nav.js` | `buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
|
| `assets/js/portal-nav.js` | `buildPortalNavInnerHTML`、`COMING_SOON_PAGES`、`INDEX_NAV_OPEN_HASHES`、籌備中邏輯 |
|
||||||
| `assets/css/style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
|
| `assets/css/style.css` | `.portal-nav`、子選單、`.nav-current` 等樣式 |
|
||||||
|
| `.cursor/rules/user-scope-and-nav.mdc` | 與本頁對齊的 Cursor 規則（意圖／導覽開放） |
|
||||||
|
| `.cursor/rules/ai-change-boundaries.mdc` | 變更範圍與共用 CSS 邊界 |
|
||||||
|
| `docs/CHANGESET-review.md` | 歷次變更檢查清單筆記 |
|
||||||
|
| `docs/sql/sql_plan.md` | SQL 練習／筆記 |
|
||||||
|
|
||||||
（導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
|
（導覽文案隨機句：`NAV_SOON_PHRASES`，僅影響籌備中連結的提示，與新頁是否開放無關。）
|
||||||
|
|||||||
@@ -0,0 +1,155 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-TW">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>水晶男孩｜六顆水晶 · 黑白分流</title>
|
||||||
|
<link rel="stylesheet" href="../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
||||||
|
<link rel="stylesheet" href="../assets/css/tablet.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="member-crystal-page">
|
||||||
|
<header class="map-archive-header">
|
||||||
|
<div class="header-inner">
|
||||||
|
<h1 class="main-title">六顆水晶</h1>
|
||||||
|
<div class="subtitle-wrap">
|
||||||
|
<span class="sub-title">BLACK KIES · WHITE KIES</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<nav class="portal-nav" aria-label="水晶男孩推廣部導覽" data-portal-nav></nav>
|
||||||
|
|
||||||
|
<canvas id="particles"></canvas>
|
||||||
|
|
||||||
|
<main class="content-container member-crystal-main" id="crystal-board">
|
||||||
|
<p class="member-crystal-lead">
|
||||||
|
團名源自德語「六顆水晶」：六位成員依聲線與舞台角色分為<strong>黑水晶</strong>（Rap／舞蹈）與<strong>白水晶</strong>（主唱），並排成經典的黑白分流印象。
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- 2×4 交錯：上排左三黑水晶、右一介紹；下排左一介紹、右三白水晶 -->
|
||||||
|
<div class="member-crystal-board" role="region" aria-label="黑水晶與白水晶成員配置">
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b1">
|
||||||
|
<article class="member-poster member-poster--black" aria-labelledby="poster-ejw">
|
||||||
|
<div class="member-poster__wanted">BLACK</div>
|
||||||
|
<div class="member-poster__sheet">
|
||||||
|
<div class="member-poster__photo">
|
||||||
|
<img src="../assets/images/Eun Ji Won.jpeg" alt="殷志源肖像" width="280" height="340" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p class="member-poster__role">Leader · Rap · Dance</p>
|
||||||
|
<h2 class="member-poster__name" id="poster-ejw">殷志源</h2>
|
||||||
|
<p class="member-poster__name-en">EUN JI WON</p>
|
||||||
|
<p class="member-poster__stamp">BLACK KIES</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b2">
|
||||||
|
<article class="member-poster member-poster--black" aria-labelledby="poster-ljj">
|
||||||
|
<div class="member-poster__wanted">BLACK</div>
|
||||||
|
<div class="member-poster__sheet">
|
||||||
|
<div class="member-poster__photo">
|
||||||
|
<img src="../assets/images/member/1595330620293.jpg" alt="李宰鎮肖像" width="280" height="340" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p class="member-poster__role">Rap · Dance</p>
|
||||||
|
<h2 class="member-poster__name" id="poster-ljj">李宰鎮</h2>
|
||||||
|
<p class="member-poster__name-en">LEE JAE JIN</p>
|
||||||
|
<p class="member-poster__stamp">BLACK KIES</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--poster" data-area="b3">
|
||||||
|
<article class="member-poster member-poster--black" aria-labelledby="poster-kjd">
|
||||||
|
<div class="member-poster__wanted">BLACK</div>
|
||||||
|
<div class="member-poster__sheet">
|
||||||
|
<div class="member-poster__photo">
|
||||||
|
<img src="../assets/images/member/4c0e013b341e85622979475bc230719b.jpg" alt="金在德肖像" width="280" height="340" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p class="member-poster__role">Rap · Dance</p>
|
||||||
|
<h2 class="member-poster__name" id="poster-kjd">金在德</h2>
|
||||||
|
<p class="member-poster__name-en">KIM JAE DUC</p>
|
||||||
|
<p class="member-poster__stamp">BLACK KIES</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-black" data-area="intro-black">
|
||||||
|
<div class="member-crystal-intro member-crystal-intro--black">
|
||||||
|
<h2 class="member-crystal-intro__title">黑水晶</h2>
|
||||||
|
<p class="member-crystal-intro__en">Black Kies</p>
|
||||||
|
<p>殷志源、李宰鎮、金在德：偏重節奏與舞台張力的路線，Rap 與舞蹈撐起現場骨架，也是團體在舞曲與嘻哈語彙上最容易被第一眼認出的「深色稜線」。</p>
|
||||||
|
<p>視覺上常以俐落、酷感與強烈節拍感與白水晶區隔；在編曲結構裡，常負責推進段落與製造記憶點的「引擎室」。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--intro member-crystal-cell--intro-white" data-area="intro-white">
|
||||||
|
<div class="member-crystal-intro member-crystal-intro--white">
|
||||||
|
<h2 class="member-crystal-intro__title">白水晶</h2>
|
||||||
|
<p class="member-crystal-intro__en">White Kies</p>
|
||||||
|
<p>姜成勳、高志溶、張水院：以主唱與和聲線條為核心，負責旋律的延展與情緒堆疊；許多主打裡讓人一聽就忘不掉的副歌與高音色彩，多半與這條「亮色聲帶」有關。</p>
|
||||||
|
<p>與黑水晶並列時，剛好形成「節奏骨架 × 旋律羽翼」的經典分工想像，也是團名裡「水晶」雙色對照最常見的說法來源。</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w1">
|
||||||
|
<article class="member-poster member-poster--white" aria-labelledby="poster-ksh">
|
||||||
|
<div class="member-poster__wanted">WHITE</div>
|
||||||
|
<div class="member-poster__sheet">
|
||||||
|
<div class="member-poster__photo">
|
||||||
|
<img src="../assets/images/member/92599-502183.jpg" alt="姜成勳肖像" width="280" height="340" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p class="member-poster__role">Main Vocal</p>
|
||||||
|
<h2 class="member-poster__name" id="poster-ksh">姜成勳</h2>
|
||||||
|
<p class="member-poster__name-en">KANG SUNG HOON</p>
|
||||||
|
<p class="member-poster__stamp">WHITE KIES</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w2">
|
||||||
|
<article class="member-poster member-poster--white" aria-labelledby="poster-kjy">
|
||||||
|
<div class="member-poster__wanted">WHITE</div>
|
||||||
|
<div class="member-poster__sheet">
|
||||||
|
<div class="member-poster__photo">
|
||||||
|
<img src="../assets/images/member/noona7273___Bt7EZHRAGgs___.jpg" alt="高志溶肖像" width="280" height="340" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p class="member-poster__role">Vocal</p>
|
||||||
|
<h2 class="member-poster__name" id="poster-kjy">高志溶</h2>
|
||||||
|
<p class="member-poster__name-en">KO JI YONG</p>
|
||||||
|
<p class="member-poster__stamp">WHITE KIES</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-crystal-cell member-crystal-cell--poster" data-area="w3">
|
||||||
|
<article class="member-poster member-poster--white" aria-labelledby="poster-jsw">
|
||||||
|
<div class="member-poster__wanted">WHITE</div>
|
||||||
|
<div class="member-poster__sheet">
|
||||||
|
<div class="member-poster__photo">
|
||||||
|
<img src="../assets/images/member/seven7lai_1___BuRBxcPAIsP___.jpg" alt="張水院肖像" width="280" height="340" loading="lazy">
|
||||||
|
</div>
|
||||||
|
<p class="member-poster__role">Vocal</p>
|
||||||
|
<h2 class="member-poster__name" id="poster-jsw">張水院</h2>
|
||||||
|
<p class="member-poster__name-en">JANG SU WON</p>
|
||||||
|
<p class="member-poster__stamp">WHITE KIES</p>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>SECHSKIES Fanpage © 2026 — 六顆水晶 · 黑白分流</p>
|
||||||
|
<a href="https://jekkinoopy.github.io/Portfolio/" class="studio-link" target="_blank" rel="noopener noreferrer">
|
||||||
|
Design by <span class="mark_b">Jekkinoopy Studio</span>
|
||||||
|
</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
<script src="../assets/js/portal-nav.js"></script>
|
||||||
|
<script src="../assets/js/particles.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -61,6 +61,16 @@
|
|||||||
<li><a href="grok.html#now">#now</a></li>
|
<li><a href="grok.html#now">#now</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<article class="site-guide-card">
|
||||||
|
<h3><a href="member.html">member.html</a></h3>
|
||||||
|
<p class="site-guide-meta">標題列：<cite>水晶男孩｜六顆水晶 · 黑白分流</cite></p>
|
||||||
|
<p class="site-guide-note">2×4 交錯格：左上三張黑水晶海報、右上黑水晶介紹；左下白水晶介紹、右下三張白水晶海報。</p>
|
||||||
|
<h4>區塊錨點</h4>
|
||||||
|
<ul>
|
||||||
|
<li><a href="member.html#crystal-board">#crystal-board</a></li>
|
||||||
|
</ul>
|
||||||
|
</article>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
@@ -114,6 +124,12 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
<article class="site-guide-card">
|
||||||
|
<h3><a href="../variety/NJTW/NJTW5.html">variety/NJTW/NJTW5.html</a></h3>
|
||||||
|
<p class="site-guide-meta">標題列：<cite>新西遊記：成員介紹</cite></p>
|
||||||
|
<p class="site-guide-note">綜藝子頁；全站導覽「瘋子與天才」子選單第三項可進入。</p>
|
||||||
|
</article>
|
||||||
|
|
||||||
<article class="site-guide-card">
|
<article class="site-guide-card">
|
||||||
<h3><a href="sunghoon.html">sunghoon.html</a></h3>
|
<h3><a href="sunghoon.html">sunghoon.html</a></h3>
|
||||||
<p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
|
<p class="site-guide-meta">標題列：<cite>水晶男孩｜消失的真相</cite></p>
|
||||||
|
|||||||
@@ -13,9 +13,17 @@
|
|||||||
<body class="ebook-ssg2-page totoga2-page">
|
<body class="ebook-ssg2-page totoga2-page">
|
||||||
<header class="map-archive-header">
|
<header class="map-archive-header">
|
||||||
<div class="header-inner">
|
<div class="header-inner">
|
||||||
|
<!-- 核心特輯名稱 -->
|
||||||
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
<h1 class="main-title">無限挑戰 · 六六歌2</h1>
|
||||||
|
|
||||||
|
<div class="main-content-title">
|
||||||
|
<span class="highlight-text">水晶男孩回來啦！</span>
|
||||||
|
<span class="eng-title">SECHSKIES COM' BACK</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="subtitle-wrap">
|
<div class="subtitle-wrap">
|
||||||
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
|
<span class="sub-title">INFINITE CHALLENGE · SIX SONGS 2 — E-BOOK</span>
|
||||||
|
<span class="event-date">APRIL 14, 2016</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|||||||
Binary file not shown.
|
After Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
@@ -0,0 +1,104 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-TW">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>新西遊記：成員介紹</title>
|
||||||
|
<link rel="stylesheet" href="../../assets/css/style.css">
|
||||||
|
<link rel="stylesheet" href="../../assets/css/tablet.css">
|
||||||
|
<link rel="stylesheet" href="njtw5.css">
|
||||||
|
<style>
|
||||||
|
/* 本頁專用：.nickname 只寫在 HTML（依你要求，未再放到 njtw5.css） */
|
||||||
|
body.njtw5-page .member-card .nickname {
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.65rem;
|
||||||
|
padding: 0.15rem 0;
|
||||||
|
font-size: max(14px, 0.92rem);
|
||||||
|
font-weight: 700;
|
||||||
|
color: #3d240c;
|
||||||
|
line-height: 1.5;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
opacity: 1;
|
||||||
|
visibility: visible;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 50px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="njtw5-page">
|
||||||
|
<header class="main-header">
|
||||||
|
<h1>新西遊記 5：與鬼神同行</h1>
|
||||||
|
<p class="intro">
|
||||||
|
這是一場驚心動魄（搞笑）的鬼怪盛宴！<br>
|
||||||
|
六位成員化身世界各地的經典鬼怪，展開一場前往香港與北海道的爆笑冒險。
|
||||||
|
</p>
|
||||||
|
</header>
|
||||||
|
<div class="container">
|
||||||
|
<!-- 第一排 -->
|
||||||
|
<div class="member-card m1">
|
||||||
|
<div class="member-image"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">姜鎬童</div>
|
||||||
|
<div class="role">無臉男 (鎬童臉)</div>
|
||||||
|
<span class="nickname">#吃貨精靈 #低聲細語</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-card m2">
|
||||||
|
<div class="member-image"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">李壽根</div>
|
||||||
|
<div class="role">恰吉</div>
|
||||||
|
<span class="nickname">#最強短腿 #瘋狂跑動</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-card m3">
|
||||||
|
<div class="member-image"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">殷志源</div>
|
||||||
|
<div class="role">陰間使者</div>
|
||||||
|
<span class="nickname">#瘋子使者 #最帥鬼怪</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 第二排 -->
|
||||||
|
<div class="member-card m4">
|
||||||
|
<div class="member-image"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">安宰賢</div>
|
||||||
|
<div class="role">殭屍 (新瘋)</div>
|
||||||
|
<span class="nickname">#美男殭屍 #運動白痴</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-card m5">
|
||||||
|
<div class="member-image"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">宋旻浩</div>
|
||||||
|
<div class="role">處女鬼</div>
|
||||||
|
<span class="nickname">#長髮宋 #綜藝神降臨</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="member-card m6">
|
||||||
|
<div class="member-image"></div>
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">P.O</div>
|
||||||
|
<div class="role">吸血鬼</div>
|
||||||
|
<span class="nickname">#新弟子 #德古拉</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,166 @@
|
|||||||
|
/**
|
||||||
|
* NJTW5 專用（與 NJTW5.html 同資料夾）
|
||||||
|
* 長條圖、各卡裁切位置請只改此檔。
|
||||||
|
*/
|
||||||
|
body.njtw5-page {
|
||||||
|
background-color: var(--surface-soft, #fff9e8);
|
||||||
|
color: var(--text-color, #333);
|
||||||
|
font-family: 'Noto Sans TC', system-ui, sans-serif;
|
||||||
|
margin: 0;
|
||||||
|
padding: clamp(16px, 4vw, 40px);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: clamp(20px, 3.5vw, 32px);
|
||||||
|
overflow-x: hidden;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .main-header {
|
||||||
|
width: 100%;
|
||||||
|
max-width: min(1000px, 100%);
|
||||||
|
box-sizing: border-box;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0 clamp(4px, 2vw, 12px);
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .main-header h1 {
|
||||||
|
margin: 0 0 0.65rem;
|
||||||
|
font-size: clamp(1.35rem, 4vw, 1.85rem);
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--dark-yellow, #4e492b);
|
||||||
|
line-height: 1.25;
|
||||||
|
letter-spacing: 0.02em;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .main-header .intro {
|
||||||
|
margin: 0;
|
||||||
|
font-size: clamp(0.9rem, 2.3vw, 1.05rem);
|
||||||
|
color: #444;
|
||||||
|
line-height: 1.65;
|
||||||
|
max-width: 42em;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
gap: clamp(12px, 2.5vw, 20px);
|
||||||
|
width: 100%;
|
||||||
|
max-width: min(1000px, 100%);
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .member-card {
|
||||||
|
min-width: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: var(--surface, #fffdf7);
|
||||||
|
border: 1px solid rgba(255, 204, 0, 0.38);
|
||||||
|
border-radius: 15px;
|
||||||
|
/* 勿對整卡 hidden，否則底部 .nickname 可能被裁掉、像「看不到」 */
|
||||||
|
overflow: visible;
|
||||||
|
text-align: center;
|
||||||
|
box-shadow: 0 8px 0 rgba(255, 204, 0, 0.28), 0 12px 24px rgba(0, 0, 0, 0.08);
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .member-card:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .member-image {
|
||||||
|
width: 100%;
|
||||||
|
height: clamp(200px, 32vw, 280px);
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #1a1812;
|
||||||
|
/* 長條圖檔與此 CSS 同資料夾；檔名不同請改 url */
|
||||||
|
background-image: url("1538074991_Fm.jpg");
|
||||||
|
/* background-size 改由各 .m1–.m6 單獨設定 */
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
border-bottom: 1px solid rgba(255, 204, 0, 0.4);
|
||||||
|
border-radius: 14px 14px 0 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 各卡：background-size、background-position 可逐張微調（圖檔見 .member-image） */
|
||||||
|
body.njtw5-page .m1 .member-image {
|
||||||
|
background-size: 600% auto;
|
||||||
|
background-position: 47% 48%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .m2 .member-image {
|
||||||
|
background-size: 600% auto;
|
||||||
|
background-position: 16% 81%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .m3 .member-image {
|
||||||
|
background-size: 600% auto;
|
||||||
|
background-position: 92% 18%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .m4 .member-image {
|
||||||
|
background-size: 600% auto;
|
||||||
|
background-position: 64% 8%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .m5 .member-image {
|
||||||
|
background-size: 600% auto;
|
||||||
|
background-position: 0% 17%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .m6 .member-image {
|
||||||
|
background-size: 600% auto;
|
||||||
|
background-position: 25% 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .info {
|
||||||
|
padding: clamp(10px, 2vw, 15px);
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .name {
|
||||||
|
font-size: clamp(1.1rem, 3.2vw, 1.5rem);
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--dark-yellow, #4e492b);
|
||||||
|
margin: 0 0 0.35rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
word-break: keep-all;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .role {
|
||||||
|
font-size: clamp(0.85rem, 2.2vw, 1rem);
|
||||||
|
color: #555;
|
||||||
|
background: rgba(255, 204, 0, 0.16);
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
padding: 0.2rem 0.55rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(255, 204, 0, 0.35);
|
||||||
|
line-height: 1.35;
|
||||||
|
word-break: keep-all;
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
body.njtw5-page .container {
|
||||||
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
body.njtw5-page .member-card {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
body.njtw5-page .member-card:hover {
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user