/* ============================================================ DEMO BAR + DEMO LOCK OVERLAY — shown only on demo deployments. ⛔ TO LAUNCH THE REAL SITE (after the customer subscribes): 1. Delete the line in of index.html 2. Delete the block at the end of That's it — the bar, the lock overlay, and the extra page spacing all disappear. ============================================================ */ /* Room at the bottom so the fixed bar never hides the footer. */ body { padding-bottom: 60px; } /* ---------------- demo bar ---------------- */ .demo-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; padding: 12px 20px; background: #B4472B; /* terracotta — contrasts the navy/gold page */ color: #fff; text-align: center; box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.28); font-family: "Inter", system-ui, -apple-system, sans-serif; transition: background 0.2s ease; } .demo-bar:hover { background: #C2552F; } .demo-bar__text { font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); } .demo-bar__text strong { font-weight: 700; color: #fff; } .demo-bar__cta { display: inline-flex; align-items: center; gap: 8px; padding: 9px 20px; border-radius: 8px; background: #ffffff; color: #B4472B; font-weight: 700; font-size: 0.92rem; white-space: nowrap; transition: background 0.2s ease, transform 0.15s ease; } .demo-bar:hover .demo-bar__cta { background: #F6EFE4; transform: translateY(-1px); } /* ---------------- lock overlay (appears after 3s) ---------------- */ .demo-lock { position: fixed; inset: 0; z-index: 1100; /* above the demo bar */ display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 32, 59, 0.45); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; font-family: "Inter", system-ui, -apple-system, sans-serif; } .demo-lock.show { opacity: 1; pointer-events: auto; } .demo-lock__card { background: #fff; border-radius: 16px; padding: 40px 36px; max-width: 440px; width: 100%; text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); transform: translateY(16px) scale(0.96); transition: transform 0.35s ease; } .demo-lock.show .demo-lock__card { transform: none; } .demo-lock__icon { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: #04203B; color: #fff; display: flex; align-items: center; justify-content: center; } .demo-lock__title { font-size: 1.35rem; font-weight: 800; color: #04203B; line-height: 1.25; margin: 0; } .demo-lock__text { font-size: 0.95rem; color: #65717D; line-height: 1.6; margin: 10px 0 24px; } .demo-lock__cta { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 24px; border-radius: 9px; background: #B4472B; color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; } .demo-lock__cta:hover { background: #C2552F; transform: translateY(-1px); } /* ---------------- mobile ---------------- */ @media (max-width: 600px) { body { padding-bottom: 104px; } .demo-bar { gap: 10px; padding: 10px 16px; } .demo-bar__text { font-size: 0.85rem; } .demo-bar__cta { padding: 8px 16px; font-size: 0.85rem; } .demo-lock__card { padding: 32px 24px; } .demo-lock__title { font-size: 1.2rem; } }