:root { --text: #1f2328; --muted: #6a737d; --link: #1a5276; --rule: #e6e8eb; --bg: #ffffff; } * { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: Georgia, "Iowan Old Style", "Times New Roman", serif; line-height: 1.75; font-size: 16px; } /* Chinese mode renders CJK in 华文仿宋 (STFangsong) with Georgia for Latin, following */ html[lang="zh-CN"] body { font-family: Georgia, "STFangsong", "华文仿宋", "FangSong", "仿宋", "STSong", "SimSun", serif; } button { font-family: inherit; } .page { max-width: 760px; margin: 0 auto; padding: 48px 24px 24px; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } /* ---- header ---- */ header { display: flex; align-items: center; gap: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--rule); position: relative; } #about-photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .identity h1 { margin: 0 0 4px; font-size: 28px; font-weight: 650; letter-spacing: 0.5px; } .identity .subtitle { margin: 0 0 10px; color: var(--muted); font-size: 15px; } .identity .quick-links { display: flex; align-items: center; gap: 16px; } .identity .quick-links img { display: block; width: 22px; height: 22px; } .identity .quick-links a { opacity: 0.9; transition: opacity 0.15s, transform 0.15s; position: relative; } .identity .quick-links a:hover { opacity: 1; transform: translateY(-1px); } /* tooltip bubble below each icon, driven by data-tip */ .identity .quick-links a[data-tip]::after { content: attr(data-tip); position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-4px); background: #1f2328; color: #fff; font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 5px; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.15s, transform 0.15s; pointer-events: none; z-index: 10; } .identity .quick-links a[data-tip]::before { content: ""; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-bottom-color: #1f2328; opacity: 0; visibility: hidden; transition: opacity 0.15s; pointer-events: none; z-index: 10; } .identity .quick-links a[data-tip]:hover::after, .identity .quick-links a[data-tip]:focus-visible::after { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .identity .quick-links a[data-tip]:hover::before, .identity .quick-links a[data-tip]:focus-visible::before { opacity: 1; visibility: visible; } #language-toggle { position: absolute; top: 0; right: 0; background: none; border: 1px solid var(--rule); border-radius: 4px; color: var(--muted); font-size: 13px; padding: 3px 10px; cursor: pointer; } #language-toggle:hover { color: var(--text); border-color: var(--muted); } /* ---- sections ---- */ main section { margin-top: 36px; } main h2 { font-size: 20px; font-weight: 650; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--rule); } main p { margin: 0 0 12px; } #research-wordcloud { display: block; max-width: 100%; height: auto; margin: 20px auto 0; } /* ---- courses ---- */ .course-list { list-style: none; padding: 0; margin: 0; } .course-list > li { margin-bottom: 10px; } .course-list details summary { cursor: pointer; color: var(--link); } .course-list details summary:hover { text-decoration: underline; } .lecture-list { list-style: none; padding: 6px 0 4px 24px; margin: 0; } .lecture-list li { margin-bottom: 4px; } /* flat numbered lecture list on course sub-pages */ .lecture-list-flat { list-style: decimal; padding: 4px 0 0 28px; } .lecture-list-flat li { margin-bottom: 8px; } /* ---- publications ---- */ .pub-note { color: var(--muted); margin-bottom: 4px; } .pub-year { margin-top: 28px; } .pub-list { list-style: none; padding: 0; margin: 0; } .pub-list li { margin-bottom: 16px; } .pub-title { display: block; font-weight: 600; } .pub-authors { display: block; font-size: 15px; } .pub-meta { display: block; font-size: 15px; } .pub-venue { font-style: italic; color: var(--muted); } /* ---- footer ---- */ footer { margin-top: 48px; padding: 20px 0; border-top: 1px solid var(--rule); text-align: center; color: var(--muted); font-size: 14px; } /* ---- mobile ---- */ @media (max-width: 560px) { .page { padding-top: 32px; } header { flex-direction: column; text-align: center; gap: 16px; padding-top: 24px; } .identity .quick-links { justify-content: center; } }