Standardize post-hero spacing across all pages and clean up contact page

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: congwang-mk

assets/css/content-pages.css

@@ -1,7 +1,7 @@
 /* ===== SHARED CONTENT PAGE STYLES ===== */
 
 .content-page {
-    padding: 80px 0;
+    padding: var(--space-20) 0;
     background: var(--gray-50);
 }
 

assets/css/styles.css

@@ -650,7 +650,7 @@ body {
 
 /* ===== VALUE SECTION ===== */
 .value-section {
-    padding: var(--space-24) 0;
+    padding: var(--space-20) 0;
     background: var(--gray-50);
 }
 

blog.html

@@ -4,7 +4,7 @@
 permalink: /blog/
 ---
 
-<main style="margin-top: 0; padding-top: 0;">
+<main>
     <section class="hero">
         <div class="hero-container">
             <h1>Latest Insights</h1>

contact.html

@@ -4,174 +4,19 @@
 permalink: /contact.html
 ---
 
-<style>
-/* Contact page specific styles */
-.contact-form {
-    background: var(--background-primary);
-    padding: var(--spacing-2xl);
-    border-radius: var(--border-radius-xl);
-    box-shadow: var(--shadow-md);
-    border: 1px solid var(--border-color);
-}
-
-.form-group {
-    margin-bottom: var(--spacing-lg);
-}
-
-.form-group label {
-    display: block;
-    margin-bottom: var(--spacing-sm);
-    font-weight: 600;
-    color: var(--text-primary);
-    font-size: 0.95rem;
-}
-
-.form-group input,
-.form-group textarea {
-    width: 100%;
-    padding: var(--spacing-md);
-    border: 2px solid var(--border-color);
-    border-radius: var(--border-radius-md);
-    font-size: 1rem;
-    font-family: inherit;
-    transition: all 0.2s ease;
-    background: var(--background-primary);
-}
-
-.form-group input:focus,
-.form-group textarea:focus {
-    outline: none;
-    border-color: var(--primary-color);
-    box-shadow: 0 0 0 3px rgba(107, 0, 182, 0.1);
-}
-
-.form-group textarea {
-    height: 120px;
-    resize: vertical;
-}
-
-.submit-btn {
-    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    padding: var(--spacing-md) var(--spacing-xl);
-    border: none;
-    border-radius: var(--border-radius-lg);
-    font-size: 1rem;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    box-shadow: var(--shadow-md);
-}
-
-.submit-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: var(--shadow-lg);
-}
-
-.submit-btn:disabled {
-    background: var(--text-muted);
-    cursor: not-allowed;
-    transform: none;
-}
-
-.contact-section {
-    background: var(--background-accent);
-}
-
-.contact-info {
-    margin-top: 40px;
-    text-align: center;
-}
-
-.contact-info h3 {
-    margin-bottom: 30px;
-    color: #333;
-}
-
-.contact-methods {
-    display: flex;
-    justify-content: center;
-    gap: 40px;
-    flex-wrap: wrap;
-}
-
-.contact-method {
-    text-align: center;
-    max-width: 200px;
-}
-
-.contact-method i {
-    width: 48px;
-    height: 48px;
-    color: #007bff;
-    margin-bottom: 15px;
-}
-
-.contact-method h4 {
-    margin-bottom: 10px;
-    color: #333;
-}
-
-.contact-method a {
-    color: #007bff;
-    text-decoration: none;
-}
-
-.contact-method a:hover {
-    text-decoration: underline;
-}
-
-.contact-method p {
-    color: #666;
-    margin: 0;
-    line-height: 1.5;
-}
-
-@media (max-width: 768px) {
-    .contact-form {
-        padding: 30px 20px;
-        margin: 0 20px;
-    }
-    
-    .contact-methods {
-        flex-direction: column;
-        align-items: center;
-        gap: 20px;
-    }
-    
-    .contact-method {
-        width: 100%;
-    }
-}
-</style>
-
 <main>
     <!-- Hero Section -->
     <section class="hero">
         <div class="hero-container">
             <h1>Contact Us</h1>
             <p class="subtitle">We'd love to hear from you. Reach out with questions, feedback, or partnership inquiries about multikernel technology.</p>
-            <div class="hero-stats">
-                <div class="hero-stat">
-                    <span class="hero-stat-number">24/7</span>
-                    <span class="hero-stat-label">Support Available</span>
-                </div>
-                <div class="hero-stat">
-                    <span class="hero-stat-number">&lt; 1hr</span>
-                    <span class="hero-stat-label">Response Time</span>
-                </div>
-                <div class="hero-stat">
-                    <span class="hero-stat-number">Global</span>
-                    <span class="hero-stat-label">Reach</span>
-                </div>
-            </div>
         </div>
     </section>
 
     <!-- Contact Section -->
