/* ============================================================ Cyber Aura — Global Dark Theme (всі сторінки) Застосовується через .dark-page на ============================================================ */ /* ── CSS Variable overrides ─────────────────────────────────── */ .dark-page { --color-bg: #09090f; --color-text-primary: #e5e7eb; --color-text-muted: #9ca3af; --color-border: rgba(124,58,237,0.2); --shadow-card: 0 2px 16px rgba(0,0,0,0.5); --shadow-card-hover: 0 8px 32px rgba(0,0,0,0.6); background: #09090f; color: #e5e7eb; } /* ── CA Logo ─────────────────────────────────────────────────── */ /* Знак бренду — растровий логотип із прозорим тлом */ .ca-logo-mark { flex-shrink: 0; display: block; height: 38px; width: auto; object-fit: contain; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.35)); transition: filter var(--transition, 0.2s ease); } .logo:hover .ca-logo-mark { filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.55)); } /* Напис — срібно-білий, як на оригінальному логотипі */ .ca-logo-text { display: flex; flex-direction: column; line-height: 1; gap: 2px; } .ca-cyber { font-family: 'Rajdhani', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase; color: #cfd3da; } .ca-aura { font-family: 'Rajdhani', sans-serif; font-size: 21px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; background: linear-gradient(180deg, #ffffff 0%, #ffffff 45%, #b9bfc9 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Підвал — знак трохи менший */ .footer .ca-logo-mark { height: 32px; } @media (max-width: 768px) { .ca-logo-mark { height: 30px; } .ca-cyber { font-size: 9px; letter-spacing: 3px; } .ca-aura { font-size: 17px; letter-spacing: 2px; } } /* ── Header ──────────────────────────────────────────────────── */ .dark-page .header { background: rgba(9,9,18,0.97) !important; border-bottom: 1px solid rgba(124,58,237,0.25) !important; box-shadow: none !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .dark-page .logo { text-decoration: none; } .dark-page .logo-gaming { color: #9ca3af !important; } .dark-page .logo-aura { background: linear-gradient(90deg,#a855f7,#06B6D4) !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; } .dark-page .nav-link { color: #c4c4d4 !important; } .dark-page .nav-link:hover { color: #fff !important; background: rgba(124,58,237,0.08) !important; } .dark-page .nav-link.active { color: #fff !important; background: transparent !important; border-bottom: 2px solid #a855f7 !important; } .dark-page .catalog-btn { background: #7C3AED !important; color: #fff !important; } .dark-page .header-search { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.25) !important; border-radius: 8px !important; } .dark-page .search-input { background: transparent !important; color: #e5e7eb !important; } .dark-page .search-input::placeholder { color: #6b7280 !important; } .dark-page .search-icon { color: #6b7280 !important; } .dark-page .search-clear { color: #6b7280 !important; } .dark-page .header-action-btn { color: #c4c4d4 !important; } .dark-page .header-action-btn:hover { color: #fff !important; background: rgba(124,58,237,0.12) !important; } .dark-page .action-badge { background: #a855f7 !important; } .dark-page .burger-btn span { background: #c4c4d4 !important; } /* Mega menu dark */ .dark-page .mega-menu { background: #0d0d1c !important; border-bottom: 1px solid rgba(124,58,237,0.2) !important; } .dark-page .mega-col-title { color: #fff !important; } .dark-page .mega-link { color: #9ca3af !important; } .dark-page .mega-link:hover { color: #a855f7 !important; } /* Mobile menu dark */ .dark-page .mobile-menu { background: #0e0e1e !important; border-right: 1px solid rgba(124,58,237,0.2) !important; } .dark-page .mobile-menu-overlay { background: rgba(0,0,0,0.7) !important; } .dark-page .mobile-nav-item { color: #c4c4d4 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; } .dark-page .mobile-nav-item:hover { color: #fff !important; background: rgba(168,85,247,0.08) !important; } .dark-page .mobile-nav-section { color: #6b7280 !important; } /* ── Breadcrumbs ─────────────────────────────────────────────── */ .dark-page .breadcrumbs { color: #6b7280 !important; } .dark-page .breadcrumbs a { color: #9ca3af !important; } .dark-page .breadcrumbs a:hover { color: #a855f7 !important; } .dark-page .breadcrumbs-sep { color: #4b5563 !important; } /* ── Typography ──────────────────────────────────────────────── */ .dark-page h1, .dark-page h2, .dark-page h3, .dark-page h4, .dark-page h5 { color: #fff !important; } .dark-page p { color: #9ca3af; } .dark-page .section-title { color: #fff !important; } .dark-page .section { background: #09090f; } .dark-page .page-content { background: #09090f; } /* ── Buttons ─────────────────────────────────────────────────── */ .dark-page .btn-primary { background: #7C3AED !important; border-color: #7C3AED !important; color: #fff !important; } .dark-page .btn-primary:hover { background: #6D28D9 !important; } .dark-page .btn-secondary { background: rgba(124,58,237,0.15) !important; border-color: rgba(124,58,237,0.4) !important; color: #a855f7 !important; } .dark-page .btn-secondary:hover { background: rgba(124,58,237,0.25) !important; color: #fff !important; } .dark-page .btn-ghost { background: transparent !important; border-color: rgba(124,58,237,0.35) !important; color: #c4c4d4 !important; } .dark-page .btn-ghost:hover { border-color: #a855f7 !important; color: #fff !important; } .dark-page .btn-outline { border-color: rgba(124,58,237,0.4) !important; color: #a855f7 !important; } .dark-page .btn-outline:hover { background: rgba(124,58,237,0.15) !important; color: #fff !important; } /* ── Forms ───────────────────────────────────────────────────── */ .dark-page input:not([type=checkbox]):not([type=radio]), .dark-page select, .dark-page textarea { background: #0d0d1c !important; border-color: rgba(124,58,237,0.25) !important; color: #e5e7eb !important; } .dark-page input:focus, .dark-page select:focus, .dark-page textarea:focus { border-color: #a855f7 !important; box-shadow: 0 0 0 2px rgba(168,85,247,0.15) !important; } .dark-page input::placeholder, .dark-page textarea::placeholder { color: #4b5563 !important; } .dark-page label { color: #c4c4d4 !important; } .dark-page .form-input { background: #0d0d1c !important; border-color: rgba(124,58,237,0.25) !important; color: #e5e7eb !important; } .dark-page .form-input:focus { border-color: #a855f7 !important; } .dark-page .form-label { color: #c4c4d4 !important; } .dark-page .form-hint { color: #6b7280 !important; } .dark-page .form-select { background: #0d0d1c url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center !important; color: #e5e7eb !important; border-color: rgba(124,58,237,0.25) !important; } /* ── Product Cards (Catalog, Wishlist, Search) ───────────────── */ .dark-page .product-card { background: #0e0e1e !important; border: 1px solid rgba(124,58,237,0.15) !important; } .dark-page .product-card:hover { border-color: rgba(168,85,247,0.45) !important; box-shadow: 0 8px 32px rgba(124,58,237,0.2) !important; transform: translateY(-3px); } .dark-page .product-card__image-wrap { background: #080812 !important; } .dark-page .product-card__name { color: #e5e7eb !important; } .dark-page .product-card__specs { color: #6b7280 !important; } .dark-page .product-card__price { color: #fff !important; } .dark-page .product-card__old-price { color: #4b5563 !important; } .dark-page .product-card__body { border-color: rgba(255,255,255,0.05) !important; } .dark-page .product-card__footer { border-top-color: rgba(255,255,255,0.05) !important; } .dark-page .wish-btn { background: rgba(9,9,18,0.8) !important; border-color: rgba(255,255,255,0.1) !important; color: #9ca3af !important; } .dark-page .wish-btn:hover, .dark-page .wish-btn.active { color: #f43f5e !important; } .dark-page .wish-btn.active svg { fill: #f43f5e !important; } /* ── Catalog Page ────────────────────────────────────────────── */ .dark-page .catalog-page { background: #09090f !important; } .dark-page .catalog-layout > aside, .dark-page .catalog-sidebar { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .filter-section-title, .dark-page .filter-group-title { color: #fff !important; font-size: 13px !important; } .dark-page .filter-group { border-bottom-color: rgba(124,58,237,0.1) !important; } .dark-page .filter-option { color: #c4c4d4 !important; } .dark-page .filter-option:hover { color: #fff !important; } .dark-page .filter-option input[type=checkbox] { accent-color: #a855f7 !important; } .dark-page .catalog-toolbar { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 8px !important; padding: 10px 14px !important; } .dark-page .sort-select { background: #0d0d1c !important; border-color: rgba(124,58,237,0.25) !important; color: #e5e7eb !important; } .dark-page .view-btn { color: #6b7280 !important; } .dark-page .view-btn.active, .dark-page .view-btn:hover { color: #a855f7 !important; background: rgba(168,85,247,0.1) !important; } .dark-page .catalog-cat-btn { background: #0d0d1c !important; border-color: rgba(124,58,237,0.2) !important; color: #c4c4d4 !important; } .dark-page .catalog-cat-btn:hover, .dark-page .catalog-cat-btn.active { background: rgba(124,58,237,0.2) !important; border-color: #a855f7 !important; color: #fff !important; } .dark-page .category-header { background: #0d0d1c !important; border-radius: 10px !important; } .dark-page .category-header__name { color: #fff !important; } .dark-page .empty-state { color: #6b7280 !important; } .dark-page .empty-state h3 { color: #9ca3af !important; } /* ── Cart Page ───────────────────────────────────────────────── */ .dark-page .cart-item { background: #0e0e1e !important; border: 1px solid rgba(124,58,237,0.15) !important; } .dark-page .cart-item__name { color: #e5e7eb !important; } .dark-page .cart-item__price { color: #fff !important; } .dark-page .cart-item__specs { color: #6b7280 !important; } .dark-page .qty-btn { background: #0d0d1c !important; border-color: rgba(124,58,237,0.2) !important; color: #e5e7eb !important; } .dark-page .qty-input { background: transparent !important; color: #fff !important; border-color: rgba(124,58,237,0.2) !important; } .dark-page .cart-remove-btn { color: #6b7280 !important; } .dark-page .cart-remove-btn:hover { color: #f43f5e !important; } .dark-page .cart-summary { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .cart-summary h3 { color: #fff !important; } .dark-page .summary-row { color: #9ca3af !important; border-bottom-color: rgba(255,255,255,0.05) !important; } .dark-page .summary-total { color: #fff !important; } .dark-page .summary-delivery { color: #22c55e !important; } .dark-page .promo-input { background: #0d0d1c !important; border-color: rgba(124,58,237,0.25) !important; color: #e5e7eb !important; } .dark-page .cart-empty-state { color: #6b7280 !important; } /* ── Checkout Page ───────────────────────────────────────────── */ .dark-page .checkout-page { background: #09090f !important; } .dark-page .checkout-block, .dark-page .checkout-step { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .checkout-block h3 { color: #fff !important; } .dark-page .checkout-block h3 span { background: #7C3AED !important; } .dark-page .checkout-step-title { color: #fff !important; } .dark-page .delivery-option { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.2) !important; } .dark-page .delivery-option:hover, .dark-page .delivery-option.active { border-color: #a855f7 !important; background: rgba(124,58,237,0.1) !important; } .dark-page .delivery-option label { color: #e5e7eb !important; } .dark-page .delivery-option span { color: #6b7280 !important; } .dark-page .order-summary, .dark-page .checkout-order-block { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; } .dark-page .order-item-name { color: #e5e7eb !important; } .dark-page .order-item-price { color: #fff !important; } .dark-page .order-total-row { color: #fff !important; border-top-color: rgba(124,58,237,0.2) !important; } /* ── Product Detail Page ─────────────────────────────────────── */ .dark-page .product-gallery { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .product-gallery__thumb { border-color: rgba(124,58,237,0.15) !important; background: #080812 !important; } .dark-page .product-gallery__thumb.active { border-color: #a855f7 !important; } .dark-page .product-gallery__main { background: #080812 !important; } .dark-page .product-title { color: #fff !important; } .dark-page .product-price { color: #fff !important; } .dark-page .product-old-price { color: #4b5563 !important; } .dark-page .product-rating-count { color: #6b7280 !important; } .dark-page .product-badge-row .badge { background: rgba(124,58,237,0.15) !important; color: #a855f7 !important; } .dark-page .product-buy-section { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .product-tabs { border-bottom-color: rgba(124,58,237,0.15) !important; } .dark-page .tab-btn { color: #9ca3af !important; } .dark-page .tab-btn.active { color: #fff !important; border-bottom-color: #a855f7 !important; } .dark-page .product-specs { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .product-specs td { color: #c4c4d4 !important; border-bottom-color: rgba(124,58,237,0.08) !important; } .dark-page .product-specs td:first-child { color: #6b7280 !important; } .dark-page .product-description { color: #9ca3af !important; } .dark-page .product-availability-in { color: #22c55e !important; } .dark-page .product-availability-out { color: #f43f5e !important; } /* ── Blog Page ───────────────────────────────────────────────── */ .dark-page .blog-card { background: #0e0e1e !important; border: 1px solid rgba(124,58,237,0.15) !important; } .dark-page .blog-card:hover { border-color: rgba(168,85,247,0.4) !important; transform: translateY(-3px); box-shadow: 0 8px 28px rgba(124,58,237,0.15) !important; } .dark-page .blog-card__title { color: #e5e7eb !important; } .dark-page .blog-card__title:hover { color: #a855f7 !important; } .dark-page .blog-card__excerpt { color: #9ca3af !important; } .dark-page .blog-card__meta { color: #6b7280 !important; } .dark-page .blog-card__tag { background: rgba(124,58,237,0.15) !important; color: #a855f7 !important; } .dark-page .blog-post-content { color: #c4c4d4 !important; } .dark-page .blog-post-content h2, .dark-page .blog-post-content h3 { color: #fff !important; } /* ── Contacts Page ───────────────────────────────────────────── */ .dark-page .contact-card, .dark-page .contact-block, .dark-page .contacts-card { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .contact-card h3 { color: #fff !important; } .dark-page .contact-card p { color: #9ca3af !important; } .dark-page .contact-card a { color: #a855f7 !important; } .dark-page .contact-icon-wrap { background: rgba(124,58,237,0.15) !important; } .dark-page .map-block { border-color: rgba(124,58,237,0.2) !important; } /* ── Delivery / Warranty / Info Pages ───────────────────────── */ .dark-page .delivery-card, .dark-page .info-card, .dark-page .warranty-card, .dark-page .info-block { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; border-radius: 10px !important; } .dark-page .delivery-card h3 { color: #fff !important; } .dark-page .delivery-card p { color: #9ca3af !important; } .dark-page .delivery-card ul li { color: #9ca3af !important; } .dark-page .delivery-card ul li::before { color: #a855f7 !important; } .dark-page .info-card h3, .dark-page .info-block h3 { color: #fff !important; } .dark-page .info-card p { color: #9ca3af !important; } .dark-page .payment-method-card { background: #0d0d1c !important; border: 1px solid rgba(124,58,237,0.15) !important; } /* ── Wishlist Page ───────────────────────────────────────────── */ .dark-page .wishlist-empty { color: #6b7280 !important; } .dark-page .wishlist-empty h2 { color: #9ca3af !important; } /* ── Search Page ─────────────────────────────────────────────── */ .dark-page .search-hero { background: #0d0d1c !important; } .dark-page .search-result-count { color: #9ca3af !important; } /* ── Tables ──────────────────────────────────────────────────── */ .dark-page table { border-color: rgba(124,58,237,0.1) !important; } .dark-page th { background: #0d0d1c !important; color: #9ca3af !important; border-color: rgba(124,58,237,0.1) !important; } .dark-page td { color: #c4c4d4 !important; border-color: rgba(124,58,237,0.07) !important; } .dark-page tr:hover td { background: rgba(124,58,237,0.04) !important; } /* ── Dividers / Separators ───────────────────────────────────── */ .dark-page hr { border-color: rgba(124,58,237,0.15) !important; } .dark-page .divider { background: rgba(124,58,237,0.15) !important; } /* ── Trust bar (shared) ─────────────────────────────────────── */ .dark-page .trust-bar { background: #0d0d1c !important; border-color: rgba(124,58,237,0.15) !important; } .dark-page .trust-item { border-right-color: rgba(124,58,237,0.1) !important; } .dark-page .trust-item strong { color: #fff !important; } .dark-page .trust-item span { color: #6b7280 !important; } .dark-page .trust-icon { background: rgba(124,58,237,0.12) !important; color: #a855f7 !important; border-color: rgba(124,58,237,0.2) !important; } /* ── Pagination ──────────────────────────────────────────────── */ .dark-page .pagination-btn { background: #0d0d1c !important; border-color: rgba(124,58,237,0.2) !important; color: #c4c4d4 !important; } .dark-page .pagination-btn:hover, .dark-page .pagination-btn.active { background: #7C3AED !important; border-color: #7C3AED !important; color: #fff !important; } /* ── Alerts / Toasts ─────────────────────────────────────────── */ .dark-page .alert-success { background: rgba(34,197,94,0.1) !important; border-color: rgba(34,197,94,0.3) !important; color: #22c55e !important; } .dark-page .alert-error { background: rgba(244,63,94,0.1) !important; border-color: rgba(244,63,94,0.3) !important; color: #f43f5e !important; } .dark-page .alert-info { background: rgba(124,58,237,0.1) !important; border-color: rgba(124,58,237,0.3) !important; color: #a855f7 !important; } /* ── Scroll bar ──────────────────────────────────────────────── */ .dark-page ::-webkit-scrollbar { width: 6px; height: 6px; } .dark-page ::-webkit-scrollbar-track { background: #0d0d1c; } .dark-page ::-webkit-scrollbar-thumb { background: rgba(124,58,237,0.4); border-radius: 3px; } .dark-page ::-webkit-scrollbar-thumb:hover { background: #a855f7; } /* ── Footer ──────────────────────────────────────────────────── */ .dark-page .footer { background: #07070f !important; border-top: 1px solid rgba(124,58,237,0.2) !important; color: #9ca3af !important; } .dark-page .footer h4 { color: #fff !important; } .dark-page .footer p { color: #9ca3af !important; } .dark-page .footer-links a { color: #9ca3af !important; } .dark-page .footer-links a:hover { color: #a855f7 !important; } .dark-page .footer-bottom { border-top-color: rgba(255,255,255,0.06) !important; color: #4b5563 !important; } .dark-page .payment-icon { background: rgba(255,255,255,0.06) !important; color: #9ca3af !important; border: 1px solid rgba(255,255,255,0.08) !important; } .dark-page .social-btn { background: rgba(255,255,255,0.05) !important; color: #9ca3af !important; border-color: rgba(255,255,255,0.08) !important; } .dark-page .social-btn:hover { background: rgba(168,85,247,0.15) !important; color: #a855f7 !important; border-color: rgba(168,85,247,0.3) !important; }