/* ============================================================ Dark neon theme ("Cyberpunk Lite") Activated by ; toggled by theme-toggle.js ============================================================ */ html[data-theme="dark"] body { background: #0b1020; background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(58, 123, 213, 0.12), transparent); color: #c9d4e3; } /* ---------- Masthead (top nav) ---------- */ html[data-theme="dark"] .masthead { background: rgba(11, 16, 32, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(88, 166, 255, 0.15); } html[data-theme="dark"] .masthead a, html[data-theme="dark"] .greedy-nav a { color: #c9d4e3; } html[data-theme="dark"] .greedy-nav a:hover { color: #4fd1c5; } html[data-theme="dark"] .greedy-nav button { background: transparent; } html[data-theme="dark"] .greedy-nav .navicon, html[data-theme="dark"] .greedy-nav .navicon:before, html[data-theme="dark"] .greedy-nav .navicon:after { background: #c9d4e3; } html[data-theme="dark"] .greedy-nav .hidden-links { background: #131a30; border-color: rgba(88, 166, 255, 0.2); } html[data-theme="dark"] .greedy-nav .hidden-links a { color: #c9d4e3; } /* ---------- Sidebar ---------- */ html[data-theme="dark"] .sidebar, html[data-theme="dark"] .sidebar.sticky { background: transparent; } html[data-theme="dark"] .author__name, html[data-theme="dark"] .author__name a { color: #eef3fa; } html[data-theme="dark"] .author__bio, html[data-theme="dark"] .author__content, html[data-theme="dark"] .sidebar p, html[data-theme="dark"] .sidebar li { color: #9fb0c7; } html[data-theme="dark"] .author__urls a, html[data-theme="dark"] .author__urls-wrapper a { color: #8fb8f5; } html[data-theme="dark"] .author__urls a:hover { color: #4fd1c5; } html[data-theme="dark"] .author__urls-wrapper button { background: #131a30; color: #c9d4e3; border-color: rgba(88, 166, 255, 0.25); } html[data-theme="dark"] .author__urls { background: #131a30; border-color: rgba(88, 166, 255, 0.2); } html[data-theme="dark"] .author__avatar img { box-shadow: 0 0 24px rgba(79, 209, 197, 0.25); } /* ---------- Main content ---------- */ html[data-theme="dark"] .page, html[data-theme="dark"] .page__content, html[data-theme="dark"] #main { background: transparent; color: #c9d4e3; } html[data-theme="dark"] .page__content h1, html[data-theme="dark"] .page__content h2, html[data-theme="dark"] .page__content h3, html[data-theme="dark"] .page__content h4 { color: #eef3fa; } html[data-theme="dark"] .page__content p, html[data-theme="dark"] .page__content li, html[data-theme="dark"] .page__content dl { color: #c9d4e3; } html[data-theme="dark"] .page__content a { color: #7db4f8; } html[data-theme="dark"] .page__content a:hover { color: #4fd1c5; } html[data-theme="dark"] .page__content strong, html[data-theme="dark"] .page__content b { color: #e6edf7; } html[data-theme="dark"] .page__content ul li:hover, html[data-theme="dark"] .page__content ol li:hover { background-color: rgba(79, 209, 197, 0.07); box-shadow: 0 0 14px rgba(79, 209, 197, 0.12); } html[data-theme="dark"] .page__content hr { border-color: rgba(88, 166, 255, 0.15); } html[data-theme="dark"] .page__content blockquote { background: rgba(19, 26, 48, 0.6); border-left-color: #4fd1c5; color: #9fb0c7; } html[data-theme="dark"] .page__content code { background: #131a30; color: #8be9d9; } html[data-theme="dark"] .page__content table, html[data-theme="dark"] .page__content th, html[data-theme="dark"] .page__content td { border-color: rgba(88, 166, 255, 0.15); } html[data-theme="dark"] .page__content thead { background: #131a30; } /* ---------- Hero banner ---------- */ html[data-theme="dark"] .hero-banner { background: linear-gradient(135deg, rgba(58, 123, 213, 0.12), rgba(0, 180, 160, 0.10)); border: 1px solid rgba(88, 166, 255, 0.25); box-shadow: 0 0 30px rgba(58, 123, 213, 0.12), inset 0 0 30px rgba(79, 209, 197, 0.04); } html[data-theme="dark"] .hero-title { color: #eef3fa; text-shadow: 0 0 18px rgba(88, 166, 255, 0.35); } html[data-theme="dark"] .hero-subtitle { color: #4fd1c5; } html[data-theme="dark"] .hero-cursor { color: #4fd1c5; } /* ---------- Details / summary (research interests) ---------- */ html[data-theme="dark"] details { background: rgba(19, 26, 48, 0.45); border-radius: 8px; } html[data-theme="dark"] summary { color: #8fb8f5; } html[data-theme="dark"] summary:hover { color: #4fd1c5; } /* ---------- Footer ---------- */ html[data-theme="dark"] .page__footer { background: #0d1326; color: #9fb0c7; } html[data-theme="dark"] .page__footer a { color: #8fb8f5; } /* ---------- Selection & scrollbar ---------- */ html[data-theme="dark"] ::selection { background: rgba(79, 209, 197, 0.3); } /* ---------- Theme toggle button ---------- */ #theme-toggle { background: transparent; border: 1px solid rgba(88, 166, 255, 0.35); border-radius: 20px; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 6px 10px; margin-left: 12px; transition: box-shadow 0.25s ease, border-color 0.25s ease; vertical-align: middle; } #theme-toggle:hover { border-color: #4fd1c5; box-shadow: 0 0 12px rgba(79, 209, 197, 0.35); } html[data-theme="dark"] #theme-toggle { color: #4fd1c5; } /* Smooth color transition when switching themes */ body, .masthead, .page__content, .sidebar, .page__footer, .hero-banner { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; }