+ Try ODOO Free — 4 Weeks +
++ No credit card required +
+ +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 @@ +
+ Try ODOO Free — 4 Weeks +
++ No credit card required +
+ +