/* ============================================================ HostMeerkat — Light / Dark Mode Link after all other stylesheets in . Toggle by adding/removing class "light-mode" on or . Default = dark | .light-mode = light ============================================================ */ /* ── CSS CUSTOM PROPERTIES ─────────────────────────────────── */ /* DARK (default — matches the existing site design) */ /* Force the navbar to sit on top of the page content */ #fixedR.navbar { position: relative; z-index: 9999 !important; } /* Force the dropdown menus to sit on top of everything */ .navbar .dropdown-menu { z-index: 10000 !important; } :root { --bg-page: #030712; --bg-primary: #06090f; --bg-card: #111827; --bg-card-hover: #162032; --bg-nav: rgba(6, 9, 15, 0.92); --bg-sale: #0d1526; --bg-footer: #030712; --bg-footer-bottom: rgba(0, 0, 0, 0.2); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --text-footer-link: #64748b; --text-copyright: #475569; --border-subtle: rgba(255, 255, 255, 0.05); --border-card: rgba(255, 255, 255, 0.05); --border-card-hover: rgba(47, 134, 255, 0.3); --border-nav: rgba(255, 255, 255, 0.06); --sale-text: #cbd5e1; --sale-badge-bg: rgba(47, 134, 255, 0.15); --sale-badge-border: rgba(47, 134, 255, 0.35); --nav-link: rgba(255, 255, 255, 0.75); --nav-link-hover: #ffffff; --dropdown-bg: #111827; --dropdown-border: rgba(255, 255, 255, 0.08); --dropdown-hover-bg: rgba(47, 134, 255, 0.12); --feature-grid-dot: rgba(255, 255, 255, 0.06); --icon-box-glow: 0.5; --pricing-card-bg: linear-gradient(160deg, #111827 0%, #06090f 100%); --pricing-popular-bg: rgba(47, 134, 255, 0.06); --migration-card-bg: rgba(255, 255, 255, 0.03); --migration-border: rgba(255, 255, 255, 0.07); --faq-bg: rgba(255, 255, 255, 0.03); --faq-border: rgba(255, 255, 255, 0.07); --faq-summary: #f8fafc; --faq-body: #94a3b8; --payment-card-bg: linear-gradient(160deg, #111827 0%, #06090f 100%); --payment-card-hover-bg: linear-gradient(160deg, #162032 0%, #06090f 100%); --payment-icon: #cbd5e1; --footer-link-hover: #e2e8f0; --footer-heading: #f8fafc; --scrollbar-thumb: #1e2a45; --scrollbar-track: #030712; } /* LIGHT MODE overrides */ body.light-mode, html.light-mode { --bg-page: #f1f5f9; --bg-primary: #f8fafc; --bg-card: #ffffff; --bg-card-hover: #eff6ff; --bg-nav: rgba(255, 255, 255, 0.95); --bg-sale: #dbeafe; --bg-footer: #1e293b; --bg-footer-bottom: rgba(0, 0, 0, 0.15); --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-footer-link: #94a3b8; --text-copyright: #94a3b8; --border-subtle: rgba(0, 0, 0, 0.06); --border-card: rgba(0, 0, 0, 0.07); --border-card-hover: rgba(47, 134, 255, 0.4); --border-nav: rgba(0, 0, 0, 0.08); --sale-text: #1e3a5f; --sale-badge-bg: rgba(47, 134, 255, 0.1); --sale-badge-border: rgba(47, 134, 255, 0.25); --nav-link: #334155; --nav-link-hover: #0f172a; --dropdown-bg: #ffffff; --dropdown-border: rgba(0, 0, 0, 0.08); --dropdown-hover-bg: rgba(47, 134, 255, 0.07); --feature-grid-dot: rgba(0, 0, 0, 0.05); --icon-box-glow: 0.35; --pricing-card-bg: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%); --pricing-popular-bg: rgba(47, 134, 255, 0.04); --migration-card-bg: #ffffff; --migration-border: rgba(0, 0, 0, 0.08); --faq-bg: #ffffff; --faq-border: rgba(0, 0, 0, 0.07); --faq-summary: #0f172a; --faq-body: #475569; --payment-card-bg: linear-gradient(160deg, #ffffff 0%, #f8fafc 100%); --payment-card-hover-bg: linear-gradient(160deg, #eff6ff 0%, #f8fafc 100%); --payment-icon: #475569; --footer-link-hover: #f8fafc; --footer-heading: #f8fafc; --scrollbar-thumb: #cbd5e1; --scrollbar-track: #f1f5f9; } /* ── BASE ───────────────────────────────────────────────────── */ body { background-color: var(--bg-page) !important; color: var(--text-primary) !important; transition: background-color 0.3s ease, color 0.3s ease; } /* ── SCROLLBAR ──────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; } /* ── SALE BANNER ────────────────────────────────────────────── */ .sale_banner { background: var(--bg-sale) !important; border-bottom: 1px solid var(--border-subtle) !important; transition: background 0.3s ease; } .sale_banner .sale-l, .sale_banner .sale-i, .sale_banner .sale-i span { color: var(--sale-text) !important; } .sale_banner .sale-r { background: var(--sale-badge-bg) !important; border: 1px solid var(--sale-badge-border) !important; color: var(--sale-text) !important; transition: all 0.3s ease; } /* ── NAVBAR ─────────────────────────────────────────────────── */ #fixedR { background: var(--bg-nav) !important; border-bottom: 1px solid var(--border-nav) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: background 0.3s ease; } #fixedR .navbar-brand h2 { color: var(--text-primary) !important; } #fixedR .nav-link { color: var(--nav-link) !important; transition: color 0.2s ease; } #fixedR .nav-link:hover, #fixedR .nav-link.active { color: var(--nav-link-hover) !important; } #fixedR .dropdown-menu { background: var(--dropdown-bg) !important; border: 1px solid var(--dropdown-border) !important; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important; } #fixedR .dropdown-item { color: var(--text-primary) !important; transition: background 0.2s ease; } #fixedR .dropdown-item:hover { background: var(--dropdown-hover-bg) !important; } #fixedR .dropdown-item span { color: var(--text-muted) !important; } /* mobile offcanvas */ .offcanvas { background: var(--dropdown-bg) !important; border-right: 1px solid var(--border-subtle) !important; } /* ── HERO / HEADER ──────────────────────────────────────────── */ .header { background-color: var(--bg-primary) !important; transition: background 0.3s ease; } .header_h2 { color: var(--text-primary) !important; } .header_p { color: var(--text-secondary) !important; } /* ── FEATURE CARDS ──────────────────────────────────────────── */ .feature-card { background: var(--pricing-card-bg) !important; border: 1px solid var(--border-card) !important; transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); } .feature-card:hover { background: var(--bg-card-hover) !important; border-color: var(--border-card-hover) !important; box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.15), 0 0 40px rgba(47, 134, 255, 0.1) !important; } .feature-card::after { background-image: radial-gradient(var(--feature-grid-dot) 1px, transparent 1px) !important; } .feature-title { color: var(--text-primary) !important; } .feature-text { color: var(--text-secondary) !important; } /* ── PRICING SECTION ────────────────────────────────────────── */ .hmk-pricing-section { background-color: var(--bg-primary) !important; border-color: var(--border-subtle) !important; } .hmk-pricing-title { color: var(--text-primary) !important; } .hmk-pricing-subtitle { color: var(--text-secondary) !important; } /* toggle pill */ .hmk-toggle-wrap { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; } .hmk-toggle-btn { color: var(--text-secondary) !important; } .hmk-toggle-btn.active { color: #ffffff !important; } /* pricing cards */ .hmk-price-card { background: var(--pricing-card-bg) !important; border: 1px solid var(--border-card) !important; transition: all 0.4s ease; } .hmk-price-card:hover { border-color: var(--border-card-hover) !important; } .hmk-popular-card { background: var(--pricing-popular-bg) !important; } .hmk-plan-name { color: var(--text-primary) !important; } .hmk-plan-text { color: var(--text-secondary) !important; } .hmk-price { color: var(--text-primary) !important; } .hmk-price-small { color: var(--text-muted) !important; } .hmk-year-text { color: var(--text-muted) !important; } .hmk-divider { border-color: var(--border-subtle) !important; } .hmk-feature-title { color: var(--text-muted) !important; } .hmk-feature-list li { color: var(--text-secondary) !important; } .hmk-mini-tags span { background: var(--bg-card) !important; border: 1px solid var(--border-subtle) !important; color: var(--text-muted) !important; } /* ── MIGRATION SECTION ──────────────────────────────────────── */ .hmk-migration-section { background-color: var(--bg-page) !important; } .hmk-migration-title { color: var(--text-primary) !important; } .hmk-migration-subtitle { color: var(--text-secondary) !important; } .hmk-migration-card { background: var(--migration-card-bg) !important; border: 1px solid var(--migration-border) !important; transition: all 0.3s ease; } .hmk-migration-card h3 { color: var(--text-primary) !important; } .hmk-migration-card p { color: var(--text-secondary) !important; } /* ── FAQ SECTION ────────────────────────────────────────────── */ .hmk-faq-section { background-color: var(--bg-primary) !important; } .hmk-faq-title { color: var(--text-primary) !important; } .hmk-faq-subtitle { color: var(--text-secondary) !important; } .hmk-faq-item { background: var(--faq-bg) !important; border: 1px solid var(--faq-border) !important; transition: background 0.3s ease, border 0.3s ease; } .hmk-faq-item summary { color: var(--faq-summary) !important; } .hmk-faq-item p { color: var(--faq-body) !important; } .hmk-faq-help-card { background: var(--faq-bg) !important; border: 1px solid var(--faq-border) !important; } .hmk-faq-help-card h3 { color: var(--text-primary) !important; } .hmk-faq-help-card p { color: var(--text-secondary) !important; } /* ── PAYMENT SECTION ────────────────────────────────────────── */ .hmk-payment-section { background: var(--bg-page) !important; border-color: var(--border-subtle) !important; } .hmk-payment-title { color: var(--text-primary) !important; } .hmk-payment-subtitle { color: var(--text-secondary) !important; } .hmk-payment-card { background: var(--payment-card-bg) !important; border: 1px solid var(--border-card) !important; color: var(--text-secondary) !important; transition: all 0.4s ease; } .hmk-payment-card i { color: var(--payment-icon) !important; transition: color 0.3s ease; } .hmk-payment-card:hover { background: var(--payment-card-hover-bg) !important; border-color: var(--border-card-hover) !important; color: var(--text-primary) !important; } .hmk-payment-card:hover i { color: #2f86ff !important; } /* ── FOOTER ─────────────────────────────────────────────────── */ .footer-wrap { background: var(--bg-footer) !important; } .footer_links h4 { color: var(--footer-heading) !important; } .footer_links ul li a { color: var(--text-footer-link) !important; } .footer_links ul li a:hover { color: var(--footer-link-hover) !important; } .footer_about p { color: var(--text-footer-link) !important; } .footer_bottom { border-top: 1px solid rgba(255, 255, 255, 0.05) !important; background: var(--bg-footer-bottom) !important; } .footer_bottom p { color: var(--text-copyright) !important; } /* ── SECTION KICKER ─────────────────────────────────────────── */ .hmk-section-kicker { color: #2f86ff !important; } /* ── GENERAL TYPOGRAPHY ─────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { color: var(--text-primary); } p { color: var(--text-secondary); } /* ── FORCED HEADING VISIBILITY ──────────────────────────────── */ /* High-specificity selectors to beat hardcoded colors in */ /* main.css / style.css / customize.css and the inline