diff --git a/index.html b/index.html index 16b56bc..7753996 100644 --- a/index.html +++ b/index.html @@ -2083,6 +2083,167 @@ color: var(--gold); } + /* ── Article CTA panel ─────────────────────────────────────────── */ + #article-cta-panel { + position: absolute; + bottom: 28px; + right: 28px; + width: 234px; + background: #fdf6ee; + 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; + z-index: 10; + } + + .article-cta-heading { + font-family: Georgia, "Times New Roman", serif; + font-size: 0.83rem; + font-weight: 700; + color: #3e2723; + margin: 0 0 3px; + line-height: 1.3; + } + + .article-cta-sub { + font-size: 0.71rem; + color: #8d6e63; + font-style: italic; + margin: 0 0 12px; + } + + .article-cta-field { + display: block; + width: 100%; + box-sizing: border-box; + background: #fff8f0; + 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: #3e2723; + margin-bottom: 8px; + outline: none; + transition: border-color 0.2s; + } + + .article-cta-field::placeholder { color: #a1887f; } + .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: #fff8f0; + 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: #a1887f; + text-align: left; + cursor: pointer; + outline: none; + transition: border-color 0.2s; + position: relative; + } + + .article-cta-loc-btn.has-value { color: #3e2723; } + .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: #8d6e63; + font-size: 0.75rem; + pointer-events: none; + } + + .article-cta-loc-menu { + display: none; + position: absolute; + bottom: calc(100% + 4px); + left: 0; + right: 0; + background: #fdf6ee; + 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: #4e342e; + 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: #fff; + 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: #3e2723; + margin: 0 0 6px; + } + + .article-cta-confirm-sub { + font-family: "Segoe UI", system-ui, sans-serif; + font-size: 0.75rem; + color: #8d6e63; + margin: 0; + line-height: 1.5; + } + @media (max-width: 860px) { #article-box { height: 90vh; @@ -2100,6 +2261,7 @@ font-size: 0.95rem; column-width: 280px; } + #article-cta-panel { display: none; } } #modal-confirm .confirm-title { @@ -2465,6 +2627,53 @@
+ +Try ODOO Free — 4 Weeks
+No credit card required
+ +