* { margin: 0; padding: 0; box-sizing: border-box; } /* Final override: force header action buttons to purple in all themes This is placed at the end of the stylesheet so it overrides earlier rules that set header buttons to dark/light backgrounds. */ .navbar .header-actions a.btn, .navbar .header-actions .btn, html .navbar .header-actions a.btn, html .navbar .header-actions .btn, html[data-theme="light"] .navbar .header-actions a.btn, html[data-theme="light"] .navbar .header-actions .btn { background: rgb(var(--accent-rgb)) !important; /* purple */ color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; border: none !important; text-decoration: none !important; box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.2) !important; } .navbar .header-actions a.btn:hover, .navbar .header-actions .btn:hover, html .navbar .header-actions a.btn:hover, html .navbar .header-actions .btn:hover, html[data-theme="light"] .navbar .header-actions a.btn:hover, html[data-theme="light"] .navbar .header-actions .btn:hover { background: rgb(var(--accent-rgb)) !important; transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(var(--accent-rgb), 0.25) !important; color: #ffffff !important; text-decoration: none !important; } .pricing-tabs { display: flex; flex-direction: column; gap: 2rem; width: 100%; } .tab-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 2rem; padding: 0.5rem; } .tab-button { padding: 0.75rem 1.5rem; background: transparent; color: rgb(var(--accent-rgb)); border: none; border-radius: 8px; cursor: pointer; font-weight: 600; transition: all 0.3s ease; text-decoration: none !important; box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.1) !important; } .tab-button:hover { background: rgb(var(--accent-rgb)) !important; color: #ffffff !important; transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(var(--accent-rgb), 0.25) !important; } .tab-button.active { background: rgb(var(--accent-rgb)) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.2) !important; } :root { --purple-900: #3d1b5c; --purple-800: #4a1d73; --purple-700: #5a2089; --purple-600: #6b26a0; --purple-500: #7c2db7; --purple-400: #8d35ce; --purple-300: #a855f7; --purple-200: #c084fc; --purple-100: #e9d5ff; --dark-900: #0a0a0f; --dark-800: #12121a; --dark-700: #1a1a27; --dark-600: #232333; --dark-500: #2d2d40; --white: #ffffff; --gray-100: #f5f5f7; --gray-200: #e5e5ea; --gray-300: #d1d1d6; --gray-400: #aeaeb2; --gray-500: #8e8e93; /* Overlay/glass variables used for theme-safe translucent surfaces */ --overlay: rgba(10, 10, 15, 0.8); --overlay-strong: rgba(10, 10, 15, 0.95); --overlay-light: rgba(255,255,255,0.98); --glass: rgba(255, 255, 255, 0.1); --glass-strong: rgba(255, 255, 255, 0.15); --accent-rgb: 107, 38, 160; /* used as rgba(var(--accent-rgb), a) */ --accent2-rgb: 140, 53, 206; } /* Light theme overrides (applied when data-theme="light" on ) */ [data-theme="light"] { --dark-900: #ffffff; --dark-800: #f7f7f9; --dark-700: #efeff2; --dark-600: #e6e6ea; --dark-500: #dcdde1; --white: #0b0b0f; /* text color in light mode */ --gray-100: #f5f5f7; --gray-200: #e5e5ea; --gray-300: #6b6b74; --gray-400: #8a8a90; --gray-500: #a0a0a6; /* Slightly darker purples for contrast on light backgrounds */ --purple-600: #5a1e8a; --purple-400: #7a35c8; /* Override translucent surfaces for light theme */ --overlay: rgba(255,255,255,0.92); --overlay-strong: rgba(255,255,255,0.98); --overlay-light: rgba(255,255,255,0.98); --glass: rgba(0,0,0,0.06); --glass-strong: rgba(0,0,0,0.08); } /* Light-mode component overrides for elements using hard-coded rgba colors */ [data-theme="light"] .navbar { background: var(--overlay); border-bottom: 1px solid rgba(var(--accent-rgb), 0.06); } [data-theme="light"] .navbar.scrolled { background: var(--overlay-strong); box-shadow: 0 4px 30px rgba(var(--accent-rgb), 0.06); } [data-theme="light"] .nav-links[style], [data-theme="light"] .nav-links.active { background: var(--overlay-strong); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-bottom: 1px solid rgba(var(--accent-rgb), 0.06); } [data-theme="light"] .btn, [data-theme="light"] .btn:link, [data-theme="light"] .btn:visited, [data-theme="light"] .btn:hover, [data-theme="light"] .btn:active { background: var(--accent) !important; color: #ffffff !important; border: none !important; text-decoration: none !important; } [data-theme="light"] .mobile-menu-btn span { background: var(--white); } /* Additional light-mode overrides for component backgrounds, text, and controls */ [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5, [data-theme="light"] h6 { color: #1a1a1a !important; } [data-theme="light"] .section-header .section-title { color: #1a1a1a !important; } [data-theme="light"] .section-header .section-subtitle { color: #666666 !important; } [data-theme="light"] p, [data-theme="light"] li, [data-theme="light"] .muted, [data-theme="light"] .lead { color: var(--gray-300); } /* Make nav links clearly readable on light backgrounds */ [data-theme="light"] .nav-link { color: var(--white); } [data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: var(--purple-600); } /* Hero: use dark text in light theme (disable gradient text clip) */ [data-theme="light"] .hero-title { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: initial !important; color: var(--dark-900) !important; } [data-theme="light"] .hero-subtitle { color: var(--dark-800) !important; opacity: 0.9; } /* Ensure header action buttons readable in light theme */ [data-theme="light"] .header-actions .btn { color: var(--white); } [data-theme="light"] .header-actions .btn.btn-primary { color: var(--white) !important; /* ensure primary buttons use dark text in light theme */ } /* Theme toggle: center icon and remove extra margin when label hidden */ #themeToggle { width: 44px; height: 44px; padding: 0.5rem; display: inline-flex; align-items: center; justify-content: center; } #themeToggle .fav-icon { margin-right: 0; width: 1em; text-align: center; } /* Make theme toggle icon black in light mode */ html[data-theme="light"] #themeToggle, html[data-theme="light"] #themeToggle i { color: #000000 !important; -webkit-text-fill-color: #000000 !important; } /* If the toggle has a visible label, keep spacing consistent */ #themeToggle .btn-label { display: none; } /* Force correct icon visibility based on data-theme attribute so icon always matches theme (this complements the JS toggle which also swaps classes). */ html[data-theme="light"] #themeToggle .fa-moon { display: none !important; } html[data-theme="light"] #themeToggle .fa-sun { display: inline-block !important; } html:not([data-theme="light"]) #themeToggle .fa-sun { display: none !important; } html:not([data-theme="light"]) #themeToggle .fa-moon { display: inline-block !important; } /* Cards and panels: switch heavy dark gradients to light backgrounds */ [data-theme="light"] .team-card, [data-theme="light"] .news-card, [data-theme="light"] .pricing-card, [data-theme="light"] .card, [data-theme="light"] .features, [data-theme="light"] .team, [data-theme="light"] .news, [data-theme="light"] .service-card { background: #ffffff; border: 1px solid rgba(var(--accent-rgb), 0.1); box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.08); color: #1a1a1a; } /* Force proper contrast in pricing section for light mode */ [data-theme="light"] .pricing-card { background: #ffffff; color: #1a1a1a !important; border: 1px solid rgba(var(--accent-rgb), 0.2); } /* Standard card styles */ [data-theme="light"] .pricing-card:not(.featured) { background: #ffffff; } [data-theme="light"] .pricing-card:not(.featured) .pricing-tier { color: #1a1a1a !important; font-weight: 600; } [data-theme="light"] .pricing-card:not(.featured) .pricing-price { color: var(--accent) !important; } [data-theme="light"] .pricing-card:not(.featured) .pricing-price .currency, [data-theme="light"] .pricing-card:not(.featured) .pricing-price .amount, [data-theme="light"] .pricing-card:not(.featured) .pricing-price .period { color: var(--accent) !important; } [data-theme="light"] .pricing-card:not(.featured) .pricing-features li { color: #333333 !important; } /* FAQ Section Styles */ .faq-grid { display: grid; gap: 1.5rem; max-width: 800px; margin: 0 auto; } .faq-item { background: rgb(142, 38, 239); border-radius: 12px; padding: 1.5rem; cursor: pointer; transition: all 0.3s ease; color: white; } .faq-item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(142, 38, 239, 0.25); background: rgb(162, 58, 259); } .faq-question { display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-weight: 600; color: white; margin-bottom: 0.5rem; } .faq-question i { transition: transform 0.3s ease; } .faq-answer { height: 0; opacity: 0; overflow: hidden; transition: all 0.3s ease; color: rgba(255, 255, 255, 0.9); } .faq-item.active .faq-answer { height: auto; opacity: 1; margin-top: 1rem; } .faq-item.active .faq-question i { transform: rotate(180deg); } /* Light mode overrides for FAQ */ [data-theme="light"] .faq-item { background: rgb(142, 38, 239); color: white; } [data-theme="light"] .faq-question { color: white; } [data-theme="light"] .faq-answer { color: rgba(255, 255, 255, 0.9); } /* Featured card styles */ [data-theme="light"] .pricing-card.featured { background: #ffffff !important; border: 2px solid var(--accent) !important; } [data-theme="light"] .pricing-card.featured .pricing-tier { color: #1a1a1a !important; } [data-theme="light"] .pricing-card.featured .pricing-price .currency, [data-theme="light"] .pricing-card.featured .pricing-price .amount, [data-theme="light"] .pricing-card.featured .pricing-price .period { color: var(--accent) !important; } [data-theme="light"] .pricing-card.featured .pricing-features li { color: #333333 !important; } [data-theme="light"] .featured-badge { background: var(--accent) !important; color: #ffffff !important; font-weight: bold; } [data-theme="light"] .pricing-card.featured .btn-primary { background: var(--accent) !important; color: #ffffff !important; border: none; } [data-theme="light"] .featured-badge { background: #ffffff; color: var(--accent) !important; font-weight: 600; padding: 4px 12px; border-radius: 4px; } /* Partners Section styles */ .partners-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; /* center each grid item and center the grid itself */ place-items: center; justify-content: center; align-content: center; max-width: 1000px; margin: 0 auto; padding: 1rem 0 2rem 0; text-align: center; } .partner-card { display: inline-flex; align-items: center; justify-content: center; /* enforce a consistent box size so logos look the same on all hosts */ flex: 0 0 140px; max-width: 140px; width: 140px !important; height: 80px !important; background: transparent; border-radius: 8px; transition: transform 0.18s ease, box-shadow 0.18s ease; overflow: hidden; box-sizing: border-box; } .partner-card img { /* constrain the rendered image inside the fixed box */ max-width: 120px !important; max-height: 64px !important; width: auto !important; height: auto !important; object-fit: contain; display: block; } .partner-card:hover { transform: translateY(-4px) scale(1.02); box-shadow: 0 8px 20px rgba(0,0,0,0.12); } @media (max-width: 480px) { .partner-card { flex: 0 0 120px !important; max-width: 120px !important; width: 120px !important; height: 64px !important; } .partner-card img { max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; } } /* News image sizing: constrain thumbnails so they don't overwhelm the card */ .news-card { overflow: hidden; /* ensure image doesn't overflow rounded corners */ border-radius: 12px; } .news-card .news-image { width: 100%; height: 160px; /* default thumbnail height */ object-fit: cover; /* crop to fill while preserving aspect */ display: block; border-top-left-radius: 12px; border-top-right-radius: 12px; } /* Larger thumbnails on wider screens for better visual balance */ @media (min-width: 900px) { .news-card .news-image { height: 220px; } } @media (max-width: 520px) { .news-card .news-image { height: 120px; } } /* Buttons */ .btn { display: inline-block; padding: 10px 20px; background: #6b26a0; color: white; text-decoration: none; font-weight: 500; font-size: 14px; border: none; border-radius: 6px; } .btn-primary:hover, .pricing-card .btn-primary:hover, [data-theme="light"] .btn-primary:hover, [data-theme="light"] .pricing-card .btn-primary:hover { background: var(--accent) !important; color: #ffffff !important; opacity: 0.9; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3); text-decoration: none !important; } /* Ensure featured card buttons match */ .pricing-card.featured .btn-primary, [data-theme="light"] .pricing-card.featured .btn-primary { background: var(--accent) !important; color: #ffffff !important; border: none !important; text-decoration: none !important; } /* Override any link styles */ a.btn { text-decoration: none !important; } /* --- Header actions: force solid purple buttons that match the 'Join Discord' style --- */ /* High specificity so other button rules don't interfere */ html .navbar .header-actions a.btn, html .navbar .header-actions .btn, .navbar .header-actions a.btn, .navbar .header-actions .btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .6rem !important; padding: 10px 20px !important; min-width: 120px !important; background: rgb(var(--accent-rgb)) !important; /* purple */ color: #ffffff !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1 !important; text-decoration: none !important; box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.18) !important; } /* Theme toggle (icon-only) inside header should look consistent but keep circular size */ html .navbar #themeToggle.btn, .navbar #themeToggle.btn { background: rgba(255,255,255,0.06) !important; /* subtle on dark by default */ color: #ffffff !important; border-radius: 8px !important; padding: 8px !important; width: 44px !important; height: 44px !important; box-shadow: none !important; } /* Hover/active states for header buttons */ html .navbar .header-actions a.btn:hover, html .navbar .header-actions .btn:hover, .navbar .header-actions a.btn:hover, .navbar .header-actions .btn:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.25) !important; text-decoration: none !important; color: #ffffff !important; } /* --- Dark mode: ensure header buttons are purple (override dark background rules) --- */ html:not([data-theme="light"]) .navbar .header-actions a.btn, html:not([data-theme="light"]) .navbar .header-actions .btn, .navbar:not([data-theme="light"]) .header-actions a.btn, .navbar:not([data-theme="light"]) .header-actions .btn { background: rgb(var(--accent-rgb)) !important; color: #ffffff !important; box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.18) !important; } html:not([data-theme="light"]) .navbar .header-actions a.btn:hover, html:not([data-theme="light"]) .navbar .header-actions .btn:hover, .navbar:not([data-theme="light"]) .header-actions a.btn:hover, .navbar:not([data-theme="light"]) .header-actions .btn:hover { background: rgb(var(--accent-rgb)) !important; transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.25) !important; } html .navbar .header-actions a.btn:active, html .navbar .header-actions .btn:active, .navbar .header-actions a.btn:active, .navbar .header-actions .btn:active { transform: translateY(-1px) !important; box-shadow: 0 6px 12px rgba(var(--accent-rgb), 0.18) !important; } /* --- Choose Plan button: exact, high-specificity rules --- */ .btn.choose-plan, .pricing-card .btn.choose-plan, a.btn.choose-plan { display: inline-block !important; padding: 12px 28px !important; min-width: 140px !important; background: rgb(var(--accent-rgb)) !important; /* #6b26a0 */ color: #ffffff !important; border: none !important; border-radius: 10px !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.18) !important; transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease !important; } .btn.choose-plan:hover, .pricing-card .btn.choose-plan:hover, a.btn.choose-plan:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.24) !important; opacity: 0.98 !important; text-decoration: none !important; } .btn.choose-plan:active, .pricing-card .btn.choose-plan:active, a.btn.choose-plan:active { transform: translateY(-1px) !important; box-shadow: 0 6px 12px rgba(var(--accent-rgb), 0.18) !important; } /* Ensure no underline from user agent or other rules */ a.btn.choose-plan, a.btn.choose-plan:link, a.btn.choose-plan:visited, a.btn.choose-plan:hover { text-decoration: none !important; } [data-theme="light"] .best-value-badge { background: #ffffff; color: var(--accent) !important; } [data-theme="light"] .choose-plan-button { border: 2px solid var(--accent); color: var(--accent) !important; background: transparent; } [data-theme="light"] .pricing-card.featured .choose-plan-button { background: #ffffff; color: var(--accent) !important; border: none; } [data-theme="light"] .pricing-card:not(.featured) .choose-plan-button:hover { background: var(--accent); color: #ffffff !important; } /* Force dark text colors in light mode for service cards */ [data-theme="light"] .service-card { color: #1a1a1a !important; } [data-theme="light"] .service-card h3, [data-theme="light"] .service-card .service-title { color: #1a1a1a !important; } [data-theme="light"] .service-card p, [data-theme="light"] .service-card .service-description { color: #333333 !important; } [data-theme="light"] .service-card ul, [data-theme="light"] .service-card .service-features, [data-theme="light"] .service-card .service-features li { color: #333333 !important; } [data-theme="light"] .service-card .service-icon { color: var(--accent) !important; } [data-theme="light"] .service-card.featured { background: linear-gradient(135deg, #ffffff, #f8f9fa); border: 1px solid rgba(var(--accent-rgb), 0.2); } [data-theme="light"] .featured-badge { background: var(--accent); color: white !important; } /* Service card specific light mode styles */ [data-theme="light"] .service-card .service-title { color: var(--dark-900); } [data-theme="light"] .service-card .service-description { color: var(--dark-700); } [data-theme="light"] .service-card .service-features { color: var(--dark-800); } [data-theme="light"] .service-card .service-features li { color: var(--dark-800); } [data-theme="light"] .service-card .service-icon { color: var(--accent); } [data-theme="light"] .service-card.featured { background: linear-gradient(135deg, #ffffff, #f8f9fa); border: 1px solid rgba(var(--accent-rgb), 0.2); } [data-theme="light"] .service-card .featured-badge { background: var(--accent); color: white; } [data-theme="light"] .team-member-image { border: 3px solid var(--purple-500); } [data-theme="light"] .btn-primary { /* preserve contrast on light backgrounds */ color: #fff; /* explicit white icon/text on purple */ } [data-theme="light"] .btn-secondary { background: rgba(0,0,0,0.06); color: var(--white); border: 1px solid rgba(0,0,0,0.06); } [data-theme="light"] .footer, [data-theme="light"] .footer-bottom { background: var(--dark-800); color: var(--gray-300); border-top: 1px solid rgba(var(--accent-rgb), 0.04); } [data-theme="light"] .debug-panel { background: var(--overlay-strong); color: var(--dark-900); border: 1px solid rgba(var(--accent-rgb), 0.06); } /* Scroll-to-top: ensure the icon is visible on light theme (use white icon on purple background) */ [data-theme="light"] .scroll-top { color: #fff !important; box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.18); } /* Small adjustments for nav links and header actions to ensure contrast */ /* High-specificity overrides to guarantee header readability in light mode */ html[data-theme="light"] .navbar, html[data-theme="light"] .navbar * { color: inherit; } /* Force nav links and header action text to use the dark text color in light mode */ html[data-theme="light"] .navbar .nav-link, html[data-theme="light"] .navbar .nav-links a { color: var(--white) !important; /* in light theme --white is dark text */ } html[data-theme="light"] .navbar .nav-link:hover, html[data-theme="light"] .navbar .nav-link.active, html[data-theme="light"] .navbar .nav-links a:hover, html[data-theme="light"] .navbar .nav-links a.active { color: var(--purple-600) !important; } /* Header action buttons (Panel/Client Area) should be visible on light navbar */ html[data-theme="light"] .navbar .header-actions .btn, html[data-theme="light"] .navbar .header-actions a, .navbar .header-actions .btn, .navbar .header-actions a { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: var(--dark-900) !important; } /* Make sure hover state maintains contrast */ html[data-theme="light"] .navbar .header-actions .btn:hover, html[data-theme="light"] .navbar .header-actions a:hover, .navbar .header-actions .btn:hover, .navbar .header-actions a:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background-color: var(--dark-800) !important; } /* Ensure the mobile menu button bars are dark on light theme */ html[data-theme="light"] .mobile-menu-btn span { background: var(--white) !important; } /* Theme toggle: strongly center icon and hide label to avoid shifting */ html #themeToggle { width: 44px !important; height: 44px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } html #themeToggle .btn-label { display: none !important; } html #themeToggle .fav-icon { margin: 0 !important; } [data-theme="light"] .nav-links a, [data-theme="light"] .nav-links .nav-item { color: var(--white) !important; } [data-theme="light"] .header-actions .btn, [data-theme="light"] .header-actions a { color: var(--white) !important; } /* Smooth transition when switching themes */ html, body { transition: background-color 0.25s ease, color 0.25s ease; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--dark-900); color: var(--white); line-height: 1.6; overflow-x: hidden; } .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; } .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: var(--overlay); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; } .navbar.scrolled { background: var(--overlay-strong); box-shadow: 0 4px 30px rgba(var(--accent-rgb), 0.1); } .nav-content { /* Use a 3-column grid: logo | center nav | header actions This guarantees the nav is visually centered between the sides and that the left/right gutters (padding) match. */ display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; padding: 18px 36px; /* comfortable horizontal padding */ position: relative; /* allow absolute positioning of mobile button */ } .logo-container { display: flex; align-items: center; gap: 28px; /* increase space between logo image and brand name */ } .logo-container .logo { height: 40px; width: auto; transition: transform 0.3s ease; } .logo-container:hover .logo { transform: scale(1.05); } .brand-name { font-size: 24px; font-weight: 700; background: linear-gradient(135deg, var(--purple-400), var(--purple-600)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-left: 8px; /* slight extra spacing from the logo */ } .nav-links { display: flex; gap: 40px; /* larger gap between nav links */ align-items: center; justify-self: center; /* keep the nav in the center grid column */ position: static; } /* Header action buttons (Panel / Client Area) */ .header-actions { display: flex; gap: 24px; /* more breathing room between the header buttons */ align-items: center; justify-self: end; /* place actions in the right grid column */ } .header-actions .btn { padding: 12px 20px; /* larger touch target and spacing */ border-radius: 14px; font-size: 15px; color: var(--white) !important; /* ensure text is always white */ } /* Ensure header buttons have no underline and inherit button styles */ .header-actions .btn { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; } /* Service card styles for light mode */ [data-theme="light"] .service-card { color: var(--dark-900); } [data-theme="light"] .service-card .service-title { color: var(--dark-900); } [data-theme="light"] .service-card p, [data-theme="light"] .service-features li { color: var(--dark-800); } [data-theme="light"] .featured-badge { background: var(--purple-600); color: #ffffff; } [data-theme="light"] .service-features li::before { color: var(--purple-600); } .header-actions .btn:hover, .header-actions .btn:focus { text-decoration: none; color: var(--white) !important; /* ensure text stays white on hover/focus */ } .fav-icon { font-size: 14px; /* size of the FA icon */ margin-right: 8px; vertical-align: middle; display: inline-block; width: 1em; text-align: center; } .btn-label { vertical-align: middle; } /* helper for screen-reader-only text */ .visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .nav-link { color: var(--gray-300); text-decoration: none; font-weight: 500; font-size: 15px; transition: all 0.3s ease; position: relative; } .nav-link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: linear-gradient(90deg, var(--purple-400), var(--purple-600)); transition: width 0.3s ease; } .nav-link:hover, .nav-link.active { color: var(--white); } /* Final high-specificity overrides (end of file) to guarantee header readability in light mode */ html[data-theme="light"] .navbar .nav-link, html[data-theme="light"] .navbar .nav-links a, html[data-theme="light"] .navbar .header-actions .btn, html[data-theme="light"] .navbar .header-actions a { color: var(--white) !important; } /* Ensure theme toggle remains centered */ html #themeToggle { display:inline-flex !important; align-items:center !important; justify-content:center !important; } html #themeToggle .fav-icon { margin:0 !important; } .nav-link:hover::after, .nav-link.active::after { width: 100%; } .mobile-menu-btn { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; position: absolute; right: 36px; /* match container padding so button aligns with actions */ top: 50%; transform: translateY(-50%); } .mobile-menu-btn span { width: 25px; height: 2px; background: var(--white); transition: all 0.3s ease; } .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding-top: 80px; } .hero-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, var(--dark-900) 0%, var(--purple-900) 50%, var(--purple-800) 100%); z-index: -1; } .hero-bg::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(circle at 20% 50%, rgba(var(--accent-rgb), 0.3) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(var(--accent2-rgb), 0.2) 0%, transparent 50%); animation: gradientShift 15s ease infinite; } @keyframes gradientShift { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(1.1); } } .hero-content { text-align: center; max-width: 800px; z-index: 1; animation: fadeInUp 1s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-title { font-size: 64px; font-weight: 800; margin-bottom: 24px; background: linear-gradient(135deg, var(--white) 0%, var(--purple-200) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.2; } .hero-subtitle { font-size: 20px; color: var(--gray-200); margin-bottom: 40px; line-height: 1.8; } .hero-buttons { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; } .btn { padding: 14px 32px; font-size: 16px; font-weight: 600; border-radius: 12px; border: none; cursor: pointer; transition: all 0.3s ease; font-family: 'Inter', sans-serif; } .btn-primary { background: linear-gradient(135deg, var(--purple-600), var(--purple-800)); color: #fff; box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.4); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.6); } .btn-secondary { background: var(--glass); color: var(--white); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(var(--accent-rgb), 0.08); } .btn-secondary:hover { background: rgba(255, 255, 255, 0.15); transform: translateY(-2px); } .btn-outline { background: transparent; color: var(--purple-300); border: 2px solid var(--purple-600); } .btn-outline:hover { background: var(--purple-600); color: var(--white); transform: translateY(-2px); } .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); animation: bounce 2s infinite; } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); } 40% { transform: translateX(-50%) translateY(-10px); } 60% { transform: translateX(-50%) translateY(-5px); } } .mouse { width: 26px; height: 40px; border: 2px solid var(--purple-300); border-radius: 15px; position: relative; } .mouse::before { content: ''; width: 4px; height: 8px; background: var(--purple-300); border-radius: 2px; position: absolute; top: 8px; left: 50%; transform: translateX(-50%); animation: scroll 1.5s infinite; } @keyframes scroll { 0% { opacity: 1; transform: translateX(-50%) translateY(0); } 100% { opacity: 0; transform: translateX(-50%) translateY(12px); } } section { padding: 100px 0; position: relative; } .section-header { text-align: center; margin-bottom: 60px; } .section-title { font-size: 48px; font-weight: 700; margin-bottom: 16px; background: linear-gradient(135deg, var(--white) 0%, var(--purple-300) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .section-subtitle { font-size: 18px; color: var(--gray-300); } .services { background: var(--dark-800); position: relative; overflow: hidden; } .services::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--purple-600), transparent); } .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 30px; } .service-card { background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-600) 100%); border-radius: 20px; padding: 40px; border: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; } .service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .service-card:hover { transform: translateY(-8px); border-color: var(--purple-500); box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.3); } .service-card:hover::before { opacity: 1; } .service-card.featured { border: 2px solid var(--purple-600); background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-800) 100%); } .featured-badge { position: absolute; top: 20px; right: 20px; background: linear-gradient(135deg, var(--purple-500), var(--purple-700)); color: var(--white); padding: 6px 16px; border-radius: 20px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .service-icon { width: 60px; height: 60px; margin-bottom: 24px; color: var(--purple-400); } .service-icon svg { width: 100%; height: 100%; } .service-title { font-size: 24px; font-weight: 700; margin-bottom: 12px; color: var(--white); } .service-description { color: var(--gray-300); margin-bottom: 24px; line-height: 1.8; } .service-features { list-style: none; } .service-features li { padding: 8px 0; color: var(--gray-300); position: relative; padding-left: 24px; } .service-features li::before { content: '✓'; position: absolute; left: 0; color: var(--purple-400); font-weight: bold; } .games { background: var(--dark-900); } .games-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .game-card { background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-600) 100%); border-radius: 20px; padding: 40px; text-align: center; border: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; } .game-card:hover { transform: translateY(-8px); border-color: var(--purple-500); box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.3); } .game-icon { font-size: 64px; margin-bottom: 20px; display: inline-block; transition: transform 0.3s ease; } .game-card:hover .game-icon { transform: scale(1.1); } .game-title { font-size: 22px; font-weight: 700; margin-bottom: 12px; color: var(--white); } .game-description { color: var(--gray-300); margin-bottom: 24px; line-height: 1.6; } .pricing { background: var(--dark-800); } .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; max-width: 1000px; margin: 0 auto; } .pricing-card { background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-600) 100%); border-radius: 20px; padding: 40px; border: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; position: relative; text-align: center; } .pricing-card:hover { transform: translateY(-8px); border-color: var(--purple-500); box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.3); } .pricing-card.featured { border: 2px solid var(--purple-600); background: linear-gradient(135deg, var(--purple-900) 0%, var(--purple-800) 100%); transform: scale(1.05); } .pricing-card.featured:hover { transform: scale(1.05) translateY(-8px); } .pricing-tier { font-size: 24px; font-weight: 700; margin-bottom: 20px; color: var(--white); } .pricing-price { margin-bottom: 30px; display: flex; align-items: baseline; justify-content: center; gap: 4px; } .currency { font-size: 24px; color: var(--gray-400); } .amount { font-size: 56px; font-weight: 800; background: linear-gradient(135deg, var(--purple-300), var(--purple-500)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .period { font-size: 16px; color: var(--gray-400); } .pricing-features { list-style: none; margin-bottom: 30px; text-align: left; } .pricing-features li { padding: 12px 0; color: var(--gray-300); border-bottom: 1px solid rgba(var(--accent-rgb), 0.1); } .pricing-features li:last-child { border-bottom: none; } .features { background: var(--dark-900); } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; } /* Team Section */ .team { background: var(--dark-800); position: relative; overflow: hidden; } .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; padding: 20px 0; } .team-card { background: linear-gradient(135deg, rgba(26, 26, 39, 0.8), rgba(35, 35, 51, 0.8)); border-radius: 20px; padding: 40px; text-align: center; border: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .team-card:hover { transform: translateY(-8px); border-color: var(--purple-500); box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.3); } .team-member-image { width: 120px; height: 120px; border-radius: 60px; margin: 0 auto 20px; border: 3px solid var(--purple-500); transition: transform 0.3s ease; } .team-card:hover .team-member-image { transform: scale(1.1); } .team-member-name { font-size: 24px; font-weight: 700; margin-bottom: 8px; background: linear-gradient(135deg, var(--white), var(--purple-300)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .team-member-role { color: var(--purple-300); font-size: 16px; margin-bottom: 16px; } .team-member-bio { color: var(--gray-300); margin-bottom: 24px; line-height: 1.6; } .team-social-links { display: flex; justify-content: center; gap: 16px; } .team-social-link { color: var(--gray-400); font-size: 20px; transition: all 0.3s ease; } .team-social-link:hover { color: var(--purple-400); transform: translateY(-2px); } /* News Section */ .news { background: var(--dark-900); position: relative; } .news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 30px; padding: 20px 0; } .news-card { background: linear-gradient(135deg, rgba(26, 26, 39, 0.8), rgba(35, 35, 51, 0.8)); border-radius: 20px; overflow: hidden; border: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; } .news-card:hover { transform: translateY(-8px); border-color: var(--purple-500); box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.3); } .news-image { width: 100%; height: 200px; object-fit: cover; border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); } .news-content { padding: 24px; } .news-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; font-size: 14px; color: var(--gray-400); } .news-category { background: var(--purple-600); /* Force white text regardless of theme variable overrides */ color: #ffffff !important; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; } .news-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; color: var(--white); line-height: 1.4; } .news-excerpt { color: var(--gray-300); margin-bottom: 0; /* Remove bottom margin since it's the last element */ line-height: 1.6; } .loading-placeholder { text-align: center; padding: 40px; color: var(--gray-400); font-style: italic; } .feature-item { text-align: center; } .feature-icon { font-size: 48px; margin-bottom: 16px; } .feature-item h3 { font-size: 20px; font-weight: 700; margin-bottom: 8px; color: var(--white); } .feature-item p { color: var(--gray-300); line-height: 1.6; } .contact { background: var(--dark-800); } .contact-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 40px; max-width: 1000px; margin: 0 auto; } .contact-card { background: linear-gradient(135deg, var(--dark-700) 0%, var(--dark-600) 100%); border-radius: 20px; padding: 50px 40px; border: 1px solid rgba(var(--accent-rgb), 0.2); transition: all 0.3s ease; position: relative; overflow: hidden; text-align: center; text-decoration: none; display: flex; flex-direction: column; align-items: center; cursor: pointer; } .contact-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.1) 0%, transparent 100%); opacity: 0; transition: opacity 0.3s ease; } .contact-card:hover { transform: translateY(-8px); border-color: var(--purple-500); box-shadow: 0 10px 40px rgba(var(--accent-rgb), 0.4); } .contact-card:hover::before { opacity: 1; } .contact-icon { width: 80px; height: 80px; margin-bottom: 24px; color: var(--purple-400); position: relative; z-index: 1; transition: transform 0.3s ease; } .contact-card:hover .contact-icon { transform: scale(1.1); } .contact-icon svg { width: 100%; height: 100%; } .contact-card h3 { font-size: 28px; font-weight: 700; margin-bottom: 16px; color: var(--white); position: relative; z-index: 1; } .contact-card p { color: var(--gray-300); font-size: 16px; line-height: 1.6; margin-bottom: 32px; position: relative; z-index: 1; } .contact-card .btn { margin-top: auto; position: relative; z-index: 1; /* Enable clicking and style the button to match the site's primary buttons */ pointer-events: auto !important; display: inline-block !important; padding: 10px 22px !important; background: rgb(var(--accent-rgb)) !important; color: #ffffff !important; text-decoration: none !important; border: none !important; border-radius: 8px !important; font-weight: 600 !important; box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.18) !important; } .contact-card .btn:hover { transform: translateY(-3px) !important; box-shadow: 0 14px 36px rgba(var(--accent-rgb), 0.25) !important; color: #ffffff !important; } .footer { background: var(--dark-900); border-top: 1px solid rgba(var(--accent-rgb), 0.2); padding: 60px 0 30px; } .footer-content { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-logo { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .footer-logo .logo { height: 40px; width: auto; } .footer-section h4 { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: var(--white); } .footer-section p { color: var(--gray-400); line-height: 1.6; } .footer-section ul { list-style: none; } .footer-section ul li { margin-bottom: 12px; } .footer-section ul li a { color: var(--gray-400); text-decoration: none; transition: color 0.3s ease; } .footer-section ul li a:hover { color: var(--purple-300); } .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(var(--accent-rgb), 0.1); } .footer-bottom p { color: var(--gray-400); } @media (max-width: 768px) { /* Collapse header grid to a standard flex row on mobile to avoid layout issues caused by the 3-column grid when available width is small. */ .nav-content { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; } /* Ensure logo and actions keep reasonable sizes on small screens */ .logo-container .logo { height: 36px; } .nav-links { position: fixed; top: 80px; left: 0; right: 0; background: var(--overlay-strong); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); flex-direction: column; padding: 30px; gap: 20px; transform: translateY(-100%); opacity: 0; transition: all 0.3s ease; border-bottom: 1px solid rgba(var(--accent-rgb), 0.2); } .nav-links.active { transform: translateY(0); opacity: 1; } .mobile-menu-btn { display: flex; } /* hide header action buttons on small screens (they can be added inside mobile menu if needed) */ .header-actions { display: none; } .hero-title { font-size: 40px; } .hero-subtitle { font-size: 18px; } .section-title { font-size: 36px; } .services-grid, .games-grid, .pricing-grid { grid-template-columns: 1fr; } .contact-buttons { grid-template-columns: 1fr; gap: 30px; } .footer-content { grid-template-columns: 1fr; gap: 30px; } /* Make team & news sections center and responsive on small screens */ .team-grid, .news-grid { grid-template-columns: 1fr; justify-items: center; /* center grid items */ gap: 24px; } .team-card, .news-card { width: 100%; max-width: 520px; margin: 0 auto; } .team-member-image { width: 100px; height: 100px; } /* Mobile header actions will be inserted into the mobile nav — style them here */ .mobile-header-actions { display: flex; gap: 12px; margin-top: 18px; justify-content: center; flex-wrap: wrap; } .mobile-header-actions .btn { padding: 10px 14px; border-radius: 10px; font-size: 14px; } .pricing-card.featured { transform: scale(1); } .pricing-card.featured:hover { transform: translateY(-8px); } } @media (max-width: 480px) { .hero-title { font-size: 32px; } .hero-buttons { flex-direction: column; width: 100%; } .btn { width: 100%; } } /* Mobile light mode overrides */ @media (max-width: 768px) { [data-theme="light"] .nav-links { background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); } [data-theme="light"] .nav-links .nav-link { color: var(--dark-900); } [data-theme="light"] .mobile-menu-btn span { background: var(--dark-900); } [data-theme="light"] .mobile-menu-btn.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); background: var(--dark-900); } [data-theme="light"] .mobile-menu-btn.active span:nth-child(2) { opacity: 0; } [data-theme="light"] .mobile-menu-btn.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); background: var(--dark-900); } } /* Scroll-to-top button */ .scroll-top { position: fixed; right: 24px; bottom: 24px; width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--purple-600), var(--purple-800)); color: var(--white); border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; z-index: 2000; } .scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-top i { font-size: 14px; }