/* Hostrizz – Dark Theme Overrides Enable by adding class="theme-dark" on OR any top-level wrapper. Palette: background #000; text & borders #D9D9D9; hover text ~ #EFEFEF. */ .theme-dark, .theme-dark body { background: #000 !important; color: #D9D9D9 !important; } /* Universal text & border defaults */ .theme-dark *, .theme-dark *::before, .theme-dark *::after { border-color: #D9D9D9 !important; color-scheme: dark; } /* Headings keep weight but use light grey */ .theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 { color: #D9D9D9 !important; } /* Links */ .theme-dark a { color: #D9D9D9 !important; text-decoration-color: rgba(217,217,217,.6); } .theme-dark a:hover, .theme-dark a:focus { color: #EFEFEF !important; text-decoration-color: rgba(239,239,239,.9); } /* Horizontal rules & subtle separators that used #eee/#e6e6e6 */ .theme-dark .table-row, .theme-dark .data-row, .theme-dark .nameserver-block, .theme-dark .footer-columns, .theme-dark .table-cell, .theme-dark .table-header { border-top-color: #3a3a3a !important; } .theme-dark .rizz-footer .footer-columns { border-bottom-color: #3a3a3a !important; } /* ----- Header / Navbar ----- */ .theme-dark header.desktop-header .header-icons a { color: #D9D9D9 !important; } .theme-dark header.desktop-header .header-icons a:hover { color: #EFEFEF !important; } .theme-dark .navbar-desktop, .theme-dark .dash-navbar { border-top-color: #D9D9D9 !important; border-bottom-color: #D9D9D9 !important; } .theme-dark .navbar-desktop a, .theme-dark .dash-navbar a { color: #D9D9D9 !important; } .theme-dark .navbar-desktop a:hover, .theme-dark .dash-navbar a:hover { color: #EFEFEF !important; text-decoration: underline !important; } /* ----- Search / Inputs / Selects ----- */ .theme-dark input[type="text"], .theme-dark input[type="email"], .theme-dark input[type="password"], .theme-dark select.input-field, .theme-dark .input-field, .theme-dark .emailinput-field, .theme-dark .full_width_input, .theme-dark .ns-edit input { background: #000 !important; color: #D9D9D9 !important; border: 2px solid #D9D9D9 !important; } /* native select chevron (SVG) becomes light */ .theme-dark select.input-field { background-image: url('data:image/svg+xml;utf8,') !important; } /* ----- Buttons (primary & groups) ----- */ .theme-dark .button-group button, .theme-dark .order-btn, .theme-dark .checkout-form button, .theme-dark .action-btn, .theme-dark .quick-action-card, .theme-dark .admin-quick-action-card { background: #000 !important; color: #D9D9D9 !important; border: 1px solid #D9D9D9 !important; } .theme-dark .button-group button:hover, .theme-dark .order-btn:hover:enabled, .theme-dark .checkout-form button:hover, .theme-dark .action-btn:hover, .theme-dark .quick-action-card:hover, .theme-dark .admin-quick-action-card:hover { background: #111 !important; color: #EFEFEF !important; border-color: #EFEFEF !important; } /* Added-state buttons */ .theme-dark .button-group button.added { background: #0f3d0f !important; border-color: #5fbf5f !important; color: #D9D9D9 !important; } .theme-dark .button-group button.added:hover { background: #135313 !important; } /* ----- Cards / Boxes / Tables ----- */ .theme-dark .package-box, .theme-dark .credentials-container, .theme-dark .credential-card, .theme-dark .dashboard-columns, .theme-dark .three-column-table, .theme-dark .domains-table, .theme-dark .domain-item, .theme-dark .cart-summary, .theme-dark .domain-pricing-container, .theme-dark .site-footer, .theme-dark .rizz-footer, .theme-dark .cookie-banner, .theme-dark .cookie-modal-content, .theme-dark .card { background: #000 !important; color: #D9D9D9 !important; border-color: #D9D9D9 !important; } /* table headers that used light grey background */ .theme-dark .table-header, .theme-dark .domain-pricing-table th, .theme-dark .dashboard-columns { background: #0E0E0E !important; } /* table rows hover */ .theme-dark .domain-pricing-table tr:hover, .theme-dark .table-row:hover { background: #0F0F0F !important; } /* subtle tags */ .theme-dark .status.inactive { background: #0F0F0F !important; color: #9a9a9a !important; } .theme-dark .status.in-process { background: #221f00 !important; color: #d6c76a !important; } .theme-dark .status.active { background: #07210a !important; color: #7adf8c !important; } /* Pencil/edit icons and misc icons */ .theme-dark i, .theme-dark .nameserver-block i.fa-pencil-alt, .theme-dark .nameserver-cell i.fa-pencil-alt, .theme-dark .edit-ns-btn { color: #D9D9D9 !important; } .theme-dark .nameserver-block i.fa-pencil-alt:hover, .theme-dark .nameserver-cell i.fa-pencil-alt:hover, .theme-dark .edit-ns-btn:hover { color: #EFEFEF !important; } /* ----- Footer (both .site-footer and rizz-footer) ----- */ .theme-dark .site-footer { background: #000 !important; color: #D9D9D9 !important; border-top: 1px solid #D9D9D9 !important; } .theme-dark .footer-column h4 { color: #D9D9D9 !important; } .theme-dark .footer-column ul li a { color: #D9D9D9 !important; } .theme-dark .footer-column ul li a:hover { color: #EFEFEF !important; } .theme-dark .footer-social a { color: #D9D9D9 !important; } .theme-dark .footer-social a:hover { color: #EFEFEF !important; } .theme-dark .footer-copy { color: #BDBDBD !important; } /* Rizz footer specifics */ .theme-dark .rizz-footer { color: #D9D9D9 !important; } .theme-dark .rizz-footer .footer-bottom { background: #000 !important; color: #BDBDBD !important; } .theme-dark .rizz-footer .footer-bottom a { color: #D9D9D9 !important; } .theme-dark .rizz-footer .footer-bottom a:hover { color: #EFEFEF !important; } /* ----- Mobile header / navbar ----- */ .theme-dark .mobile-header { background: #000 !important; color: #D9D9D9 !important; } .theme-dark .mobile-header .menu-toggle, .theme-dark .mobile-header .user-icon { color: #D9D9D9 !important; } .theme-dark nav.mobile-navbar { background: #000 !important; color: #D9D9D9 !important; } .theme-dark .nav-links a { color: #D9D9D9 !important; } .theme-dark .nav-links a:hover { color: #EFEFEF !important; background: #101010 !important; } .theme-dark .nav-footer { background: #000 !important; border-top-color: #3a3a3a !important; } .theme-dark .footer-btn { background: #000 !important; color: #D9D9D9 !important; border: 1px solid #D9D9D9 !important; } .theme-dark .footer-btn:hover { background: #111 !important; color: #EFEFEF !important; border-color: #EFEFEF !important; } .theme-dark .footer-btn.register { background: #000 !important; color: #D9D9D9 !important; border-color: #D9D9D9 !important; } .theme-dark .footer-btn.register:hover { background: #111 !important; color: #EFEFEF !important; border-color: #EFEFEF !important; } .theme-dark .footer-btn.logout { background: #7a1a1a !important; color: #fff !important; } .theme-dark .footer-btn.logout:hover { background: #8f1f1f !important; } /* ----- Cookie banner / modal ----- */ .theme-dark .cookie-banner { background: #0B0B0B !important; border-top: 1px solid #2b2b2b !important; color: #D9D9D9 !important; } .theme-dark .cookie-banner a { color: #EFEFEF !important; } .theme-dark .cookie-actions button { background: #000 !important; color: #D9D9D9 !important; border: 1px solid #D9D9D9 !important; } .theme-dark .cookie-actions button:hover { background: #111 !important; color: #EFEFEF !important; border-color: #EFEFEF !important; } .theme-dark .cookie-modal { background: rgba(0,0,0,0.6) !important; } .theme-dark .cookie-modal-content { background: #000 !important; border: 1px solid #D9D9D9 !important; color: #D9D9D9 !important; } .theme-dark .cookie-modal-content button { background: #000 !important; border: 1px solid #D9D9D9 !important; color: #D9D9D9 !important; } .theme-dark .cookie-modal-content button:hover { background: #111 !important; color: #EFEFEF !important; border-color: #EFEFEF !important; } /* ----- Pagination & minor UI ----- */ .theme-dark .pagination a { color: #D9D9D9 !important; } .theme-dark .pagination a:hover { color: #EFEFEF !important; } /* ----- Swiper arrows ----- */ .theme-dark .swiper-button-prev, .theme-dark .swiper-button-next { color: #D9D9D9 !important; } /* ----- Misc text that explicitly used black in light CSS ----- */ .theme-dark .header-icons a, .theme-dark .edit-ns, .theme-dark .table-cell a, .theme-dark .nameserver-block i.fa-pencil-alt, .theme-dark .column a i.fa-pencil-alt { color: #D9D9D9 !important; } .theme-dark .table-cell a:hover { color: #EFEFEF !important; } /* === Dark Theme Buttons with Radial Gradient (Border on Hover) === */ .theme-dark .button-group button, .theme-dark .order-btn, .theme-dark .checkout-form button, .theme-dark .action-btn, .theme-dark .quick-action-card, .theme-dark .admin-quick-action-card { background: radial-gradient(circle at 50% 50%, #000000, #555555) !important; color: #D9D9D9 !important; border: none !important; /* no border by default */ transition: all 0.2s ease-in-out !important; } .theme-dark .button-group button:hover, .theme-dark .order-btn:hover:enabled, .theme-dark .checkout-form button:hover, .theme-dark .action-btn:hover, .theme-dark .quick-action-card:hover, .theme-dark .admin-quick-action-card:hover { background: radial-gradient(circle at 50% 50%, #111111, #666666) !important; color: #EFEFEF !important; border: 1px solid #EFEFEF !important; /* border appears on hover */ } /* === Rizz Footer — Dark Theme Full Support === */ .theme-dark .rizz-footer { background: #000 !important; color: #D9D9D9 !important; border-top: 1px solid #3a3a3a !important; } .theme-dark .rizz-footer .footer-columns { background: #000 !important; border-bottom: 1px solid #3a3a3a !important; } .theme-dark .rizz-footer .footer-column { background: #000 !important; } .theme-dark .rizz-footer .footer-column h4 { color: #D9D9D9 !important; } .theme-dark .rizz-footer .footer-column ul li a { color: #BDBDBD !important; transition: color 0.2s ease-in-out; } .theme-dark .rizz-footer .footer-column ul li a:hover { color: #EFEFEF !important; } /* Optional: social icons & small print */ .theme-dark .rizz-footer .footer-social a { color: #D9D9D9 !important; } .theme-dark .rizz-footer .footer-social a:hover { color: #EFEFEF !important; } .theme-dark .rizz-footer .footer-copy { color: #9A9A9A !important; }