/* ============================================ CSS Variables — single place to tweak palette ============================================ */ :root { --color-bg: #f5f6f8; --color-surface: #ffffff; --color-text: #1a1a1a; --color-text-secondary: #555; --color-accent: #1a6fb5; --color-accent-hover: #134d80; --color-highlight: #dc2626; --color-highlight-bg: #fef2f2; --color-badge-bg: #e8f4f8; --color-badge-text: #0e6b8a; --color-border: #e5e7eb; --shadow-card: 0 1px 4px rgba(0, 0, 0, 0.06); --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.1); --radius: 10px; --max-width: 900px; --font-body: 'Open Sans', system-ui, -apple-system, sans-serif; --font-heading: 'Open Sans', system-ui, -apple-system, sans-serif; --transition: 0.2s ease; } /* ============================================ Reset & Base ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; scroll-behavior: smooth; } body { background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--color-accent-hover); text-decoration: underline; } img { max-width: 100%; height: auto; } /* ============================================ Top Navigation Bar ============================================ */ #navbar { position: sticky; top: 0; z-index: 100; background: var(--color-surface); border-bottom: 1px solid var(--color-border); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); } .nav-inner { max-width: var(--max-width); width: 92%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 50px; } .nav-brand { font-weight: 700; font-size: 1.05rem; color: var(--color-text) !important; white-space: nowrap; } .nav-brand:hover { text-decoration: none; color: var(--color-accent) !important; } .nav-links { display: flex; align-items: center; gap: 1.6rem; } .nav-links a { font-size: 0.88rem; font-weight: 600; color: var(--color-text-secondary); transition: color var(--transition); white-space: nowrap; } .nav-links a:hover { color: var(--color-accent); text-decoration: none; } /* Offset anchor targets so sticky nav doesn't cover them */ .card[id] { scroll-margin-top: 62px; } /* ============================================ Wrapper ============================================ */ #wrapper { max-width: var(--max-width); width: 92%; margin: 0 auto; padding: 1.5rem 0 3rem; } /* ============================================ Header / Hero ============================================ */ #header { display: flex; align-items: flex-start; gap: 2rem; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 2.5rem 2.5rem 2rem; margin-bottom: 1.5rem; font-family: var(--font-body); font-size: 1rem; } #profile { flex-shrink: 0; } #profile img { width: 180px; height: auto; border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); object-fit: cover; } #contact { flex: 1; line-height: 1.6; padding: 0; } #contact .name { font-size: 1.65rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.6rem; } /* Social links row */ .social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 0.8rem 0; } .social-links a { display: inline-flex; align-items: center; gap: 5px; font-size: 0.92rem; color: var(--color-text-secondary); transition: color var(--transition); } .social-links a:hover { color: var(--color-accent); text-decoration: none; } .social-links a img, .social-links a svg { width: 18px; height: 18px; opacity: 0.75; transition: opacity var(--transition); vertical-align: middle; } .social-links a:hover img, .social-links a:hover svg { opacity: 1; } .email-line { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; color: var(--color-text-secondary); margin-top: 0.4rem; } .email-line img { height: 22px; object-fit: contain; } /* ============================================ Section Cards ============================================ */ .card { background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 2rem 2.5rem; margin-bottom: 1.2rem; transition: box-shadow var(--transition); } h3 { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: var(--color-text); margin: 0 0 1.2rem 0; padding: 0; padding-bottom: 0.5rem; border-bottom: 2px solid var(--color-accent); display: inline-block; } /* Bio paragraph */ div.section { margin: 0; float: none; } div.section p { font-size: 1rem; line-height: 1.75; } /* ============================================ Highlight badge (replaces ) ============================================ */ .badge-new { display: inline-block; background: var(--color-highlight-bg); color: var(--color-highlight); font-size: 0.78rem; font-weight: 700; font-style: italic; padding: 1px 8px; border-radius: 4px; vertical-align: middle; } .badge-award { display: inline-block; background: #fef9c3; color: #92400e; font-size: 0.82rem; font-weight: 700; font-style: italic; padding: 2px 10px; border-radius: 4px; } .badge-venue { display: inline-block; background: var(--color-badge-bg); color: var(--color-badge-text); font-size: 0.8rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; margin-top: 3px; } .hiring { background: linear-gradient(135deg, #fef2f2, #fff7ed); border-left: 3px solid var(--color-highlight); padding: 0.75rem 1rem; border-radius: 0 6px 6px 0; margin-top: 0.75rem; font-size: 0.95rem; color: #b91c1c; font-style: italic; } .award-item { color: var(--color-highlight); font-weight: 600; } /* ============================================ Lists ============================================ */ ul, ol { line-height: 1.85; padding-left: 1.4rem; } li { margin: 0 0 0.5rem 0; padding: 0; } /* News items */ ul[type="square"] li { list-style: none; position: relative; padding-left: 1rem; } ul[type="square"] li::before { content: ''; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; background: var(--color-accent); border-radius: 1px; } /* Publication ordered list */ ol[type="square"] { counter-reset: pub-counter; list-style: none; padding-left: 0; } ol[type="square"] li { counter-increment: pub-counter; position: relative; padding-left: 2.2rem; margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid #f0f0f0; } ol[type="square"] li:last-child { border-bottom: none; } ol[type="square"] li::before { content: counter(pub-counter); position: absolute; left: 0; top: 0.1em; width: 1.6rem; height: 1.6rem; background: var(--color-badge-bg); color: var(--color-badge-text); font-size: 0.75rem; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* ============================================ Accordion (More News) ============================================ */ .accordion-toggle { cursor: pointer; padding: 0.6rem 0; font-size: 0.95rem; font-weight: 600; color: var(--color-accent); border: none; background: transparent; width: auto; text-align: left; border-bottom: none; display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; } .accordion-toggle::after { content: '▾'; font-size: 0.85rem; transition: transform var(--transition); } .accordion-toggle.active::after { transform: rotate(180deg); } .accordion-content { display: none; overflow: hidden; padding: 0.5rem 0 0; } /* ============================================ Experience table ============================================ */ table { margin: 0; padding: 0; width: 100%; } td { line-height: 1.65; padding: 0.6rem 0; vertical-align: top; } td img { border-radius: 6px; } /* ============================================ Footer spacing ============================================ */ p { padding: 0.3em 0; line-height: 1.7; } hr { border: none; border-top: 1px solid var(--color-border); margin: 1.5rem 0; } /* ============================================ Responsive ============================================ */ @media (max-width: 700px) { html { font-size: 15px; } .nav-links { gap: 0.9rem; } .nav-links a { font-size: 0.8rem; } .nav-brand { font-size: 0.95rem; } #header { flex-direction: column; align-items: center; text-align: center; padding: 2rem 1.5rem; } #profile img { width: 150px; } .social-links { justify-content: center; } .email-line { justify-content: center; } .card { padding: 1.5rem 1.2rem; } ol[type="square"] li { padding-left: 1.8rem; } } @media (max-width: 480px) { .nav-inner { width: 96%; } .nav-links { gap: 0.6rem; } .nav-links a { font-size: 0.75rem; } #wrapper { width: 96%; } #header { padding: 1.5rem 1rem; } .card { padding: 1.2rem 1rem; } } /* ============================================ Utility ============================================ */ .statcounter { display: none; }