-    <section class="contact-section">
-        <div class="section-container">
-            <div class="contact-form">
+    <section class="content-page">
+        <div class="content-container">
+            <div class="content-card">
                 <div class="section-header">
                     <h2 class="section-title">Send Us a Message</h2>
                     <p class="section-subtitle">Get in touch with our team to discuss your multikernel needs.</p>
@@ -191,21 +36,21 @@ <h2 class="section-title">Send Us a Message</h2>
                     </div>
                     <div class="form-group">
                         <label for="message">Message</label>
-                        <textarea id="message" name="message" required></textarea>
+                        <textarea id="message" name="message" rows="5" required></textarea>
                     </div>
-                    <button type="submit" class="submit-btn">
+                    <button type="submit" class="btn btn-primary">
                         <i data-lucide="send"></i>
                         Send Message
                     </button>
                 </form>
             </div>
 
-            <div class="contact-info">
+            <div class="content-card">
                 <div class="section-header">
-                    <h3 class="section-title">Other Ways to Connect</h3>
+                    <h2 class="section-title">Other Ways to Connect</h2>
                     <p class="section-subtitle">Choose the method that works best for you.</p>
                 </div>
-                
+
                 <div class="features-grid">
                     <div class="feature-card">
                         <div class="feature-icon">
@@ -216,7 +61,7 @@ <h3 class="feature-title">Email</h3>
                             <a href="mailto:contact@multikernel.io">contact@multikernel.io</a>
                         </p>
                     </div>
-                    
+
                     <div class="feature-card">
                         <div class="feature-icon">
                             <i data-lucide="map-pin"></i>
@@ -227,7 +72,7 @@ <h3 class="feature-title">Office</h3>
                             San Jose, CA 95113
                         </p>
                     </div>
-                    
+
                     <div class="feature-card">
                         <div class="feature-icon">
                             <i data-lucide="github"></i>
@@ -243,51 +88,45 @@ <h3 class="feature-title">Open Source</h3>
     </section>
 </main>
 
-<!-- EmailJS SDK -->    
+<!-- EmailJS SDK -->
 <script src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
 
 <script>
     document.addEventListener('DOMContentLoaded', function() {
         // Initialize EmailJS with your public key
         emailjs.init('NZr6o_XV6LUf2f2ht');
-        
+
         // Form handling with EmailJS
         const contactForm = document.getElementById('contactForm');
-        const submitBtn = document.querySelector('.submit-btn');
-        
+        const submitBtn = contactForm ? contactForm.querySelector('button[type="submit"]') : null;
+
         if (contactForm) {
             contactForm.addEventListener('submit', function(e) {
                 e.preventDefault();
-                
-                // Disable the submit button during processing
+
                 submitBtn.disabled = true;
                 submitBtn.textContent = 'Sending...';
-                
-                // Prepare template parameters
+
                 const templateParams = {
                     from_name: document.getElementById('name').value,
                     from_email: document.getElementById('email').value,
                     subject: document.getElementById('subject').value,
                     message: document.getElementById('message').value,
                     to_email: 'contact@multikernel.io'
                 };
-                
-                // Send email using your service and template IDs
+
                 emailjs.send('service_tcj7ad5', 'template_gb6e5gj', templateParams)
                     .then(function(response) {
-                        console.log('SUCCESS!', response.status, response.text);
                         alert('Thank you for your message! We will get back to you soon.');
                         contactForm.reset();
                     }, function(error) {
-                        console.log('FAILED...', error);
                         alert('Sorry, there was an error sending your message. Please try again later or email us directly at contact@multikernel.io');
                     })
                     .finally(function() {
-                        // Re-enable the submit button
                         submitBtn.disabled = false;
                         submitBtn.textContent = 'Send Message';
                     });
             });
         }
     });
-</script>
+</script>

getting-started.html

@@ -192,7 +192,7 @@
 }
 </style>
 
-<main style="margin-top: 0; padding-top: 0;">
+<main>
     <section class="hero">
         <div class="hero-container">
             <h1>Getting Started with Multikernel</h1>

roadmap.html

@@ -5,7 +5,7 @@
 ---
 
 
-<main style="margin-top: 0; padding-top: 0;">
+<main>
     <section class="hero">
         <div class="hero-container">
             <h1>Multikernel System Design And Roadmap</h1>