@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500&family=Libre+Baskerville:ital,wght@0,400;1,400&family=Spectral:ital,wght@0,400;1,400&display=swap'); @property --bg-r { syntax: ''; initial-value: 8; inherits: true; } @property --bg-g { syntax: ''; initial-value: 8; inherits: true; } @property --bg-b { syntax: ''; initial-value: 8; inherits: true; } :root { --mask-height: 120px; } /* ── Colour themes ────────────────────────────────────────────────────────── Applied via data-theme="dark|light|gray" on . Contrast ratios target shadcn standard: --text ≥ 7:1 primary reading --text-dim ≥ 4.5:1 muted-foreground (shadcn AA) --text-faint ≥ 3:1 subtle / decorative --accent ≥ 4.5:1 whisper lines --nav-active = --text --nav-inactive ≥ 3:1 --nav-hover ≥ 5:1 */ /* dark bg ≈ #080808 L≈0.001 */ [data-theme="dark"] { --text: #d8d8d8; /* 14.2:1 */ --text-dim: #a0a0a0; /* 7.0:1 */ --text-faint: #787878; /* 4.5:1 */ --accent: #909090; /* 6.1:1 */ --nav-active: #d8d8d8; --nav-inactive: #787878; /* 4.5:1 */ --nav-hover: #b0b0b0; /* 9.3:1 */ } /* light bg ≈ #eef1f6 L≈0.864 */ [data-theme="light"] { --text: #1a1a1a; /* 16.2:1 */ --text-dim: #4a4a4a; /* 8.8:1 */ --text-faint: #6c6c6c; /* 4.6:1 */ --accent: #5a5a5a; /* 7.5:1 */ --nav-active: #1a1a1a; --nav-inactive: #7a7a7a; /* 4.1:1 */ --nav-hover: #333333; /* 12.2:1 */ } /* gray bg ≈ #50505a L≈0.100 */ [data-theme="gray"] { --text: #f0f0f0; /* 6.2:1 */ --text-dim: #d0d0d0; /* 4.5:1 */ --text-faint: #a8a8a8; /* 3.1:1 */ --accent: #bcbcbc; /* 3.7:1 */ --nav-active: #f0f0f0; --nav-inactive: #a8a8a8; /* 3.1:1 */ --nav-hover: #e0e0e0; /* 5.4:1 */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { background: rgb(var(--bg-r), var(--bg-g), var(--bg-b)); color: var(--text); font-family: 'Noto Sans TC', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; overflow: hidden; height: 100vh; transition: --bg-r 0.8s ease, --bg-g 0.8s ease, --bg-b 0.8s ease; } .container { display: flex; height: 100vh; position: relative; } .nav { width: 200px; min-width: 200px; height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 0 2rem; position: fixed; left: 0; top: 0; z-index: 10; } .nav-title { font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 400; font-size: 0.62rem; letter-spacing: 0.18em; color: var(--text-faint); margin-bottom: 2.5rem; line-height: 1.7; } .nav-back { font-family: 'Libre Baskerville', serif; font-style: italic; font-weight: 400; font-size: 0.6rem; letter-spacing: 0.15em; color: var(--text-faint); text-decoration: none; margin-bottom: 1.2rem; display: block; transition: color 0.4s ease; } .nav-back:hover { color: var(--text-dim); } .nav-item { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.45rem 0; cursor: pointer; transition: color 0.5s ease, opacity 0.5s ease; color: var(--nav-inactive); text-decoration: none; position: relative; } .nav-item:hover { color: var(--nav-hover); } .nav-item.active { color: var(--nav-active); } .nav-degree { font-family: 'Spectral', serif; font-style: italic; font-weight: 400; font-size: 0.85rem; letter-spacing: 0.15em; min-width: 3.2em; } .nav-label { font-size: 0.75rem; letter-spacing: 0.12em; font-weight: 400; } .content-wrapper { margin-left: 0; flex: 1; height: 100vh; position: relative; overflow: hidden; } .content { height: 100%; overflow-y: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; } .content::-webkit-scrollbar { display: none; } .mask-top, .mask-bottom { position: fixed; left: 0; right: 0; height: var(--mask-height); pointer-events: none; z-index: 15; } .mask-top { top: 0; background: linear-gradient(to bottom, rgb(var(--bg-r),var(--bg-g),var(--bg-b)) 0%, rgba(var(--bg-r),var(--bg-g),var(--bg-b),0) 100%); } .mask-bottom { bottom: 0; background: linear-gradient(to top, rgb(var(--bg-r),var(--bg-g),var(--bg-b)) 0%, rgba(var(--bg-r),var(--bg-g),var(--bg-b),0) 100%); } .section { min-height: 100vh; padding: 15vh 4rem 20vh; display: flex; justify-content: center; } .section-inner { max-width: 520px; width: 100%; } .section-header { margin-bottom: 6rem; } .section-degree { font-family: 'Spectral', serif; font-style: italic; font-weight: 400; font-size: 0.85rem; letter-spacing: 0.3em; color: var(--text-dim); margin-bottom: 1.2rem; } .section-title { font-weight: 400; font-size: 1.5rem; letter-spacing: 0.2em; color: var(--text); } .stanza { margin-bottom: 3.2rem; opacity: 0; transform: translateY(8px); transition: opacity 1.2s ease, transform 1.2s ease; } .stanza.visible { opacity: 1; transform: translateY(0); } .line { font-size: 1.05rem; line-height: 2.2; letter-spacing: 0.06em; color: var(--text); } .line.whisper { color: var(--accent); } .stanza.solo .line { color: var(--accent); } .breath { height: 3rem; } .breath-long { height: 5rem; } .cw-note { font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text-faint); margin-bottom: 4rem; font-style: italic; } .poem-end { padding: 20vh 4rem; display: flex; justify-content: center; background: transparent; } .poem-end-inner { max-width: 520px; width: 100%; text-align: center; } .poem-end-note { font-family: 'Libre Baskerville', serif; font-style: italic; font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-faint); line-height: 2; } .poem-end-sep { width: 40px; height: 1px; background: var(--text-faint); margin: 2rem auto; } /* ── Audio player ── */ .poem-audio { display: flex; align-items: center; gap: 1rem; margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--text-faint); } .audio-play { background: none; border: none; cursor: pointer; color: var(--text-dim); font-size: 0.75rem; padding: 0; line-height: 1; flex-shrink: 0; transition: color 0.3s ease; } .audio-play:hover { color: var(--text); } .audio-bar { flex: 1; height: 1px; background: var(--text-faint); position: relative; cursor: pointer; } .audio-progress { position: absolute; top: 0; left: 0; height: 100%; background: var(--text-dim); width: 0%; transition: width 0.1s linear; } .audio-time { font-size: 0.6rem; letter-spacing: 0.08em; color: var(--text-faint); min-width: 4em; text-align: right; flex-shrink: 0; } @media (max-width: 768px) { html { overflow-x: hidden; } .nav { width: auto; min-width: unset; height: auto; max-height: 100vh; position: fixed; top: 0; right: 0; left: auto; flex-direction: column; justify-content: flex-start; align-items: flex-end; gap: 0; padding: 1.5rem 1rem 1.5rem 0.8rem; background: transparent; z-index: 20; } .nav-title { display: none; } .nav-item { padding: 0.4rem 0; flex-direction: column; align-items: flex-end; gap: 0.08rem; } .nav-degree { font-size: 0.72rem; min-width: unset; letter-spacing: 0.08em; } .nav-label { font-size: 0.62rem; letter-spacing: 0.06em; } .content-wrapper { margin-left: 0; margin-top: 0; } .nav-back { font-size: 0.65rem; margin-bottom: 0.8rem; } /* right pad clears the fixed nav; left pad balances */ .section { padding: 12vh 5rem 14vh 3rem; } .section:first-child { padding-top: 12vh; } .section-header { margin-bottom: 4rem; } .section-title { font-size: 1.5rem; } .line { font-size: 1.05rem; line-height: 2.2; } .stanza { margin-bottom: 2.8rem; } .breath { height: 2.2rem; } .breath-long { height: 3.5rem; } .poem-end { padding: 12vh 0; } :root { --mask-height: 80px; } } @media (max-width: 380px) { .nav-degree { font-size: 0.68rem; } .nav-label { display: none; } .section { padding: 10vh 4.5rem 12vh 2.5rem; } .line { font-size: 1rem; } .section-title { font-size: 1.35rem; } }