{"id":11,"date":"2026-06-14T18:39:38","date_gmt":"2026-06-14T18:39:38","guid":{"rendered":"https:\/\/demo.alovio.org\/wp\/live-demos\/"},"modified":"2026-06-14T18:50:31","modified_gmt":"2026-06-14T18:50:31","slug":"live-demos","status":"publish","type":"page","link":"https:\/\/demo.alovio.org\/wp\/","title":{"rendered":"Live demos"},"content":{"rendered":"<div class=\"alc-launch\">\n<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=JetBrains+Mono:wght@500;600&display=swap');\n  .alc-launch{ --coal:#0c0a09; --panel:#15100e; --line:#2c2420; --ash:#a8a29e; --ink:#fafaf9; --f1:#f97316; --f2:#fbbf24;\n    background:var(--coal); color:var(--ink); font-family:'Space Grotesk',system-ui,sans-serif;\n    width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:54px 22px 72px; }\n  .alc-launch *{ box-sizing:border-box; }\n  .alc-wrap{ max-width:1040px; margin:0 auto; }\n  .alc-kicker{ font:600 .78rem\/1 'JetBrains Mono',monospace; letter-spacing:.22em; text-transform:uppercase; color:var(--f1); margin-bottom:14px; }\n  .alc-launch h1{ font-size:clamp(2rem,5vw,3rem); font-weight:700; letter-spacing:-.5px; margin:0 0 12px; color:var(--ink); }\n  .alc-launch h1 .fl{ background:linear-gradient(120deg,var(--f1),var(--f2)); -webkit-background-clip:text; background-clip:text; color:transparent; }\n  .alc-lede{ color:var(--ash); font-size:1.05rem; max-width:60ch; margin:0 0 36px; }\n  .alc-grid{ display:grid; grid-template-columns:minmax(0,440px); gap:18px; }\n  @media(max-width:560px){ .alc-grid{ grid-template-columns:1fr; } }\n  .alc-card{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:15px; padding:22px 20px 20px; overflow:hidden;\n    transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease; min-height:176px; display:flex; flex-direction:column; }\n  .alc-card:hover{ transform:translateY(-4px); border-color:#5a3a1e; box-shadow:0 18px 38px -20px rgba(249,115,22,.55); }\n  .alc-card__tag{ font:600 .68rem\/1 'JetBrains Mono',monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--f2); margin-bottom:11px; }\n  .alc-card h3{ font-size:1.22rem; font-weight:700; margin:0 0 7px; color:var(--ink); }\n  .alc-card p{ color:var(--ash); font-size:.92rem; margin:0; flex:1; }\n  .alc-actions{ display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; opacity:0; transform:translateY(6px); transition:opacity .16s ease,transform .16s ease; }\n  .alc-card:hover .alc-actions{ opacity:1; transform:none; }\n  @media(hover:none){ .alc-actions{ opacity:1; transform:none; } }\n  .alc-actions a{ flex:1 1 0; min-width:0; text-align:center; text-decoration:none; font-weight:600; font-size:.85rem; padding:9px 8px; border-radius:9px; white-space:nowrap; }\n  .alc-actions .u{ background-image:linear-gradient(135deg,var(--f1),var(--f2)); color:#fff; }\n  .alc-actions .a{ background:transparent; color:var(--ink); border:1px solid var(--line); }\n  .alc-actions .a:hover{ border-color:var(--f1); color:var(--f2); }\n  .alc-foot{ margin-top:34px; color:#57514d; font-size:.85rem; }\n<\/style>\n<div class=\"alc-wrap\">\n<div class=\"alc-kicker\">\/\/ alovio for wordpress<\/div>\n<h1>The calculator, <span class=\"fl\">live.<\/span><\/h1>\n<p class=\"alc-lede\">The Alovio Calculator running in a real WordPress site. Open it as a <b>user<\/b> (the live quote form) or as the <b>admin<\/b> (the formula &amp; field builder).<\/p>\n<div class=\"alc-grid\">\n<div class=\"alc-card\">\n<div class=\"alc-card__tag\">WordPress<\/div>\n<h3>Alovio Calculator<\/h3>\n<p>Cost, price &amp; quote calculator builder \u2014 formulas, 11 field types, conditional logic and a live total.<\/p>\n<div class=\"alc-actions\">\n        <a class=\"u\" href=\"\/wp\/calculator\/\">View as user<\/a><br \/>\n        <a class=\"a\" href=\"\/wp\/?demo_admin=alovio-calculator\">View as admin<\/a>\n      <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p class=\"alc-foot\">Sandbox \u2014 explore freely, everything resets hourly.<\/p>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\/\/ alovio for wordpress The calculator, live. The Alovio Calculator running in a real WordPress site. Open it as a user (the live quote form) or as the admin (the formula &amp; field builder). WordPress Alovio Calculator Cost, price &amp; quote calculator builder \u2014 formulas, 11 field types, conditional logic and a live total. View [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-11","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages\/11","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/comments?post=11"}],"version-history":[{"count":1,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions"}],"predecessor-version":[{"id":12,"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/pages\/11\/revisions\/12"}],"wp:attachment":[{"href":"https:\/\/demo.alovio.org\/wp\/wp-json\/wp\/v2\/media?parent=11"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}