/* ============================================================ Design tokens ============================================================ */ :root{ --bg: #ffffff; --bg-alt: #f5f5f7; --ink: #1d1d1f; --ink-soft: #6e6e73; --ink-faint: #a1a1a6; --line: #d2d2d7; --accent: #0071e3; --accent-ink: #ffffff; --radius-lg: 22px; --radius-md: 14px; --radius-sm: 8px; --maxw: 1100px; --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace; --ease: cubic-bezier(.22,.61,.36,1); /* Per-page hero tints — soft, Apple-style color washes, one per section of the site */ --tint-home: #eaf2fd; /* soft blue — overview */ --tint-research: #eaf7f0; /* soft mint — projects */ --tint-publications: #f1eefb; /* soft violet — archive */ --tint-talks: #fdf3e7; /* soft amber — events */ --tint-teaching: #fdedf1; /* soft rose — courses */ } /* Dark values, applied either automatically (system preference) or manually via the toggle button, which sets data-theme="dark" on . */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg: #000000; --bg-alt: #1d1d1f; --ink: #f5f5f7; --ink-soft: #a1a1a6; --ink-faint: #6e6e73; --line: #333336; --accent: #2997ff; --tint-home: #0e1a2b; --tint-research: #0e2019; --tint-publications: #180e2b; --tint-talks: #2b220e; --tint-teaching: #2b0e1a; } } :root[data-theme="dark"]{ --bg: #000000; --bg-alt: #1d1d1f; --ink: #f5f5f7; --ink-soft: #a1a1a6; --ink-faint: #6e6e73; --line: #333336; --accent: #2997ff; --tint-home: #0e1a2b; --tint-research: #0e2019; --tint-publications: #180e2b; --tint-talks: #2b220e; --tint-teaching: #2b0e1a; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body, .nav, .card, .stat, .chip, .pub, .avatar, .btn--ghost{ transition:background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); } body[data-page="home"]{ --page-tint:var(--tint-home); } body[data-page="research"]{ --page-tint:var(--tint-research); } body[data-page="publications"]{ --page-tint:var(--tint-publications); } body[data-page="talks"]{ --page-tint:var(--tint-talks); } body[data-page="teaching"]{ --page-tint:var(--tint-teaching); } body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; line-height:1.5; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } } /* ============================================================ Nav — translucent, blurred, sticky ============================================================ */ .nav{ position:sticky; top:0; z-index:100; backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); background:rgba(255,255,255,.72); border-bottom:1px solid var(--line); } @media (prefers-color-scheme: dark){ .nav{ background:rgba(0,0,0,.6); } } .nav__inner{ max-width:var(--maxw); margin:0 auto; padding:0 24px; height:52px; display:flex; align-items:center; justify-content:space-between; } .nav__brand{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; } .nav__mark{ width:26px; height:26px; border-radius:8px; background:var(--ink); color:var(--bg); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px; font-weight:600; } .nav__links{ display:flex; gap:28px; } .nav__right{ display:flex; align-items:center; gap:14px; } .nav__links a{ font-size:13px; color:var(--ink-soft); font-weight:500; transition:color .2s var(--ease); } .nav__links a:hover, .nav__links a[aria-current="page"]{ color:var(--ink); } .nav__cta{ font-size:13px; font-weight:600; color:var(--accent-ink); background:var(--accent); padding:7px 16px; border-radius:980px; transition:opacity .2s var(--ease); } .nav__cta:hover{ opacity:.85; } .nav__toggle{ display:none; } .theme-toggle{ display:flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%; border:1px solid var(--line); background:var(--bg); color:var(--ink); cursor:pointer; flex-shrink:0; transition:border-color .2s var(--ease), transform .2s var(--ease); } .theme-toggle:hover{ border-color:var(--ink-faint); } .theme-toggle:active{ transform:scale(.92); } .theme-toggle svg{ width:16px; height:16px; } .theme-toggle .icon-moon{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-sun{ display:none; } :root[data-theme="dark"] .theme-toggle .icon-moon{ display:block; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .theme-toggle .icon-sun{ display:none; } :root:not([data-theme="light"]) .theme-toggle .icon-moon{ display:block; } } @media (max-width:760px){ .nav__links{ display:none; } .nav__toggle{ display:block; background:none; border:none; color:var(--ink); font-size:20px; cursor:pointer; padding:4px 8px; } } @media (max-width:480px){ .nav__inner{ padding:0 16px; } .nav__cta{ display:none; } .nav__right{ gap:8px; } .nav__brand{ font-size:13px; } .theme-toggle{ width:36px; height:36px; } .nav__toggle{ padding:6px 10px; font-size:22px; } } /* ============================================================ Layout helpers ============================================================ */ .wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; } section{ padding:96px 0; } section.tight{ padding:64px 0; } section.stats-section{ padding:24px 0 64px; } .section-alt{ background:var(--bg-alt); } .eyebrow{ font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--accent); text-transform:uppercase; margin:0 0 14px; display:flex; align-items:center; gap:8px; } .eyebrow::before{ content:"⊢"; font-size:14px; } h1,h2,h3{ font-family:var(--font-display); font-weight:650; letter-spacing:-.02em; margin:0; } h1{ font-size:clamp(40px,6vw,64px); line-height:1.05; } h2{ font-size:clamp(28px,4vw,38px); line-height:1.1; } h3{ font-size:19px; line-height:1.3; } p{ margin:0; } .lede{ font-size:19px; color:var(--ink-soft); line-height:1.6; max-width:640px; } .body-text{ font-size:16px; color:var(--ink-soft); line-height:1.7; } .btn{ display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:500; padding:11px 22px; border-radius:980px; transition:all .2s var(--ease); } .btn--primary{ background:var(--accent); color:#fff; } .btn--primary:hover{ opacity:.85; } .btn--ghost{ border:1px solid var(--line); color:var(--ink); } .btn--ghost:hover{ border-color:var(--ink-faint); } .btn-row{ display:flex; gap:14px; flex-wrap:wrap; margin-top:32px; } .hr{ height:1px; background:var(--line); border:none; margin:0; } /* ============================================================ Reveal-on-scroll ============================================================ */ .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); } .reveal.in{ opacity:1; transform:none; } /* ============================================================ Hero ============================================================ */ .hero{ padding:120px 0 56px; background:linear-gradient(180deg, var(--page-tint, var(--bg)) 0%, var(--bg) 92%); } .hero__grid{ display:grid; grid-template-columns:1.3fr .7fr; gap:56px; align-items:center; } @media (max-width:820px){ .hero__grid{ grid-template-columns:1fr; } } .hero__title{ margin-bottom:20px; } .hero__title em{ font-style:normal; color:var(--ink-soft); } .avatar{ width:100%; aspect-ratio:1; border-radius:var(--radius-lg); background:linear-gradient(160deg,var(--bg-alt),var(--line)); display:flex; align-items:center; justify-content:center; overflow:hidden; border:1px solid var(--line); } .avatar img{ width:100%; height:100%; object-fit:cover; } .avatar span{ font-family:var(--font-display); font-size:64px; font-weight:600; color:var(--ink-faint); } /* ============================================================ Stat strip ============================================================ */ .stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; } @media (max-width:700px){ .stats{ grid-template-columns:repeat(2,1fr); } } .stat{ background:var(--bg); padding:28px 22px; } .stat b{ display:block; font-family:var(--font-display); font-size:32px; font-weight:650; } .stat span{ font-size:13px; color:var(--ink-soft); } /* ============================================================ Profile capsules (Scholar / DBLP / ResearchGate) — merged into btn-row ============================================================ */ .btn--profile{ display:inline-flex; align-items:center; justify-content:center; gap:9px; font-size:14px; font-weight:500; color:var(--ink); padding:8px 18px 8px 10px; border-radius:980px; border:1px solid var(--line); transition:all .2s var(--ease); } .btn--profile:hover{ border-color:var(--ink-faint); transform:translateY(-1px); } .btn--profile .icon-chip{ width:22px; height:22px; border-radius:7px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } .btn--profile .icon-chip svg{ width:13px; height:13px; } .chip--scholar{ background:#4285f4; } .chip--dblp{ background:#e2711d; } .chip--rg{ background:#00ccbb; } /* ============================================================ Cards ============================================================ */ .grid{ display:grid; gap:20px; } .grid--3{ grid-template-columns:repeat(3,1fr); } .grid--2{ grid-template-columns:repeat(2,1fr); } @media (max-width:820px){ .grid--3,.grid--2{ grid-template-columns:1fr; } } .card{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-md); padding:28px; transition:transform .3s var(--ease), border-color .3s var(--ease); } .card:hover{ transform:translateY(-3px); border-color:var(--ink-faint); } .card .tag{ font-family:var(--font-mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; } .card h3{ margin:10px 0 8px; } .card p{ font-size:14px; color:var(--ink-soft); line-height:1.6; } .card ul{ margin-top:14px; } .card ul li{ font-size:14px; padding:6px 0; border-top:1px solid var(--line); } .card ul li:first-child{ border-top:none; } .card ul a:hover{ color:var(--accent); } /* ============================================================ Activity list ============================================================ */ .activity{ } .activity li{ display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line); font-size:15px; color:var(--ink-soft); } .activity li:first-child{ border-top:none; } .activity li b{ color:var(--ink); font-weight:600; } .activity time{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); white-space:nowrap; padding-top:2px; min-width:64px; } /* ============================================================ Publications ============================================================ */ .pub-toolbar{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:36px; } .pub-filters{ display:flex; gap:8px; flex-wrap:wrap; } .chip{ font-size:13px; font-weight:500; padding:8px 16px; border-radius:980px; border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; background:var(--bg); transition:all .2s var(--ease); } .chip.active{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .pub-search{ font-size:14px; padding:9px 16px; border-radius:980px; border:1px solid var(--line); background:var(--bg-alt); min-width:220px; color:var(--ink); } .pub-search:focus{ outline:2px solid var(--accent); outline-offset:1px; } .pub-year{ margin:44px 0 18px; display:flex; align-items:center; gap:14px; } .pub-year h3{ font-family:var(--font-mono); font-weight:600; color:var(--ink-soft); } .pub-year .hr{ flex:1; } .pub{ border-top:1px solid var(--line); padding:22px 0; } .pub:first-of-type{ border-top:none; } .pub__meta{ font-family:var(--font-mono); font-size:11px; color:var(--accent); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px; } .pub__title{ font-size:16px; font-weight:600; line-height:1.4; margin-bottom:6px; } .pub__authors{ font-size:14px; color:var(--ink-soft); margin-bottom:4px; } .pub__venue{ font-size:13px; color:var(--ink-faint); font-style:italic; } .pub__links{ display:flex; gap:16px; margin-top:12px; } .pub__links a, .pub__links summary{ font-size:13px; font-weight:500; color:var(--accent); cursor:pointer; list-style:none; } .pub__links summary::-webkit-details-marker{ display:none; } .pub__abstract{ margin-top:14px; font-size:14px; color:var(--ink-soft); line-height:1.7; padding-left:16px; border-left:2px solid var(--line); } .pub__bib{ margin-top:14px; background:var(--bg-alt); border-radius:var(--radius-sm); padding:16px; font-family:var(--font-mono); font-size:12px; color:var(--ink-soft); white-space:pre-wrap; overflow-x:auto; } /* ============================================================ Project detail pages ============================================================ */ .pub-empty{ text-align:center; color:var(--ink-faint); padding:60px 0; font-size:15px; } .breadcrumb{ display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); margin-bottom:20px; } .breadcrumb:hover{ color:var(--accent); } .diagram-frame{ background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:40px 32px; overflow-x:auto; } .diagram-frame svg{ width:100%; height:auto; min-width:560px; display:block; margin:0 auto; } .people-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:16px; } .person{ display:flex; align-items:center; gap:14px; padding:18px; border:1px solid var(--line); border-radius:var(--radius-md); } .person__avatar{ width:42px; height:42px; border-radius:50%; flex-shrink:0; background:var(--bg-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-faint); } .person__name{ font-size:14px; font-weight:600; } .person__affil{ font-size:13px; color:var(--ink-soft); } /* ============================================================ Course detail pages ============================================================ */ .course-info{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; } @media (max-width:700px){ .course-info{ grid-template-columns:1fr; } } .course-info div{ background:var(--bg); padding:16px 18px; font-size:14px; color:var(--ink); } .course-info b{ font-weight:600; } section.course-info-section{ padding:24px 0 48px; } .outcomes{ display:grid; gap:12px; } .outcomes li{ display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--ink-soft); line-height:1.6; } .outcomes li::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--accent); flex-shrink:0; margin-top:7px; } .schedule{ border:1px solid var(--line); border-radius:var(--radius-md); overflow:hidden; } .schedule-row{ display:grid; grid-template-columns:64px 1fr; gap:16px; padding:16px 20px; border-top:1px solid var(--line); align-items:baseline; } .schedule-row:first-child{ border-top:none; } .schedule-row:nth-child(odd){ background:var(--bg-alt); } .schedule-week{ font-family:var(--font-mono); font-size:12px; color:var(--ink-faint); } .schedule-topic{ font-size:14px; color:var(--ink); } .grading{ display:flex; flex-direction:column; gap:16px; } .grade-item{ display:flex; align-items:center; gap:16px; } .grade-label{ width:170px; flex-shrink:0; font-size:14px; color:var(--ink); } .grade-bar-track{ flex:1; height:8px; border-radius:4px; background:var(--bg-alt); overflow:hidden; } .grade-bar-fill{ height:100%; border-radius:4px; background:var(--accent); } .grade-pct{ width:40px; text-align:right; font-family:var(--font-mono); font-size:13px; color:var(--ink-soft); flex-shrink:0; } @media (max-width:600px){ .grade-label{ width:110px; font-size:13px; } } .resource-card{ display:flex; gap:14px; padding:20px; border:1px solid var(--line); border-radius:var(--radius-md); } .resource-icon{ width:38px; height:38px; border-radius:10px; flex-shrink:0; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); } .resource-icon svg{ width:18px; height:18px; } .resource-title{ font-size:14px; font-weight:600; margin-bottom:3px; } .resource-meta{ font-size:13px; color:var(--ink-soft); } /* ============================================================ Footer ============================================================ */ footer{ border-top:1px solid var(--line); padding:40px 0; } .footer__row{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; } .footer__row p{ font-size:13px; color:var(--ink-faint); } .footer__links{ display:flex; gap:20px; } .footer__links a{ font-size:13px; color:var(--ink-soft); } .footer__links a:hover{ color:var(--accent); } @media (max-width:600px){ section{ padding:64px 0; } .hero{ padding:80px 0 48px; } .wrap{ padding:0 20px; } h1{ font-size:clamp(34px,9vw,44px); } .stats{ grid-template-columns:1fr 1fr; } .stat{ padding:20px 16px; } .stat b{ font-size:26px; } .card{ padding:22px; } .pub-toolbar{ flex-direction:column; align-items:stretch; } .pub-search{ width:100%; min-width:0; } .pub-filters{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; } .chip{ white-space:nowrap; } .activity li{ flex-direction:column; gap:4px; } .activity time{ min-width:0; } .btn-row{ flex-direction:column; align-items:stretch; } .btn{ justify-content:center; } .footer__row{ flex-direction:column; align-items:flex-start; } }