refactor: merge duplicate nav/style partials, fix sticky nav overflow

public/index.html

@@ -25,22 +25,44 @@
 :root {
   --bg: #0b0d11; --bg2: #12151c; --fg: #e4e7ed; --muted: #7a8194;
   --accent: #34d399; --accent-hover: #5eead4; --accent-glow: rgba(52,211,153,0.12);
-  --accent2: #60a5fa; --card: #151922; --border: #1e2433;
+  --card: #151922; --border: #1e2433;
   --radius: 12px; --radius-lg: 16px;
 }
 body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
 a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
 a:hover { color: var(--accent-hover); }
-.container { max-width: 1020px; margin: 0 auto; padding: 0 24px; }
+.container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
-
-/* Nav */
 nav { padding: 20px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 100; }
 nav .container { display: flex; align-items: center; justify-content: space-between; }
-.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
+.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; color: var(--fg); display: flex; align-items: center; gap: 8px; text-decoration: none; }
 .logo span { color: var(--accent); }
 .nav-links { display: flex; gap: 28px; align-items: center; }
 .nav-links a { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
 .nav-links a:hover { color: var(--fg); }
+.content { padding: 60px 0; min-height: 60vh; }
+.content h1 { font-size: 2rem; font-weight: 800; margin-bottom: 32px; letter-spacing: -1px; }
+.content h2 { font-size: 1.3rem; font-weight: 700; margin: 32px 0 16px; color: var(--fg); }
+.content h3 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 12px; color: var(--fg); }
+.content p, .content li { color: var(--muted); margin-bottom: 12px; }
+.content ul, .content ol { padding-left: 24px; }
+.content strong { color: var(--fg); }
+footer { padding: 32px 0; border-top: 1px solid var(--border); margin-top: 60px; }
+footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
+.footer-left { color: var(--muted); font-size: 0.85rem; }
+.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
+.footer-links a { color: var(--muted); font-size: 0.85rem; }
+.footer-links a:hover { color: var(--fg); }
+@media (max-width: 768px) {
+  footer .container { flex-direction: column; text-align: center; }
+  .nav-links { gap: 16px; }
+}
+
+.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
+</style>
+<style>
+/* Index-page extra vars */
+:root { --accent2: #60a5fa; }
+.container { max-width: 1020px; }
 
 /* Hero */
 .hero { padding: 100px 0 80px; text-align: center; position: relative; }
@@ -121,13 +143,10 @@ section { position: relative; }
   .eu-icon { font-size: 2.5rem; }
 }
 
-/* Footer */
+/* Footer (index override) */
-footer { padding: 40px 0; border-top: 1px solid var(--border); }
+footer { padding: 40px 0; }
 footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
-.footer-left { color: var(--muted); font-size: 0.85rem; }
+.footer-links { gap: 24px; }
-.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
-.footer-links a { color: var(--muted); font-size: 0.85rem; }
-.footer-links a:hover { color: var(--fg); }
 
 /* Modal */
 .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
