/* ============================================================ Dark Academia — Custom Theme Pure CSS, zero dependencies, zero Bootstrap ============================================================ */ /* ── Google Fonts (loaded via , this is a fallback stack ref) */ /* ── CSS Custom Properties ───────────────────────────────────────── */ :root { --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif; --font-mono: 'JetBrains Mono', 'Fira Mono', 'Courier New', monospace; /* Light (parchment) theme */ --bg: #F5ECD8; --bg-alt: #EDE0CA; --bg-card: #FAF4E8; --bg-nav: rgba(245, 236, 216, 0.94); --text: #2A1E12; --text-muted: #6B5540; --text-heading: #1A1008; --primary: #3D5C35; --primary-dark: #2A4025; --gold: #B8902A; --gold-light: #C9A84C; --border: rgba(61, 92, 53, 0.15); --border-card: rgba(61, 92, 53, 0.13); --shadow: rgba(30, 21, 8, 0.08); --shadow-deep: rgba(30, 21, 8, 0.18); --link: #3D5C35; --link-hover: #2A4025; --tag-bg: rgba(61, 92, 53, 0.09); --tag-text: #2A4025; --tag-border: rgba(61, 92, 53, 0.22); --code-bg: rgba(61, 92, 53, 0.08); --code-text: #2A4025; --pre-bg: #EDE0C8; --btn-text: #F5ECD8; --nav-height: 3.8rem; --timeline-line: rgba(61, 92, 53, 0.25); --skill-track: rgba(61, 92, 53, 0.12); --ornament: #B8902A; } [data-theme="dark"] { --bg: #141210; --bg-alt: #1C1915; --bg-card: #1C1915; --bg-nav: rgba(20, 18, 16, 0.95); --text: #E0CEB4; --text-muted: #A89878; --text-heading: #EDE0C0; --primary: #C9A84C; --primary-dark: #DEB85E; --gold: #C9A84C; --gold-light: #DEB85E; --border: rgba(201, 168, 76, 0.16); --border-card: rgba(201, 168, 76, 0.13); --shadow: rgba(0, 0, 0, 0.40); --shadow-deep: rgba(0, 0, 0, 0.60); --link: #C9A84C; --link-hover: #DEB85E; --tag-bg: rgba(201, 168, 76, 0.10); --tag-text: #C9A84C; --tag-border: rgba(201, 168, 76, 0.24); --code-bg: rgba(201, 168, 76, 0.10); --code-text: #C9A84C; --pre-bg: #1C1915; --btn-text: #141210; --timeline-line: rgba(201, 168, 76, 0.22); --skill-track: rgba(201, 168, 76, 0.12); --ornament: #C9A84C; } /* ── Reset & Base ────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; } body { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.78; color: var(--text); background-color: var(--bg); transition: background-color 0.25s ease, color 0.25s ease; -webkit-font-smoothing: antialiased; } [data-theme="dark"] body { background-image: radial-gradient(ellipse 80% 60% at 15% 60%, rgba(50, 38, 16, 0.15) 0%, transparent 60%), radial-gradient(ellipse 70% 50% at 85% 20%, rgba(30, 45, 20, 0.12) 0%, transparent 55%); background-attachment: fixed; } /* ── Typography ──────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); color: var(--text-heading); line-height: 1.2; font-weight: 600; margin-bottom: 0.5em; } h1 { font-size: 2.6rem; letter-spacing: -0.01em; } h2 { font-size: 2rem; letter-spacing: -0.005em; } h3 { font-size: 1.55rem; } h4 { font-size: 1.25rem; } h5 { font-size: 1.1rem; } h6 { font-size: 1rem; } h1 em, h2 em, h3 em { font-style: italic; font-weight: inherit; } p { margin-bottom: 1.1em; } p:last-child { margin-bottom: 0; } strong { font-weight: 600; } em { font-style: italic; } a { color: var(--link); text-decoration: none; transition: color 0.16s ease; } a:hover { color: var(--link-hover); } ul, ol { padding-left: 1.4em; } li { margin-bottom: 0.3em; } blockquote { border-left: 3px solid var(--gold); background: rgba(184, 144, 42, 0.06); padding: 1rem 1.5rem; border-radius: 0 6px 6px 0; font-style: italic; font-size: 1.08em; color: var(--text); margin: 1.5rem 0; } [data-theme="dark"] blockquote { background: rgba(201, 168, 76, 0.07); } code { font-family: var(--font-mono); font-size: 0.85em; background-color: var(--code-bg); color: var(--code-text); padding: 0.15em 0.38em; border-radius: 3px; } pre { font-family: var(--font-mono); font-size: 0.88em; background-color: var(--pre-bg) !important; border: 1px solid var(--border); border-radius: 6px; padding: 1.2rem 1.5rem; overflow-x: auto; margin: 1.5rem 0; } pre code { background: none; padding: 0; font-size: inherit; color: inherit; } hr { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 2.5rem 0; } img { max-width: 100%; height: auto; display: block; } ::selection { background-color: rgba(184, 144, 42, 0.22); color: var(--text-heading); } /* ── Layout helpers ──────────────────────────────────────────────── */ .container { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .container-narrow { max-width: 820px; } /* ── Navigation ──────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height); background-color: var(--bg-nav); border-bottom: 1px solid var(--border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: background-color 0.25s ease, border-color 0.25s ease; } .nav-container { display: flex; align-items: center; gap: 1rem; height: 100%; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .nav-brand { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; color: var(--text-heading) !important; letter-spacing: 0.01em; white-space: nowrap; flex-shrink: 0; } .nav-menu { display: flex; align-items: center; gap: 0.15rem; list-style: none; padding: 0; margin: 0 auto; } .nav-menu a { font-family: var(--font-body); font-size: 1.02rem; color: var(--text); padding: 0.35rem 0.65rem; border-radius: 4px; letter-spacing: 0.02em; transition: color 0.15s ease, background-color 0.15s ease; display: block; } .nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--primary); background-color: var(--tag-bg); } .nav-menu a[aria-current="page"] { font-weight: 500; } .theme-toggle { background: none; border: 1px solid var(--border); color: var(--text-muted); cursor: pointer; padding: 0.28rem 0.5rem; border-radius: 4px; font-size: 1rem; line-height: 1; flex-shrink: 0; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover { color: var(--primary); border-color: var(--primary); } .nav-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 4px; padding: 0.4rem; margin-left: auto; } .nav-toggle span { display: block; width: 22px; height: 2px; background-color: var(--text); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; } /* ── Sections ────────────────────────────────────────────────────── */ .section { padding: 3rem 0; background-color: var(--bg); transition: background-color 0.25s ease; } .section-alt { background-color: var(--bg-alt); } .section-header { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; } .section-title { font-family: var(--font-serif); font-size: 1.9rem; color: var(--text-heading); position: relative; padding-bottom: 0.6rem; margin-bottom: 0; } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 48px; height: 2px; background: linear-gradient(90deg, var(--ornament) 0%, transparent 100%); border-radius: 1px; } .section-link { font-size: 0.95rem; color: var(--primary); white-space: nowrap; letter-spacing: 0.02em; } /* ── About Section ───────────────────────────────────────────────── */ .section-about { padding-top: 4.5rem; padding-bottom: 5rem; } .about-grid { display: grid; grid-template-columns: 280px 1fr; gap: 4rem; align-items: start; } .about-sidebar { display: flex; flex-direction: column; gap: 1.8rem; text-align: center; } .avatar { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border-card); box-shadow: 0 4px 24px var(--shadow-deep); margin: 0 auto; display: block; } .avatar-placeholder { width: 200px; height: 200px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--gold)); display: flex; align-items: center; justify-content: center; font-family: var(--font-serif); font-size: 3rem; font-weight: 700; color: #fff; margin: 0 auto; box-shadow: 0 4px 24px var(--shadow-deep); } .sidebar-block { text-align: left; } .sidebar-heading { font-family: var(--font-serif); font-size: 1rem; font-weight: 600; color: var(--text-heading); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.6rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); } .interest-list { list-style: none; padding: 0; } .interest-list li { font-size: 0.97rem; color: var(--text-muted); padding: 0.18rem 0; } .interest-list li::before { content: '·'; color: var(--gold); margin-right: 0.45rem; font-weight: 700; } .edu-item { margin-bottom: 0.85rem; } .edu-degree { font-size: 0.95rem; font-weight: 600; color: var(--text-heading); margin-bottom: 0.1rem; } .edu-institution { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.1rem; } .edu-dates { font-size: 0.82rem; color: var(--text-muted); opacity: 0.75; } .social-links { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; } .social-link { display: flex; align-items: center; justify-content: center; width: 2.1rem; height: 2.1rem; border: 1px solid var(--border-card); border-radius: 6px; color: var(--text-muted); transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease; } .social-link:hover { color: var(--primary); border-color: var(--primary); background-color: var(--tag-bg); } .social-link svg { width: 1.05rem; height: 1.05rem; } .about-name { font-family: var(--font-serif); font-size: 2.6rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.2rem; line-height: 1.1; } .about-role { font-size: 1.2rem; color: var(--primary); font-weight: 400; margin-bottom: 0.3rem; font-style: italic; } .about-org { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.5rem; } .about-org a { color: var(--text-muted); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; } .about-org a:hover { color: var(--primary); } .about-bio { margin-bottom: 1.8rem; font-size: 1.1rem; line-height: 1.82; } /* Drop cap on first paragraph of bio */ .about-bio > p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 3.2em; font-weight: 700; float: left; line-height: 0.8; margin: 0.05em 0.1em 0 0; color: var(--primary); } .about-actions { display: flex; gap: 1rem; flex-wrap: wrap; } /* ── Research Overview ───────────────────────────────────────────── */ .research-overview { font-size: 1.12rem; line-height: 1.82; max-width: 72ch; } /* ── Publications ────────────────────────────────────────────────── */ .pub-list { display: flex; flex-direction: column; gap: 0; } .pub-item { padding: 1.25rem 0; border-bottom: 1px solid var(--border); border-left: 3px solid transparent; padding-left: 1rem; transition: border-left-color 0.2s ease; } .pub-item:first-child { border-top: 1px solid var(--border); } .pub-item:hover { border-left-color: var(--primary); } .pub-meta { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.4rem; } .pub-date { font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-mono); } .pub-type { font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.12em 0.5em; border-radius: 3px; border: 1px solid; } .pub-type-article-journal { color: var(--primary); border-color: var(--primary); background-color: var(--tag-bg); } .pub-type-paper-conference { color: var(--gold); border-color: var(--gold); background-color: var(--tag-bg); } .pub-title { font-family: var(--font-serif); font-size: 1.22rem; font-weight: 600; line-height: 1.3; margin-bottom: 0.3rem; color: var(--text-heading); } .pub-title a { color: var(--text-heading); } .pub-title a:hover { color: var(--primary); } .pub-authors { font-size: 0.97rem; color: var(--text-muted); margin-bottom: 0.2rem; } .pub-venue { font-style: italic; font-size: 0.97rem; color: var(--text-muted); margin-bottom: 0.5rem; } .pub-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.7rem; } .pub-type-book-chapter { color: var(--primary); border-color: var(--primary); background-color: var(--tag-bg); } .pub-type-thesis, .pub-type-dissertation { color: var(--text-muted); border-color: var(--border); background-color: var(--tag-bg); } /* Publication type badges for presentations */ .pub-type-talk, .pub-type-invited-talk, .pub-type-panel, .pub-type-symposium-talk, .pub-type-symposium-chair, .pub-type-symposium-co-chair, .pub-type-symposium-discussant { color: var(--gold); border-color: var(--gold); background-color: var(--tag-bg); } .pub-type-poster, .pub-type-preprint { color: var(--text-muted); border-color: var(--border); background-color: var(--tag-bg); } /* ── Year-grouped two-section layout ─────────────────────────────── */ .pubs-section { margin-bottom: 3.5rem; } .pub-section-heading { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 600; color: var(--text-heading); margin: 0 0 0.25rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--primary); letter-spacing: 0.01em; } .pub-legend { font-size: 0.82rem; color: var(--text-muted); margin: 0.35rem 0 1.5rem; font-style: italic; } .year-group { margin-bottom: 0.5rem; } .year-divider { display: flex; align-items: center; gap: 1rem; margin: 2rem 0 0; position: sticky; top: var(--nav-height); z-index: 10; background-color: var(--bg); padding: 0.4rem 0; } .year-divider::before { content: ''; flex: 1; height: 1px; background-color: var(--border); } .year-label { font-family: var(--font-mono); font-size: 1.15rem; color: var(--text-muted); opacity: 0.55; letter-spacing: 0.12em; white-space: nowrap; flex-shrink: 0; } /* ── Pub item row: main content + optional image thumbnail ────────── */ .pub-content-row { display: flex; gap: 1.5rem; align-items: flex-start; } .pub-main-content { flex: 1; min-width: 0; } .pub-image-preview { flex-shrink: 0; width: 130px; align-self: center; margin-top: 1.5rem; } .pub-image-preview img { width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--border); object-fit: cover; display: block; filter: sepia(40%) brightness(0.88) contrast(1.05); opacity: 0.78; } .pub-placeholder { color: var(--text-muted); font-style: italic; padding: 1.5rem 0; } @media (max-width: 600px) { .pub-image-preview { display: none; } } /* ── Tags ────────────────────────────────────────────────────────── */ .tag-list { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; margin-bottom: 0.5rem; } .tag { font-size: 0.76rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.18em 0.55em; border-radius: 3px; background-color: var(--tag-bg); color: var(--tag-text); border: 1px solid var(--tag-border); font-family: var(--font-body); white-space: nowrap; } /* ── Buttons ─────────────────────────────────────────────────────── */ .btn { display: inline-block; padding: 0.55rem 1.3rem; border-radius: 4px; font-family: var(--font-body); font-size: 1rem; letter-spacing: 0.04em; cursor: pointer; border: 1px solid transparent; transition: background-color 0.16s ease, box-shadow 0.16s ease, color 0.16s ease; text-align: center; line-height: 1.4; } .btn-primary { background-color: var(--primary); color: var(--btn-text); border-color: var(--primary); } .btn-primary:hover { background-color: var(--primary-dark); border-color: var(--primary-dark); color: var(--btn-text); box-shadow: 0 3px 12px var(--shadow); } .btn-outline { background-color: transparent; color: var(--primary); border-color: var(--primary); } .btn-outline:hover { background-color: var(--tag-bg); color: var(--primary-dark); } .link-btn { font-size: 0.88rem; color: var(--primary); letter-spacing: 0.03em; padding: 0.2em 0.5em; border: 1px solid var(--border-card); border-radius: 3px; transition: background-color 0.14s ease, border-color 0.14s ease; display: inline-block; line-height: 1.6; } .link-btn:hover { background-color: var(--tag-bg); border-color: var(--primary); color: var(--primary-dark); } /* ── Project cards ───────────────────────────────────────────────── */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .project-card { background-color: var(--bg-card); border: 1px solid var(--border-card); border-radius: 8px; padding: 1.8rem 2rem; box-shadow: 0 2px 10px var(--shadow); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; display: flex; flex-direction: column; gap: 0.7rem; } .project-card:hover { transform: translateY(-4px); box-shadow: 0 8px 28px var(--shadow-deep); border-color: var(--primary); } .project-title { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; margin-bottom: 0; line-height: 1.3; } .project-title a { color: var(--text-heading); } .project-title a:hover { color: var(--primary); } .project-summary { font-size: 0.97rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 0; flex: 1; } .project-links { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; } /* ── Teaching List ───────────────────────────────────────────────── */ .teaching-list { display: flex; flex-direction: column; gap: 1.5rem; } .teaching-item { background-color: var(--bg-card); border: 1px solid var(--border-card); border-radius: 6px; padding: 1.5rem 1.8rem; box-shadow: 0 1px 6px var(--shadow); transition: border-color 0.2s ease; } .teaching-item:hover { border-color: var(--primary); } .teaching-title { font-family: var(--font-serif); font-size: 1.2rem; margin-bottom: 0.3rem; } .teaching-title a { color: var(--text-heading); } .teaching-title a:hover { color: var(--primary); } .teaching-summary { font-size: 0.97rem; color: var(--text-muted); margin-bottom: 0.5rem; } /* ── Blog List ───────────────────────────────────────────────────── */ .blog-list { display: flex; flex-direction: column; gap: 2.5rem; } .blog-item {} .blog-date { font-size: 0.82rem; color: var(--text-muted); font-family: var(--font-mono); display: block; margin-bottom: 0.3rem; } .blog-title { font-family: var(--font-serif); font-size: 1.45rem; margin-bottom: 0.4rem; } .blog-title a { color: var(--text-heading); } .blog-title a:hover { color: var(--primary); } .blog-summary { font-size: 1.02rem; color: var(--text-muted); line-height: 1.7; } /* ── Timeline (Experience page) ──────────────────────────────────── */ .timeline { position: relative; padding-left: 1.8rem; } .timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 0; width: 1px; background: var(--timeline-line); } .timeline-item { position: relative; margin-bottom: 2.5rem; } .timeline-dot { position: absolute; left: -1.8rem; top: 6px; width: 14px; height: 14px; border-radius: 50%; background-color: var(--bg); border: 2px solid var(--primary); } .timeline-title { font-family: var(--font-serif); font-size: 1.2rem; font-weight: 600; margin-bottom: 0.2rem; color: var(--text-heading); } .timeline-org { font-size: 1rem; color: var(--primary); margin-bottom: 0.15rem; } .timeline-dates { font-size: 0.85rem; color: var(--text-muted); font-family: var(--font-mono); margin-bottom: 0.5rem; } .timeline-summary { font-size: 0.98rem; color: var(--text); line-height: 1.7; } /* ── Skills (Experience page) ────────────────────────────────────── */ .skill-group { margin-bottom: 2.5rem; } .skill-group-title { font-family: var(--font-serif); font-size: 1.15rem; margin-bottom: 1rem; color: var(--text-heading); } .skill-items { display: flex; flex-direction: column; gap: 1.1rem; } .skill-item {} .skill-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 0.2rem; } .skill-name { font-size: 1rem; font-weight: 500; color: var(--text-heading); } .skill-pct { font-size: 0.82rem; color: var(--text-muted); font-family: var(--font-mono); } .skill-desc { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.4rem; } .skill-bar-track { height: 5px; background-color: var(--skill-track); border-radius: 3px; overflow: hidden; } .skill-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), var(--gold-light)); border-radius: 3px; transition: width 0.5s ease; } /* ── Awards (Experience page) ────────────────────────────────────── */ .awards-list { display: flex; flex-direction: column; gap: 1.5rem; } .award-item { padding: 1.3rem 1.5rem; border: 1px solid var(--border-card); border-radius: 6px; background-color: var(--bg-card); } .award-title { font-family: var(--font-serif); font-size: 1.1rem; margin-bottom: 0.2rem; } .award-title a { color: var(--text-heading); } .award-title a:hover { color: var(--primary); } .award-awarder { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 0.4rem; } .award-summary { font-size: 0.95rem; color: var(--text); } /* ── Publication single ──────────────────────────────────────────── */ .pub-single { padding: 3.5rem 0 5rem; } .pub-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .pub-type-badge { margin-bottom: 0.8rem; } .pub-abstract { margin-bottom: 2rem; background-color: var(--bg-alt); border-left: 3px solid var(--gold); padding: 1.2rem 1.5rem; border-radius: 0 6px 6px 0; } .pub-abstract h2 { font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.7rem; font-family: var(--font-body); font-weight: 600; } .pub-abstract p { font-size: 1.02rem; line-height: 1.78; margin-bottom: 0; } .pub-links-block { display: flex; flex-wrap: wrap; gap: 0.7rem; } /* ── Generic page ────────────────────────────────────────────────── */ .page-single { padding: 3.5rem 0 5rem; } .page-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .page-title { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 700; color: var(--text-heading); margin-bottom: 0.4rem; } .page-subtitle { font-size: 1.15rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.5rem; } .page-date { font-size: 0.88rem; color: var(--text-muted); font-family: var(--font-mono); } .page-content { font-size: 1.08rem; line-height: 1.82; } .page-content h2 { margin-top: 2.2rem; } .page-content h3 { margin-top: 1.8rem; } .page-content ul, .page-content ol { margin-bottom: 1rem; } .page-back { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); } .back-link { font-size: 0.95rem; color: var(--text-muted); } .back-link:hover { color: var(--primary); } /* ── List pages ──────────────────────────────────────────────────── */ .page-list { padding: 3.5rem 0 5rem; } .list-header { margin-bottom: 2.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .list-intro { margin-top: 0.8rem; font-size: 1.05rem; color: var(--text-muted); } .list-items { display: flex; flex-direction: column; gap: 2rem; } .list-item { padding-bottom: 2rem; border-bottom: 1px solid var(--border); } .list-item:last-child { border-bottom: none; } .list-item-title { font-family: var(--font-serif); font-size: 1.3rem; margin-bottom: 0.4rem; } .list-item-title a { color: var(--text-heading); } .list-item-title a:hover { color: var(--primary); } .list-item-summary { font-size: 1rem; color: var(--text-muted); line-height: 1.65; } .list-item-date { font-size: 0.82rem; color: var(--text-muted); font-family: var(--font-mono); margin-top: 0.4rem; } /* ── Footer ──────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--border); background-color: var(--bg-alt); padding: 2.5rem 0; transition: background-color 0.25s ease, border-color 0.25s ease; } .footer-container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; text-align: center; font-size: 0.9rem; color: var(--text-muted); } .footer-container a { color: var(--text-muted); } .footer-container a:hover { color: var(--primary); } /* ── Mobile name (shown only in single-column layout) ───────────── */ .mobile-name { display: none; } /* ── Responsive ──────────────────────────────────────────────────── */ @media (max-width: 900px) { .mobile-name { display: block; text-align: center; width: 100%; } .desktop-name { display: none; } .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-sidebar { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 2rem; text-align: left; } .avatar, .avatar-placeholder { width: 140px; height: 140px; font-size: 2.2rem; } .social-links { justify-content: flex-start; } .sidebar-block { min-width: 160px; } } @media (max-width: 700px) { h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } .section { padding: 3rem 0; } .about-grid { grid-template-columns: 1fr; gap: 2rem; } .about-sidebar { align-items: center; text-align: center; } .sidebar-block { text-align: left; width: 100%; } .about-name { font-size: 2rem; } .project-grid { grid-template-columns: 1fr; } .section-header { flex-direction: column; gap: 0.3rem; } .nav-menu { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column; background-color: var(--bg-nav); border-bottom: 1px solid var(--border); padding: 0.8rem 1.5rem 1.2rem; gap: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .nav-menu.open { display: flex; } .nav-menu a { padding: 0.6rem 0.5rem; font-size: 1.05rem; border-bottom: 1px solid var(--border); } .nav-menu li:last-child a { border-bottom: none; } .nav-toggle { display: flex; } } @media (max-width: 480px) { .container { padding: 0 1rem; } .pub-item { padding-left: 0.7rem; } .about-sidebar { flex-direction: column; align-items: center; text-align: center; } .sidebar-block { text-align: left; } } /* ── Resources page ──────────────────────────────────────────────── */ .resources-intro { margin-bottom: 2rem; } .resources-intro p { font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.25rem; } .resources-divider { border: none; height: 1px; background: linear-gradient(90deg, transparent, var(--border), transparent); margin: 2.5rem 0; } .resource-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1.75rem; margin-bottom: 2.5rem; } .resource-nav-card { display: block; position: relative; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 18px var(--shadow-deep); border: 1px solid rgba(184, 144, 42, 0.25); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; text-decoration: none; } .resource-nav-card:hover { transform: translateY(-3px); box-shadow: 0 8px 28px var(--shadow-deep); border-color: rgba(184, 144, 42, 0.55); } .resource-nav-card img { display: block; width: 100%; height: auto; } .resource-section { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--border); } .resource-section-title { font-family: var(--font-serif); font-size: 1.6rem; color: var(--text-heading); margin-bottom: 0.5rem; } .resource-section-title a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: 1px; transition: color 0.14s ease; } .resource-section-title a:hover { color: var(--primary); } .resource-section-blurb { font-size: 1rem; color: var(--text-muted); margin-bottom: 1.5rem; } @media (max-width: 640px) { .resource-nav { grid-template-columns: 1fr; } } /* ── Clinical page ───────────────────────────────────────────────── */ .clinical-page { padding: 3.5rem 0 5rem; } .clinical-layout { display: grid; grid-template-columns: 1fr 300px; gap: 3.5rem; align-items: start; } .clinical-text { display: grid; grid-template-columns: 1fr 1px 1fr; gap: 0 2.5rem; } .clinical-col-heading { font-family: var(--font-serif); font-size: 1.5rem; color: var(--text-heading); margin-bottom: 1.1rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--gold); } .clinical-col-body { font-size: 1rem; line-height: 1.80; color: var(--text); } .clinical-col-body p + p { margin-top: 1rem; } .clinical-col-divider { background: linear-gradient(180deg, transparent, var(--border), transparent); width: 1px; align-self: stretch; margin-top: 0.5rem; } .clinical-panel img { width: 100%; height: auto; display: block; } @media (max-width: 900px) { .clinical-layout { grid-template-columns: 1fr; } .clinical-panel { max-width: 320px; margin: 0 auto; } } @media (max-width: 600px) { .clinical-text { grid-template-columns: 1fr; gap: 2rem 0; } .clinical-col-divider { display: none; } } /* ── Tree Divider ───────────────────────────────────────────────────── */ .tree-divider { width: 100%; height: 180px; background-color: var(--bg); background-image: url('/images/Tree%20divider.jpg'); background-blend-mode: multiply; background-repeat: repeat-x; background-size: auto 100%; background-position: center top; } [data-theme="dark"] .tree-divider { background-blend-mode: normal; filter: grayscale(1) invert(1); }