/* Shared light-mode rules (page-agnostic). Include this stylesheet on pages that want a per-page or site-wide light mode. Styles are applied when the document root has the `light-mode` class on . */ /* Smooth theme transitions Apply gentle transitions to common visual properties when toggling `body.light-mode` so switching between dark and light appears smooth. Respects the user's `prefers-reduced-motion` setting by disabling transitions when the user requests reduced motion. */ @media (prefers-reduced-motion: no-preference) { /* Smooth transitions for theme toggles on all pages EXCEPT the homepage. Pages that should opt-out (homepage) add `body.no-theme-transition`. */ body:not(.no-theme-transition), body:not(.no-theme-transition) header, body:not(.no-theme-transition) nav, body:not(.no-theme-transition) main, body:not(.no-theme-transition) footer, body:not(.no-theme-transition) .page-wrapper, body:not(.no-theme-transition) .project-card, body:not(.no-theme-transition) .contact-card, body:not(.no-theme-transition) .contact-details, body:not(.no-theme-transition) .meme-overlay, body:not(.no-theme-transition) #image-overlay, body:not(.no-theme-transition) #bg-image, body:not(.no-theme-transition) .social-card img, body:not(.no-theme-transition) .project-card img, body:not(.no-theme-transition) button, body:not(.no-theme-transition) a, body:not(.no-theme-transition) input, body:not(.no-theme-transition) textarea, body:not(.no-theme-transition) select { /* Slightly longer durations for a smooth, pleasant cross-fade */ transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease, box-shadow 420ms ease, opacity 320ms ease, filter 420ms ease, backdrop-filter 420ms ease; } /* Images and svg filter transitions (slower for smoother feel) */ body:not(.no-theme-transition) #bg-image, body:not(.no-theme-transition) .meme-wrapper img, body:not(.no-theme-transition) .project-card img, body:not(.no-theme-transition) .social-card img { transition: filter 520ms ease, opacity 420ms ease; will-change: filter, opacity; } /* User-triggered theme animations: only enable smooth transitions for theme-related properties while the temporary `.theme-animate` class is present on the root. This keeps all other animations (transforms, element-specific hover transitions, keyframes) unaffected. */ html.theme-animate *, body.theme-animate * { transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease, box-shadow 420ms ease, opacity 380ms ease, filter 420ms ease, backdrop-filter 420ms ease; } /* Image/filter transitions slightly slower for a pleasant cross-fade */ html.theme-animate #bg-image, body.theme-animate #bg-image, html.theme-animate .meme-wrapper img, body.theme-animate .meme-wrapper img, html.theme-animate .project-card img, body.theme-animate .project-card img, html.theme-animate .social-card img, body.theme-animate .social-card img { transition: filter 600ms ease, opacity 420ms ease; will-change: filter, opacity; } } @media (prefers-reduced-motion: reduce) { :root, body, header, nav, main, footer, .page-wrapper, .project-card, .contact-card, .contact-details, .meme-overlay, #image-overlay, #bg-image, .social-card img, .project-card img, button, a, input, textarea, select { transition: none !important; } } /* Base light/dark inversion */ body.light-mode{ background-color: #ffffff !important; color: #111111 !important; } body.light-mode a{ color: #0b57a4; } /* Header / nav become black bars with light text in light-mode (per request) */ body.light-mode header, body.light-mode nav#site-nav{ background: #000000 !important; } body.light-mode .logo-container a, body.light-mode nav#site-nav a{ color: #ffffff !important; } /* Hamburger bars (three lines) usually use .bar; ensure they're visible */ body.light-mode .hamburger .bar{ background-color: #ffffff !important; } /* Footer styling for light mode */ body.light-mode footer{ background: #ffffff !important; color: #111111 !important; } /* Generic card / panel adjustments */ body.light-mode .project-card{ background: #ffffff !important; border-color: #e6e6e6 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important; } body.light-mode .project-title{ color: #111 !important; } body.light-mode .project-subtitle{ color: #444 !important; } /* Meme reveal overlay: dark overlay in normal (dark) mode; in light mode use a pale overlay so the button remains readable against a white page. */ .meme-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.6); transition: background 220ms ease, opacity 220ms ease; } body.light-mode .meme-overlay{ background: rgba(255,255,255,0.85) !important; } .meme-overlay .reveal-btn{ background: rgba(254,218,74,0.96); color: #000; border: 0; padding: 10px 14px; border-radius: 8px; font-weight: 700; cursor: pointer; } body.light-mode .meme-overlay .reveal-btn{ background: #f5d85a !important; color: #111 !important; } /* For Research page specifically, invert the reveal button colors in light mode so it is the inverse of the dark-mode button above. */ body.light-mode #meme-wrapper .reveal-btn, body.light-mode .research-meme #meme-wrapper .reveal-btn{ /* Slight dark translucent overlay so the button sits on white but remains visible */ background: rgba(0,0,0,0.06) !important; color: #111 !important; /* black text */ border-color: rgba(0,0,0,0.06) !important; transition: background 180ms ease, box-shadow 180ms ease, color 120ms ease !important; } body.light-mode #meme-wrapper .reveal-btn:hover, body.light-mode .research-meme #meme-wrapper .reveal-btn:hover, body.light-mode #meme-wrapper .reveal-btn:focus, body.light-mode .research-meme #meme-wrapper .reveal-btn:focus{ /* Slight dark yellow overlay on hover to match the requested accent */ background: rgba(160,138,65,0.12) !important; /* subtle dark yellow */ box-shadow: 0 0 0.2rem rgba(160,138,65,0.28) !important; color: #111 !important; } /* Ensure text inputs / forms are legible */ body.light-mode input, body.light-mode textarea, body.light-mode select{ background: #fff; color: #111; border: 1px solid #ddd; } /* Slight tweak for site logo when placed on the dark header in light-mode */ body.light-mode .logo{ filter: drop-shadow(0 1px 0 rgba(0,0,0,0.12)); } /* Utility: prefer-contrast adjustments for badges or small UI elements */ body.light-mode .project-toggle{ color: #f5d85a !important; } /* Timeline & section overrides so dark sections don't stay black in light mode */ body.light-mode .section-timeline, body.light-mode .section-timeline-heading{ background: #ffffff !important; } body.light-mode .timeline-text, body.light-mode .timeline-date-text, body.light-mode .timeline_link, body.light-mode .timeline_link a, body.light-mode .text-color-lightgrey{ color: #111111 !important; } body.light-mode .text-color-lightgrey{ color: #666666 !important; } body.light-mode .timeline-progress{ background-color: #e6e6e6 !important; } /* Ensure timeline progress bar keeps the same colored gradient in light mode (match dark-mode appearance). We explicitly set the same inverted gradient used on the timeline page so the colored bar remains visible in light mode. */ body.light-mode .timeline-progress-bar{ background: linear-gradient(to bottom, #ee0979, gold) !important; } /* Visibility fixes: in light mode the page background can sit above negative-z-index elements. Ensure the timeline progress track and bar use non-negative stacking so they remain visible but still sit under timeline items (which use z-index: 2). */ body.light-mode .timeline-progress{ z-index: 0 !important; } body.light-mode .timeline-progress-bar{ z-index: 0 !important; } /* Timeline overlay fades: when in light mode, use white->transparent so the top/bottom fades read correctly on a white background instead of black. */ body.light-mode .overlay-fade-top{ background-image: linear-gradient(white, rgba(255,255,255,0)) !important; } body.light-mode .overlay-fade-bottom{ background-image: linear-gradient(white, rgba(255,255,255,0)) !important; } /* Ensure the main page wrapper and sections also flip to light background — this prevents specific section backgrounds from staying black. */ body.light-mode .page-wrapper, body.light-mode main, body.light-mode .container, body.light-mode .section-timeline, body.light-mode .section-timeline-heading{ background: #ffffff !important; } /* Homepage-specific background-image / overlay styles were moved to `css/home_light_mode.css` to avoid forcing a dark->light visual transition on non-home pages when the stored theme is applied via JavaScript. */ /* Research intro and other subtitle text should be dark in light mode */ body.light-mode .research-intro-text .research-intro{ color: #111111 !important; } body.light-mode .project-subtitle{ color: #222222 !important; } /* Invert the meme image colors for light mode so it reads on white */ body.light-mode .meme-wrapper img, body.light-mode img.timeline-hero-image{ filter: invert(1) hue-rotate(180deg) contrast(0.95); } /* h2 headings intentionally inherit their page styles; do not override here. */ h2.light-mode{ font-size: 8vh; background: linear-gradient(to right, rgb(169, 143, 0), #80003e); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Make the introductory "Hello there" and the tagline strong text black in light mode so they remain readable against the white overlay. */ body.light-mode .intro-text p strong, body.light-mode #tagline strong{ color: #111111 !important; } /* Make the entire tagline line black (including its children) in light mode */ body.light-mode #tagline, body.light-mode #tagline *{ color: #111111 !important; } /* Also ensure the small "I'm" span next to "Hello there" is black in light mode */ body.light-mode .intro-text p:first-of-type, body.light-mode .intro-text p:first-of-type *{ color: #111111 !important; } /* Header in light mode: white, blurred, no page-dimming; nav links are dark with a bark-yellow highlight on hover/focus. This keeps the header light while preserving readability and the blur effect. */ body.light-mode header, body.light-mode nav#site-nav{ /* Make the header completely white in light mode */ background: #ffffffe6 !important; backdrop-filter: blur(8px) !important; color: #111111 !important; } /* Make header opaque in light mode on all pages except the homepage. The homepage includes `body.no-theme-transition` so we use :not(.no-theme-transition) to target non-home pages. This forces a solid white header with no blur so the navigation reads as an opaque bar on content pages. */ body.light-mode:not(.no-theme-transition) header, body.light-mode:not(.no-theme-transition) nav#site-nav{ background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #111111 !important; } /* Ensure any header pseudo-element used for subtle overlays is disabled on non-home pages so the header remains fully opaque. */ body.light-mode:not(.no-theme-transition) header::before{ background: transparent !important; } /* On desktop only, lift the light-mode header and add the subtle white overlay behind its children. Mobile keeps the site-wide mobile header flow defined in utils.css so the header does not cover the viewport. */ @media (min-width: 769px) { body.light-mode header{ position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; z-index: 1000 !important; /* lift above most site content */ } body.light-mode header::before{ content: ''; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.274); /* white overlay strength; tune as needed */ pointer-events: none; z-index: 0; } /* Ensure header children are above the pseudo-element */ body.light-mode header > *{ position: relative; z-index: 1; } } /* Desktop: prefer transparent header/nav background so nav text sits directly on the page content (removes opaque white strip on large screens) */ @media (min-width: 769px){ /* Keep the semi-opaque white header with blur on desktop, but make individual nav items transparent so link backgrounds don't create a white strip over the page. Use the nav background variable so the image overlay is decoupled from the header appearance. */ body.light-mode header, body.light-mode nav#site-nav{ background: rgba(255,255,255,var(--nav-bg-opacity)) !important; /* keep the blurred white bar */ backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* Make nav items themselves transparent and remove underline/box-shadow decorations on hover/focus so they don't draw a background or line. */ body.light-mode nav#site-nav a, body.light-mode nav#site-nav a:link, body.light-mode nav#site-nav a:visited{ background: transparent !important; } body.light-mode nav#site-nav a:hover, body.light-mode nav#site-nav a:focus, body.light-mode nav#site-nav a:active{ text-decoration: none !important; box-shadow: none !important; background: transparent !important; } /* Ensure the theme toggle in the nav also stays visually transparent */ body.light-mode nav .theme-toggle{ background: transparent !important; } } /* Nav link colors and highlight */ /* Nav links in light mode: use dark-yellow highlight and no underline */ body.light-mode nav#site-nav a{ color: #111111 !important; text-decoration: none !important; } body.light-mode nav#site-nav a:hover, body.light-mode nav#site-nav a:focus, body.light-mode nav#site-nav a:active{ color: #aa7e00 !important; /* dark yellow accent in light mode */ text-decoration: none !important; /* Remove bottom border/underline effect in light mode */ box-shadow: none !important; } /* Hamburger bars should be dark on the light header */ body.light-mode .hamburger .bar{ background-color: #111 !important; } /* When nav is open, show a frosted overlay over the page content so the navigation reads as an elevated layer. Uses the nav-open opacity and applies a blur to the backdrop. This applies on mobile and desktop. */ /* Disable the dark page-dim overlay when the nav is open in light mode */ body.light-mode header.nav-open ~ .page-wrapper::before{ background: rgba(255,255,255,0) !important; pointer-events: none !important; opacity: 0 !important; } /* Invert SVG icons that live inside project cards when in light mode so vector icons retain visible contrast on white card backgrounds. This targets both inline

to cover common cases. */ /* Invert project card images/icons in light mode so they retain contrast on white cards. Originally we targeted image files ending with .svg; broaden to all images inside .project-card (SVG inline and raster IMG) so PNG replacements still receive the same inversion treatment. */ body.light-mode .project-card svg, body.light-mode .project-card img{ filter: invert(1) hue-rotate(180deg) contrast(0.95) !important; } /* Invert full-bleed contact/location and social images in light mode so thumbnails and icons read on white backgrounds. Scoped to common contact selectors used on the contact page. */ body.light-mode .contact-photos img, body.light-mode .contact-card img, body.light-mode .contact-photos .contact-btn img, body.light-mode .social-card img{ filter: invert(1) hue-rotate(180deg) contrast(0.95) !important; } /* Force social icons to render black in light mode (overrides the above inversion for social icons so they appear as solid black glyphs). */ body.light-mode .social-card img{ filter: brightness(0) saturate(100%) !important; } /* Slightly reduce hover opacity for social icons in light mode to give a subtle feedback without making them too faint on white backgrounds. */ body.light-mode .social-card:hover{ opacity: 0.9 !important; } /* Contact form card (light mode): make it white with dark text and a light-yellow submit button so the form reads on a white page. */ body.light-mode .contact-form-card{ background: #ffffff !important; border-color: #e6e6e6 !important; box-shadow: 0 6px 18px rgba(0,0,0,0.06) !important; color: #111111 !important; } /* Make the contact form heading a dark yellow in light mode so it reads as an accent while keeping good contrast on white backgrounds. */ body.light-mode .contact-form-card .form-heading{ color: #aa7e00 !important; } body.light-mode .contact-form-card label{ color: #222222 !important; } body.light-mode .contact-form-card input, body.light-mode .contact-form-card textarea{ background: #ffffff !important; color: #111111 !important; border: 1px solid #ddd !important; } body.light-mode .contact-form-card input:focus, body.light-mode .contact-form-card textarea:focus{ box-shadow: 0 0 0 4px rgba(245,216,90,0.08) !important; border-color: rgba(245,216,90,0.85) !important; } body.light-mode .btn-submit{ background: linear-gradient(180deg,#ffe270d5,#ffe270d5) !important; color: #111111 !important; border: 1px solid #d6b84a !important; } body.light-mode .btn-submit:hover{ background: linear-gradient(180deg,#ffdc5c,#ffdc5c) !important; } /* Contact overlays & hover states in light mode - Make the contact-card hover overlay light and the revealed details overlay white with dark text and dark-yellow accents for links/actions. */ body.light-mode .contact-card:hover .contact-hover{ background: rgba(255,255,255,0.88) !important; color: #111111 !important; opacity: 1 !important; } body.light-mode .contact-card .hover-text .question{ color: #111111 !important; } body.light-mode .contact-card .hover-text .action{ color: #aa7e00 !important; /* dark yellow accent */ } body.light-mode .contact-card.revealed .contact-details{ background: rgba(169, 231, 150, 0.96) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; color: #000000 !important; opacity: 1 !important; pointer-events: auto !important; } body.light-mode .contact-card.revealed .details-text{ color: #111111 !important; } body.light-mode .contact-card.revealed .details-text .contact-links a{ color: #147407 !important; } body.light-mode .contact-card.revealed .contact-close{ color: #111111 !important; } /* Wrong state: pale red overlay but readable text */ body.light-mode .contact-card.wrong .contact-details{ background: rgba(255, 167, 167, 0.95) !important; -webkit-backdrop-filter: blur(6px) !important; backdrop-filter: blur(6px) !important; color: #550000 !important; } /* Contact details address text should be black in light mode */ body.light-mode .contact-card .details-text .addr{ color: #111111 !important; } /* Make the 'correct' label a darker, more readable green in light mode (overrides the lighter green used in dark mode). */ body.light-mode .details-text .correct, body.light-mode .contact-card .details-text .correct{ color: #0b8a2a !important; /* darker green */ } /* Theme toggle in the nav should invert in light mode: slight dark overlay with black text, and a subtle dark-yellow hover to match the site accent. */ /* Exact Research-style theme-toggle appearance in light mode Copy the Research page's project-theme-toggle look and apply it to the nav .theme-toggle so the header toggle matches across pages. This uses high-specificity + !important to override per-page styles. */ body.light-mode nav .theme-toggle{ background: rgba(0,0,0,0.06) !important; color: #111111 !important; border-color: rgba(0,0,0,0.06) !important; border: 1px solid rgba(0,0,0,0.06) !important; /* Make the toggle circular in light mode across all pages */ padding: 0 !important; /* use fixed width/height for a consistent circle */ border-radius: 50% !important; width: 40px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-shadow: none !important; box-sizing: border-box !important; } /* Hover / focus state matches Research: subtle dark-yellow background and glow */ body.light-mode nav .theme-toggle:hover, body.light-mode nav .theme-toggle:focus{ background: rgba(160,138,65,0.12) !important; /* slight dark-yellow */ box-shadow: 0 0 0.2rem rgba(160,138,65,0.28) !important; } /* Publications page: make authors darker grey, abstracts black, and the 'Show Abstract' toggle use a dark-yellow accent in light mode. */ body.light-mode .project-authors{ color: #444444 !important; /* dark grey for author list */ } body.light-mode .project-full{ color: #111111 !important; /* abstract text should be black in light mode */ } body.light-mode .project-toggle{ background: transparent !important; /* keep button visually transparent */ color: #aa7e00 !important; /* dark-yellow text */ /* Restore the top divider so 'Show Abstract' matches dark mode on desktop */ border-top: 1px solid #e6e6e6 !important; /* match desktop padding so layout/spacing are identical */ padding-top: 16px !important; padding-left: 0 !important; padding-right: 16px !important; border-radius: 0 !important; box-shadow: none !important; text-align: left !important; } body.light-mode .project-toggle:hover, body.light-mode .project-toggle:focus{ color: #b98d14 !important; /* slightly darker yellow on hover */ } /* Desktop (PC) light-mode: ensure the 'Show Abstract' button has only a top border and no other borders. The generic `body.light-mode button` rule sets a full border, so we explicitly clear other sides here for desktop. */ @media (min-width: 769px) { body.light-mode .project-toggle{ border: none !important; border-top: 1px solid #e6e6e6 !important; } } /* Publications: journal line and arXiv button styling in light mode */ body.light-mode .project-journal{ color: #666666 !important; /* dark grey for journal/venue */ } body.light-mode .arxiv-button{ background-color: #ffffff !important; border: 1px solid #e6e6e6 !important; /* light grey border */ box-shadow: none !important; } /* APJ button mirrors arXiv button in light mode */ body.light-mode .apj-button{ background-color: #ffffff !important; border: 1px solid #e6e6e6 !important; box-shadow: none !important; } /* Hover and active states for arXiv button in light mode */ body.light-mode .arxiv-button:hover{ background-color: #fbfbfb !important; /* very subtle lighter background */ } body.light-mode .arxiv-button:active{ background-color: #f2f2f2 !important; /* very light grey overlay when pressed */ } /* Buttons: make primary buttons dark-yellow with white text in light mode — includes audio controls, site-links, and generic buttons to ensure consistent appearance. These overrides keep button text white even on the light background, per the homepage design request. */ body.light-mode button, body.light-mode .arxiv-button, body.light-mode .apj-button, body.light-mode button{ background: rgba(233, 210, 136, 0.047) !important; color: #000000 !important; border: 1px solid rgba(0,0,0,0.08) !important; } /* Mobile: ensure light-mode cards keep the same layout/padding as dark-mode (only colors inverted). This prevents the 'Learn more' area from appearing squished on phones where we earlier reduced horizontal padding. */ @media (max-width: 768px){ /* Ensure DARK MODE (body:not(.light-mode)) uses the same card metrics as light-mode so both themes are layout-identical. We only copy sizing/spacing here (not colors) to keep dark-mode visuals intact. */ body:not(.light-mode) #projects-grid .project-toggle{ display: block !important; width: 100% !important; box-sizing: border-box !important; padding-top: 16px !important; padding-left: 0 !important; padding-right: 16px !important; padding-bottom: 12px !important; text-align: left !important; border: none !important; border-top: 1px solid rgba(34,34,34,0.75) !important; margin-bottom: 0 !important; } body:not(.light-mode) #projects-grid .project-card{ padding-top: 12px !important; padding-right: 12px !important; padding-left: 12px !important; } body:not(.light-mode) #projects-grid .project-image{ width: 100% !important; height: auto !important; max-height: 120px !important; object-fit: cover !important; margin: 0 0 12px 0 !important; border-radius: 8px !important; } body:not(.light-mode) #projects-grid .project-meta{ padding: 0 4px 12px 4px !important; } body:not(.light-mode) #projects-grid .project-title{ font-size: 2.0vh !important; margin: 0 0 8px 0 !important; } body:not(.light-mode) #projects-grid .project-authors{ font-size: 2vh !important; margin: 0 !important; } body:not(.light-mode) #projects-grid .project-journal{ font-size: 1.8vh !important; margin-top: 0 !important; margin-bottom: 10px !important; } body:not(.light-mode) #projects-grid .project-full{ padding: 12px 16px 20px 16px !important; font-size: 1.9vh !important; line-height: 2 !important; } body.light-mode #projects-grid .project-toggle{ /* mirror dark-mode mobile metrics exactly */ display: block !important; width: 100% !important; box-sizing: border-box !important; padding-top: 16px !important; /* increased spacing from top border */ padding-left: 0 !important; /* remove left inset so text aligns flush */ padding-right: 16px !important; padding-bottom: 12px !important; border: none !important; border-top: 1px solid #e6e6e6 !important; /* only top border */ text-align: left !important; /* same alignment as dark-mode */ background: transparent !important; color: #aa7e00 !important; /* keep the accent color */ } /* Match card box-shadow / border and padding so the card proportions stay identical to dark mode on mobile */ body.light-mode #projects-grid .project-card{ box-shadow: 0 4px 18px rgba(0,0,0,0.06) !important; border: 1px solid #e6e6e6 !important; background: #ffffff !important; padding-top: 12px !important; padding-right: 12px !important; padding-left: 12px !important; } /* Ensure the image area keeps the same sizing as dark-mode mobile so content doesn't reflow and card heights match exactly. */ body.light-mode #projects-grid .project-image{ width: 100% !important; height: auto !important; max-height: 120px !important; object-fit: cover !important; margin: 0 0 12px 0 !important; border-radius: 8px !important; } /* Ensure arXiv button keeps desktop look in light mode on phones */ body.light-mode #projects-grid .arxiv-button{ width: auto !important; padding: 10px 14px !important; min-width: 48px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-bottom: 8px !important; } /* Force the toggle to be full-width even if other styles try to shrink it */ body.light-mode #projects-grid .project-toggle{ display: block !important; width: 100% !important; box-sizing: border-box !important; /* match dark-mode mobile metrics exactly */ padding-top: 16px !important; padding-left: 0 !important; padding-right: 16px !important; padding-bottom: 12px !important; text-align: left !important; border: none !important; border-top: 1px solid #e6e6e6 !important; margin-bottom: 0 !important; } /* Ensure all mobile card metrics exactly mirror the dark-mode mobile rules so height, padding, and alignment are identical (only colors inverted). */ body.light-mode #projects-grid .project-meta{ padding: 0 4px 12px 4px !important; } body.light-mode #projects-grid .project-title{ font-size: 2.0vh !important; margin: 0 0 8px 0 !important; } body.light-mode #projects-grid .project-authors{ font-size: 2vh !important; margin: 0 !important; color: #444444 !important; } body.light-mode #projects-grid .project-journal{ font-size: 1.8vh !important; margin-top: 0 !important; margin-bottom: 10px !important; color: #666666 !important; } body.light-mode #projects-grid .project-full{ padding: 12px 16px 20px 16px !important; font-size: 1.9vh !important; line-height: 2 !important; } /* Ensure the arXiv button keeps spacing so it doesn't push the toggle */ body.light-mode #projects-grid .arxiv-button{ margin-right: 10px !important; margin-bottom: 8px !important; } } /* Mobile: keep the hamburger/menu trigger visually transparent; the expanded navigation will receive the frosted overlay when open. */ @media (max-width: 768px){ body.light-mode .hamburger, body.light-mode .hamburger-button, body.light-mode .hamburger-btn, body.light-mode .menu-toggle, body.light-mode .nav-toggle, body.light-mode header > button, body.light-mode header button.menu-button, body.light-mode header button[id*="menu"], body.light-mode header button[class*="menu"], body.light-mode header button[aria-label*="menu"], body.light-mode header button[aria-label*="toggle"], body.light-mode header button[aria-expanded], body.light-mode button.hamburger, body.light-mode .hamburger button, body.light-mode .hamburger .hamburger-button{ background: transparent !important; background-color: transparent !important; border: none !important; padding: 6px !important; z-index: 10001 !important; /* keep the button above page content */ } body.light-mode .hamburger:focus, body.light-mode .hamburger-button:focus, body.light-mode .hamburger-btn:focus, body.light-mode .menu-toggle:focus, body.light-mode .nav-toggle:focus, body.light-mode .hamburger button:focus, body.light-mode .hamburger .hamburger-button:focus, body.light-mode header > button:focus, body.light-mode header button.menu-button:focus, body.light-mode header button[id*="menu"]:focus, body.light-mode header button[class*="menu"]:focus, body.light-mode header button[aria-label*="menu"]:focus, body.light-mode header button[aria-label*="toggle"]:focus, body.light-mode header button[aria-expanded]:focus{ outline: none !important; box-shadow: none !important; background: transparent !important; } } /* Mobile: when the nav is expanded/open, give the expanded navigation a semi-opaque frosted background and stronger blur so the menu reads as a distinct layer above the page content. Targets common open-state selectors. */ @media (max-width: 768px){ body.light-mode header.nav-open nav#site-nav, body.light-mode header.nav-open > nav, body.light-mode nav#site-nav.nav-open, body.light-mode nav#site-nav.open, body.light-mode .mobile-nav.open, body.light-mode .nav-drawer.open, body.light-mode .slide-in-nav.open{ /* Ensure the open mobile nav in light mode uses a translucent white frosted background (explicit alpha) so it is visible instead of being fully transparent. Keep blur and stacking intact. */ background: rgba(255, 255, 255, 0.961) !important; background-color: rgba(255,255,255,0.92) !important; -webkit-backdrop-filter: blur(10px) !important; backdrop-filter: blur(10px) !important; z-index: 9998 !important; } } /* Global override: reduce header opacity site-wide in light-mode so pages like home/about don't show a heavy opaque white bar. Keep the blur so the header reads as frosted glass while remaining transparent enough to show the page content behind it. */ body.light-mode header, body.light-mode nav#site-nav{ background: rgba(255,255,255,var(--nav-bg-opacity)) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } /* Be sure nav-open state keeps a slightly stronger background so the navigation remains readable when the menu is open on small screens. */ body.light-mode header.nav-open, body.light-mode nav#site-nav.nav-open{ background: rgba(255,255,255,var(--nav-open-opacity)) !important; } /* When the nav is open, blur only the nav container (frosted effect). This keeps the main page sharp but visually dims it via the ::before overlay above. */ /* (nav-open frosted blur removed — reverting to previous behavior) */