/* ============================================================ SMS JournalHub — Dark Mode (dark-mode.css) Activated by (toggled + persisted in main.js) Re-maps the design tokens; component CSS inherits automatically. ============================================================ */ body.dark-mode { --jh-primary: #93c5fd; --jh-primary-700: #bfdbfe; --jh-primary-900: #dbeafe; --jh-accent: #38bdf8; --jh-accent-600: #7dd3fc; --jh-accent-soft: rgba(56,189,248,.14); --jh-bg: #0b1220; --jh-surface: #111c30; --jh-surface-2: #16233b; --jh-dark: #060c17; --jh-dark-2: #0b1322; --jh-ink: #e2e8f0; --jh-muted: #94a3b8; --jh-faint: #64748b; --jh-line: #233149; --jh-line-strong: #334866; --jh-shadow-sm: 0 1px 2px rgba(0,0,0,.4); --jh-shadow: 0 4px 10px -2px rgba(0,0,0,.5); --jh-shadow-lg: 0 18px 44px -12px rgba(0,0,0,.6); --jh-grad-soft: linear-gradient(160deg, #0b1220 0%, #111c30 100%); --bs-body-color: var(--jh-ink); --bs-body-bg: var(--jh-bg); } body.dark-mode { background: var(--jh-bg); color: var(--jh-ink); } /* Headings: gradient text already adapts; plain headings need light ink */ body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5 { color: #f1f5f9; } body.dark-mode .section-title { color:#f1f5f9; } /* Navbar */ body.dark-mode .jh-navbar { background: rgba(11,18,32,.82); } body.dark-mode .jh-navbar.scrolled { background: rgba(11,18,32,.96); border-bottom-color: var(--jh-line); } body.dark-mode .navbar-brand { color:#f1f5f9; } body.dark-mode .jh-navbar .nav-link { color:#cbd5e1; } body.dark-mode .jh-navbar .nav-link.active { color:#fff; } body.dark-mode .theme-toggle { background: var(--jh-surface); border-color: var(--jh-line); color:#cbd5e1; } body.dark-mode .jh-dropdown { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .jh-dropdown .dropdown-item { color:#cbd5e1; } body.dark-mode .jh-dropdown .dropdown-item:hover, body.dark-mode .jh-dropdown .dropdown-item:focus { background: var(--jh-surface-2); color:#7dd3fc; } body.dark-mode .jh-dropdown .dropdown-item .dd-d { color: var(--jh-faint); } /* Hero grid + glow */ body.dark-mode .hero::before { background: radial-gradient(900px 480px at 78% -8%, rgba(56,189,248,.18), transparent 60%), radial-gradient(700px 520px at 8% 12%, rgba(56,189,248,.08), transparent 55%), var(--jh-bg); } body.dark-mode .hero-grid-bg { opacity:.25; } /* Buttons */ body.dark-mode .btn-jh-outline { color:#e2e8f0; border-color: var(--jh-line-strong); } body.dark-mode .btn-jh-outline:hover { background: var(--jh-accent-soft); color:#7dd3fc; } body.dark-mode .btn-jh-light { background: var(--jh-surface-2); color:#e2e8f0; border-color: var(--jh-line); } body.dark-mode .btn-jh-primary { color:#06243a; } body.dark-mode .btn-jh-primary { background: linear-gradient(120deg,#38bdf8,#7dd3fc); } /* Surfaces that used #fff literally */ body.dark-mode .feature-card, body.dark-mode .price-card, body.dark-mode .blog-card, body.dark-mode .team-card, body.dark-mode .value-card, body.dark-mode .testi-card, body.dark-mode .contact-info-card, body.dark-mode .form-card, body.dark-mode .browser-frame, body.dark-mode .compare-wrap, body.dark-mode .ticker, body.dark-mode .journal-card, body.dark-mode .cert-bar { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .jc-logo { background: var(--jh-surface-2); border-color: var(--jh-line); } body.dark-mode .browser-bar { background: var(--jh-surface-2); border-color: var(--jh-line); } body.dark-mode .browser-bar .b-url { background: var(--jh-bg); border-color: var(--jh-line); } /* Compare table */ body.dark-mode .compare-table thead th { background: var(--jh-surface-2); color:#f1f5f9; } body.dark-mode .compare-table th, body.dark-mode .compare-table td { border-bottom-color: var(--jh-line); } body.dark-mode .compare-table .col-ours { background: rgba(56,189,248,.10); } body.dark-mode .compare-table thead .col-ours { background: #1e3a5f; color:#fff; } body.dark-mode .compare-no { color:#475569; } /* Forms */ body.dark-mode .form-control, body.dark-mode .form-select { background: var(--jh-surface-2); border-color: var(--jh-line); color:#e2e8f0; } body.dark-mode .form-control::placeholder { color: var(--jh-faint); } body.dark-mode .form-control:focus, body.dark-mode .form-select:focus { background: var(--jh-surface-2); border-color: var(--jh-accent); } body.dark-mode .form-select option { background: var(--jh-surface); color:#e2e8f0; } /* FAQ */ body.dark-mode .faq-acc .accordion-item { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .faq-acc .accordion-button { background: var(--jh-surface); color:#f1f5f9; } body.dark-mode .faq-acc .accordion-button:not(.collapsed){ background: var(--jh-accent-soft); color:#fff; } body.dark-mode .accordion-button::after { filter: invert(1) brightness(1.6); } /* Currency toggle / tabs / filters */ body.dark-mode .currency-toggle { background: var(--jh-surface-2); border-color: var(--jh-line); } body.dark-mode .currency-toggle button.active { background: var(--jh-surface); color:#f1f5f9; } body.dark-mode .jh-tabs .nav-link { background: var(--jh-surface); border-color: var(--jh-line); color: var(--jh-muted); } body.dark-mode .jh-tabs .nav-link.active { background:#1e3a5f; color:#fff; border-color:#1e3a5f; } body.dark-mode .cat-filter button { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .cat-filter button.active, body.dark-mode .cat-filter button:hover { background:#1e3a5f; color:#fff; border-color:#1e3a5f; } /* page hero / sections that flip to surface */ body.dark-mode .page-hero { background: var(--jh-grad-soft); border-bottom-color: var(--jh-line); } body.dark-mode .feat-section:nth-child(even){ background: var(--jh-surface); } body.dark-mode .why-item:hover { background: var(--jh-surface); } /* Floating UI */ body.dark-mode .cookie-bar, body.dark-mode .jh-toast { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .toast-stack .jh-toast .t-title { color:#f1f5f9; } body.dark-mode .back-to-top { background: var(--jh-accent); color:#06243a; } /* Kicker */ body.dark-mode .kicker { background: var(--jh-accent-soft); color:#7dd3fc; } /* Mobile drawer */ @media (max-width: 991.98px){ body.dark-mode .jh-navbar .navbar-collapse { background: var(--jh-surface); } body.dark-mode .drawer-close:hover { background: var(--jh-surface-2); color: #f1f5f9; } } /* Footer is dark already; nudge to deepest tone */ body.dark-mode .jh-footer { background: var(--jh-dark); } /* placeholders: soften brightness so stripes don't glare */ body.dark-mode .browser-frame img, body.dark-mode .blog-card img, body.dark-mode .feat-img img, body.dark-mode .post-cover img { filter: brightness(.82) contrast(1.05); } /* Article / Legal / 404 surfaces */ body.dark-mode .post-hero { background: var(--jh-grad-soft); border-bottom-color: var(--jh-line); } body.dark-mode .post-cover, body.dark-mode .toc-card, body.dark-mode .author-box, body.dark-mode .share-btns a, body.dark-mode .error-links a { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .article-prose strong, body.dark-mode .legal-doc strong, body.dark-mode .callout .ttl { color:#f1f5f9; } body.dark-mode .article-prose blockquote { background: var(--jh-surface-2); } body.dark-mode .legal-doc table th { background: var(--jh-surface-2); color:#f1f5f9; } body.dark-mode .legal-doc table th, body.dark-mode .legal-doc table td { border-color: var(--jh-line); } body.dark-mode .legal-updated { background: var(--jh-surface); border-color: var(--jh-line); } body.dark-mode .share-btns a:hover { background: var(--jh-accent); color:#06243a; border-color: var(--jh-accent); } /* Contrast polish: lift faint meta + ensure links use brand accent (not Bootstrap blue) */ body.dark-mode .blog-meta { color:#94a3b8; } body.dark-mode .cookie-bar a, body.dark-mode .article-prose a, body.dark-mode .legal-doc a, body.dark-mode .footer-bottom a:not(.brand-accent) { color:#7dd3fc; } body.dark-mode .footer-bottom a:hover { color:#bae6fd; }