/* ============================================================ THEME TOGGLE BUTTON ============================================================ */ .theme-toggle-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0.4rem 0.85rem; border-radius: var(--radius-full); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; border: 1.5px solid rgba(139,26,74,0.35); background: transparent; color: var(--accent); transition: all var(--transition); white-space: nowrap; flex-shrink: 0; font-family: var(--font-body); } .theme-toggle-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .theme-toggle-btn .theme-icon { font-size: 0.9rem; line-height: 1; } /* In neon mode nav is dark — button needs neon colours */ [data-theme="neon"] .theme-toggle-btn { border-color: rgba(0,255,200,0.35); color: #00FFC8; } [data-theme="neon"] .theme-toggle-btn:hover { background: rgba(0,255,200,0.10); color: #00FFC8; border-color: #00FFC8; } /* ============================================================ NEON / MODERN THEME (data-theme="neon" on ) ============================================================ */ [data-theme="neon"] { --bg: #0A0A12; --bg-alt: #0D0D18; --bg-dark: #0A0A12; --bg-dark-2: #0D0D18; --bg-dark-3: #111120; --card: #111120; --card-dark: #0D0D18; --border: rgba(0,255,200,0.10); --border-2: rgba(0,255,200,0.18); --accent: #00FFC8; --accent-hover: #00E0B0; --accent-glow: rgba(0,255,200,0.25); --gold: #7C3AED; --gold-light: #9D5FF5; --emerald: #00FFC8; --text-1: #E8E8F0; --text-2: #A0A0B8; --text-3: #606078; --shadow-sm: 0 1px 3px rgba(0,0,0,.5), 0 0 8px rgba(0,255,200,.03); --shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 20px rgba(0,255,200,.05); --shadow-lg: 0 16px 56px rgba(0,0,0,.7), 0 0 40px rgba(0,255,200,.08); --shadow-blue: 0 8px 32px rgba(0,255,200,.20); --ctx-h: #E8E8F0; --ctx-body: rgba(230,230,245,0.75); --ctx-muted: rgba(200,200,220,0.45); --ctx-border: rgba(0,255,200,0.10); --ctx-faq-bg: rgba(0,255,200,0.06); } [data-theme="neon"] body { background: #0A0A12; color: #E8E8F0; } /* ── Nav ── */ [data-theme="neon"] #nav { background: rgba(10,10,18,0.90); border-bottom: 1px solid rgba(0,255,200,0.10); } [data-theme="neon"] #nav.scrolled { background: rgba(10,10,18,0.98); border-color: rgba(0,255,200,0.15); } [data-theme="neon"] .nav-links > li > a { color: rgba(230,230,245,0.70); } [data-theme="neon"] .nav-links > li > a:hover, [data-theme="neon"] .nav-links > li > a.active { color: #00FFC8; } [data-theme="neon"] .nav-dropdown { background: #111120; border-color: rgba(0,255,200,0.12); box-shadow: 0 16px 48px rgba(0,0,0,0.8), 0 0 32px rgba(0,255,200,0.06); } [data-theme="neon"] .nav-dropdown a { color: rgba(230,230,245,0.75); border-bottom-color: rgba(0,255,200,0.07); } [data-theme="neon"] .nav-dropdown a:hover { background: rgba(0,255,200,0.06); color: #00FFC8; } [data-theme="neon"] .nav-toggle span { background: rgba(230,230,245,0.80); } [data-theme="neon"] .nav-logo-name { color: #E8E8F0; } [data-theme="neon"] .nav-logo-mark { background: #00FFC8; color: #0A0A12; } /* ── Mobile nav ── */ [data-theme="neon"] .nav-mobile { background: #0D0D18; border-top: 1px solid rgba(0,255,200,0.10); } [data-theme="neon"] .nav-mobile a { color: rgba(230,230,245,0.80); border-bottom-color: rgba(0,255,200,0.07); } [data-theme="neon"] .nav-mobile a:hover { color: #00FFC8; } [data-theme="neon"] .nav-mobile-group-title { color: rgba(0,255,200,0.55); } /* ── Sections ── */ [data-theme="neon"] .section-dark, [data-theme="neon"] .section-darker, [data-theme="neon"] .section-card { background: #0D0D18; } [data-theme="neon"] .section-light { background: #111120; color: #E8E8F0; } [data-theme="neon"] .section-light h1, [data-theme="neon"] .section-light h2, [data-theme="neon"] .section-light h3, [data-theme="neon"] .section-light h4 { color: #E8E8F0; } [data-theme="neon"] .section-light p { color: rgba(230,230,245,0.75); } /* ── Hero ── */ [data-theme="neon"] .hero { background: #0A0A12; } /* ── Eyebrows ── */ [data-theme="neon"] .section-eyebrow { color: #00FFC8; } [data-theme="neon"] .section-eyebrow::before { background: #00FFC8; } /* ── Buttons ── */ [data-theme="neon"] .btn-primary, [data-theme="neon"] .btn-emerald { background: #00FFC8; color: #0A0A12; border-color: #00FFC8; font-weight: 700; } [data-theme="neon"] .btn-primary:hover, [data-theme="neon"] .btn-emerald:hover { background: #00E0B0; border-color: #00E0B0; box-shadow: 0 8px 32px rgba(0,255,200,0.35); } [data-theme="neon"] .btn-outline { color: rgba(230,230,245,0.85); border-color: rgba(230,230,245,0.25); } [data-theme="neon"] .btn-outline:hover { border-color: #00FFC8; color: #00FFC8; } [data-theme="neon"] .btn-outline-blue { color: #00FFC8; border-color: rgba(0,255,200,0.35); } [data-theme="neon"] .btn-outline-blue:hover { background: rgba(0,255,200,0.10); color: #00FFC8; border-color: #00FFC8; } [data-theme="neon"] .btn-ghost { background: rgba(0,255,200,0.07); border-color: rgba(0,255,200,0.18); color: #E8E8F0; } [data-theme="neon"] .btn-ghost:hover { background: rgba(0,255,200,0.13); } /* ── Cards ── */ [data-theme="neon"] .card, [data-theme="neon"] .card-light { background: #111120; border-color: rgba(0,255,200,0.08); box-shadow: 0 4px 20px rgba(0,0,0,.5); } [data-theme="neon"] .card:hover, [data-theme="neon"] .card-light:hover { border-color: rgba(0,255,200,0.22); box-shadow: 0 16px 48px rgba(0,0,0,.6), 0 0 24px rgba(0,255,200,0.08); } [data-theme="neon"] .card-glass { background: rgba(0,255,200,0.04); border-color: rgba(0,255,200,0.12); } [data-theme="neon"] .card-glass:hover { background: rgba(0,255,200,0.08); border-color: rgba(0,255,200,0.22); } /* ── White-card context reset → neon-card ── */ [data-theme="neon"] .arch-card, [data-theme="neon"] .service-card, [data-theme="neon"] .industry-card, [data-theme="neon"] .cs-body, [data-theme="neon"] .cs-big-metric, [data-theme="neon"] .feature-panel, [data-theme="neon"] .testimonial-card, [data-theme="neon"] .blog-card, [data-theme="neon"] .region-card, [data-theme="neon"] .process-step, [data-theme="neon"] .award-card, [data-theme="neon"] .resource-card, [data-theme="neon"] .contact-info-item, [data-theme="neon"] .tool-chip { --ctx-h: #E8E8F0; --ctx-body: rgba(230,230,245,0.72); --ctx-muted: rgba(200,200,220,0.45); --ctx-border: rgba(0,255,200,0.10); --ctx-faq-bg: rgba(0,255,200,0.06); } /* ── Service / Industry / Arch cards ── */ [data-theme="neon"] .service-card, [data-theme="neon"] .industry-card, [data-theme="neon"] .arch-card, [data-theme="neon"] .feature-panel, [data-theme="neon"] .award-card, [data-theme="neon"] .resource-card, [data-theme="neon"] .testimonial-card, [data-theme="neon"] .blog-card, [data-theme="neon"] .region-card, [data-theme="neon"] .process-step, [data-theme="neon"] .contact-info-item { background: #111120; border: 1px solid rgba(0,255,200,0.08); } [data-theme="neon"] .service-card:hover, [data-theme="neon"] .industry-card:hover, [data-theme="neon"] .arch-card:hover, [data-theme="neon"] .blog-card:hover, [data-theme="neon"] .region-card:hover { border-color: rgba(0,255,200,0.22); box-shadow: 0 0 24px rgba(0,255,200,0.07); } [data-theme="neon"] .service-icon, [data-theme="neon"] .arch-icon, [data-theme="neon"] .contact-icon, [data-theme="neon"] .industry-icon { background: rgba(0,255,200,0.08); color: #00FFC8; } /* ── Process step numbers ── */ [data-theme="neon"] .process-step-num { background: rgba(0,255,200,0.10); color: #00FFC8; } /* ── Tool chips ── */ [data-theme="neon"] .tool-chip { background: rgba(0,255,200,0.07); border: 1px solid rgba(0,255,200,0.15); color: rgba(230,230,245,0.85); } [data-theme="neon"] .tool-chip:hover { background: rgba(0,255,200,0.13); border-color: rgba(0,255,200,0.30); color: #00FFC8; } /* ── Trust bar ── */ [data-theme="neon"] .trust-bar { background: #0D0D18; border-top: 1px solid rgba(0,255,200,0.07); border-bottom: 1px solid rgba(0,255,200,0.07); } [data-theme="neon"] .trust-logo { color: rgba(230,230,245,0.30); } [data-theme="neon"] .trust-logo:hover { color: rgba(230,230,245,0.70); } /* ── Metrics / stats ── */ [data-theme="neon"] .hero-stat-num, [data-theme="neon"] .metric-num { color: #00FFC8; } /* ── Text utilities ── */ [data-theme="neon"] .text-gradient { background: linear-gradient(135deg, #00FFC8 0%, #7C3AED 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="neon"] .text-gradient-gold { background: linear-gradient(135deg, #7C3AED 0%, #00FFC8 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } [data-theme="neon"] .text-emerald { color: #00FFC8; } [data-theme="neon"] .text-blue { color: #7C3AED; } [data-theme="neon"] .text-accent { color: #00FFC8; } /* ── FAQ ── */ [data-theme="neon"] .faq-item { border-color: rgba(0,255,200,0.09); } [data-theme="neon"] .faq-question { color: rgba(230,230,245,0.85); } [data-theme="neon"] .faq-question:hover { color: #00FFC8; } [data-theme="neon"] .faq-item.open .faq-question { color: #00FFC8; } [data-theme="neon"] .faq-icon { background: rgba(0,255,200,0.08); color: #00FFC8; } [data-theme="neon"] .faq-answer { color: rgba(230,230,245,0.65); } /* ── CTA Banner ── */ [data-theme="neon"] .cta-banner { background: linear-gradient(135deg, #0D0D18 0%, #111120 100%); border-top: 1px solid rgba(0,255,200,0.12); border-bottom: 1px solid rgba(0,255,200,0.12); } /* ── Case studies ── */ [data-theme="neon"] .cs-body, [data-theme="neon"] .cs-big-metric { background: #111120; border-color: rgba(0,255,200,0.08); } [data-theme="neon"] .cs-big-metric-num { color: #00FFC8; } [data-theme="neon"] .cs-header { background: linear-gradient(135deg, #0D0D18 0%, #111120 100%); border-color: rgba(0,255,200,0.10); } /* ── Forms ── */ [data-theme="neon"] input, [data-theme="neon"] textarea, [data-theme="neon"] select { background: #111120; border-color: rgba(0,255,200,0.15); color: #E8E8F0; } [data-theme="neon"] input::placeholder, [data-theme="neon"] textarea::placeholder { color: rgba(200,200,220,0.35); } [data-theme="neon"] input:focus, [data-theme="neon"] textarea:focus, [data-theme="neon"] select:focus { border-color: #00FFC8; box-shadow: 0 0 0 3px rgba(0,255,200,0.12); } [data-theme="neon"] label { color: rgba(230,230,245,0.70); } /* ── Footer ── */ [data-theme="neon"] footer { background: #050508; border-top: 1px solid rgba(0,255,200,0.08); } [data-theme="neon"] .footer-social { background: rgba(0,255,200,0.06); border-color: rgba(0,255,200,0.15); color: rgba(230,230,245,0.65); } [data-theme="neon"] .footer-social:hover { background: rgba(0,255,200,0.12); color: #00FFC8; border-color: #00FFC8; } [data-theme="neon"] .footer-bottom { border-top-color: rgba(0,255,200,0.08); } /* ── Scroll-top btn ── */ [data-theme="neon"] .scroll-top-btn { background: rgba(0,255,200,0.12); color: #00FFC8; border: 1px solid rgba(0,255,200,0.25); } [data-theme="neon"] .scroll-top-btn:hover { background: rgba(0,255,200,0.20); } /* ── Divider ── */ [data-theme="neon"] .divider { background: rgba(0,255,200,0.10); } /* ── Page hero ── */ [data-theme="neon"] .page-hero { background: linear-gradient(135deg, #0A0A12 0%, #0D0D18 100%); border-bottom: 1px solid rgba(0,255,200,0.10); } /* ── Scrollbar ── */ [data-theme="neon"] ::-webkit-scrollbar { width: 8px; } [data-theme="neon"] ::-webkit-scrollbar-track { background: #0A0A12; } [data-theme="neon"] ::-webkit-scrollbar-thumb { background: rgba(0,255,200,0.25); border-radius: 4px; } [data-theme="neon"] ::-webkit-scrollbar-thumb:hover { background: rgba(0,255,200,0.45); }