From fd4e0ea8833b47e64e4635a8d5559ebb6c74b1d3 Mon Sep 17 00:00:00 2001
From: oliver <oliver@odoo4projects.com>
Date: Fri, 15 May 2026 14:51:18 -0300
Subject: [PATCH] feat: add article reader overlay, fix blog posts JS, add
 article CTA + schedule

---
 index.html | 977 +++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 958 insertions(+), 19 deletions(-)

diff --git a/index.html b/index.html
index 8c6ba5b..1a4aa7a 100644
--- a/index.html
+++ b/index.html
@@ -1558,6 +1558,544 @@
                 flex-wrap: wrap;
             }
 
+            /* ── News card read button ──────────────────────────────── */
+            .news-card-header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .news-teaser {
+                display: -webkit-box;
+                -webkit-line-clamp: 4;
+                -webkit-box-orient: vertical;
+                overflow: hidden;
+            }
+
+            .news-read-btn {
+                display: inline-flex;
+                align-items: center;
+                gap: 8px;
+                align-self: flex-start;
+                margin-top: auto;
+                padding: 10px 20px;
+                font-size: 0.72rem;
+                font-weight: 700;
+                text-transform: uppercase;
+                letter-spacing: 0.12em;
+                color: var(--gold);
+                border: 1px solid rgba(230, 81, 0, 0.24);
+                border-radius: 999px;
+                background: rgba(230, 81, 0, 0.06);
+                cursor: pointer;
+                transition:
+                    background 0.25s,
+                    color 0.25s,
+                    border-color 0.25s;
+            }
+
+            .news-read-btn:hover {
+                background: var(--gold);
+                color: var(--bg);
+                border-color: var(--gold);
+            }
+
+            /* ── Article overlay ─────────────────────────────────────── */
+            #article-overlay {
+                position: fixed;
+                inset: 0;
+                z-index: 9500;
+                display: none;
+                align-items: center;
+                justify-content: center;
+                padding: 20px;
+                background: rgba(62, 39, 35, 0.88);
+                backdrop-filter: blur(18px);
+                -webkit-backdrop-filter: blur(18px);
+            }
+
+            #article-overlay.is-open {
+                display: flex;
+            }
+
+            #article-box {
+                position: relative;
+                width: 100%;
+                max-width: 92vw;
+                height: 82vh;
+                display: flex;
+                flex-direction: column;
+                background: var(--card);
+                border-radius: 6px;
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                box-shadow:
+                    0 40px 100px rgba(0, 0, 0, 0.35),
+                    0 0 0 1px rgba(255, 243, 224, 0.15);
+            }
+
+            #article-box .article-rule {
+                height: 4px;
+                background: linear-gradient(
+                    90deg,
+                    var(--gold),
+                    var(--gold-hi),
+                    var(--gold)
+                );
+                flex-shrink: 0;
+            }
+
+            #article-box .article-header {
+                padding: 32px 40px 24px;
+                text-align: center;
+                flex-shrink: 0;
+                border-bottom: 1px solid rgba(93, 64, 55, 0.12);
+            }
+
+            #article-box .article-header .article-area {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.7rem;
+                letter-spacing: 0.18em;
+                text-transform: uppercase;
+                color: var(--gold);
+                font-weight: 400;
+            }
+
+            #article-box .article-header h2 {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 2rem;
+                line-height: 1.2;
+                color: var(--white);
+                margin: 12px 0 10px;
+                font-weight: 400;
+            }
+
+            #article-box .article-header .article-date {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.78rem;
+                color: var(--silver);
+                font-style: italic;
+            }
+
+            #article-box .article-body {
+                padding: 28px 40px 40px;
+                overflow-x: hidden;
+                overflow-y: auto;
+                flex: 1;
+                min-height: 0;
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 1.05rem;
+                line-height: 1.85;
+                color: var(--light);
+            }
+
+            #article-box .article-body::-webkit-scrollbar {
+                width: 8px;
+            }
+
+            #article-box .article-body::-webkit-scrollbar-track {
+                background: rgba(93, 64, 55, 0.06);
+            }
+
+            #article-box .article-body::-webkit-scrollbar-thumb {
+                background: rgba(230, 81, 0, 0.25);
+                border-radius: 4px;
+            }
+
+            #article-box .article-body::-webkit-scrollbar-thumb:hover {
+                background: rgba(230, 81, 0, 0.45);
+            }
+
+            #article-box .article-body h2,
+            #article-box .article-body h3 {
+                font-family: Georgia, "Times New Roman", serif;
+                font-weight: 400;
+                color: var(--white);
+                margin: 28px 0 12px;
+                line-height: 1.3;
+            }
+
+            #article-box .article-body h2 {
+                font-size: 1.35rem;
+                border-bottom: 1px solid rgba(93, 64, 55, 0.12);
+                padding-bottom: 8px;
+            }
+
+            #article-box .article-body h3 {
+                font-size: 1.15rem;
+            }
+
+            #article-box .article-body p {
+                margin-bottom: 16px;
+                text-align: justify;
+                hyphens: auto;
+                break-inside: avoid;
+            }
+
+            #article-box .article-body ul {
+                margin: 12px 0;
+                padding-left: 20px;
+                list-style: disc;
+            }
+
+            #article-box .article-body li {
+                margin-bottom: 6px;
+            }
+
+            #article-box .article-body a.cta {
+                display: inline-block;
+                padding: 14px 28px;
+                background: var(--gold);
+                color: var(--bg);
+                text-decoration: none;
+                border-radius: 6px;
+                font-weight: 700;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.85rem;
+                letter-spacing: 0.04em;
+                margin-top: 12px;
+                transition: background 0.25s;
+            }
+
+            #article-box .article-body a.cta:hover {
+                background: var(--gold-hi);
+            }
+
+            #article-box .article-body iframe {
+                width: 340px;
+                max-width: 100%;
+                height: auto;
+                aspect-ratio: 16 / 9;
+                border-radius: 6px;
+                margin: 20px 0;
+                border: 1px solid rgba(93, 64, 55, 0.12);
+                break-inside: avoid;
+            }
+
+            #article-close {
+                position: absolute;
+                top: 14px;
+                right: 14px;
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                border: none;
+                background: rgba(93, 64, 55, 0.08);
+                color: var(--silver);
+                font-size: 1.2rem;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition:
+                    background 0.2s,
+                    color 0.2s;
+                z-index: 2;
+            }
+
+            #article-close:hover {
+                background: rgba(230, 81, 0, 0.12);
+                color: var(--gold);
+            }
+
+            #article-copy-link {
+                position: absolute;
+                top: 14px;
+                right: 58px;
+                width: 36px;
+                height: 36px;
+                border-radius: 50%;
+                border: none;
+                background: rgba(93, 64, 55, 0.08);
+                color: var(--silver);
+                font-size: 1rem;
+                cursor: pointer;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                transition:
+                    background 0.2s,
+                    color 0.2s;
+                z-index: 2;
+                line-height: 1;
+            }
+
+            #article-copy-link:hover {
+                background: rgba(230, 81, 0, 0.12);
+                color: var(--gold);
+            }
+
+            #article-copy-link.copied {
+                color: var(--gold);
+            }
+
+            /* ── Article actions row ─────────────────────────────────── */
+            #article-actions {
+                display: flex;
+                align-items: stretch;
+                gap: 12px;
+                margin: 2.5rem 0 0 auto;
+                width: fit-content;
+            }
+
+            .article-schedule-btn {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 6px;
+                width: 150px;
+                background: var(--card);
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-top: 3px solid var(--silver);
+                border-radius: 6px;
+                box-shadow:
+                    0 8px 32px rgba(62, 39, 35, 0.18),
+                    0 2px 8px rgba(0, 0, 0, 0.08);
+                padding: 18px 14px;
+                cursor: pointer;
+                transition:
+                    border-top-color 0.2s,
+                    box-shadow 0.2s;
+                text-align: center;
+            }
+
+            .article-schedule-btn:hover {
+                border-top-color: var(--gold);
+                box-shadow:
+                    0 12px 40px rgba(62, 39, 35, 0.22),
+                    0 2px 8px rgba(0, 0, 0, 0.1);
+            }
+
+            .article-schedule-icon {
+                font-size: 1.6rem;
+                line-height: 1;
+            }
+
+            .article-schedule-label {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.83rem;
+                font-weight: 700;
+                color: var(--white);
+                line-height: 1.3;
+            }
+
+            .article-schedule-sub {
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.68rem;
+                color: var(--silver);
+                font-style: italic;
+                line-height: 1.4;
+            }
+
+            /* ── Article CTA panel ───────────────────────────────────── */
+            #article-cta-panel {
+                width: 260px;
+                background: var(--card);
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-top: 3px solid var(--gold);
+                border-radius: 6px;
+                box-shadow:
+                    0 8px 32px rgba(62, 39, 35, 0.18),
+                    0 2px 8px rgba(0, 0, 0, 0.08);
+                padding: 18px 16px 16px;
+            }
+
+            .article-cta-heading {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.83rem;
+                font-weight: 700;
+                color: var(--white);
+                margin: 0 0 3px;
+                line-height: 1.3;
+            }
+
+            .article-cta-sub {
+                font-size: 0.71rem;
+                color: var(--silver);
+                font-style: italic;
+                margin: 0 0 12px;
+            }
+
+            .article-cta-field {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                background: var(--lift);
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-radius: 4px;
+                padding: 8px 10px;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                color: var(--white);
+                margin-bottom: 8px;
+                outline: none;
+                transition: border-color 0.2s;
+            }
+
+            .article-cta-field::placeholder {
+                color: var(--grey);
+            }
+
+            .article-cta-field:focus {
+                border-color: var(--gold);
+            }
+
+            .article-cta-loc-wrap {
+                position: relative;
+                margin-bottom: 8px;
+            }
+
+            .article-cta-loc-btn {
+                display: block;
+                width: 100%;
+                box-sizing: border-box;
+                background: var(--lift);
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-radius: 4px;
+                padding: 8px 28px 8px 10px;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                color: var(--grey);
+                text-align: left;
+                cursor: pointer;
+                outline: none;
+                transition: border-color 0.2s;
+                position: relative;
+            }
+
+            .article-cta-loc-btn.has-value {
+                color: var(--white);
+            }
+
+            .article-cta-loc-btn:focus {
+                border-color: var(--gold);
+            }
+
+            .article-cta-loc-btn::after {
+                content: "\25BE";
+                position: absolute;
+                right: 10px;
+                top: 50%;
+                transform: translateY(-50%);
+                color: var(--silver);
+                font-size: 0.75rem;
+                pointer-events: none;
+            }
+
+            .article-cta-loc-menu {
+                display: none;
+                position: absolute;
+                top: calc(100% + 4px);
+                left: 0;
+                right: 0;
+                background: var(--card);
+                border: 1px solid rgba(93, 64, 55, 0.22);
+                border-radius: 4px;
+                box-shadow: 0 4px 16px rgba(62, 39, 35, 0.15);
+                z-index: 30;
+                overflow: hidden;
+            }
+
+            .article-cta-loc-wrap.open .article-cta-loc-menu {
+                display: block;
+            }
+
+            .article-cta-loc-opt {
+                display: block;
+                width: 100%;
+                text-align: left;
+                padding: 8px 12px;
+                background: none;
+                border: none;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                color: var(--light);
+                cursor: pointer;
+                transition: background 0.15s;
+            }
+
+            .article-cta-loc-opt:hover,
+            .article-cta-loc-opt.is-selected {
+                background: rgba(230, 81, 0, 0.08);
+                color: var(--gold);
+            }
+
+            .article-cta-submit {
+                display: block;
+                width: 100%;
+                padding: 9px 12px;
+                background: var(--gold);
+                color: var(--bg);
+                border: none;
+                border-radius: 4px;
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.8rem;
+                font-weight: 700;
+                letter-spacing: 0.04em;
+                cursor: pointer;
+                transition: background 0.2s;
+            }
+
+            .article-cta-submit:hover {
+                background: var(--gold-hi);
+            }
+
+            .article-cta-submit:disabled {
+                opacity: 0.65;
+                cursor: default;
+            }
+
+            #article-cta-confirm {
+                text-align: center;
+            }
+
+            .article-cta-confirm-title {
+                font-family: Georgia, "Times New Roman", serif;
+                font-size: 0.95rem;
+                color: var(--white);
+                margin: 0 0 6px;
+            }
+
+            .article-cta-confirm-sub {
+                font-family: "Segoe UI", system-ui, sans-serif;
+                font-size: 0.75rem;
+                color: var(--silver);
+                margin: 0;
+                line-height: 1.5;
+            }
+
+            @media (max-width: 860px) {
+                #article-box {
+                    height: 90vh;
+                    max-width: 96vw;
+                    border-radius: 4px;
+                }
+
+                #article-box .article-header {
+                    padding: 24px 20px 18px;
+                }
+
+                #article-box .article-header h2 {
+                    font-size: 1.5rem;
+                }
+
+                #article-box .article-body {
+                    padding: 20px 20px 28px;
+                    font-size: 0.95rem;
+                }
+
+                #article-actions {
+                    flex-direction: column;
+                    width: 100%;
+                    margin-top: 2rem;
+                }
+
+                .article-schedule-btn,
+                #article-cta-panel {
+                    width: 100%;
+                }
+            }
+
             @media (max-width: 1180px) {
                 .story-grid {
                     grid-template-columns: 1fr;
@@ -2433,6 +2971,160 @@
             </div>
         </footer>
 
+        <div id="article-overlay">
+            <div id="article-box">
+                <button id="article-close" aria-label="Close article">
+                    &times;
+                </button>
+                <button
+                    id="article-copy-link"
+                    aria-label="Copy link to article"
+                    title="Copy link to this article"
+                >
+                    &#128279;
+                </button>
+                <div class="article-rule"></div>
+                <div class="article-header">
+                    <div class="article-area" id="article-area"></div>
+                    <h2 id="article-title"></h2>
+                    <div class="article-date" id="article-date"></div>
+                </div>
+                <div class="article-body" id="article-body">
+                    <div id="article-content"></div>
+                    <div id="article-actions">
+                        <button
+                            id="article-schedule-btn"
+                            class="article-schedule-btn"
+                            type="button"
+                        >
+                            <span class="article-schedule-icon">&#128197;</span>
+                            <span class="article-schedule-label"
+                                >Schedule a Meeting</span
+                            >
+                            <span class="article-schedule-sub"
+                                >Pick a time that works for you</span
+                            >
+                        </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"
+                                        name="product"
+                                        value="odoo_19"
+                                    />
+                                    <input
+                                        type="hidden"
+                                        name="plan"
+                                        value="General 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>
+                </div>
+            </div>
+        </div>
+
         <script>
             (function () {
                 var params = new URLSearchParams(window.location.search);
@@ -2594,26 +3286,38 @@
                     });
                 }
 
-                function postMarkup(post) {
+                function postMarkup(post, index) {
                     return [
-                        '<a class="news-card" href="' + post.link + '">',
-                        '<img class="news-card-image" src="' +
-                            post.image +
-                            '" alt="' +
-                            post.headline.replace(/"/g, "&quot;") +
-                            '">',
+                        '<div class="news-card">',
+                        post.image
+                            ? '<img class="news-card-image" src="https://my-biz.app/content/images/blog/' +
+                              post.image.replace(/\.[^.]+$/, "") +
+                              '.webp" alt="' +
+                              (post.title || "").replace(/"/g, "&quot;") +
+                              '">'
+                            : "",
                         '<div class="news-card-body">',
-                        "<div>",
-                        '<div class="news-area">' + post.vertical + "</div>",
-                        '<h3 class="news-title">' + post.headline + "</h3>",
-                        '<p class="news-teaser">' + post.shortText + "</p>",
+                        '<div style="flex:1;display:flex;flex-direction:column;">',
+                        '<div class="news-card-header">',
+                        '<div class="news-area">' +
+                            (post.area || "") +
+                            "</div>",
                         '<span class="news-date">' +
                             formatDate(post.date) +
                             "</span>",
                         "</div>",
-                        '<span class="news-link">Read article &#8594;</span>',
+                        '<h3 class="news-title">' +
+                            (post.title || "") +
+                            "</h3>",
+                        '<p class="news-teaser">' +
+                            (post.teaser || "") +
+                            "</p>",
+                        "</div>",
+                        '<button class="news-read-btn" data-article-index="' +
+                            index +
+                            '">How to implement this &#8594;</button>',
+                        "</div>",
                         "</div>",
-                        "</a>",
                     ].join("");
                 }
 
@@ -2644,7 +3348,14 @@
                             "No posts match your search.",
                         );
                     } else {
-                        grid.innerHTML = pagePosts.map(postMarkup).join("");
+                        grid.innerHTML = pagePosts
+                            .map(function (p, i) {
+                                return postMarkup(
+                                    p,
+                                    currentPage * PAGE_SIZE + i,
+                                );
+                            })
+                            .join("");
                     }
                     if (window._mbsTracking)
                         window._mbsTracking.applyToLinks(grid);
@@ -2658,11 +3369,7 @@
                     var term = (search.value || "").trim().toLowerCase();
                     filteredPosts = allPosts.filter(function (post) {
                         if (!term) return true;
-                        var haystack = [
-                            post.headline,
-                            post.vertical,
-                            post.shortText,
-                        ]
+                        var haystack = [post.title, post.area, post.teaser]
                             .join(" ")
                             .toLowerCase();
                         return haystack.indexOf(term) !== -1;
@@ -2700,6 +3407,120 @@
                     searchTrackTimer = setTimeout(trackSearch, 450);
                 });
 
+                /* ── Article overlay ──────────────────────────────────── */
+                var articleOverlay = document.getElementById("article-overlay");
+                var articleClose = document.getElementById("article-close");
+                var articleCopyLink =
+                    document.getElementById("article-copy-link");
+                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 articleContent = document.getElementById("article-content");
+
+                function slugify(title) {
+                    return (title || "")
+                        .toLowerCase()
+                        .replace(/[^a-z0-9\s-]/g, "")
+                        .replace(/\s+/g, "-")
+                        .replace(/-+/g, "-")
+                        .replace(/^-|-$/g, "");
+                }
+
+                function findPostIndexBySlug(slug) {
+                    for (var i = 0; i < allPosts.length; i++) {
+                        if (slugify(allPosts[i].title) === slug) return i;
+                    }
+                    return -1;
+                }
+
+                function openArticle(index) {
+                    var post = allPosts[index];
+                    if (!post) return;
+                    articleArea.textContent = post.area || "";
+                    articleTitle.textContent = post.title || "";
+                    articleDate.textContent = formatDate(post.date);
+                    articleContent.innerHTML = post.content || "";
+                    articleBody.scrollTop = 0;
+                    articleOverlay.classList.add("is-open");
+                    document.body.style.overflow = "hidden";
+                    history.replaceState(
+                        null,
+                        "",
+                        "#post-" + slugify(post.title),
+                    );
+                    if (articleCopyLink) {
+                        articleCopyLink.innerHTML = "&#128279;";
+                        articleCopyLink.classList.remove("copied");
+                    }
+                }
+
+                function closeArticle() {
+                    articleOverlay.classList.remove("is-open");
+                    document.body.style.overflow = "";
+                    history.replaceState(
+                        null,
+                        "",
+                        window.location.pathname + window.location.search,
+                    );
+                }
+
+                articleClose.addEventListener("click", closeArticle);
+                articleOverlay.addEventListener("click", function (e) {
+                    if (e.target === articleOverlay) closeArticle();
+                });
+                document.addEventListener("keydown", function (e) {
+                    if (
+                        e.key === "Escape" &&
+                        articleOverlay.classList.contains("is-open")
+                    )
+                        closeArticle();
+                });
+
+                if (articleCopyLink) {
+                    articleCopyLink.addEventListener("click", function () {
+                        var url = window.location.href;
+                        function showCopied() {
+                            articleCopyLink.textContent = "\u2713";
+                            articleCopyLink.classList.add("copied");
+                            setTimeout(function () {
+                                articleCopyLink.innerHTML = "&#128279;";
+                                articleCopyLink.classList.remove("copied");
+                            }, 2000);
+                        }
+                        if (
+                            navigator.clipboard &&
+                            navigator.clipboard.writeText
+                        ) {
+                            navigator.clipboard
+                                .writeText(url)
+                                .then(showCopied, showCopied);
+                        } else {
+                            var ta = document.createElement("textarea");
+                            ta.value = url;
+                            ta.style.cssText =
+                                "position:fixed;opacity:0;pointer-events:none";
+                            document.body.appendChild(ta);
+                            ta.select();
+                            try {
+                                document.execCommand("copy");
+                            } catch (err) {}
+                            document.body.removeChild(ta);
+                            showCopied();
+                        }
+                    });
+                }
+
+                grid.addEventListener("click", function (e) {
+                    var btn = e.target.closest(".news-read-btn");
+                    if (!btn) return;
+                    var idx = parseInt(
+                        btn.getAttribute("data-article-index"),
+                        10,
+                    );
+                    openArticle(idx);
+                });
+
                 fetch(POSTS_URL)
                     .then(function (response) {
                         return response.json();
@@ -2708,6 +3529,12 @@
                         allPosts = Array.isArray(posts) ? posts : [];
                         filteredPosts = allPosts.slice();
                         render();
+                        var hash = window.location.hash;
+                        if (hash && hash.indexOf("#post-") === 0) {
+                            var slug = hash.slice(6);
+                            var idx = findPostIndexBySlug(slug);
+                            if (idx !== -1) openArticle(idx);
+                        }
                     })
                     .catch(function () {
                         grid.innerHTML = emptyMarkup(
@@ -2720,6 +3547,118 @@
             })();
         </script>
 
+        <script>
+            (function () {
+                var WEBHOOK =
+                    "https://002-001-5dd6e535-4d1c-46bc-9bd9-42ad4bc5f082.odoo4projects.com/webhook/c25169c6-4234-4b47-8e74-612b9539da0a";
+                var form = document.getElementById("article-cta-form");
+                var formWrap = document.getElementById("article-cta-form-wrap");
+                var confirmDiv = document.getElementById("article-cta-confirm");
+                var locWrap = document.getElementById("article-cta-loc-wrap");
+                var locBtn = document.getElementById("article-cta-loc-btn");
+                var locMenu = document.getElementById("article-cta-loc-menu");
+                var locField = document.getElementById("article-cta-location");
+                if (!form) return;
+
+                function closeLoc() {
+                    locWrap.classList.remove("open");
+                    locBtn.setAttribute("aria-expanded", "false");
+                }
+
+                function openLoc() {
+                    locWrap.classList.add("open");
+                    locBtn.setAttribute("aria-expanded", "true");
+                }
+
+                locBtn.addEventListener("click", function () {
+                    locWrap.classList.contains("open") ? closeLoc() : openLoc();
+                });
+
+                locMenu
+                    .querySelectorAll(".article-cta-loc-opt")
+                    .forEach(function (opt) {
+                        opt.addEventListener("click", function () {
+                            var val = opt.getAttribute("data-value") || "";
+                            locField.value = val;
+                            locMenu
+                                .querySelectorAll(".article-cta-loc-opt")
+                                .forEach(function (o) {
+                                    o.classList.toggle(
+                                        "is-selected",
+                                        o === opt,
+                                    );
+                                });
+                            locBtn.textContent = opt.textContent.trim();
+                            locBtn.classList.add("has-value");
+                            closeLoc();
+                        });
+                    });
+
+                document.addEventListener("click", function (e) {
+                    if (!locWrap.contains(e.target)) closeLoc();
+                });
+
+                form.addEventListener("submit", function (e) {
+                    e.preventDefault();
+                    var btn = form.querySelector(".article-cta-submit");
+                    var fd = new FormData(form);
+                    if (window._mbsTracking)
+                        fd = window._mbsTracking.appendToFormData(fd);
+                    btn.textContent = "Sending\u2026";
+                    btn.disabled = true;
+                    fetch(WEBHOOK, { method: "POST", body: fd })
+                        .then(function () {
+                            formWrap.style.display = "none";
+                            confirmDiv.style.display = "block";
+                        })
+                        .catch(function () {
+                            formWrap.style.display = "none";
+                            confirmDiv.style.display = "block";
+                        });
+                });
+
+                /* Reset form when article overlay closes */
+                var articleOverlay = document.getElementById("article-overlay");
+                if (articleOverlay) {
+                    var observer = new MutationObserver(function () {
+                        if (!articleOverlay.classList.contains("is-open")) {
+                            setTimeout(function () {
+                                formWrap.style.display = "";
+                                confirmDiv.style.display = "none";
+                                form.reset();
+                                locField.value = "";
+                                locBtn.textContent = "Select server location";
+                                locBtn.classList.remove("has-value");
+                                locMenu
+                                    .querySelectorAll(".article-cta-loc-opt")
+                                    .forEach(function (o) {
+                                        o.classList.remove("is-selected");
+                                    });
+                                var btn = form.querySelector(
+                                    ".article-cta-submit",
+                                );
+                                btn.textContent = "Start Free Trial \u2192";
+                                btn.disabled = false;
+                            }, 300);
+                        }
+                    });
+                    observer.observe(articleOverlay, {
+                        attributes: true,
+                        attributeFilter: ["class"],
+                    });
+                }
+
+                /* Schedule button → show_calendar() */
+                var schedBtn = document.getElementById("article-schedule-btn");
+                if (schedBtn) {
+                    schedBtn.addEventListener("click", function () {
+                        if (typeof window.show_calendar === "function")
+                            window.show_calendar();
+                    });
+                }
+            })();
+        </script>
+
         <script>
             (function () {
                 "use strict";