Narrow page layout for better readability

Replace max-w-7xl (1280px) with max-w-5xl (1024px) across all templates
for a more centered, focused content width.

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

templates/about.html

@@ -10,7 +10,7 @@
     <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] pointer-events-none"
          style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
 
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <div class="badge badge-primary mb-6">Our Story</div>
         <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
             About <span class="gradient-text">DirectLX</span>
@@ -23,7 +23,7 @@
 
 <!-- Story + Values -->
 <section class="py-20" style="background: #0a0a14;">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-1 lg:grid-cols-2 gap-14 items-start">
             <div>
                 <h2 class="text-3xl font-bold mb-6" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Our Story</h2>
@@ -73,7 +73,7 @@
 <!-- Team -->
 <section class="py-20 relative">
     <div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-14">
             <div class="badge badge-primary mb-5">The Team</div>
             <h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">Meet the people<br><span class="gradient-text">behind the code</span></h2>

templates/base.html

@@ -15,7 +15,7 @@
 
     <!-- Navigation -->
     <nav class="sticky top-0 z-50 border-b" style="background: rgba(7,7,15,0.85); backdrop-filter: blur(20px); border-color: rgba(255,255,255,0.06);">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
                     <a href="{{ url_for('index') }}" class="flex items-center gap-3 group">
@@ -64,7 +64,7 @@
     <!-- Flash Messages -->
     {% with messages = get_flashed_messages(with_categories=true) %}
         {% if messages %}
-            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 w-full">
+            <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 mt-4 w-full">
                 {% for category, message in messages %}
                     <div class="p-4 rounded-xl mb-2 text-sm font-medium
                         {% if category == 'error' %}border border-red-500/30 bg-red-500/10 text-red-300
@@ -84,7 +84,7 @@
 
     <!-- Footer -->
     <footer style="background: #0a0a14; border-top: 1px solid rgba(255,255,255,0.06);">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
+        <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-14">
             <div class="grid grid-cols-1 md:grid-cols-4 gap-10">
                 <div class="col-span-1 md:col-span-2">
                     <img src="{{ url_for('static', filename='images/directLX_small.png') }}" alt="DirectLX" class="h-9 mb-5 opacity-80">

templates/blog/index.html

@@ -10,7 +10,7 @@
     <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[350px] pointer-events-none"
          style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
 
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <div class="badge badge-primary mb-6">Blog</div>
         <h1 class="text-5xl md:text-6xl font-extrabold mb-5 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
             Insights &amp; <span class="gradient-text">Ideas</span>
@@ -39,7 +39,7 @@
 
 <!-- Blog Posts -->
 <section class="py-16 pb-28" style="background: #0a0a14;">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div id="blog-posts">
             {% include "blog/partials/post_list.html" %}
         </div>

templates/contact.html

@@ -10,7 +10,7 @@
     <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[400px] pointer-events-none"
          style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
 
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <div class="badge badge-primary mb-6">Get in Touch</div>
         <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
             Let's <span class="gradient-text">talk</span>

templates/forum/index.html

@@ -10,7 +10,7 @@
     <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[600px] h-[350px] pointer-events-none"
          style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
 
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <div class="badge badge-accent mb-6">Community</div>
         <h1 class="text-5xl md:text-6xl font-extrabold mb-5 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
             Community <span class="gradient-text">Forum</span>

templates/index.html

@@ -18,7 +18,7 @@
     <!-- Dot grid -->
     <div class="absolute inset-0 dot-grid opacity-40 pointer-events-none"></div>
 
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center">
         <!-- Pre-heading badge -->
         <div class="inline-flex items-center gap-2 badge badge-primary mb-8">
             <svg class="w-3 h-3 text-primary-400" fill="currentColor" viewBox="0 0 8 8">
@@ -78,7 +78,7 @@
 <!-- Features Section -->
 <section class="py-24 relative">
     <div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-16">
             <div class="badge badge-primary mb-5">Why DirectLX</div>
             <h2 class="text-3xl md:text-4xl font-bold mb-4" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
