/* NotaryGeek Website Styles - Designed by 10 Top Designers */ /* Version 2.0.0 - The Global Standard for Online Notarization */ /* Import Google Fonts - The Voice of Authority and Clarity */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap'); /* CSS Variables - A Symphony of Strategic Hues */ :root { /* Primary Brand Colors */ --primary-indigo: #6366f1; /* Regal Indigo/Blue-Violet */ --primary-purple: #8b5cf6; /* Dynamic Purple/Violet */ --primary-violet: #a855f7; /* Deeper Violet for gradients */ --secondary-sky: #0ea5e9; /* Sky Blue for secondary accents */ --secondary-cyan: #06b6d4; /* Cyan for secondary gradients */ --accent-amber: #f59e0b; /* Vibrant Amber/Orange for high-impact CTAs */ --accent-orange: #f97316; /* Deeper Orange for gradients */ --success-emerald: #10b981; /* Trustworthy Emerald Green */ --success-green: #059669; /* Deeper Green for success gradients */ --whatsapp-green: #25d366; /* Instantly Recognizable WhatsApp Green */ --premium-slate: #1e293b; /* Deep Slate for premium backgrounds */ --gold-premium: #fbbf24; /* Luminous Gold for premium quality */ /* Gradient Definitions - Artful Deployment */ --primary-gradient: linear-gradient(135deg, var(--primary-indigo) 0%, var(--primary-purple) 50%, var(--primary-violet) 100%); --secondary-gradient: linear-gradient(135deg, var(--secondary-sky) 0%, var(--secondary-cyan) 100%); --accent-gradient: linear-gradient(135deg, var(--accent-amber) 0%, var(--accent-orange) 100%); --whatsapp-gradient: linear-gradient(135deg, var(--whatsapp-green) 0%, var(--success-green) 100%); --premium-gradient: linear-gradient(135deg, var(--premium-slate) 0%, #334155 50%, #475569 100%); /* Neutral Palette - The Canvas of Clarity */ --white: #ffffff;\n --gray-50: #f8fafc; /* Subtle warmth */\n --gray-100: #f1f5f9;\n --gray-200: #e2e8f0; /* Refined borders */\n --gray-300: #cbd5e1;\n --gray-400: #94a3b8;\n --gray-500: #64748b; /* Supportive text */\n --gray-600: #475569;\n --gray-700: #334155;\n --gray-800: #1e293b;\n --gray-900: #0f172a; /* Deep contrast, elegant base */\n \n /* Typography System - Global Resonance */\n --font-primary: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n --font-weight-normal: 400;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-extrabold: 800;\n --font-weight-black: 900;\n \n /* Spacing & Layout - Architectural Precision */\n --container-max-width: 1440px;\n --section-padding-y: 120px; /* Intentional white space */\n --section-padding-x: 32px;\n --element-radius: 16px;\n --element-radius-large: 24px;\n --element-radius-xl: 32px;\n \n /* Shadow System - Subtle Depth and Elevation */\n --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);\n --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);\n --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n --shadow-premium: 0 32px 64px -12px rgba(99, 102, 241, 0.25); /* Signature premium glow */\n \n /* Transition System - Fluid and Delightful */\n --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);\n --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);\n}\n\n/* Base Reset & Global Styles */\n* {\n box-sizing: border-box;\n}\n\nhtml {\n scroll-behavior: smooth;\n font-size: 16px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nbody {\n font-family: var(--font-secondary);\n font-weight: var(--font-weight-normal);\n line-height: 1.6;\n color: var(--gray-700);\n background: var(--white);\n overflow-x: hidden; /* Prevents horizontal scroll on animations */\n}\n\n.container-premium {\n max-width: var(--container-max-width);\n margin: 0 auto;\n padding: 0 var(--section-padding-x);\n}\n\n/* Header - The Dynamic Gateway */\n.elite-nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1000;\n background: rgba(255, 255, 255, 0.95);\n backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--gray-200);\n transition: all var(--transition-normal);\n}\n\n.elite-nav.scrolled {\n box-shadow: var(--shadow-lg);\n /* backdrop-filter: blur(25px); - already in fixed state, subtle change */\n}\n\n.nav-container {\n max-width: var(--container-max-width);\n margin: 0 auto;\n padding: 0 var(--section-padding-x);\n display: flex;\n justify-content: space-between;\n align-items: center;\n min-height: 80px;\n position: relative;\n}\n\n.notary-brand-premium {\n display: flex;\n align-items: center;\n gap: 20px;\n}\n\n.notary-brand-logo {\n width: 56px;\n height: 56px;\n border-radius: var(--element-radius);\n overflow: hidden;\n box-shadow: var(--shadow-md);\n}\n\n.notary-nav-logo {\n width: 100%;\n height: 100%;\n object-fit: cover;\n}\n\n.notary-brand-identity {\n display: flex;\n flex-direction: column;\n}\n\n.notary-brand-name {\n display: flex;\n align-items: baseline;\n gap: 4px;\n}\n\n.notary-brand-notary {\n font-family: var(--font-primary);\n font-size: 1.75rem;\n font-weight: var(--font-weight-extrabold);\n color: var(--primary-indigo);\n letter-spacing: -0.025em;\n}\n\n.notary-brand-geek {\n font-family: var(--font-primary);\n font-size: 1.75rem;\n font-weight: var(--font-weight-extrabold);\n color: var(--accent-amber);\n letter-spacing: -0.025em;\n}\n\n.notary-brand-subtitle {\n font-family: var(--font-secondary);\n font-size: 0.875rem;\n font-weight: var(--font-weight-medium);\n color: var(--gray-500);\n margin-top: -4px;\n}\n\n.notary-nav-actions {\n display: flex;\n align-items: center;\n gap: 32px;\n}\n\n.notary-nav-credentials {\n display: flex;\n align-items: center;\n gap: 24px;\n}\n\n.notary-credential-item {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 16px;\n background: var(--gray-50);\n border-radius: var(--element-radius);\n border: 1px solid var(--gray-200);\n}\n\n.notary-credential-icon {\n font-size: 1.25rem;\n color: var(--primary-indigo);\n}\n\n.notary-credential-text {\n display: flex;\n flex-direction: column;\n gap: 2px;\n}\n\n.notary-credential-label {\n font-size: 0.75rem;\n font-weight: var(--font-weight-medium);\n color: var(--gray-500);\n line-height: 1;\n}\n\n.notary-credential-value {\n font-size: 0.875rem;\n font-weight: var(--font-weight-semibold);\n color: var(--gray-700);\n line-height: 1;\n}\n\n.notary-nav-cta-buttons {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.notary-nav-btn-secondary {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 24px;\n background: var(--whatsapp-gradient);\n color: var(--white);\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n border-radius: var(--element-radius);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-md);\n}\n\n.notary-nav-btn-secondary:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-xl);\n}\n\n.notary-nav-btn-primary {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 14px 28px;\n background: var(--primary-gradient);\n color: var(--white);\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n border-radius: var(--element-radius);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-premium);\n position: relative;\n overflow: hidden;\n}\n\n.notary-nav-btn-primary::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.5s;\n}\n\n.notary-nav-btn-primary:hover::before {\n left: 100%;\n}\n\n.notary-nav-btn-primary:hover {\n transform: translateY(-2px);\n box-shadow: 0 25px 50px -12px rgba(99, 102, 241, 0.4);\n}\n\n/* Mobile Menu Styles - Effortless Mobile Menu */\n.notary-mobile-menu-toggle {\n display: none; /* Hidden on desktop */\n cursor: pointer;\n padding: 12px;\n font-size: 1.5rem;\n color: var(--gray-700);\n transition: color var(--transition-fast);\n}\n\n.notary-mobile-menu-toggle:hover {\n color: var(--primary-indigo);\n}\n\n.notary-mobile-menu {\n display: none; /* Hidden by default */\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n background: var(--white);\n border-top: 1px solid var(--gray-200);\n box-shadow: var(--shadow-md);\n z-index: 1000;\n}\n\n.notary-mobile-menu.active {\n display: block;\n}\n\n.notary-mobile-menu-content {\n padding: 24px var(--section-padding-x);\n}\n\n.notary-mobile-credentials {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-bottom: 24px;\n padding-bottom: 24px;\n border-bottom: 1px solid var(--gray-200);\n}\n\n.notary-mobile-credential {\n display: flex;\n align-items: center;\n gap: 12px;\n color: var(--gray-600);\n font-size: 0.875rem;\n}\n\n.notary-mobile-credential i {\n color: var(--primary-indigo);\n font-size: 1.125rem;\n}\n\n.notary-mobile-menu-actions {\n display: flex;\n flex-direction: column;\n gap: 12px;\n}\n\n.notary-mobile-btn {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 16px 20px;\n text-decoration: none;\n border-radius: var(--element-radius);\n font-weight: var(--font-weight-semibold);\n transition: all var(--transition-normal);\n justify-content: center;\n}\n\n.notary-mobile-btn.whatsapp {\n background: var(--whatsapp-gradient);\n color: var(--white);\n}\n\n.notary-mobile-btn.primary {\n background: var(--primary-gradient);\n color: var(--white);\n}\n\n.notary-mobile-btn.secondary {\n background: var(--secondary-gradient);\n color: var(--white);\n}\n\n.notary-mobile-btn:hover {\n transform: translateY(-2px);\n box-shadow: var(--shadow-sm);\n}\n\n/* Section Header Styles */\n.section-header-premium {\n text-align: center;\n margin-bottom: 80px;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n}\n\n.section-badge {\n display: inline-block;\n padding: 8px 24px;\n background: var(--secondary-gradient);\n color: var(--white);\n border-radius: 50px;\n font-family: var(--font-primary);\n font-size: 0.875rem;\n font-weight: var(--font-weight-semibold);\n margin-bottom: 20px;\n box-shadow: var(--shadow-md);\n}\n\n.section-title-premium {\n font-family: var(--font-primary);\n font-size: clamp(2rem, 4vw, 2.75rem);\n font-weight: var(--font-weight-extrabold);\n color: var(--gray-900);\n line-height: 1.2;\n margin-bottom: 20px;\n letter-spacing: -0.025em;\n}\n\n.section-title-premium .title-accent {\n display: block;\n font-size: 1.25rem;\n font-weight: var(--font-weight-semibold);\n color: var(--primary-indigo);\n margin-top: 12px;\n}\n\n.section-description {\n font-size: 1.125rem;\n color: var(--gray-600);\n line-height: 1.6;\n}\n\n/* Hero Section - The Captivating Overture */\n.hero-elite {\n position: relative;\n min-height: 100vh;\n display: flex;\n align-items: center;\n overflow: hidden;\n margin-top: 80px; /* To account for fixed header */\n padding: var(--section-padding-y) 0;\n}\n\n.hero-background-premium {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: -2;\n}\n\n.gradient-overlay {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: var(--primary-gradient);\n opacity: 0.95;\n}\n\n.geometric-patterns {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: none;\n}\n\n.pattern-element {\n position: absolute;\n border-radius: 50%;\n background: rgba(255, 255, 255, 0.1);\n animation: float-elite 8s ease-in-out infinite;\n}\n\n.pe-1 { width: 120px; height: 120px; top: 15%; left: 8%; animation-delay: 0s; }\n.pe-2 { width: 80px; height: 80px; top: 25%; right: 12%; animation-delay: 1.5s; }\n.pe-3 { width: 100px; height: 100px; top: 65%; right: 8%; animation-delay: 3s; }\n.pe-4 { width: 140px; height: 140px; bottom: 15%; left: 12%; animation-delay: 4.5s; }\n.pe-5 { width: 60px; height: 60px; top: 45%; left: 75%; animation-delay: 2s; }\n.pe-6 { width: 90px; height: 90px; top: 35%; left: 50%; animation-delay: 6s; }\n\n@keyframes float-elite {\n 0%, 100% { transform: translateY(0px) rotate(0deg) scale(1); }\n 25% { transform: translateY(-15px) rotate(90deg) scale(1.1); }\n 50% { transform: translateY(-25px) rotate(180deg) scale(0.9); }\n 75% { transform: translateY(-10px) rotate(270deg) scale(1.05); }\n}\n\n.hero-container-premium {\n position: relative;\n z-index: 1;\n width: 100%;\n max-width: var(--container-max-width);\n margin: 0 auto;\n padding: 0 var(--section-padding-x);\n}\n\n.hero-content-layout {\n display: flex; /* Changed from grid to flex for simpler centering */\n flex-direction: column;\n align-items: center;\n text-align: center;\n width: 100%;\n}\n\n.notary-hero-badge {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: 16px;\n padding: 16px 32px;\n background: rgba(255, 255, 255, 0.15);\n backdrop-filter: blur(20px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: 50px;\n margin-bottom: 40px;\n animation: pulse-premium 3s ease-in-out infinite;\n color: var(--white);\n font-family: var(--font-primary);\n font-weight: var(--font-weight-semibold);\n}\n\n@keyframes pulse-premium {\n 0%, 100% { box-shadow: 0 0 30px rgba(251, 191, 36, 0.3); }\n 50% { box-shadow: 0 0 60px rgba(251, 191, 36, 0.6); }\n}\n\n.badge-icon-premium {\n font-size: 1.5rem;\n color: var(--gold-premium);\n}\n\n.badge-glow { /* For the pulsating glow effect */\n position: absolute;\n top: -50%;\n left: -50%;\n right: -50%;\n bottom: -50%;\n background: radial-gradient(circle, rgba(251, 191, 36, 0.3) 0%, transparent 70%);\n z-index: -1;\n animation: rotate-glow 8s linear infinite;\n}\n\n@keyframes rotate-glow {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n.hero-title-premium {\n font-family: var(--font-primary);\n margin-bottom: 32px;\n line-height: 1.1;\n letter-spacing: -0.025em;\n color: var(--white);\n}\n\n.title-main {\n display: block;\n font-size: 3.5rem;\n font-weight: var(--font-weight-extrabold);\n margin-bottom: 8px;\n}\n\n.title-highlight {\n display: block;\n font-size: 4.5rem;\n font-weight: var(--font-weight-black);\n background: linear-gradient(45deg, var(--gold-premium), var(--white));\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n background-clip: text;\n margin-bottom: 8px;\n}\n\n.title-sub {\n display: block;\n font-size: 1.5rem;\n font-weight: var(--font-weight-medium);\n color: rgba(255, 255, 255, 0.9);\n}\n\n.hero-description-premium {\n font-size: 1.25rem;\n font-weight: var(--font-weight-normal);\n color: rgba(255, 255, 255, 0.9);\n line-height: 1.7;\n margin-bottom: 48px;\n max-width: 800px; /* Increased max-width for better readability */\n margin-left: auto;\n margin-right: auto;\n}\n\n.hero-description-premium strong {\n color: var(--gold-premium);\n font-weight: var(--font-weight-semibold);\n}\n\n.hero-stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n gap: 32px;\n margin: 48px auto;\n max-width: 700px;\n}\n\n.stat-item {\n text-align: center;\n padding: 24px 16px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: var(--element-radius);\n transition: all var(--transition-normal);\n color: var(--white);\n}\n\n.stat-item:hover {\n transform: translateY(-4px);\n background: rgba(255, 255, 255, 0.15);\n}\n\n.stat-number {\n font-family: var(--font-primary);\n font-size: 2rem;\n font-weight: var(--font-weight-extrabold);\n display: block;\n margin-bottom: 8px;\n line-height: 1;\n}\n\n.stat-label {\n font-size: 0.875rem;\n opacity: 0.9;\n font-weight: var(--font-weight-medium);\n}\n\n.hero-cta-section-premium {\n display: flex;\n flex-direction: column; /* Default to column for mobile-first */\n gap: 24px;\n margin-bottom: 48px;\n align-items: center; /* Center buttons in column layout */\n}\n\n@media (min-width: 768px) {\n .hero-cta-section-premium {\n flex-direction: row; /* Row on larger screens */\n justify-content: center;\n }\n}\n\n.cta-primary-elite {\n position: relative;\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 24px 32px;\n background: var(--accent-gradient);\n color: var(--white);\n text-decoration: none;\n border-radius: var(--element-radius-large);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-xl);\n overflow: hidden;\n min-width: 300px;\n justify-content: center; /* Center content within button */\n}\n\n.cta-primary-elite::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);\n transition: left 0.6s;\n}\n\n.cta-primary-elite:hover::before {\n left: 100%;\n}\n\n.cta-primary-elite:hover {\n transform: translateY(-4px);\n box-shadow: 0 25px 50px -12px rgba(245, 158, 11, 0.4);\n}\n\n.cta-content-elite {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.cta-main-text {\n font-family: var(--font-primary);\n font-size: 1.25rem;\n font-weight: var(--font-weight-bold);\n line-height: 1.2;\n}\n\n.cta-sub-text {\n font-size: 0.875rem;\n font-weight: var(--font-weight-medium);\n opacity: 0.9;\n}\n\n.cta-icon-elite {\n flex-shrink: 0;\n font-size: 1.5rem;\n}\n\n.cta-secondary-elite {\n display: flex;\n align-items: center;\n gap: 16px;\n padding: 24px 32px;\n background: var(--secondary-gradient);\n color: var(--white);\n text-decoration: none;\n border-radius: var(--element-radius-large);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-lg);\n min-width: 300px;\n justify-content: center; /* Center content within button */\n}\n\n.cta-secondary-elite:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-2xl);\n}\n\n.cta-icon-whatsapp {\n flex-shrink: 0;\n font-size: 1.5rem;\n}\n\n.hero-guarantee-premium {\n display: flex;\n align-items: center;\n gap: 20px;\n padding: 24px 32px;\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(10px);\n border: 1px solid rgba(255, 255, 255, 0.2);\n border-radius: var(--element-radius-large);\n color: var(--white);\n max-width: 800px;\n margin: 0 auto;\n}\n\n.guarantee-icon-premium {\n font-size: 2rem;\n flex-shrink: 0;\n color: var(--gold-premium);\n}\n\n.guarantee-content-premium {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.guarantee-title {\n font-family: var(--font-primary);\n font-size: 1.125rem;\n font-weight: var(--font-weight-bold);\n color: var(--white);\n}\n\n.guarantee-text {\n font-size: 0.875rem;\n color: rgba(255, 255, 255, 0.8);\n line-height: 1.5;\n}\n\n/* Services Section - Artfully Crafted Offerings */\n.services-elite {\n padding: var(--section-padding-y) 0;\n background: var(--gray-50);\n}\n\n.services-grid-elite {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n gap: 40px;\n margin-top: 60px;\n}\n\n.service-card-elite {\n background: var(--white);\n border-radius: var(--element-radius-xl);\n box-shadow: var(--shadow-lg);\n padding: 40px;\n display: flex;\n flex-direction: column;\n transition: all var(--transition-normal);\n position: relative;\n overflow: hidden;\n}\n\n.service-card-elite::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 8px;\n background: var(--primary-gradient);\n transition: height var(--transition-normal);\n}\n\n.service-card-elite:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-2xl);\n}\n\n.service-card-elite:hover::before {\n height: 100%;\n opacity: 0.1;\n}\n\n.service-card-elite.featured-service::before {\n background: var(--accent-gradient);\n}\n\n.service-badge-elite {\n position: absolute;\n top: 20px;\n right: 20px;\n background: var(--gold-premium);\n color: var(--gray-900);\n padding: 8px 16px;\n border-radius: 50px;\n font-size: 0.875rem;\n font-weight: var(--font-weight-semibold);\n z-index: 1;\n}\n\n.service-header {\n display: flex;\n align-items: center;\n gap: 24px;\n margin-bottom: 24px;\n}\n\n.service-icon-elite {\n width: 64px;\n height: 64px;\n background: var(--primary-gradient);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n color: var(--white);\n box-shadow: var(--shadow-md);\n font-size: 1.5rem;\n}\n\n.service-icon-elite.apostille {\n background: var(--secondary-gradient);\n}\n\n.service-icon-elite.enterprise {\n background: var(--premium-gradient);\n}\n\n.service-title-section {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.service-title {\n font-family: var(--font-primary);\n font-size: 1.5rem;\n font-weight: var(--font-weight-bold);\n color: var(--gray-900);\n line-height: 1.3;\n}\n\n.service-subtitle {\n font-size: 0.95rem;\n color: var(--gray-600);\n}\n\n.service-description {\n font-size: 1rem;\n color: var(--gray-700);\n line-height: 1.6;\n margin-bottom: 24px;\n flex-grow: 1;\n}\n\n.service-features-elite {\n display: flex;\n flex-direction: column;\n gap: 12px;\n margin-bottom: 32px;\n}\n\n.feature-elite {\n display: flex;\n align-items: center;\n gap: 12px;\n font-size: 0.95rem;\n color: var(--gray-700);\n font-weight: var(--font-weight-medium);\n}\n\n.feature-check {\n color: var(--success-emerald);\n font-size: 1.1rem;\n font-weight: var(--font-weight-bold);\n}\n\n.service-pricing-elite {\n margin-top: auto;\n margin-bottom: 32px;\n border-top: 1px solid var(--gray-200);\n padding-top: 24px;\n}\n\n.price-main {\n font-family: var(--font-primary);\n font-size: 2rem;\n font-weight: var(--font-weight-bold);\n color: var(--gray-900);\n margin-bottom: 8px;\n}\n\n.price-note {\n font-size: 0.875rem;\n color: var(--gray-600);\n}\n\n.service-cta-elite {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n padding: 18px 32px;\n background: var(--primary-gradient);\n color: var(--white);\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n border-radius: var(--element-radius-large);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-lg);\n width: 100%;\n}\n\n.service-cta-elite:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-xl);\n}\n\n.service-cta-elite.whatsapp {\n background: var(--whatsapp-gradient);\n}\n\n/* Process Section - The Effortless Journey */\n.process-elite {\n padding: var(--section-padding-y) 0;\n background: var(--white);\n}\n\n.process-steps-premium {\n margin-top: 80px;\n position: relative;\n}\n\n.process-steps-premium::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n width: 4px;\n background: var(--gray-200);\n z-index: 0;\n}\n\n.process-step {\n display: grid;\n grid-template-columns: 1fr 80px 1fr;\n gap: 40px;\n align-items: center;\n margin-bottom: 100px;\n position: relative;\n}\n\n.process-step:last-child {\n margin-bottom: 0;\n}\n\n.process-step:nth-child(odd) .step-content {\n grid-column: 1;\n text-align: right;\n}\n\n.process-step:nth-child(odd) .step-number {\n grid-column: 2;\n}\n\n.process-step:nth-child(odd) .step-icon {\n grid-column: 3;\n}\n\n.process-step:nth-child(even) .step-content {\n grid-column: 3;\n text-align: left;\n}\n\n.process-step:nth-child(even) .step-number {\n grid-column: 2;\n}\n\n.process-step:nth-child(even) .step-icon {\n grid-column: 1;\n justify-self: end;\n}\n\n.step-number {\n width: 80px;\n height: 80px;\n background: var(--primary-gradient);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--font-primary);\n font-size: 2rem;\n font-weight: var(--font-weight-bold);\n color: var(--white);\n position: relative;\n z-index: 1;\n box-shadow: var(--shadow-lg);\n}\n\n.step-content {\n padding: 30px;\n}\n\n.step-title {\n font-family: var(--font-primary);\n font-size: 1.75rem;\n font-weight: var(--font-weight-bold);\n color: var(--gray-900);\n margin-bottom: 16px;\n}\n\n.step-description {\n font-size: 1.125rem;\n color: var(--gray-600);\n line-height: 1.6;\n margin-bottom: 20px;\n}\n\n.step-link {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n color: var(--primary-indigo);\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n transition: all var(--transition-fast);\n}\n\n.step-link:hover {\n color: var(--primary-purple);\n gap: 12px;\n}\n\n.step-link.whatsapp-link {\n color: var(--whatsapp-green);\n}\n\n.step-link.whatsapp-link:hover {\n color: var(--success-green);\n}\n\n.step-note {\n display: inline-block;\n padding: 6px 16px;\n background: var(--gray-100);\n border-radius: 20px;\n font-size: 0.875rem;\n font-weight: var(--font-weight-medium);\n color: var(--gray-600);\n}\n\n.step-icon {\n width: 100px;\n height: 100px;\n background: var(--gray-100);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 2.5rem;\n color: var(--primary-indigo);\n}\n\n.process-cta {\n margin-top: 80px;\n text-align: center;\n}\n\n.process-dual-cta {\n display: flex;\n gap: 24px;\n justify-content: center;\n margin-bottom: 24px;\n}\n\n.process-cta-button {\n display: inline-flex;\n align-items: center;\n gap: 16px;\n padding: 20px 40px;\n font-family: var(--font-primary);\n font-size: 1.25rem;\n font-weight: var(--font-weight-bold);\n text-decoration: none;\n border-radius: var(--element-radius-large);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-xl);\n}\n\n.process-cta-button.primary {\n background: var(--primary-gradient);\n color: var(--white);\n}\n\n.process-cta-button.secondary {\n background: var(--secondary-gradient);\n color: var(--white);\n}\n\n.process-cta-button:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-2xl);\n}\n\n.process-note {\n font-size: 1rem;\n color: var(--gray-600);\n}\n\n.process-note a {\n color: var(--whatsapp-green);\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n}\n\n.process-note a:hover {\n text-decoration: underline;\n}\n\n/* FAQ Section - Intelligent Clarity */\n.faq-section {\n padding: var(--section-padding-y) 0;\n background: var(--gray-50);\n}\n\n.faq-container {\n max-width: 900px;\n margin: 60px auto 0;\n}\n\n.faq-item {\n background: var(--white);\n border-radius: var(--element-radius-large);\n margin-bottom: 24px;\n box-shadow: var(--shadow-md);\n overflow: hidden;\n transition: all var(--transition-normal);\n cursor: pointer;\n}\n\n.faq-item:hover {\n box-shadow: var(--shadow-lg);\n}\n\n.faq-question {\n padding: 24px 32px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n transition: all var(--transition-fast);\n}\n\n.faq-question h3 {\n font-family: var(--font-primary);\n font-size: 1.25rem;\n font-weight: var(--font-weight-semibold);\n color: var(--gray-800);\n}\n\n.faq-question i {\n font-size: 1.25rem;\n color: var(--primary-indigo);\n transition: transform var(--transition-normal);\n}\n\n.faq-item.active .faq-question {\n background: var(--gray-50);\n}\n\n.faq-item.active .faq-question i {\n transform: rotate(180deg);\n}\n\n.faq-answer {\n padding: 0 32px;\n max-height: 0;\n overflow: hidden;\n transition: all var(--transition-normal);\n}\n\n.faq-item.active .faq-answer {\n padding: 0 32px 24px;\n max-height: 300px; /* Adjust as needed for content */\n}\n\n.faq-answer p {\n font-size: 1.125rem;\n color: var(--gray-600);\n line-height: 1.6;\n}\n\n.faq-cta {\n text-align: center;\n margin-top: 60px;\n}\n\n.faq-cta p {\n font-size: 1.25rem;\n font-weight: var(--font-weight-medium);\n color: var(--gray-700);\n margin-bottom: 24px;\n}\n\n.faq-whatsapp-button {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 16px 32px;\n background: var(--whatsapp-gradient);\n color: var(--white);\n font-family: var(--font-primary);\n font-size: 1.125rem;\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n border-radius: var(--element-radius-large);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-lg);\n}\n\n.faq-whatsapp-button:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-xl);\n}\n\n/* Contact Section - Seamless Connectivity */\n.contact-section {\n padding: var(--section-padding-y) 0;\n background: var(--white);\n}\n\n.contact-options {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n gap: 40px;\n margin-top: 80px;\n}\n\n.contact-card {\n background: var(--white);\n border: 1px solid var(--gray-200);\n border-radius: var(--element-radius-xl);\n padding: 40px;\n text-align: center;\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-lg);\n}\n\n.contact-card.primary-contact {\n border: 2px solid var(--whatsapp-green);\n position: relative;\n}\n\n.contact-card.primary-contact::before {\n content: 'Recommended';\n position: absolute;\n top: -12px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--whatsapp-green);\n color: var(--white);\n padding: 6px 20px;\n border-radius: 20px;\n font-size: 0.875rem;\n font-weight: var(--font-weight-semibold);\n}\n\n.contact-card:hover {\n transform: translateY(-8px);\n box-shadow: var(--shadow-2xl);\n}\n\n.contact-icon {\n width: 80px;\n height: 80px;\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n margin: 0 auto 24px;\n font-size: 2rem;\n color: var(--white);\n}\n\n.contact-icon.whatsapp {\n background: var(--whatsapp-gradient);\n}\n\n.contact-icon.email {\n background: var(--secondary-gradient);\n}\n\n.contact-icon.phone {\n background: var(--primary-gradient);\n}\n\n.contact-card h3 {\n font-family: var(--font-primary);\n font-size: 1.5rem;\n font-weight: var(--font-weight-bold);\n color: var(--gray-900);\n margin-bottom: 16px;\n}\n\n.contact-card p {\n font-size: 1.125rem;\n color: var(--gray-600);\n line-height: 1.6;\n margin-bottom: 32px;\n}\n\n.contact-cta {\n display: inline-flex;\n align-items: center;\n gap: 12px;\n padding: 16px 32px;\n font-family: var(--font-primary);\n font-size: 1.125rem;\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n border-radius: var(--element-radius-large);\n transition: all var(--transition-normal);\n box-shadow: var(--shadow-md);\n color: var(--white); /* Default color for all CTAs */\n}\n\n.contact-cta.whatsapp {\n background: var(--whatsapp-gradient);\n}\n\n.contact-cta.email {\n background: var(--secondary-gradient);\n}\n\n.contact-cta.phone {\n background: var(--primary-gradient);\n}\n\n.contact-cta:hover {\n transform: translateY(-4px);\n box-shadow: var(--shadow-lg);\n}\n\n.emergency-notice {\n margin-top: 80px;\n padding: 40px;\n background: var(--gray-50);\n border: 1px solid var(--gray-200);\n border-radius: var(--element-radius-xl);\n text-align: center;\n}\n\n.emergency-header {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 12px;\n margin-bottom: 16px;\n}\n\n.emergency-header i {\n font-size: 1.5rem;\n color: var(--accent-amber);\n}\n\n.emergency-header h4 {\n font-family: var(--font-primary);\n font-size: 1.25rem;\n font-weight: var(--font-weight-bold);\n color: var(--gray-900);\n}\n\n.emergency-notice p {\n font-size: 1.125rem;\n color: var(--gray-600);\n line-height: 1.6;\n}\n\n/* Footer - The Foundation of Trust */\n.site-footer {\n background: var(--gray-900);\n color: var(--white);\n padding: var(--section-padding-y) 0 40px;\n}\n\n.footer-top {\n display: grid;\n grid-template-columns: 1.5fr 2.5fr;\n gap: 80px;\n margin-bottom: 60px;\n}\n\n.footer-logo-section {\n display: flex;\n flex-direction: column;\n gap: 24px;\n}\n\n.footer-logo {\n display: flex;\n align-items: baseline;\n gap: 4px;\n}\n\n.footer-brand-notary {\n font-family: var(--font-primary);\n font-size: 2rem;\n font-weight: var(--font-weight-extrabold);\n color: var(--primary-indigo);\n}\n\n.footer-brand-geek {\n font-family: var(--font-primary);\n font-size: 2rem;\n font-weight: var(--font-weight-extrabold);\n color: var(--accent-amber);\n}\n\n.footer-tagline {\n font-size: 1rem;\n color: var(--gray-400);\n}\n\n.footer-contact {\n display: flex;\n flex-direction: column;\n gap: 16px;\n margin-top: 16px;\n}\n\n.footer-contact-item {\n display: flex;\n align-items: center;\n gap: 16px;\n color: var(--gray-300);\n font-size: 0.95rem;\n}\n\n.footer-links-section {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 40px;\n}\n\n.footer-links-group h4 {\n font-family: var(--font-primary);\n font-size: 1.125rem;\n font-weight: var(--font-weight-bold);\n color: var(--white);\n margin-bottom: 24px;\n}\n\n.footer-links-group ul {\n list-style: none;\n padding: 0;\n margin: 0;\n display: flex;\n flex-direction: column;\n gap: 16px;\n}\n\n.footer-links-group ul li a {\n color: var(--gray-400);\n text-decoration: none;\n transition: color var(--transition-fast);\n font-size: 0.95rem;\n}\n\n.footer-links-group ul li a:hover {\n color: var(--white);\n}\n\n.footer-middle {\n border-top: 1px solid var(--gray-800);\n border-bottom: 1px solid var(--gray-800);\n padding: 40px 0;\n margin-bottom: 40px;\n}\n\n.footer-credentials {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: 20px;\n}\n\n.footer-credential {\n display: flex;\n align-items: center;\n gap: 16px;\n color: var(--gray-400);\n font-size: 0.95rem;\n font-weight: var(--font-weight-medium);\n}\n\n.credential-icon {\n font-size: 1.25rem;\n color: var(--primary-indigo);\n}\n\n.footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n}\n\n.copyright {\n color: var(--gray-500);\n font-size: 0.875rem;\n line-height: 1.5;\n}\n\n.footer-cta a {\n color: var(--primary-indigo);\n font-weight: var(--font-weight-semibold);\n text-decoration: none;\n transition: color var(--transition-fast);\n font-size: 1rem;\n}\n\n.footer-cta a:hover {\n color: var(--primary-purple);\n}\n\n/* Floating WhatsApp Button - The Ever-Present Concierge */\n.notary-whatsapp-fixed {\n position: fixed;\n bottom: 30px;\n right: 30px;\n width: 64px;\n height: 64px;\n background: var(--whatsapp-green);\n border-radius: 50%;\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--white);\n font-size: 1.75rem;\n box-shadow: var(--shadow-xl);\n z-index: 100;\n transition: all var(--transition-bounce);\n text-decoration: none;\n animation: pulse-whatsapp 3s ease-in-out infinite;\n}\n\n@keyframes pulse-whatsapp {\n 0%, 100% { box-shadow: 0 0 20px rgba(37, 211, 102, 0.4); }\n 50% { box-shadow: 0 0 40px rgba(37, 211, 102, 0.8); }\n}\n\n.notary-whatsapp-fixed:hover {\n transform: scale(1.1);\n animation: none;\n}\n\n/* Animations & Interactivity - Elevating the User Journey */\n.notary-fade-in {\n opacity: 0;\n transform: translateY(30px);\n transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.notary-fade-in.active {\n opacity: 1;\n transform: translateY(0);\n}\n\n/* Media Queries - Pixel-Perfect Adaptive Design */\n@media (max-width: 1200px) {\n .title-main {\n font-size: 3rem;\n }\n \n .title-highlight {\n font-size: 3.5rem;\n }\n \n .hero-content-layout {\n /* Already flex-column on smaller screens, no change needed here */\n }\n \n .hero-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n \n .notary-nav-actions {\n gap: 20px;\n }\n}\n\n@media (max-width: 992px) {\n .hero-elite {\n padding: 80px 0; /* Adjust padding for smaller screens */\n }\n\n .hero-content-layout {\n gap: 60px;\n }\n \n .nav-container {\n flex-direction: column;\n padding: 16px;\n gap: 16px;\n }\n \n .notary-nav-actions {\n width: 100%;\n justify-content: space-between;\n }\n \n .footer-top {\n grid-template-columns: 1fr;\n gap: 60px;\n }\n \n .footer-links-section {\n grid-template-columns: repeat(2, 1fr);\n gap: 40px;\n }\n \n .footer-middle {\n padding: 30px 0;\n }\n \n .footer-credentials {\n justify-content: center;\n }\n \n .process-steps-premium::before {\n display: none; /* Hide vertical line on smaller screens */\n }\n \n .process-step {\n grid-template-columns: 1fr;\n gap: 20px;\n text-align: center;\n }\n \n .process-step .step-content {\n grid-column: 1;\n text-align: center;\n }\n}\n\n@media (max-width: 768px) {\n :root {\n --section-padding-y: 80px;\n --section-padding-x: 16px;\n }\n \n .container-premium {\n padding: 0 var(--section-padding-x);\n }\n \n .notary-nav-credentials {\n display: none;\n }\n \n .title-main {\n font-size: 2.5rem;\n }\n \n .title-highlight {\n font-size: 3rem;\n }\n \n .title-sub {\n font-size: 1.25rem;\n }\n \n .notary-hero-badge {\n padding: 12px 24px;\n }\n \n .hero-stats {\n grid-template-columns: 1fr;\n gap: 16px;\n }\n \n .hero-cta-section-premium {\n flex-direction: column;\n gap: 16px;\n }\n \n .services-grid-elite {\n grid-template-columns: 1fr;\n }\n \n .footer-bottom {\n flex-direction: column;\n gap: 20px;\n text-align: center;\n }\n \n .contact-options {\n grid-template-columns: 1fr;\n }\n \n .notary-whatsapp-fixed {\n width: 56px;\n height: 56px;\n font-size: 1.5rem;\n }\n}\n\n@media (max-width: 576px) {\n .notary-brand-premium {\n gap: 12px;\n }\n \n .notary-brand-logo {\n width: 40px;\n height: 40px;\n }\n \n .notary-brand-notary, .notary-brand-geek {\n font-size: 1.25rem;\n }\n \n .notary-brand-subtitle {\n font-size: 0.75rem;\n }\n \n .notary-nav-cta-buttons {\n width: 100%;\n gap: 10px;\n }\n \n .notary-nav-btn-secondary, .notary-nav-btn-primary {\n width: 50%;\n padding: 12px;\n justify-content: center;\n font-size: 0.875rem;\n }\n \n .hero-elite {\n margin-top: 120px; /* Adjust for stacked header */\n }\n \n .section-title-premium {\n font-size: 2rem;\n }\n \n .section-title-premium .title-accent {\n font-size: 1.25rem;\n }\n \n .section-description {\n font-size: 1rem;\n }\n \n .footer-links-section {\n grid-template-columns: 1fr;\n }\n \n .cta-primary-elite, .cta-secondary-elite {\n min-width: auto;\n padding: 20px 24px;\n }\n \n .notary-whatsapp-fixed {\n bottom: 20px;\n right: 20px;\n }\n}\n\n/* Print Styles */\n@media print {\n .notary-whatsapp-fixed,\n .notary-mobile-menu,\n .notary-mobile-menu-toggle,\n .geometric-patterns { /* Hide animated patterns */\n display: none !important;\n }\n \n .elite-nav {\n position: static;\n background: none;\n border-bottom: none;\n box-shadow: none;\n backdrop-filter: none;\n }\n\n .hero-elite {\n margin-top: 0;\n min-height: auto;\n padding: 40px 0;\n background: none;\n }\n\n .gradient-overlay {\n background: none;\n opacity: 1;\n }\n\n .notary-hero-badge,\n .section-badge {\n background: none !important;\n color: black !important;\n border: 1px solid black;\n box-shadow: none !important;\n animation: none !important;\n }\n \n .cta-primary-elite,\n .cta-secondary-elite,\n .notary-nav-btn-primary,\n .notary-nav-btn-secondary,\n .service-cta-elite,\n .faq-whatsapp-button,\n .contact-cta,\n .process-cta-button {\n background: none !important;\n color: black !important;\n border: 1px solid black;\n box-shadow: none !important;\n transform: none !important;\n animation: none !important;\n }\n\n .title-highlight {\n -webkit-text-fill-color: black !important;\n background: none !important;\n }\n\n .notary-stat-item,\n .hero-guarantee-premium,\n .service-card-elite,\n .faq-item,\n .contact-card,\n .emergency-notice {\n background: white !important;\n border: 1px solid #ccc !important;\n box-shadow: none !important;\n transform: none !important;\n animation: none !important;\n }\n\n .process-steps-premium::before {\n background: #ccc !important;\n }\n\n .step-number, .step-icon, .contact-icon {\n background: #eee !important;\n color: #333 !important;\n box-shadow: none !important;\n }\n\n .site-footer {\n background: #f8fafc !important;\n color: #333 !important;\n }\n\n .footer-links-group h4,\n .footer-links-group ul li a,\n .footer-credentials,\n .copyright,\n .footer-cta a {\n color: #333 !important;\n }\n}\n", "isBinary": false, "fullPath": "style.css", "lastModified": 1753902381954 }, "script.js": { "name": "script.js", "type": "file", "contents": "/** * NotaryGeek Standalone Website JavaScript * Version 2.0.0 - Premium International Client Focus * Pure vanilla JavaScript for maximum compatibility and performance. */ (function() { 'use strict'; // Initialize when DOM is ready document.addEventListener('DOMContentLoaded', function() { console.log('🚀 NotaryGeek Standalone Site Loaded'); // Initialize all components initializeNavigation(); initializeFAQ(); initializeAnimations(); initializeTracking(); initializeWhatsAppFeatures(); initializePerformanceOptimizations(); initializeMobileOptimizations(); }); /** * Enhanced Navigation System */ function initializeNavigation() { const nav = document.querySelector('.elite-nav'); const mobileMenuToggle = document.querySelector('.notary-mobile-menu-toggle'); const mobileMenu = document.querySelector('.notary-mobile-menu'); // Enhanced scroll effects let lastScrollY = window.scrollY; let ticking = false; function handleScroll() { const currentScrollY = window.scrollY; if (nav) { if (currentScrollY > 50) { nav.classList.add('scrolled'); } else { nav.classList.remove('scrolled'); } // Mobile navigation hide/show if (window.innerWidth <= 768) { if (currentScrollY > lastScrollY && currentScrollY > 100) { nav.style.transform = 'translateY(-100%)'; } else { nav.style.transform = 'translateY(0)'; } } } lastScrollY = currentScrollY; ticking = false; } // Throttled scroll handler window.addEventListener('scroll', function() { if (!ticking) { requestAnimationFrame(handleScroll); ticking = true; } }); // Mobile menu functionality if (mobileMenuToggle && mobileMenu) { mobileMenuToggle.addEventListener('click', function() { mobileMenu.classList.toggle('active'); const isActive = mobileMenu.classList.contains('active'); this.innerHTML = isActive ? '' : ''; this.setAttribute('aria-expanded', isActive); // Prevent body scroll when menu is open document.body.style.overflow = isActive ? 'hidden' : ''; }); // Close menu when clicking outside document.addEventListener('click', function(e) { if (!mobileMenuToggle.contains(e.target) && !mobileMenu.contains(e.target)) { mobileMenu.classList.remove('active'); mobileMenuToggle.innerHTML = ''; mobileMenuToggle.setAttribute('aria-expanded', 'false'); document.body.style.overflow = ''; } }); } } /** * Advanced FAQ System */ function initializeFAQ() { const faqItems = document.querySelectorAll('.faq-item'); faqItems.forEach(item => { const question = item.querySelector('.faq-question'); const answer = item.querySelector('.faq-answer'); if (question && answer) { // Add ARIA attributes question.setAttribute('role', 'button'); question.setAttribute('aria-expanded', 'false'); question.setAttribute('tabindex', '0'); // Click handler question.addEventListener('click', function() { notaryToggleFaq(item); }); // Keyboard navigation question.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); notaryToggleFaq(item); } }); } }); } /** * Intersection Observer Animations */ function initializeAnimations() { // Enhanced intersection observer const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver(function(entries) { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('active'); // Add staggered animation delay for multiple items const siblings = Array.from(entry.target.parentNode.children); const index = siblings.indexOf(entry.target); entry.target.style.animationDelay = `${index * 100}ms`; } }); }, observerOptions); // Observe elements for animations const animatedElements = document.querySelectorAll(` .service-card-elite, .process-step, .faq-item, .contact-card, .metric-item, .notary-feature-card `); animatedElements.forEach(el => { el.classList.add('notary-fade-in'); observer.observe(el); }); // Engaging Hover Effects const interactiveElements = document.querySelectorAll(` .cta-primary-elite, .cta-secondary-elite, .service-cta-elite, .contact-cta, .notary-nav-btn-primary, .notary-nav-btn-secondary `); interactiveElements.forEach(element => { element.addEventListener('mouseenter', function() { this.style.transform = 'translateY(-3px) scale(1.02)'; }); element.addEventListener('mouseleave', function() { this.style.transform = 'translateY(0) scale(1)'; }); }); } /** * Enhanced Event Tracking (using window.trackEvent) */ function initializeTracking() { // Track CTA clicks with enhanced data document.addEventListener('click', function(e) { const target = e.target.closest('a'); if (!target) return; const href = target.getAttribute('href'); const elementContext = getElementContext(target); // Track different types of interactions if (href) { if (href.includes('notary.cx/now')) { window.trackEvent('conversion', 'document_upload_click', elementContext); } else if (href.includes('notary.cx/nd')) { window.trackEvent('conversion', 'continue_process_click', elementContext); } else if (href.includes('notary.im')) { // Updated for notary.im window.trackEvent('conversion', 'whatsapp_contact', elementContext); } else if (href.startsWith('tel:')) { window.trackEvent('conversion', 'phone_contact', elementContext); } else if (href.startsWith('mailto:')) { window.trackEvent('conversion', 'email_contact', elementContext); } } }); // Enhanced scroll depth tracking const scrollMilestones = [25, 50, 75, 90, 100]; const trackedMilestones = new Set(); let maxScroll = 0; const throttledScrollTracker = throttle(function() { const scrollHeight = document.documentElement.scrollHeight - window.innerHeight; const scrollPercent = Math.round((window.scrollY / scrollHeight) * 100); maxScroll = Math.max(maxScroll, scrollPercent); scrollMilestones.forEach(milestone => { if (scrollPercent >= milestone && !trackedMilestones.has(milestone)) { trackedMilestones.add(milestone); window.trackEvent('engagement', 'scroll_depth', `${milestone}_percent`); } }); }, 100); window.addEventListener('scroll', throttledScrollTracker); // Track time on page const startTime = Date.now(); const timeThresholds = [30, 60, 120, 300, 600]; // seconds const trackedTimes = new Set(); setInterval(function() { const timeOnPage = Math.floor((Date.now() - startTime) / 1000); timeThresholds.forEach(threshold => { if (timeOnPage >= threshold && !trackedTimes.has(threshold)) { trackedTimes.add(threshold); window.trackEvent('engagement', 'time_on_page', `${threshold}_seconds`); } }); }, 1000); // Track page exit window.addEventListener('beforeunload', function() { const totalTime = Math.floor((Date.now() - startTime) / 1000); window.trackEvent('engagement', 'page_exit', `total_time_${totalTime}s`); }); } /** * WhatsApp Integration Features */ function initializeWhatsAppFeatures() { // Create floating WhatsApp button if not exists if (!document.querySelector('.notary-whatsapp-fixed')) { const whatsappButton = document.createElement('a'); whatsappButton.href = 'https://notary.im'; // Updated URL whatsappButton.target = '_blank'; whatsappButton.className = 'notary-whatsapp-fixed'; whatsappButton.innerHTML = ''; whatsappButton.setAttribute('aria-label', 'Contact us on WhatsApp'); document.body.appendChild(whatsappButton); // Enhanced floating button behavior whatsappButton.addEventListener('mouseenter', function() { this.style.animation = 'none'; }); whatsappButton.addEventListener('mouseleave', function() { this.style.animation = 'pulse-whatsapp 3s ease-in-out infinite'; }); whatsappButton.addEventListener('click', function() { window.trackEvent('whatsapp', 'floating_button_click', 'bottom_right'); }); } // Add context to WhatsApp links const whatsappLinks = document.querySelectorAll('a[href*="notary.im"]'); // Updated selector whatsappLinks.forEach(link => { const context = getElementContext(link); const originalHref = link.getAttribute('href'); // Add context message if it's a service-specific link if (context.includes('service')) { const serviceType = link.closest('.service-card-elite')?.querySelector('.service-title')?.textContent || 'NotaryGeek Service'; const message = encodeURIComponent(`Hi! I'm interested in ${serviceType}. Can you help me get started?`); if (!originalHref.includes('text=')) { link.setAttribute('href', `${originalHref}?text=${message}`); } } }); } /** * Performance Optimizations */ function initializePerformanceOptimizations() { // Lazy load images with data-src const lazyImages = document.querySelectorAll('img[data-src]'); if ('IntersectionObserver' in window && lazyImages.length > 0) { const imageObserver = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); imageObserver.unobserve(img); } }); }); lazyImages.forEach(img => { img.classList.add('lazy'); imageObserver.observe(img); }); } // Preload critical resources const criticalResources = [ 'https://notary.cx/now', 'https://notary.cx/nd', 'https://notary.im' // Updated URL ]; criticalResources.forEach(url => { const link = document.createElement('link'); link.rel = 'prefetch'; link.href = url; document.head.appendChild(link); }); // Optimize font loading (already handled by preload in HTML) } /** * Mobile-Specific Optimizations */ function initializeMobileOptimizations() { // Optimize touch targets for mobile if (window.innerWidth <= 768) { const touchTargets = document.querySelectorAll(` .faq-question, .cta-primary-elite, .cta-secondary-elite, .service-cta-elite, .contact-cta `); touchTargets.forEach(target => { const currentMinHeight = window.getComputedStyle(target).minHeight; if (parseInt(currentMinHeight) < 44) { target.style.minHeight = '44px'; } }); } // Enhanced mobile scroll performance let isScrolling = false; window.addEventListener('scroll', function() { if (!isScrolling && window.innerWidth <= 768) { window.requestAnimationFrame(function() { // Pause non-essential animations on mobile scroll const patterns = document.querySelectorAll('.pattern-element, [class*="float"]'); patterns.forEach(pattern => { pattern.style.animationPlayState = 'paused'; }); // Resume animations after scroll ends setTimeout(() => { patterns.forEach(pattern => { pattern.style.animationPlayState = 'running'; }); }, 150); isScrolling = false; }); isScrolling = true; } }); // Mobile viewport height fix function setVH() { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); } setVH(); window.addEventListener('resize', throttle(setVH, 100)); } /** * Utility Functions */ window.trackEvent = function(category, action, label, value) { // Google Analytics 4 (if gtag is available) if (typeof gtag !== 'undefined') { gtag('event', action, { event_category: category, event_label: label, value: value || 0, custom_parameter_1: getUserType(), custom_parameter_2: getPageCategory() }); } // Facebook Pixel (if fbq is available) if (typeof fbq !== 'undefined') { fbq('trackCustom', `${category}_${action}`, { label: label, value: value || 0 }); } // Hotjar (if hj is available) if (typeof hj !== 'undefined') { hj('event', `${category}_${action}`); } // Debug logging if (window.location.search.includes('debug=1')) { console.log('📊 Event Tracked:', { category, action, label, value }); } }; function getElementContext(element) { const contexts = []; // Get section context const section = element.closest('section, header, footer'); if (section) { contexts.push(section.id || section.className.split(' ')[0] || 'section'); } // Get widget/card context const widget = element.closest('.service-card-elite, .contact-card'); if (widget) { contexts.push(widget.className.split(' ')[0] || 'widget'); } // Get element context if (element.id) contexts.push(element.id); if (element.className) contexts.push(element.className.split(' ')[0]); return contexts.join('_') || 'unknown_context'; } function getUserType() { const referrer = document.referrer.toLowerCase(); if (referrer.includes('google')) return 'organic_search'; if (referrer.includes('facebook') || referrer.includes('twitter')) return 'social_media'; if (referrer === '') return 'direct_traffic'; return 'referral_traffic'; } function getPageCategory() { const path = window.location.pathname.toLowerCase(); if (path === '/' || path.includes('index.html')) return 'homepage'; // Add more specific page categories if you create separate HTML files for them return 'other'; } function throttle(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } // Global functions for HTML onclick handlers window.notaryToggleFaq = function(element) { const faqItem = element.closest('.faq-item'); if (faqItem) { const isActive = faqItem.classList.contains('active'); // Close all other FAQs document.querySelectorAll('.faq-item').forEach(item => { if (item !== faqItem) { item.classList.remove('active'); const otherQuestion = item.querySelector('.faq-question'); if (otherQuestion) { otherQuestion.setAttribute('aria-expanded', 'false'); } } }); // Toggle current FAQ faqItem.classList.toggle('active'); const question = faqItem.querySelector('.faq-question'); if (question) { question.setAttribute('aria-expanded', !isActive); } // Track interaction if (!isActive) { const questionText = question.querySelector('h3')?.textContent || 'FAQ Item'; window.trackEvent('faq', 'expand', questionText); } } }; window.notaryScrollToSection = function(sectionId) { const element = document.getElementById(sectionId); if (element) { const navHeight = document.querySelector('.elite-nav')?.offsetHeight || 80; const targetPosition = element.offsetTop - navHeight - 20; window.scrollTo({ top: targetPosition, behavior: 'smooth' }); window.trackEvent('navigation', 'scroll_to_section', sectionId); } }; window.notaryToggleMobileMenu = function() { const mobileMenu = document.querySelector('#notaryMobileMenu'); const menuToggle = document.querySelector('.notary-mobile-menu-toggle'); if (mobileMenu && menuToggle) { const isActive = mobileMenu.classList.contains('active'); mobileMenu.classList.toggle('active'); menuToggle.innerHTML = isActive ? '' : ''; document.body.style.overflow = isActive ? '' : 'hidden'; window.trackEvent('navigation', 'mobile_menu_toggle', isActive ? 'close' : 'open'); } }; // A/B Testing Framework (simplified for standalone) window.NotaryABTest = { init: function() { // Only run if explicitly enabled via URL parameter for testing if (window.location.search.includes('ab_test=1')) { this.runTests(); } }, runTests: function() { const tests = [ { name: 'hero_cta_text', variants: ['Upload Your Document', 'Start Process Now', 'Begin Notarization'], selector: '.cta-primary-elite .cta-main-text' }, { name: 'whatsapp_cta_text', variants: ['WhatsApp Support', 'Chat Now', 'Get Help'], selector: '.notary-nav-btn-secondary, .notary-mobile-btn.whatsapp' } ]; tests.forEach(test => this.runTest(test)); }, runTest: function(test) { let variant = localStorage.getItem('ab_test_' + test.name); if (!variant) { variant = test.variants[Math.floor(Math.random() * test.variants.length)]; localStorage.setItem('ab_test_' + test.name, variant); } // Apply variant const elements = document.querySelectorAll(test.selector); elements.forEach(element => { if (element) { element.textContent = variant; } }); // Track variant window.trackEvent('ab_test', test.name, variant); } }; // Initialize A/B testing window.NotaryABTest.init(); // Error handling and reporting window.addEventListener('error', function(e) { window.trackEvent('error', 'javascript_error', e.message); console.error('NotaryGeek Standalone Site Error:', e); }); // Page visibility tracking document.addEventListener('visibilitychange', function() { const startTime = Date.now(); window.trackEvent('page_visibility', document.hidden ? 'hidden' : 'visible', window.location.pathname); }); console.log('✅ NotaryGeek Standalone Site fully initialized with premium features'); })();