diff --git a/configs/merchant-landing/index.html b/configs/merchant-landing/index.html index c87c38b..93c792a 100644 --- a/configs/merchant-landing/index.html +++ b/configs/merchant-landing/index.html @@ -301,6 +301,11 @@ .app-ico.stroke-ico path, .app-ico.stroke-ico circle, .app-ico.stroke-ico rect { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } + .app-ico.branch-ico circle { fill: currentColor; stroke: none; } + .app-ico.branch-ico path { + fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; + } + .app-btn.hub .app-ico.branch-ico { color: #f0c86a; } .app-btn:not(.ios):not(.hub) .app-ico { color: #c4b5fd; } .app-btn.ios .app-ico { color: #f0c86a; } .hub-icons { display: inline-flex; align-items: center; gap: 0.4rem; } @@ -421,8 +426,9 @@ .wallet-fold-chevron { flex-shrink: 0; transition: transform 0.15s ease; - color: var(--accent2); - font-size: 0.9rem; + color: #3ecfbf; + font-size: 1.1rem; + font-weight: 700; } .wallet-fold.open .wallet-fold-chevron { transform: rotate(90deg); } .wallet-fold-body { @@ -432,6 +438,72 @@ } .wallet-fold.open .wallet-fold-body { display: block; } .wallet-fold-body .app-links { margin-top: 0.65rem; } + /* Expandable package / source rows (blue › like bank) */ + button.app-btn.cli-toggle { + flex: 1 1 100%; + width: 100%; + justify-content: flex-start; + gap: 0.5rem; + font: inherit; + font-weight: 700; + font-size: 0.88rem; + cursor: pointer; + color: #e9d5ff; + border-color: rgba(167, 139, 250, 0.4); + background: rgba(0,0,0,0.28); + } + button.app-btn.cli-toggle .cli-chevron { + margin-left: auto; + flex-shrink: 0; + color: #3ecfbf; + font-size: 1.15rem; + font-weight: 700; + line-height: 1; + transition: transform 0.15s ease; + } + button.app-btn.cli-toggle[aria-expanded="true"] .cli-chevron { transform: rotate(90deg); } + button.app-btn.cli-toggle[aria-expanded="true"] { + border-color: rgba(62, 207, 191, 0.5); + background: rgba(62, 207, 191, 0.08); + } + .cli-panel { + display: none; + width: 100%; + margin: 0.35rem 0 0.55rem; + text-align: left; + border: 1px solid rgba(167, 139, 250, 0.32); + border-radius: 12px; + background: rgba(0, 0, 0, 0.28); + padding: 0.75rem 0.85rem 0.9rem; + box-sizing: border-box; + } + .cli-panel.open { display: block; } + .cli-panel .cli-lead { + margin: 0 0 0.55rem; + color: var(--muted); + font-size: 0.84rem; + line-height: 1.4; + } + .cli-panel .cli-lead a { color: #c4b5fd; } + .cli-block { + margin: 0; + padding: 0.55rem 0.65rem; + border-radius: 10px; + background: rgba(0, 0, 0, 0.4); + border: 1px solid rgba(167, 139, 250, 0.22); + color: #e8e0d0; + font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; + font-size: 0.7rem; + line-height: 1.45; + overflow-x: auto; + white-space: pre; + user-select: all; + } + .cli-block .cmt { color: #8a9a90; } + .sym-gold path, .sym-gold circle { fill: #f0c86a; stroke: #f0c86a; } + .sym-gold path[data-ring], .sym-gold circle[data-ring] { fill: none; stroke: #f0c86a; } + .sym-blue path, .sym-blue circle { fill: #3ecfbf; stroke: #3ecfbf; } + .sym-blue path[data-ring], .sym-blue circle[data-ring] { fill: none; stroke: #3ecfbf; } @@ -505,6 +577,35 @@ Web browsers (experimental) + + @@ -872,14 +973,28 @@ var fold = document.getElementById("wallet-fold"); var btn = document.getElementById("wallet-fold-toggle"); var body = document.getElementById("wallet-fold-body"); - if (!fold || !btn || !body) return; - btn.addEventListener("click", function () { - var open = !fold.classList.contains("open"); - fold.classList.toggle("open", open); - btn.setAttribute("aria-expanded", open ? "true" : "false"); - if (open) body.removeAttribute("hidden"); - else body.setAttribute("hidden", ""); - }); + if (fold && btn && body) { + btn.addEventListener("click", function () { + var open = !fold.classList.contains("open"); + fold.classList.toggle("open", open); + btn.setAttribute("aria-expanded", open ? "true" : "false"); + if (open) body.removeAttribute("hidden"); + else body.setAttribute("hidden", ""); + }); + } + function wireCli(btnId, bodyId) { + var b = document.getElementById(btnId); + var p = document.getElementById(bodyId); + if (!b || !p) return; + b.addEventListener("click", function () { + var open = !p.classList.contains("open"); + p.classList.toggle("open", open); + b.setAttribute("aria-expanded", open ? "true" : "false"); + if (open) p.removeAttribute("hidden"); + else p.setAttribute("hidden", ""); + }); + } + wireCli("pkg-fold-toggle", "pkg-fold-body"); })();