/* Smooth scroll for in-page anchor links, with offset for the fixed topnav */ html { scroll-behavior: smooth; } h1[id], h2[id], h3[id] { scroll-margin-top: 60px; } /* Site footer — full-width under both sidebar and content */ .site-footer { clear: both; margin-top: 3rem; padding: 1rem 0 0.5rem; border-top: 1px solid rgba(128, 128, 128, 0.25); font-size: 0.72rem; color: rgba(128, 128, 128, 0.9); text-align: center; letter-spacing: 0.02em; } .site-footer a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .site-footer a:hover { color: var(--global-theme-color, #0f766e); } /* Unified section headings: left teal accent bar, consistent spacing */ section h2 { border-left: 4px solid var(--global-theme-color, #0f766e); padding-left: 14px; margin: 3rem 0 1rem; font-weight: 600; font-size: 1.5rem; line-height: 1.25; } /* News timeline: vertical teal line + circular dots centered on it */ .news-timeline { list-style: none; padding: 0 0 0 24px; margin: 0 0 20px; position: relative; } /* line: occupies x=[6,8], center x=7 */ .news-timeline::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 2px; background: var(--global-theme-color, #0f766e); opacity: 0.3; } .news-timeline li { position: relative; padding-left: 0; margin-bottom: 18px; } .news-timeline li:last-child { margin-bottom: 0; } /* dot: li sits at ul's content-left (x=24); dot covers x=[1,13], center x=7 (= line center) */ .news-timeline li::before { content: ''; position: absolute; left: -23px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--global-theme-color, #0f766e); } .news-date { display: block; font-family: "IBM Plex Mono", Menlo, Consolas, monospace; font-size: 0.78rem; font-weight: 500; color: var(--global-theme-color, #0f766e); letter-spacing: 0.02em; margin-bottom: 2px; } .news-body { display: block; line-height: 1.55; } /* Manual theme toggle overrides Applied when user explicitly picks dark/light (data-theme attr on ). Falls back to @media (prefers-color-scheme) when no attribute is set. */ /* === Force DARK regardless of system === */ html[data-theme="dark"] .social-icons a { color: #2dd4bf !important; } html[data-theme="dark"] .social-icons a:hover { background-color: #20212b; color: black; transform: scale(1.2); } html[data-theme="dark"] body { background-color: #20212b; color: #dadbdf; } html[data-theme="dark"] autocolor { color: #dadbdf; } html[data-theme="dark"] lightonly { visibility: hidden; } html[data-theme="dark"] darkonly { visibility: visible; } html[data-theme="dark"] papertitle { color: #eeeff0; } 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: #2dd4bf; } html[data-theme="dark"] a { color: #2dd4bf; } html[data-theme="dark"] th, html[data-theme="dark"] dt { color: #2dd4bf; } html[data-theme="dark"] strong { color: #eeeff0; } html[data-theme="dark"] { --global-theme-color: #2dd4bf; } html[data-theme="dark"] .publications ol.bibliography li .links a.btn { color: #FFFFFF; border: 1px solid #FFFFFF; } /* === Force LIGHT regardless of system (overrides @media dark) === */ html[data-theme="light"] .social-icons a { color: #0f766e !important; } html[data-theme="light"] .social-icons a:hover { background-color: white; color: black; transform: scale(1.2); } html[data-theme="light"] body { background-color: initial; color: initial; } html[data-theme="light"] autocolor { color: #595959; } html[data-theme="light"] lightonly { visibility: visible; } html[data-theme="light"] darkonly { visibility: hidden; } html[data-theme="light"] papertitle { color: initial; } html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4, html[data-theme="light"] h5, html[data-theme="light"] h6 { color: #0f766e; } html[data-theme="light"] a { color: #0f766e; } html[data-theme="light"] th, html[data-theme="light"] dt { color: #444; } html[data-theme="light"] strong { color: #222; } html[data-theme="light"] { --global-theme-color: #0f766e; } html[data-theme="light"] .publications ol.bibliography li .links a.btn { color: #000000; border: 1px solid #000000; } /* === Toggle button === */ .theme-toggle { position: absolute; top: 0; right: 10px; color: white; background: transparent; border: none; cursor: pointer; padding: 10px 12px; font-size: 17px; line-height: 1; text-decoration: none; z-index: 1000; } .theme-toggle:hover { color: #2dd4bf; } @media (max-width: 960px) { .theme-toggle { right: calc(16px + 44px); } }