@@ -137,7 +137,7 @@
 
 <!-- Latest Blog Posts -->
 <section class="py-24" style="background: #0a0a14;">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="flex justify-between items-end mb-12">
             <div>
                 <div class="badge badge-primary mb-4">From the Blog</div>

templates/services.html

@@ -10,7 +10,7 @@
     <div class="absolute top-0 left-1/2 -translate-x-1/2 w-[700px] h-[400px] pointer-events-none"
          style="background: radial-gradient(ellipse, rgba(92,184,44,0.1) 0%, transparent 70%); filter: blur(40px);"></div>
 
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
         <div class="badge badge-primary mb-6">What We Do</div>
         <h1 class="text-5xl md:text-6xl font-extrabold mb-6 leading-tight" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">
             Our <span class="gradient-text">Services</span>
@@ -23,7 +23,7 @@
 
 <!-- Services Grid -->
 <section class="py-20" style="background: #0a0a14;">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 
             {% set services = [
@@ -31,28 +31,28 @@
                     'icon': 'M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9',
                     'title': 'Web Development',
                     'desc': 'Modern, responsive websites and web applications built with the latest technologies. From simple landing pages to complex enterprise platforms.',
-                    'items': ['Custom web applications', 'E-commerce solutions', 'Progressive Web Apps (PWAs)'],
+                    'features': ['Custom web applications', 'E-commerce solutions', 'Progressive Web Apps (PWAs)'],
                     'accent': 'primary'
                 },
                 {
                     'icon': 'M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z',
                     'title': 'API Development',
                     'desc': 'Robust, scalable APIs that power your applications and enable seamless integrations with third-party services.',
-                    'items': ['RESTful API design', 'GraphQL implementations', 'Third-party integrations'],
+                    'features': ['RESTful API design', 'GraphQL implementations', 'Third-party integrations'],
                     'accent': 'accent'
                 },
                 {
                     'icon': 'M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z',
                     'title': 'Cloud Solutions',
                     'desc': 'Leverage the power of cloud computing with our expertise in AWS, Azure, and Google Cloud Platform.',
-                    'items': ['Cloud architecture design', 'Migration services', 'DevOps & CI/CD pipelines'],
+                    'features': ['Cloud architecture design', 'Migration services', 'DevOps & CI/CD pipelines'],
                     'accent': 'accent'
                 },
                 {
                     'icon': 'M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z',
                     'title': 'Technical Consulting',
                     'desc': 'Expert guidance on technology strategy, architecture decisions, and best practices for your development team.',
-                    'items': ['Technology assessment', 'Code reviews & audits', 'Team training'],
+                    'features': ['Technology assessment', 'Code reviews & audits', 'Team training'],
                     'accent': 'primary'
                 },
             ] %}
@@ -68,7 +68,7 @@
                 <h3 class="text-xl font-bold mb-3" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">{{ svc.title }}</h3>
                 <p class="text-sm leading-relaxed mb-6" style="color: #8b8ca8;">{{ svc.desc }}</p>
                 <ul class="space-y-2.5">
-                    {% for item in svc.items %}
+                    {% for item in svc.features %}
                     <li class="flex items-center gap-3 text-sm" style="color: #c4c2d4;">
                         <div class="w-1.5 h-1.5 rounded-full flex-shrink-0 {% if svc.accent == 'accent' %}bg-accent-400{% else %}bg-primary-400{% endif %}"></div>
                         {{ item }}
@@ -85,7 +85,7 @@
 <!-- Process -->
 <section class="py-24 relative">
     <div class="absolute inset-0 dot-grid opacity-20 pointer-events-none"></div>
-    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
         <div class="text-center mb-16">
             <div class="badge badge-primary mb-5">How We Work</div>
             <h2 class="text-3xl font-bold" style="font-family: 'Syne', sans-serif; color: #f1f0ff;">