@@ -156,6 +175,20 @@ footer .container { display: flex; align-items: center; justify-content: space-b
 .warning-box .icon { font-size: 1.1rem; flex-shrink: 0; }
 .signup-error { color: #f87171; font-size: 0.85rem; margin-bottom: 16px; display: none; padding: 10px 14px; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); border-radius: 8px; }
 
+/* Recovery modal states */
+#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
+#recoverInitial.active { display: block; }
+#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
+#recoverResult.active { display: block; }
+#recoverVerify.active { display: block; }
+
+/* Email change modal states */
+#emailChangeInitial, #emailChangeLoading, #emailChangeVerify, #emailChangeResult { display: none; }
+#emailChangeInitial.active { display: block; }
+#emailChangeLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
+#emailChangeResult.active { display: block; }
+#emailChangeVerify.active { display: block; }
+
 /* Responsive */
 @media (max-width: 640px) {
   .hero { padding: 72px 0 56px; }
@@ -193,9 +226,9 @@ footer .container { display: flex; align-items: center; justify-content: space-b
   }
 }
 
-/* Additional mobile overflow fixes */
+/* Mobile overflow fixes — overflow-x: clip (not hidden) preserves position:sticky */
 html, body {
-  overflow-x: hidden !important;
+  overflow-x: clip !important;
   max-width: 100vw !important;
 }
 
@@ -204,7 +237,7 @@ html, body {
     max-width: 100% !important;
   }
   body { 
-    overflow-x: hidden !important; 
+    overflow-x: clip !important; 
   }
   .container { 
     overflow-x: hidden !important; 
@@ -246,23 +279,8 @@ html, body {
   }
 }
 
-/* Recovery modal states */
-#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
-#recoverInitial.active { display: block; }
-#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
-#recoverResult.active { display: block; }
-#recoverVerify.active { display: block; }
-
-/* Email change modal states */
-#emailChangeInitial, #emailChangeLoading, #emailChangeVerify, #emailChangeResult { display: none; }
-#emailChangeInitial.active { display: block; }
-#emailChangeLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
-#emailChangeResult.active { display: block; }
-#emailChangeVerify.active { display: block; }
-
 /* Focus-visible for accessibility */
 .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
 </style>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -274,8 +292,8 @@ html, body {
   <div class="container">
     <a href="/" class="logo">⚡ Doc<span>Fast</span></a>
     <div class="nav-links">
-      <a href="#features">Features</a>
+      <a href="/#features">Features</a>
-      <a href="#pricing">Pricing</a>
+      <a href="/#pricing">Pricing</a>
       <a href="/docs">Docs</a>
     </div>
   </div>

public/partials/_nav_index.html

@@ -1,10 +0,0 @@
-<nav aria-label="Main navigation">
-  <div class="container">
-    <a href="/" class="logo">⚡ Doc<span>Fast</span></a>
-    <div class="nav-links">
-      <a href="#features">Features</a>
-      <a href="#pricing">Pricing</a>
-      <a href="/docs">Docs</a>
-    </div>
-  </div>
-</nav>

public/partials/_styles_index_extra.html

@@ -1,24 +1,7 @@
 <style>
-*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+/* Index-page extra vars */
-:root {
+:root { --accent2: #60a5fa; }
-  --bg: #0b0d11; --bg2: #12151c; --fg: #e4e7ed; --muted: #7a8194;
+.container { max-width: 1020px; }
-  --accent: #34d399; --accent-hover: #5eead4; --accent-glow: rgba(52,211,153,0.12);
-  --accent2: #60a5fa; --card: #151922; --border: #1e2433;
-  --radius: 12px; --radius-lg: 16px;
-}
-body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
-a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
-a:hover { color: var(--accent-hover); }
-.container { max-width: 1020px; margin: 0 auto; padding: 0 24px; }
-
-/* Nav */
-nav { padding: 20px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 100; }
-nav .container { display: flex; align-items: center; justify-content: space-between; }
-.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; color: var(--fg); display: flex; align-items: center; gap: 8px; }
-.logo span { color: var(--accent); }
-.nav-links { display: flex; gap: 28px; align-items: center; }
-.nav-links a { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
-.nav-links a:hover { color: var(--fg); }
 
 /* Hero */
 .hero { padding: 100px 0 80px; text-align: center; position: relative; }
@@ -99,13 +82,10 @@ section { position: relative; }
   .eu-icon { font-size: 2.5rem; }
 }
 
-/* Footer */
+/* Footer (index override) */
-footer { padding: 40px 0; border-top: 1px solid var(--border); }
+footer { padding: 40px 0; }
 footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
-.footer-left { color: var(--muted); font-size: 0.85rem; }
+.footer-links { gap: 24px; }
-.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
-.footer-links a { color: var(--muted); font-size: 0.85rem; }
-.footer-links a:hover { color: var(--fg); }
 
 /* Modal */
 .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
@@ -134,6 +114,20 @@ footer .container { display: flex; align-items: center; justify-content: space-b
 .warning-box .icon { font-size: 1.1rem; flex-shrink: 0; }
 .signup-error { color: #f87171; font-size: 0.85rem; margin-bottom: 16px; display: none; padding: 10px 14px; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); border-radius: 8px; }
 
+/* Recovery modal states */
+#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
+#recoverInitial.active { display: block; }
+#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
+#recoverResult.active { display: block; }
+#recoverVerify.active { display: block; }
+
+/* Email change modal states */
+#emailChangeInitial, #emailChangeLoading, #emailChangeVerify, #emailChangeResult { display: none; }
+#emailChangeInitial.active { display: block; }
+#emailChangeLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
+#emailChangeResult.active { display: block; }
+#emailChangeVerify.active { display: block; }
+
 /* Responsive */
 @media (max-width: 640px) {
   .hero { padding: 72px 0 56px; }
@@ -171,9 +165,9 @@ footer .container { display: flex; align-items: center; justify-content: space-b
   }
 }
 
-/* Additional mobile overflow fixes */
+/* Mobile overflow fixes — overflow-x: clip (not hidden) preserves position:sticky */
 html, body {
-  overflow-x: hidden !important;
+  overflow-x: clip !important;
   max-width: 100vw !important;
 }
 
@@ -182,7 +176,7 @@ html, body {
     max-width: 100% !important;
   }
   body { 
-    overflow-x: hidden !important; 
+    overflow-x: clip !important; 
   }
   .container { 
     overflow-x: hidden !important; 
@@ -224,21 +218,6 @@ html, body {
   }
 }
 
-/* Recovery modal states */
-#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
-#recoverInitial.active { display: block; }
-#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
-#recoverResult.active { display: block; }
-#recoverVerify.active { display: block; }
-
-/* Email change modal states */
-#emailChangeInitial, #emailChangeLoading, #emailChangeVerify, #emailChangeResult { display: none; }
-#emailChangeInitial.active { display: block; }
-#emailChangeLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
-#emailChangeResult.active { display: block; }
-#emailChangeVerify.active { display: block; }
-
 /* Focus-visible for accessibility */
 .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
-.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
 </style>

public/src/index.html

@@ -20,14 +20,15 @@
 {"@context":"https://schema.org","@type":"SoftwareApplication","name":"DocFast","url":"https://docfast.dev","applicationCategory":"DeveloperApplication","operatingSystem":"Web","description":"Convert HTML and Markdown to beautiful PDFs with a simple API call. Fast, reliable, developer-friendly.","offers":[{"@type":"Offer","price":"0","priceCurrency":"EUR","name":"Free","description":"100 PDFs/month"},{"@type":"Offer","price":"9","priceCurrency":"EUR","name":"Pro","description":"2,500 PDFs per month","billingIncrement":"P1M"}]}
 </script>
 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
-{{> styles_index}}
+{{> styles_base}}
+{{> styles_index_extra}}
 <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;800&display=swap" rel="stylesheet">
 </head>
 <body>
 
-{{> nav_index}}
+{{> nav}}
 
 <main role="main">
 <section class="hero">