fix: article CTA panel scrolls with content, appears below last paragraph

This commit is contained in:
oliver
2026-05-05 15:00:18 -03:00
parent c6d3e2516e
commit 5afda4e953
+9 -9
View File
@@ -2085,10 +2085,8 @@
/* ── Article CTA panel ─────────────────────────────────────────── */ /* ── Article CTA panel ─────────────────────────────────────────── */
#article-cta-panel { #article-cta-panel {
position: absolute; width: 260px;
bottom: 28px; margin: 2.5rem 0 0 auto;
right: 28px;
width: 234px;
background: #fdf6ee; background: #fdf6ee;
border: 1px solid rgba(93, 64, 55, 0.22); border: 1px solid rgba(93, 64, 55, 0.22);
border-top: 3px solid var(--gold); border-top: 3px solid var(--gold);
@@ -2097,7 +2095,6 @@
0 8px 32px rgba(62, 39, 35, 0.18), 0 8px 32px rgba(62, 39, 35, 0.18),
0 2px 8px rgba(0, 0, 0, 0.08); 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 18px 16px 16px; padding: 18px 16px 16px;
z-index: 10;
} }
.article-cta-heading { .article-cta-heading {
@@ -2175,7 +2172,7 @@
.article-cta-loc-menu { .article-cta-loc-menu {
display: none; display: none;
position: absolute; position: absolute;
bottom: calc(100% + 4px); top: calc(100% + 4px);
left: 0; left: 0;
right: 0; right: 0;
background: #fdf6ee; background: #fdf6ee;
@@ -2261,7 +2258,7 @@
font-size: 0.95rem; font-size: 0.95rem;
column-width: 280px; column-width: 280px;
} }
#article-cta-panel { display: none; } #article-cta-panel { width: 100%; margin-top: 2rem; }
} }
#modal-confirm .confirm-title { #modal-confirm .confirm-title {
@@ -2626,7 +2623,8 @@
<h2 id="article-title"></h2> <h2 id="article-title"></h2>
<div class="article-date" id="article-date"></div> <div class="article-date" id="article-date"></div>
</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-panel">
<div id="article-cta-form-wrap"> <div id="article-cta-form-wrap">
@@ -2673,6 +2671,7 @@
<p class="article-cta-confirm-sub">We&rsquo;ve received your request. A specialist will be in touch within one business day.</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> </div>
</div>
</div> </div>
</div> </div>
@@ -3536,6 +3535,7 @@
var articleArea = document.getElementById('article-area'); var articleArea = document.getElementById('article-area');
var articleDate = document.getElementById('article-date'); 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) { function openArticle(index) {
var post = allPosts[index]; var post = allPosts[index];
@@ -3543,7 +3543,7 @@
articleArea.textContent = post.area || ''; articleArea.textContent = post.area || '';
articleTitle.textContent = post.title || ''; articleTitle.textContent = post.title || '';
articleDate.textContent = formatDate(post.date); articleDate.textContent = formatDate(post.date);
articleBody.innerHTML = post.content || ''; articleContent.innerHTML = post.content || '';
articleBody.scrollTop = 0; articleBody.scrollTop = 0;
articleOverlay.classList.add('is-open'); articleOverlay.classList.add('is-open');
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';