From 5afda4e953b9e47caf0bb929d888bc6d6921f8a1 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Tue, 5 May 2026 15:00:18 -0300
Subject: [PATCH] fix: article CTA panel scrolls with content, appears below
 last paragraph

---
 index.html | 104 ++++++++++++++++++++++++++---------------------------
 1 file changed, 52 insertions(+), 52 deletions(-)

diff --git a/index.html b/index.html
index 7753996..8c82b5c 100644
--- a/index.html
+++ b/index.html
@@ -2085,10 +2085,8 @@
 
             /* ── Article CTA panel ─────────────────────────────────────────── */
             #article-cta-panel {
-                position: absolute;
-                bottom: 28px;
-                right: 28px;
-                width: 234px;
+                width: 260px;
+                margin: 2.5rem 0 0 auto;
                 background: #fdf6ee;
                 border: 1px solid rgba(93, 64, 55, 0.22);
                 border-top: 3px solid var(--gold);
@@ -2097,7 +2095,6 @@
                     0 8px 32px rgba(62, 39, 35, 0.18),
                     0 2px 8px rgba(0, 0, 0, 0.08);
                 padding: 18px 16px 16px;
-                z-index: 10;
             }
 
             .article-cta-heading {
@@ -2175,7 +2172,7 @@
             .article-cta-loc-menu {
                 display: none;
                 position: absolute;
-                bottom: calc(100% + 4px);
+                top: calc(100% + 4px);
                 left: 0;
                 right: 0;
                 background: #fdf6ee;
@@ -2261,7 +2258,7 @@
                     font-size: 0.95rem;
                     column-width: 280px;
                 }
-                #article-cta-panel { display: none; }
+                #article-cta-panel { width: 100%; margin-top: 2rem; }
             }
 
             #modal-confirm .confirm-title {
@@ -2626,51 +2623,53 @@
                     <h2 id="article-title"></h2>
                     <div class="article-date" id="article-date"></div>
                 </div>
-                <div class="article-body" id="article-body"></div>
+                <div class="article-body" id="article-body">
+                    <div id="article-content"></div>
 
-                <div id="article-cta-panel">
-                    <div id="article-cta-form-wrap">
-                        <p class="article-cta-heading">Try ODOO Free &mdash; 4&nbsp;Weeks</p>
-                        <p class="article-cta-sub">No credit card required</p>
-                        <form id="article-cta-form" novalidate>
-                            <input
-                                type="email"
-                                id="article-cta-email"
-                                name="email"
-                                class="article-cta-field"
-                                placeholder="your@email.com"
-                                required
-                            />
-                            <div class="article-cta-loc-wrap" id="article-cta-loc-wrap">
-                                <button
-                                    type="button"
-                                    class="article-cta-loc-btn"
-                                    id="article-cta-loc-btn"
-                                    aria-haspopup="listbox"
-                                    aria-expanded="false"
-                                >Select server location</button>
-                                <div
-                                    class="article-cta-loc-menu"
-                                    id="article-cta-loc-menu"
-                                    role="listbox"
-                                >
-                                    <button type="button" class="article-cta-loc-opt" data-value="Boston, US">&#127482;&#127480; Boston</button>
-                                    <button type="button" class="article-cta-loc-opt" data-value="Manchester, UK">&#127468;&#127463; Manchester</button>
-                                    <button type="button" class="article-cta-loc-opt" data-value="Mumbai, IN">&#127470;&#127475; Mumbai</button>
-                                    <button type="button" class="article-cta-loc-opt" data-value="Sao Paulo, BR">&#127463;&#127479; S&atilde;o Paulo</button>
-                                    <button type="button" class="article-cta-loc-opt" data-value="Meppel, NL">&#127475;&#127473; Meppel</button>
-                                    <button type="button" class="article-cta-loc-opt" data-value="Sydney, AU">&#127462;&#127482; Sydney</button>
+                    <div id="article-cta-panel">
+                        <div id="article-cta-form-wrap">
+                            <p class="article-cta-heading">Try ODOO Free &mdash; 4&nbsp;Weeks</p>
+                            <p class="article-cta-sub">No credit card required</p>
+                            <form id="article-cta-form" novalidate>
+                                <input
+                                    type="email"
+                                    id="article-cta-email"
+                                    name="email"
+                                    class="article-cta-field"
+                                    placeholder="your@email.com"
+                                    required
+                                />
+                                <div class="article-cta-loc-wrap" id="article-cta-loc-wrap">
+                                    <button
+                                        type="button"
+                                        class="article-cta-loc-btn"
+                                        id="article-cta-loc-btn"
+                                        aria-haspopup="listbox"
+                                        aria-expanded="false"
+                                    >Select server location</button>
+                                    <div
+                                        class="article-cta-loc-menu"
+                                        id="article-cta-loc-menu"
+                                        role="listbox"
+                                    >
+                                        <button type="button" class="article-cta-loc-opt" data-value="Boston, US">&#127482;&#127480; Boston</button>
+                                        <button type="button" class="article-cta-loc-opt" data-value="Manchester, UK">&#127468;&#127463; Manchester</button>
+                                        <button type="button" class="article-cta-loc-opt" data-value="Mumbai, IN">&#127470;&#127475; Mumbai</button>
+                                        <button type="button" class="article-cta-loc-opt" data-value="Sao Paulo, BR">&#127463;&#127479; S&atilde;o Paulo</button>
+                                        <button type="button" class="article-cta-loc-opt" data-value="Meppel, NL">&#127475;&#127473; Meppel</button>
+                                        <button type="button" class="article-cta-loc-opt" data-value="Sydney, AU">&#127462;&#127482; Sydney</button>
+                                    </div>
+                                    <input type="hidden" id="article-cta-location" name="server_location" value="" />
                                 </div>
-                                <input type="hidden" id="article-cta-location" name="server_location" value="" />
-                            </div>
-                            <input type="hidden" name="product" value="odoo_19" />
-                            <input type="hidden" name="plan" value="NGO Free Trial" />
-                            <button type="submit" class="article-cta-submit">Start Free Trial &#8594;</button>
-                        </form>
-                    </div>
-                    <div id="article-cta-confirm" style="display:none">
-                        <p class="article-cta-confirm-title">Thank you! &#127881;</p>
-                        <p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</p>
+                                <input type="hidden" name="product" value="odoo_19" />
+                                <input type="hidden" name="plan" value="NGO Free Trial" />
+                                <button type="submit" class="article-cta-submit">Start Free Trial &#8594;</button>
+                            </form>
+                        </div>
+                        <div id="article-cta-confirm" style="display:none">
+                            <p class="article-cta-confirm-title">Thank you! &#127881;</p>
+                            <p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</p>
+                        </div>
                     </div>
                 </div>
 
@@ -3535,7 +3534,8 @@
                 var articleTitle = document.getElementById('article-title');
                 var articleArea = document.getElementById('article-area');
                 var articleDate = document.getElementById('article-date');
-                var articleBody = document.getElementById('article-body');
+                var articleBody   = document.getElementById('article-body');
+                var articleContent = document.getElementById('article-content');
 
                 function openArticle(index) {
                     var post = allPosts[index];
@@ -3543,7 +3543,7 @@
                     articleArea.textContent = post.area || '';
                     articleTitle.textContent = post.title || '';
                     articleDate.textContent = formatDate(post.date);
-                    articleBody.innerHTML = post.content || '';
+                    articleContent.innerHTML = post.content || '';
                     articleBody.scrollTop = 0;
                     articleOverlay.classList.add('is-open');
                     document.body.style.overflow = 'hidden';