/* style.css — 好學生筆記 首頁 Pure-white earth-tone library aesthetic. ──────────────────────────────────────────────────────────────────────── */ :root { /* Paper & ink */ --paper: #F7F1E4; /* warm off-white, slightly cream */ --paper-soft: #F1EAD8; --paper-deep: #E8DFC8; --ink: #1B1813; --ink-soft: #3C362B; --ink-mute: #7A7264; --ink-faint: #B8AE99; --rule: rgba(27, 24, 19, 0.14); --rule-soft: rgba(27, 24, 19, 0.07); /* Earth-tone category colors (overridden by palette tweak) */ --olive: #4D5D2C; /* 公開活動 */ --olive-deep: #3A4720; --olive-soft: #8C9A6A; --navy: #1E3852; /* 研討會 */ --navy-deep: #14283C; --navy-soft: #5A7896; --ochre: #A87328; /* 讀書會 */ --ochre-deep: #7E5316; --ochre-soft: #D2A86B; /* Type */ --serif: "Noto Serif TC", "Source Han Serif TC", "Songti TC", "DFKai-SB", serif; --sans: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif; --mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace; --serif-en: "EB Garamond", "Cormorant Garamond", "Source Serif Pro", serif; } /* Palette variants — switched by [data-palette] on */ html[data-palette="earth"] { --paper: #F7F1E4; --paper-soft: #F1EAD8; --paper-deep: #E8DFC8; --ink: #1B1813; --ink-soft: #3C362B; --olive: #4D5D2C; --olive-deep: #3A4720; --olive-soft: #8C9A6A; --navy: #1E3852; --navy-deep: #14283C; --navy-soft: #5A7896; --ochre: #A87328; --ochre-deep: #7E5316; --ochre-soft: #D2A86B; } html[data-palette="paper"] { --paper: #FDFBF4; --paper-soft: #F6F2E6; --paper-deep: #ECE5D2; --ink: #221E16; --ink-soft: #4A4337; --olive: #6B7A3F; --olive-deep: #4F5A2D; --olive-soft: #A4B07B; --navy: #34557A; --navy-deep: #213D5C; --navy-soft: #7E9CB8; --ochre: #C99232; --ochre-deep: #9A6E1F; --ochre-soft: #E4BD79; } html[data-palette="dusk"] { --paper: #EFE7D2; --paper-soft: #E7DDC2; --paper-deep: #DCD0B0; --ink: #2A2317; --ink-soft: #524634; --olive: #3F4E22; --olive-deep: #2D3917; --olive-soft: #7D8B58; --navy: #15283E; --navy-deep: #0B1A2A; --navy-soft: #4E6884; --ochre: #8E5E1B; --ochre-deep: #6A4410; --ochre-soft: #B68A48; } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ─── 書架軟煞車 ─────────────────────────────────────────────────────────── 三個書架(.shelf #shelf-public/#shelf-seminar/#shelf-reading)用 native scroll-snap 做「軟對齊」。proximity 表示只在使用者即將停下且接近 snap 點時才介入 — hero、字海、manifesto 完全不受影響。 scroll-padding-top 留 80px 給 fixed nav,讓 anchor 跳轉與 snap 落地都 不被 nav 蓋住。 */ html { scroll-snap-type: y proximity; scroll-padding-top: 80px; scroll-behavior: smooth; } body { min-height: 100vh; overflow-x: hidden; font-weight: 300; line-height: 1.6; } a { color: inherit; text-decoration: none; } /* ─── Paper grain overlay (very subtle) ─────────────────────────────────── */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.06; mix-blend-mode: multiply; background-image: radial-gradient(circle at 17% 23%, var(--ink) 0.5px, transparent 0.6px), radial-gradient(circle at 81% 67%, var(--ink) 0.5px, transparent 0.6px), radial-gradient(circle at 47% 89%, var(--ink) 0.5px, transparent 0.6px), radial-gradient(circle at 63% 12%, var(--ink) 0.5px, transparent 0.6px); background-size: 3px 3px, 5px 5px, 4px 4px, 7px 7px; } /* ─── Top nav ───────────────────────────────────────────────────────────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 22px 40px; display: flex; align-items: center; justify-content: space-between; background: linear-gradient(to bottom, var(--paper) 30%, rgba(247, 241, 228, 0) 100%); font-family: var(--sans); font-size: 13px; letter-spacing: 0.02em; transition: padding 0.3s ease; } .nav.scrolled { padding: 14px 40px; background: rgba(247, 241, 228, 0.92); backdrop-filter: blur(8px); } .nav-brand { font-family: var(--serif); font-weight: 700; font-size: 16px; letter-spacing: 0.04em; display: flex; align-items: center; gap: 10px; } .nav-brand::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--ink); border-radius: 50%; } .nav-links { display: flex; gap: 28px; align-items: center; color: var(--ink-soft); } .nav-links a { transition: color 0.2s; cursor: pointer; } .nav-links a:hover { color: var(--ink); } .nav-links .nav-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-faint); } /* ─── Hero ──────────────────────────────────────────────────────────────── */ .hero { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; padding: 120px 40px 80px; overflow: hidden; } .hero-eyebrow { font-family: var(--serif-en); font-style: italic; font-size: 14px; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 32px; opacity: 0; animation: fadeUp 0.9s 0.2s ease forwards; } .hero-title { font-family: var(--serif); font-weight: 900; font-size: clamp(56px, 9vw, 132px); line-height: 1.02; letter-spacing: 0.04em; text-align: center; color: var(--ink); margin-bottom: 40px; display: flex; justify-content: center; gap: 0.02em; } .hero-title .ch { display: inline-block; opacity: 0; transform: translateY(40px); animation: charReveal 0.9s ease forwards; } .hero-tagline { font-family: var(--serif); font-weight: 400; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.8; letter-spacing: 0.06em; color: var(--ink-soft); text-align: center; max-width: 720px; margin: 0 auto; opacity: 0; animation: fadeUp 0.9s 1.6s ease forwards; } .hero-tagline em { font-style: normal; background: linear-gradient(to top, var(--paper-deep) 35%, transparent 35%); padding: 0 4px; } .hero-wave { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: min(720px, 80vw); height: 64px; opacity: 0; animation: fadeUp 1.2s 2s ease forwards; } .hero-scroll-cue { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-family: var(--serif-en); font-style: italic; font-size: 11px; letter-spacing: 0.2em; color: var(--ink-mute); text-transform: uppercase; opacity: 0; animation: fadeUp 1.2s 2.4s ease forwards, scrollBob 2.6s 3.2s ease-in-out infinite; } .hero-scroll-cue::after { content: ""; display: block; width: 1px; height: 28px; background: linear-gradient(to bottom, var(--ink-mute), transparent); margin: 12px auto 0; } @keyframes charReveal { to { opacity: 1; transform: translateY(0); } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scrollBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* ─── Word Ocean ────────────────────────────────────────────────────────── */ .ocean { position: relative; padding: 140px 0 160px; background: var(--paper); overflow: hidden; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); } .ocean-label { position: absolute; top: 32px; left: 50%; transform: translateX(-50%); font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: 0.24em; color: var(--ink-mute); text-transform: uppercase; z-index: 4; } .ocean-rows { display: flex; flex-direction: column; gap: 22px; position: relative; z-index: 1; mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%); } .ocean-row { display: flex; gap: 64px; white-space: nowrap; font-family: var(--serif); font-size: clamp(15px, 1.4vw, 19px); line-height: 1; color: var(--ink-mute); font-weight: 300; letter-spacing: 0.03em; animation: oceanFlow linear infinite; will-change: transform; } .ocean-row span { flex-shrink: 0; } .ocean-row.r0 { font-size: clamp(14px, 1.3vw, 17px); color: var(--ink-faint); animation-duration: 90s; } .ocean-row.r1 { font-size: clamp(17px, 1.6vw, 22px); color: var(--ink-mute); animation-duration: 70s; } .ocean-row.r2 { font-size: clamp(15px, 1.4vw, 19px); color: var(--ink-soft); animation-duration: 110s; font-family: var(--serif-en); font-style: italic; } .ocean-row.r3 { font-size: clamp(19px, 1.8vw, 26px); color: var(--ink); font-weight: 400; animation-duration: 80s; } .ocean-row.r4 { font-size: clamp(14px, 1.3vw, 18px); color: var(--ink-mute); animation-duration: 100s; } .ocean-row.r5 { font-size: clamp(16px, 1.5vw, 21px); color: var(--ink-faint); animation-duration: 75s; } .ocean-row.reverse { animation-direction: reverse; } @keyframes oceanFlow { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ocean-statement { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 3; text-align: center; padding: 36px 64px; background: var(--paper); border: 1px solid var(--rule); max-width: min(720px, 80vw); } .ocean-statement::before, .ocean-statement::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); width: 36px; height: 1px; background: var(--ink); } .ocean-statement::before { top: -1px; } .ocean-statement::after { bottom: -1px; } .ocean-statement h3 { font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 3vw, 38px); line-height: 1.5; letter-spacing: 0.06em; color: var(--ink); text-wrap: balance; } .ocean-statement p { margin-top: 18px; font-size: 13px; letter-spacing: 0.1em; color: var(--ink-mute); font-family: var(--serif-en); font-style: italic; } /* ─── Section heading (shared) ──────────────────────────────────────────── */ .section-head { padding: 120px 40px 60px; text-align: center; } .section-head .eyebrow { font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 22px; } .section-head h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(32px, 4.5vw, 56px); line-height: 1.2; letter-spacing: 0.04em; color: var(--ink); } .section-head p { margin-top: 18px; font-family: var(--serif); font-weight: 300; font-size: 16px; color: var(--ink-soft); max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.8; } /* ─── Shelves ───────────────────────────────────────────────────────────── */ .shelves { padding: 40px 0 140px; } .shelf { position: relative; padding: 64px 0 48px; scroll-snap-align: start; scroll-margin-top: 80px; } .shelf-meta { display: flex; align-items: baseline; justify-content: space-between; padding: 0 56px; margin-bottom: 36px; } .shelf-meta-left { display: flex; flex-direction: column; gap: 8px; } .shelf-label { font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 3.6vw, 44px); letter-spacing: 0.1em; color: var(--ink); display: flex; align-items: baseline; gap: 16px; white-space: nowrap; } .shelf-label .num { font-family: var(--serif-en); font-style: italic; font-weight: 400; font-size: 0.5em; color: var(--ink-mute); letter-spacing: 0.04em; white-space: nowrap; } .shelf-label-en { font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: 0.22em; color: var(--ink-mute); text-transform: uppercase; } .shelf-desc { font-family: var(--serif); font-size: 15px; font-weight: 300; color: var(--ink-soft); max-width: 420px; text-align: right; line-height: 1.7; } .shelf-scroller { position: relative; overflow-x: auto; overflow-y: visible; /* 出血邊界:左右各留 180px 給 spine-card(寬 320,translate(-50%) 半寬 160)避免破出 */ padding: 80px 180px 24px; scrollbar-width: thin; scrollbar-color: var(--ink-faint) transparent; } .shelf-scroller::-webkit-scrollbar { height: 6px; } .shelf-scroller::-webkit-scrollbar-track { background: transparent; } .shelf-scroller::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 3px; } .shelf-rail { display: flex; align-items: flex-end; gap: 8px; min-height: 380px; position: relative; padding-bottom: 22px; } .shelf-rail::after { content: ""; position: absolute; left: 0; right: 0; bottom: 12px; height: 1px; background: var(--ink); } .shelf-rail::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: linear-gradient(to bottom, var(--paper-deep), transparent); pointer-events: none; } /* ─── Book Spine ────────────────────────────────────────────────────────── */ .spine { flex-shrink: 0; position: relative; cursor: pointer; transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.4s ease; transform-origin: bottom center; border-radius: 1px; display: flex; flex-direction: column; align-items: center; padding: 22px 0 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), inset 0 -1px 0 rgba(0, 0, 0, 0.18), inset 2px 0 0 rgba(0, 0, 0, 0.1), inset -2px 0 0 rgba(0, 0, 0, 0.1), 1px 2px 3px rgba(0, 0, 0, 0.12); } .spine:hover { transform: translateY(-14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.2), inset 2px 0 0 rgba(0, 0, 0, 0.12), inset -2px 0 0 rgba(0, 0, 0, 0.12), 2px 8px 18px rgba(0, 0, 0, 0.18); z-index: 5; } .spine.placeholder { background: var(--paper-soft) !important; border: 1px dashed var(--ochre); box-shadow: none; } .spine.placeholder:hover { background: var(--paper-deep) !important; box-shadow: none; transform: translateY(-6px); } /* Title written along the spine. Use writing-mode: vertical-rl with DEFAULT text-orientation (mixed): CJK glyphs stay upright, Latin runs rotate 90° as a single horizontal run — which is the natural bilingual-book-spine look. Force nowrap so a long title never wraps into a second vertical column. */ .spine-title { writing-mode: vertical-rl; white-space: nowrap; font-family: var(--serif); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.95); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); flex: 1; display: flex; align-items: flex-start; padding-top: 8px; } .spine.placeholder .spine-title { color: var(--ochre-deep); text-shadow: none; } /* Decorative embossed line near top */ .spine-band { width: 70%; height: 1px; background: rgba(255, 255, 255, 0.3); position: absolute; top: 14px; } .spine-band.bottom { top: auto; bottom: 14px; } .spine.placeholder .spine-band { background: var(--ochre); opacity: 0.4; } /* Tiny number / id at base */ .spine-no { writing-mode: horizontal-tb; font-family: var(--serif-en); font-style: italic; font-size: 9px; letter-spacing: 0.1em; color: rgba(255, 255, 255, 0.7); margin-bottom: 4px; } .spine.placeholder .spine-no { color: var(--ochre-deep); } /* Spine color variants — set via inline style, this just normalizes texture */ .spine[data-cat="public"] { background: var(--olive); } .spine[data-cat="seminar"] { background: var(--navy); } .spine[data-cat="reading"] { background: var(--ochre); } .spine[data-cat="public"][data-shade="1"] { background: var(--olive-deep); } .spine[data-cat="seminar"][data-shade="1"] { background: var(--navy-deep); } .spine[data-cat="reading"][data-shade="1"] { background: var(--ochre-deep); } /* Subtle linen texture overlay on hard spines */ .spine:not(.placeholder)::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px 3px ), repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 4px ); pointer-events: none; border-radius: inherit; } /* ─── Hover quote tooltip ───────────────────────────────────────────────── */ .spine-card { position: absolute; bottom: calc(100% + 18px); left: 50%; transform: translate(-50%, 4px); width: 320px; max-width: min(320px, 84vw); background: var(--paper); border: 1px solid var(--ink); padding: 22px 24px; font-family: var(--serif); pointer-events: none; opacity: 0; transition: opacity 0.25s, transform 0.25s; z-index: 10; box-shadow: 4px 6px 0 var(--ink); } .spine:hover .spine-card { opacity: 1; transform: translate(-50%, 0); } .spine-card-quote { font-size: 15px; line-height: 1.7; color: var(--ink); font-weight: 400; letter-spacing: 0.02em; margin-bottom: 16px; position: relative; padding-left: 14px; } .spine-card-quote::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 2px; background: var(--ink); } .spine-card-meta { font-family: var(--serif-en); font-style: italic; font-size: 11px; letter-spacing: 0.12em; color: var(--ink-mute); display: flex; justify-content: space-between; text-transform: uppercase; border-top: 1px solid var(--rule); padding-top: 12px; } .spine-card-title { font-family: var(--serif); font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--ink); margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); text-transform: none; } /* ─── Manifesto / closing ───────────────────────────────────────────────── */ .manifesto { padding: 160px 40px 120px; text-align: center; border-top: 1px solid var(--rule); background: var(--paper-soft); position: relative; } .manifesto-mark { width: 32px; height: 32px; margin: 0 auto 36px; border: 1px solid var(--ink); display: flex; align-items: center; justify-content: center; transform: rotate(45deg); } .manifesto-mark::after { content: ""; width: 8px; height: 8px; background: var(--ink); } .manifesto-text { font-family: var(--serif); font-weight: 400; font-size: clamp(20px, 2.4vw, 30px); line-height: 1.9; letter-spacing: 0.06em; color: var(--ink); max-width: 760px; margin: 0 auto; text-wrap: balance; } .manifesto-text p + p { margin-top: 1.4em; } .manifesto-text em { font-style: italic; font-family: var(--serif-en); } .footer { padding: 64px 40px 36px; border-top: 1px solid var(--rule); background: var(--paper); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; row-gap: 12px; font-family: var(--serif-en); font-style: italic; font-size: 12px; letter-spacing: 0.14em; } .footer-license { flex: 1 1 100%; text-align: center; font-style: normal; letter-spacing: 0.08em; font-size: 11px; color: var(--ink-mute); padding-top: 12px; border-top: 1px dashed var(--rule); } .footer-license a { color: inherit; border-bottom: 1px solid currentColor; padding-bottom: 1px; color: var(--ink-mute); } /* ─── Motion level overrides ───────────────────────────────────────────── */ html[data-motion="minimal"] .ocean-row { animation: none !important; } html[data-motion="minimal"] .hero-wave path { animation: none !important; } html[data-motion="minimal"] .hero-title .ch { animation-duration: 0.3s !important; } html[data-motion="minimal"] .hero-eyebrow, html[data-motion="minimal"] .hero-tagline, html[data-motion="minimal"] .hero-scroll-cue { animation-duration: 0.4s !important; } /* ─── Mobile ───────────────────────────────────────────────────────────── */ @media (max-width: 720px) { html { scroll-padding-top: 60px; } .shelf { scroll-margin-top: 60px; } .nav { padding: 16px 20px; } .nav-links { gap: 18px; font-size: 12px; } .nav-links .hide-mb { display: none; } .hero { padding: 100px 20px 60px; } .hero-title { letter-spacing: 0.02em; } .section-head { padding: 80px 20px 40px; } .shelf-meta { padding: 0 24px; flex-direction: column; gap: 12px; align-items: flex-start; } .shelf-desc { text-align: left; } .shelf-scroller { padding: 60px 48px 24px; } .ocean-statement { padding: 24px 28px; max-width: 90vw; } .manifesto { padding: 100px 24px 80px; } .footer { padding: 40px 24px; flex-direction: column; gap: 16px; text-align: center; } .footer-license { font-size: 11px; line-height: 1.7; } }