expert / index.html
Sal-Joy's picture
Update index.html
3466b9a verified
Raw History Blame Contribute Delete
31.3 kB
<!DOCTYPE html> <html dir="ltr" lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Shopify Partner - Contact Us</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background-color: #f1f5f2 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #333; line-height: 1.6; } /* Header Styling */ header { background: transparent !important; padding: 16px 32px !important; display: flex !important; align-items: center !important; height: 80px !important; border-bottom: none !important; z-index: 100; } header * { color: black !important; } header svg path { fill: black !important; stroke: black !important; } .header-logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: black; } .header-logo span { font-weight: 600; font-size: 16px; color: black; letter-spacing: -0.5px; } /* Contact Header Section */ .contact-header { background-color: #f1f5f2 !important; border-bottom: none !important; padding: 80px 20px !important; text-align: center; width: 100%; margin: 0; } .contact-header-container { width: 100%; max-width: 1048px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .contact-header-label { font-weight: 700; font-size: 12px; line-height: 24px; letter-spacing: 4px; text-transform: uppercase; color: black !important; margin-bottom: 24px; text-transform: uppercase; } .contact-header h1 { font-weight: 700; font-size: 56px; line-height: 60px; color: black !important; margin-bottom: 24px; letter-spacing: -0.44px; } .contact-header-subtitle { font-weight: 400; font-size: 16px; line-height: 24px; color: black !important; max-width: 800px; margin: 0; letter-spacing: -0.24px; } /* Accordion Section */ .accordion-section { background: white; padding: 40px 20px; } .accordion-container { max-width: 1048px; margin: 0 auto; } .accordion-item { border: 1px solid #e5e5e5; margin-bottom: 12px; border-radius: 4px; overflow: hidden; } .accordion-header { background: #f9f9f9; padding: 20px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; user-select: none; transition: background 0.2s; } .accordion-header:hover { background: #f5f5f5; } .accordion-header h2 { font-size: 16px; font-weight: 600; color: #000; margin: 0; } .accordion-icon { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; } /* Form Section */ .form-section { background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%) !important; padding: 80px 20px !important; position: relative; border-top: 1px solid #e5e7eb; } .form-wrapper { max-width: 846px; margin: 0 auto; background: white; padding: 48px; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 4px 12px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; } .contacts-form_form__title__m5S_U { font-weight: 700; font-size: 28px; line-height: 36px; color: #000 !important; margin-bottom: 8px; letter-spacing: -0.5px; display: flex; align-items: center; gap: 12px; } .form-subtitle { font-size: 14px; color: #666; margin-bottom: 32px; line-height: 1.6; } .form-progress { display: flex; gap: 8px; margin-bottom: 20px; align-items: center; padding: 16px 12px; background: linear-gradient(135deg, #f8fafb 0%, #ffffff 100%); border-radius: 8px; width: fit-content; border: 1px solid #e5e7eb; } .progress-step { width: 6px; height: 6px; border-radius: 50%; background: #d1d5db; transition: all 0.3s ease; } .progress-step.active { background: #000; width: 20px; border-radius: 3px; } .progress-text { font-size: 12px; color: #666; margin-top: 0; font-weight: 500; margin-left: 12px; } .form-group { margin-bottom: 20px; animation: slideInUp 0.4s ease-out; } .contacts-form_emailInput__HI2Hl, .input_inputContainer__fjwar { margin-bottom: 20px; animation: slideInUp 0.4s ease-out; } .contacts-form_input__E5kjY, .input_input__BVGza, .form-group input, .form-group textarea { width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid #e0e0e0; border-radius: 8px; font-family: 'Inter', sans-serif; background: #f9fafb; transition: all 0.3s ease; color: #333; position: relative; } .contacts-form_input__E5kjY:focus, .input_input__BVGza:focus, .form-group input:focus, .form-group textarea:focus { border-color: #000; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .field-feedback { font-size: 12px; margin-top: 6px; display: none; align-items: center; gap: 4px; height: 18px; } .field-feedback.show { display: flex; } .field-feedback.success { color: #10b981; } .field-feedback.error { color: #ef4444; } .feedback-icon { width: 14px; height: 14px; display: flex; align-items: center; justify-content: center; font-weight: bold; } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.1); } 50% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); } } .contacts-form_input__E5kjY::placeholder, .input_input__BVGza::placeholder { color: #999; } .contacts-form_input__E5kjY:focus, .input_input__BVGza:focus, .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #007bff; box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.1); } .contacts-form_textarea__zogyP, .form-group textarea { resize: vertical; min-height: 140px; font-size: 16px; padding: 14px 16px; width: 100%; border: 2px solid #e0e0e0; border-radius: 8px; font-family: 'Inter', sans-serif; background: #f9fafb; color: #333; margin-bottom: 20px; transition: all 0.3s ease; } .contacts-form_textarea__zogyP:focus, .form-group textarea:focus { border-color: #000; outline: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .contacts-form_form__button__nY7fe { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .form-actions { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .contacts-form_form__button__nY7fe > div { display: flex; align-items: center; gap: 8px; } .custom-checkbox_custom_checkbox__hbwcf, .form-checkbox input { width: 20px; height: 20px; cursor: pointer; accent-color: #000; flex-shrink: 0; } .contacts-form_form__button__nY7fe label { font-size: 14px; color: #333; line-height: 1.5; margin: 0; cursor: pointer; } .contacts-form_form__button__nY7fe label p { margin: 0; display: inline; } .contacts-form_form__button__nY7fe a { color: #007bff; text-decoration: none; font-weight: 500; } .contacts-form_form__button__nY7fe a:hover { text-decoration: underline; } .button_button__aZ_6A, .button_xl__OUrhy, .button_primary__TtywJ, .btn-submit { background-color: #000; color: white; padding: 16px 32px; font-size: 16px; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; position: relative; overflow: hidden; white-space: nowrap; min-height: 48px; display: flex; align-items: center; justify-content: center; } .button_button__aZ_6A:hover:not(:disabled), .button_xl__OUrhy:hover:not(:disabled), .button_primary__TtywJ:hover:not(:disabled), .btn-submit:hover:not(:disabled) { background-color: #1a1a1a; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .button_button__aZ_6A:active, .button_xl__OUrhy:active, .button_primary__TtywJ:active, .btn-submit:active { transform: translateY(0); } .button_button__aZ_6A:disabled, .button_xl__OUrhy:disabled, .button_primary__TtywJ:disabled, .btn-submit:disabled { opacity: 0.6; cursor: not-allowed; } .btn-submit.loading::after { content: ''; position: absolute; width: 16px; height: 16px; margin: auto; border: 2px solid #f3f3f3; border-radius: 50%; border-top: 2px solid #fff; animation: spin 0.6s linear infinite; right: 12px; top: 0; bottom: 0; } @keyframes spin { to { transform: rotate(360deg); } } /* Success Modal Styles */ .success-modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); z-index: 1000; align-items: center; justify-content: center; animation: fadeIn 0.3s ease; } .success-modal.show { display: flex; } .success-modal-content { background: white; border-radius: 16px; padding: 48px; max-width: 500px; width: 90%; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); animation: slideUp 0.4s ease; max-height: 90vh; overflow-y: auto; } .success-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: #10b981; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 48px; animation: scaleIn 0.5s ease; } .success-title { font-size: 28px; font-weight: 700; color: #000; margin-bottom: 12px; } .success-message { font-size: 16px; color: #666; line-height: 1.6; margin-bottom: 16px; } .success-contact-info { background: #f8fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 20px; margin: 20px 0; text-align: left; } .contact-label { font-size: 12px; font-weight: 600; color: #666; text-transform: uppercase; margin-bottom: 8px; display: block; } .contact-value { font-size: 16px; color: #000; font-weight: 500; word-break: break-all; } .success-cta { background: #000; color: white; padding: 14px 32px; border: none; border-radius: 6px; font-size: 16px; font-weight: 600; cursor: pointer; margin-top: 24px; transition: all 0.3s ease; } .success-cta:hover { background: #1a1a1a; transform: translateY(-2px); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .btn-submit:hover { background-color: #0056b3; } /* Footer */ footer { background: #191919 !important; border-top: 1px solid #242424 !important; padding: 40px 80px !important; width: 100% !important; color: #a3a3a3 !important; margin: 0; } .footer-wrapper { max-width: 1180px; margin: 0 auto; } footer h3 { color: white !important; margin-bottom: 20px !important; font-size: 16px !important; font-weight: 600 !important; margin-top: 0 !important; } footer p { color: #a3a3a3 !important; margin: 0 !important; line-height: 1.5 !important; font-size: 14px !important; } footer ul { list-style: none; padding: 0; margin: 0; } footer ul li { margin-bottom: 8px; } footer ul li a { color: #7a7a7a !important; text-decoration: none !important; display: block !important; padding: 8px 0 !important; font-size: 14px !important; } footer ul li a:hover { color: #a3a3a3 !important; } .footer-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px; } .footer-divider { border-top: 1px solid #242424; padding-top: 20px; text-align: center; font-size: 14px; color: #a3a3a3; } @media (max-width: 768px) { header { padding: 12px 16px !important; } .contact-header { padding: 48px 16px !important; } .contact-header h1 { font-size: 36px; line-height: 42px; } .contact-header-subtitle { font-size: 14px; } .footer-content { grid-template-columns: 1fr; gap: 24px; } .form-section { padding: 40px 16px; } .form-wrapper { padding: 24px 16px; margin: 0 auto; } .contacts-form_form__title__m5S_U { font-size: 24px; line-height: 32px; } .form-subtitle { font-size: 13px; margin-bottom: 24px; } .form-progress { margin-bottom: 16px; padding: 12px 8px; } .progress-text { font-size: 11px; } .contacts-form_input__E5kjY, .input_input__BVGza, .form-group input, .form-group textarea { padding: 12px 14px; font-size: 16px; border-radius: 6px; } .contacts-form_textarea__zogyP, .form-group textarea { min-height: 110px; padding: 12px 14px; font-size: 16px; } .button_button__aZ_6A, .button_xl__OUrhy, .button_primary__TtywJ, .btn-submit { width: 100%; padding: 14px 16px; min-height: 44px; border-radius: 6px; } .contacts-form_form__button__nY7fe { flex-direction: column; gap: 12px; align-items: stretch; } .contacts-form_form__button__nY7fe > div:first-child { width: 100%; flex-direction: row; } .contacts-form_form__button__nY7fe > div:first-child label { font-size: 13px; } .custom-checkbox_custom_checkbox__hbwcf { width: 18px; height: 18px; } .success-modal-content { padding: 32px 20px; border-radius: 12px; } .success-icon { width: 64px; height: 64px; font-size: 36px; margin-bottom: 16px; } .success-title { font-size: 24px; } .success-message { font-size: 14px; } .success-cta { width: 100%; padding: 12px 16px; margin-top: 16px; } } @media (max-width: 480px) { .form-wrapper { padding: 16px 12px; } .contacts-form_form__title__m5S_U { font-size: 20px; line-height: 28px; gap: 8px; } .form-subtitle { font-size: 12px; } .form-progress { flex-wrap: wrap; } .progress-step { width: 5px; height: 5px; } .progress-step.active { width: 16px; } .progress-text { font-size: 10px; margin-left: 6px; } .contacts-form_input__E5kjY, .input_input__BVGza, .form-group input, .form-group textarea { padding: 11px 12px; font-size: 16px; margin-bottom: 14px; } .input_inputContainer__fjwar { margin-bottom: 14px; } .contacts-form_textarea__zogyP, .form-group textarea { min-height: 100px; font-size: 16px; } .custom-checkbox_custom_checkbox__hbwcf { width: 16px; height: 16px; } .contacts-form_form__button__nY7fe label { font-size: 12px; } .success-modal-content { padding: 24px 16px; } } </style> </head> <body> <!-- Header --> <header> <a href="#" class="header-logo"> <img src="https://cdn.shopify.com/b/shopify-brochure2-assets/08b278c519512d187520e1fe10b4f5b7.svg" alt="Shopify Partner Logo" height="150" width="150" style="object-fit: contain;"> </a> </header> <!-- Main Content --> <main> <!-- Contact Header Section --> <div class="contact-header"> <div class="contact-header-container"> <div class="contact-header-label">Contact & Specialist Assignment</div> <h1>Thank you for your interest in receiving direct support.</h1> <p class="contact-header-subtitle"> To ensure your store receives the appropriate level of attention, please complete the contact submission form below with accurate and up-to-date information. The details you provide will allow our internal team to review your request and assign a dedicated specialist aligned with your store's current needs and growth stage. </p> </div> </div> <!-- Form Section --> <div class="form-section"> <div class="form-wrapper"> <h2 class="contacts-form_form__title__m5S_U">Specialist Assignment Form</h2> <p class="form-subtitle">Complete this form to get assigned a dedicated Shopify specialist. We review all submissions carefully to ensure a perfect match for your needs.</p> <div class="form-progress"> <div class="progress-step active"></div> <div class="progress-step"></div> <div class="progress-step"></div> <div class="progress-step"></div> </div> <div class="progress-text"><span id="form-progress-text">Step 1 of 4</span></div> <form class="contacts-form_form__Teol6" id="specialistForm" action="https://formspree.io/f/mwvpddro" method="POST" onsubmit="handleSubmit(event)"> <div class="contacts-form_emailInput__HI2Hl"> <div class="input_inputContainer__fjwar"> <input class="contacts-form_input__E5kjY input_input__BVGza" type="email" name="email" maxlength="255" placeholder="Email*" required> <div class="field-feedback"></div> </div> </div> <div class="input_inputContainer__fjwar"> <input class="contacts-form_input__E5kjY input_input__BVGza" type="text" name="fullname" maxlength="255" placeholder="Full name*" required> <div class="field-feedback"></div> </div> <div class="input_inputContainer__fjwar"> <input class="contacts-form_input__E5kjY input_input__BVGza" type="text" name="contact" maxlength="255" placeholder="Telegram / WhatsApp*" required> <div class="field-feedback"></div> </div> <textarea class="contacts-form_textarea__zogyP" name="message" cols="120" placeholder="Message" rows="10"></textarea> <div class="contacts-form_form__button__nY7fe"> <div> <input id="agree_terms" type="checkbox" class="custom-checkbox_custom_checkbox__hbwcf custom-checkbox_custom_checkbox_wrapper_oneRow__iU4zH" name="agree_terms" required> <label for="agree_terms"><p>I have read and agree to the <a target="_blank" href="https://www.shopify.com/legal/privacy">Privacy Policy</a></p></label> </div> <div class="recaptcha-token" id="recaptcha-token"></div> <button type="submit" class="button_button__aZ_6A button_xl__OUrhy button_primary__TtywJ">Send Application</button> </div> </form> </div> </div> <!-- Section Divider --> <div style="height: 1px; background: linear-gradient(90deg, transparent, #d1d5db, transparent); margin: 0; width: 100%;"></div> </main> <!-- Success Modal --> <div class="success-modal" id="successModal"> <div class="success-modal-content"> <div class="success-icon">βœ“</div> <h2 class="success-title">Application Submitted!</h2> <p class="success-message">Thank you for your submission. Our team has received your information and will review it carefully.</p> <div class="success-contact-info"> <span class="contact-label">You will be contacted at:</span> <div id="submittedContacts"></div> </div> <p class="success-message" style="font-size: 14px; margin-bottom: 0;">You can expect to hear from one of our partners within 24-48 business hours. Thank you for your patience!</p> <button class="success-cta" onclick="closeSuccessModal()">Back to Home</button> </div> </div> <!-- Footer --> <footer style="background: #191919; border-top: 1px solid #242424; padding: 40px 80px; width: 100%;"> <div style="max-width: 1180px; margin: auto;"> <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; margin-bottom: 40px;"> <div> <h3 style="color: white; margin-bottom: 20px; font-size: 16px; font-weight: 600;">Shopify Partner</h3> <p style="color: #a3a3a3; margin: 0; line-height: 1.5;">Specialist assignment contact page for Shopify partners and merchants.</p> </div> <div> <h3 style="color: white; margin-bottom: 20px; font-size: 16px; font-weight: 600;">Quick Links</h3> <ul style="list-style: none; padding: 0; margin: 0;"> <li><a href="https://www.shopify.com/" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Shopify</a></li> <li><a href="https://www.shopify.com/partners" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Shopify Partners Program</a></li> <li><a href="https://www.shopify.com/app-store" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">App Store</a></li> <li><a href="https://help.shopify.com/" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Help Center</a></li> </ul> </div> <div> <h3 style="color: white; margin-bottom: 20px; font-size: 16px; font-weight: 600;">Support</h3> <ul style="list-style: none; padding: 0; margin: 0;"> <li><a href="https://community.shopify.com/" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Community Forums</a></li> <li><a href="https://www.shopify.com/contact" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Contact Shopify</a></li> <li><a href="https://www.shopify.com/legal" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Legal</a></li> <li><a href="https://www.shopify.com/legal/privacy" style="color: #7a7a7a; text-decoration: none; display: block; padding: 8px 0;">Privacy Policy</a></li> </ul> </div> </div> <div style="border-top: 1px solid #242424; padding-top: 20px;"> <p style="color: #a3a3a3; margin: 0; text-align: center; font-size: 14px;">Β© 2026 Shopify Partner Specialists. All rights reserved.</p> </div> </div> </footer> <script> // Form interactivity initialization document.addEventListener('DOMContentLoaded', function() { const form = document.getElementById('specialistForm'); const inputs = form.querySelectorAll('input[type="email"], input[type="text"], textarea'); const progressSteps = document.querySelectorAll('.progress-step'); const progressText = document.getElementById('form-progress-text'); let filledFields = 0; // Email validation regex const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Add interactive listeners to each field inputs.forEach((input, index) => { // Focus effect input.addEventListener('focus', function() { this.style.borderColor = '#000'; this.style.boxShadow = '0 0 0 3px rgba(0, 0, 0, 0.1)'; }); // Blur effect with validation input.addEventListener('blur', function() { validateField(this); }); // Real-time validation feedback input.addEventListener('input', function() { validateField(this); updateProgress(); }); // Add placeholder animation input.addEventListener('focus', function() { this.style.backgroundColor = '#fafafa'; }); input.addEventListener('blur', function() { this.style.backgroundColor = 'white'; }); }); function validateField(field) { const feedback = field.parentElement.querySelector('.field-feedback') || field.nextElementSibling; if (!feedback) return; let isValid = false; let message = ''; if (field.name === 'email') { isValid = field.value === '' || emailRegex.test(field.value); message = isValid ? 'βœ“ Valid email' : 'βœ— Invalid email format'; } else if (field.name === 'fullname') { isValid = field.value.trim().length >= 2; message = isValid && field.value ? 'βœ“ Name looks good' : field.value ? 'βœ— Name too short' : ''; } else if (field.name === 'contact') { isValid = field.value === '' || field.value.trim().length >= 5; message = isValid && field.value ? 'βœ“ Contact added' : field.value ? 'βœ— Too short' : ''; } if (field.value && message) { feedback.textContent = message; feedback.className = 'field-feedback show ' + (isValid ? 'success' : 'error'); } else { feedback.className = 'field-feedback'; } } function updateProgress() { let filled = 0; inputs.forEach(input => { if (input.name !== 'contact' && input.value.trim()) filled++; if (input.name === 'contact' && input.value) filled++; }); filled += document.getElementById('agree_terms').checked ? 1 : 0; const totalSteps = 4; const progress = Math.ceil((filled / totalSteps) * 4); progressSteps.forEach((step, index) => { if (index < progress) { step.classList.add('active'); } else { step.classList.remove('active'); } }); progressText.textContent = `Step ${Math.min(progress, 4)} of 4`; } // Checkbox visual feedback const checkbox = document.getElementById('agree_terms'); checkbox.addEventListener('change', function() { updateProgress(); if (this.checked) { this.style.accentColor = '#000'; } }); }); function handleSubmit(event) { event.preventDefault(); const form = event.target; const submitBtn = form.querySelector('button[type="submit"]'); const email = form.querySelector('input[name="email"]').value; const fullname = form.querySelector('input[name="fullname"]').value; const contact = form.querySelector('input[name="contact"]').value; // Add loading state submitBtn.disabled = true; submitBtn.classList.add('loading'); submitBtn.textContent = 'Sending...'; // Submit to Formspree const formData = new FormData(form); fetch(form.action, { method: 'POST', body: formData, headers: { 'Accept': 'application/json' } }) .then(response => { if (response.ok) { // Show success modal showSuccessModal(email, contact); form.reset(); submitBtn.disabled = false; submitBtn.classList.remove('loading'); submitBtn.textContent = 'Send Application'; } else { throw new Error('Form submission failed'); } }) .catch(error => { console.error('Error:', error); alert('There was an error submitting your form. Please try again.'); submitBtn.disabled = false; submitBtn.classList.remove('loading'); submitBtn.textContent = 'Send Application'; }); } function showSuccessModal(email, contact) { const modal = document.getElementById('successModal'); const contactsDiv = document.getElementById('submittedContacts'); // Display submitted contacts contactsDiv.innerHTML = ` <div class="contact-value">πŸ“§ ${email}</div> <div class="contact-value" style="margin-top: 8px;">πŸ’¬ ${contact}</div> `; modal.classList.add('show'); // Scroll to top window.scrollTo({ top: 0, behavior: 'smooth' }); } function closeSuccessModal() { const modal = document.getElementById('successModal'); modal.classList.remove('show'); } // Remove "here" link text (equivalent to the modification) setInterval(() => { const links = document.querySelectorAll('a[href="/gateway"]'); links.forEach(link => { if (link.textContent.trim() === 'here') { link.textContent = ''; } }); }, 50); // Force header styling setInterval(() => { const header = document.querySelector('header'); if (header) { header.style.background = 'white !important'; header.style.backgroundColor = 'white !important'; } }, 50); </script> </body> </html>
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Shopify Partner - Contact Us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
background-color: #f1f5f2 !important;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: #333;
line-height: 1.6;
}
/* Header Styling */
header {
background: transparent !important;
padding: 16px 32px !important;
display: flex !important;
align-items: center !important;
height: 80px !important;
border-bottom: none !important;
z-index: 100;
}
header * {
color: black !important;
}
header svg path {
fill: black !important;
stroke: black !important;
}
.header-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
color: black;
}
.header-logo span {
font-weight: 600;
font-size: 16px;
color: black;
letter-spacing: -0.5px;
}
/* Contact Header Section */
.contact-header {
background-color: #f1f5f2 !important;
border-bottom: none !important;
padding: 80px 20px !important;
text-align: center;
width: 100%;
margin: 0;
}
.contact-header-container {
width: 100%;
max-width: 1048px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
}
.contact-header-label {
font-weight: 700;
font-size: 12px;
line-height: 24px;
letter-spacing: 4px;
text-transform: uppercase;
color: black !important;
margin-bottom: 24px;
text-transform: uppercase;
}
.contact-header h1 {
font-weight: 700;
font-size: 56px;
line-height: 60px;
color: black !important;
margin-bottom: 24px;
letter-spacing: -0.44px;
}
.contact-header-subtitle {
font-weight: 400;
font-size: 16px;