/* ============================================================ THEME: Light / Dark Mode (Coderon-inspired) Uses html[dark] attribute on for dark mode ============================================================ */ /* ---- Light Mode Variables (default) ---- */ :root { --primary-color: #ae00ee; --primary-hover: #8a00be; --bg-body: #f8fafc; --bg-card: #fff; --bg-alt: #f4f5f6; --bg-nav: rgba(255, 255, 255, .97); --text-color: #333; --text-heading: #10141f; --text-muted: rgba(0, 0, 0, .44); --text-muted-strong: rgba(0, 0, 0, .8); --text-muted-mid: rgba(0, 0, 0, .5); --text-muted-soft: rgba(0, 0, 0, .6); --link-color: #ae00ee; --link-hover: #8a00be; --border-color: #e3edf3; --border-light: #ddd; --border-card: #eaeaea; --gradient-main: linear-gradient(90deg, #f70077 0%, #ae00ee 100%); --gradient-hover: linear-gradient(180deg, #f70077 0%, #ae00ee 160%); --shadow-sm: rgba(0, 0, 0, .1); --shadow-md: rgba(0, 0, 0, .25); --tag-bg: #222; --code-border: #E3EDF3; --btn-success-bg: #28a745; --btn-success-hover: #218838; } /* ---- Dark Mode Variables ---- */ html[dark] { --primary-color: #d60067; --primary-hover: #b80059; --bg-body: #0f172a; --bg-card: #1a2334; --bg-alt: #2d3b4e; --bg-nav: rgba(15, 23, 42, .92); --text-color: #c8ccd4; --text-heading: #e8eaed; --text-muted: rgba(255, 255, 255, .44); --text-muted-strong: rgba(255, 255, 255, .8); --text-muted-mid: rgba(255, 255, 255, .5); --text-muted-soft: rgba(255, 255, 255, .6); --link-color: #e970ff; --link-hover: #d040ee; --border-color: #232939; --border-light: #2a3245; --border-card: #2a3245; --gradient-main: linear-gradient(90deg, #d60067 0%, #8311c0 100%); --gradient-hover: linear-gradient(180deg, #d60067 0%, #8311c0 160%); --shadow-sm: rgba(0, 0, 0, .3); --shadow-md: rgba(0, 0, 0, .5); --tag-bg: #2d3b4e; --code-border: #232939; --btn-success-bg: #d60067; --btn-success-hover: #b80059; } /* ============================================================ DARK MODE OVERRIDES Comprehensive overrides for hardcoded colors in screen.css, main.scss, and footernav.css ============================================================ */ /* ---- Base Elements ---- */ html[dark] body { background-color: var(--bg-body) !important; color: var(--text-color); } html[dark] a { color: var(--link-color); } html[dark] a:hover { color: var(--link-hover); } html[dark] h1, html[dark] h2, html[dark] h3, html[dark] h4, html[dark] h5, html[dark] h6 { color: var(--text-heading); } html[dark] pre { border-color: var(--code-border); background: var(--bg-alt); color: var(--text-color); } html[dark] code { background: var(--bg-alt); color: var(--text-color); } html[dark] blockquote { border-left-color: var(--primary-color); color: var(--text-muted-strong); } html[dark] hr { background: var(--border-color); } /* ---- Scrollbar ---- */ html[dark] ::-webkit-scrollbar { background: var(--bg-body); } html[dark] ::-webkit-scrollbar-thumb { background: var(--bg-alt); } /* ---- Navigation ---- */ html[dark] .navbar.mediumnavigation { background: var(--bg-nav) !important; border-bottom-color: var(--border-color); -webkit-backdrop-filter: saturate(180%) blur(10px); backdrop-filter: saturate(180%) blur(10px); } html[dark] .navbar-light .navbar-brand, html[dark] .navbar-light .nav-link { color: var(--text-heading) !important; } html[dark] .navbar-light .nav-link:hover { color: var(--link-color) !important; } html[dark] .navbar-light .navbar-toggler { border-color: var(--border-color); } html[dark] .navbar-light .navbar-toggler-icon { filter: invert(1); } html[dark] .navbar-collapse { background: var(--bg-card); } @media (min-width: 992px) { html[dark] .navbar-collapse { background: transparent; } } /* ---- Cards & Posts ---- */ html[dark] .card { background-color: var(--bg-card) !important; border-color: var(--border-light) !important; } html[dark] .card-text, html[dark] .card-body { color: var(--text-color) !important; } html[dark] .listfeaturedtag .wrapthumbnail { border-color: var(--border-light); } html[dark] .listfeaturedtag .card { background: var(--bg-card) !important; box-shadow: 0 2px 8px var(--shadow-sm); } html[dark] .post-top-thumb-else { background: var(--bg-card); } /* ---- Site Title / Heading ---- */ html[dark] .sitetitle, html[dark] .sitetitle a, html[dark] .sitetitle__link { color: var(--text-heading) !important; } html[dark] .mainheading .lead { color: var(--text-muted-strong); } /* ---- Article Titles & Meta ---- */ html[dark] .card-title a, html[dark] .article-title a, html[dark] .post-title, html[dark] .page-title, html[dark] .listing-title a { color: var(--text-heading) !important; } html[dark] .post-date, html[dark] .post-read, html[dark] .post-date-and-read { color: var(--text-muted) !important; } html[dark] .text-muted { color: var(--text-muted) !important; } /* ---- Buttons & Badges ---- */ html[dark] .btn-outline-success { border-color: var(--primary-color) !important; color: var(--primary-color) !important; } html[dark] .btn-outline-success:hover, html[dark] .btn-outline-success:active, html[dark] .btn-outline-success.active { background-color: var(--primary-color) !important; border-color: var(--primary-color) !important; color: #fff !important; } html[dark] .badge-primary { background: var(--gradient-main) !important; } /* ---- Tags / Category Pills ---- */ html[dark] .jumbotron.fortags { background: var(--bg-body) !important; background-image: none !important; } html[dark] .jumbotron.fortags a { background: var(--bg-alt) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .15) !important; } html[dark] .jumbotron.fortags a:hover { background: var(--primary-color) !important; border-color: var(--primary-color) !important; } html[dark] .jumbotron.fortags .transpdark { background: rgba(214, 0, 103, .2) !important; } html[dark] .jumbotron.fortags .transpdark h2 { color: #fff !important; } html[dark] .jumbotron.fortags .col-md-8 { color: var(--text-color) !important; } /* ---- Pagination ---- */ html[dark] .pagination .page-link { background: var(--bg-card); border-color: var(--border-light); color: var(--text-heading); } html[dark] .pagination .page-item.active .page-link { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } html[dark] .pagination .page-item.disabled .page-link { background: var(--bg-alt); color: var(--text-muted); } /* ---- Sidebar ---- */ html[dark] .sticky-top-80 { background: var(--bg-card); } /* ---- Alertbar ---- */ html[dark] .alertbar { background: var(--bg-card) !important; border-top-color: var(--border-color); color: var(--text-heading) !important; } html[dark] .alertbar span { color: var(--text-heading); } /* ---- Search ---- */ html[dark] #lunrsearchresults { background: var(--bg-card); color: var(--text-color); } /* ---- Share buttons ---- */ html[dark] .share a { color: var(--text-muted); } html[dark] .share a:hover { color: var(--text-heading); } /* ---- Table ---- */ html[dark] table { color: var(--text-color); } html[dark] table th { background: var(--bg-alt); border-color: var(--border-color); color: var(--text-heading); } html[dark] table td { border-color: var(--border-color); } html[dark] table tr:nth-child(even) { background: var(--bg-card); } /* ---- Spoiler ---- */ html[dark] .spoiler { text-shadow: 0 0 10px rgba(255, 255, 255, .4); } html[dark] .spoiler:after { background: var(--bg-alt); } /* ---- Selection ---- */ html[dark] ::selection { background: rgba(214, 0, 103, 0.3); color: #fff; } /* ============================================================ MAIN.SCSS Dark Overrides ============================================================ */ /* ---- Nav Custom Styles (main.scss) ---- */ html[dark] .navbar .nav-link { color: var(--text-heading) !important; } html[dark] .navbar .nav-link:hover, html[dark] .navbar .nav-link:focus { color: var(--link-color) !important; } /* ---- Pagination (main.scss custom) ---- */ html[dark] .ms-pagination .page-link { background: var(--bg-card); color: var(--text-heading); border-color: var(--border-light); } html[dark] .ms-pagination .page-link:hover { background: var(--bg-alt); color: var(--text-heading); } html[dark] .ms-pagination .page-item.active .page-link { background: var(--primary-color); color: #fff; } /* ---- Hero Intro (main.scss) ---- */ html[dark] .hero-intro { background: radial-gradient(circle at top left, rgba(214, 0, 103, 0.12) 0%, rgba(15, 23, 42, 0.08) 35%, rgba(0, 0, 0, 0) 70%), linear-gradient(135deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 42, 0.95) 55%, rgba(15, 23, 42, 0.9) 100%) !important; } /* ---- Featured Events (main.scss) ---- */ html[dark] .ms-featured-events { background: linear-gradient(180deg, rgba(214, 0, 103, 0.1) 0%, rgba(15, 23, 42, 0.06) 100%) !important; color: var(--text-color); } html[dark] .ms-featured-events .section-title h2 span { color: var(--text-heading) !important; } html[dark] .ms-featured-events .section-title p { color: var(--text-muted-soft) !important; } html[dark] .ms-featured-events__card { background: var(--bg-card) !important; border: 1px solid var(--border-light) !important; box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .5) !important; } html[dark] .ms-featured-events__card h4 { color: var(--text-heading) !important; } html[dark] .ms-featured-events__meta { color: var(--text-muted) !important; } html[dark] .ms-featured-events__summary { color: var(--text-muted-soft) !important; } html[dark] .ms-featured-events__card .ms-featured-events__summary { color: var(--text-muted-soft) !important; } html[dark] .ms-featured-events__card .ms-featured-events__cta { color: var(--link-color) !important; } html[dark] .ms-featured-events__cta { background: var(--primary-color) !important; color: #fff !important; } html[dark] .ms-featured-events__cta--secondary { background: rgba(255, 255, 255, 0.1) !important; } /* ---- Elementor Button ---- */ html[dark] .elementor-button { background: var(--primary-color) !important; } html[dark] .elementor-button:hover { background: var(--primary-hover) !important; } /* ---- Connect Section (main.scss) ---- */ html[dark] .connect__inner { background: radial-gradient(circle at top left, rgba(214, 0, 103, 0.15) 0%, rgba(131, 17, 192, 0.08) 25%, rgba(15, 23, 42, 0.06) 60%, rgba(15, 23, 42, 0) 100%), linear-gradient(120deg, rgba(15, 23, 42, 0.95) 0%, rgba(26, 35, 52, 0.95) 100%) !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 28px 60px -28px rgba(0, 0, 0, .5) !important; } html[dark] .connect__eyebrow { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.65) !important; } html[dark] .connect__title { color: var(--text-heading) !important; } html[dark] .connect__lead { color: var(--text-muted-soft) !important; } html[dark] .connect-card { background: rgba(26, 35, 52, 0.85) !important; border-color: rgba(255, 255, 255, 0.06) !important; box-shadow: 0 24px 45px -30px rgba(0, 0, 0, .55) !important; } html[dark] .connect-card::after { background: linear-gradient(135deg, var(--card-accent-bg), rgba(15, 23, 42, 0)) !important; } html[dark] .connect-card__icon { background: var(--card-accent-bg); color: var(--card-accent-color); } html[dark] .connect-card__title { color: var(--text-heading) !important; } html[dark] .connect-card__copy { color: var(--text-muted-soft) !important; } html[dark] .connect-card__cta { color: var(--link-color) !important; } html[dark] .connect-card__cta:hover, html[dark] .connect-card__cta:focus { color: var(--link-hover) !important; } html[dark] .connect-card__cta--primary { background: var(--gradient-main) !important; color: #fff !important; } html[dark] .connect-card__cta--primary:hover, html[dark] .connect-card__cta--primary:focus { color: #fff !important; } html[dark] .connect-card--chat { --card-accent-bg: rgba(214, 0, 103, 0.2); --card-accent-color: #e970ff; } html[dark] .connect-card--meetup { --card-accent-bg: rgba(255, 137, 102, 0.18); --card-accent-color: #f0967a; } html[dark] .connect-card--video { --card-accent-bg: rgba(137, 131, 255, 0.18); --card-accent-color: #a9a4ff; } html[dark] .connect-card--courses { --card-accent-bg: rgba(123, 213, 139, 0.18); --card-accent-color: #7bd58b; } /* ---- Resources Hub (main.scss) ---- */ html[dark] .resources-hub__eyebrow { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.65) !important; } html[dark] .resources-hub__title, html[dark] .resources-hub h2 { color: var(--text-heading) !important; } html[dark] .resources-hub__summary { color: var(--text-muted-soft) !important; } html[dark] .resources-hub__card { background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .5) !important; } html[dark] .resources-hub__card::after { background: linear-gradient(140deg, rgba(214, 0, 103, 0.12) 0%, rgba(15, 23, 42, 0)) !important; } html[dark] .resources-hub__heading { color: var(--text-heading) !important; } html[dark] .resources-hub__links a { color: var(--link-color) !important; } html[dark] .resources-hub__links a:hover, html[dark] .resources-hub__links a:focus { color: var(--link-hover) !important; } html[dark] .resources-hub__note { color: var(--text-muted) !important; } html[dark] .resources-hub__card--books { background: rgba(26, 35, 52, 0.95) !important; border-color: rgba(131, 17, 192, 0.15) !important; background-image: linear-gradient(140deg, rgba(131, 17, 192, 0.12) 0%, rgba(131, 17, 192, 0.06) 50%, rgba(26, 35, 52, 0.95) 100%) !important; } html[dark] .resources-hub__card--books .resources-hub__heading { color: var(--link-color) !important; } /* ---- Books Hub (main.scss) ---- */ html[dark] .books-hub__eyebrow { background: rgba(131, 17, 192, 0.2) !important; color: var(--link-color) !important; } html[dark] .books-hub__title { color: var(--text-heading) !important; } html[dark] .books-hub__summary { color: var(--text-muted-soft) !important; } html[dark] .books-hub__note { color: var(--text-muted) !important; } html[dark] .book-card { background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: 0 26px 52px -28px rgba(0, 0, 0, .5) !important; } html[dark] .book-card::after { background: linear-gradient(140deg, rgba(131, 17, 192, 0.12) 0%, rgba(131, 17, 192, 0.08) 60%, rgba(26, 35, 52, 0.95) 100%) !important; } html[dark] .book-card__icon { background: rgba(131, 17, 192, 0.2) !important; color: var(--link-color) !important; } html[dark] .book-card__title { color: var(--text-heading) !important; } html[dark] .book-card__description { color: var(--text-muted-soft) !important; } html[dark] .book-card__meta { color: var(--text-muted) !important; } html[dark] .book-card__link { background: var(--gradient-main) !important; color: #fff !important; } html[dark] .book-card__link:hover, html[dark] .book-card__link:focus { color: #fff !important; } /* ---- Book Landing (main.scss) ---- */ html[dark] .book-landing__hero { background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-alt) 70%) !important; border-color: var(--border-light) !important; } html[dark] .book-landing__tagline { color: var(--text-muted-strong) !important; } html[dark] .book-landing__lede { color: var(--text-color) !important; } html[dark] .book-landing__cta--secondary { background: var(--bg-alt) !important; border-color: var(--border-light) !important; color: var(--text-heading) !important; } html[dark] .book-landing__cta--secondary:hover, html[dark] .book-landing__cta--secondary:focus { border-color: var(--link-color) !important; color: var(--link-color) !important; } html[dark] .book-landing__eyebrow { color: var(--text-muted) !important; } html[dark] .book-landing__reviews-list { color: var(--text-color) !important; } html[dark] .book-landing__reviews-copy { color: var(--text-muted-soft) !important; } html[dark] .book-landing__card { background: var(--bg-card) !important; border-color: var(--border-light) !important; } /* ---- Recent Posts Section (main.scss) ---- */ html[dark] section.recent-posts .recent-posts__eyebrow { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.65) !important; } html[dark] section.recent-posts .recent-posts__title { color: var(--text-heading) !important; } html[dark] section.recent-posts .recent-posts__lead { color: var(--text-muted-soft) !important; } html[dark] section.recent-posts .recent-posts__link { background: var(--gradient-main) !important; color: #fff !important; } html[dark] section.recent-posts .recent-card { background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: 0 24px 48px -28px rgba(0, 0, 0, .5) !important; } html[dark] section.recent-posts .recent-card__meta { color: var(--text-muted) !important; } html[dark] section.recent-posts .recent-card__headline a { color: var(--text-heading) !important; } html[dark] section.recent-posts .recent-card__headline a:hover, html[dark] section.recent-posts .recent-card__headline a:focus { color: var(--link-color) !important; } html[dark] section.recent-posts .recent-card__excerpt { color: var(--text-muted-soft) !important; } html[dark] section.recent-posts .recent-card__cta { color: var(--link-color) !important; } html[dark] section.recent-posts .recent-card__cta:hover, html[dark] section.recent-posts .recent-card__cta:focus { color: var(--link-hover) !important; } html[dark] .recent-posts--layout .recent-posts__feed { background: linear-gradient(180deg, rgba(214, 0, 103, 0.06) 0%, rgba(15, 23, 42, 0.04) 100%) !important; border-color: var(--border-light) !important; } /* ---- Modern Pagination ---- */ html[dark] .bottompagination.modern-pagination { background: linear-gradient(135deg, rgba(214, 0, 103, 0.1) 0%, rgba(15, 23, 42, 0.06) 100%) !important; } html[dark] .modern-pagination__top { background: var(--bg-card) !important; color: var(--text-heading) !important; box-shadow: 0 14px 30px -20px rgba(0, 0, 0, .6) !important; } html[dark] .modern-pagination__top:hover, html[dark] .modern-pagination__top:focus { background: var(--bg-alt) !important; } html[dark] .modern-pagination__icon { background: rgba(255, 255, 255, 0.08) !important; } html[dark] .modern-pagination__nav .pagination a { background: var(--bg-card) !important; color: var(--text-heading) !important; border-color: var(--border-light) !important; } html[dark] .modern-pagination__nav .pagination a:hover, html[dark] .modern-pagination__nav .pagination a:focus { background: var(--text-heading) !important; color: var(--bg-body) !important; } html[dark] .modern-pagination__nav .pagination span { background: rgba(255, 255, 255, 0.08) !important; color: var(--text-heading) !important; border-color: var(--border-light) !important; } html[dark] .modern-pagination__nav .pagination span:not(:first-child):not(:last-child) { background: var(--text-heading) !important; color: var(--bg-body) !important; } /* ---- Screen.css Legacy Elements ---- */ html[dark] .graybg { background-color: var(--bg-alt) !important; } html[dark] .article-post { color: var(--text-muted-strong) !important; } html[dark] .post-top-meta span { color: var(--text-muted) !important; } html[dark] .post-top-meta .author-description { color: var(--text-muted-soft) !important; } html[dark] .link-dark { color: var(--text-muted-strong) !important; } html[dark] .wrapfooter { border-top-color: var(--border-light) !important; } html[dark] .share, html[dark] .share a { color: var(--text-muted) !important; fill: var(--text-muted) !important; } html[dark] .share a:hover { color: var(--text-heading) !important; fill: var(--text-heading) !important; } html[dark] .section-title { border-bottom-color: var(--border-color) !important; } html[dark] .section-title h2 span { color: var(--text-heading) !important; } html[dark] .section-title span { border-bottom-color: var(--border-light) !important; } /* ---- Legacy Mediumish Post Cards (.listrecent / .listfeaturedtag) ---- */ /* Used by events.md, archive.html, tags.html, categories.html via postbox.html */ html[dark] .listrecent .card, html[dark] .listfeaturedtag .card, html[dark] .listrelated .card { background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: 0 4px 12px rgba(0, 0, 0, .3) !important; } html[dark] .listrecent .card-body, html[dark] .listfeaturedtag .card-body, html[dark] .listrelated .card-body { background: var(--bg-card) !important; color: var(--text-color) !important; } html[dark] .listrecent h2.card-title a, html[dark] .listrecent h2.card-title a.text-dark, html[dark] .listfeaturedtag h2.card-title a, html[dark] .listfeaturedtag h2.card-title a.text-dark, html[dark] .listrelated h2.card-title a { color: var(--text-heading) !important; } html[dark] .listrecent h4.card-text, html[dark] .listfeaturedtag h4.card-text, html[dark] .listrelated h4.card-text { color: var(--text-muted-soft) !important; } html[dark] .listrecent .card-footer, html[dark] .listrecent .card-footer.bg-white, html[dark] .listfeaturedtag .card-footer, html[dark] .listfeaturedtag .card-footer.bg-white, html[dark] .listrelated .card-footer { background: var(--bg-card) !important; border-top-color: var(--border-light) !important; } html[dark] .listrecent span.post-name a, html[dark] .listfeaturedtag span.post-name a { color: var(--text-muted-strong) !important; } html[dark] .listrecent span.post-date, html[dark] .listfeaturedtag span.post-date { color: var(--text-muted) !important; } html[dark] .listrecent span.post-read-more a, html[dark] .listfeaturedtag span.post-read-more a { color: var(--text-muted) !important; } html[dark] .listrecent span.post-read-more svg, html[dark] .listfeaturedtag span.post-read-more svg { fill: var(--text-muted) !important; } html[dark] .listrecent span.post-read-more a:hover, html[dark] .listfeaturedtag span.post-read-more a:hover { color: var(--text-heading) !important; } html[dark] .listrecent span.post-read-more a:hover svg, html[dark] .listfeaturedtag span.post-read-more a:hover svg { fill: var(--text-heading) !important; } /* Bottom-of-screen.css card text (hardcoded light colors) */ html[dark] .card h3 { color: var(--text-heading) !important; } html[dark] .card p { color: var(--text-color) !important; } html[dark] .card-date { color: var(--text-muted) !important; } /* Page layout lead text */ html[dark] .lead { color: var(--text-muted-soft) !important; } /* ---- Medium Widget Overrides ---- */ html[dark] .sk-ww-medium-publication-feed, html[dark] .sk-ww-medium-publication-feed * { color: var(--text-color) !important; } html[dark] .sk-ww-medium-publication-feed { background: transparent !important; } /* SociableKit widget injects inline styles on card wrappers — force dark bg */ html[dark] .sk-ww-medium-publication-feed div[style], html[dark] .sk-ww-medium-publication-feed .sk-feed-item, html[dark] .sk-ww-medium-publication-feed .sk-medium-publication-feed-item, html[dark] .sk-ww-medium-publication-feed > div > div { background-color: var(--bg-card) !important; border-color: var(--border-light) !important; color: var(--text-color) !important; } html[dark] .sk-ww-medium-publication-feed img { border-radius: 12px; } html[dark] .medium_publication_post_title { color: var(--text-heading) !important; } html[dark] .sk-description, html[dark] div.sk-description { color: var(--text-muted-soft) !important; } html[dark] .sk-ww-medium-publication-feed .sk-medium-publication-feed-load-more-posts { background: var(--bg-alt) !important; color: var(--text-heading) !important; border-color: var(--border-light) !important; } html[dark] .sk-ww-medium-publication-feed .sk-medium-publication-feed-load-more-posts:hover, html[dark] .sk-ww-medium-publication-feed .sk-medium-publication-feed-load-more-posts:focus { background: var(--text-heading) !important; color: var(--bg-body) !important; } /* ---- Inline style overrides (#posts in default.html) ---- */ html[dark] #posts .post { background: var(--bg-card) !important; border-color: var(--border-light) !important; box-shadow: 0 2px 4px var(--shadow-sm) !important; color: var(--text-color) !important; } html[dark] #posts .post-title { color: var(--text-heading) !important; } html[dark] #posts .post-date { color: var(--text-muted) !important; } html[dark] #posts .read-more { background-color: var(--btn-success-bg) !important; color: #fff !important; } html[dark] #posts .read-more:hover { background-color: var(--btn-success-hover) !important; } /* ============================================================ FOOTER Dark Overrides ============================================================ */ html[dark] .azure-footer-nav { background-color: var(--bg-card) !important; color: var(--text-color) !important; } html[dark] .azure-footer-nav li a, html[dark] .azure-footer-nav li button { color: var(--text-color) !important; } html[dark] .azure-footer-nav li a:hover, html[dark] .azure-footer-nav li button:hover { color: var(--text-heading) !important; } html[dark] .azure-footer-nav .text-heading6, html[dark] .azure-footer-nav h3 { color: var(--text-heading) !important; } html[dark] .azure-footer-nav .azure-footer-nav__azure-app { background-color: var(--bg-alt) !important; color: var(--text-color) !important; } html[dark] .azure-footer-nav .azure-footer-nav__social a svg { fill: var(--text-color); } html[dark] .azure-footer-nav .azure-footer-nav__social a:hover svg { fill: var(--text-heading); } html[dark] .azure-footer-nav__toggle { background-color: var(--bg-alt) !important; color: var(--text-heading) !important; } html[dark] .azure-footer-nav__toggle:after { color: var(--text-muted) !important; } html[dark] .footer { background: var(--bg-card) !important; border-top-color: var(--border-color) !important; color: var(--text-muted) !important; } html[dark] .footer .container { color: var(--text-color); } html[dark] .footer a { color: var(--text-color) !important; } html[dark] .footer a:hover { color: var(--text-heading) !important; } /* ============================================================ BOOTSTRAP Dark Overrides ============================================================ */ html[dark] .bg-white { background-color: var(--bg-card) !important; } html[dark] .bg-light { background-color: var(--bg-alt) !important; } html[dark] .border { border-color: var(--border-light) !important; } html[dark] .text-dark { color: var(--text-heading) !important; } html[dark] .dropdown-menu { background-color: var(--bg-card); border-color: var(--border-light); } html[dark] .dropdown-item { color: var(--text-color); } html[dark] .dropdown-item:hover { background-color: var(--bg-alt); color: var(--text-heading); } html[dark] .modal-content { background-color: var(--bg-card); color: var(--text-color); } html[dark] input, html[dark] textarea, html[dark] select { background-color: var(--bg-alt); color: var(--text-heading); border-color: var(--border-light); } /* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle-btn { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin-left: 12px; padding: 0; border: 1px solid rgba(0, 0, 0, .1); border-radius: 8px; background: transparent; color: #697585; font-size: 16px; cursor: pointer; transition: all 0.2s ease; flex-shrink: 0; } @media (max-width: 991px) { .theme-toggle-btn { margin: 10px 0; } } .theme-toggle-btn:hover { color: var(--text-heading, #10141f); background: rgba(0, 0, 0, .05); } html[dark] .theme-toggle-btn { border-color: rgba(255, 255, 255, .15); color: #9e9e9e; } html[dark] .theme-toggle-btn:hover { color: #f0f0f0; background: rgba(255, 255, 255, .08); } /* Show moon in light mode, sun in dark mode */ .theme-icon-sun { display: none; } .theme-icon-moon { display: inline-block; } html[dark] .theme-icon-sun { display: inline-block; } html[dark] .theme-icon-moon { display: none; } /* ---- Smooth color transitions on theme switch ---- */ body, .navbar, .card, a, .jumbotron, .alertbar, .azure-footer-nav, .theme-toggle-btn { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ---- Images: slightly reduce brightness in dark mode ---- */ html[dark] img:not(.theme-icon):not([src*="logo"]) { filter: brightness(.92); } html[dark] img:hover { filter: brightness(1); }