diff --git a/member/kim-jaeduck-fan-site.html b/member/kim-jaeduck-fan-site.html index 8f5578e..f2b5150 100644 --- a/member/kim-jaeduck-fan-site.html +++ b/member/kim-jaeduck-fan-site.html @@ -1,280 +1,807 @@ + - - -JAEDUCK — Fan Archive - + .menu a { + padding: 4px 0; + border-bottom: 1px solid transparent + } + + .menu a:hover { + border-color: var(--accent) + } + + .back { + font-size: 11px; + color: var(--muted); + letter-spacing: .05em; + white-space: nowrap + } + + .back:hover { + color: var(--ink) + } + + /* hero */ + .hero { + padding: 56px 0 0; + border-bottom: 1px solid var(--line); + overflow: hidden; + } + + .hero-grid { + display: grid; + grid-template-columns: 1.1fr .9fr; + gap: 0; + align-items: end + } + + .hero-copy { + padding-bottom: 56px + } + + .eyebrow { + font-size: 11px; + letter-spacing: .22em; + text-transform: uppercase; + color: var(--muted); + margin-bottom: 16px + } + + h1.hero-title { + font-size: clamp(56px, 10vw, 132px); + line-height: .86; + margin: 0 0 22px; + letter-spacing: -.05em; + font-weight: 950; + } + + .hero-copy p { + font-size: 17px; + line-height: 1.8; + margin: 0 0 22px; + max-width: 440px; + color: #3a352f + } + + .tag { + display: inline-block; + border: 1px solid var(--ink); + padding: 7px 13px; + border-radius: 999px; + font-size: 11px; + letter-spacing: .04em; + margin: 0 7px 7px 0 + } + + .hero-photo { + position: relative; + align-self: stretch; + min-height: 420px; + border-radius: 20px 20px 0 0; + overflow: hidden; + background: #d8cbae; + } + + .hero-photo img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 15% + } + + .hero-photo .cap { + position: absolute; + left: 18px; + bottom: 18px; + color: #fff; + font-size: 11px; + letter-spacing: .1em; + text-shadow: 0 1px 6px rgba(0, 0, 0, .5); + } + + /* sections */ + section { + padding: 78px 0; + border-bottom: 1px solid var(--line) + } + + .section-head { + display: flex; + align-items: end; + justify-content: space-between; + gap: 30px; + margin-bottom: 36px; + flex-wrap: wrap + } + + .section-head h2 { + margin: 0; + font-size: clamp(32px, 5vw, 58px); + letter-spacing: -.04em + } + + .section-num { + font-size: 11px; + letter-spacing: .2em; + color: var(--muted); + margin-bottom: 8px + } + + .sub { + color: var(--muted); + font-size: 13px; + max-width: 440px; + line-height: 1.75; + text-align: left + } + + /* profile */ + .profile-grid { + display: grid; + grid-template-columns: .8fr 1.2fr; + gap: 34px; + align-items: start + } + + .profile-photo { + border-radius: 16px; + overflow: hidden; + background: #d8cbae; + aspect-ratio: 4/5 + } + + .profile-photo img { + width: 100%; + height: 100%; + object-fit: cover; + object-position: center 12% + } + + .spec-list { + display: grid; + gap: 0; + border-top: 1px solid var(--line) + } + + .spec-row { + display: grid; + grid-template-columns: 120px 1fr; + gap: 20px; + padding: 16px 0; + border-bottom: 1px solid var(--line) + } + + .spec-row .k { + font-size: 11px; + letter-spacing: .14em; + color: var(--muted); + text-transform: uppercase; + padding-top: 2px + } + + .spec-row .v { + font-size: 15px; + line-height: 1.7; + text-align: left + } + + /* timeline */ + .timeline { + display: grid; + gap: 0 + } + + .row { + display: grid; + grid-template-columns: 110px 1fr; + gap: 24px; + padding: 22px 0; + border-top: 1px solid var(--line) + } + + .row:first-child { + border-top: 0 + } + + .year { + font-weight: 800; + font-size: 18px + } + + .row p { + margin: 0; + color: #4a453e; + line-height: 1.8; + text-align: left + } + + /* grid cards generic */ + .grid3 { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 16px + } + + .grid4 { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 16px + } + + .card { + background: var(--card); + border: 1px solid var(--line); + border-radius: 16px; + padding: 22px; + min-height: 150px; + display: flex; + flex-direction: column + } + + .card .tagline { + font-size: 11px; + letter-spacing: .12em; + color: var(--muted); + margin-bottom: auto; + padding-bottom: 30px; + text-transform: uppercase + } + + .card h3 { + margin: 0 0 8px; + font-size: 19px + } + + .card p { + margin: 0; + color: #5d5751; + line-height: 1.7; + font-size: 13.5px; + text-align: left + } + + /* gallery */ + .gallery { + display: grid; + grid-template-columns: 1.3fr .7fr .7fr; + gap: 14px + } + + .ph { + min-height: 270px; + border-radius: 16px; + border: 1px solid var(--line); + background: + radial-gradient(circle at 25% 25%, rgba(201, 154, 61, .35), transparent 24%), + linear-gradient(135deg, #ebe1c9, #faf5e9 60%, #ddd0b0); + display: flex; + align-items: end; + padding: 16px; + font-size: 11px; + letter-spacing: .08em; + color: #7a705f; + } + + .ph.tall { + min-height: 558px + } + + /* videos */ + .video-card { + background: var(--card); + border: 1px solid var(--line); + border-radius: 16px; + overflow: hidden + } + + .video-thumb { + aspect-ratio: 16/9; + background: linear-gradient(135deg, #2b2620, #171410); + display: flex; + align-items: center; + justify-content: center; + position: relative; + } + + .video-thumb .play { + width: 52px; + height: 52px; + border-radius: 50%; + background: rgba(255, 255, 255, .92); + display: flex; + align-items: center; + justify-content: center; + } + + .video-thumb .play::after { + content: ""; + border-left: 14px solid #161310; + border-top: 9px solid transparent; + border-bottom: 9px solid transparent; + margin-left: 4px + } + + .video-body { + padding: 16px 18px + } + + .video-body .cat { + font-size: 10px; + letter-spacing: .14em; + color: var(--accent); + text-transform: uppercase; + margin-bottom: 6px + } + + .video-body h3 { + margin: 0; + font-size: 16px + } + + .video-body p { + margin: 6px 0 0; + font-size: 12.5px; + color: var(--muted); + text-align: left + } + + /* updates */ + .updates { + border-top: 1px solid var(--line) + } + + .update-row { + display: grid; + grid-template-columns: 100px 1fr; + gap: 20px; + padding: 18px 0; + border-bottom: 1px solid var(--line) + } + + .update-row .date { + font-size: 11px; + letter-spacing: .06em; + color: var(--muted); + padding-top: 2px + } + + .update-row .body { + text-align: left + } + + .update-row .body .kicker { + font-size: 10px; + letter-spacing: .12em; + color: var(--accent); + text-transform: uppercase; + margin-bottom: 4px + } + + .update-row .body p { + margin: 0; + font-size: 14px; + line-height: 1.7; + color: #3a352f + } + + /* taiwan */ + .tw-grid { + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 16px + } + + .tw-card { + background: var(--card); + border: 1px solid var(--line); + border-radius: 16px; + padding: 24px + } + + .tw-card h3 { + margin: 0 0 10px; + font-size: 18px; + display: flex; + align-items: center; + gap: 10px + } + + .tw-card .dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--accent); + flex: none + } + + .tw-card p { + margin: 0; + color: #5d5751; + line-height: 1.75; + font-size: 13.5px; + text-align: left + } + + /* stickers */ + .sticker-note { + display: flex; + align-items: center; + gap: 8px; + font-size: 12px; + color: var(--muted); + margin-bottom: 30px; + padding: 12px 16px; + border: 1px dashed var(--line); + border-radius: 12px; + max-width: 560px; + text-align: left; + line-height: 1.7; + } + + /* 目前貼圖 02～04 註解中，僅剩 1 張卡片；用 auto-fill 讓格線跟著實際卡片數走，之後補回卡片會自動變回 4 欄 */ + .sticker-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(220px, 240px)); + gap: 16px + } + + .sticker-card { + background: var(--card); + border: 1px solid var(--line); + border-radius: 18px; + overflow: hidden; + display: flex; + flex-direction: column; + } + + .sticker-tag { + padding: 10px 14px; + font-size: 10.5px; + letter-spacing: .12em; + text-transform: uppercase; + color: var(--muted); + border-bottom: 1px solid var(--line); + } + + .sticker-art { + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + background: linear-gradient(150deg, #efe4c8, #dccb9d); + transition: transform .35s ease; + } + + .sticker-art svg { + width: 56%; + height: 56% + } + + .sticker-art--photo { + background: #efe4c8; + padding: 14% + } + + .sticker-art--photo img { + width: 100%; + height: 100%; + object-fit: contain + } + + .sticker-art--soon { + background: repeating-linear-gradient(135deg, #e7dcc0, #e7dcc0 10px, #ded1af 10px, #ded1af 20px) + } + + .sticker-art--soon span { + font-size: 11px; + letter-spacing: .1em; + color: #6b6152; + background: rgba(255, 252, 245, .85); + padding: 6px 12px; + border-radius: 999px + } + + .sticker-card a.sticker-link { + display: block + } + + .sticker-card a.sticker-link:hover .sticker-art { + transform: scale(1.04) + } + + .sticker-info { + padding: 14px 16px 18px; + display: flex; + flex-direction: column; + gap: 4px + } + + .sticker-info .name { + font-size: 14px; + font-weight: 800 + } + + .sticker-info .source { + font-size: 11px; + color: var(--muted) + } + + footer { + padding: 44px 0 60px; + color: #8a8071; + font-size: 11px; + line-height: 1.8; + text-align: left + } + + @media(max-width:960px) { + .grid4 { + grid-template-columns: repeat(2, 1fr) + } + + .profile-grid { + grid-template-columns: 1fr + } + } + + @media(max-width:800px) { + .menu { + display: none + } + + .hero-grid { + grid-template-columns: 1fr + } + + .hero-photo { + min-height: 340px; + border-radius: 16px + } + + .hero-copy { + padding-top: 26px; + padding-bottom: 34px + } + + .grid3, + .gallery { + grid-template-columns: 1fr + } + + .gallery .ph, + .ph.tall { + min-height: 280px + } + + .row { + grid-template-columns: 76px 1fr + } + + .update-row { + grid-template-columns: 76px 1fr + } + + .tw-grid { + grid-template-columns: 1fr + } + } + + -
-
- - JAEDUCK ARCHIVE - SECHSKIES · FAN PROJECT - - - ← 六顆水晶 -
-
- -
- -
-
-
-
Sechs Kies · Black Kies · Fan Archive
-

JAEDUCK

-

一個以金在德為核心整理的粉絲企劃頁——舞台上的節奏擔當，鏡頭外的沉穩存在。這裡收著他的資料、時間軸與台灣粉絲的一點心意，慢慢補、慢慢留。

- 김재덕 - 젝스키스 - KIM JAEDUCK - TAIWAN FAN PAGE -
-
- 金在德肖像 - BLACK KIES · RAP / DANCE -
+
+
+ + JAEDUCK ARCHIVE + SECHSKIES · FAN PROJECT + + +
-
+ -
-
-
-
-
01 · ABOUT
-

Profile

+
+ +
+
+
+
Sechs Kies · Black Kies · Fan Archive
+

JAEDUCK

+

一個以金在德為核心整理的粉絲企劃頁——舞台上的節奏擔當，鏡頭外的沉穩存在。這裡收著他的資料、時間軸與台灣粉絲的一點心意，慢慢補、慢慢留。

+ 김재덕 + 젝스키스 + KIM JAEDUCK + TAIWAN FAN PAGE
-
舞台上負責節奏與張力的一角，水晶男孩黑水晶陣線核心之一。
-
-
-
+
金在德肖像 -
-
-
Name
金在德 · 김재덕 · Kim Jaeduck
-
Group
SECHSKIES（水晶男孩）
-
Unit
Black Kies — 舞蹈與節奏路線
-
Birthday
8月7日
-
Debut
1997 年出道
-
Note
舞台上的重心與節拍感，是黑水晶編排裡最常被記住的動作線條之一。
+ BLACK KIES · RAP / DANCE
-
-
+
-
-
-
-
-
02 · JOURNEY
-

Timeline

+
+
+
+
+
01 · ABOUT
+

Profile

+
+
舞台上負責節奏與張力的一角，水晶男孩黑水晶陣線核心之一。
+
+
+
+ 金在德肖像 +
+
+
+
Name
+
金在德 · 김재덕 · Kim Jaeduck
+
+
+
Group
+
SECHSKIES（水晶男孩）
+
+
+
Unit
+
Black Kies — 舞蹈與節奏路線
+
+
+
Birthday
+
8月7日
+
+ +
+
Note
+
Back + Down!!!
舞台上的重心與節拍感，是韓國末世紀裡最常被提及的舞蹈高手之一。 +
+
+
-
從出道到合體，一段留給水晶男孩、也留給金在德的時間軸。
-
-
1997

水晶男孩出道，六人以黑白水晶的分工站上舞台，金在德在其中負責舞蹈與節奏線條。

-
2000

團體活動告一段落，各自往不同的路走去，那份默契先被收進記憶裡。

-
2016

六人重新站回同一個舞台，粉絲們才明白，原來只是換個方式一起變老。

-
2019 至今

陸續透過舞台、綜藝與活動延續水晶男孩的故事，金在德仍是那個穩住節奏的存在。

-
2026

這個 Fan Archive 持續整理中，歡迎之後陸續補上更多片段。

-
-
-
+ +
+
+
+
+
02 · JOURNEY
+

Timeline

+
+
從出道到合體，一段留給水晶男孩、也留給金在德的時間軸。
+
+
+
+
1997
+

水晶男孩出道，六人以黑白水晶的分工站上舞台，金在德在其中負責舞蹈與節奏線條。

+
+
+
2000
+

團體活動告一段落，各自往不同的路走去，那份默契先被收進記憶裡。

+
+
+
2016
+ +

六人重新站回同一個舞台，想念小黃想念成員想念舞台，在德幸福地眼眶含淚。

+
+
+
2019 至今
+

陸續透過舞台、綜藝與活動延續水晶男孩的故事，金在德仍是那個穩住節奏的存在。

+
+
+
2026
+

這個 Fan Archive 持續整理中，歡迎之後陸續補上更多片段。

+
+
+
+
+ + + -
-
-
-
-
07 · GOODS
-

繁體貼圖整理

-
-
水晶男孩相關的繁中貼圖收藏區，點圖即可前往各自的 LINE 頁面。
-
-
收錄幾組粉絲繪製的水晶男孩相關繁體貼圖，各自連到對應的 LINE 貼圖頁面，來源標示於圖片下方。
-
- -
-
繁體貼圖
- -
- 松鼠德德貼圖 -
- -
-
松鼠德德
-
來源：LINE 貼圖商店
+
+
+
+
+
03 · fans
+

Fan Site

+
收錄粉絲各種應援水晶男孩的方式。
陸續更新中，會一一詢問創作者是否願意公開在此站。
+
+
+ + +
+ 松鼠德德貼圖 +
+ +
+
松鼠德德
+
來源：LINE 貼圖
+
+
+ + + +
-
-
+ -
+ - + - + + \ No newline at end of file