/* ======================================== Neon / Cyberpunk Theme Activated via data-style="neon" on ======================================== */ /* Neon color variables */ [data-style="neon"] { --color-bg: #050510; --color-bg-elevated: rgba(15, 10, 40, 0.8); --color-bg-card: rgba(20, 12, 55, 0.55); --color-bg-card-hover: rgba(30, 18, 70, 0.7); --color-border: rgba(0, 240, 255, 0.15); --color-text: #e8e8ff; --color-text-muted: #a0a0cc; --color-text-dim: #6060a0; --color-primary: #00f0ff; --color-primary-light: #00f0ff; --color-accent-blue: #4080ff; --color-accent-cyan: #00f0ff; --color-accent-amber: #ffaa00; --color-accent-green: #00ff88; --color-accent-rose: #ff2080; --color-accent-purple: #bf00ff; --gradient-primary: linear-gradient(135deg, #00f0ff, #bf00ff); --gradient-text: linear-gradient(135deg, #00f0ff, #bf00ff); --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.5); --shadow-glow: 0 0 30px rgba(0, 240, 255, 0.2), 0 0 60px rgba(191, 0, 255, 0.1); --header-bg: rgba(5, 5, 16, 0.9); --nav-mobile-bg: #0a0a20; --nav-link-active-bg: rgba(0, 240, 255, 0.15); --nav-link-hover-bg: rgba(0, 240, 255, 0.1); --nav-link-color: #e8e8ff; --turnstile-theme: dark; /* Neon-specific vars */ --neon-cyan: #00f0ff; --neon-magenta: #bf00ff; --neon-glow-cyan: 0 0 10px rgba(0, 240, 255, 0.3), 0 0 30px rgba(0, 240, 255, 0.15); --neon-glow-magenta: 0 0 10px rgba(191, 0, 255, 0.3), 0 0 30px rgba(191, 0, 255, 0.15); --neon-glow-mixed: 0 0 15px rgba(0, 240, 255, 0.2), 0 0 40px rgba(191, 0, 255, 0.1); } /* Background grid pattern */ [data-style="neon"] body { background: linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px), radial-gradient(ellipse at 20% 50%, rgba(191, 0, 255, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(0, 240, 255, 0.06) 0%, transparent 50%), var(--color-bg); background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%, 100% 100%; } /* Header glow */ [data-style="neon"] .header { border-bottom: 1px solid rgba(0, 240, 255, 0.12); box-shadow: 0 1px 20px rgba(0, 240, 255, 0.08); } /* Nav links neon glow */ [data-style="neon"] .nav-link:hover { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); } [data-style="neon"] .nav-link.active { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.12); text-shadow: 0 0 10px rgba(0, 240, 255, 0.6); } /* Logo glow */ [data-style="neon"] .logo-mark { background: var(--gradient-primary); box-shadow: var(--neon-glow-mixed); } /* ======================================== Cards — Glassmorphism + Neon Borders ======================================== */ [data-style="neon"] .hero-card, [data-style="neon"] .service-card, [data-style="neon"] .stat, [data-style="neon"] .about-card, [data-style="neon"] .contact-card, [data-style="neon"] .contact-form { background: var(--color-bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 240, 255, 0.15); box-shadow: 0 0 15px rgba(0, 240, 255, 0.06), inset 0 0 20px rgba(191, 0, 255, 0.03); position: relative; } /* Card hover — intensify glow */ [data-style="neon"] .hero-card:hover, [data-style="neon"] .service-card:hover, [data-style="neon"] .stat:hover { border-color: rgba(0, 240, 255, 0.35); box-shadow: 0 0 20px rgba(0, 240, 255, 0.15), 0 0 50px rgba(191, 0, 255, 0.08), inset 0 0 25px rgba(191, 0, 255, 0.05); } /* Corner glow accents on cards */ [data-style="neon"] .service-card::before { content: ''; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: inherit; background: linear-gradient(135deg, rgba(0, 240, 255, 0.2) 0%, transparent 30%, transparent 70%, rgba(191, 0, 255, 0.2) 100%); z-index: -1; opacity: 0; transition: opacity 0.4s ease; } [data-style="neon"] .service-card:hover::before { opacity: 1; } /* ======================================== Text Glow Effects ======================================== */ [data-style="neon"] .hero-title { text-shadow: 0 0 30px rgba(0, 240, 255, 0.15); } [data-style="neon"] .gradient-text { background: linear-gradient(135deg, #00f0ff, #bf00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 12px rgba(0, 240, 255, 0.3)); } [data-style="neon"] .hero-label { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.4); } [data-style="neon"] .section-label { color: var(--neon-cyan); text-shadow: 0 0 10px rgba(0, 240, 255, 0.4); } [data-style="neon"] .section-title { text-shadow: 0 0 20px rgba(0, 240, 255, 0.1); } /* ======================================== Stats Neon ======================================== */ [data-style="neon"] .stat-value { background: linear-gradient(135deg, #00f0ff, #bf00ff); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 8px rgba(0, 240, 255, 0.3)); } /* ======================================== Buttons Neon ======================================== */ [data-style="neon"] .btn-primary { background: linear-gradient(135deg, #00f0ff, #bf00ff); color: #050510; font-weight: 600; border: none; box-shadow: 0 0 15px rgba(0, 240, 255, 0.25), 0 0 30px rgba(191, 0, 255, 0.15); text-shadow: none; } [data-style="neon"] .btn-primary:hover { box-shadow: 0 0 25px rgba(0, 240, 255, 0.4), 0 0 50px rgba(191, 0, 255, 0.25); transform: translateY(-2px); } [data-style="neon"] .btn-outline { border: 1px solid rgba(0, 240, 255, 0.4); color: var(--neon-cyan); background: transparent; } [data-style="neon"] .btn-outline:hover { background: rgba(0, 240, 255, 0.1); border-color: var(--neon-cyan); box-shadow: var(--neon-glow-cyan); color: #ffffff; } /* ======================================== Service Icons Neon ======================================== */ [data-style="neon"] .service-icon { box-shadow: var(--neon-glow-mixed); } [data-style="neon"] .service-icon--purple { background: rgba(191, 0, 255, 0.15); color: #df80ff; } [data-style="neon"] .service-icon--blue { background: rgba(64, 128, 255, 0.15); color: #80b0ff; } [data-style="neon"] .service-icon--cyan { background: rgba(0, 240, 255, 0.15); color: #00f0ff; } [data-style="neon"] .service-icon--amber { background: rgba(255, 170, 0, 0.15); color: #ffcc44; } [data-style="neon"] .service-icon--green { background: rgba(0, 255, 136, 0.15); color: #00ff88; } [data-style="neon"] .service-icon--rose { background: rgba(255, 32, 128, 0.15); color: #ff6090; } /* Service tags */ [data-style="neon"] .service-tags li { background: rgba(0, 240, 255, 0.06); border-color: rgba(0, 240, 255, 0.15); color: var(--neon-cyan); } /* ======================================== Skill Bars Neon ======================================== */ [data-style="neon"] .skill-bar-fill { background: linear-gradient(90deg, #00f0ff, #bf00ff); box-shadow: 0 0 10px rgba(0, 240, 255, 0.4); } /* ======================================== Contact Section Neon ======================================== */ [data-style="neon"] .contact-icon { background: rgba(0, 240, 255, 0.1); color: var(--neon-cyan); } [data-style="neon"] .form-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 12px rgba(0, 240, 255, 0.2); } [data-style="neon"] .form-input { background: rgba(10, 8, 30, 0.6); border: 1px solid rgba(0, 240, 255, 0.12); } /* ======================================== Social Links Neon ======================================== */ [data-style="neon"] .social-link { background: rgba(20, 12, 55, 0.5); border: 1px solid rgba(0, 240, 255, 0.12); } [data-style="neon"] .social-link:hover { border-color: rgba(0, 240, 255, 0.35); box-shadow: var(--neon-glow-cyan); } /* ======================================== Footer Neon ======================================== */ [data-style="neon"] .footer { background: rgba(5, 5, 16, 0.95); border-top: 1px solid rgba(0, 240, 255, 0.1); } /* ======================================== Cookie Banner Neon ======================================== */ [data-style="neon"] .cookie-banner { background: rgba(10, 8, 30, 0.95); border-top: 1px solid rgba(0, 240, 255, 0.15); box-shadow: 0 -4px 30px rgba(0, 240, 255, 0.08); } /* ======================================== WhatsApp FAB Neon ======================================== */ [data-style="neon"] .whatsapp-fab { box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4), 0 0 15px rgba(0, 240, 255, 0.15); } /* ======================================== Scrollbar Neon ======================================== */ [data-style="neon"] ::-webkit-scrollbar { width: 8px; } [data-style="neon"] ::-webkit-scrollbar-track { background: #050510; } [data-style="neon"] ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #00f0ff, #bf00ff); border-radius: 4px; } /* ======================================== Style Toggle Button ======================================== */ .style-toggle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: transparent; border: 1px solid var(--color-border); color: var(--color-text-muted); cursor: pointer; transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; flex-shrink: 0; position: relative; } .style-toggle:hover { color: var(--color-primary-light); border-color: rgba(99, 102, 241, 0.3); background: rgba(99, 102, 241, 0.1); } .style-toggle svg { width: 18px; height: 18px; transition: transform 0.4s ease; } .style-toggle:hover svg { transform: rotate(15deg) scale(1.1); } /* Neon mode: glow on the toggle itself */ [data-style="neon"] .style-toggle { border-color: rgba(0, 240, 255, 0.3); color: var(--neon-cyan); } [data-style="neon"] .style-toggle:hover { border-color: var(--neon-cyan); box-shadow: var(--neon-glow-cyan); color: #ffffff; } /* Toggle icon swap */ .style-icon-neon { display: block; } .style-icon-classic { display: none; } [data-style="neon"] .style-icon-neon { display: none; } [data-style="neon"] .style-icon-classic { display: block; } /* Theme toggle stays visible in neon mode — user can still switch */ /* ======================================== Nav Controls border color in neon ======================================== */ [data-style="neon"] .nav-controls { border-left-color: rgba(0, 240, 255, 0.15); } [data-style="neon"] .lang-btn:hover { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.08); } [data-style="neon"] .lang-btn.active { color: var(--neon-cyan); background: rgba(0, 240, 255, 0.12); } /* ======================================== Fact icons neon ======================================== */ [data-style="neon"] .fact-icon { background: rgba(0, 240, 255, 0.08); } /* ======================================== Pulse animation for neon buttons ======================================== */ @keyframes neonPulse { 0%, 100% { box-shadow: 0 0 15px rgba(0, 240, 255, 0.25), 0 0 30px rgba(191, 0, 255, 0.15); } 50% { box-shadow: 0 0 25px rgba(0, 240, 255, 0.35), 0 0 50px rgba(191, 0, 255, 0.2); } } [data-style="neon"] .btn-primary { animation: neonPulse 3s ease-in-out infinite; } [data-style="neon"] .btn-primary:hover { animation: none; } /* ======================================== Neon Light Theme ======================================== */ [data-style="neon"][data-theme="light"] { --color-bg: #eeeef8; --color-bg-elevated: rgba(255, 255, 255, 0.85); --color-bg-card: rgba(255, 255, 255, 0.7); --color-bg-card-hover: rgba(245, 240, 255, 0.85); --color-border: rgba(0, 180, 220, 0.2); --color-text: #1a1a30; --color-text-muted: #4a4a70; --color-text-dim: #8080a0; --color-primary: #0099cc; --color-primary-light: #0088bb; --color-accent-blue: #2060dd; --color-accent-cyan: #0099cc; --color-accent-amber: #cc8800; --color-accent-green: #00aa55; --color-accent-rose: #dd1060; --color-accent-purple: #9900cc; --gradient-primary: linear-gradient(135deg, #0099cc, #9900cc); --gradient-text: linear-gradient(135deg, #0099cc, #9900cc); --shadow-card: 0 4px 24px rgba(0, 150, 200, 0.1); --shadow-glow: 0 0 30px rgba(0, 150, 200, 0.12), 0 0 60px rgba(153, 0, 204, 0.06); --header-bg: rgba(238, 238, 248, 0.92); --nav-mobile-bg: #f5f5ff; --nav-link-active-bg: rgba(0, 153, 204, 0.1); --nav-link-hover-bg: rgba(0, 153, 204, 0.06); --nav-link-color: #1a1a30; --turnstile-theme: light; --neon-cyan: #0099cc; --neon-magenta: #9900cc; --neon-glow-cyan: 0 0 8px rgba(0, 153, 204, 0.25), 0 0 20px rgba(0, 153, 204, 0.1); --neon-glow-magenta: 0 0 8px rgba(153, 0, 204, 0.25), 0 0 20px rgba(153, 0, 204, 0.1); --neon-glow-mixed: 0 0 12px rgba(0, 153, 204, 0.15), 0 0 30px rgba(153, 0, 204, 0.08); } /* Light neon background */ [data-style="neon"][data-theme="light"] body { background: linear-gradient(rgba(0, 153, 204, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 153, 204, 0.04) 1px, transparent 1px), radial-gradient(ellipse at 20% 50%, rgba(153, 0, 204, 0.05) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(0, 153, 204, 0.04) 0%, transparent 50%), var(--color-bg); background-size: 60px 60px, 60px 60px, 100% 100%, 100% 100%, 100% 100%; } /* Light neon cards */ [data-style="neon"][data-theme="light"] .hero-card, [data-style="neon"][data-theme="light"] .service-card, [data-style="neon"][data-theme="light"] .stat, [data-style="neon"][data-theme="light"] .about-card, [data-style="neon"][data-theme="light"] .contact-card, [data-style="neon"][data-theme="light"] .contact-form { background: var(--color-bg-card); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(0, 153, 204, 0.18); box-shadow: 0 0 12px rgba(0, 153, 204, 0.06), inset 0 0 15px rgba(153, 0, 204, 0.02); } [data-style="neon"][data-theme="light"] .hero-card:hover, [data-style="neon"][data-theme="light"] .service-card:hover, [data-style="neon"][data-theme="light"] .stat:hover { border-color: rgba(0, 153, 204, 0.3); box-shadow: 0 0 18px rgba(0, 153, 204, 0.12), 0 0 40px rgba(153, 0, 204, 0.06); } /* Light neon buttons */ [data-style="neon"][data-theme="light"] .btn-primary { background: linear-gradient(135deg, #0099cc, #9900cc); color: #ffffff; box-shadow: 0 0 12px rgba(0, 153, 204, 0.2), 0 0 25px rgba(153, 0, 204, 0.1); } [data-style="neon"][data-theme="light"] .btn-outline { border: 1px solid rgba(0, 153, 204, 0.35); color: var(--neon-cyan); } /* Light neon inputs */ [data-style="neon"][data-theme="light"] .form-input { background: rgba(255, 255, 255, 0.8); border: 1px solid rgba(0, 153, 204, 0.15); } [data-style="neon"][data-theme="light"] .form-input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 10px rgba(0, 153, 204, 0.15); } /* Light neon service icons */ [data-style="neon"][data-theme="light"] .service-icon { box-shadow: var(--neon-glow-mixed); } [data-style="neon"][data-theme="light"] .service-tags li { background: rgba(0, 153, 204, 0.06); border-color: rgba(0, 153, 204, 0.15); color: var(--neon-cyan); } /* Light neon footer */ [data-style="neon"][data-theme="light"] .footer { background: rgba(238, 238, 248, 0.95); border-top: 1px solid rgba(0, 153, 204, 0.12); } /* Light neon scrollbar */ [data-style="neon"][data-theme="light"] ::-webkit-scrollbar-track { background: #eeeef8; } /* Light neon social links */ [data-style="neon"][data-theme="light"] .social-link { background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 153, 204, 0.12); } /* Light neon header */ [data-style="neon"][data-theme="light"] .header { border-bottom-color: rgba(0, 153, 204, 0.12); box-shadow: 0 1px 15px rgba(0, 153, 204, 0.06); } /* Light neon nav */ [data-style="neon"][data-theme="light"] .nav-link:hover { color: var(--neon-cyan); } [data-style="neon"][data-theme="light"] .nav-link.active { color: var(--neon-cyan); } /* Light neon cookie banner */ [data-style="neon"][data-theme="light"] .cookie-banner { background: rgba(238, 238, 248, 0.95); border-top: 1px solid rgba(0, 153, 204, 0.12); }