/* Light/Dark theme system for the whole website. Controlled via . */ :root { --vp-bg: #f5f7ff; --vp-text: #1f2937; --vp-muted: #6b7280; --vp-card: #ffffff; --vp-border: rgba(31, 41, 55, 0.10); --vp-shadow: 0 10px 30px rgba(29, 44, 86, 0.12); --vp-pill: #f0f4ff; --vp-input: #f8fafc; --vp-input-text: #111827; --vp-link: #2563eb; } html[data-theme="dark"] { --vp-bg: #0b1220; --vp-text: #e5e7eb; --vp-muted: #9ca3af; --vp-card: #0f1a2b; --vp-border: rgba(229, 231, 235, 0.10); --vp-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); --vp-pill: rgba(255, 255, 255, 0.06); --vp-input: rgba(255, 255, 255, 0.06); --vp-input-text: #e5e7eb; --vp-link: #60a5fa; } body { background: var(--vp-bg) !important; color: var(--vp-text); } /* Cards */ .discord-card, .player-card, .vp-patch-item, .vp-ticket-card { background: var(--vp-card) !important; border: 1px solid var(--vp-border) !important; box-shadow: var(--vp-shadow); } /* Inputs */ .vp-input, input.vp-input, select.vp-input, textarea.vp-input { background: var(--vp-input) !important; color: var(--vp-input-text) !important; border: 1px solid var(--vp-border) !important; } .vp-search-meta, .vp-patch-meta, .vp-ticket-meta { color: var(--vp-muted) !important; } a { color: var(--vp-link); } /* Pills */ .vp-pill { background: var(--vp-pill); border: 1px solid var(--vp-border); } .vp-pill.active { background: linear-gradient(120deg, #1e70ff, #57c2ff); border-color: transparent; color: #fff; } /* Account dropdown background */ .account-dropdown-menu { background: var(--vp-card) !important; border: 1px solid var(--vp-border) !important; } .account-dropdown-menu a { color: var(--vp-text) !important; } /* Quill editor (dark theme readability) */ html[data-theme="dark"] .ql-toolbar.ql-snow, html[data-theme="dark"] .ql-container.ql-snow { border-color: var(--vp-border) !important; } html[data-theme="dark"] .ql-container.ql-snow { background: var(--vp-input) !important; color: var(--vp-text) !important; } /* Template blocks that weren't covered */ .service-item, .team-member, .pricing-item, .client-item, .about-us, .the-clients, .main-banner, #services, #contact, #media { background: transparent; } /* Don't break the template footer background */ footer { background-image: url(../images/footer-bg.png); background-size: cover; background-position: center; } html[data-theme="dark"] footer { /* keep the footer readable in dark mode */ background-blend-mode: multiply; } html[data-theme="dark"] .service-item, html[data-theme="dark"] .team-member, html[data-theme="dark"] .pricing-item, html[data-theme="dark"] .client-item { background: var(--vp-card) !important; border: 1px solid var(--vp-border) !important; box-shadow: var(--vp-shadow) !important; } html[data-theme="dark"] .header-area, html[data-theme="dark"] .header-area.header-sticky, html[data-theme="dark"] .header-area .main-nav { background: rgba(11, 18, 32, 0.90) !important; border-bottom: 1px solid var(--vp-border) !important; } html[data-theme="dark"] .header-area .main-nav .nav li a { color: var(--vp-text) !important; } html[data-theme="dark"] .section-heading h4, html[data-theme="dark"] .section-heading p, html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5 { color: var(--vp-text) !important; } html[data-theme="dark"] p { color: var(--vp-muted) !important; } html[data-theme="dark"] .vp-btn, html[data-theme="dark"] .gradient-button a, html[data-theme="dark"] .white-button a { color: #fff !important; } html[data-theme="dark"] .vp-modal, html[data-theme="dark"] .vp-modal-header { background: var(--vp-card) !important; border-color: var(--vp-border) !important; } html[data-theme="dark"] .vp-modal-title { color: var(--vp-text) !important; }