/* ============================================ C P A N E L S E R V E R S — Dark Mode CSS Triggered by [data-theme="dark"] on or ============================================ */ /* Root palette when dark mode is active */ [data-theme="dark"] cpanel-server { --cpanel-orange: #FF6C2C; --cpanel-bg-dark: #1A2634; --cpanel-dark: #E2E8F0; --cpanel-green: #85B655; --cpanel-gray-text: #A0AEC0; --cs-border: #4A5568; --cs-muted: #A0AEC0; --cs-danger: #FC8181; --cs-primary-700: #e05620; --cs-primary-800: #c7481a; --cs-link: #63b3ed; display: block; color: var(--cpanel-dark); background: var(--cpanel-bg-dark); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; } /* Ensure custom elements behave as blocks */ [data-theme="dark"] cpanel-main, [data-theme="dark"] cpanel-container, [data-theme="dark"] cpanel-billing-toggle, [data-theme="dark"] cpanel-grid, [data-theme="dark"] cpanel-card, [data-theme="dark"] cpanel-compare, [data-theme="dark"] cpanel-extensions, [data-theme="dark"] cpanel-ext-card, [data-theme="dark"] cpanel-faq, [data-theme="dark"] cpanel-faq-item, [data-theme="dark"] cpanel-partner { display: block; } /* Layout */ [data-theme="dark"] cpanel-server cpanel-container { max-width: 1200px; margin: 0 auto; padding: 3rem 1rem; } /* Headings */ [data-theme="dark"] cpanel-server h1, [data-theme="dark"] cpanel-server h2, [data-theme="dark"] cpanel-server h3, [data-theme="dark"] cpanel-server h4, [data-theme="dark"] cpanel-server h5 { font-weight: 600; color: var(--cpanel-dark); } /* Titles */ [data-theme="dark"] cpanel-server .cs-title { text-align: center; font-size: 2.2rem; line-height: 1.2; margin-bottom: 2rem; color: var(--cpanel-dark); } [data-theme="dark"] cpanel-server .cs-section-title { text-align: center; font-size: 1.8rem; margin: 3rem 0 1.5rem; color: var(--cpanel-dark); } /* Buttons */ [data-theme="dark"] cpanel-server .cs-btn { display: inline-block; text-decoration: none; border: 1px solid transparent; cursor: pointer; padding: .7rem 1.1rem; border-radius: .6rem; font-weight: 600; text-align: center; color: var(--cpanel-dark); background: var(--cpanel-card-bg, #2D3748); transition: background .25s, color .25s, border-color .25s, transform .15s; } [data-theme="dark"] cpanel-server .cs-btn:hover { transform: translateY(-1px); } [data-theme="dark"] cpanel-server .cs-btn-primary { border-color: var(--cpanel-orange); color: var(--cpanel-orange); background: transparent; } [data-theme="dark"] cpanel-server .cs-btn-primary.cs-active, [data-theme="dark"] cpanel-server .cs-btn-primary:hover { background: var(--cpanel-orange); color: #1A2634; border-color: var(--cpanel-orange); } [data-theme="dark"] cpanel-server .cs-btn-accent { background: var(--cs-primary-700); color: #fff; border-color: var(--cs-primary-700); } [data-theme="dark"] cpanel-server .cs-btn-accent:hover { background: var(--cs-primary-800); border-color: var(--cs-primary-800); } [data-theme="dark"] cpanel-server .cs-btn-block { width: 100%; } [data-theme="dark"] cpanel-server .cs-btn-small { padding: .5rem .9rem; font-size: .95rem; } /* Billing toggle */ [data-theme="dark"] cpanel-server cpanel-billing-toggle { text-align: center; margin-bottom: 2rem; } [data-theme="dark"] cpanel-server .cs-toggle .cs-btn + .cs-btn { margin-left: .5rem; } /* Cards grid */ [data-theme="dark"] cpanel-server .cs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; margin-bottom: 2.5rem; } [data-theme="dark"] cpanel-server .cs-card { border: 1px solid var(--cs-border); border-radius: 14px; background: var(--cpanel-card-bg, #2D3748); transition: transform .25s, box-shadow .25s, border-color .25s; } [data-theme="dark"] cpanel-server .cs-card:hover { transform: translateY(-4px); box-shadow: 0 8px 22px rgba(0,0,0,.3); border-color: #5A6478; } [data-theme="dark"] cpanel-server .cs-card-title { text-align: center; margin: .25rem 0 1rem; font-size: 1.25rem; color: var(--cpanel-orange); } /* Pricing */ [data-theme="dark"] cpanel-server .cs-price-new { font-size: 2rem; margin: .25rem 0; color: var(--cpanel-orange); font-weight: 700; } [data-theme="dark"] cpanel-server .cs-price-old { font-size: .95rem; color: var(--cs-danger); display: flex; align-items: center; justify-content: center; gap: .5rem; } /* Lists */ [data-theme="dark"] cpanel-server .cs-list li { padding: .35rem 0; font-size: 1rem; color: var(--cpanel-dark); } /* Compare Table */ [data-theme="dark"] cpanel-server .cs-table { width: 100%; border-collapse: collapse; } [data-theme="dark"] cpanel-server .cs-table th, [data-theme="dark"] cpanel-server .cs-table td { padding: .9rem; border-bottom: 1px solid var(--cs-border); text-align: center; color: var(--cpanel-dark); } [data-theme="dark"] cpanel-server .cs-table thead th { background: var(--cpanel-dark-hover, #2D3748); } [data-theme="dark"] cpanel-server .cs-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.05); } /* FAQ */ [data-theme="dark"] cpanel-server .cs-faq { margin-top: 2rem; background: var(--cpanel-dark-hover, #2D3748); padding: 1.25rem; border-radius: 12px; } [data-theme="dark"] cpanel-server .cs-accordion { border: 1px solid var(--cs-border); border-radius: 10px; background: var(--cpanel-card-bg, #2D3748); margin-bottom: .75rem; overflow: hidden; } [data-theme="dark"] cpanel-server .cs-accordion-head { background: transparent; border: 0; padding: 1rem 1.1rem; cursor: pointer; font-weight: 600; color: var(--cpanel-dark); } [data-theme="dark"] cpanel-server .cs-accordion-head:hover { background: #2A3445; } [data-theme="dark"] cpanel-server .cs-accordion-body { display: none; padding: 0 1.1rem 1rem; color: var(--cpanel-dark); } [data-theme="dark"] cpanel-server .cs-accordion.cs-open .cs-accordion-body { display: block; } /* Partner section */ [data-theme="dark"] cpanel-server .cs-partner { text-align: center; padding: 2.5rem 1rem; } [data-theme="dark"] cpanel-server .cs-lead { max-width: 800px; margin: 0 auto 1.25rem; font-size: 1.125rem; color: var(--cpanel-dark); } /* Links */ [data-theme="dark"] cpanel-server a { color: var(--cs-link); } [data-theme="dark"] cpanel-server a:hover { text-decoration: underline; } /* Background utility */ [data-theme="dark"] cpanel-server .bg-light-custom { background: var(--cpanel-dark-hover, #2D3748); } /* Responsive */ @media (max-width: 480px) { [data-theme="dark"] cpanel-server .cs-title { font-size: 1.7rem; } [data-theme="dark"] cpanel-server .cs-price-new { font-size: 1.7rem; } } /* End of Cpanel Servers Design section - darkmode */