:root { --bg: #ffffff; --fg: #1a1a1a; --muted: #555f6d; --accent: #2f7d4f; --card: #f5f7f6; --border: #e2e6e4; --max-width: 42rem; color-scheme: light; } /* Dark theme. An explicit choice via the toggle (`data-theme` on , persisted in localStorage and applied pre-paint) always wins; with no explicit choice we follow the OS `prefers-color-scheme`. */ :root[data-theme="dark"] { --bg: #0f1311; --fg: #e8ece9; --muted: #9aa6a0; --accent: #5cc98a; --card: #182019; --border: #26302a; color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0f1311; --fg: #e8ece9; --muted: #9aa6a0; --accent: #5cc98a; --card: #182019; --border: #26302a; color-scheme: dark; } } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Theme the canvas itself (not just ) so short pages and the macOS overscroll/rubber-band area follow the theme instead of flashing white. */ background: var(--bg); } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Header / nav */ .site-header { border-bottom: 1px solid var(--border); position: sticky; top: 0; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); } .nav { max-width: var(--max-width); margin: 0 auto; padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .brand { font-weight: 700; color: var(--fg); } .nav-links { display: flex; align-items: center; gap: 1.25rem; list-style: none; margin: 0; padding: 0; } .nav-links a { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); } .nav-links a:hover { color: var(--fg); } .nav-links a.active { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; } .nav-links .nav-icon { flex: none; transition: transform 0.15s ease; } .nav-links a:hover .nav-icon { transform: scale(1.1); } /* Light/dark toggle (moon in light mode, sun in dark mode) */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; line-height: 0; } .theme-toggle:hover { color: var(--fg); } .theme-toggle .nav-icon { flex: none; transition: transform 0.2s ease; } .theme-toggle:hover .nav-icon { transform: rotate(-18deg) scale(1.1); } /* Show the moon in light mode, the sun in dark mode. */ .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } } /* Layout */ main { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; } .hero { padding: 4rem 0 2rem; } .hero h1 { font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 0.5rem; } .lead { font-size: 1.2rem; color: var(--muted); margin: 0; } .section { padding: 2rem 0; border-top: 1px solid var(--border); } .section h2 { font-size: 1.5rem; margin-top: 0; } /* Cards */ .cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .card { background: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.25rem; } .card h3 { margin-top: 0; } .card p { color: var(--muted); margin-bottom: 0; } .card-lang { font-size: 0.85rem; margin: 0 0 0.5rem; } /* Carousel */ .carousel { margin: 0 0 1.75rem; } .carousel-viewport { position: relative; } .carousel-track { position: relative; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; border: 1px solid var(--border); border-radius: 0.75rem; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-slide { flex: 0 0 100%; scroll-snap-align: start; } .carousel-slide img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--bg) 75%, transparent); color: var(--fg); font-size: 1.25rem; line-height: 1; cursor: pointer; } .carousel-btn:hover { border-color: var(--accent); } .carousel-btn:disabled { opacity: 0.35; cursor: default; } .carousel-prev { left: 0.5rem; } .carousel-next { right: 0.5rem; } .carousel-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 0.6rem; } .carousel-caption { margin: 0; font-size: 0.9rem; color: var(--muted); } .carousel-dots { display: flex; flex: none; gap: 0.4rem; } .carousel-dot { width: 0.5rem; height: 0.5rem; padding: 0; border: 1px solid var(--muted); border-radius: 999px; background: none; cursor: pointer; } .carousel-dot.is-active { background: var(--accent); border-color: var(--accent); } .card-link { display: block; color: inherit; transition: border-color 0.15s ease, transform 0.15s ease; } .card-link:hover { text-decoration: none; border-color: var(--accent); transform: translateY(-2px); } .card-link h3 { color: var(--fg); } /* CV */ .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cv-download { font-size: 0.9rem; font-weight: 600; } .cv-subhead { font-size: 1.1rem; margin: 1.75rem 0 0.75rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; } .cv-list { list-style: none; margin: 0; padding: 0; } .cv-entry { padding: 1rem 0; border-top: 1px solid var(--border); } .cv-entry:first-child { border-top: none; } .cv-entry-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .cv-role { font-weight: 600; } .cv-date { color: var(--muted); font-size: 0.9rem; white-space: nowrap; } .cv-org { color: var(--muted); font-style: italic; font-size: 0.95rem; } .cv-entry p { margin: 0.4rem 0 0; color: var(--muted); } .cv-entry ul { margin: 0.4rem 0 0; padding-left: 1.25rem; color: var(--muted); } .cv-entry li + li { margin-top: 0.15rem; } .cv-contact { color: var(--muted); } .cv-facts { margin: 0 0 1rem; } .cv-fact { display: grid; grid-template-columns: 11rem 1fr; gap: 0.25rem 1.5rem; padding: 0.5rem 0; border-top: 1px solid var(--border); } .cv-fact:first-child { border-top: none; } .cv-fact dt { font-weight: 600; } .cv-fact dd { margin: 0; color: var(--muted); } @media (max-width: 32rem) { .cv-fact { grid-template-columns: 1fr; gap: 0.15rem; } } .cv-pubs { margin: 0 0 1rem; padding-left: 1.4em; color: var(--muted); } .cv-pubs li { padding: 0.4rem 0; border-top: 1px solid var(--border); } .cv-pubs li:first-child { border-top: none; padding-top: 0; } .cv-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .cv-skills li { background: var(--card); border: 1px solid var(--border); border-radius: 999px; padding: 0.3rem 0.8rem; font-size: 0.9rem; } /* Footer */ .site-footer { max-width: var(--max-width); margin: 3rem auto 2rem; padding: 1.5rem 1.25rem 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; }