/*============================================================== dark-mode.css — Shared dark theme for ALL Shiyos pages Include in every page's after Tailwind. Activated by adding .dark to . ==============================================================*/ /* ── Base ────────────────────────────────────────────────── */ html.dark body { background-color: #020817 !important; color: #e2e8f0 !important; } /* ── Glass nav ───────────────────────────────────────────── */ html.dark .glass { background: rgba(2, 8, 23, 0.82) !important; border: 1px solid rgba(255, 255, 255, 0.07) !important; } /* ── Nav text ────────────────────────────────────────────── */ html.dark nav a { color: #cbd5e1 !important; } html.dark nav a:hover { color: #60a5fa !important; } html.dark .text-slate-900 { color: #f1f5f9 !important; } html.dark .text-slate-800 { color: #e2e8f0 !important; } html.dark .text-slate-700 { color: #94a3b8 !important; } html.dark .text-slate-600 { color: #94a3b8 !important; } html.dark .text-slate-500 { color: #64748b !important; } html.dark .text-slate-400 { color: #475569 !important; } /* ── Backgrounds ─────────────────────────────────────────── */ html.dark .bg-white { background-color: #0f172a !important; } html.dark .bg-slate-50 { background-color: #0f172a !important; } html.dark .bg-slate-100 { background-color: #1e293b !important; } html.dark .bg-background-light { background-color: #020817 !important; } /* ── Borders ─────────────────────────────────────────────── */ html.dark .border-slate-100 { border-color: #1e293b !important; } html.dark .border-slate-200 { border-color: #1e293b !important; } html.dark .border-y { border-color: #1e293b !important; } /* ── Cards ───────────────────────────────────────────────── */ html.dark .bg-white.rounded-2xl, html.dark .bg-white.rounded-xl, html.dark .group.bg-white, html.dark .rounded-2xl.bg-white, html.dark .rounded-xl.bg-white { background-color: #0f172a !important; border-color: #1e293b !important; } /* ── Sections ────────────────────────────────────────────── */ html.dark section { background-color: #020817; } html.dark section.bg-white { background-color: #0f172a !important; } html.dark section.bg-slate-900 { background-color: #00040e !important; } /* ── Hero grid ───────────────────────────────────────────── */ html.dark .hero-pattern { background-color: #020817; background-image: radial-gradient(rgba(36,99,235,.25) 0.5px, transparent 0.5px), radial-gradient(rgba(36,99,235,.25) 0.5px, #020817 0.5px); } html.dark #hero-fade { background: linear-gradient(to bottom, transparent, #020817 85%) !important; } /* ── Inputs / Textarea ───────────────────────────────────── */ html.dark input, html.dark textarea, html.dark select { background-color: #1e293b !important; border-color: #334155 !important; color: #e2e8f0 !important; } html.dark input::placeholder, html.dark textarea::placeholder { color: #64748b !important; } /* ── Store page specifics ────────────────────────────────── */ html.dark .store-hero { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark #store-controls { background-color: #0f172a !important; border-bottom-color: #1e293b !important; } html.dark .store-tabs { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark .tab-btn { color: #94a3b8 !important; } html.dark .tab-btn.active { background: var(--primary, #2463eb) !important; color: #fff !important; } html.dark .tab-btn:not(.active):hover { background: rgba(36,99,235,.15) !important; color: #60a5fa !important; } html.dark .store-search__box { background: #1e293b !important; border-color: #334155 !important; } html.dark .store-search__input { color: #e2e8f0 !important; } html.dark .store-search__input::placeholder { color: #64748b !important; } html.dark .store-search__icon { color: #64748b !important; } html.dark #search-count { color: #64748b !important; } html.dark .product-card { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark .product-card:hover { border-color: #2563eb !important; } html.dark .card-name { color: #f1f5f9 !important; } html.dark .card-desc { color: #94a3b8 !important; } html.dark .card-brand { color: #64748b !important; } html.dark .btn--install { background: #1e293b !important; color: #e2e8f0 !important; } html.dark .store-grid-section__title { color: #f1f5f9 !important; } /* ── Payment page specifics ──────────────────────────────── */ html.dark #rzp-modal > div { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark .pricing-hero { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark .pricing-hero__title { color: #f1f5f9 !important; } html.dark .pricing-hero__sub { color: #94a3b8 !important; } html.dark .pricing-hero__badge { background: rgba(36,99,235,.15) !important; border-color: #1e3a8a !important; } html.dark .product-pill { background: #1e293b !important; border-color: #334155 !important; color: #94a3b8 !important; } html.dark .pricing-section { background-color: #020817 !important; } html.dark .plan-card { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark .plan-card:hover { border-color: #2563eb !important; box-shadow: 0 8px 32px rgba(36,99,235,.15) !important; } html.dark .plan-card--featured { border-color: #2463eb !important; box-shadow: 0 20px 60px rgba(36,99,235,.25) !important; } html.dark .plan-card--gold { background: #1a1400 !important; border-color: #78450a !important; } html.dark .plan-name { color: #f1f5f9 !important; } html.dark .plan-price__amount { color: #f1f5f9 !important; } html.dark .plan-price__period { color: #64748b !important; } html.dark .plan-desc { color: #94a3b8 !important; } html.dark .feature-row { color: #cbd5e1 !important; } html.dark .feature-row--crossed { color: #475569 !important; } html.dark .plan-features { border-color: #1e293b !important; } html.dark .plan-badge--starter { background: #1e293b !important; color: #94a3b8 !important; } html.dark .plan-btn--default { background: #1e293b !important; color: #e2e8f0 !important; } html.dark .credit-box { background: rgba(36,99,235,.12) !important; border-color: #1e3a8a !important; } html.dark .credit-box--gold { background: rgba(120,69,10,.25) !important; border-color: #78450a !important; } html.dark .credit-box__count { background: #0f172a !important; border-color: #1e3a8a !important; } html.dark .credit-box__label { color: #94a3b8 !important; } html.dark .credit-box__note { color: #64748b !important; } html.dark .credit-box__extra-label { color: #64748b !important; } html.dark .credit-box__total { background: rgba(255,255,255,.04) !important; color: #94a3b8 !important; } html.dark .credit-btn { background: #1e293b !important; color: #60a5fa !important; border-color: #2463eb !important; } html.dark .credit-btn--reset { background: transparent !important; color: #64748b !important; border-color: #334155 !important; } html.dark .how-section { background-color: #0f172a !important; border-color: #1e293b !important; } html.dark .section-title { color: #f1f5f9 !important; } html.dark .section-sub { color: #94a3b8 !important; } html.dark .how-step { background: #1e293b !important; border-color: #334155 !important; } html.dark .how-step__title { color: #f1f5f9 !important; } html.dark .how-step__desc { color: #94a3b8 !important; } html.dark .how-step__icon { background: rgba(36,99,235,.15) !important; } html.dark .how-grid::before { background: #1e293b !important; } html.dark .cta-section { background-color: #020817 !important; } html.dark .cta-banner { background: #0f172a !important; border-color: #1e293b !important; } html.dark .cta-banner__title { color: #f1f5f9 !important; } html.dark .cta-banner__quote { color: #94a3b8 !important; } html.dark .payment-logo { color: #94a3b8 !important; } /* ── Footer ──────────────────────────────────────────────── */ html.dark footer { background-color: #00040e !important; } html.dark .footer-link:hover { color: #60a5fa !important; } /* ── Mobile menu hover ───────────────────────────────────── */ html.dark .hover\:bg-slate-100:hover { background-color: #1e293b !important; } /* ── Theme toggle button ─────────────────────────────────── */ #theme-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(100, 116, 139, .3); background: transparent; cursor: pointer; transition: background .2s, border-color .2s, color .2s; color: #64748b; flex-shrink: 0; } #theme-toggle:hover { background: rgba(36, 99, 235, .1); border-color: #2463eb; color: #2463eb; } html.dark #theme-toggle { color: #fbbf24; border-color: rgba(251, 191, 36, .25); } html.dark #theme-toggle:hover { background: rgba(251, 191, 36, .1); border-color: #fbbf24; } #theme-icon { font-size: 1.15rem; transition: transform .4s ease; } #theme-toggle:hover #theme-icon { transform: rotate(20deg); } /* ── Ticker banner ───────────────────────────────────────── */ html.dark .ticker-banner { background: linear-gradient(90deg, #020617, #0f172a, #020617) !important; border-color: rgba(255,255,255,0.1) !important; box-shadow: inset 0 2px 20px rgba(0,0,0,0.5) !important; } html.dark .ticker-fade-left { background: linear-gradient(to right, #020617, transparent) !important; } html.dark .ticker-fade-right { background: linear-gradient(to left, #020617, transparent) !important; } html.dark .ticker-pill { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25) !important; } html.dark .ticker-pill:hover { background: rgba(255,255,255,0.1) !important; }