/* ============================================ Theme A: "Claude Warmth" — 温暖两栏风格 Claude warm terracotta palette + two-column layout ============================================ */ :root { --claude-bg: #FAF9F7; --claude-text: #3D3929; --claude-accent: #C2714F; --claude-secondary: #8C8577; --claude-sidebar-bg: transparent; --claude-card-shadow: rgba(194, 113, 79, 0.15); --claude-border: rgba(194, 113, 79, 0.2); --claude-social-bg: #FFFFFF; --claude-social-text: #8B7355; --claude-footer-border: rgba(194, 113, 79, 0.15); --claude-font-sans: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --claude-font-serif: "Inter", Georgia, serif; --claude-font-mono: "Ubuntu Mono", "SF Mono", monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --claude-bg: #1A1917; --claude-text: #D1CEC7; --claude-accent: #E28A67; --claude-secondary: #9B9488; --claude-sidebar-bg: transparent; --claude-card-shadow: rgba(0, 0, 0, 0.3); --claude-border: rgba(226, 138, 103, 0.2); --claude-social-bg: #22211E; --claude-social-text: #D1CEC7; --claude-footer-border: rgba(226, 138, 103, 0.15); } } /* 手动切换支持 */ [data-theme="dark"] { --claude-bg: #1A1917; --claude-text: #D1CEC7; --claude-accent: #E28A67; --claude-secondary: #9B9488; --claude-sidebar-bg: transparent; --claude-card-shadow: rgba(0, 0, 0, 0.3); --claude-border: rgba(226, 138, 103, 0.2); --claude-social-bg: #22211E; --claude-social-text: #D1CEC7; --claude-footer-border: rgba(226, 138, 103, 0.15); } /* 强制浅色模式变量 */ [data-theme="light"] { --claude-bg: #FAF9F7; --claude-text: #3D3929; --claude-accent: #C2714F; --claude-secondary: #8C8577; --claude-sidebar-bg: transparent; --claude-card-shadow: rgba(194, 113, 79, 0.15); --claude-border: rgba(194, 113, 79, 0.2); --claude-social-bg: #FFFFFF; --claude-social-text: #8B7355; --claude-footer-border: rgba(194, 113, 79, 0.15); } body.theme-claude { background-color: var(--claude-bg); color: var(--claude-text); font-family: var(--claude-font-sans); font-size: 16px; line-height: 1.65; font-weight: 400; padding: 0; transition: background-color 0.3s ease, color 0.3s ease; } /* Remove `font-anthropic-ish` from to revert this typography layer. */ body.theme-claude.font-anthropic-ish { --claude-font-sans: "Instrument Sans", "Inter", -apple-system, BlinkMacSystemFont, sans-serif; --claude-font-serif: "Newsreader", Georgia, serif; --claude-font-mono: "IBM Plex Mono", "SF Mono", monospace; } /* --- Top Navigation Bar --- */ body.theme-claude .top-nav { position: fixed; top: 0; left: 0; right: 0; height: 60px; background-color: var(--claude-bg); border-bottom: 1px solid var(--claude-footer-border); display: flex; justify-content: center; align-items: center; z-index: 1000; transition: all 0.3s ease; } body.theme-claude .nav-container { max-width: 1120px; width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; box-sizing: border-box; } body.theme-claude .nav-left a { font-weight: 600; font-size: 18px; color: var(--claude-text); text-decoration: none; transition: color 0.2s ease; } body.theme-claude .nav-left a:hover { color: var(--claude-accent); } body.theme-claude .nav-right .theme-toggle { background: none; border: none; color: var(--claude-text); font-size: 20px; cursor: pointer; padding: 8px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; } body.theme-claude .nav-right .theme-toggle:hover { background-color: var(--claude-border); color: var(--claude-accent); } /* --- Theme Switcher --- */ body.theme-claude .theme-switcher { position: fixed; bottom: 24px; right: 24px; z-index: 1000; display: flex; gap: 8px; background: #FFFFFF; padding: 8px 12px; border-radius: 50px; box-shadow: 0 2px 12px rgba(61, 57, 41, 0.12); } body.theme-claude .theme-btn { width: 28px; height: 28px; border: 2px solid transparent; border-radius: 50%; cursor: pointer; background: none; padding: 0; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s ease; } body.theme-claude .theme-btn.active { border-color: #C2714F; } body.theme-claude .theme-dot { width: 16px; height: 16px; border-radius: 50%; display: block; } body.theme-claude .dot-claude { background: #C2714F; } body.theme-claude .dot-apple { background: #0071E3; } body.theme-claude .dot-fusion { background: #B5654A; } /* --- Wrapper: two-column layout --- */ body.theme-claude .wrapper { max-width: 1120px; width: 100%; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: flex-start; min-height: 100vh; } /* --- Sidebar: fixed, top-aligned --- */ body.theme-claude .sidebar { width: 320px; flex-shrink: 0; position: fixed; /* 从 sticky 改为 fixed，确保完全固定 */ left: calc(50% - 560px); /* 560px 是 wrapper 1120px 的一半 */ top: 60px; /* 为顶栏留出空间 */ height: calc(100vh - 60px); overflow-y: auto; text-align: center; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; padding-top: 60px; /* 进一步往下挪 */ z-index: 100; } body.theme-claude .profile-card { padding: 0 20px; width: 100%; box-sizing: border-box; } body.theme-claude .image.avatar { margin: 0 auto 32px; display: block; } body.theme-claude .image.avatar img { width: 220px; height: 220px; border-radius: 50%; padding: 0; box-shadow: 0 6px 24px var(--claude-card-shadow); object-fit: cover; } body.theme-claude .site-name { font-size: 28px; font-weight: 700; color: var(--claude-text); margin: 0 0 8px; line-height: 1.2; font-family: var(--claude-font-serif); } body.theme-claude .site-email { font-size: 13px; color: var(--claude-secondary); font-family: var(--claude-font-mono); margin: 0 0 20px; word-break: break-all; } /* --- Social Icons: single row --- */ body.theme-claude .social-icons { display: flex; justify-content: center; gap: 12px; margin-bottom: 0; flex-wrap: wrap; } /* --- Sidebar visitor map --- */ body.theme-claude .sidebar-map { display: flex; justify-content: center; align-items: center; margin: 48px auto 0; width: 240px; /* 调整宽度以对齐文字边缘 */ background-color: transparent; border: none; /* 移除边框 */ border-radius: 12px; box-shadow: none; /* 移除阴影 */ transition: all 0.3s ease; box-sizing: border-box; overflow: hidden; line-height: 0; } body.theme-claude .sidebar-map:hover { transform: translateY(-4px); /* 悬浮时可以保留轻微的阴影或不加，这里先移除以保持极简 */ } body.theme-claude .sidebar-map img, body.theme-claude .sidebar-map canvas { max-width: 100%; width: 100%; height: auto !important; display: block; border: none; } /* Hide footer map for Claude theme */ body.theme-claude .site-footer .visitor-map { display: none; } body.theme-claude .social-icons a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--claude-social-bg); color: var(--claude-social-text) !important; font-size: 1.1rem; line-height: 1; margin: 0; box-shadow: 0 2px 8px rgba(61, 57, 41, 0.08); transition: all 0.2s ease; } body.theme-claude .social-icons a:hover { background: var(--claude-accent); color: #FFFFFF !important; transform: translateY(-3px); box-shadow: 0 6px 16px var(--claude-card-shadow); } body.theme-claude .social-icons a i { font-size: 1.2rem; } /* --- Main Content: right column --- */ body.theme-claude .content { flex: 1; min-width: 0; padding: 120px 40px 80px 60px; /* 顶部增加 padding 往下挪 */ box-sizing: border-box; margin-left: 320px; /* 为左侧固定栏留出空间 */ } /* --- Sections --- */ body.theme-claude .section { margin-bottom: 44px; opacity: 0; transform: translateY(12px); transition: opacity 0.45s ease, transform 0.45s ease; } body.theme-claude .section.visible { opacity: 1; transform: translateY(0); } body.theme-claude .section-title { font-size: 19px; font-weight: 600; color: var(--claude-accent); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--claude-accent); display: inline-block; font-family: var(--claude-font-serif); } body.theme-claude .section-body { color: var(--claude-text); } body.theme-claude .section-body p { margin: 0 0 14px; } body.theme-claude .section-body a { color: var(--claude-accent); text-decoration: none; transition: color 0.2s ease; } body.theme-claude .section-body a:hover { color: var(--claude-accent); filter: brightness(1.2); } /* --- Cards: no background, clean --- */ body.theme-claude .card { background: transparent; border-radius: 0; padding: 0; margin-bottom: 0; box-shadow: none; } body.theme-claude .is-hidden { display: none !important; } /* --- Timeline items (Education & Experience) --- */ body.theme-claude .timeline-item { position: relative; margin-left: 20px; padding-left: 8px; padding-bottom: 20px; } body.theme-claude .timeline-item::before { content: ''; position: absolute; left: -20px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--claude-accent), rgba(194, 113, 79, 0.12)); } body.theme-claude .timeline-item:last-child::before { bottom: 50%; } body.theme-claude .timeline-item::after { content: ''; position: absolute; left: -25px; top: 22px; width: 10px; height: 10px; border-radius: 50%; background: var(--claude-accent); border: 2px solid var(--claude-bg); } body.theme-claude .experience-item { display: flex; align-items: flex-start; margin-bottom: 0; padding-bottom: 4px; } body.theme-claude .institution-logo { width: 52px; height: 52px; object-fit: contain; margin-right: 16px; flex-shrink: 0; } body.theme-claude .institution-seal { border-radius: 50%; background: #ffffff; box-shadow: 0 4px 12px rgba(61, 57, 41, 0.08); border: 1px solid rgba(194, 113, 79, 0.14); } body.theme-claude .institution-shield { padding: 4px; box-sizing: border-box; } body.theme-claude .institution-wide-logo { width: 56px; height: 52px; background: transparent; border: none; box-shadow: none; border-radius: 0; } body.theme-claude .institution-adaptive-logo { background: transparent; border: none; box-shadow: none; border-radius: 0; } body.theme-claude .institution-threshold-logo { background: transparent; border: none; box-shadow: none; border-radius: 0; } html[data-theme="dark"] body.theme-claude .institution-wide-logo { filter: brightness(0) invert(1); } html[data-theme="dark"] body.theme-claude .institution-adaptive-logo { filter: brightness(0) invert(1); } body.theme-claude .experience-item.no-logo { display: block; } body.theme-claude .experience-item.no-logo .experience-content { margin-left: 0; } /* 移除深色模式下的 Logo 滤镜，保持彩色 */ @media (prefers-color-scheme: dark) { body.theme-claude .institution-logo { filter: none; } } body.theme-claude .experience-content { flex: 1; } body.theme-claude .experience-content p { margin: 0 0 2px; } body.theme-claude .exp-title { font-size: 15px; color: var(--claude-text); font-family: var(--claude-font-serif); } body.theme-claude .exp-detail { font-size: 14px; color: var(--claude-secondary); } body.theme-claude .exp-period { font-size: 13px; color: var(--claude-accent); font-weight: 500; } body.theme-claude .teaching-course { display: inline-block; margin: 0 0 8px !important; padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #5b4a37, var(--claude-accent)); color: #ffffff; font-size: 14px; font-weight: 600; line-height: 1.2; box-shadow: 0 10px 20px rgba(194, 113, 79, 0.16); } /* --- Project card --- */ body.theme-claude .project-card { font-size: 15px; line-height: 1.6; } /* --- News --- */ body.theme-claude .news-list { display: flex; flex-direction: column; gap: 14px; } body.theme-claude .news-item { padding-left: 16px; border-left: 3px solid var(--claude-accent); } body.theme-claude .news-item p { margin: 0; } body.theme-claude .news-date { margin-bottom: 6px !important; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--claude-accent); } body.theme-claude .news-text { font-size: 15px; color: var(--claude-text); } body.theme-claude .section-note { font-size: 14px; color: var(--claude-secondary); margin-bottom: 14px; } /* --- Publications --- */ body.theme-claude .publications { margin-top: 0; } body.theme-claude .publications ol.bibliography { list-style: none; padding: 0; margin: 0; } body.theme-claude .publications ol.bibliography li { padding: 15px 0 15px 16px; border-left: 3px solid var(--claude-accent); margin-bottom: 14px; min-height: auto; } body.theme-claude .pub-row { display: block; } body.theme-claude .pub-content { padding: 0; } body.theme-claude .publications ol.bibliography li .title { font-weight: 600; font-size: 15px; color: var(--claude-text); margin-bottom: 4px; font-family: var(--claude-font-serif); } body.theme-claude.font-anthropic-ish .site-name, body.theme-claude.font-anthropic-ish .section-title, body.theme-claude.font-anthropic-ish .exp-title, body.theme-claude.font-anthropic-ish .publications ol.bibliography li .title { font-weight: 500; letter-spacing: -0.01em; } body.theme-claude .publications ol.bibliography li .author { font-size: 14px; color: var(--claude-secondary); margin-bottom: 4px; } body.theme-claude .publications ol.bibliography li .periodical { font-size: 14px; color: var(--claude-accent); margin-bottom: 6px; } body.theme-claude .publications ol.bibliography li .links a { color: var(--claude-accent); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--claude-border); background: rgba(194, 113, 79, 0.06); line-height: 1; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } body.theme-claude .publications ol.bibliography li .links a:hover { background: rgba(194, 113, 79, 0.12); border-color: rgba(194, 113, 79, 0.34); color: var(--claude-text); transform: translateY(-1px); } body.theme-claude .exp-title, body.theme-claude .exp-detail, body.theme-claude .publications ol.bibliography li .title, body.theme-claude .publications ol.bibliography li .author, body.theme-claude .publications ol.bibliography li .periodical, body.theme-claude .publications ol.bibliography li .links { overflow-wrap: anywhere; } body.theme-claude .publications ol.bibliography li .links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } html[data-theme="dark"] body.theme-claude .publications ol.bibliography li .links a { background: rgba(226, 138, 103, 0.08); } html[data-theme="dark"] body.theme-claude .publications ol.bibliography li .links a:hover { background: rgba(226, 138, 103, 0.14); border-color: rgba(226, 138, 103, 0.34); color: var(--claude-text); } /* --- Awards --- */ body.theme-claude .awards-grid { display: flex; flex-direction: column; gap: 8px; } body.theme-claude .award-item { display: flex; align-items: center; gap: 10px; background: transparent; padding: 4px 0; } body.theme-claude .award-icon { font-size: 20px; flex-shrink: 0; } body.theme-claude .award-text { font-size: 14px; color: var(--claude-text); } body.theme-claude .award-text a { color: var(--claude-accent); } body.theme-claude .award-meta { display: inline-block; margin-left: 6px; color: var(--claude-secondary); font-size: 13px; } /* --- Footer --- */ body.theme-claude .site-footer { position: static !important; float: none !important; width: 100%; flex-basis: 100%; text-align: center; padding: 32px 24px 40px 380px; /* 增加左边距以避开固定侧边栏 */ box-sizing: border-box; border-top: none !important; /* 强制移除可能继承的边框 */ } body.theme-claude .site-footer p { font-size: 13px; color: var(--claude-secondary); margin: 0; padding-top: 20px; border-top: 1px solid var(--claude-footer-border) !important; display: block; /* 恢复为块级元素以覆盖整个右侧宽度 */ } body.theme-claude .visitor-map { margin-bottom: 16px; } body.theme-claude .visitor-map img { max-width: 240px; width: 100%; border-radius: 10px; box-shadow: 0 2px 10px rgba(194, 113, 79, 0.12); transition: box-shadow 0.2s ease; } body.theme-claude .visitor-map img:hover { box-shadow: 0 4px 16px rgba(194, 113, 79, 0.2); } /* --- Headings override --- */ body.theme-claude h1, body.theme-claude h2, body.theme-claude h3, body.theme-claude h4 { color: var(--claude-text); } body.theme-claude strong { color: var(--claude-text); } /* --- Responsive --- */ @media (max-width: 1080px) { body.theme-claude .nav-container { padding: 0 24px; } body.theme-claude .wrapper { width: 100%; max-width: 760px; flex-direction: column; padding: 60px 24px 0; box-sizing: border-box; min-height: auto; } body.theme-claude .sidebar { width: 100%; position: static; left: auto; top: auto; height: auto; padding: 24px 0 20px; overflow: visible; } body.theme-claude .profile-card { max-width: 560px; margin: 0 auto; padding: 0; } body.theme-claude .image.avatar { margin-bottom: 24px; } body.theme-claude .image.avatar img { width: 152px; height: 152px; } body.theme-claude .sidebar-map { width: min(100%, 240px); margin-top: 32px; } body.theme-claude .content { width: 100%; padding: 28px 0 48px; margin-left: 0; } body.theme-claude .timeline-item { margin-left: 18px; padding-left: 10px; } body.theme-claude .timeline-item::before { left: -18px; } body.theme-claude .timeline-item::after { left: -23px; } body.theme-claude .institution-logo { width: 48px; height: 48px; margin-right: 14px; } body.theme-claude .institution-wide-logo { width: 48px; height: 48px; } body.theme-claude .site-footer { padding: 24px 0 36px; } body.theme-claude .site-footer p { border-top: none; padding-top: 0; } body.theme-claude .theme-switcher { bottom: 16px; right: 16px; } } @media (max-width: 720px) { body.theme-claude .top-nav { height: 56px; } body.theme-claude .nav-container { padding: 0 16px; } body.theme-claude .nav-left a { font-size: 16px; } body.theme-claude .nav-right .theme-toggle { font-size: 18px; padding: 6px; } body.theme-claude .wrapper { padding: 56px 16px 0; } body.theme-claude .sidebar { padding: 20px 0 16px; } body.theme-claude .image.avatar img { width: 120px; height: 120px; } body.theme-claude .site-name { font-size: 24px; } body.theme-claude .site-email { margin-bottom: 16px; font-size: 12px; } body.theme-claude .social-icons { gap: 10px; } body.theme-claude .social-icons a { width: 38px; height: 38px; } body.theme-claude .sidebar-map { width: min(100%, 220px); margin-top: 28px; } body.theme-claude .content { padding: 20px 0 40px; } body.theme-claude .section { margin-bottom: 36px; } body.theme-claude .section-title { font-size: 18px; margin-bottom: 14px; padding-bottom: 8px; } body.theme-claude .section-body p { margin: 0 0 12px; } body.theme-claude .news-item, body.theme-claude .publications ol.bibliography li { padding-left: 12px; } body.theme-claude .timeline-item { margin-left: 14px; padding-left: 10px; padding-bottom: 18px; } body.theme-claude .timeline-item::before { left: -14px; } body.theme-claude .timeline-item::after { left: -19px; top: 18px; width: 9px; height: 9px; } body.theme-claude .experience-item { gap: 12px; } body.theme-claude .institution-logo { width: 44px; height: 44px; margin-right: 0; } body.theme-claude .institution-wide-logo { width: 44px; height: 44px; } body.theme-claude .exp-title { font-size: 14px; } body.theme-claude .exp-detail { font-size: 13px; } body.theme-claude .exp-period { margin-top: 4px; font-size: 12px; } body.theme-claude .teaching-course { max-width: 100%; padding: 8px 12px; font-size: 13px; line-height: 1.3; text-align: center; white-space: normal; } body.theme-claude .award-item { align-items: flex-start; } body.theme-claude .award-meta { display: block; margin: 4px 0 0; } } @media (max-width: 480px) { body.theme-claude { font-size: 15px; } body.theme-claude .top-nav { height: 54px; } body.theme-claude .nav-container { padding: 0 14px; } body.theme-claude .wrapper { padding: 54px 14px 0; } body.theme-claude .sidebar { padding: 16px 0 12px; } body.theme-claude .image.avatar img { width: 104px; height: 104px; } body.theme-claude .site-name { font-size: 22px; } body.theme-claude .site-email { font-size: 11px; } body.theme-claude .social-icons a { width: 36px; height: 36px; font-size: 1rem; } body.theme-claude .sidebar-map { width: min(100%, 200px); margin-top: 24px; } body.theme-claude .content { padding: 18px 0 32px; } body.theme-claude .section { margin-bottom: 32px; } body.theme-claude .section-title { font-size: 17px; } body.theme-claude .timeline-item { margin-left: 12px; padding-left: 8px; } body.theme-claude .timeline-item::before { left: -12px; } body.theme-claude .timeline-item::after { left: -16px; top: 16px; width: 8px; height: 8px; } body.theme-claude .experience-item { gap: 10px; } body.theme-claude .institution-logo { width: 40px; height: 40px; } body.theme-claude .institution-wide-logo { width: 40px; height: 40px; } body.theme-claude .publications ol.bibliography li .title { font-size: 14px; } body.theme-claude .publications ol.bibliography li .author, body.theme-claude .publications ol.bibliography li .periodical { font-size: 13px; } body.theme-claude .publications ol.bibliography li .links a { font-size: 12px; } }