/* ========================================================================== Dark mode Activated by `data-theme="dark"` on the element (set by assets/js/theme-toggle.js). Overrides the key surfaces/text colours of the Bootstrap-based theme rather than the whole compiled stylesheet. ========================================================================== */ /* --- Floating toggle button (visible in both themes) --------------------- */ #theme-toggle { position: fixed; left: 18px; bottom: 18px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; z-index: 2000; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #0067f6; background-color: #ffffff; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2); transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease; } #theme-toggle:hover { transform: translateY(-2px); } #theme-toggle:focus { outline: none; box-shadow: 0 0 0 3px rgba(0, 103, 246, 0.4); } html[data-theme="dark"] #theme-toggle { background-color: #23272f; color: #ffd14d; } /* --- Page surfaces ------------------------------------------------------- */ html[data-theme="dark"] body { background-color: #121417; color: #88b1e9; } html[data-theme="dark"] main { background-color: #1b1e24; } /* Cards / widgets */ html[data-theme="dark"] .card, html[data-theme="dark"] aside .widget.card { background-color: #23272f; border-color: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] aside .widget.card { box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.4); } html[data-theme="dark"] .card-footer { background-color: rgba(255, 255, 255, 0.04); border-top-color: rgba(255, 255, 255, 0.1); } /* Social icons */ html[data-theme="dark"] aside .social-links .social-link { background-color: #2a2f38; color: #4a9bff; } /* Badges */ html[data-theme="dark"] .badge-white { color: #88b1e9; background-color: #2a2f38; } /* Timeline guide line + neutral dot */ html[data-theme="dark"] main .time-line-item::before { background-color: #2c3138; } html[data-theme="dark"] main .time-line-item::after { background-color: #6b7280; } /* Muted / secondary text used throughout */ html[data-theme="dark"] .text-muted, html[data-theme="dark"] .blockquote-footer { color: #9aa0a8 !important; } /* Common Bootstrap utility surfaces that hardcode light colours */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-light { background-color: #23272f !important; } html[data-theme="dark"] .text-dark, html[data-theme="dark"] .text-black { color: #88b1e9 !important; } /* resume-fix.css: blog cards */ html[data-theme="dark"] .blog-card { background-color: #23272f; border-color: #2f6fd6; } html[data-theme="dark"] .blog-post-title { color: #88b1e9; } /* --- collection.css ------------------------------------------------------ */ html[data-theme="dark"] .collection-year-title { color: #4a9bff; border-bottom-color: #4a9bff; } html[data-theme="dark"] .collection-card-img-wrapper { background-color: #2a2f38; } html[data-theme="dark"] .collection-card-placeholder { color: #555b63; } html[data-theme="dark"] .collection-card-name { color: #88b1e9; } /* --- recipes.css --------------------------------------------------------- */ html[data-theme="dark"] .recipe-list-item { background: #23272f; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } html[data-theme="dark"] .recipe-list-item:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); } html[data-theme="dark"] .recipe-list-item h3 { color: #88b1e9; } html[data-theme="dark"] .recipe-list-item .recipe-meta { color: #9aa0a8; } html[data-theme="dark"] .recipe-list-item i, html[data-theme="dark"] .recipe-back-btn, html[data-theme="dark"] .recipe-content h2 { color: #4a9bff; } html[data-theme="dark"] .recipe-content h2 { border-bottom-color: #4a9bff; } html[data-theme="dark"] .recipe-content h1 { color: #88b1e9; } html[data-theme="dark"] .recipe-content p, html[data-theme="dark"] .recipe-content ul, html[data-theme="dark"] .recipe-content ol, html[data-theme="dark"] .recipe-content blockquote { color: #88b1e9; } html[data-theme="dark"] .recipe-content p strong { color: #88b1e9; } html[data-theme="dark"] .recipe-content hr { border-top-color: #333; }