/* ── Dark Mode Overrides ─────────────────────────────── */ /* Applied when is set by darkmode.js */ html.dark body { background-color: #161616; color: #e2e2e2; } html.dark nav.navbar { background-color: rgba(22, 22, 22, 0.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } html.dark .navbar a { background-color: transparent; color: #ffffff; } html.dark a, html.dark .footer a p { color: #b8b8b8; } html.dark a:hover, html.dark a:focus, html.dark .footer a p:hover, html.dark .footer a p:focus { color: #79a3f5; } html.dark .grey, html.dark .section.case.grey, html.dark .grey.end, html.dark .grey.recent { background-color: #161616; } html.dark .footer.grey { background-color: #161616; } html.dark .highlight { background-color: #1f2024; } html.dark .feedback-quote { background: linear-gradient(#161616, #161616) padding-box, linear-gradient(135deg, #1b8463, #3375E0) border-box; } html.dark .feedback-quote p { color: #c8c8c8; } html.dark .feedback-quote cite { color: #888; } html.dark hr { background-color: rgba(255, 255, 255, 0.08); } html.dark .bold { color: #ffffff; } html.dark h1, html.dark h2, html.dark h3, html.dark h4 { color: #ffffff; } html.dark p, html.dark li { color: #888; } html.dark h2.h2-md, html.dark h2.h2-sm { color: #666; } html.dark h5 { color: #666; } html.dark .heading { color: #ffffff; } html.dark .subtitle { color: #999; } html.dark .card a { color: #ffffff; } html.dark .card a:hover, html.dark .card a:focus { color: #ffffff; } html.dark p.case-description { color: #888; } html.dark img { filter: drop-shadow(0 0 0.1rem #000); } html.dark .component-thumb { background: #1e1e1e; } html.dark .component-name { color: #ffffff; } html.dark .component-desc { color: #888; } html.dark .collapsible { background-color: #161616; border-color: rgba(255, 255, 255, 0.08); } html.dark .collapsible.active, html.dark .collapsible:hover { background-color: rgba(62, 207, 160, 0.08); } html.dark .ql-link { color: #444; } html.dark .ql-link:hover, html.dark .ql-link.active { color: #ffffff; } html.dark h2.case-tag { background-color: #1e1e1e; border-color: rgba(255, 255, 255, 0.1); color: #bbb; } html.dark h2.case-tag.company, html.dark .home h2.case-tag.company { background: linear-gradient(#2a2a2a, #2a2a2a) padding-box, linear-gradient(135deg, #1b8463, #3375E0) border-box; border-color: transparent; color: #ffffff; } html.dark .home h2.case-tag { background-color: #1e1e1e; border-color: rgba(255, 255, 255, 0.1); } html.dark .link-btn a { background-color: #1e1e1e; color: #ffffff; border-color: #444; } html.dark .link-btn a:hover, html.dark .link-btn a:focus { background-color: #ffffff; color: #111111; } html.dark mark { background-color: #1b5c4e; color: #d4d4d4; } html.dark .slider { background-color: #1e1e1e; box-shadow: 0 0 0 1px #3a3a3a; } /* Brighter green for legibility on dark backgrounds */ html.dark h1 em, html.dark p strong, html.dark h3.subheading, html.dark .collapsible { color: #3ecfa0; }