* { box-sizing: border-box; } /* Thin, low-contrast scrollbar (Firefox). */ html { scrollbar-width: thin; scrollbar-color: rgba(136, 136, 136, 0.5) transparent; } /* Same idea for WebKit/Blink browsers: a slim thumb inset from the track via a transparent border, so it reads as a thin floating bar rather than the OS's default chunky scrollbar. */ ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background-color: rgba(136, 136, 136, 0.5); background-clip: content-box; border: 2px solid transparent; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background-color: rgba(136, 136, 136, 0.8); } :root { --bg-color: #f1f1f1; --sidebar-bg-color: #e5e5e6; --text-color: #000; --accent-color: #7b1e3a; /* Shading for nav links, layered on top of --sidebar-bg-color: a dark overlay in light mode, a light one in dark mode (see the two dark blocks below), since "shading" darkens on a light background but needs to lighten on an already-dark one. */ --nav-active-bg: rgba(0, 0, 0, 0.06); --nav-hover-bg: rgba(0, 0, 0, 0.12); } /* Falls back to the system's light/dark preference when no manual choice has been stored yet (see assets/js/theme-toggle.js). */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg-color: #1a1a1a; --sidebar-bg-color: #262626; --text-color: #e8e8e8; --accent-color: #daa520; --nav-active-bg: rgba(255, 255, 255, 0.08); --nav-hover-bg: rgba(255, 255, 255, 0.16); } } /* Manual override, set as a data-theme attribute on once the visitor has clicked the toggle button; wins over the system preference above regardless of which way it goes. */ :root[data-theme="dark"] { --bg-color: #1a1a1a; --sidebar-bg-color: #262626; --text-color: #e8e8e8; --accent-color: #daa520; --nav-active-bg: rgba(255, 255, 255, 0.08); --nav-hover-bg: rgba(255, 255, 255, 0.16); } body { margin: 0; font-family: "Source Sans 3", sans-serif; font-size: 1.125rem; line-height: 1.5; background: var(--bg-color); color: var(--text-color); } h1 { text-align: center; } h2 { margin-top: 2.5rem; } /* Desktop: the nav is a persistent left sidebar, so page content is shifted right to clear it, then centered (via the flex row below) within whatever width remains to the right of the sidebar — not within the full browser window. */ .page-wrap { display: flex; justify-content: center; margin-left: 12rem; } .page-content { width: 100%; max-width: 45rem; /* Bottom padding clears .last-updated-bar's height, so real content never sits directly behind the label -- only the fade behind it. */ padding: 2rem 3rem 4rem; } /* Fixed label with a gradient fade behind it rather than a solid background, so it reads as floating over the page rather than a hard bar. Non-interactive (pointer-events: none) and low z-index, since the bar has no interactive content of its own; without it, the bar would block clicks on real content underneath, since it visually overlaps the very bottom of the page. Left clears the desktop sidebar (matching .page-wrap's own margin-left); the mobile media query below resets it to 0, where there's no sidebar. */ .last-updated-bar { position: fixed; bottom: 0; left: 12rem; right: 0; height: 3rem; display: flex; align-items: flex-end; justify-content: flex-end; padding: 0 0.75rem 0.75rem; background: linear-gradient(to bottom, transparent, var(--bg-color) 65%); pointer-events: none; z-index: 5; } .last-updated { margin: 0; color: #888; font-size: 0.8em; line-height: 1; opacity: 0.7; } /* Hidden on desktop; only the mobile media query below shows it. */ .topbar { display: none; } .nav-toggle { background: none; border: none; cursor: pointer; display: flex; flex-direction: column; gap: 0.3rem; padding: 0.4rem; } .nav-toggle-bar { background: var(--text-color); border-radius: 1px; display: block; height: 2px; width: 1.4rem; } .site-name { color: inherit; font-weight: bold; text-decoration: none; } /* Desktop-only: a persistent, non-clickable header atop the sidebar, above the nav links (Home included below it), so the name stays visible while browsing any page. Hidden on mobile, where .topbar already shows the name (see the @media block below). */ .sidebar-name { display: block; font-size: 1.15rem; text-align: center; } /* A standalone divider between the name and the nav links below it, rather than living on the name's own border/padding -- so the line sits between the two, not as part of either one's clickable box. */ .sidebar-divider { border: none; border-top: 1px solid var(--nav-hover-bg); margin: 0; } .profile-photo { display: block; width: 10rem; height: 10rem; object-fit: cover; border-radius: 50%; margin: 0 auto; } .mailto-link, .paper-title, .paper-link, .pdf-link, .event-link, .teaching-course-link, .external-link { color: var(--accent-color); text-decoration: none; } .mailto-link:visited, .paper-title:visited, .paper-link:visited, .pdf-link:visited, .event-link:visited, .teaching-course-link:visited, .external-link:visited { color: var(--accent-color); } .mailto-link:hover, .paper-title:hover, .paper-link:hover, .pdf-link:hover, .event-link:hover, .teaching-course-link:hover, .external-link:hover { text-decoration: underline; } .paper-title { font-style: italic; } .cv-page-link, .person-link { color: inherit; text-decoration: none; } .cv-page-link:visited, .person-link:visited { color: inherit; } .cv-page-link:hover, .person-link:hover { color: var(--accent-color); } /* position + z-index gives the map its own stacking context, so Leaflet's internal panes/controls (which use z-index up to 1000) can never escape above the fixed nav elements outside #map. */ #map { height: 400px; position: relative; z-index: 0; } #map-legend { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; padding: 0; margin: 0.75rem 0 0; font-size: 14px; } #map-legend .dot { display: inline-block; width: 0.9em; height: 0.9em; border-radius: 50%; margin-right: 0.35em; vertical-align: middle; } .map-pin { background: none; border: none; } /* Outline style: muted (text-color border/text at reduced opacity) by default, brightening to full-opacity accent-color border/text on hover -- no solid fill, so it reads as understated rather than a heavy call-to-action. */ .button { display: block; width: fit-content; margin: 0 auto; padding: 0.2rem 0.5rem; border: 1px solid var(--text-color); border-radius: 0.25rem; font-size: 0.9em; background: none; color: var(--text-color); text-decoration: none; opacity: 0.55; } .button:visited { color: var(--text-color); } .button:hover { border-color: var(--accent-color); color: var(--accent-color); opacity: 1; } .theme-toggle { align-items: center; background: none; border: none; color: #888; cursor: pointer; display: flex; justify-content: center; padding: 0.4rem; position: fixed; top: 0.75rem; right: 0.75rem; z-index: 30; } .theme-toggle:hover { color: var(--accent-color); } /* Desktop: persistent left sidebar with just the nav links. */ .site-nav { background: var(--sidebar-bg-color); bottom: 0; display: flex; flex-direction: column; gap: 0.5rem; left: 0; overflow-y: auto; padding: 1rem; position: fixed; top: 0; width: 12rem; } .site-nav a { border-radius: 0.3rem; color: inherit; padding: 0.4rem 0.6rem; text-decoration: none; } .site-nav a.active { background: var(--nav-active-bg); } .site-nav a:hover { background: var(--nav-hover-bg); } .external-link-icon { vertical-align: -1px; margin-left: 0.15rem; opacity: 0.6; } /* Hidden on desktop; only used to close the mobile drawer. */ .nav-backdrop { display: none; } @media (max-width: 768px) { /* Smaller than desktop's 18px -- reads better at typical phone viewing distance/density than the size chosen for desktop. */ body { font-size: 1rem; } .page-wrap { margin-left: 0; padding-top: 3.5rem; } .page-content { padding: 1rem 1.25rem 3.5rem; } .last-updated-bar { left: 0; } /* h1's own default browser margin-top is redundant on top of .page-content's padding above, and stacked with it the title sits much too far below the topbar. */ h1 { margin-top: 0; } .topbar { align-items: center; background: var(--sidebar-bg-color); border-bottom: 1px solid var(--text-color); display: flex; height: 3rem; justify-content: center; left: 0; position: fixed; right: 0; top: 0; z-index: 20; } .nav-toggle { left: 0.75rem; position: absolute; top: 50%; transform: translateY(-50%); } /* Centered the same way as .nav-toggle: top is the topbar's own vertical midpoint (half its 3rem height), then translateY(-50%) centers the button itself on that point. */ .theme-toggle { top: 1.5rem; transform: translateY(-50%); } /* .topbar already shows the name on mobile. */ .sidebar-name, .sidebar-divider { display: none; } /* Off-screen drawer instead of a persistent sidebar. */ .site-nav { top: 3rem; transform: translateX(-100%); transition: transform 0.2s ease; width: 80%; max-width: 16rem; z-index: 25; } .site-nav.open { transform: translateX(0); } .nav-backdrop:not([hidden]) { background: rgba(0, 0, 0, 0.4); bottom: 0; display: block; left: 0; position: fixed; right: 0; top: 3rem; z-index: 24; } }