/* ============================================================ RANKHOSTZONE STORE - DARK THEME Applied when (toggle in navbar) Light mode is the default. Dark mode is remembered per device. ============================================================ */ :root[data-theme='dark'] { --bg: #0a1526; --bg-alt: #0d1b33; --bg-2: #10233f; --surface: #101f38; --surface-2: #0e1c33; --border: #1c3a66; --text: #e7f1fb; --text-2: #a6bcd6; --text-3: #647e9c; --shadow-sm: 0 2px 12px rgba(0, 0, 0, .45); --shadow-md: 0 12px 32px rgba(0, 0, 0, .5); --shadow-lg: 0 24px 55px rgba(0, 0, 0, .6); --shadow-glow: 0 0 44px rgba(56, 189, 248, .28); } :root[data-theme='dark'] body { background: var(--bg); } /* navbar glass */ :root[data-theme='dark'] .navbar { background: rgba(10, 21, 38, .8); border-bottom-color: var(--border); } /* hero */ :root[data-theme='dark'] .hero { background: radial-gradient(1100px 560px at 85% -10%, rgba(14, 165, 233, .22) 0%, transparent 55%), radial-gradient(900px 500px at -10% 110%, rgba(99, 102, 241, .18) 0%, transparent 55%), linear-gradient(160deg, #0a1526 0%, #0c1a30 100%); } :root[data-theme='dark'] .page-hero { background: radial-gradient(800px 380px at 90% 0%, rgba(14, 165, 233, .2) 0%, transparent 60%), radial-gradient(700px 360px at 0% 100%, rgba(99, 102, 241, .16) 0%, transparent 60%), linear-gradient(160deg, #0a1526, #0c1a30); } :root[data-theme='dark'] .auth-page { background: radial-gradient(900px 500px at 90% 0%, rgba(14, 165, 233, .2) 0%, transparent 55%), radial-gradient(700px 400px at 0% 100%, rgba(99, 102, 241, .16) 0%, transparent 55%), #0a1526; } /* cards & surfaces */ :root[data-theme='dark'] .prod-card, :root[data-theme='dark'] .cat-card, :root[data-theme='dark'] .feat-card, :root[data-theme='dark'] .step, :root[data-theme='dark'] .testi-card, :root[data-theme='dark'] .card, :root[data-theme='dark'] .verify-form, :root[data-theme='dark'] .price-box, :root[data-theme='dark'] .order-summary { background: var(--surface); border-color: var(--border); } /* hero floating cards */ :root[data-theme='dark'] .hero-card { background: rgba(16, 31, 56, .88); border-color: rgba(56, 189, 248, .2); } :root[data-theme='dark'] .hero-card .hc-key { background: #0d1b33; color: #7dd3fc; border-color: rgba(56,189,248,.35); } /* user menu */ :root[data-theme='dark'] .user-menu { background: var(--surface); border-color: var(--border); } :root[data-theme='dark'] .user-menu a { color: #a6bcd6; } :root[data-theme='dark'] .user-menu a:hover { background: #12304f; color: #7dd3fc; } :root[data-theme='dark'] .user-menu a.um-danger:hover { background: rgba(239,68,68,.15); color: #fca5a5; } /* forms */ :root[data-theme='dark'] .form-control, :root[data-theme='dark'] .select-wrap select, :root[data-theme='dark'] .search-box, :root[data-theme='dark'] .news-form input { background: #0d1b33; color: var(--text); border-color: var(--border); } :root[data-theme='dark'] .search-box input { color: var(--text); } :root[data-theme='dark'] .search-box input::placeholder, :root[data-theme='dark'] .news-form input::placeholder { color: #647e9c; } /* period options */ :root[data-theme='dark'] .period-opt { background: #0d1b33; border-color: var(--border); } :root[data-theme='dark'] .period-opt.active { border-color: var(--sky-500); background: linear-gradient(160deg, #0f2745, #0d1b33); } :root[data-theme='dark'] .price-tabs { background: #0d1b33; } /* chips, pagination, buttons ghost */ :root[data-theme='dark'] .chip { background: var(--surface); border-color: var(--border); color: var(--text-2); } :root[data-theme='dark'] .pagination a, :root[data-theme='dark'] .pagination span { background: var(--surface); border-color: var(--border); color: var(--text-2); } :root[data-theme='dark'] .btn-ghost { background: #12304f; color: #7dd3fc; } :root[data-theme='dark'] .btn-outline { color: #7dd3fc; box-shadow: inset 0 0 0 2px rgba(56, 189, 248, .5); } /* icon buttons */ :root[data-theme='dark'] .icon-btn { background: var(--surface); border-color: var(--border); color: var(--text-2); } /* gallery */ :root[data-theme='dark'] .gallery-main { background: var(--surface); border-color: var(--border); } :root[data-theme='dark'] .gallery-main .g-zoom { background: rgba(13, 27, 51, .9); color: #cfe8ff; } /* rich text */ :root[data-theme='dark'] .tab-panel .rich { color: #a6bcd6; } :root[data-theme='dark'] .tab-panel .rich h2, :root[data-theme='dark'] .tab-panel .rich h3, :root[data-theme='dark'] .tab-panel .rich h4 { color: #e7f1fb; } :root[data-theme='dark'] .tab-panel .rich code { background: #0d1b33; border-color: var(--border); color: #7dd3fc; } :root[data-theme='dark'] .lic-info-box { background: #0d1b33; border-color: rgba(56,189,248,.3); } /* newsletter & misc */ :root[data-theme='dark'] .newsletter { background: #0d1b33; border-color: rgba(56,189,248,.25); } :root[data-theme='dark'] .vr-body { background: var(--surface); border-color: var(--border); } :root[data-theme='dark'] .key-chip { background: #0d1b33; color: #7dd3fc; border-color: rgba(56,189,248,.5); } :root[data-theme='dark'] .toast { background: #101f38; border-color: var(--border); } :root[data-theme='dark'] .wish-btn { background: rgba(13, 27, 51, .92); color: #a6bcd6; } :root[data-theme='dark'] .announce { background: linear-gradient(135deg, #0369a1, #1d4ed8); } :root[data-theme='dark'] .marquee { background: linear-gradient(135deg, #0369a1, #1d4ed8); } :root[data-theme='dark'] .payment-note { background: #0d1b33; border-color: rgba(56,189,248,.3); } /* preloader */ :root[data-theme='dark'] #preloader { background: #0a1526; } :root[data-theme='dark'] .loader-ring { border-color: #12304f; border-top-color: var(--sky-400); } /* scrollbar */ :root[data-theme='dark'] ::-webkit-scrollbar-track { background: #0a1526; } :root[data-theme='dark'] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #0369a1, #1d4ed8); } /* placeholder images fallback tint */ :root[data-theme='dark'] .prod-card .thumb, :root[data-theme='dark'] .cat-card img { background: #0d1b33; }