/* 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); } /* Light mode: increase contrast for generic text (template defaults are very gray). */ html[data-theme="light"] p { color: rgba(31, 41, 55, 0.82) !important; } /* 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; } /* Improve readability: the template sets very light/gray paragraph colors in many places. Use higher-contrast body text in dark mode, and keep muted only where intended. */ html[data-theme="dark"] p { color: rgba(229, 231, 235, 0.78) !important; } /* Hero/banner text must stay readable on the gradient background */ .main-banner .left-content p, .main-banner .header-text p { color: rgba(255, 255, 255, 0.86) !important; } /* Keep meta text slightly muted (still readable) */ .vp-search-meta, .vp-patch-meta, .vp-ticket-meta, .vp-search-hint, .vp-muted { 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; } /* --- FullFix: footer should never turn flat white/gray --- */ footer{ background-color: transparent !important; opacity: 1 !important; } footer::before, footer::after{ opacity: 1 !important; } /* If any global section background bleeds into footer, enforce footer bg image */ footer{ background-image: url(../images/footer-bg.png) !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center top !important; } /* --- FullFix: dropdown toggle should never turn white on active/focus --- */ .account-toggle, .account-toggle:focus, .account-toggle:active{ background: transparent !important; color: inherit !important; outline: none !important; box-shadow: none !important; } .account-dropdown-menu a{ display:flex; align-items:center; justify-content:center; text-align:center; } /* active state like others */ .account-dropdown-menu a.active, .account-dropdown-menu a:hover{ background: rgba(74,140,255,.10) !important; color: #4a8cff !important; } /* Mobile-first fixes (100% mobile support) */ @media (max-width: 992px){ header.header-area .main-nav .nav { flex-wrap: wrap; justify-content: center; gap: 10px; } header.header-area .main-nav .nav li { margin: 0 6px !important; } header.header-area .main-nav .logo img { max-height: 44px; } } @media (max-width: 768px){ .page-wrap{ padding-top: 110px !important; } .discord-card{ padding: 16px !important; } .vp-ticket-grid{ grid-template-columns: 1fr !important; } .vp-modal{ width: calc(100% - 24px) !important; margin: 0 12px !important; max-height: 86vh; overflow:auto; } .vp-thread{ padding: 0; } .vp-thread-reply textarea{ font-size: 14px; } .vp-stats-grid, .stats-grid{ grid-template-columns: 1fr !important; } .vp-card-grid{ grid-template-columns: 1fr !important; } } @media (max-width: 576px){ .section-heading h4{ font-size: 28px; } .vp-pill-tabs{ flex-wrap: wrap; gap: 8px; } .vp-pill{ padding: 10px 14px; } .vp-btn{ width: 100%; } .vp-form-actions{ flex-direction: column; align-items: stretch; gap: 10px; } }