/* ========================================================================== Dark mode Scoped overrides applied when is set. The base theme is compiled from SCSS with hard-coded light colors, so dark mode is layered on top here as a set of CSS overrides. ========================================================================== */ :root { --dm-bg: #1a1a1d; --dm-bg-elevated: #242428; --dm-bg-code: #2b2b30; --dm-text: #e3e3e6; --dm-text-muted: #a8a8ad; --dm-border: #3a3a40; --dm-link: #7fb0ff; --dm-link-hover: #a9caff; --dm-primary: #e3e3e6; } /* Global type scale — reduce base font size site-wide */ html { font-size: 15px; } @media (min-width: 48em) { html { font-size: 16px; } } /* Smooth the flip between themes */ html[data-theme="dark"], html[data-theme="dark"] body, html[data-theme="dark"] .masthead, html[data-theme="dark"] .page__footer { transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } /* Base ------------------------------------------------------------------- */ html[data-theme="dark"] body { background-color: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--dm-text); } html[data-theme="dark"] a { color: var(--dm-link); } html[data-theme="dark"] a:hover, html[data-theme="dark"] a:focus { color: var(--dm-link-hover); } html[data-theme="dark"] hr { border-top-color: var(--dm-border); } html[data-theme="dark"] blockquote { border-left-color: var(--dm-primary); color: var(--dm-text-muted); } html[data-theme="dark"] figcaption { color: var(--dm-text-muted); } /* Masthead / navigation -------------------------------------------------- */ html[data-theme="dark"] .masthead { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .greedy-nav { background: var(--dm-bg); } html[data-theme="dark"] .greedy-nav a { color: var(--dm-text); } html[data-theme="dark"] .greedy-nav a:hover { color: var(--dm-text-muted); } html[data-theme="dark"] .greedy-nav .visible-links a:before { background: var(--dm-link); } html[data-theme="dark"] .greedy-nav button { color: var(--dm-text); } html[data-theme="dark"] .greedy-nav .hidden-links { background: var(--dm-bg-elevated); border-color: var(--dm-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .greedy-nav .hidden-links a { color: var(--dm-text); } html[data-theme="dark"] .greedy-nav .hidden-links a:hover { color: var(--dm-text); background: var(--dm-bg-code); } html[data-theme="dark"] .greedy-nav .hidden-links:before { border-color: var(--dm-bg-elevated) transparent; } html[data-theme="dark"] .navicon, html[data-theme="dark"] .navicon:before, html[data-theme="dark"] .navicon:after { background: var(--dm-text); } /* Sidebar / author profile ---------------------------------------------- */ html[data-theme="dark"] .author__avatar img { border-color: var(--dm-border); } html[data-theme="dark"] .author__content, html[data-theme="dark"] .author__name, html[data-theme="dark"] .author__bio { color: var(--dm-text); } html[data-theme="dark"] .author__urls-wrapper button { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .author__urls { background: var(--dm-bg); border-color: var(--dm-border); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .author__urls:before { border-color: var(--dm-bg) transparent; } html[data-theme="dark"] .author__urls a { color: var(--dm-text); } /* Footer ----------------------------------------------------------------- */ html[data-theme="dark"] .page__footer { background-color: var(--dm-bg-elevated); border-top-color: var(--dm-border); color: var(--dm-text-muted); } html[data-theme="dark"] .page__footer a { color: var(--dm-text-muted); } html[data-theme="dark"] .page__footer .fas, html[data-theme="dark"] .page__footer .fab, html[data-theme="dark"] .page__footer .far, html[data-theme="dark"] .page__footer .fal { color: var(--dm-text-muted); } /* Code ------------------------------------------------------------------- */ html[data-theme="dark"] p > code, html[data-theme="dark"] a > code, html[data-theme="dark"] li > code, html[data-theme="dark"] figcaption > code, html[data-theme="dark"] td > code, html[data-theme="dark"] pre, html[data-theme="dark"] .highlight, html[data-theme="dark"] div.highlighter-rouge, html[data-theme="dark"] figure.highlight { background: var(--dm-bg-code); color: var(--dm-text); border-color: var(--dm-border); } /* Tables ----------------------------------------------------------------- */ html[data-theme="dark"] table { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: var(--dm-border); } html[data-theme="dark"] thead { background-color: var(--dm-bg-code); border-bottom-color: var(--dm-border); } html[data-theme="dark"] tr, html[data-theme="dark"] td { background-color: transparent; } html[data-theme="dark"] tbody tr:nth-child(even) { background-color: var(--dm-bg-elevated); } /* Archive / teaser cards ------------------------------------------------- */ html[data-theme="dark"] .archive__item-title, html[data-theme="dark"] .archive__item-excerpt, html[data-theme="dark"] .page__meta { color: var(--dm-text); } html[data-theme="dark"] .archive__item-teaser { border-color: var(--dm-border); } /* Buttons ---------------------------------------------------------------- */ html[data-theme="dark"] .btn--inverse { background-color: var(--dm-bg-elevated); border-color: var(--dm-border); color: var(--dm-text); } /* Theme toggle button ---------------------------------------------------- Styled to match the other masthead nav links (Publications, CV, ...). The selectors are scoped under .greedy-nav and qualified with the element so they beat the theme's `.greedy-nav button { position:absolute; ... }` rule (which is intended for the mobile hamburger button only). */ .greedy-nav button.theme-toggle { position: relative; display: block; height: auto; margin: 0 1rem; padding: 0.5rem 0; background: transparent; background-color: transparent; border: 0; outline: none; color: #000000; font-family: inherit; font-size: inherit; line-height: inherit; cursor: pointer; -webkit-transition: color 0.2s ease-in-out; transition: color 0.2s ease-in-out; } .greedy-nav button.theme-toggle:hover { color: #333333; background-color: transparent; } /* Match nav link color in dark mode */ html[data-theme="dark"] .greedy-nav button.theme-toggle { color: var(--dm-text); } html[data-theme="dark"] .greedy-nav button.theme-toggle:hover { color: var(--dm-text-muted); } /* The icon sits just before the label */ .greedy-nav button.theme-toggle .fas { margin-right: 0.4em; } /* Show the correct icon + label per theme */ .theme-toggle__moon, .theme-toggle__text--dark { display: inline; } .theme-toggle__sun, .theme-toggle__text--light { display: none; } html[data-theme="dark"] .theme-toggle__moon, html[data-theme="dark"] .theme-toggle__text--dark { display: none; } html[data-theme="dark"] .theme-toggle__sun, html[data-theme="dark"] .theme-toggle__text--light { display: inline; } /* Emoji icons in the author sidebar (location, GitHub) — fixed width so they line up with the remaining Font Awesome `fa-fw` icons. */ .emoji-icon { display: inline-block; width: 1.25em; text-align: center; font-style: normal; } /* ========================================================================== Accessibility ========================================================================== */ /* Skip-to-content link: off-screen until focused via keyboard */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 1000; padding: 0.6em 1em; background: #000; color: #fff; text-decoration: none; border-radius: 0 0 4px 0; } .skip-link:focus { left: 0; } html[data-theme="dark"] .skip-link { background: var(--dm-text); color: var(--dm-bg); } /* Lab page member links: lift contrast in dark mode (#007bff fails AA on the dark background; --dm-link is ~7.7:1). */ html[data-theme="dark"] .member-card a { color: var(--dm-link); } html[data-theme="dark"] .member-card a:hover { color: var(--dm-link-hover); } /* Respect reduced-motion preferences (theme intro animations + theme fade) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }