/** * Subpages dark theme — aligned with seoHome/index.html (Payeer.online) * Apply via */ body.site-dark { --seo-bg: #020b18; --seo-bg2: #040f1e; --seo-bg3: #061424; --seo-surface: #0a1e35; --seo-surface2: #0e2540; --seo-border: #132d4a; --seo-border2: #1b3f65; --seo-cyan: #00c8ff; --seo-green: #00e5a0; --seo-text: #e8f4ff; --seo-muted: #5a89b0; --seo-white: #ffffff; --seo-gradient: linear-gradient(135deg, #00c8ff, #00e5a0); --primary-color: #00c8ff; --secondary-color: #00e5a0; --text-dark: #e8f4ff; --text-light: #5a89b0; --bg-light: #061424; --bg-white: #020b18; --border-color: #132d4a; --success-color: #00e5a0; --shadow: 0 4px 24px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 40px rgba(0, 200, 255, 0.12); font-family: 'Plus Jakarta Sans', 'Segoe UI', sans-serif; color: var(--seo-text); background-color: var(--seo-bg); background-image: linear-gradient(rgba(0, 200, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 200, 255, 0.03) 1px, transparent 1px); background-size: 50px 50px; } body.site-dark h1, body.site-dark h2, body.site-dark h3, body.site-dark .page-header h1, body.site-dark .content-section h2, body.site-dark .cta-section h2 { font-family: 'Space Grotesk', 'Segoe UI', sans-serif; letter-spacing: -0.02em; } /* ── Nav ── */ body.site-dark .navbar { background: rgba(2, 11, 24, 0.92); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(0, 200, 255, 0.2); box-shadow: 0 0 30px rgba(0, 200, 255, 0.08); } body.site-dark .nav-menu a:not(.btn-login):not(.btn-primary) { color: var(--seo-muted); border-radius: 8px; transition: color 0.2s, background 0.2s; } body.site-dark .nav-menu a:not(.btn-login):not(.btn-primary):hover, body.site-dark .nav-menu .nav-dropdown-trigger:hover, body.site-dark .nav-menu a:not(.btn-login):not(.btn-primary).active, body.site-dark .nav-menu .nav-dropdown-trigger.active { color: var(--seo-cyan); background: rgba(0, 200, 255, 0.08); } body.site-dark .nav-menu a.btn-login { border-color: var(--seo-border2); color: var(--seo-muted); } body.site-dark .nav-menu a.btn-login:hover { background: rgba(0, 200, 255, 0.1); border-color: var(--seo-cyan); color: var(--seo-cyan); } body.site-dark .nav-menu a.btn-primary { background: var(--seo-gradient); border-color: transparent; color: #020b18; font-family: 'Space Grotesk', sans-serif; font-weight: 700; box-shadow: 0 0 20px rgba(0, 200, 255, 0.35); } body.site-dark .nav-menu a.btn-primary:hover { opacity: 0.95; box-shadow: 0 0 28px rgba(0, 200, 255, 0.5); } body.site-dark .nav-menu a.active.btn-primary { color: var(--seo-cyan); background: transparent; } body.site-dark .mobile-menu-toggle span { background: var(--seo-cyan); } body.site-dark .locale-switcher-select { background: var(--seo-surface); border-color: var(--seo-border2); color: var(--seo-text); } body.site-dark .locale-switcher-select:hover, body.site-dark .locale-switcher-select:focus { border-color: var(--seo-cyan); color: var(--seo-cyan); } @media (max-width: 768px) { body.site-dark .nav-menu { background: var(--seo-bg2); border-bottom: 1px solid var(--seo-border); box-shadow: var(--shadow-lg); } } /* ── Page header ── */ body.site-dark .page-header { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--seo-bg2) 0%, var(--seo-bg) 100%); border-bottom: 1px solid var(--seo-border); padding: 5rem 0 3.5rem; text-align: center; } body.site-dark .page-header::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(700px, 100%); height: 280px; background: radial-gradient(ellipse, rgba(0, 200, 255, 0.12) 0%, transparent 70%); pointer-events: none; } body.site-dark .page-header .container { position: relative; z-index: 1; } body.site-dark .page-header h1 { font-size: clamp(2rem, 4vw, 3rem); color: var(--seo-white); margin-bottom: 0.75rem; } body.site-dark .page-header p { color: var(--seo-muted); font-size: 1.1rem; max-width: 640px; margin: 0 auto; } /* ── Main content ── */ body.site-dark .page-content { padding: 4rem 0 5rem; background: var(--seo-bg); } body.site-dark .content-section { margin-bottom: 3rem; padding: 2rem 2.25rem; background: var(--seo-surface); border: 1px solid var(--seo-border); border-radius: 14px; box-shadow: var(--shadow); } body.site-dark .content-section h2 { color: var(--seo-white); font-size: 1.65rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.65rem; flex-wrap: wrap; } body.site-dark .content-section h2 i { color: var(--seo-cyan); font-size: 1.1rem; } body.site-dark .content-section h3 { color: var(--seo-cyan); font-size: 1.15rem; margin: 1.5rem 0 0.75rem; font-family: 'Space Grotesk', sans-serif; } body.site-dark .content-section p, body.site-dark .content-section li { color: var(--seo-muted); line-height: 1.85; } body.site-dark .content-section p { margin-bottom: 1rem; } body.site-dark .content-section ul, body.site-dark .content-section ol { margin: 0.75rem 0 1rem 1.35rem; color: var(--seo-muted); } body.site-dark .content-section li { margin-bottom: 0.5rem; } body.site-dark .content-section a { color: var(--seo-cyan); text-decoration: underline; text-underline-offset: 3px; } body.site-dark .content-section a:hover { color: var(--seo-green); } body.site-dark .content-section strong { color: var(--seo-text); } /* Cards grid (about, values, stats) */ body.site-dark .service-item { background: var(--seo-bg2); border: 1px solid var(--seo-border); border-radius: 12px; box-shadow: none; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } body.site-dark .service-item:hover { transform: translateY(-4px); border-color: rgba(0, 200, 255, 0.35); box-shadow: 0 8px 32px rgba(0, 200, 255, 0.12); } body.site-dark .service-item h3 { color: var(--seo-white); font-family: 'Space Grotesk', sans-serif; } body.site-dark .service-item h3 i { color: var(--seo-cyan); margin-right: 0.35rem; } body.site-dark .service-item p, body.site-dark .service-item ul li { color: var(--seo-muted); } body.site-dark .service-item ul li:before { color: var(--seo-green); } body.site-dark .about-stat-num { font-size: 2.75rem !important; font-family: 'Space Grotesk', sans-serif !important; font-weight: 700 !important; margin-bottom: 0.5rem !important; background: var(--seo-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent !important; } body.site-dark .about-stat-label { font-size: 1.05rem !important; font-weight: 600 !important; color: var(--seo-muted) !important; } /* ── CTA ── */ body.site-dark .cta-section { padding: 5rem 0; background: linear-gradient(135deg, rgba(0, 200, 255, 0.08), rgba(0, 229, 160, 0.06)); border-top: 1px solid var(--seo-border); border-bottom: 1px solid var(--seo-border); position: relative; overflow: hidden; } body.site-dark .cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(0, 200, 255, 0.1), transparent 60%); pointer-events: none; } body.site-dark .cta-section .container { position: relative; z-index: 1; } body.site-dark .cta-section h2 { color: var(--seo-white); font-size: clamp(1.75rem, 3vw, 2.5rem); } body.site-dark .cta-section p { color: var(--seo-muted); opacity: 1; } body.site-dark .cta-section .btn-primary, body.site-dark .btn-primary { background: var(--seo-gradient); color: #020b18; border: none; font-family: 'Space Grotesk', sans-serif; font-weight: 700; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 200, 255, 0.35); } body.site-dark .cta-section .btn-primary:hover, body.site-dark .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0, 200, 255, 0.45); background: var(--seo-gradient); color: #020b18; } body.site-dark .btn-secondary { display: inline-block; padding: 10px 22px; border: 1px solid var(--seo-border2); border-radius: 10px; color: var(--seo-cyan); background: rgba(0, 200, 255, 0.06); font-weight: 600; text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; } body.site-dark .btn-secondary:hover { border-color: var(--seo-cyan); background: rgba(0, 200, 255, 0.12); color: var(--seo-green); } /* ── Footer (config.js injected) ── */ body.site-dark .footer { background: linear-gradient(135deg, var(--seo-bg2), var(--seo-bg)); border-top: 1px solid rgba(0, 200, 255, 0.15); position: relative; overflow: hidden; } body.site-dark .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 120px; background: radial-gradient(circle at 50% 0%, rgba(0, 200, 255, 0.06), transparent 70%); pointer-events: none; } body.site-dark .footer .container { position: relative; z-index: 1; } body.site-dark .footer-section h3, body.site-dark .footer-main h3 { font-family: 'Space Grotesk', sans-serif; color: var(--seo-white); } body.site-dark .footer-section p, body.site-dark .footer-main p, body.site-dark .footer-main .footer-restrictions { color: var(--seo-muted); } body.site-dark .footer-section a, body.site-dark .footer-follow-link { color: var(--seo-muted); } body.site-dark .footer-section a:hover, body.site-dark .footer-follow-link:hover { color: var(--seo-cyan); } body.site-dark .footer-bottom { border-top-color: var(--seo-border); color: var(--seo-muted); } body.site-dark .contact-info-footer p, body.site-dark .contact-info-footer a { color: var(--seo-muted); } body.site-dark .contact-info-footer i { color: var(--seo-cyan); } body.site-dark .navbar .nav-menu { gap: 0.15rem; } body.site-dark .navbar .nav-dropdown-trigger { color: var(--seo-muted); } body.site-dark .navbar .nav-dropdown-menu { background: var(--seo-bg2); border-color: var(--seo-border); } /* Services page */ body.site-dark .content-section--intro { text-align: center; } body.site-dark .page-intro { font-size: 1.15rem; line-height: 1.85; color: var(--seo-muted); max-width: 900px; margin: 0 auto; } body.site-dark .services-grid { margin: 2rem 0 3rem; } body.site-dark .service-card { display: flex; gap: 1.75rem; padding: 1.75rem 2rem; background: var(--seo-bg2); border: 1px solid var(--seo-border); border-radius: 14px; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; } body.site-dark .service-card:hover { transform: translateX(6px); border-color: rgba(0, 200, 255, 0.35); box-shadow: 0 8px 32px rgba(0, 200, 255, 0.12); } body.site-dark .service-icon { flex-shrink: 0; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; border-radius: 12px; font-size: 1.75rem; background: var(--seo-gradient); color: #020b18; box-shadow: 0 0 24px rgba(0, 200, 255, 0.25); } body.site-dark .service-card h3 { color: var(--seo-white); font-family: 'Space Grotesk', sans-serif; font-size: 1.35rem; margin-bottom: 0.75rem; } body.site-dark .service-card p { color: var(--seo-muted); line-height: 1.85; } body.site-dark .services-list { gap: 1.25rem; } @media (max-width: 768px) { body.site-dark .service-card { flex-direction: column; gap: 1.25rem; } body.site-dark .service-card:hover { transform: translateY(-4px); } } /* Case studies */ body.site-dark .case-studies-grid { gap: 2rem; margin: 2rem 0 3rem; } body.site-dark .case-study-card { background: var(--seo-surface); border: 1px solid var(--seo-border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; } body.site-dark .case-study-card:hover { transform: translateY(-4px); border-color: rgba(0, 200, 255, 0.35); box-shadow: 0 8px 32px rgba(0, 200, 255, 0.12); } body.site-dark .case-study-header { background: linear-gradient(135deg, rgba(0, 200, 255, 0.15), rgba(0, 229, 160, 0.1)); border-bottom: 1px solid var(--seo-border); padding: 1.75rem 2rem; color: var(--seo-white); } body.site-dark .case-study-header h2 { font-family: 'Space Grotesk', sans-serif; color: var(--seo-white); } body.site-dark .case-study-category { background: rgba(0, 200, 255, 0.12); border: 1px solid rgba(0, 200, 255, 0.25); color: var(--seo-cyan); } body.site-dark .case-study-content { padding: 2rem; } body.site-dark .case-study-content h3 { color: var(--seo-cyan); font-family: 'Space Grotesk', sans-serif; } body.site-dark .case-study-content ul li { color: var(--seo-muted); } body.site-dark .case-study-content ul li:before { color: var(--seo-green); } body.site-dark .case-study-quote { background: var(--seo-bg2); border-left: 4px solid var(--seo-cyan); border-radius: 0 10px 10px 0; } body.site-dark .case-study-quote p { color: var(--seo-text); } body.site-dark .case-study-quote cite { color: var(--seo-cyan); } /* Resources */ body.site-dark .resources-grid { margin: 2rem 0 3rem; } body.site-dark .resource-card { background: var(--seo-bg2); border: 1px solid var(--seo-border); border-radius: 14px; box-shadow: none; padding: 2rem; } body.site-dark .resource-card:hover { transform: translateY(-4px); border-color: rgba(0, 200, 255, 0.35); box-shadow: 0 8px 32px rgba(0, 200, 255, 0.12); } body.site-dark .resource-card h3 { color: var(--seo-white); font-family: 'Space Grotesk', sans-serif; } body.site-dark .resource-card .resource-icon { color: var(--seo-cyan); } body.site-dark .resource-card ul li { color: var(--seo-muted); } body.site-dark .resource-card ul li:before { color: var(--seo-cyan); } body.site-dark .resource-card a { color: var(--seo-cyan); } body.site-dark .resource-card a:hover { color: var(--seo-green); } /* Payment / FAQ page */ body.site-dark.payment-page .faq-container { max-width: 1000px; margin: 0 auto; padding: 3rem var(--container-padding-x, 20px) 4rem; } body.site-dark.payment-page .faq-category { margin-bottom: 3rem; } body.site-dark.payment-page .faq-category h2 { font-family: 'Space Grotesk', sans-serif; font-size: 1.65rem; color: var(--seo-white); border-bottom: 2px solid rgba(0, 200, 255, 0.35); padding-bottom: 0.75rem; margin-bottom: 1.5rem; } body.site-dark.payment-page .faq-item { background: var(--seo-surface); border: 1px solid var(--seo-border); border-radius: 12px; padding: 1.5rem 1.75rem; margin-bottom: 1.25rem; box-shadow: none; } body.site-dark.payment-page .faq-item:hover { border-color: rgba(0, 200, 255, 0.35); box-shadow: 0 8px 28px rgba(0, 200, 255, 0.1); transform: translateY(-2px); } body.site-dark.payment-page .faq-question { color: var(--seo-white); font-family: 'Space Grotesk', sans-serif; } body.site-dark.payment-page .faq-question i { color: var(--seo-cyan); } body.site-dark.payment-page .faq-answer { color: var(--seo-muted); margin-left: 0; } body.site-dark.payment-page .faq-answer strong { color: var(--seo-text); } body.site-dark.payment-page .button-group { background: linear-gradient(135deg, rgba(0, 200, 255, 0.1), rgba(0, 229, 160, 0.08)); border: 1px solid var(--seo-border); border-radius: 14px; padding: 2rem; box-shadow: none; } body.site-dark.payment-page .button-group .btn { background: var(--seo-gradient); color: #020b18; font-family: 'Space Grotesk', sans-serif; font-weight: 700; border-radius: 10px; box-shadow: 0 4px 20px rgba(0, 200, 255, 0.3); } body.site-dark.payment-page .button-group .btn:hover { opacity: 0.95; transform: translateY(-2px); color: #020b18; background: var(--seo-gradient); } body.site-dark.payment-page .info-box { background: rgba(0, 200, 255, 0.08); border-left: 4px solid var(--seo-cyan); color: var(--seo-muted); border-radius: 0 8px 8px 0; } body.site-dark.payment-page .warning-box { background: rgba(255, 192, 65, 0.08); border-left: 4px solid #ffc041; color: var(--seo-muted); border-radius: 0 8px 8px 0; } body.site-dark.payment-page .success-box { background: rgba(0, 229, 160, 0.08); border-left: 4px solid var(--seo-green); color: var(--seo-muted); border-radius: 0 8px 8px 0; } /* ── Contact form (dark card — light theme overrides in public/css/light-theme.css) ── */ body.site-dark .contact-form { background: var(--seo-surface); border: 1px solid var(--seo-border); box-shadow: var(--shadow-lg); } body.site-dark .contact-form h2 { color: var(--seo-cyan) !important; } body.site-dark .contact-form .form-group label { color: var(--seo-text); } body.site-dark .contact-form .form-group input, body.site-dark .contact-form .form-group textarea, body.site-dark .contact-form .form-group select { background: var(--seo-bg2); color: var(--seo-text); border-color: var(--seo-border2); } body.site-dark .contact-form .form-group input::placeholder, body.site-dark .contact-form .form-group textarea::placeholder { color: var(--seo-muted); } body.site-dark .contact-form .form-group input:focus, body.site-dark .contact-form .form-group textarea:focus, body.site-dark .contact-form .form-group select:focus { border-color: var(--seo-cyan); outline: none; box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.2); background: var(--seo-surface2); } body.site-dark .contact-form .form-group select option { color: var(--seo-text); background: var(--seo-bg2); } body.site-dark .contact-form .btn-primary { background: var(--seo-gradient); color: #020b18; border: none; } body.site-dark .contact-form .btn-primary:hover { opacity: 0.92; color: #020b18; } body.site-dark .contact-form .contact-form-message--success { color: var(--seo-green); } body.site-dark .contact-form .contact-form-message--error { color: #ff5757; }