.story-timeline { position: relative; max-width: 1000px; margin: 50px auto; padding: 20px 0; } /* 中央貫穿軸線 */ .story-timeline::after { content: ''; position: absolute; width: 6px; background-color: var(--color-brand); top: 0; bottom: 0; left: 50%; margin-left: -3px; border-radius: 10px; } .timeline-box { padding: 10px 40px; position: relative; width: 50%; box-sizing: border-box; } /* 圓形節點 */ .timeline-box::after { content: '\f3a5'; font-family: "Font Awesome 6 Free" !important; position: absolute; width: 10px; height: 10px; right: -20px; top: 15px; z-index: 1; display: flex; justify-content: center; align-items: center; color: var(--color-brand); text-shadow: 0 0 8px rgba(255, 215, 0, 0.5); } /* 左右交錯控制 */ .left { left: 0; text-align: right; } .right { left: 50%; text-align: left; } /* 日期標籤(膠囊型) */ .date-tag { display: inline-block; padding: 8px 20px; background: var(--color-brand); color: var(--color-text-dark); border-radius: 50px; font-weight: bold; margin-bottom: 10px; } .content h3 { color: var(--color-brand); margin: 10px 0; } .content p { color: var(--color-text-muted); line-height: 1.6; } #stage .stage-teaser { margin-bottom: 1.75rem; padding-bottom: 1.25rem; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } #stage .stage-teaser:last-of-type { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; } /* albums/albums.html:.archive-block 已改為
,沿用 style.css 的 section 卡片版型 */ section.archive-block p { font-size: 1.0625rem; color: #4a4a4a; line-height: 1.75; margin: 0 0 1.125rem; } section.archive-block p:last-child { margin-bottom: 0; } /* albums/albums.html:精選作品表(含封面欄) */ .archive-discography { width: 100%; margin-top: 1.25rem; } .archive-discography .album-cover-cell { width: 96px; vertical-align: middle; text-align: center; padding: 10px 8px; } .archive-discography .album-cover-cell img { width: 76px; height: 76px; object-fit: cover; border-radius: 10px; border: 1px solid rgba(255, 204, 0, 0.28); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); display: block; margin: 0 auto; background: #fff; } .archive-discography tbody tr.archive-row-spotify { cursor: pointer; } .archive-discography tbody tr.archive-row-spotify:hover td { background-color: rgba(255, 204, 0, 0.06); } .archive-discography tbody tr.archive-row-spotify:focus-visible { outline: 2px solid rgba(255, 204, 0, 0.65); outline-offset: -2px; } .landing-intro { text-align: center; padding: 28px 0 48px; } .landing-actions .btn { margin: 8px 6px; } /* albums 等:archive-intro 內段落為內文層(非短字層) */ section.archive-intro p { text-align: left; margin-top: 8px; } /* ---------- 首頁 home-page:閱讀寬度與字級(弱化對 vw 的依賴) ---------- */ /* * 首頁 hero 主標/副標:與全站 .site-header-inner 相同(index.css 在 style.css 之後載入)。 * 若留舊版 .home-page header .hero h1 { color: var(--color-brand); text-shadow: … } 會蓋過 style.css。 */ .home-page header#origin .site-header-inner .main-title { font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 900; color: var(--color-text); letter-spacing: 6px; margin: 0; text-shadow: none; } .home-page header#origin .site-header-inner .sub-title { font-size: 0.92rem; letter-spacing: 4px; color: var(--color-text-muted); text-transform: uppercase; } /* 首頁 Hero 副標雙線:僅 header#origin 內 .site-header-inner(不影響 portal-nav、#timeline 等區塊 .subtitle-wrap) */ header#origin .site-header-inner .subtitle-wrap { width: 100%; max-width: min(40rem, 94vw); margin: 20px auto 0; } header#origin .site-header-inner .subtitle-wrap::before, header#origin .site-header-inner .subtitle-wrap::after { content: ""; display: block; flex: 0 0 56px; width: 56px; min-width: 56px; max-width: 56px; height: 3px; background-color: #5c5c5c; opacity: 1; } .home-page .container { max-width: min(1200px, calc(100% - 2rem)); width: 100%; margin-inline: auto; padding: 2.5rem 1.25rem; box-sizing: border-box; } .home-page #start .intro-text, .home-page .container>section .intro-text { max-width: 42rem; margin-inline: auto; } .home-page #start .intro-text p.intro-text, .home-page #start .core-description, .home-page #start .call-to-action, .home-page .container>section .intro-text>p.intro-text, .home-page .container>section .intro-text .core-description, .home-page .container>section .intro-text .call-to-action { font-size: 1.0625rem; line-height: 1.75; color: #4a4a4a; margin: 0 0 1.125rem; } .home-page #start .intro-text p:last-child { margin-bottom: 0; } /* 入坑歷程:手繪感雙線波浪黃底線(SVG 拼貼,略不規則) */ .home-page #start .fan-journey-wave { display: inline; padding: 0 0.04em 0.42em; background-image: url("../images/fan-journey-wave-underline.svg"); background-repeat: repeat-x; background-position: left 0 bottom 3px; background-size: 280px 0.62em; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .home-page #start .fan-journey-wave i { margin: 0 0.18em; color: rgba(180, 140, 0, 0.72); font-size: 0.78em; vertical-align: 0.08em; } @media (max-width: 520px) { .home-page #start .fan-journey-wave { background-size: min(220px, 100%) 0.58em; } } /* 與首頁同欄寬:區塊內列表(minister_ge 等) */ .home-page .container>section .intro-text ul { margin: 0.5rem 0 0; padding-left: 1.2rem; color: #4a4a4a; line-height: 1.75; font-size: 1.0625rem; } .home-page .container>section .intro-text ul li { margin-bottom: 0.75rem; } .home-page .container>section .intro-text ul li:last-child { margin-bottom: 0; } /* 頂部一句話(深色底上,與舊 minister-hero-lead 同角色) */ .home-page .landing-intro { color: #ececec; max-width: 48rem; margin-inline: auto; } .home-page .landing-intro p { font-size: 1.1rem; line-height: 1.65; margin: 0; } .home-page .landing-intro .mark_b { color: var(--color-brand-light); } .home-page #intro .intro-text .slogan-quote--awakening + .core-description { margin-top: 1rem; } /* 頁尾 CTA 區(首頁 landing-actions 延伸) */ .home-page .container>.landing-actions { text-align: center; margin-top: 0.5rem; margin-bottom: 2rem; } /* minister_ge · 推廣部進化史:年份僅在軸標 data-era;卡內 h3 僅螢幕閱讀器可見 */ .home-page #journey .journey-year-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* 推廣部進化史:副標白票。2016 僅用你提供的三個數值;年分黃票不改(沿用 style.css 的 ::after) */ .home-page #journey .merged-storyline .story-node:has(.journey-sublabel) { padding-top: 42px; } /* 疊序(僅此區):軸點鑽石 < 副標白票 < 年分黃標(標題在上) */ .home-page #journey .merged-storyline .story-node::before { z-index: 2; } .home-page #journey .merged-storyline .story-node::after { z-index: 6; } .home-page #journey .merged-storyline .story-node .journey-sublabel { position: absolute; z-index: 3; margin: 0; padding: 4px 10px; border-radius: 8px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.05em; line-height: 1.25; color: #2a2a2a; text-align: center; background: linear-gradient(180deg, #fffef6 0%, #fff3d6 100%); border: 2px solid #fff; box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.12); max-width: 8rem; box-sizing: border-box; } /* 2016 基準(奇,靠軸角在右上):你給的 right / top / 角 */ .home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel { right: 45px; top: -8px; transform: rotate(-10deg); transform-origin: center center; } /* 2017 鏡像(偶,靠軸角在左上):角度 +10°;left 依實機微調 */ .home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel { left: 40px; top: 2px; transform: rotate(10deg); transform-origin: center center; } .home-page #journey .merged-storyline .story-node .journey-sublabel + .journey-month { margin-top: 0.5rem; } .home-page #journey .merged-storyline .story-node .journey-month { margin: 0.75rem 0 0.3rem; padding: 0.32rem 0.7rem 0.32rem 0; border-right: 3px solid var(--color-brand); border-left: 0; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.1em; color: #6b5210; line-height: 1.35; background: linear-gradient(270deg, rgba(255, 204, 0, 0.14) 0%, transparent 100%); } .home-page #journey .merged-storyline .story-node .journey-month + p { margin-top: 0; margin-bottom: 0.35rem; } .home-page #journey .merged-storyline .story-node .journey-milestone { margin: 1rem 0 0.35rem; padding-top: 0.5rem; border-top: 1px dashed rgba(255, 204, 0, 0.45); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; color: #8a6910; } .home-page #journey .merged-storyline .story-node .journey-milestone + p { margin-top: 0; } .home-page #story > p.intro-text { max-width: 44rem; margin-inline: auto; margin-bottom: 1.25rem; font-size: 1.0625rem; line-height: 1.75; color: #4a4a4a; } @media (max-width: 900px) { /* 主軸在左:僅微調副標橫向;年分仍用全站 merged-storyline 規則 */ .home-page #journey .merged-storyline .story-node:nth-of-type(odd):has(.journey-sublabel) .journey-sublabel { left: 48px; right: auto; top: -8px; transform: rotate(-10deg); } .home-page #journey .merged-storyline .story-node:nth-of-type(even):has(.journey-sublabel) .journey-sublabel { left: 58px; right: auto; top: 2px; transform: rotate(10deg); } } @media (max-width: 640px) { .home-page .container { padding: 1.75rem 1rem; } .home-page #start .intro-text p.intro-text, .home-page #start .core-description, .home-page #start .call-to-action, .home-page .container>section .intro-text>p.intro-text, .home-page .container>section .intro-text .core-description, .home-page .container>section .intro-text .call-to-action, .home-page .container>section .intro-text ul, .home-page #story > p.intro-text { font-size: 1rem; } } /* 首頁時間軸末:2019/NOW 改為未完待續占位 */ .home-page #timeline .story-node--tbc { text-align: center; } .home-page #timeline .story-node--tbc h3 { margin: 0; white-space: nowrap; } /* 入坑歷程:波浪底線平移+箭頭輕推(僅首頁 #start) */ @keyframes fan-journey-wave-drift { 0% { background-position: left 0 bottom 3px; } 100% { background-position: left 280px bottom 3px; } } @keyframes fan-journey-arrow-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } } @media (prefers-reduced-motion: no-preference) { .home-page #start .fan-journey-wave { animation: fan-journey-wave-drift 14s linear infinite; } .home-page #start .fan-journey-wave i { animation: fan-journey-arrow-nudge 1.35s ease-in-out infinite; } } /* 成立的初衷:↑ 指示輕跳(僅首頁 #mission) */ @keyframes mission-arrow-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @media (prefers-reduced-motion: no-preference) { .home-page #mission .logo-wrapper .arrow-icon, .home-page #mission .mission-moment-wrap .arrow-icon { display: inline-block; animation: mission-arrow-bounce 1.85s ease-in-out infinite; } } @media (prefers-reduced-motion: reduce) { .home-page #start .fan-journey-wave, .home-page #start .fan-journey-wave i, .home-page #mission .logo-wrapper .arrow-icon, .home-page #mission .mission-moment-wrap .arrow-icon { animation: none; } }