/* ============================================================ DEMO BAR + LOCK SCREEN — 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 lock screen, bar, and extra page spacing all disappear. ============================================================ */ /* ---------- Lock screen overlay ---------- */ .lock-screen { position: fixed; inset: 0; z-index: 9999; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(14, 36, 56, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .lock-screen.is-visible { display: flex; } .lock-card { background: #fff; border-radius: 18px; padding: 48px 40px 40px; max-width: 420px; width: 100%; text-align: center; box-shadow: 0 28px 80px rgba(0, 0, 0, 0.45); font-family: "Poppins", system-ui, -apple-system, sans-serif; } .lock-icon { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; border-radius: 50%; background: #eef2f6; margin: 0 auto 22px; color: #16334f; } .lock-eyebrow { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; color: #e1762f; margin-bottom: 10px; } .lock-title { font-size: 1.55rem; font-weight: 700; color: #16334f; line-height: 1.25; margin-bottom: 12px; } .lock-body { font-size: 0.92rem; color: #5b6b7b; line-height: 1.65; margin-bottom: 28px; } .lock-body strong { color: #243648; } .lock-cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 16px 24px; border-radius: 10px; background: #e1762f; color: #fff; font-family: "Poppins", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 1rem; text-decoration: none; transition: background 0.2s ease, transform 0.15s ease; margin-bottom: 14px; } .lock-cta:hover { background: #c75f1d; transform: translateY(-1px); } .lock-note { font-size: 0.78rem; color: #97a8b5; line-height: 1.5; } @media (max-width: 500px) { .lock-card { padding: 36px 24px 32px; } .lock-title { font-size: 1.35rem; } } /* ---------- Demo bar (bottom strip) ---------- */ /* Room at the bottom so the fixed bar never hides the footer. */ body { padding-bottom: 60px; } .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: #e1762f; /* orange — deliberately contrasts the green/navy site */ color: #fff; text-align: center; box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.28); font-family: "Poppins", system-ui, -apple-system, sans-serif; transition: background 0.2s ease; } .demo-bar:hover { background: #c75f1d; } .demo-bar__text { font-size: 0.95rem; font-weight: 500; color: rgba(255, 255, 255, 0.94); } .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: var(--brand, #16334f); color: #fff; 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: var(--brand-dark, #0e2438); transform: translateY(-1px); } @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; } }